@kdcloudjs/kdesign 1.0.2 → 1.1.0

package/lib/dropdown/style/index.css

@@ -92,26 +92,35 @@
 /* -----------  Avatar  ——————---- end */
 /* -----------  AdvancedSelector  ——————---- start */
 /* -----------  AdvancedSelector  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
 /* 多行显示省略号 */
 /* 单行显示省略号 */
 /** 浮层箭头样式 **/
 .kd-dropdown-link {
-  color: #5582f3;
+  color: var(--kd-g-color-theme, #5582f3);
   text-decoration: none;
   background-color: transparent;
   outline: noned;
   cursor: pointer;
-  -webkit-transition: color 0.3s, background-color 0.3s;
-  transition: color 0.3s, background-color 0.3s;
+  -webkit-transition: color var(--kd-g-duration, 0.3s), background-color var(--kd-g-duration, 0.3s);
+  transition: color var(--kd-g-duration, 0.3s), background-color var(--kd-g-duration, 0.3s);
   -webkit-text-decoration-skip: objects;
 }
 .kd-dropdown-link.disabled,
 .kd-dropdown-link.disabled:hover {
   cursor: default;
-  color: #b2b2b2;
+  color: var(--kd-g-color-disabled, #b2b2b2);
 }
 .kd-dropdown-link:hover {
-  color: #87adff;
+  color: var(--kd-g-color-theme-5, #87adff);
 }
 .kd-dropdown-trigger {
   outline: none;
@@ -127,11 +136,11 @@
           font-feature-settings: 'tnum';
   opacity: 1;
   visibility: visible;
-  z-index: 1050;
-  background-color: #fff;
-  border-radius: 2px;
-  min-width: 136px;
-  max-width: 320px;
+  z-index: var(--kd-g-z-index-popper, 1050);
+  background-color: var(--kd-g-color-background, #fff);
+  border-radius: var(--kd-g-radius-border, 2px);
+  min-width: var(--kd-c-dropdown-menu-sizing-min-width, 136px);
+  max-width: var(--kd-c-dropdown-menu-sizing-max-width, 320px);
   -webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
           box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
 }
@@ -157,26 +166,26 @@
   bottom: 0;
   left: 0;
   content: '';
-  background: #fff;
-  border-radius: 2px;
+  background: var(--kd-g-color-background, #fff);
+  border-radius: var(--kd-g-radius-border, 2px);
 }
 .kd-dropdown.arrow.bottomLeft::before,
 .kd-dropdown.arrow.bottom::before,
 .kd-dropdown.arrow.bottomRight::before {
   left: var(--arrowLeft);
   top: var(--arrowSpill);
-  -webkit-box-shadow: -2px -2px 9px rgba(0, 0, 0, 0.1);
-          box-shadow: -2px -2px 9px rgba(0, 0, 0, 0.1);
-  border-color: #fff transparent transparent #fff;
+  -webkit-box-shadow: -2px -2px calc(10px - 1px) rgba(0, 0, 0, 0.1);
+          box-shadow: -2px -2px calc(10px - 1px) rgba(0, 0, 0, 0.1);
+  border-color: var(--kd-g-color-white, #fff) transparent transparent var(--kd-g-color-white, #fff);
 }
 .kd-dropdown.arrow.topLeft::before,
 .kd-dropdown.arrow.top::before,
 .kd-dropdown.arrow.topRight::before {
   left: var(--arrowLeft);
   bottom: var(--arrowSpill);
-  -webkit-box-shadow: 3px 3px 11px rgba(0, 0, 0, 0.15);
-          box-shadow: 3px 3px 11px rgba(0, 0, 0, 0.15);
-  border-color: transparent #fff #fff transparent;
+  -webkit-box-shadow: 3px 3px calc(10px + 1px) rgba(0, 0, 0, 0.15);
+          box-shadow: 3px 3px calc(10px + 1px) rgba(0, 0, 0, 0.15);
+  border-color: transparent var(--kd-g-color-white, #fff) var(--kd-g-color-white, #fff) transparent;
 }
 .kd-dropdown.arrow.leftTop::before,
 .kd-dropdown.arrow.left::before,
@@ -185,7 +194,7 @@
   right: var(--arrowSpill);
   -webkit-box-shadow: 3px 0 10px rgba(0, 0, 0, 0.12), 0 -2px 10px rgba(204, 149, 149, 0.12);
           box-shadow: 3px 0 10px rgba(0, 0, 0, 0.12), 0 -2px 10px rgba(204, 149, 149, 0.12);
-  border-color: #fff #fff transparent transparent;
+  border-color: var(--kd-g-color-white, #fff) var(--kd-g-color-white, #fff) transparent transparent;
 }
 .kd-dropdown.arrow.rightTop::before,
 .kd-dropdown.arrow.right::before,
@@ -194,73 +203,73 @@
   left: var(--arrowSpill);
   -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), -2px 0 10px rgba(0, 0, 0, 0.1);
           box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), -2px 0 10px rgba(0, 0, 0, 0.1);
-  border-color: transparent transparent #fff #fff;
+  border-color: transparent transparent var(--kd-g-color-white, #fff) var(--kd-g-color-white, #fff);
 }
 .kd-dropdown-menu {
-  max-height: 336px;
-  padding: 8px 0;
+  max-height: var(--kd-c-dropdown-menu-sizing-max-height, 336px);
+  padding: var(--kd-c-dropdown-menu-spacing-padding-vertical, 8px) 0;
   overflow-y: auto;
 }
 .kd-dropdown-menu-item {
   position: relative;
-  padding: 7px 12px;
-  color: #212121;
-  font-size: 12px;
+  padding: var(--kd-c-dropdown-item-spacing-padding-vertical, 7px) var(--kd-c-dropdown-item-spacing-padding-horizontal, 12px);
+  color: var(--kd-c-dropdown-menu-item-color-text, var(--kd-g-color-text-primary, #212121));
+  font-size: var(--kd-c-dropdown-font-size, var(--kd-g-font-size-small, 12px));
   line-height: 18px;
   overflow: hidden;
   cursor: pointer;
-  -webkit-transition: background-color 0.3s;
-  transition: background-color 0.3s;
+  -webkit-transition: background-color var(--kd-g-duration, 0.3s);
+  transition: background-color var(--kd-g-duration, 0.3s);
 }
 .kd-dropdown-menu-item.disabled,
 .kd-dropdown-menu-item.disabled > a {
-  color: #b2b2b2;
+  color: var(--kd-c-dropdown-item-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
   cursor: not-allowed;
 }
 .kd-dropdown-menu-item:not(.disabled):hover {
-  background-color: #f5f5f5;
+  background-color: var(--kd-c-dropdown-item-color-background-hover, var(--kd-g-color-hover, #f5f5f5));
 }
 .kd-dropdown-menu-item:not(.disabled):active,
 .kd-dropdown-menu-item:not(.disabled).selected {
-  color: #5582f3;
-  background-color: #f2f8ff;
+  color: var(--kd-g-color-theme, #5582f3);
+  background-color: var(--kd-c-dropdown-item-color-background-active, var(--kd-g-color-theme-1, #f2f8ff));
 }
 .kd-dropdown-menu-item:not(.disabled):active > a,
 .kd-dropdown-menu-item:not(.disabled).selected > a {
-  color: #5582f3;
+  color: var(--kd-g-color-theme, #5582f3);
 }
 .kd-dropdown-menu-item.divided::before {
   content: '';
   position: absolute;
   top: 0;
-  left: 12px;
-  right: 12px;
-  height: 1px;
-  background-color: #e5e5e5;
+  left: var(--kd-c-dropdown-item-spacing-padding-horizontal, 12px);
+  right: var(--kd-c-dropdown-item-spacing-padding-horizontal, 12px);
+  height: var(--kd-c-dropdown-divided-sizing-height, 1px);
+  background-color: var(--kd-c-dropdown-divided-color-background, var(--kd-g-color-border-weak, #e5e5e5));
 }
 .kd-dropdown-menu-item.danger,
 .kd-dropdown-menu-item.danger > a {
-  color: #fb2323;
-  -webkit-transition: color 0.3s, background-color 0.3s;
-  transition: color 0.3s, background-color 0.3s;
+  color: var(--kd-c-dropdown-item-color-text-danger, var(--kd-g-color-error, #fb2323));
+  -webkit-transition: color var(--kd-g-duration, 0.3s), background-color var(--kd-g-duration, 0.3s);
+  transition: color var(--kd-g-duration, 0.3s), background-color var(--kd-g-duration, 0.3s);
 }
 .kd-dropdown-menu-item.danger:hover,
 .kd-dropdown-menu-item.danger > a:hover {
-  color: #fff;
-  background-color: #fb2323;
+  color: var(--kd-g-color-white, #fff);
+  background-color: var(--kd-c-dropdown-item-color-background-danger-hover, var(--kd-g-color-error, #fb2323));
 }
 .kd-dropdown-menu-item > a {
   display: block;
-  margin: -7px -12px;
-  padding: 7px 12px;
-  color: #212121;
-  font-size: 12px;
+  margin: calc(-1 * var(--kd-c-dropdown-item-spacing-padding-vertical, 7px)) calc(-1 * var(--kd-c-dropdown-item-spacing-padding-horizontal, 12px));
+  padding: var(--kd-c-dropdown-item-spacing-padding-vertical, 7px) var(--kd-c-dropdown-item-spacing-padding-horizontal, 12px);
+  color: var(--kd-c-dropdown-menu-item-color-text, var(--kd-g-color-text-primary, #212121));
+  font-size: var(--kd-c-dropdown-font-size, var(--kd-g-font-size-small, 12px));
   line-height: 18px;
-  -webkit-transition: color 0.3s;
-  transition: color 0.3s;
+  -webkit-transition: color var(--kd-g-duration, 0.3s);
+  transition: color var(--kd-g-duration, 0.3s);
 }
 .kd-dropdown-menu-item > a:hover {
-  color: #212121;
+  color: var(--kd-c-dropdown-menu-item-color-text, var(--kd-g-color-text-primary, #212121));
 }
 .kd-dropdown-menu-item span {
   overflow: hidden;

package/lib/dropdown/style/index.less

@@ -1,27 +1,30 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
+@import './token.less';
 
 @dropdown-prefix-cls: ~'@{kd-prefix}-dropdown';
 @dropdown-trigger-prefix-cls: ~'@{dropdown-prefix-cls}-trigger';
 @dropdown-link-prefix-cls: ~'@{dropdown-prefix-cls}-link';
 
+@dropdown-line-height: 18px;
+
 .@{dropdown-link-prefix-cls} {
-  color: @theme-color;
+  color: @color-theme;
   text-decoration: none;
   background-color: transparent;
   outline: noned;
   cursor: pointer;
-  transition: color @transition-duration, background-color @transition-duration;
+  transition: color @duration-promptly, background-color @duration-promptly;
   -webkit-text-decoration-skip: objects;
 
   &.disabled,
   &.disabled:hover {
     cursor: default;
-    color: @disabled-color;
+    color: @color-disabled;
   }
 
   &:hover {
-    color: @theme-color-hover;
+    color: @color-theme-hover;
   }
 }
 
@@ -33,12 +36,12 @@
   .reset-component;
   opacity: 1;
   visibility: visible;
-  z-index: @zIndex-popper;
-  background-color: @white;
-  border-radius: @radius-size;
+  z-index: @z-index-popper;
+  background-color: @color-background;
+  border-radius: @radius-border;
   min-width: @dropdown-menu-min-width;
   max-width: @dropdown-menu-max-width;
-  box-shadow: 0 4px @dropdown-box-shadow-blur 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
 
   &.hidden {
     opacity: 0;
@@ -46,11 +49,11 @@
   }
 
   // 箭头样式
-  .popperArrow(@white, @dropdown-item-horizontal-gap, @dropdown-box-shadow-blur);
+  .popperArrow(@color-background, @dropdown-item-horizontal-gap, @dropdown-box-shadow-blur);
 
   &-menu {
     max-height: @dropdown-menu-max-height;
-    padding: @dropdown-menu-gap 0;
+    padding: @dropdown-menu-padding-vertical 0;
     overflow-y: auto;
     &-item {
       position: relative;
@@ -63,21 +66,21 @@
 
       &.disabled,
       &.disabled > a {
-        color: @disabled-color;
+        color: @dropdown-item-color-disabled;
         cursor: not-allowed;
       }
-      transition: background-color @transition-duration;
+      transition: background-color @duration-promptly;
       &:not(.disabled):hover {
-        background-color: @dropdown-hover-bg-color;
+        background-color: @dropdown-item-hover-bg-color;
       }
 
       &:not(.disabled):active,
       &:not(.disabled).selected {
-        color: @theme-color;
-        background-color: @dropdown-active-bg-color;
+        color: @color-theme;
+        background-color: @dropdown-item-active-bg-color;
 
         > a {
-          color: @theme-color;
+          color: @color-theme;
         }
       }
 
@@ -87,29 +90,29 @@
         top: 0;
         left: @dropdown-item-horizontal-gap;
         right: @dropdown-item-horizontal-gap;
-        height: 1px;
-        background-color: @dropdown-divided-color;
+        height: @dropdown-divided-height;
+        background-color: @dropdown-divided-color-bg;
       }
 
       &.danger,
       &.danger > a {
-        color: @error-color;
+        color: @dropdown-item-color-text-danger;
 
-        transition: color @transition-duration, background-color @transition-duration;
+        transition: color @duration-promptly, background-color @duration-promptly;
         &:hover {
-          color: @white;
-          background-color: @error-color;
+          color: @color-white;
+          background-color: @dropdown-item-color-background-danger-hover;
         }
       }
 
       > a {
         display: block;
-        margin: -1 * @dropdown-item-vertical-gap -1 * @dropdown-item-horizontal-gap;
+        margin: calc(-1 * @dropdown-item-vertical-gap) calc(-1 * @dropdown-item-horizontal-gap);
         padding: @dropdown-item-vertical-gap @dropdown-item-horizontal-gap;
         color: @dropdown-color;
         font-size: @dropdown-font-size;
         line-height: @dropdown-line-height;
-        transition: color @transition-duration;
+        transition: color @duration-promptly;
 
         &:hover {
           color: @dropdown-color;

package/lib/dropdown/style/token.less

@@ -0,0 +1,26 @@
+@import '../../style/themes/token.less';
+
+@dropdown-custom-prefix: ~'--@{kd-prefix}-c-dropdown';
+
+// color
+@dropdown-item-hover-bg-color: var(~'@{dropdown-custom-prefix}-item-color-background-hover', @color-hover);
+@dropdown-item-active-bg-color: var(~'@{dropdown-custom-prefix}-item-color-background-active', @color-theme-light-active);
+@dropdown-item-color-disabled: var(~'@{dropdown-custom-prefix}-item-color-text-disabled', @color-disabled);
+@dropdown-item-color-text-danger: var(~'@{dropdown-custom-prefix}-item-color-text-danger', @color-error);
+@dropdown-item-color-background-danger-hover: var(~'@{dropdown-custom-prefix}-item-color-background-danger-hover', @color-error);
+@dropdown-divided-color-bg: var(~'@{dropdown-custom-prefix}-divided-color-background', @color-border-weak);
+@dropdown-color: var(~'@{dropdown-custom-prefix}-menu-item-color-text', @color-text-primary);
+
+// sizing
+@dropdown-menu-min-width: var(~'@{dropdown-custom-prefix}-menu-sizing-min-width', 136px);
+@dropdown-menu-max-width: var(~'@{dropdown-custom-prefix}-menu-sizing-max-width', 320px);
+@dropdown-menu-max-height: var(~'@{dropdown-custom-prefix}-menu-sizing-max-height', 336px);
+@dropdown-divided-height: var(~'@{dropdown-custom-prefix}-divided-sizing-height', 1px);
+
+// spacing
+@dropdown-menu-padding-vertical: var(~'@{dropdown-custom-prefix}-menu-spacing-padding-vertical', 8px);
+@dropdown-item-vertical-gap: var(~'@{dropdown-custom-prefix}-item-spacing-padding-vertical', 7px);
+@dropdown-item-horizontal-gap: var(~'@{dropdown-custom-prefix}-item-spacing-padding-horizontal', 12px);
+
+// font
+@dropdown-font-size: var(~'@{dropdown-custom-prefix}-font-size', @font-size-small);

package/lib/empty/defaultEmptyImg.d.ts

@@ -0,0 +1,2 @@
+declare function DefaultEmptyImg(): JSX.Element;
+export default DefaultEmptyImg;

package/lib/empty/defaultEmptyImg.js

@@ -0,0 +1,113 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function DefaultEmptyImg() {
+  var _useContext = (0, _react.useContext)(_ConfigContext.default),
+      getPrefixCls = _useContext.getPrefixCls,
+      prefixCls = _useContext.prefixCls;
+
+  var emptyPrefixCls = getPrefixCls(prefixCls, 'empty');
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    className: "".concat(emptyPrefixCls, "-image"),
+    width: "168px",
+    height: "96px",
+    viewBox: "0 0 168 96",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("title", null, "\u7F16\u7EC4"), /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+    x1: "50%",
+    y1: "0%",
+    x2: "50%",
+    y2: "100%",
+    id: "linearGradient-1"
+  }, /*#__PURE__*/_react.default.createElement("stop", {
+    stopColor: "#D6DCE7",
+    offset: "0%"
+  }), /*#__PURE__*/_react.default.createElement("stop", {
+    stopColor: "#D6DCE7",
+    stopOpacity: "0",
+    offset: "100%"
+  }))), /*#__PURE__*/_react.default.createElement("g", {
+    id: "\u9875\u9762-1",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    id: "\u7F16\u7EC4"
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    transform: "translate(36.000000, 0.000000)",
+    id: "\u7F16\u7EC4"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M63,9 L63,24 L78,24 L78,84 C78,85.6568542 76.6568542,87 75,87 L21,87 C19.3431458,87 18,85.6568542 18,84 L18,12 C18,10.3431458 19.3431458,9 21,9 L63,9 Z",
+    id: "\u8DEF\u5F84",
+    fill: "#E2E8F3"
+  }), /*#__PURE__*/_react.default.createElement("rect", {
+    id: "\u77E9\u5F62",
+    fill: "#CAD0DB",
+    x: "24",
+    y: "24",
+    width: "9",
+    height: "9"
+  }), /*#__PURE__*/_react.default.createElement("polygon", {
+    id: "\u77E9\u5F62",
+    fill: "#EEF4FF",
+    points: "63 9 78 24 63 24"
+  }), /*#__PURE__*/_react.default.createElement("rect", {
+    id: "\u77E9\u5F62",
+    fill: "#CAD0DB",
+    x: "24",
+    y: "39",
+    width: "48",
+    height: "6"
+  }), /*#__PURE__*/_react.default.createElement("rect", {
+    id: "\u77E9\u5F62",
+    fill: "#CAD0DB",
+    x: "24",
+    y: "51",
+    width: "24",
+    height: "6"
+  })), /*#__PURE__*/_react.default.createElement("g", {
+    transform: "translate(108.000000, 40.000000)",
+    fill: "url(#linearGradient-1)",
+    id: "\u80CC\u666F/\u4E91",
+    opacity: "0.300000012"
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    id: "\u5F62\u72B6\u7ED3\u5408"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M3,39 L3,24 C3,15.7157288 9.71572875,9 18,9 C25.4616776,9 31.6508469,14.4482558 32.8063948,21.5836543 C33.797875,21.2064779 34.8748247,21 36,21 C40.9705627,21 45,25.0294373 45,30 L45,39 L3,39 Z"
+  }))), /*#__PURE__*/_react.default.createElement("g", {
+    transform: "translate(12.000000, 32.000000)",
+    fill: "url(#linearGradient-1)",
+    id: "\u80CC\u666F/\u4E91",
+    opacity: "0.300000012"
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    transform: "translate(24.000000, 24.000000) scale(-1, 1) translate(-24.000000, -24.000000) ",
+    id: "\u5F62\u72B6\u7ED3\u5408"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M3,39 L3,24 C3,15.7157288 9.71572875,9 18,9 C25.4616776,9 31.6508469,14.4482558 32.8063948,21.5836543 C33.797875,21.2064779 34.8748247,21 36,21 C40.9705627,21 45,25.0294373 45,30 L45,39 L3,39 Z"
+  }))))));
+}
+
+var _default = DefaultEmptyImg;
+exports.default = _default;

package/lib/empty/empty.d.ts

@@ -6,5 +6,9 @@ export interface IEmptyProps {
     imageStyle?: React.CSSProperties;
     children?: React.ReactNode;
 }
-declare const Empty: React.ForwardRefExoticComponent<IEmptyProps & React.RefAttributes<unknown>>;
+interface IEmptyType extends React.ForwardRefExoticComponent<IEmptyProps & React.RefAttributes<any>> {
+    DEFAULT_IMG?: React.ReactNode;
+    ILLUSTRATION_IMG?: React.ReactNode;
+}
+declare const Empty: IEmptyType;
 export default Empty;

package/lib/empty/empty.js

@@ -25,7 +25,9 @@ var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigCo
 
 var _utils = require("../_utils");
 
-var _transferEmpty = _interopRequireDefault(require("./img/transfer-empty.png"));
+var _defaultEmptyImg = _interopRequireDefault(require("./defaultEmptyImg"));
+
+var _illustrationEmptyImg = _interopRequireDefault(require("./illustrationEmptyImg"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -44,6 +46,10 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
   return t;
 };
 
+var defaultEmptyImg = /*#__PURE__*/_react.default.createElement(_defaultEmptyImg.default, null);
+
+var illustrationEmptyImg = /*#__PURE__*/_react.default.createElement(_illustrationEmptyImg.default, null);
+
 var InteranalEmpty = function InteranalEmpty(props, ref) {
   var _useContext = (0, _react.useContext)(_ConfigContext.default),
       getPrefixCls = _useContext.getPrefixCls,
@@ -55,7 +61,8 @@ var InteranalEmpty = function InteranalEmpty(props, ref) {
 
   var className = emptyProps.className,
       description = emptyProps.description,
-      image = emptyProps.image,
+      _emptyProps$image = emptyProps.image,
+      image = _emptyProps$image === void 0 ? defaultEmptyImg : _emptyProps$image,
       imageStyle = emptyProps.imageStyle,
       style = emptyProps.style,
       customPrefixcls = emptyProps.prefixCls,
@@ -70,17 +77,12 @@ var InteranalEmpty = function InteranalEmpty(props, ref) {
   var thisEmptyRef = (0, _react.useRef)();
   var emptyRef = ref || thisEmptyRef;
   var imgClasses = (0, _classnames.default)("".concat(emptyPrefixCls, "-image"));
-  var imgNode = image === undefined ? /*#__PURE__*/_react.default.createElement("img", {
-    src: _transferEmpty.default,
-    className: imgClasses,
-    style: imageStyle,
-    alt: "empty"
-  }) : image ? /*#__PURE__*/_react.default.createElement("img", {
+  var imgNode = typeof image === 'string' ? /*#__PURE__*/_react.default.createElement("img", {
     src: image,
     className: imgClasses,
     style: imageStyle,
     alt: "empty"
-  }) : null;
+  }) : image;
   var descriptionNode = description === undefined ? /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(emptyPrefixCls, "-description")
   }, emptyLangMsg.emptyText) : description ? /*#__PURE__*/_react.default.createElement("div", {
@@ -100,5 +102,7 @@ var InteranalEmpty = function InteranalEmpty(props, ref) {
 var Empty = /*#__PURE__*/_react.default.forwardRef(InteranalEmpty);
 
 Empty.displayName = 'Empty';
+Empty.DEFAULT_IMG = defaultEmptyImg;
+Empty.ILLUSTRATION_IMG = illustrationEmptyImg;
 var _default = Empty;
 exports.default = _default;

package/lib/empty/illustrationEmptyImg.d.ts

@@ -0,0 +1,2 @@
+declare function IllustrationEmptyImg(): JSX.Element;
+export default IllustrationEmptyImg;