@uiw/react-empty - npm Package Compare versions

Comparing version 4.11.0 to 4.11.1

cjs/index.d.ts

 import React from 'react';
-import { IconsName } from '@uiw/react-icon';
-import { IProps, HTMLDivProps } from '@uiw/utils';
 import './style/index.less';
-export interface TableEmptyProps extends IProps, Omit<HTMLDivProps, 'title'> {
+export interface EmptyProps extends React.HTMLAttributes<HTMLDivElement> {
     prefixCls?: string;
-    iconColor?: string;
-    size?: number;
-    type?: IconsName;
-    text?: string;
-    textColor?: string;
+    icon?: React.ReactNode;
+    size?: number | string;
+    iconProps: React.SVGProps<SVGSVGElement>;
+    /** 自定义描述内容 */
     description?: React.ReactNode;
 }
-declare const Empty: (props: TableEmptyProps) => JSX.Element;
+declare const Empty: (props: EmptyProps) => JSX.Element;
 export default Empty;

cjs/index.js

@@ -10,8 +10,12 @@ "use strict";
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIcon = _interopRequireDefault(require("@uiw/react-icon"));
-
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _excluded = ["prefixCls", "className", "icon", "iconProps", "size", "description", "children"];
+
 var Empty = function Empty(props) {
@@ -21,53 +25,46 @@ var _props$prefixCls = props.prefixCls,
       className = props.className,
-      _props$iconColor = props.iconColor,
-      iconColor = _props$iconColor === void 0 ? '#cdcdcd' : _props$iconColor,
+      icon = props.icon,
+      iconProps = props.iconProps,
       _props$size = props.size,
-      size = _props$size === void 0 ? 40 : _props$size,
-      _props$text = props.text,
-      text = _props$text === void 0 ? '暂无数据' : _props$text,
-      _props$textColor = props.textColor,
-      textColor = _props$textColor === void 0 ? '#cdcdcd' : _props$textColor,
-      type = props.type,
-      description = props.description;
+      size = _props$size === void 0 ? 64 : _props$size,
+      _props$description = props.description,
+      description = _props$description === void 0 ? '暂无数据' : _props$description,
+      children = props.children,
+      other = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var cls = [prefixCls, className].filter(Boolean).join(' ').trim();
-  var nData = type ? type : /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
-    viewBox: "0 0 1024 1024",
-    version: "1.1",
-    xmlns: "http://www.w3.org/2000/svg",
-    "p-id": "5994",
-    width: "32",
-    height: "32",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-      d: "M894.44765695 767.84195243a27.75019293 27.75019293 0 0 0-27.75019292 27.75019292v123.2341595a14.88130617 14.88130617 0 0 1-14.66947243 14.66947243H185.28193991a14.88130617 14.88130617 0 0 1-14.66947243-14.66947243V157.76137102a14.88130617 14.88130617 0 0 1 14.66947243-14.66947243h666.74605169a14.88130617 14.88130617 0 0 1 14.66947243 14.66947243v41.09570503a27.75019293 27.75019293 0 1 0 55.50038698 0v-41.09570503a70.22281728 70.22281728 0 0 0-70.16985941-70.16985941H607.62505101a27.75019293 27.75019293 0 0 0-13.66326385-51.89921564H439.16443192a27.75019293 27.75019293 0 0 0-13.66326385 51.89921564H185.28193991A70.22281728 70.22281728 0 0 0 115.11208049 157.76137102v761.01197483a70.22281728 70.22281728 0 0 0 70.16985942 70.16985941h666.74605169a70.22281728 70.22281728 0 0 0 70.16985941-70.16985941v-123.1812005a27.75019293 27.75019293 0 0 0-27.75019406-27.75019292z",
-      "p-id": "5995",
-      fill: "#cdcdcd"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-      d: "M254.65742221 297.9951707h127.94745515a27.75019293 27.75019293 0 0 0 0-55.50038585H254.65742221a27.75019293 27.75019293 0 1 0 0 55.50038585zM254.65742221 553.94304h127.94745515a27.75019293 27.75019293 0 0 0 0-55.50038585H254.65742221a27.75019293 27.75019293 0 0 0 0 55.50038585zM254.65742221 809.83795029h521.26937202a27.75019293 27.75019293 0 0 0 0-55.50038584H254.65742221a27.75019293 27.75019293 0 1 0 0 55.50038584zM981.72307341 719.70278173l-88.91712625-91.61800477a27.75019293 27.75019293 0 1 0-39.82470485 38.65962041l88.91712739 91.61800476a27.75019293 27.75019293 0 1 0 39.82470371-38.6596204z",
-      "p-id": "5996",
-      fill: "#cdcdcd"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-      d: "M929.92977464 437.85826304a260.23749859 260.23749859 0 1 0-260.23749859 260.23749746A260.50229021 260.50229021 0 0 0 929.92977464 437.85826304z m-260.18453959 204.94894535A204.73711161 204.73711161 0 1 1 874.48234666 437.85826304a204.94894535 204.94894535 0 0 1-204.73711161 204.94894535z",
-      "p-id": "5997",
-      fill: iconColor
-    })]
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: cls,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcon["default"], {
-      type: nData,
-      style: {
-        fontSize: size,
-        color: iconColor
-      }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "".concat(prefixCls, "-text"),
-      style: {
-        color: textColor
-      },
-      children: text
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+    className: cls
+  }, other), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "".concat(prefixCls, "-icon"),
+      children: icon ? icon : /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+        viewBox: "0 0 1024 1024",
+        width: size,
+        height: size
+      }, iconProps), {}, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+          d: "M20.48 860.16a491.52 102.4 0 1 0 983.04 0 491.52 102.4 0 1 0-983.04 0Z",
+          fill: "#F5F5F5"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+          d: "M225.28 409.6l573.44-8.06912 112.78336 183.296H102.4z",
+          fill: "#C4C5C7"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+          d: "M266.24 61.44h491.52a40.96 40.96 0 0 1 40.96 40.96v532.48a40.96 40.96 0 0 1-40.96 40.96H266.24a40.96 40.96 0 0 1-40.96-40.96V102.4a40.96 40.96 0 0 1 40.96-40.96z",
+          fill: "#F5F5F7"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+          d: "M348.16 143.36h327.68a40.96 40.96 0 0 1 40.96 40.96v122.88a40.96 40.96 0 0 1-40.96 40.96H348.16a40.96 40.96 0 0 1-40.96-40.96V184.32a40.96 40.96 0 0 1 40.96-40.96zM327.68 409.6h368.64a20.48 20.48 0 0 1 0 40.96H327.68a20.48 20.48 0 0 1 0-40.96zM327.68 491.52h368.64a20.48 20.48 0 0 1 0 40.96H327.68a20.48 20.48 0 0 1 0-40.96z",
+          fill: "#EBECEC"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+          d: "M673.44384 607.58016v13.43488c0 25.14944-20.0704 45.52704-44.8512 45.52704H382.95552l-2.2528-0.06144c-23.7568-1.16736-42.63936-21.07392-42.63936-45.4656v-13.45536c0-12.55424-10.0352-22.7328-22.44608-22.7328H102.4v250.30656C102.4 860.2624 122.49088 880.64 147.29216 880.64h719.31904c24.7808 0 44.89216-20.3776 44.89216-45.50656V584.82688H695.88992c-12.3904 0-22.44608 10.17856-22.44608 22.7328z",
+          fill: "#E0E0E0"
+        })]
+      }))
     }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "".concat(prefixCls, "-description"),
       children: description
