diff --git a/packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx b/packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx index 73d7dd4..81ea7c7 100644 --- a/packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx +++ b/packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx @@ -1,9 +1,10 @@ -import React from 'react'; +import React, { useContext } from 'react'; import { IRecord, VideoPlayerCardProps, ViewLargerImageModalRef } from '@zhst/biz'; import WindowToggle from './components/WindowToggle'; import WarningRecordList from './components/WarningRecordList'; - +import { ConfigProvider } from '@zhst/meta'; interface RealTimeMonitorProps { + prefixCls?: string videoDataSource?: VideoPlayerCardProps[]; handleWindowClick?: (key?: string) => void; handleCloseButtonClick?: (key?: string) => void; @@ -32,7 +33,11 @@ interface RealTimeMonitorProps { export const RealTimeMonitor: React.FC = (props) => { - const { videoDataSource, + const { ConfigContext } = ConfigProvider; + const { getPrefixCls } = useContext(ConfigContext); + const { + prefixCls: customizePrefixCls, + videoDataSource, handleWindowClick, handleCloseButtonClick, selectedWindowKey, @@ -43,9 +48,10 @@ export const RealTimeMonitor: React.FC = (props) => { selectedRecordId, isRecordListLoading, } = props + const componentName = getPrefixCls('biz-real-time-monitor', customizePrefixCls); return ( -
+
= (props) => { - const componentName = `zhst-biz-video-player-card`; - const { showType, imgSrc, videoSrc, cardProps, isWindowLoading, errorReasonText, size, title, handleCloseButtonClick, handleWindowClick, windowKey, selectedWindowKey = '' } = props; + const { ConfigContext } = ConfigProvider; + const { getPrefixCls } = useContext(ConfigContext); + const { prefixCls: customizePrefixCls, showType, imgSrc, videoSrc, cardProps, isWindowLoading, errorReasonText, size, title, handleCloseButtonClick, handleWindowClick, windowKey, selectedWindowKey = '' } = props; + const componentName = getPrefixCls('biz-video-player-card', customizePrefixCls); const [cardContent, setCardContent] = useState(null); const { useToken } = theme const { token } = useToken() diff --git a/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx b/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx index f4475bd..815f017 100644 --- a/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx +++ b/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx @@ -1,7 +1,8 @@ -import React, { useImperativeHandle, useRef, useState, forwardRef } from 'react'; +import React, { useImperativeHandle, useRef, useState, forwardRef, useContext } from 'react'; import { Modal, ModalProps, Space, SpaceProps } from 'antd'; import theme from 'antd/lib/theme'; import { DownloadOutlined } from '@ant-design/icons'; +import { ConfigProvider } from '@zhst/meta'; import './index.less' type ViewLargerImageModalParams = { @@ -18,6 +19,7 @@ export interface ViewLargerImageModalRef { } export interface ViewLargerImageModalProps { + prefixCls?: string imgStyle?: React.CSSProperties; downloadImg?: (imgSrc?: string) => void; title?: string; @@ -29,7 +31,10 @@ export interface ViewLargerImageModalProps { export const ViewLargerImageModal = forwardRef( (props, ref) => { - const { modalProps, downloadImg, imgStyle, title = '预警大图', downloadText = '下载大图', spaceProps } = props + const { ConfigContext } = ConfigProvider; + const { getPrefixCls } = useContext(ConfigContext); + const { prefixCls: customizePrefixCls, modalProps, downloadImg, imgStyle, title = '预警大图', downloadText = '下载大图', spaceProps } = props + const componentName = getPrefixCls('biz-warning-larger-image', customizePrefixCls); const { useToken } = theme const { token } = useToken() const [open, setOpen] = useState(false); @@ -53,7 +58,7 @@ export const ViewLargerImageModal = forwardRef void; style?: React.CSSProperties; @@ -63,9 +65,11 @@ export interface WarningRecordCardProps { }; export const WarningRecordCard: React.FC = (props) => { - - const componentName = `zhst-biz-warning-record-card`; - const { record, onRecordClick, style, cardProps, selectedRecordId, cardStyle, imgStyle } = props; + + const { ConfigContext } = ConfigProvider; + const { getPrefixCls } = useContext(ConfigContext); + const { prefixCls: customizePrefixCls, record, onRecordClick, style, cardProps, selectedRecordId, cardStyle, imgStyle } = props; + const componentName = getPrefixCls('biz-warning-record-card', customizePrefixCls); const { imgSrc, id, warningType, warningInfo = [], cabietText, warningTime, warningTimestamp, warningTimeFormat = 'YYYY-MM-DD HH:mm:ss' } = record || {} const formattedDate = warningTimestamp ? dayjs(warningTimestamp).format(warningTimeFormat) : ''; const warningTimeShow = warningTime ? warningTime : formattedDate diff --git a/packages/meta/src/ButtonList/ButtonList.tsx b/packages/meta/src/ButtonList/ButtonList.tsx new file mode 100644 index 0000000..d610916 --- /dev/null +++ b/packages/meta/src/ButtonList/ButtonList.tsx @@ -0,0 +1,120 @@ +import React, { useState, useMemo, ReactNode, useRef, useEffect, useContext } from 'react'; +import { Button, Col, Dropdown, Row } from 'antd'; +import { Gutter } from 'antd/es/grid/row'; +import { ConfigContext } from '../config-provider'; +import './index.less'; + + +export interface IButtonItem { + key: string; + text: ReactNode; + onClick: () => void; + children?: Array>; + // 用于排序 + weight?: number; + icon?: ReactNode + className?: string; + isCenter?: boolean; +}; +export interface IButtonItemWithoutWeight extends Omit { } +export interface ButtonListProps { + prefixCls?: string; + buttons: Array + gutter?: Gutter; +}; + +const ButtonList: React.FC = (props) => { + + const { getPrefixCls } = useContext(ConfigContext); + const { buttons, gutter, prefixCls: customizePrefixCls } = props + const componentName = getPrefixCls('button-list', customizePrefixCls); + const buttonListRef = useRef(null); + const centerButtonRef = useRef(null); + const [activeKey, setActiveKey] = useState(null); + const [buttonListWrapMarginLeft, setButtonListWrapMarginLeft] = useState(0) + + const sortedButtons = useMemo(() => { + let buttonList = buttons.map((btn, index) => { + if (btn.weight === undefined) { + return { ...btn, weight: index } + } else { + return { ...btn, weight: btn.weight } + } + }) + const newButtonList = buttonList?.sort((a, b) => a.weight - b.weight) + return newButtonList; + }, [buttons]); + + const handleButtonClick = (key: string, item: IButtonItem) => { + setActiveKey(activeKey === key ? null : key); + if (!item.children) { + item.onClick(); + } + }; + + useEffect(() => { + // 如果获取不到 需要居中的 + if (!centerButtonRef) return + // 获取 buttonList 宽度 + const buttonListWidth: number = buttonListRef.current?.offsetWidth as number; + // 获取 centerButton 宽度 + const centerButtonWidth: number = centerButtonRef.current?.offsetWidth as number + // 获取 buttonList 相对视口左偏移量 + const buttonListOffset: number = buttonListRef.current?.offsetLeft as number + // 获取 buttonList 中心点 距视口左边距离 + const buttonListCenterOffset = buttonListOffset + buttonListWidth / 2 + // 获取 centerButton 中心点 相对视口左偏移量 + const centerButtonOffset: number = centerButtonRef.current?.offsetLeft as number + centerButtonWidth / 2 + /* + 计算 centerButton 修正距离 + 用 buttonList 中心点 距视口左边距离 - centerButton 中心点 相对视口左偏移量 + 作为 buttonListWrap marginLeft 修正距离 + */ + + // 这里为什么要 * 2 由于 justify-content: center; marginLeft 需要 * 2才是 正确的值 具体原因 还在研究 + const buttonListWrapMarginLeft = (buttonListCenterOffset - centerButtonOffset) * 2 + setButtonListWrapMarginLeft(buttonListWrapMarginLeft) + + }, []) + + + + + return ( +
+ + {sortedButtons?.map((item) => ( + + {item.children ? ( + ({ + key: child.key, + label: {child.text}, + onClick: () => child.onClick(), + })), + }} + open={activeKey === item.key} + onOpenChange={(visible: boolean) => { + if (!visible) setActiveKey(null); + }} + trigger={['click']} + > + + + ) : ( + + )} + + ))} + +
+ ); +}; + +export default ButtonList; \ No newline at end of file diff --git a/packages/meta/src/ButtonList/demo/base.tsx b/packages/meta/src/ButtonList/demo/base.tsx new file mode 100644 index 0000000..13be8c3 --- /dev/null +++ b/packages/meta/src/ButtonList/demo/base.tsx @@ -0,0 +1,62 @@ +import React, { useState, useMemo } from 'react'; +import { Space } from 'antd' +import { DownloadOutlined } from '@ant-design/icons'; +import { ButtonList } from '@zhst/meta' +import { ButtonListProps } from '../ButtonList'; +import "./index.less" + +export default () => { + const [isPlay, setIsPlay] = useState(true); + + const props: ButtonListProps = useMemo(() => { + return { + buttons: [ + { + key: 'button1', + text: '一级按钮1', + onClick: () => console.log('一级按钮1被点击'), + children: [ + { key: 'subButton1-1', text: '二级按钮1-1', onClick: () => console.log('二级按钮1-1被点击'), icon: }, + { key: 'subButton1-2', text: '二级按钮1-2', onClick: () => console.log('二级按钮1-2被点击') }, + ], + // icon:, + }, + { + key: 'button2', + text: '一级按钮2', + onClick: () => console.log('一级按钮2被点击'), + }, + { + key: '播放', + text: isPlay ? '播放按钮' : '图片按钮', + onClick: () => { setIsPlay(!isPlay) }, + // isCenter: true + }, + { + key: 'button3', + text: '一级按钮3', + onClick: () => console.log('一级按钮3被点击'), + }, + { + key: 'button4', + text: '一级按钮4', + onClick: () => console.log('一级按钮4被点击'), + + }, + { + key: 'button5', + text: '一级按钮5', + onClick: () => console.log('一级按钮5被点击'), + children: [ + { key: 'subButton5-1', text: '二级按钮5-1', onClick: () => console.log('二级按钮5-1被点击') }, + ], + }, + ], + } + }, [isPlay]) + return ( + + + + ) +} \ No newline at end of file diff --git a/packages/meta/src/ButtonList/demo/index.less b/packages/meta/src/ButtonList/demo/index.less new file mode 100644 index 0000000..8e145ab --- /dev/null +++ b/packages/meta/src/ButtonList/demo/index.less @@ -0,0 +1,5 @@ +#buttonlist-demo-base { + .dumi-default-previewer-demo>div { + width: 100%; + } +} \ No newline at end of file diff --git a/packages/meta/src/ButtonList/index.less b/packages/meta/src/ButtonList/index.less new file mode 100644 index 0000000..3ec235b --- /dev/null +++ b/packages/meta/src/ButtonList/index.less @@ -0,0 +1,15 @@ + +.zhst-button-list { + width: 100%; + display: flex; + justify-content: center; + + .ant-btn-text:hover{ + background: none !important ; + color: #247fdb !important; + } +} + + + + diff --git a/packages/meta/src/ButtonList/index.md b/packages/meta/src/ButtonList/index.md new file mode 100644 index 0000000..980fd8c --- /dev/null +++ b/packages/meta/src/ButtonList/index.md @@ -0,0 +1,19 @@ +--- +group: 通用 +category: Components +subtitle: 按钮列表 +title: ButtonList 按钮列表组件 +--- + +# ButtonList 按钮列表组件 + + + +## API + +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| ---- | ---- | ---- | ------ | ---- | +| buttons | 传入按钮列表 |ButtonItem[]| - | - | +| customButton | 传入自定义按钮 | ButtonItem | - | - | +| gutter | 控制间隙 | Gutter | - | - | + diff --git a/packages/meta/src/ButtonList/index.tsx b/packages/meta/src/ButtonList/index.tsx new file mode 100644 index 0000000..496c280 --- /dev/null +++ b/packages/meta/src/ButtonList/index.tsx @@ -0,0 +1,4 @@ +import ButtonList from './ButtonList' + + +export default ButtonList diff --git a/packages/meta/src/index.tsx b/packages/meta/src/index.tsx index 50e675c..bf1a157 100644 --- a/packages/meta/src/index.tsx +++ b/packages/meta/src/index.tsx @@ -93,3 +93,4 @@ export { default as App } from './app'; export type { AppProps } from './app'; export { default as notification } from './notification'; export type { ArgsProps as NotificationArgsProps } from './notification'; +export { default as ButtonList } from './ButtonList'