antd-mobile 5.5.1 → 5.7.0

package/cjs/components/error-block/images/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.imageRecord = void 0;
+
+var _default = require("./default");
+
+var _disconnected = require("./disconnected");
+
+var _empty = require("./empty");
+
+var _busy = require("./busy");
+
+const imageRecord = {
+  'default': _default.defaultImage,
+  'disconnected': _disconnected.disconnectedImage,
+  'empty': _empty.emptyImage,
+  'busy': _busy.busyImage
+};
+exports.imageRecord = imageRecord;

package/cjs/components/floating-bubble/floating-bubble.css

@@ -7,6 +7,7 @@
   --edge-distance: 0;
   --size: 48px;
   --border-radius: 50%;
+  --background: var(--adm-color-primary);
 }
 .adm-floating-bubble-boundary-outer {
   position: fixed;
@@ -40,7 +41,7 @@
   transition: opacity ease 0.15s;
   user-select: none;
   touch-action: none;
-  background: var(--adm-color-primary);
+  background: var(--background);
   color: var(--adm-color-white);
   border-radius: var(--border-radius);
   z-index: var(--z-index);

package/cjs/components/floating-bubble/floating-bubble.d.ts

@@ -4,5 +4,5 @@ export declare type FloatingBubbleProps = {
     onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     axis?: 'x' | 'y' | 'xy' | 'lock';
     magnetic?: 'x' | 'y';
-} & NativeProps<'--initial-position-left' | '--initial-position-right' | '--initial-position-top' | '--initial-position-bottom' | '--z-index' | '--edge-distance' | '--size' | '--border-radius'>;
+} & NativeProps<'--initial-position-left' | '--initial-position-right' | '--initial-position-top' | '--initial-position-bottom' | '--z-index' | '--edge-distance' | '--size' | '--border-radius' | '--background'>;
 export declare const FloatingBubble: FC<FloatingBubbleProps>;

package/cjs/components/form/form-item.d.ts

@@ -7,7 +7,7 @@ import type { FormLayout } from './index';
 declare type RenderChildren<Values = any> = (form: FormInstance<Values>) => React.ReactNode;
 declare type ChildrenType<Values = any> = RenderChildren<Values> | React.ReactNode;
 declare type RcFieldProps = Omit<FieldProps, 'children'>;