+    }), children && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "".concat(prefixCls, "-footer"),
+      children: children
     })]
-  });
+  }));
 };
@@ -74,0 +71,0 @@

cjs/style/index.less

 @empty-prefix: ~'w-empty';
 
 .@{empty-prefix} {
-  position: sticky;
-  left: 0;
-  overflow: hidden;
-  margin: -5px -8px;
-  padding: 32px 0;
-
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  &-text {
-    color: rgba(0, 0, 0, 0.25);
-    margin-top: 10px;
-  }
+  color: #c7c7c7;
+  text-align: center;
   &-description {
     margin-top: 10px;
   }
+  &-footer {
+    margin-top: 16px;
+  }
 }

dist.css

 .w-empty {
-  position: -webkit-sticky;
-  position: sticky;
-  left: 0;
-  overflow: hidden;
-  margin: -5px -8px;
-  padding: 32px 0;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
+  color: #c7c7c7;
+  text-align: center;
 }
-.w-empty-text {
-  color: rgba(0, 0, 0, 0.25);
-  margin-top: 10px;
-}
 .w-empty-description {
   margin-top: 10px;
 }
+.w-empty-footer {
+  margin-top: 16px;
+}

esm/index.d.ts

 import React from 'react';
-import { IconsName } from '@uiw/react-icon';
-import { IProps, HTMLDivProps } from '@uiw/utils';
 import './style/index.less';
