antd-mobile 5.5.1 → 5.7.0

package/2x/es/components/image-viewer/methods.js

@@ -1,93 +1,30 @@
-import React, { createRef, forwardRef, useEffect, useImperativeHandle, useState } from 'react';
-import { renderToBody } from '../../utils/render-to-body';
+import React from 'react';
 import { ImageViewer, MultiImageViewer } from './image-viewer';
-import { useUnmountedRef } from 'ahooks';
+import { renderImperatively } from '../../utils/render-imperatively';
 const handlerSet = new Set();
 export function showImageViewer(props) {
   clearImageViewer();
-  const Wrapper = forwardRef((_, ref) => {
-    const [visible, setVisible] = useState(false);
-    useEffect(() => {
-      setVisible(true);
-    }, []);
-    const isUnmountedRef = useUnmountedRef();
-    useImperativeHandle(ref, () => ({
-      close: () => {
-        if (isUnmountedRef.current) return;
-        setVisible(false);
-      }
-    }));
-    return React.createElement(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 = createRef();
-  const unmount = renderToBody(React.createElement(Wrapper, {
-    ref: ref
-  }));
-  const handler = {
-    close: () => {
+  const handler = renderImperatively(React.createElement(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;
 }
 export function showMultiImageViewer(props) {
   clearImageViewer();
-  const Wrapper = forwardRef((_, ref) => {
-    const [visible, setVisible] = useState(false);
-    useEffect(() => {
-      setVisible(true);
-    }, []);
-    const isUnmountedRef = useUnmountedRef();
-    useImperativeHandle(ref, () => ({
-      close: () => {
-        if (isUnmountedRef.current) return;
-        setVisible(false);
-      }
-    }));
-    return React.createElement(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 = createRef();
-  const unmount = renderToBody(React.createElement(Wrapper, {
-    ref: ref
-  }));
-  const handler = {
-    close: () => {
+  const handler = renderImperatively(React.createElement(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/2x/es/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/2x/es/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/2x/es/components/modal/show.js

@@ -1,52 +1,16 @@
-import React, { createRef, forwardRef, useEffect, useImperativeHandle, useState } from 'react';
-import { renderToBody } from '../../utils/render-to-body';
+import React from 'react';
 import { Modal } from './modal';
+import { renderImperatively } from '../../utils/render-imperatively';
 export const closeFnSet = new Set();
 export function show(props) {
-  const Wrapper = forwardRef((_, ref) => {
-    const [visible, setVisible] = useState(false);
-    useEffect(() => {
-      setVisible(true);
-    }, []);
-
-    function handleClose() {
-      var _a;
-
-      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
-      setVisible(false);
-    }
-
-    useImperativeHandle(ref, () => ({
-      close: handleClose
-    }));
-
-    function handleAfterClose() {
+  const handler = renderImperatively(React.createElement(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.createElement(Modal, Object.assign({}, props, {
-      visible: visible,
-      onClose: handleClose,
-      afterClose: handleAfterClose
-    }));
-  });
-  const ref = createRef();
-  const unmount = renderToBody(React.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/2x/es/components/picker/picker.js

@@ -4,9 +4,8 @@ import { mergeProps } from '../../utils/with-default-props';
 import { withNativeProps } from '../../utils/native-props';
 import { usePropsValue } from '../../utils/use-props-value';
 import PickerView from '../picker-view';
-import { useColumns } from '../picker-view/use-columns';
+import { generateColumnsExtend, useColumnsExtend } from '../picker-view/columns-extend';
 import { useConfig } from '../config-provider';
-import { usePickerValueExtend } from '../picker-view/use-picker-value-extend';
 import { useMemoizedFn } from 'ahooks';
 import SafeArea from '../safe-area';
 const classPrefix = `adm-picker`;
@@ -28,12 +27,11 @@ export const Picker = memo(p => {
     onChange: val => {
       var _a;
 
-      (_a = props.onConfirm) === null || _a === void 0 ? void 0 : _a.call(props, val, generateValueExtend(val));
+      const extend = 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 = useColumns(props.columns, value);
-  const generateValueExtend = usePickerValueExtend(columns);
+  }));
+  const extend = useColumnsExtend(props.columns, value);
   const [innerValue, setInnerValue] = useState(value);
   useEffect(() => {
     if (innerValue !== value) {
@@ -104,6 +102,6 @@ export const Picker = memo(p => {
   }, pickerElement, React.createElement(SafeArea, {
     position: 'bottom'
   }));
-  return React.createElement(React.Fragment, null, popupElement, (_a = props.children) === null || _a === void 0 ? void 0 : _a.call(props, generateValueExtend(value).items));
+  return React.createElement(React.Fragment, null, popupElement, (_a = props.children) === null || _a === void 0 ? void 0 : _a.call(props, extend.items));
 });
 Picker.displayName = 'Picker';

package/2x/es/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/2x/es/components/picker-view/columns-extend.js

@@ -0,0 +1,34 @@
+import { useMemo } from 'react';
+import { withCache } from '../../utils/with-cache';
+export function generateColumnsExtend(rawColumns, val) {
+  const columns = 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 = 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;
+}
+export function useColumnsExtend(rawColumns, value) {
+  return useMemo(() => generateColumnsExtend(rawColumns, value), [rawColumns, value]);
+}

package/2x/es/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/2x/es/components/picker-view/picker-view.js

@@ -1,9 +1,8 @@
 import React, { memo, useCallback, useEffect, useState } from 'react';
 import { mergeProps } from '../../utils/with-default-props';
 import { Wheel } from './wheel';
-import { useColumns } from './use-columns';
+import { useColumnsExtend } from './columns-extend';
 import { withNativeProps } from '../../utils/native-props';
-import { usePickerValueExtend } from './use-picker-value-extend';
 import { useDebounceEffect } from 'ahooks';
 const classPrefix = `adm-picker-view`;
 const defaultProps = {
@@ -11,17 +10,7 @@ const defaultProps = {
 };
 export const PickerView = memo(p => {
   const props = mergeProps(defaultProps, p);
-  const [innerValue, setInnerValue] = useState(props.value === undefined ? props.defaultValue : props.value);
-  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] = useState(props.value === undefined ? props.defaultValue : props.value); // Sync `value` to `innerValue`
 
   useEffect(() => {
     if (props.value === undefined) return; // Uncontrolled mode
@@ -40,8 +29,18 @@ export const PickerView = memo(p => {
       window.clearTimeout(timeout);
     };
   }, [props.value, innerValue]);
-  const columns = useColumns(props.columns, innerValue);
-  const generateValueExtend = usePickerValueExtend(columns);
+  const extend = useColumnsExtend(props.columns, innerValue);
+  const columns = extend.columns;
+  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 = useCallback((val, index) => {
     setInnerValue(prev => {
       const next = [...prev];

package/2x/es/components/popover/popover.css

@@ -41,6 +41,7 @@
   box-shadow: 0 0 60px 0 rgba(51, 51, 51, 0.2);
   font-size: 30px;
   min-width: 64px;
+  max-width: calc(100vw - 48px);
   overflow-y: hidden;
 }
 

package/2x/es/components/popover/popover.js

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