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] =?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) => {