From 0e0cfd93cc7a8ff3309bfbdf8180499f437dfd3c Mon Sep 17 00:00:00 2001 From: LuckyFBB <976060700@qq.com> Date: Fri, 27 Dec 2024 14:46:40 +0800 Subject: [PATCH] feat: rename cookies folder to useCookieListener and support className/style for all components --- src/empty/index.tsx | 5 ++++- src/filterRules/ruleController/index.tsx | 6 +++++- src/globalLoading/index.tsx | 4 +++- src/image/index.tsx | 8 ++++---- src/index.ts | 2 +- src/markdownRender/index.tsx | 9 ++++++++- src/notFound/index.tsx | 11 +++++++++-- src/progressLine/index.tsx | 4 +++- src/tinyTag/index.tsx | 4 ++-- .../__tests__/useCookieListener.test.tsx} | 0 src/{cookies => useCookieListener}/demos/advanced.tsx | 0 src/{cookies => useCookieListener}/demos/basic.tsx | 0 src/{cookies => useCookieListener}/index.md | 0 src/{cookies => useCookieListener}/index.tsx | 0 14 files changed, 39 insertions(+), 14 deletions(-) rename src/{cookies/__tests__/cookies.test.tsx => useCookieListener/__tests__/useCookieListener.test.tsx} (100%) rename src/{cookies => useCookieListener}/demos/advanced.tsx (100%) rename src/{cookies => useCookieListener}/demos/basic.tsx (100%) rename src/{cookies => useCookieListener}/index.md (100%) rename src/{cookies => useCookieListener}/index.tsx (100%) diff --git a/src/empty/index.tsx b/src/empty/index.tsx index a7b644978..2008a8de8 100644 --- a/src/empty/index.tsx +++ b/src/empty/index.tsx @@ -1,5 +1,6 @@ import React, { ReactNode } from 'react'; import { Empty as AntdEmpty, EmptyProps as AntdEmptyProps } from 'antd'; +import classNames from 'classnames'; import './style.scss'; @@ -28,6 +29,8 @@ const Empty = (props: EmptyProps) => { image, imageStyle, extra, + className, + style, ...restProps } = props; @@ -39,7 +42,7 @@ const Empty = (props: EmptyProps) => { const height = size === 'default' ? 80 : 100; return showEmpty ? ( -
+
{extra} diff --git a/src/filterRules/ruleController/index.tsx b/src/filterRules/ruleController/index.tsx index 073143ddd..3c249857e 100644 --- a/src/filterRules/ruleController/index.tsx +++ b/src/filterRules/ruleController/index.tsx @@ -16,6 +16,8 @@ interface IProps { disabled?: boolean; // 编辑/查看状态 maxLevel: number; // 节点最深层级数 maxSize: number; // 节点最大子节点数量 + className?: string; + style?: React.CSSProperties; component: (props: IComponentProps) => React.ReactNode; // 自定义展示组件 onAddCondition: (value: { key: string; isOut?: boolean }) => void; // 新增节点 onDeleteCondition: (key: string) => void; // 删除节点 @@ -35,6 +37,8 @@ export const RulesController = (props: IProps) => { disabled, maxLevel, maxSize, + className, + style, component, onAddCondition, onDeleteCondition, @@ -233,7 +237,7 @@ export const RulesController = (props: IProps) => { calculateTreeItemHeight(value, !!disabled); return ( -
+
{renderCondition(value, [], !!disabled || !!value.disabled)}
); diff --git a/src/globalLoading/index.tsx b/src/globalLoading/index.tsx index 1269cf757..0324e2d01 100644 --- a/src/globalLoading/index.tsx +++ b/src/globalLoading/index.tsx @@ -9,6 +9,7 @@ export interface IGlobalLoadingProps { mainBackground?: string; circleBackground?: string; titleColor?: string; + style?: React.CSSProperties; } const GlobalLoading: React.FC = function (props) { @@ -18,13 +19,14 @@ const GlobalLoading: React.FC = function (props) { circleBackground = '#1D78FF', titleColor = '#3D446E', className = '', + style, } = props; const prefixCls = 'dtc-global-loading'; return (
diff --git a/src/image/index.tsx b/src/image/index.tsx index be60c9a31..254954c6a 100644 --- a/src/image/index.tsx +++ b/src/image/index.tsx @@ -51,7 +51,7 @@ const ImageComponent = (props: IProps) => { }; const LazyImage = (props: IProps) => { - const { src, ...rest } = props; + const { src, className, style, ...rest } = props; const imgRef = useIntersectionObserver(([entry]) => { const { target, isIntersecting } = entry; if (isIntersecting) { @@ -62,13 +62,13 @@ const LazyImage = (props: IProps) => { }; } }); - return ; + return ; }; const NormalImage = (props: IProps) => { - const { src: originSrc, loader = , ...rest } = props; + const { src: originSrc, className, style, loader = , ...rest } = props; const { src, isLoading } = useImage({ src: originSrc }); - if (src) return ; + if (src) return ; if (isLoading) return loader; return null; }; diff --git a/src/index.ts b/src/index.ts index bb7e98a4f..b6d6c02ef 100644 --- a/src/index.ts +++ b/src/index.ts @@ -3,7 +3,6 @@ export { default as Catalogue } from './catalogue'; export { default as CollapsibleActionItems } from './collapsibleActionItems'; export { default as ContentLayout } from './contentLayout'; export { default as ContextMenu } from './contextMenu'; -export { default as useCookieListener } from './cookies'; export { default as Copy } from './copy'; export { default as Drawer } from './drawer'; export { default as Dropdown } from './dropdown'; @@ -28,6 +27,7 @@ export { default as SpreadSheet } from './spreadSheet'; export { default as StatusTag } from './statusTag'; export { default as Table } from './table'; export { default as TinyTag } from './tinyTag'; +export { default as useCookieListener } from './useCookieListener'; export { default as useDebounce } from './useDebounce'; export { default as useIntersectionObserver } from './useIntersectionObserver'; export { default as useList } from './useList'; diff --git a/src/markdownRender/index.tsx b/src/markdownRender/index.tsx index c7dcaa010..5ec2570b2 100644 --- a/src/markdownRender/index.tsx +++ b/src/markdownRender/index.tsx @@ -10,6 +10,7 @@ export interface IMarkdownRenderProps { * 当前渲染的值 */ value?: string; + style?: React.CSSProperties; className?: string; /** * 暗黑模式 @@ -17,7 +18,12 @@ export interface IMarkdownRenderProps { dark?: boolean; } -export default function MarkdownRender({ value = '', className, dark }: IMarkdownRenderProps) { +export default function MarkdownRender({ + value = '', + className, + style, + dark, +}: IMarkdownRenderProps) { const result = useMemo(() => { const converter = new showdown.Converter({ extensions: [sqlHighlightExtension], @@ -33,6 +39,7 @@ export default function MarkdownRender({ value = '', className, dark }: IMarkdow dark ? 'dtc-vs-dark' : 'dtc-vs', className )} + style={style} dangerouslySetInnerHTML={{ __html: result }} /> ); diff --git a/src/notFound/index.tsx b/src/notFound/index.tsx index 67fb6d00c..a21cc97bf 100644 --- a/src/notFound/index.tsx +++ b/src/notFound/index.tsx @@ -1,11 +1,18 @@ import React from 'react'; import { FrownOutlined } from '@ant-design/icons'; +import classNames from 'classnames'; import './style.scss'; -const NotFound: React.FC = function () { +const NotFound: React.FC = function ({ + className, + style, +}: { + className?: string; + style?: React.CSSProperties; +}) { return ( -
+

亲，是不是走错地方了？

diff --git a/src/progressLine/index.tsx b/src/progressLine/index.tsx index 1a839bf18..a2d28054d 100644 --- a/src/progressLine/index.tsx +++ b/src/progressLine/index.tsx @@ -16,6 +16,7 @@ interface IProgressLineProps { width?: number | string; // 顶部左侧内容默认通过 tooltip hover 展示 tooltipProps?: TooltipProps; + style?: React.CSSProperties; } const ProgressLine = (props: IProgressLineProps) => { @@ -26,11 +27,12 @@ const ProgressLine = (props: IProgressLineProps) => { className = '', width = '280px', tooltipProps, + style, } = props; const prefixCls = 'dtc-progress-line'; return ( -
+
{/* 顶部左侧的内容 */} diff --git a/src/tinyTag/index.tsx b/src/tinyTag/index.tsx index 8e8f3ac15..31232d563 100644 --- a/src/tinyTag/index.tsx +++ b/src/tinyTag/index.tsx @@ -31,10 +31,10 @@ const useSvgWidth = (): UseSvgWidthResult => { return [ref, svgWidth, rectWidth]; }; -export default function TinyTag({ value, className, ...restProps }: ITinyTag) { +export default function TinyTag({ value, className, style, ...restProps }: ITinyTag) { const [ref, svgWidth, rectWidth] = useSvgWidth(); return ( - +