-export interface TableEmptyProps extends IProps, Omit<HTMLDivProps, 'title'> {
+export interface EmptyProps extends React.HTMLAttributes<HTMLDivElement> {
     prefixCls?: string;
-    iconColor?: string;
-    size?: number;
-    type?: IconsName;
-    text?: string;
-    textColor?: string;
+    icon?: React.ReactNode;
+    size?: number | string;
+    iconProps: React.SVGProps<SVGSVGElement>;
+    /** 自定义描述内容 */
     description?: React.ReactNode;
 }
-declare const Empty: (props: TableEmptyProps) => JSX.Element;
+declare const Empty: (props: EmptyProps) => JSX.Element;
 export default Empty;

esm/index.js

@@ -0,3 +1,5 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["prefixCls", "className", "icon", "iconProps", "size", "description", "children"];
 import React from 'react';
-import Icon from '@uiw/react-icon';
 import "./style/index.css";
@@ -11,50 +13,46 @@ import { jsx as _jsx } from "react/jsx-runtime";
     className,
-    iconColor = '#cdcdcd',
-    size = 40,
-    text = '暂无数据',
-    textColor = '#cdcdcd',
-    type,
-    description
-  } = props;
+    icon,
+    iconProps,
+    size = 64,
+    description = '暂无数据',
+    children
+  } = props,
+      other = _objectWithoutPropertiesLoose(props, _excluded);
+
   var cls = [prefixCls, className].filter(Boolean).join(' ').trim();
