From d8dab224cae1f3fe2f849075797151b0430a28b5 Mon Sep 17 00:00:00 2001 From: YuanHongbo <782242184@qq.com> Date: Thu, 29 Feb 2024 13:48:50 +0800 Subject: [PATCH 1/6] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20=E6=8C=89?= =?UTF-8?q?=E9=92=AE=E5=88=97=E8=A1=A8=20ButtonList?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/meta/src/ButtonList/ButtonList.tsx | 79 ++++++++++++++++++ packages/meta/src/ButtonList/index.less | 14 ++++ packages/meta/src/ButtonList/index.md | 90 +++++++++++++++++++++ packages/meta/src/ButtonList/index.tsx | 4 + packages/meta/src/index.tsx | 2 +- 5 files changed, 188 insertions(+), 1 deletion(-) create mode 100644 packages/meta/src/ButtonList/ButtonList.tsx create mode 100644 packages/meta/src/ButtonList/index.less create mode 100644 packages/meta/src/ButtonList/index.md create mode 100644 packages/meta/src/ButtonList/index.tsx diff --git a/packages/meta/src/ButtonList/ButtonList.tsx b/packages/meta/src/ButtonList/ButtonList.tsx new file mode 100644 index 0000000..f5e7dad --- /dev/null +++ b/packages/meta/src/ButtonList/ButtonList.tsx @@ -0,0 +1,79 @@ +import React, {useState ,useMemo ,ReactNode} from 'react'; +import './index.less'; +import { Button, Col, Dropdown, Row } from 'antd/es'; +import { Gutter } from '../grid/row'; + +type ButtonItem = { + key: string; + text: ReactNode; + onClick: () => void; + children?: Array; + // 用于排序 + weight: number; + icon?: ReactNode + className?: string; +}; + +type Props = { + buttons: Array + customButton?: ButtonItem; + gutter?: Gutter; +}; + +const componentName = 'zhst-button-list'; + +const ButtonList: React.FC = (Props) => { + const { buttons, customButton ,gutter} = Props + const [activeKey, setActiveKey] = useState(null); + + + const sortedButtons = useMemo(() => { + let buttonList=[...buttons] + + if (customButton) { + buttonList = [...buttons,customButton] + } + + return buttonList.sort((a, b) => a.weight - b.weight); + }, [buttons, customButton]); + + const handleButtonClick = (key: string, item: ButtonItem) => { + setActiveKey(activeKey === key ? null : key); + if (!item.children ) { + item.onClick(); + } + }; + + 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/index.less b/packages/meta/src/ButtonList/index.less new file mode 100644 index 0000000..a0eae06 --- /dev/null +++ b/packages/meta/src/ButtonList/index.less @@ -0,0 +1,14 @@ + + + + +.zhst-button-list { + .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..13e4592 --- /dev/null +++ b/packages/meta/src/ButtonList/index.md @@ -0,0 +1,90 @@ +--- +group: 通用 +category: Components +subtitle: 按钮列表 +title: ButtonList 按钮列表组件 +--- + +# ButtonList 按钮列表组件 + +```jsx +import React, { useState, useRef ,useMemo} from 'react'; +import { Button, Space } from 'antd' +import { DownloadOutlined } from '@ant-design/icons'; +import { ButtonList } from '@zhst/meta' + + + + + +export default () => { +const [isPlay,setIsPlay] = useState(true); + +const props = 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被点击') }, + ], + weight: 1, + // icon:, + }, + { + key: 'button2', + text: '一级按钮2', + onClick: () => console.log('一级按钮2被点击'), + children: null, + weight: 2, + }, + { + key: 'button3', + text: '一级按钮3', + onClick: () => console.log('一级按钮3被点击'), + children: null, + weight: 3, + }, + { + key: 'button4', + text: '一级按钮4', + onClick: () => console.log('一级按钮4被点击'), + weight: 4, + }, + { + key: 'button5', + text: '一级按钮5' , + onClick: () => console.log('一级按钮5被点击'), + children: [ + { key: 'subButton5-1', text: '二级按钮5-1', onClick: () => console.log('二级按钮5-1被点击') }, + ], + weight: 5, + }, + ], + customButton: + { + key: '播放', + text: isPlay ? '播放按钮' : '图片按钮', + onClick: () => {setIsPlay(!isPlay)}, + weight: 3.5, + } +}},[isPlay]) + return ( + + + + ) +} +``` + +## 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 544fb69..9fcf70f 100644 --- a/packages/meta/src/index.tsx +++ b/packages/meta/src/index.tsx @@ -80,4 +80,4 @@ export type { TooltipAlignConfig, TooltipProps, TooltipPlacement, TooltipPropsWi export { default as Tour } from './tour' export type { TourLocale, TourProps, TourStepProps } from './tour/interface' export { default as Segmented } from './segmented' -export type { SegmentedLabeledOption, SegmentedProps, SegmentedValue } from './segmented' +export { default as ButtonList } from './ButtonList' From 34af6f9c5eb489ddd577078fbb33101cb4ea612b Mon Sep 17 00:00:00 2001 From: YuanHongbo <782242184@qq.com> Date: Thu, 29 Feb 2024 13:53:47 +0800 Subject: [PATCH 2/6] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20=E6=8C=89?= =?UTF-8?q?=E9=92=AE=E5=88=97=E8=A1=A8=20ButtonList?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/meta/src/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/meta/src/index.tsx b/packages/meta/src/index.tsx index 9fcf70f..84e9055 100644 --- a/packages/meta/src/index.tsx +++ b/packages/meta/src/index.tsx @@ -80,4 +80,5 @@ export type { TooltipAlignConfig, TooltipProps, TooltipPlacement, TooltipPropsWi export { default as Tour } from './tour' export type { TourLocale, TourProps, TourStepProps } from './tour/interface' export { default as Segmented } from './segmented' +export type { SegmentedLabeledOption, SegmentedProps, SegmentedValue } from './segmented' export { default as ButtonList } from './ButtonList' From a3aefaf499aeaaa5c00bf88262e082fa7f6fa2f7 Mon Sep 17 00:00:00 2001 From: YuanHongbo <782242184@qq.com> Date: Sat, 20 Apr 2024 15:36:36 +0800 Subject: [PATCH 3/6] =?UTF-8?q?fix:=20=E5=AE=8C=E5=96=84=E5=A4=A7=E5=9B=BE?= =?UTF-8?q?=E3=80=80buttonList?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/meta/src/ButtonList/ButtonList.tsx | 90 ++++++++++++++------ packages/meta/src/ButtonList/demo/base.tsx | 69 +++++++++++++++ packages/meta/src/ButtonList/demo/index.less | 5 ++ packages/meta/src/ButtonList/index.less | 9 +- packages/meta/src/ButtonList/index.md | 73 +--------------- 5 files changed, 142 insertions(+), 104 deletions(-) create mode 100644 packages/meta/src/ButtonList/demo/base.tsx create mode 100644 packages/meta/src/ButtonList/demo/index.less diff --git a/packages/meta/src/ButtonList/ButtonList.tsx b/packages/meta/src/ButtonList/ButtonList.tsx index f5e7dad..22db3dc 100644 --- a/packages/meta/src/ButtonList/ButtonList.tsx +++ b/packages/meta/src/ButtonList/ButtonList.tsx @@ -1,54 +1,83 @@ -import React, {useState ,useMemo ,ReactNode} from 'react'; +import React, { useState, useMemo, ReactNode, useRef, useEffect } from 'react'; +import { Button, Col, Dropdown, Row } from 'antd'; +import { Gutter } from 'antd/es/grid/row'; import './index.less'; -import { Button, Col, Dropdown, Row } from 'antd/es'; -import { Gutter } from '../grid/row'; -type ButtonItem = { + +export interface IButtonItem { key: string; text: ReactNode; onClick: () => void; - children?: Array; + children?: Array>; // 用于排序 - weight: number; + weight: number; icon?: ReactNode className?: string; + isCenter?: boolean; }; - -type Props = { - buttons: Array - customButton?: ButtonItem; +export interface IButtonItemWithoutWeight extends Omit { } +export interface ButtonListProps { + buttons: Array gutter?: Gutter; }; const componentName = 'zhst-button-list'; -const ButtonList: React.FC = (Props) => { - const { buttons, customButton ,gutter} = Props +const ButtonList: React.FC = (Props) => { + const { buttons, gutter } = Props const [activeKey, setActiveKey] = useState(null); + const buttonListRef = useRef(null); + const [buttonListWrapMarginLeft, setButtonListWrapMarginLeft] = useState(0) + const centerButtonRef = useRef(null); const sortedButtons = useMemo(() => { - let buttonList=[...buttons] - - if (customButton) { - buttonList = [...buttons,customButton] - } + let buttonList = [...buttons] - return buttonList.sort((a, b) => a.weight - b.weight); - }, [buttons, customButton]); - const handleButtonClick = (key: string, item: ButtonItem) => { + return buttonList?.sort((a, b) => a.weight - b.weight); + }, [buttons]); + + const handleButtonClick = (key: string, item: IButtonItem) => { setActiveKey(activeKey === key ? null : key); - if (!item.children ) { + 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) => ( - +
+ + {sortedButtons?.map((item) => ( + {item.children ? ( = (Props) => { })), }} open={activeKey === item.key} - onOpenChange={(visible:boolean) => { + onOpenChange={(visible: boolean) => { if (!visible) setActiveKey(null); }} trigger={['click']} > - + ) : ( - + )} ))} diff --git a/packages/meta/src/ButtonList/demo/base.tsx b/packages/meta/src/ButtonList/demo/base.tsx new file mode 100644 index 0000000..fd7f191 --- /dev/null +++ b/packages/meta/src/ButtonList/demo/base.tsx @@ -0,0 +1,69 @@ +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被点击') }, + ], + weight: 1, + // icon:, + }, + { + key: 'button2', + text: '一级按钮2', + onClick: () => console.log('一级按钮2被点击'), + weight: 2, + }, + { + key: '播放', + text: isPlay ? '播放按钮' : '图片按钮', + onClick: () => { setIsPlay(!isPlay) }, + weight: 3, + isCenter: true + }, + { + key: 'button3', + text: '一级按钮3', + onClick: () => console.log('一级按钮3被点击'), + weight: 3, + }, + { + key: 'button4', + text: '一级按钮4', + onClick: () => console.log('一级按钮4被点击'), + weight: 4, + // isCenter: true + + }, + { + key: 'button5', + text: '一级按钮5', + onClick: () => console.log('一级按钮5被点击'), + children: [ + { key: 'subButton5-1', text: '二级按钮5-1', onClick: () => console.log('二级按钮5-1被点击') }, + ], + weight: 5, + }, + ], + } + }, [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 index a0eae06..3ec235b 100644 --- a/packages/meta/src/ButtonList/index.less +++ b/packages/meta/src/ButtonList/index.less @@ -1,10 +1,11 @@ - - - .zhst-button-list { + width: 100%; + display: flex; + justify-content: center; + .ant-btn-text:hover{ - background: none !important; + background: none !important ; color: #247fdb !important; } } diff --git a/packages/meta/src/ButtonList/index.md b/packages/meta/src/ButtonList/index.md index 13e4592..980fd8c 100644 --- a/packages/meta/src/ButtonList/index.md +++ b/packages/meta/src/ButtonList/index.md @@ -7,78 +7,7 @@ title: ButtonList 按钮列表组件 # ButtonList 按钮列表组件 -```jsx -import React, { useState, useRef ,useMemo} from 'react'; -import { Button, Space } from 'antd' -import { DownloadOutlined } from '@ant-design/icons'; -import { ButtonList } from '@zhst/meta' - - - - - -export default () => { -const [isPlay,setIsPlay] = useState(true); - -const props = 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被点击') }, - ], - weight: 1, - // icon:, - }, - { - key: 'button2', - text: '一级按钮2', - onClick: () => console.log('一级按钮2被点击'), - children: null, - weight: 2, - }, - { - key: 'button3', - text: '一级按钮3', - onClick: () => console.log('一级按钮3被点击'), - children: null, - weight: 3, - }, - { - key: 'button4', - text: '一级按钮4', - onClick: () => console.log('一级按钮4被点击'), - weight: 4, - }, - { - key: 'button5', - text: '一级按钮5' , - onClick: () => console.log('一级按钮5被点击'), - children: [ - { key: 'subButton5-1', text: '二级按钮5-1', onClick: () => console.log('二级按钮5-1被点击') }, - ], - weight: 5, - }, - ], - customButton: - { - key: '播放', - text: isPlay ? '播放按钮' : '图片按钮', - onClick: () => {setIsPlay(!isPlay)}, - weight: 3.5, - } -}},[isPlay]) - return ( - - - - ) -} -``` + ## API From e4a73f5ec12aad797d42b08f847978ddff95d39e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8B=91=E5=AE=8F=E5=8D=9A?= <9419827+yuan-hongbo@user.noreply.gitee.com> Date: Mon, 22 Apr 2024 12:12:17 +0800 Subject: [PATCH 4/6] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E6=8C=89=E9=92=AE?= =?UTF-8?q?=E6=8E=92=E5=BA=8F=E4=BC=A0=E5=8F=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/meta/src/ButtonList/ButtonList.tsx | 18 +++++++++++------- packages/meta/src/ButtonList/demo/base.tsx | 9 +-------- 2 files changed, 12 insertions(+), 15 deletions(-) diff --git a/packages/meta/src/ButtonList/ButtonList.tsx b/packages/meta/src/ButtonList/ButtonList.tsx index 22db3dc..9597fcf 100644 --- a/packages/meta/src/ButtonList/ButtonList.tsx +++ b/packages/meta/src/ButtonList/ButtonList.tsx @@ -10,7 +10,7 @@ export interface IButtonItem { onClick: () => void; children?: Array>; // 用于排序 - weight: number; + weight?: number; icon?: ReactNode className?: string; isCenter?: boolean; @@ -30,12 +30,16 @@ const ButtonList: React.FC = (Props) => { const [buttonListWrapMarginLeft, setButtonListWrapMarginLeft] = useState(0) const centerButtonRef = useRef(null); - const sortedButtons = useMemo(() => { - let buttonList = [...buttons] - - - return buttonList?.sort((a, b) => a.weight - b.weight); + 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) => { @@ -64,7 +68,7 @@ const ButtonList: React.FC = (Props) => { 作为 buttonListWrap marginLeft 修正距离 */ - // 这里为什么要 * 2 由于 justify-content: center; marginLeft 需要 * 2才是 正确的值 具体原因 还在研究 + // 这里为什么要 * 2 由于 justify-content: center; marginLeft 需要 * 2才是 正确的值 具体原因 还在研究 const buttonListWrapMarginLeft = (buttonListCenterOffset - centerButtonOffset) * 2 setButtonListWrapMarginLeft(buttonListWrapMarginLeft) diff --git a/packages/meta/src/ButtonList/demo/base.tsx b/packages/meta/src/ButtonList/demo/base.tsx index fd7f191..13be8c3 100644 --- a/packages/meta/src/ButtonList/demo/base.tsx +++ b/packages/meta/src/ButtonList/demo/base.tsx @@ -19,34 +19,28 @@ export default () => { { key: 'subButton1-1', text: '二级按钮1-1', onClick: () => console.log('二级按钮1-1被点击'), icon: }, { key: 'subButton1-2', text: '二级按钮1-2', onClick: () => console.log('二级按钮1-2被点击') }, ], - weight: 1, // icon:, }, { key: 'button2', text: '一级按钮2', onClick: () => console.log('一级按钮2被点击'), - weight: 2, }, { key: '播放', text: isPlay ? '播放按钮' : '图片按钮', onClick: () => { setIsPlay(!isPlay) }, - weight: 3, - isCenter: true + // isCenter: true }, { key: 'button3', text: '一级按钮3', onClick: () => console.log('一级按钮3被点击'), - weight: 3, }, { key: 'button4', text: '一级按钮4', onClick: () => console.log('一级按钮4被点击'), - weight: 4, - // isCenter: true }, { @@ -56,7 +50,6 @@ export default () => { children: [ { key: 'subButton5-1', text: '二级按钮5-1', onClick: () => console.log('二级按钮5-1被点击') }, ], - weight: 5, }, ], } From efee26019a2d049440cfc28f86151e23a225da5a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8B=91=E5=AE=8F=E5=8D=9A?= <9419827+yuan-hongbo@user.noreply.gitee.com> Date: Mon, 22 Apr 2024 15:25:15 +0800 Subject: [PATCH 5/6] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E5=90=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../biz/src/RealTimeMonitor/RealTimeMonitor.tsx | 14 ++++++++++---- .../biz/src/VideoPlayerCard/VideoPlayerCard.tsx | 11 +++++++---- .../ViewLargerImageModal/ViewLargerImageModal.tsx | 13 +++++++++---- .../src/WarningRecordCard/WarningRecordCard.tsx | 12 ++++++++---- packages/meta/src/ButtonList/ButtonList.tsx | 15 +++++++++------ 5 files changed, 43 insertions(+), 22 deletions(-) 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..f07c81e 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; @@ -28,8 +30,11 @@ 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-view-warning-larger-image-modalr', 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 index 9597fcf..d610916 100644 --- a/packages/meta/src/ButtonList/ButtonList.tsx +++ b/packages/meta/src/ButtonList/ButtonList.tsx @@ -1,6 +1,7 @@ -import React, { useState, useMemo, ReactNode, useRef, useEffect } from 'react'; +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'; @@ -17,18 +18,20 @@ export interface IButtonItem { }; export interface IButtonItemWithoutWeight extends Omit { } export interface ButtonListProps { + prefixCls?: string; buttons: Array gutter?: Gutter; }; -const componentName = 'zhst-button-list'; +const ButtonList: React.FC = (props) => { -const ButtonList: React.FC = (Props) => { - const { buttons, gutter } = Props - const [activeKey, setActiveKey] = useState(null); + const { getPrefixCls } = useContext(ConfigContext); + const { buttons, gutter, prefixCls: customizePrefixCls } = props + const componentName = getPrefixCls('button-list', customizePrefixCls); const buttonListRef = useRef(null); - const [buttonListWrapMarginLeft, setButtonListWrapMarginLeft] = useState(0) const centerButtonRef = useRef(null); + const [activeKey, setActiveKey] = useState(null); + const [buttonListWrapMarginLeft, setButtonListWrapMarginLeft] = useState(0) const sortedButtons = useMemo(() => { let buttonList = buttons.map((btn, index) => { From b2e5941eb90890f597f7ee25b7f638a99b661311 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8B=91=E5=AE=8F=E5=8D=9A?= <9419827+yuan-hongbo@user.noreply.gitee.com> Date: Mon, 22 Apr 2024 15:52:38 +0800 Subject: [PATCH 6/6] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E5=90=8D=E8=BF=87=E9=95=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx | 4 ++-- packages/biz/src/ViewLargerImageModal/index.less | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx b/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx index f07c81e..815f017 100644 --- a/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx +++ b/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx @@ -30,11 +30,11 @@ export interface ViewLargerImageModalProps { export const ViewLargerImageModal = forwardRef( (props, ref) => { - + const { ConfigContext } = ConfigProvider; const { getPrefixCls } = useContext(ConfigContext); const { prefixCls: customizePrefixCls, modalProps, downloadImg, imgStyle, title = '预警大图', downloadText = '下载大图', spaceProps } = props - const componentName = getPrefixCls('biz-view-warning-larger-image-modalr', customizePrefixCls); + const componentName = getPrefixCls('biz-warning-larger-image', customizePrefixCls); const { useToken } = theme const { token } = useToken() const [open, setOpen] = useState(false); diff --git a/packages/biz/src/ViewLargerImageModal/index.less b/packages/biz/src/ViewLargerImageModal/index.less index 32363d0..5790f12 100644 --- a/packages/biz/src/ViewLargerImageModal/index.less +++ b/packages/biz/src/ViewLargerImageModal/index.less @@ -1,4 +1,4 @@ -.zhst-biz-view-warning-larger-image-modal { +.zhst-biz-warning-larger-image { font-family: MicrosoftYaHei; .ant-modal-content {