-export declare type FormItemProps = Pick<RcFieldProps, 'dependencies' | 'valuePropName' | 'name' | 'rules' | 'messageVariables' | 'trigger' | 'validateTrigger' | 'shouldUpdate' | 'initialValue'> & Pick<ListItemProps, 'style' | 'onClick' | 'extra' | 'arrow' | 'description'> & {
+export declare type FormItemProps = Pick<RcFieldProps, 'dependencies' | 'valuePropName' | 'name' | 'rules' | 'messageVariables' | 'trigger' | 'validateTrigger' | 'shouldUpdate' | 'initialValue'> & Pick<ListItemProps, 'style' | 'onClick' | 'extra' | 'clickable' | 'arrow' | 'description'> & {
     label?: React.ReactNode;
     help?: React.ReactNode;
     hasFeedback?: boolean;

package/cjs/components/form/form-item.js

@@ -120,6 +120,7 @@ const FormItemLayout = props => {
     }),
     disabled: disabled,
     onClick: props.onClick,
+    clickable: props.clickable,
     arrow: arrow
   }, _react.default.createElement("div", {
     className: (0, _classnames.default)(`${classPrefix}-child`, `${classPrefix}-child-position-${childElementPosition}`)
@@ -155,9 +156,10 @@ const FormItem = props => {
     onClick,
     shouldUpdate,
     dependencies,
+    clickable,
     arrow
   } = props,
-        fieldProps = (0, _tslib.__rest)(props, ["className", "style", "label", "help", "extra", "hasFeedback", "name", "required", "noStyle", "hidden", "layout", "childElementPosition", "description", "disabled", "rules", "children", "messageVariables", "trigger", "validateTrigger", "onClick", "shouldUpdate", "dependencies", "arrow"]);
+        fieldProps = (0, _tslib.__rest)(props, ["className", "style", "label", "help", "extra", "hasFeedback", "name", "required", "noStyle", "hidden", "layout", "childElementPosition", "description", "disabled", "rules", "children", "messageVariables", "trigger", "validateTrigger", "onClick", "shouldUpdate", "dependencies", "clickable", "arrow"]);
 
   const {
     validateTrigger: contextValidateTrigger
@@ -232,6 +234,7 @@ const FormItem = props => {
       hidden: hidden,
       layout: layout,
       childElementPosition: childElementPosition,
+      clickable: clickable,
       arrow: arrow
     }, _react.default.createElement(_context.NoStyleItemContext.Provider, {
       value: onSubMetaChange

package/cjs/components/image-viewer/index.d.ts

@@ -2,7 +2,7 @@
 import './image-viewer.less';
 import { showMultiImageViewer, showImageViewer, clearImageViewer } from './methods';
 export type { ImageViewerProps, MultiImageViewerProps, MultiImageViewerRef, } from './image-viewer';
-export type { ImageViewerHandler } from './methods';
+export type { ImageViewerShowHandler } from './methods';
 declare const _default: import("react").FC<import("./image-viewer").ImageViewerProps> & {
     Multi: import("react").ForwardRefExoticComponent<Omit<import("./image-viewer").ImageViewerProps, "image"> & {
         images?: string[] | undefined;

package/cjs/components/image-viewer/methods.d.ts

@@ -1,11 +1,7 @@
 import { ImageViewerProps, MultiImageViewerProps } from './image-viewer';
-export declare type ImageViewerHandler = {
-    close: () => void;
-};
-export declare function showImageViewer(props: Omit<ImageViewerProps, 'visible'>): {
-    close: () => void;
-};
-export declare function showMultiImageViewer(props: Omit<MultiImageViewerProps, 'visible'>): {
+export declare type ImageViewerShowHandler = {
     close: () => void;
 };
+export declare function showImageViewer(props: Omit<ImageViewerProps, 'visible'>): ImageViewerShowHandler;
+export declare function showMultiImageViewer(props: Omit<MultiImageViewerProps, 'visible'>): ImageViewerShowHandler;
 export declare function clearImageViewer(): void;

package/cjs/components/image-viewer/methods.js

@@ -7,106 +7,40 @@ exports.clearImageViewer = clearImageViewer;
 exports.showImageViewer = showImageViewer;
 exports.showMultiImageViewer = showMultiImageViewer;
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _renderToBody = require("../../utils/render-to-body");
+var _react = _interopRequireDefault(require("react"));
 
 var _imageViewer = require("./image-viewer");
 
-var _ahooks = require("ahooks");
-
-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 handlerSet = new Set();
 
 function showImageViewer(props) {
   clearImageViewer();
-  const Wrapper = (0, _react.forwardRef)((_, ref) => {
-    const [visible, setVisible] = (0, _react.useState)(false);
-    (0, _react.useEffect)(() => {
-      setVisible(true);
-    }, []);
-    const isUnmountedRef = (0, _ahooks.useUnmountedRef)();
-    (0, _react.useImperativeHandle)(ref, () => ({
-      close: () => {
-        if (isUnmountedRef.current) return;
-        setVisible(false);
-      }
-    }));
-    return _react.default.createElement(_imageViewer.ImageViewer, Object.assign({}, props, {
-      visible: visible,
-      onClose: () => {
-        var _a;
-
-        (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
-        setVisible(false);
-      },
-      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
-  }));
-  const handler = {
-    close: () => {
+  const handler = (0, _renderImperatively.renderImperatively)(_react.default.createElement(_imageViewer.ImageViewer, Object.assign({}, props, {
+    afterClose: () => {
       var _a;
 
-      (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();
+      handlerSet.delete(handler);
+      (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
     }
-  };
+  })));
   handlerSet.add(handler);
   return handler;
 }
 
 function showMultiImageViewer(props) {
   clearImageViewer();
-  const Wrapper = (0, _react.forwardRef)((_, ref) => {
-    const [visible, setVisible] = (0, _react.useState)(false);
-    (0, _react.useEffect)(() => {
-      setVisible(true);
-    }, []);
-    const isUnmountedRef = (0, _ahooks.useUnmountedRef)();
-    (0, _react.useImperativeHandle)(ref, () => ({
-      close: () => {
-        if (isUnmountedRef.current) return;
-        setVisible(false);
-      }
-    }));
-    return _react.default.createElement(_imageViewer.MultiImageViewer, Object.assign({}, props, {
-      visible: visible,
-      onClose: () => {
-        var _a;
-
-        (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
-        setVisible(false);
-      },
-      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
-  }));
-  const handler = {
-    close: () => {
+  const handler = (0, _renderImperatively.renderImperatively)(_react.default.createElement(_imageViewer.MultiImageViewer, Object.assign({}, props, {
+    afterClose: () => {
       var _a;
 
-      (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();
+      handlerSet.delete(handler);
+      (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
     }
-  };
+  })));
   handlerSet.add(handler);
   return handler;
 }

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

@@ -6,7 +6,7 @@ import { confirm } from './confirm';
 import { clear } from './clear';
 export type { ModalProps } from './modal';
 export type { Action } from './modal-action-button';
-export type { ModalShowProps, ModalShowRef } from './show';
+export type { ModalShowProps, ModalShowHandler } from './show';
 export type { ModalAlertProps } from './alert';
 export type { ModalConfirmProps } from './confirm';
 declare const _default: import("react").FC<import("./modal").ModalProps> & {

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

@@ -1,9 +1,7 @@
 import { ModalProps } from './modal';
 export declare type ModalShowProps = Omit<ModalProps, 'visible'>;
-export declare type ModalShowRef = {
+export declare type ModalShowHandler = {
     close: () => void;
 };
 export declare const closeFnSet: Set<() => void>;
-export declare function show(props: ModalShowProps): {
-    close: () => void;
-};
+export declare function show(props: ModalShowProps): ModalShowHandler;

package/cjs/components/modal/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 _modal = require("./modal");
 
-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(_modal.Modal, 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(_modal.Modal, 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/picker/picker.js

@@ -17,12 +17,10 @@ var _usePropsValue = require("../../utils/use-props-value");
 
 var _pickerView = _interopRequireDefault(require("../picker-view"));
 
-var _useColumns = require("../picker-view/use-columns");
+var _columnsExtend = require("../picker-view/columns-extend");
 
 var _configProvider = require("../config-provider");
 
-var _usePickerValueExtend = require("../picker-view/use-picker-value-extend");
-
 var _ahooks = require("ahooks");
 
 var _safeArea = _interopRequireDefault(require("../safe-area"));
@@ -52,12 +50,11 @@ const Picker = (0, _react.memo)(p => {
     onChange: val => {
       var _a;
 
-      (_a = props.onConfirm) === null || _a === void 0 ? void 0 : _a.call(props, val, generateValueExtend(val));
+      const extend = (0, _columnsExtend.generateColumnsExtend)(props.columns, val);
+      (_a = props.onConfirm) === null || _a === void 0 ? void 0 : _a.call(props, val, extend);
     }
-  })); // TODO: columns generated twice in Picker and PickerView, which can be improved
-
-  const columns = (0, _useColumns.useColumns)(props.columns, value);
-  const generateValueExtend = (0, _usePickerValueExtend.usePickerValueExtend)(columns);
+  }));
+  const extend = (0, _columnsExtend.useColumnsExtend)(props.columns, value);
   const [innerValue, setInnerValue] = (0, _react.useState)(value);
   (0, _react.useEffect)(() => {
     if (innerValue !== value) {
@@ -130,7 +127,7 @@ const Picker = (0, _react.memo)(p => {
     position: 'bottom'
   }));
 
-  return _react.default.createElement(_react.default.Fragment, null, popupElement, (_a = props.children) === null || _a === void 0 ? void 0 : _a.call(props, generateValueExtend(value).items));
+  return _react.default.createElement(_react.default.Fragment, null, popupElement, (_a = props.children) === null || _a === void 0 ? void 0 : _a.call(props, extend.items));
 });
 exports.Picker = Picker;
 Picker.displayName = 'Picker';

package/cjs/components/picker-view/columns-extend.d.ts

@@ -0,0 +1,3 @@
+import type { PickerViewProps, PickerValue, PickerValueExtend } from './picker-view';
+export declare function generateColumnsExtend(rawColumns: PickerViewProps['columns'], val: PickerValue[]): PickerValueExtend;
+export declare function useColumnsExtend(rawColumns: PickerViewProps['columns'], value: PickerValue[]): PickerValueExtend;

package/cjs/components/picker-view/columns-extend.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateColumnsExtend = generateColumnsExtend;
+exports.useColumnsExtend = useColumnsExtend;
+
+var _react = require("react");
+
+var _withCache = require("../../utils/with-cache");
+
+function generateColumnsExtend(rawColumns, val) {
+  const columns = (0, _withCache.withCache)(() => {
+    const c = typeof rawColumns === 'function' ? rawColumns(val) : rawColumns;
+    return c.map(column => column.map(item => typeof item === 'string' ? {
+      label: item,
+      value: item
+    } : item));
+  });
+  const items = (0, _withCache.withCache)(() => {
+    return val.map((v, index) => {
+      var _a;
+
+      const column = columns()[index];
+      if (!column) return null;
+      return (_a = column.find(item => item.value === v)) !== null && _a !== void 0 ? _a : null;
+    });
+  });
+  const extend = {
+    get columns() {
+      return columns();
+    },
+
+    get items() {
+      return items();
+    }
+
+  };
+  return extend;
+}
+
+function useColumnsExtend(rawColumns, value) {
+  return (0, _react.useMemo)(() => generateColumnsExtend(rawColumns, value), [rawColumns, value]);
+}

package/cjs/components/picker-view/picker-view.d.ts

@@ -2,6 +2,7 @@ import React, { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type PickerValue = string | null;
 export declare type PickerValueExtend = {
+    columns: PickerColumnItem[][];
     items: (PickerColumnItem | null)[];
 };
 export declare type PickerColumnItem = {

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

@@ -11,12 +11,10 @@ var _withDefaultProps = require("../../utils/with-default-props");
 
 var _wheel = require("./wheel");
 
-var _useColumns = require("./use-columns");
+var _columnsExtend = require("./columns-extend");
 
 var _nativeProps = require("../../utils/native-props");
 
-var _usePickerValueExtend = require("./use-picker-value-extend");
-
 var _ahooks = require("ahooks");
 
 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); }
@@ -29,17 +27,7 @@ const defaultProps = {
 };
 const PickerView = (0, _react.memo)(p => {
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
-  const [innerValue, setInnerValue] = (0, _react.useState)(props.value === undefined ? props.defaultValue : props.value);
-  (0, _ahooks.useDebounceEffect)(() => {
-    var _a;
-
-    if (props.value === innerValue) return;
-    (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, innerValue, generateValueExtend(innerValue));
-  }, [innerValue], {
-    wait: 0,
-    leading: false,
-    trailing: true
-  }); // Sync `value` to `innerValue`
+  const [innerValue, setInnerValue] = (0, _react.useState)(props.value === undefined ? props.defaultValue : props.value); // Sync `value` to `innerValue`
 
   (0, _react.useEffect)(() => {
     if (props.value === undefined) return; // Uncontrolled mode
@@ -58,8 +46,18 @@ const PickerView = (0, _react.memo)(p => {
       window.clearTimeout(timeout);
     };
   }, [props.value, innerValue]);
-  const columns = (0, _useColumns.useColumns)(props.columns, innerValue);
-  const generateValueExtend = (0, _usePickerValueExtend.usePickerValueExtend)(columns);
+  const extend = (0, _columnsExtend.useColumnsExtend)(props.columns, innerValue);
+  const columns = extend.columns;
+  (0, _ahooks.useDebounceEffect)(() => {
+    var _a;
+
+    if (props.value === innerValue) return;
+    (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, innerValue, extend);
+  }, [innerValue], {
+    wait: 0,
+    leading: false,
+    trailing: true
+  });
   const handleSelect = (0, _react.useCallback)((val, index) => {
     setInnerValue(prev => {
       const next = [...prev];

package/cjs/components/popover/popover.css

@@ -36,6 +36,7 @@
   box-shadow: 0 0 30px 0 rgba(51, 51, 51, 0.2);
   font-size: 15px;
   min-width: 32px;
+  max-width: calc(100vw - 24px);
   overflow-y: hidden;
 }
 .adm-popover-inner-content {

package/cjs/components/popover/popover.js

@@ -149,6 +149,7 @@ const Popover = (0, _react.forwardRef)((p, ref) => {
     if (!props.trigger) return;
 
     function handleClick() {
+      console.log('handleClick');
       setVisible(v => !v);
     }