refactor(Empty): 重构空状态组件 (#833,#826)

uiwjs · May 18, 2022 · 428ec2f · 428ec2f
1 parent e179b5a
commit 428ec2f
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 4 deletions.
diff --git a/packages/react-empty/package.json b/packages/react-empty/package.json
@@ -41,6 +41,10 @@
   ],
   "peerDependencies": {
     "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "react-dom": ">=18.0.0",
+    "styled-components": "~5.3.5"
+  },
+  "dependencies": {
+    "@uiw/utils": "^4.21.2"
   }
 }
diff --git a/packages/react-empty/src/index.tsx b/packages/react-empty/src/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import './style/index.less';
+import EmptyWrap from './style';
 
 export interface EmptyProps extends React.HTMLAttributes<HTMLDivElement> {
   prefixCls?: string;
@@ -24,7 +24,7 @@ const Empty = (props: EmptyProps) => {
 
   const cls = [prefixCls, className].filter(Boolean).join(' ').trim();
   return (
-    <div className={cls} {...other}>
+    <EmptyWrap className={cls} {...other}>
       <div className={`${prefixCls}-icon`}>
         {icon ? (
           icon
@@ -49,7 +49,7 @@ const Empty = (props: EmptyProps) => {
       </div>
       {description && <div className={`${prefixCls}-description`}>{description}</div>}
       {children && <div className={`${prefixCls}-footer`}>{children}</div>}
-    </div>
+    </EmptyWrap>
   );
 };
 

diff --git a/packages/react-empty/src/style/index.ts b/packages/react-empty/src/style/index.ts
@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+import { getThemeVariantValue } from '@uiw/utils';
+
+interface DividerProps {
+  defaultTheme?: Record<string, string | number>;
+}
+
+const Empty = styled.div<DividerProps>`
+  color: ${(props) => getThemeVariantValue(props, 'colorEmptyBase')};
+  text-align: center;
+  .w-empty-description {
+    margin-top: 10px;
+  }
+  .w-empty-footer {
+    margin-top: 16px;
+  }
+`;
+
+Empty.defaultProps = {
+  defaultTheme: {
+    colorEmptyBase: '#c7c7c7',
+  },
+};
+
+export default Empty;
diff --git a/theme/themeVariant.json5 b/theme/themeVariant.json5
@@ -55,6 +55,9 @@
   // 组件
   backgroundColorDividerBase: '#e8e8e8',
 
+  // -------------------------- empty 空状态 ----------------------------------
+  colorEmptyBase: '#c7c7c7',
+
   // ---------------------------button 按钮部分 ------------------------------------
   colorButtonBase: '#fff',
   // 最小高度