-  var nData = type ? type : /*#__PURE__*/_jsxs("svg", {
-    viewBox: "0 0 1024 1024",
-    version: "1.1",
-    xmlns: "http://www.w3.org/2000/svg",
-    "p-id": "5994",
-    width: "32",
-    height: "32",
-    children: [/*#__PURE__*/_jsx("path", {
-      d: "M894.44765695 767.84195243a27.75019293 27.75019293 0 0 0-27.75019292 27.75019292v123.2341595a14.88130617 14.88130617 0 0 1-14.66947243 14.66947243H185.28193991a14.88130617 14.88130617 0 0 1-14.66947243-14.66947243V157.76137102a14.88130617 14.88130617 0 0 1 14.66947243-14.66947243h666.74605169a14.88130617 14.88130617 0 0 1 14.66947243 14.66947243v41.09570503a27.75019293 27.75019293 0 1 0 55.50038698 0v-41.09570503a70.22281728 70.22281728 0 0 0-70.16985941-70.16985941H607.62505101a27.75019293 27.75019293 0 0 0-13.66326385-51.89921564H439.16443192a27.75019293 27.75019293 0 0 0-13.66326385 51.89921564H185.28193991A70.22281728 70.22281728 0 0 0 115.11208049 157.76137102v761.01197483a70.22281728 70.22281728 0 0 0 70.16985942 70.16985941h666.74605169a70.22281728 70.22281728 0 0 0 70.16985941-70.16985941v-123.1812005a27.75019293 27.75019293 0 0 0-27.75019406-27.75019292z",
-      "p-id": "5995",
-      fill: "#cdcdcd"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M254.65742221 297.9951707h127.94745515a27.75019293 27.75019293 0 0 0 0-55.50038585H254.65742221a27.75019293 27.75019293 0 1 0 0 55.50038585zM254.65742221 553.94304h127.94745515a27.75019293 27.75019293 0 0 0 0-55.50038585H254.65742221a27.75019293 27.75019293 0 0 0 0 55.50038585zM254.65742221 809.83795029h521.26937202a27.75019293 27.75019293 0 0 0 0-55.50038584H254.65742221a27.75019293 27.75019293 0 1 0 0 55.50038584zM981.72307341 719.70278173l-88.91712625-91.61800477a27.75019293 27.75019293 0 1 0-39.82470485 38.65962041l88.91712739 91.61800476a27.75019293 27.75019293 0 1 0 39.82470371-38.6596204z",
-      "p-id": "5996",
-      fill: "#cdcdcd"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M929.92977464 437.85826304a260.23749859 260.23749859 0 1 0-260.23749859 260.23749746A260.50229021 260.50229021 0 0 0 929.92977464 437.85826304z m-260.18453959 204.94894535A204.73711161 204.73711161 0 1 1 874.48234666 437.85826304a204.94894535 204.94894535 0 0 1-204.73711161 204.94894535z",
-      "p-id": "5997",
-      fill: iconColor
-    })]
-  });
-  return /*#__PURE__*/_jsxs("div", {
-    className: cls,
-    children: [/*#__PURE__*/_jsx(Icon, {
-      type: nData,
-      style: {
-        fontSize: size,
-        color: iconColor
-      }
-    }), /*#__PURE__*/_jsx("div", {
-      className: prefixCls + "-text",
-      style: {
-        color: textColor
-      },
-      children: text
+  return /*#__PURE__*/_jsxs("div", _extends({
+    className: cls
+  }, other, {
+    children: [/*#__PURE__*/_jsx("div", {
+      className: prefixCls + "-icon",
+      children: icon ? icon : /*#__PURE__*/_jsxs("svg", _extends({
+        viewBox: "0 0 1024 1024",
+        width: size,
+        height: size
+      }, iconProps, {
+        children: [/*#__PURE__*/_jsx("path", {
+          d: "M20.48 860.16a491.52 102.4 0 1 0 983.04 0 491.52 102.4 0 1 0-983.04 0Z",
+          fill: "#F5F5F5"
+        }), /*#__PURE__*/_jsx("path", {
+          d: "M225.28 409.6l573.44-8.06912 112.78336 183.296H102.4z",
+          fill: "#C4C5C7"
+        }), /*#__PURE__*/_jsx("path", {
+          d: "M266.24 61.44h491.52a40.96 40.96 0 0 1 40.96 40.96v532.48a40.96 40.96 0 0 1-40.96 40.96H266.24a40.96 40.96 0 0 1-40.96-40.96V102.4a40.96 40.96 0 0 1 40.96-40.96z",
+          fill: "#F5F5F7"
+        }), /*#__PURE__*/_jsx("path", {
+          d: "M348.16 143.36h327.68a40.96 40.96 0 0 1 40.96 40.96v122.88a40.96 40.96 0 0 1-40.96 40.96H348.16a40.96 40.96 0 0 1-40.96-40.96V184.32a40.96 40.96 0 0 1 40.96-40.96zM327.68 409.6h368.64a20.48 20.48 0 0 1 0 40.96H327.68a20.48 20.48 0 0 1 0-40.96zM327.68 491.52h368.64a20.48 20.48 0 0 1 0 40.96H327.68a20.48 20.48 0 0 1 0-40.96z",
+          fill: "#EBECEC"
+        }), /*#__PURE__*/_jsx("path", {
+          d: "M673.44384 607.58016v13.43488c0 25.14944-20.0704 45.52704-44.8512 45.52704H382.95552l-2.2528-0.06144c-23.7568-1.16736-42.63936-21.07392-42.63936-45.4656v-13.45536c0-12.55424-10.0352-22.7328-22.44608-22.7328H102.4v250.30656C102.4 860.2624 122.49088 880.64 147.29216 880.64h719.31904c24.7808 0 44.89216-20.3776 44.89216-45.50656V584.82688H695.88992c-12.3904 0-22.44608 10.17856-22.44608 22.7328z",
+          fill: "#E0E0E0"
+        })]
+      }))
     }), description && /*#__PURE__*/_jsx("div", {
       className: prefixCls + "-description",
       children: description
+    }), children && /*#__PURE__*/_jsx("div", {
+      className: prefixCls + "-footer",
+      children: children
     })]
-  });
+  }));
 };
@@ -61,0 +59,0 @@

esm/style/index.css

 .w-empty {
-  position: -webkit-sticky;
-  position: sticky;
-  left: 0;
-  overflow: hidden;
-  margin: -5px -8px;
-  padding: 32px 0;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
+  color: #c7c7c7;
+  text-align: center;
 }
-.w-empty-text {
-  color: rgba(0, 0, 0, 0.25);
-  margin-top: 10px;
-}
 .w-empty-description {
   margin-top: 10px;
 }
+.w-empty-footer {
+  margin-top: 16px;
+}

esm/style/index.less

 @empty-prefix: ~'w-empty';
 
 .@{empty-prefix} {
-  position: sticky;
-  left: 0;
-  overflow: hidden;
-  margin: -5px -8px;
-  padding: 32px 0;
-
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  &-text {
-    color: rgba(0, 0, 0, 0.25);
-    margin-top: 10px;
-  }
+  color: #c7c7c7;
+  text-align: center;
   &-description {
     margin-top: 10px;
   }
+  &-footer {
+    margin-top: 16px;
+  }
 }

package.json

 {
   "name": "@uiw/react-empty",
-  "version": "4.11.0",
+  "version": "4.11.1",
   "description": "Empty component",
@@ -46,6 +46,2 @@ "author": "Kenny Wong <[e-mail]>",
   },
-  "dependencies": {
-    "@uiw/react-icon": "^4.11.0",
-    "@uiw/utils": "^4.11.0"
-  },
   "devDependencies": {
@@ -52,0 +48,0 @@ "@babel/runtime": "7.16.7",

README.md

 Empty 空状态
 ===
 
-空状态时的展示占位图。
+[![npm version](https://img.shields.io/npm/v/@uiw/react-empty.svg)](https://npmjs.com/@uiw/react-empty)
 
+空状态时的展示占位图。新组件 `v4.11.0+` 支持。
+
 ```jsx
@@ -19,9 +21,6 @@ import { Empty } from 'uiw';
 
-ReactDOM.render(
-  <Empty />,
-  _mount_  
-);
+ReactDOM.render(<Empty />, _mount_);
 ```
 
-### 自定义属性
+### 自定义
 
@@ -33,18 +32,32 @@ 通过自定义属性定制个性化展示。
 import ReactDOM from 'react-dom';
-import { Empty } from 'uiw';
+import { Empty, Icon } from 'uiw';
 
-ReactDOM.render(
-  <Empty 
-    text="没有数据了"
-    type="file-excel"
-    size={60}
-    iconColor="red"
-    textColor="red"
-    description={<Button type="primary">新增数据</Button>}
-  />,
-  _mount_  
-);
+const Demo = () => {
+  return(
+    <Empty
+      description={
+        <span>
+          Customize <a href="#">Description</a>
+        </span>
+      }
+      icon={<Icon type="shopping-cart"  style={{ fontSize: '39px' }} />}
+    >
+      <Button type="primary">新增数据</Button>
+    </Empty>
+  )
+}
+
+ReactDOM.render(<Demo />, _mount_);
 ```
 
+### 无描述展示
 
+<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
+```jsx
+import ReactDOM from 'react-dom';
+import { Empty, Button } from 'uiw';
+
+ReactDOM.render(<Empty description={false} />, _mount_);
+```
+
 ## Props
@@ -54,7 +67,5 @@
 |--------- |-------- |--------- |-------- |
-| description | 自定义描述内容 | ReactNode | - |
-| iconColor | 图标颜色| string | - |
-| size | icon 大小 | string / number | - |
-| type | [icon 图标](#/components/icon) | `IconsName` | - |
-| text | 文字说明 | string | - |
-| textColor | 文字颜色| string | - |
+| description | 自定义描述内容 | `ReactNode` | `暂无数据` |
+| icon | 可以替换内置图标 | `ReactNode` | - |
+| size | 内置 svg 图标：尺寸 | `number \| string` | - |
+| iconProps | 内置 svg 图标：属性设置| `React.SVGProps<SVGSVGElement>` | - |

src/index.tsx

 import React from 'react';
-import Icon, { IconsName } from '@uiw/react-icon';
-import { IProps, HTMLDivProps } from '@uiw/utils';
 import './style/index.less';
 
-export interface TableEmptyProps extends IProps, Omit<HTMLDivProps, 'title'> {
+export interface EmptyProps extends React.HTMLAttributes<HTMLDivElement> {
   prefixCls?: string;
-  iconColor?: string;
-  size?: number;
-  type?: IconsName;
-  text?: string;
-  textColor?: string;
+  icon?: React.ReactNode;
+  size?: number | string;
+  iconProps: React.SVGProps<SVGSVGElement>;
+  /** 自定义描述内容 */
   description?: React.ReactNode;
 }
 
-const Empty = (props: TableEmptyProps) => {
+const Empty = (props: EmptyProps) => {
   const {
     prefixCls = 'w-empty',
     className,
-    iconColor = '#cdcdcd',
-    size = 40,
-    text = '暂无数据',
-    textColor = '#cdcdcd',
-    type,
-    description,
+    icon,
+    iconProps,
+    size = 64,
+    description = '暂无数据',
+    children,
+    ...other
   } = props;
 
   const cls = [prefixCls, className].filter(Boolean).join(' ').trim();
-
-  const nData = type ? (
-    type
-  ) : (
-    <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5994" width="32" height="32">
-      <path
-        d="M894.44765695 767.84195243a27.75019293 27.75019293 0 0 0-27.75019292 27.75019292v123.2341595a14.88130617 14.88130617 0 0 1-14.66947243 14.66947243H185.28193991a14.88130617 14.88130617 0 0 1-14.66947243-14.66947243V157.76137102a14.88130617 14.88130617 0 0 1 14.66947243-14.66947243h666.74605169a14.88130617 14.88130617 0 0 1 14.66947243 14.66947243v41.09570503a27.75019293 27.75019293 0 1 0 55.50038698 0v-41.09570503a70.22281728 70.22281728 0 0 0-70.16985941-70.16985941H607.62505101a27.75019293 27.75019293 0 0 0-13.66326385-51.89921564H439.16443192a27.75019293 27.75019293 0 0 0-13.66326385 51.89921564H185.28193991A70.22281728 70.22281728 0 0 0 115.11208049 157.76137102v761.01197483a70.22281728 70.22281728 0 0 0 70.16985942 70.16985941h666.74605169a70.22281728 70.22281728 0 0 0 70.16985941-70.16985941v-123.1812005a27.75019293 27.75019293 0 0 0-27.75019406-27.75019292z"
-        p-id="5995"
-        fill="#cdcdcd"
-      ></path>
-      <path
-        d="M254.65742221 297.9951707h127.94745515a27.75019293 27.75019293 0 0 0 0-55.50038585H254.65742221a27.75019293 27.75019293 0 1 0 0 55.50038585zM254.65742221 553.94304h127.94745515a27.75019293 27.75019293 0 0 0 0-55.50038585H254.65742221a27.75019293 27.75019293 0 0 0 0 55.50038585zM254.65742221 809.83795029h521.26937202a27.75019293 27.75019293 0 0 0 0-55.50038584H254.65742221a27.75019293 27.75019293 0 1 0 0 55.50038584zM981.72307341 719.70278173l-88.91712625-91.61800477a27.75019293 27.75019293 0 1 0-39.82470485 38.65962041l88.91712739 91.61800476a27.75019293 27.75019293 0 1 0 39.82470371-38.6596204z"
-        p-id="5996"
-        fill="#cdcdcd"
-      ></path>
-      <path
-        d="M929.92977464 437.85826304a260.23749859 260.23749859 0 1 0-260.23749859 260.23749746A260.50229021 260.50229021 0 0 0 929.92977464 437.85826304z m-260.18453959 204.94894535A204.73711161 204.73711161 0 1 1 874.48234666 437.85826304a204.94894535 204.94894535 0 0 1-204.73711161 204.94894535z"
-        p-id="5997"
-        fill={iconColor}
-      ></path>
-    </svg>
-  );
   return (
-    <div className={cls}>
-      <Icon type={nData} style={{ fontSize: size, color: iconColor }} />
-      <div className={`${prefixCls}-text`} style={{ color: textColor }}>
-        {text}
+    <div className={cls} {...other}>
+      <div className={`${prefixCls}-icon`}>
+        {icon ? (
+          icon
+        ) : (
+          <svg viewBox="0 0 1024 1024" width={size} height={size} {...iconProps}>
+            <path d="M20.48 860.16a491.52 102.4 0 1 0 983.04 0 491.52 102.4 0 1 0-983.04 0Z" fill="#F5F5F5" />
+            <path d="M225.28 409.6l573.44-8.06912 112.78336 183.296H102.4z" fill="#C4C5C7" />
+            <path
+              d="M266.24 61.44h491.52a40.96 40.96 0 0 1 40.96 40.96v532.48a40.96 40.96 0 0 1-40.96 40.96H266.24a40.96 40.96 0 0 1-40.96-40.96V102.4a40.96 40.96 0 0 1 40.96-40.96z"
+              fill="#F5F5F7"
+            />
+            <path
+              d="M348.16 143.36h327.68a40.96 40.96 0 0 1 40.96 40.96v122.88a40.96 40.96 0 0 1-40.96 40.96H348.16a40.96 40.96 0 0 1-40.96-40.96V184.32a40.96 40.96 0 0 1 40.96-40.96zM327.68 409.6h368.64a20.48 20.48 0 0 1 0 40.96H327.68a20.48 20.48 0 0 1 0-40.96zM327.68 491.52h368.64a20.48 20.48 0 0 1 0 40.96H327.68a20.48 20.48 0 0 1 0-40.96z"
+              fill="#EBECEC"
+            />
+            <path
+              d="M673.44384 607.58016v13.43488c0 25.14944-20.0704 45.52704-44.8512 45.52704H382.95552l-2.2528-0.06144c-23.7568-1.16736-42.63936-21.07392-42.63936-45.4656v-13.45536c0-12.55424-10.0352-22.7328-22.44608-22.7328H102.4v250.30656C102.4 860.2624 122.49088 880.64 147.29216 880.64h719.31904c24.7808 0 44.89216-20.3776 44.89216-45.50656V584.82688H695.88992c-12.3904 0-22.44608 10.17856-22.44608 22.7328z"
+              fill="#E0E0E0"
+            />
+          </svg>
+        )}
       </div>
       {description && <div className={`${prefixCls}-description`}>{description}</div>}
+      {children && <div className={`${prefixCls}-footer`}>{children}</div>}
     </div>
@@ -59,0 +53,0 @@ );

src/style/index.less

 @empty-prefix: ~'w-empty';
 
 .@{empty-prefix} {
-  position: sticky;
-  left: 0;
-  overflow: hidden;
-  margin: -5px -8px;
-  padding: 32px 0;
-
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  &-text {
-    color: rgba(0, 0, 0, 0.25);
-    margin-top: 10px;
-  }
+  color: #c7c7c7;
+  text-align: center;
   &-description {
     margin-top: 10px;
   }
+  &-footer {
+    margin-top: 16px;
+  }
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Dependency count

2

-50%

Number of lines in readme file

69

21.05%

Number of low supply chain risk alerts

0

-100%

Worsened metrics

Total package byte prevSize

21160

-17.29%

Lines of code

221

-17.54%

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• - Removed

  @uiw/react-icon@^4.11.0

• - Removed

  @uiw/utils@^4.11.0

• - Removed

  @uiw/icons@2.6.10
  (transitive)

• - Removed

  @uiw/react-icon@4.22.3
  (transitive)

• - Removed

  @uiw/utils@4.22.3
  (transitive)