antd-mobile 5.5.1 → 5.7.0

package/cjs/components/action-sheet/action-sheet.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ActionSheet = void 0;
 exports.showActionSheet = showActionSheet;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _nativeProps = require("../../utils/native-props");
 
@@ -18,15 +18,11 @@ var _popup = _interopRequireDefault(require("../popup"));
 
 var _button = _interopRequireDefault(require("../button"));
 
-var _renderToBody = require("../../utils/render-to-body");
-
 var _safeArea = _interopRequireDefault(require("../safe-area"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var _renderImperatively = require("../../utils/render-imperatively");
 
-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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const classPrefix = `adm-action-sheet`;
 const defaultProps = {
@@ -52,7 +48,8 @@ const ActionSheet = p => {
       }
     },
     afterClose: props.afterClose,
-    className: `${classPrefix}-popup`,
+    className: (0, _classnames.default)(`${classPrefix}-popup`, props.popupClassName),
+    style: props.popupStyle,
     getContainer: props.getContainer
   }, (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: classPrefix
@@ -109,42 +106,5 @@ const ActionSheet = p => {
 exports.ActionSheet = ActionSheet;
 
 function showActionSheet(props) {
-  const Wrapper = (0, _react.forwardRef)((_, ref) => {
-    const [visible, setVisible] = (0, _react.useState)(false);
-    (0, _react.useEffect)(() => {
-      setVisible(true);
-    }, []);
-
-    function handleClose() {
-      var _a;
-
-      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
-      setVisible(false);
-    }
-
-    (0, _react.useImperativeHandle)(ref, () => ({
-      close: handleClose
-    }));
-    return _react.default.createElement(ActionSheet, Object.assign({}, props, {
-      visible: visible,
-      onClose: handleClose,
-      afterClose: () => {
-        var _a;
-
-        (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
-        unmount();
-      }
-    }));
-  });
-  const ref = (0, _react.createRef)();
-  const unmount = (0, _renderToBody.renderToBody)(_react.default.createElement(Wrapper, {
-    ref: ref
-  }));
-  return {
-    close: () => {
-      var _a;
-
-      (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();
-    }
-  };
+  return (0, _renderImperatively.renderImperatively)(_react.default.createElement(ActionSheet, Object.assign({}, props)));
 }

package/cjs/components/action-sheet/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import './action-sheet.less';
 import { showActionSheet } from './action-sheet';
-export type { Action, ActionSheetProps, ActionSheetRef } from './action-sheet';
+export type { Action, ActionSheetProps, ActionSheetShowHandler, } from './action-sheet';
 declare const _default: import("react").FC<import("./action-sheet").ActionSheetProps> & {
     show: typeof showActionSheet;
 };

package/cjs/components/badge/badge.js

@@ -25,7 +25,7 @@ const Badge = props => {
   } = props;
   const isDot = content === dot;
   const badgeCls = (0, _classnames.default)(classPrefix, !!children && `${classPrefix}-fixed`, isDot && `${classPrefix}-dot`, props.bordered && `${classPrefix}-bordered`);
-  const element = content ? (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+  const element = content || content === 0 ? (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: badgeCls,
     style: {
       '--color': color

package/cjs/components/calendar/calendar.d.ts

@@ -9,9 +9,10 @@ export declare type CalenderRef = {
     jumpToToday: () => void;
 };
 export declare type CalendarProps = {
+    onPageChange?: (year: number, month: number) => void;
     weekStartsOn?: 'Monday' | 'Sunday';
     renderLabel?: (date: Date) => string | null | undefined;
-    onPageChange?: (year: number, month: number) => void;
+    allowClear?: boolean;
 } & ({
     selectionMode?: undefined;
     value?: undefined;
@@ -21,12 +22,12 @@ export declare type CalendarProps = {
     selectionMode: 'single';
     value?: Date | null;
     defaultValue?: Date | null;
-    onChange?: (val: Date) => void;
+    onChange?: (val: Date | null) => void;
 } | {
     selectionMode: 'range';
     value?: [Date, Date] | null;
     defaultValue?: [Date, Date] | null;
-    onChange?: (val: [Date, Date]) => void;
+    onChange?: (val: [Date, Date] | null) => void;
 }) & NativeProps;
 export declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<CalenderRef>>;
 export {};

package/cjs/components/calendar/calendar.js

@@ -25,6 +25,10 @@ var _isoWeek = _interopRequireDefault(require("dayjs/plugin/isoWeek"));
 
 var _ahooks = require("ahooks");
 
+var _usePropsValue = require("../../utils/use-props-value");
+
+var _convert = require("./convert");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -35,7 +39,9 @@ _dayjs.default.extend(_isoWeek.default);
 
 const classPrefix = 'adm-calendar';
 const defaultProps = {
-  weekStartsOn: 'Sunday'
+  weekStartsOn: 'Sunday',
+  defaultValue: null,
+  allowClear: true
 };
 const Calendar = (0, _react.forwardRef)((p, ref) => {
   const today = (0, _dayjs.default)();
@@ -50,29 +56,21 @@ const Calendar = (0, _react.forwardRef)((p, ref) => {
     if (item) markItems.unshift(item);
   }
 
-  const dateRange = (0, _react.useMemo)(() => {
-    var _a, _b, _c, _d;
+  const [dateRange, setDateRange] = (0, _usePropsValue.usePropsValue)({
+    value: props.value === undefined ? undefined : (0, _convert.convertValueToRange)(props.selectionMode, props.value),
+    defaultValue: (0, _convert.convertValueToRange)(props.selectionMode, props.defaultValue),
+    onChange: v => {
+      var _a, _b;
 
-    if (props.selectionMode === 'single') {
-      const value = (_b = (_a = props.value) !== null && _a !== void 0 ? _a : props.defaultValue) !== null && _b !== void 0 ? _b : null;
-      return [value, value];
-    } else if (props.selectionMode === 'range') {
-      return (_d = (_c = props.value) !== null && _c !== void 0 ? _c : props.defaultValue) !== null && _d !== void 0 ? _d : [null, null];
-    } else {
-      return [null, null];
+      if (props.selectionMode === 'single') {
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v ? v[0] : null);
+      } else if (props.selectionMode === 'range') {
+        (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, v);
+      }
     }
-  }, [props.selectionMode, props.value, props.defaultValue]);
-  const [begin, setBegin] = (0, _react.useState)(null);
-  const [end, setEnd] = (0, _react.useState)(null);
-  (0, _ahooks.useIsomorphicLayoutEffect)(() => {
-    setBegin(dateRange[0] ? (0, _dayjs.default)(dateRange[0]) : null);
-    setEnd(dateRange[1] ? (0, _dayjs.default)(dateRange[1]) : null);
-  }, [dateRange[0], dateRange[1]]);
-  const [current, setCurrent] = (0, _react.useState)(() => {
-    var _a;
-
-    return (0, _dayjs.default)((_a = dateRange[0]) !== null && _a !== void 0 ? _a : today).date(1);
   });
+  const [intermediate, setIntermediate] = (0, _react.useState)(false);
+  const [current, setCurrent] = (0, _react.useState)(() => (0, _dayjs.default)(dateRange ? dateRange[0] : today).date(1));
   (0, _ahooks.useUpdateEffect)(() => {
     var _a;
 
@@ -136,14 +134,16 @@ const Calendar = (0, _react.forwardRef)((p, ref) => {
 
     while (cells.length < 6 * 7) {
       const d = iterator;
-
-      const isSelect = (() => {
-        if (!begin) return false;
-        if (d.isSame(begin, 'day')) return true;
-        if (!end) return false;
-        if (d.isSame(end, 'day')) return true;
-        return d.isAfter(begin, 'day') && d.isBefore(end, 'day');
-      })();
+      let isSelect = false;
+      let isBegin = false;
+      let isEnd = false;
+
+      if (dateRange) {
+        const [begin, end] = dateRange;
+        isBegin = d.isSame(begin, 'day');
+        isEnd = d.isSame(end, 'day');
+        isSelect = isBegin || isEnd || d.isAfter(begin, 'day') && d.isBefore(end, 'day');
+      }
 
       const inThisMonth = d.month() === current.month();
       cells.push(_react.default.createElement("div", {
@@ -151,41 +151,52 @@ const Calendar = (0, _react.forwardRef)((p, ref) => {
         className: (0, _classnames.default)(`${classPrefix}-cell`, inThisMonth ? `${classPrefix}-cell-in` : `${classPrefix}-cell-out`, inThisMonth && {
           [`${classPrefix}-cell-today`]: d.isSame(today, 'day'),
           [`${classPrefix}-cell-selected`]: isSelect,
-          [`${classPrefix}-cell-selected-begin`]: isSelect && d.isSame(begin, 'day'),
-          [`${classPrefix}-cell-selected-end`]: isSelect && (!end || d.isSame(end, 'day'))
+          [`${classPrefix}-cell-selected-begin`]: isBegin,
+          [`${classPrefix}-cell-selected-end`]: isEnd
         }),
         onClick: () => {
-          var _a, _b, _c;
-
           if (!props.selectionMode) return;
+          const date = d.toDate();
+
+          if (!inThisMonth) {
+            setCurrent(d.clone().date(1));
+          }
+
+          function shouldClear() {
+            if (!props.allowClear) return false;
+            if (!dateRange) return false;
+            const [begin, end] = dateRange;
+            return d.isSame(begin, 'date') && d.isSame(end, 'day');
+          }
 
           if (props.selectionMode === 'single') {
-            setBegin(d);
-            setEnd(d);
-            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, d.toDate());
+            if (props.allowClear && shouldClear()) {
+              setDateRange(null);
+              return;
+            }
+
+            setDateRange([date, date]);
           } else if (props.selectionMode === 'range') {
-            if (begin !== null && end === null) {
-              if (begin.isSame(d.toDate())) {
-                setBegin(null);
-                setEnd(null);
-              } else {
-                if (d.isBefore(begin)) {
-                  setEnd(begin);
-                  setBegin(d);
-                  (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, [d.toDate(), begin.toDate()]);
-                } else {
-                  setEnd(d);
-                  (_c = props.onChange) === null || _c === void 0 ? void 0 : _c.call(props, [begin.toDate(), d.toDate()]);
-                }
-              }
-            } else {
-              setBegin(d);
-              setEnd(null);
+            if (!dateRange) {
+              setDateRange([date, date]);
+              setIntermediate(true);
+              return;
             }
-          }
 
-          if (!inThisMonth) {
-            setCurrent(d.clone().date(1));
+            if (shouldClear()) {
+              setDateRange(null);
+              setIntermediate(false);
+              return;
+            }
+
+            if (intermediate) {
+              const another = dateRange[0];
+              setDateRange(another > date ? [date, another] : [another, date]);
+              setIntermediate(false);
+            } else {
+              setDateRange([date, date]);
+              setIntermediate(true);
+            }
           }
         }
       }, _react.default.createElement("div", {

package/cjs/components/calendar/convert.d.ts

@@ -0,0 +1,2 @@
+export declare type DateRange = [Date, Date] | null;
+export declare function convertValueToRange(selectionMode: 'single' | 'range' | undefined, value: Date | [Date, Date] | null): DateRange;

package/cjs/components/calendar/convert.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.convertValueToRange = convertValueToRange;
+
+function convertValueToRange(selectionMode, value) {
+  if (selectionMode === undefined) {
+    return null;
+  }
+
+  if (value === null) {
+    return null;
+  }
+
+  if (Array.isArray(value)) {
+    return value;
+  }
+
+  return [value, value];
+}

package/cjs/components/cascader-view/cascader-view.js

@@ -86,6 +86,13 @@ const CascaderView = p => {
   (0, _react.useEffect)(() => {
     setTabActiveKey(levels.length - 1);
   }, [value]);
+  (0, _react.useEffect)(() => {
+    const max = levels.length - 1;
+
+    if (tabActiveKey > max) {
+      setTabActiveKey(max);
+    }
+  }, [tabActiveKey, levels]);
 
   const onItemSelect = (selectValue, depth) => {
     const next = value.slice(0, depth);

package/cjs/components/checkbox/checkbox.js

@@ -25,6 +25,8 @@ var _indeterminateIcon = require("./indeterminate-icon");
 
 var _isDev = require("../../utils/is-dev");
 
+var _nativeInput = require("./native-input");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -90,35 +92,17 @@ const Checkbox = p => {
     }, props.indeterminate ? _react.default.createElement(_indeterminateIcon.IndeterminateIcon, null) : checked && _react.default.createElement(_checkIcon.CheckIcon, null));
   };
 
-  const inputRef = (0, _react.useRef)(null);
-  const labelRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(() => {
-    var _a;
-
-    (_a = labelRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('click', e => {
-      if (e.target !== inputRef.current) {
-        e.stopPropagation();
-        e.stopImmediatePropagation();
-      }
-    }, {
-      capture: false
-    });
-  }, []);
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("label", {
-    ref: labelRef,
     className: (0, _classnames.default)(classPrefix, {
       [`${classPrefix}-checked`]: checked && !props.indeterminate,
       [`${classPrefix}-indeterminate`]: props.indeterminate,
       [`${classPrefix}-disabled`]: disabled,
       [`${classPrefix}-block`]: props.block
     })
-  }, _react.default.createElement("input", {
-    ref: inputRef,
+  }, _react.default.createElement(_nativeInput.NativeInput, {
     type: 'checkbox',
     checked: checked,
-    onChange: e => {
-      setChecked(e.target.checked);
-    },
+    onChange: setChecked,
     disabled: disabled,
     id: props.id
   }), renderIcon(), props.children && _react.default.createElement("div", {

package/cjs/components/checkbox/native-input.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+interface Props {
+    type: 'checkbox' | 'radio';
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+    id?: string;
+}
+export declare const NativeInput: FC<Props>;
+export {};

package/cjs/components/checkbox/native-input.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NativeInput = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+
+const NativeInput = props => {
+  const inputRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (props.disabled) return;
+    if (!inputRef.current) return;
+    const input = inputRef.current;
+
+    function handleClick(e) {
+      e.stopPropagation();
+      e.stopImmediatePropagation();
+      props.onChange(input.checked);
+    }
+
+    input.addEventListener('click', handleClick);
+    return () => {
+      input.removeEventListener('click', handleClick);
+    };
+  }, [props.disabled, props.onChange]);
+  return _react.default.createElement("input", {
+    ref: inputRef,
+    type: 'checkbox',
+    checked: props.checked,
+    onChange: () => {},
+    disabled: props.disabled,
+    id: props.id
+  });
+};
+
+exports.NativeInput = NativeInput;

package/cjs/components/dialog/index.d.ts

@@ -6,7 +6,7 @@ import { confirm } from './confirm';
 import { clear } from './clear';
 export type { DialogProps } from './dialog';
 export type { Action } from './dialog-action-button';
-export type { DialogShowProps, DialogShowRef } from './show';
+export type { DialogShowProps, DialogShowHandler } from './show';
 export type { DialogAlertProps } from './alert';
 export type { DialogConfirmProps } from './confirm';
 declare const _default: import("react").FC<import("./dialog").DialogProps> & {

package/cjs/components/dialog/show.d.ts

@@ -1,9 +1,7 @@
 import { DialogProps } from './dialog';
 export declare type DialogShowProps = Omit<DialogProps, 'visible'>;
-export declare type DialogShowRef = {
+export declare type DialogShowHandler = {
     close: () => void;
 };
 export declare const closeFnSet: Set<() => void>;
-export declare function show(props: DialogShowProps): {
-    close: () => void;
-};
+export declare function show(props: DialogShowProps): DialogShowHandler;

package/cjs/components/dialog/show.js

@@ -6,64 +6,26 @@ Object.defineProperty(exports, "__esModule", {
 exports.closeFnSet = void 0;
 exports.show = show;
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _renderToBody = require("../../utils/render-to-body");
+var _react = _interopRequireDefault(require("react"));
 
 var _dialog = require("./dialog");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var _renderImperatively = require("../../utils/render-imperatively");
 
-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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const closeFnSet = new Set();
 exports.closeFnSet = closeFnSet;
 
 function show(props) {
-  const Wrapper = (0, _react.forwardRef)((_, ref) => {
-    const [visible, setVisible] = (0, _react.useState)(false);
-    (0, _react.useEffect)(() => {
-      setVisible(true);
-    }, []);
-
-    function handleClose() {
-      var _a;
-
-      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
-      setVisible(false);
-    }
-
-    (0, _react.useImperativeHandle)(ref, () => ({
-      close: handleClose
-    }));
-
-    function handleAfterClose() {
+  const handler = (0, _renderImperatively.renderImperatively)(_react.default.createElement(_dialog.Dialog, Object.assign({}, props, {
+    afterClose: () => {
       var _a;
 
+      closeFnSet.delete(handler.close);
       (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
-      unmount();
-      closeFnSet.delete(close);
     }
-
-    return _react.default.createElement(_dialog.Dialog, Object.assign({}, props, {
-      visible: visible,
-      onClose: handleClose,
-      afterClose: handleAfterClose
-    }));
-  });
-  const ref = (0, _react.createRef)();
-  const unmount = (0, _renderToBody.renderToBody)(_react.default.createElement(Wrapper, {
-    ref: ref
-  }));
-
-  const close = () => {
-    var _a;
-
-    (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();
-  };
-
-  closeFnSet.add(close);
-  return {
-    close
-  };
+  })));
+  closeFnSet.add(handler.close);
+  return handler;
 }

package/cjs/components/dot-loading/dot-loading.js

@@ -70,8 +70,7 @@ const DotLoading = (0, _react.memo)(p => {
     begin: `${i * 0.2}s`,
     repeatCount: 'indefinite',
     values: '16; 6; 26; 16; 16',
-    keyTimes: '0; 0.1; 0.3; 0.4; 1',
-    id: 'circ-anim'
+    keyTimes: '0; 0.1; 0.3; 0.4; 1'
   }))))))))));
 });
 exports.DotLoading = DotLoading;

package/cjs/components/empty/empty-icon.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare const EmptyIcon: FC<NativeProps>;

package/cjs/components/empty/empty-icon.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmptyIcon = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _nativeProps = require("../../utils/native-props");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const EmptyIcon = props => {
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("svg", {
+    viewBox: '0 0 64 41'
+  }, _react.default.createElement("g", {
+    transform: 'translate(0 1)',
+    fill: 'none',
+    fillRule: 'evenodd'
+  }, _react.default.createElement("ellipse", {
+    fill: '#f5f5f5',
+    cx: '32',
+    cy: '33',
+    rx: '32',
+    ry: '7'
+  }), _react.default.createElement("g", {
+    stroke: '#d9d9d9'
+  }, _react.default.createElement("path", {
+    d: 'M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z'
+  }), _react.default.createElement("path", {
+    d: 'M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z',
+    fill: '#fafafa'
+  })))));
+};
+
+exports.EmptyIcon = EmptyIcon;

package/cjs/components/empty/empty.js

@@ -9,32 +9,44 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _withDefaultProps = require("../../utils/with-default-props");
-
 var _nativeProps = require("../../utils/native-props");
 
-var _emptyIcon = _interopRequireDefault(require("../../assets/empty-icon.svg"));
+var _emptyIcon = require("./empty-icon");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const classPrefix = `adm-empty`;
-const defaultProps = {
-  image: _emptyIcon.default
-};
 
-const Empty = p => {
-  const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
-  const imageNode = typeof props.image === 'string' ? _react.default.createElement("img", {
-    className: `${classPrefix}-image`,
-    style: props.imageStyle,
-    src: props.image,
-    alt: 'empty'
-  }) : props.image;
+const Empty = props => {
+  function renderImageNode() {
+    const {
+      image
+    } = props;
+
+    if (image === undefined) {
+      return _react.default.createElement(_emptyIcon.EmptyIcon, {
+        className: `${classPrefix}-image`,
+        style: props.imageStyle
+      });
+    }
+
+    if (typeof image === 'string') {
+      return _react.default.createElement("img", {
+        className: `${classPrefix}-image`,
+        style: props.imageStyle,
+        src: image,
+        alt: 'empty'
+      });
+    }
+
+    return image;
+  }
+
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: classPrefix
   }, _react.default.createElement("div", {
     className: `${classPrefix}-image-container`
-  }, imageNode), props.description && _react.default.createElement("div", {
+  }, renderImageNode()), props.description && _react.default.createElement("div", {
     className: (0, _classnames.default)(`${classPrefix}-description`)
   }, props.description)));
 };