antd-mobile 5.5.1 → 5.6.0

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

@@ -1,11 +1,11 @@
-import React, { createRef, forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import React from 'react';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
 import classNames from 'classnames';
 import Popup from '../popup';
 import Button from '../button';
-import { renderToBody } from '../../utils/render-to-body';
 import SafeArea from '../safe-area';
+import { renderImperatively } from '../../utils/render-imperatively';
 const classPrefix = `adm-action-sheet`;
 const defaultProps = {
   visible: false,
@@ -29,7 +29,8 @@ export const ActionSheet = p => {
       }
     },
     afterClose: props.afterClose,
-    className: `${classPrefix}-popup`,
+    className: classNames(`${classPrefix}-popup`, props.popupClassName),
+    style: props.popupStyle,
     getContainer: props.getContainer
   }, withNativeProps(props, React.createElement("div", {
     className: classPrefix
@@ -83,42 +84,5 @@ export const ActionSheet = p => {
   }))));
 };
 export function showActionSheet(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
-    }));
-    return React.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 = createRef();
-  const unmount = renderToBody(React.createElement(Wrapper, {
-    ref: ref
-  }));
-  return {
-    close: () => {
-      var _a;
-
-      (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();
-    }
-  };
+  return renderImperatively(React.createElement(ActionSheet, Object.assign({}, props)));
 }

package/es/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/es/components/badge/badge.js

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

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

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

package/es/components/checkbox/checkbox.js

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useRef } from 'react';
+import React, { useContext } from 'react';
 import { withNativeProps } from '../../utils/native-props';
 import classNames from 'classnames';
 import { CheckboxGroupContext } from './group-context';
@@ -8,6 +8,7 @@ import { devWarning } from '../../utils/dev-log';
 import { CheckIcon } from './check-icon';
 import { IndeterminateIcon } from './indeterminate-icon';
 import { isDev } from '../../utils/is-dev';
+import { NativeInput } from './native-input';
 const classPrefix = `adm-checkbox`;
 const defaultProps = {
   defaultChecked: false,
@@ -66,35 +67,17 @@ export const Checkbox = p => {
     }, props.indeterminate ? React.createElement(IndeterminateIcon, null) : checked && React.createElement(CheckIcon, null));
   };
 
-  const inputRef = useRef(null);
-  const labelRef = useRef(null);
-  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 withNativeProps(props, React.createElement("label", {
-    ref: labelRef,
     className: classNames(classPrefix, {
       [`${classPrefix}-checked`]: checked && !props.indeterminate,
       [`${classPrefix}-indeterminate`]: props.indeterminate,
       [`${classPrefix}-disabled`]: disabled,
       [`${classPrefix}-block`]: props.block
     })
-  }, React.createElement("input", {
-    ref: inputRef,
+  }, React.createElement(NativeInput, {
     type: 'checkbox',
     checked: checked,
-    onChange: e => {
-      setChecked(e.target.checked);
-    },
+    onChange: setChecked,
     disabled: disabled,
     id: props.id
   }), renderIcon(), props.children && React.createElement("div", {

package/es/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/es/components/checkbox/native-input.js

@@ -0,0 +1,28 @@
+import React, { useEffect, useRef } from 'react';
+export const NativeInput = props => {
+  const inputRef = useRef(null);
+  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.createElement("input", {
+    ref: inputRef,
+    type: 'checkbox',
+    checked: props.checked,
+    onChange: () => {},
+    disabled: props.disabled,
+    id: props.id
+  });
+};

package/es/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/es/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/es/components/dialog/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 { Dialog } from './dialog';
+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(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.createElement(Dialog, 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/es/components/dot-loading/dot-loading.js

@@ -53,7 +53,6 @@ export const DotLoading = 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'
   }))))))))));
 });

package/es/components/error-block/error-block.js

@@ -18,13 +18,15 @@ export const ErrorBlock = p => {
   const des = 'description' in props ? props.description : contentPack.description;
   const title = 'title' in props ? props.title : contentPack.title;
   let imageNode = React.createElement("img", {
-    src: icon
+    src: icon,
+    alt: 'error block image'
   });
 
   if (props.image) {
     if (typeof props.image === 'string') {
       imageNode = React.createElement("img", {
-        src: props.image
+        src: props.image,
+        alt: 'error block image'
       });
     } else {
       imageNode = props.image;

package/es/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/es/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/es/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/es/components/image-viewer/methods.d.ts

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

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

@@ -1,49 +1,18 @@
-import React, { createRef, forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import React, { createRef, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { renderToBody } from '../../utils/render-to-body';
 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;
 }
@@ -51,30 +20,39 @@ export function showMultiImageViewer(props) {
   clearImageViewer();
   const Wrapper = forwardRef((_, ref) => {
     const [visible, setVisible] = useState(false);
+    const closedRef = useRef(false);
     useEffect(() => {
-      setVisible(true);
+      if (!closedRef.current) {
+        setVisible(true);
+      } else {
+        handleAfterClose();
+      }
     }, []);
-    const isUnmountedRef = useUnmountedRef();
+
+    function handleClose() {
+      var _a;
+
+      closedRef.current = true;
+      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+      setVisible(false);
+    }
+
     useImperativeHandle(ref, () => ({
-      close: () => {
-        if (isUnmountedRef.current) return;
-        setVisible(false);
-      }
+      close: handleClose
     }));
-    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;
+    function handleAfterClose() {
+      var _a;
 
-        (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
-        unmount();
-      }
+      (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
+      unmount();
+      handlerSet.delete(handler);
+    }
+
+    return React.createElement(MultiImageViewer, Object.assign({}, props, {
+      visible: visible,
+      onClose: handleClose,
+      afterClose: handleAfterClose
     }));
   });
   const ref = createRef();
@@ -96,4 +74,7 @@ export function clearImageViewer() {
     handler.close();
   });
   handlerSet.clear();
-}
+}
+export const getH = () => {
+  console.log(handlerSet);
+};

package/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/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/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/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);
     }