feat: rename cookies folder to useCookieListener and support className/style for all components (#527)

Author: LuckyFBB

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 ? (
-        <div className="dtc-empty">
+        <div className={classNames('dtc-empty', className)} style={style}>
             <AntdEmpty {...restProps} image={newImage} imageStyle={{ height, ...imageStyle }}>
                 {extra}
             </AntdEmpty>

src/filterRules/ruleController/index.tsx

@@ -16,6 +16,8 @@ interface IProps<T> {
     disabled?: boolean; // 编辑/查看状态
     maxLevel: number; // 节点最深层级数
     maxSize: number; // 节点最大子节点数量
+    className?: string;
+    style?: React.CSSProperties;
     component: (props: IComponentProps<T>) => React.ReactNode; // 自定义展示组件
     onAddCondition: (value: { key: string; isOut?: boolean }) => void; // 新增节点
     onDeleteCondition: (key: string) => void; // 删除节点
@@ -35,6 +37,8 @@ export const RulesController = <T,>(props: IProps<T>) => {
         disabled,
         maxLevel,
         maxSize,
+        className,
+        style,
         component,
         onAddCondition,
         onDeleteCondition,
@@ -233,7 +237,7 @@ export const RulesController = <T,>(props: IProps<T>) => {
     calculateTreeItemHeight(value, !!disabled);
 
     return (
-        <div className="dtc-ruleController">
+        <div className={classnames('dtc-ruleController', className)} style={style}>
             {renderCondition(value, [], !!disabled || !!value.disabled)}
         </div>
     );

src/globalLoading/index.tsx

@@ -9,6 +9,7 @@ export interface IGlobalLoadingProps {
     mainBackground?: string;
     circleBackground?: string;
     titleColor?: string;
+    style?: React.CSSProperties;
 }
 
 const GlobalLoading: React.FC<IGlobalLoadingProps> = function (props) {
@@ -18,13 +19,14 @@ const GlobalLoading: React.FC<IGlobalLoadingProps> = function (props) {
         circleBackground = '#1D78FF',
         titleColor = '#3D446E',
         className = '',
+        style,
     } = props;
     const prefixCls = 'dtc-global-loading';
 
     return (
         <div
             className={classNames(`${prefixCls}-wrapper`, className)}
-            style={{ background: mainBackground }}
+            style={{ background: mainBackground, ...style }}
             data-testid="test-globalLoading"
         >
             <div className={`${prefixCls}-center`}>

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<HTMLImageElement>(([entry]) => {
         const { target, isIntersecting } = entry;
         if (isIntersecting) {
@@ -62,13 +62,13 @@ const LazyImage = (props: IProps) => {
             };
         }
     });
-    return <img ref={imgRef} {...rest} data-src={src} />;
+    return <img className={className} style={style} ref={imgRef} {...rest} data-src={src} />;
 };
 
 const NormalImage = (props: IProps) => {
-    const { src: originSrc, loader = <Spin spinning />, ...rest } = props;
+    const { src: originSrc, className, style, loader = <Spin spinning />, ...rest } = props;
     const { src, isLoading } = useImage({ src: originSrc });
-    if (src) return <img {...rest} src={src} />;
+    if (src) return <img {...rest} className={className} style={style} src={src} />;
     if (isLoading) return loader;
     return null;
 };

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';

src/markdownRender/index.tsx

@@ -10,14 +10,20 @@ export interface IMarkdownRenderProps {
      * 当前渲染的值
      */
     value?: string;
+    style?: React.CSSProperties;
     className?: string;
     /**
      * 暗黑模式
      */
     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 }}
         />
     );

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<any> = function () {
+const NotFound: React.FC<any> = function ({
+    className,
+    style,
+}: {
+    className?: string;
+    style?: React.CSSProperties;
+}) {
     return (
-        <div className="dtc-not-found">
+        <div className={classNames('dtc-not-found', className)} style={style}>
             <h1>
                 <FrownOutlined /> 亲，是不是走错地方了？
             </h1>

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 (
-        <div className={`${prefixCls} ${className}`}>
+        <div className={`${prefixCls} ${className}`} style={style}>
             <div className={`${prefixCls}-title`} style={{ width }}>
                 {/* 顶部左侧的内容 */}
                 <Tooltip title={title} {...tooltipProps}>

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 (
-        <span className={classNames('dtc-tinyTag', className)} {...restProps}>
+        <span className={classNames('dtc-tinyTag', className)} style={style} {...restProps}>
             <svg
                 width={svgWidth}
                 height="15"