antd-mobile 5.12.7 → 5.14.0

package/es/components/cascader/cascader.d.ts

@@ -16,5 +16,6 @@ export declare type CascaderProps = {
     confirmText?: ReactNode;
     cancelText?: ReactNode;
     children?: (items: (CascaderOption | null)[]) => ReactNode;
+    onTabsChange?: (index: number) => void;
 } & Pick<PopupProps, 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'stopPropagation'> & NativeProps;
 export declare const Cascader: FC<CascaderProps>;

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

@@ -2,7 +2,7 @@
   --height: auto;
 }
 .adm-cascader-view-tabs.adm-tabs {
-  --title-font-size: 14px;
+  --title-font-size: var(--adm-font-size-6);
   --content-padding: none;
 }
 .adm-cascader-view-header-title {
@@ -21,7 +21,7 @@
   --border-top: none;
 }
 .adm-cascader-view-item {
-  font-size: 14px;
+  font-size: var(--adm-font-size-6);
 }
 .adm-cascader-view-item-active {
   color: var(--adm-color-primary);

package/es/components/cascader-view/cascader-view.d.ts

@@ -17,5 +17,6 @@ export declare type CascaderViewProps = {
     defaultValue?: CascaderValue[];
     onChange?: (value: CascaderValue[], extend: CascaderValueExtend) => void;
     placeholder?: string;
+    onTabsChange?: (index: number) => void;
 } & NativeProps<'--height'>;
 export declare const CascaderView: FC<CascaderViewProps>;

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

@@ -27,7 +27,7 @@ export const CascaderView = p => {
       (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, val, generateValueExtend(val));
     }
   }));
-  const [tabActiveKey, setTabActiveKey] = useState(0);
+  const [tabActiveIndex, setTabActiveIndex] = useState(0);
   const generateValueExtend = useCascaderValueExtend(props.options);
   const levels = useMemo(() => {
     const ret = [];
@@ -59,15 +59,15 @@ export const CascaderView = p => {
     return ret;
   }, [value, props.options]);
   useEffect(() => {
-    setTabActiveKey(levels.length - 1);
+    setTabActiveIndex(levels.length - 1);
   }, [value]);
   useEffect(() => {
     const max = levels.length - 1;
 
-    if (tabActiveKey > max) {
-      setTabActiveKey(max);
+    if (tabActiveIndex > max) {
+      setTabActiveIndex(max);
     }
-  }, [tabActiveKey, levels]);
+  }, [tabActiveIndex, levels]);
 
   const onItemSelect = (selectValue, depth) => {
     const next = value.slice(0, depth);
@@ -82,14 +82,20 @@ export const CascaderView = p => {
   return withNativeProps(props, React.createElement("div", {
     className: classPrefix
   }, React.createElement(Tabs, {
-    activeKey: tabActiveKey.toString(),
-    onChange: key => setTabActiveKey(parseInt(key)),
+    activeKey: tabActiveIndex.toString(),
+    onChange: key => {
+      var _a;
+
+      const activeIndex = parseInt(key);
+      setTabActiveIndex(activeIndex);
+      (_a = props.onTabsChange) === null || _a === void 0 ? void 0 : _a.call(props, activeIndex);
+    },
     stretch: false,
     className: `${classPrefix}-tabs`
   }, levels.map((level, index) => {
     const selected = level.selected;
     return React.createElement(Tabs.Tab, {
-      key: index,
+      key: index.toString(),
       title: React.createElement("div", {
         className: `${classPrefix}-header-title`
       }, selected ? selected.label : props.placeholder),

package/es/components/cascader-view/use-cascader-value-extend.js

@@ -23,21 +23,12 @@ export function useCascaderValueExtend(options) {
   }, [options]);
   const generateIsLeaf = useMemo(() => {
     return memoize(val => {
-      var _a;
+      const children = val.reduce((currentOptions, v) => {
+        var _a;
 
-      let isLeaf = false;
-
-      for (const v of val) {
-        const target = options.find(option => option.value === v);
-
-        if (!target) {
-          break;
-        }
-
-        isLeaf = ((_a = target.children) === null || _a === void 0 ? void 0 : _a.length) === val.length;
-      }
-
-      return isLeaf;
+        return ((_a = currentOptions.find(option => option.value === v)) === null || _a === void 0 ? void 0 : _a.children) || [];
+      }, options);
+      return children.length === 0;
     }, val => JSON.stringify(val));
   }, [options]);
 

package/es/components/center-popup/center-popup.css

@@ -0,0 +1,26 @@
+.adm-center-popup {
+  --background-color: var(--adm-center-popup-background-color, var(--adm-color-background));
+  --border-radius: var(--adm-center-popup-border-radius, 8px);
+  --max-width: var(--adm-center-popup-max-width, 75vw);
+  --min-width: var(--adm-center-popup-min-width, 280px);
+  --z-index: var(--adm-center-popup-z-index, 1000);
+  position: fixed;
+  z-index: var(--z-index);
+}
+.adm-center-popup .adm-center-popup-mask {
+  z-index: 0;
+}
+.adm-center-popup-wrap {
+  position: fixed;
+  z-index: 1;
+  top: 50%;
+  left: 50%;
+  width: auto;
+  min-width: var(--min-width);
+  max-width: var(--max-width);
+  transform: translate(-50%, -50%);
+}
+.adm-center-popup-body {
+  background-color: var(--background-color);
+  border-radius: var(--border-radius);
+}

package/es/components/center-popup/center-popup.d.ts

@@ -0,0 +1,23 @@
+import React, { FC, PropsWithChildren } from 'react';
+import { GetContainer } from '../../utils/render-to-container';
+import { MaskProps } from '../mask';
+import { PropagationEvent } from '../../utils/with-stop-propagation';
+import { NativeProps } from '../../utils/native-props';
+export declare type CenterPopupProps = PropsWithChildren<{
+    afterClose?: () => void;
+    afterShow?: () => void;
+    bodyClassName?: string;
+    bodyStyle?: React.CSSProperties;
+    destroyOnClose?: boolean;
+    disableBodyScroll?: boolean;
+    forceRender?: boolean;
+    getContainer?: GetContainer;
+    mask?: boolean;
+    maskClassName?: string;
+    maskStyle?: MaskProps['style'];
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onMaskClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    stopPropagation?: PropagationEvent[];
+    visible?: boolean;
+}> & NativeProps<'--background-color' | '--border-radius' | '--max-width' | '--min-width' | '--z-index'>;
+export declare const CenterPopup: FC<CenterPopupProps>;

package/es/components/center-popup/center-popup.js

@@ -0,0 +1,86 @@
+import React, { useRef, useState } from 'react';
+import { renderToContainer } from '../../utils/render-to-container';
+import Mask from '../mask';
+import { withStopPropagation } from '../../utils/with-stop-propagation';
+import { mergeProps } from '../../utils/with-default-props';
+import { useIsomorphicLayoutEffect, useUnmountedRef } from 'ahooks';
+import { animated, useSpring } from '@react-spring/web';
+import { useInnerVisible } from '../../utils/use-inner-visible';
+import classNames from 'classnames';
+import { withNativeProps } from '../../utils/native-props';
+import { ShouldRender } from '../../utils/should-render';
+import { useLockScroll } from '../../utils/use-lock-scroll';
+const defaultProps = {
+  destroyOnClose: false,
+  disableBodyScroll: true,
+  forceRender: false,
+  getContainer: null,
+  mask: true,
+  showCloseButton: false,
+  stopPropagation: ['click'],
+  visible: false
+};
+export const CenterPopup = p => {
+  const props = mergeProps(defaultProps, p);
+  const unmountedRef = useUnmountedRef();
+  const style = useSpring({
+    scale: props.visible ? 1 : 0.8,
+    opacity: props.visible ? 1 : 0,
+    config: {
+      mass: 1.2,
+      tension: 200,
+      friction: 25,
+      clamp: true
+    },
+    onRest: () => {
+      var _a, _b;
+
+      if (unmountedRef.current) return;
+      setActive(props.visible);
+
+      if (props.visible) {
+        (_a = props.afterShow) === null || _a === void 0 ? void 0 : _a.call(props);
+      } else {
+        (_b = props.afterClose) === null || _b === void 0 ? void 0 : _b.call(props);
+      }
+    }
+  });
+  const [active, setActive] = useState(props.visible);
+  useIsomorphicLayoutEffect(() => {
+    if (props.visible) {
+      setActive(true);
+    }
+  }, [props.visible]);
+  const ref = useRef(null);
+  useLockScroll(ref, props.disableBodyScroll && active);
+  const maskVisible = useInnerVisible(active && props.visible);
+  const body = React.createElement("div", {
+    className: classNames('adm-center-popup-body', props.bodyClassName),
+    style: props.bodyStyle
+  }, props.children);
+  const node = withStopPropagation(props.stopPropagation, withNativeProps(props, React.createElement("div", {
+    className: 'adm-center-popup',
+    style: {
+      display: active ? undefined : 'none',
+      pointerEvents: active ? undefined : 'none'
+    }
+  }, props.mask && React.createElement(Mask, {
+    visible: maskVisible,
+    forceRender: props.forceRender,
+    destroyOnClose: props.destroyOnClose,
+    onMaskClick: props.onMaskClick,
+    style: props.maskStyle,
+    className: classNames('adm-center-popup-mask', props.maskClassName),
+    disableBodyScroll: false
+  }), React.createElement("div", {
+    className: 'adm-center-popup-wrap'
+  }, React.createElement(animated.div, {
+    style: style,
+    ref: ref
+  }, body)))));
+  return React.createElement(ShouldRender, {
+    active: active,
+    forceRender: props.forceRender,
+    destroyOnClose: props.destroyOnClose
+  }, renderToContainer(props.getContainer, node));
+};

package/es/components/center-popup/center-popup.patch.css

@@ -0,0 +1,11 @@
+.adm-center-popup {
+  z-index: 1000;
+}
+.adm-center-popup-wrap {
+  min-width: 280px;
+  max-width: 75vw;
+}
+.adm-center-popup-body {
+  background-color: #ffffff;
+  border-radius: 8px;
+}

package/es/components/center-popup/index.d.ts

@@ -0,0 +1,4 @@
+import './center-popup.less';
+import { CenterPopup } from './center-popup';
+export type { CenterPopupProps } from './center-popup';
+export default CenterPopup;

package/es/components/center-popup/index.js

@@ -0,0 +1,3 @@
+import "./center-popup.css";
+import { CenterPopup } from './center-popup';
+export default CenterPopup;

package/es/components/check-list/check-list.css

@@ -1,5 +1,5 @@
 .adm-check-list-item-extra {
-  font-size: 16px;
+  font-size: var(--adm-font-size-8);
   line-height: 1;
   color: var(--adm-color-primary);
 }

package/es/components/checkbox/checkbox.css

@@ -1,6 +1,6 @@
 .adm-checkbox {
   --icon-size: 22px;
-  --font-size: 17px;
+  --font-size: var(--adm-font-size-9);
   --gap: 8px;
   display: inline-flex;
   vertical-align: text-bottom;
@@ -41,13 +41,13 @@
 .adm-checkbox.adm-checkbox-disabled .adm-checkbox-icon.adm-checkbox-icon {
   color: #b7b7b7;
   border-color: var(--adm-color-light);
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
 }
 .adm-checkbox .adm-checkbox-custom-icon {
   font-size: var(--icon-size);
 }
 .adm-checkbox.adm-checkbox-indeterminate .adm-checkbox-icon {
-  background-color: #ffffff;
+  background-color: var(--adm-color-background);
   color: var(--adm-color-primary);
 }
 .adm-checkbox-content {

package/es/components/dialog/dialog.css

@@ -1,26 +1,14 @@
 .adm-dialog {
   --z-index: var(--adm-dialog-z-index, 1000);
-  position: fixed;
-  z-index: var(--z-index);
+  ---z-index: var(--z-index);
 }
-.adm-dialog .adm-dialog-mask {
-  z-index: 0;
-}
-.adm-dialog-wrap {
-  position: fixed;
-  z-index: 1;
-  top: 50%;
-  left: 50%;
-  width: 75vw;
-  max-width: 500px;
-  transform: translate(-50%, -50%);
+.adm-dialog .adm-center-popup {
+  --z-index: var(---z-index);
 }
 .adm-dialog-body {
   width: 100%;
   max-height: 70vh;
-  font-size: 14px;
-  background-color: white;
-  border-radius: 8px;
+  font-size: var(--adm-font-size-6);
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -34,57 +22,57 @@
 .adm-dialog-body:not(.adm-dialog-with-image) {
   padding-top: 20px;
 }
-.adm-dialog-body .adm-dialog-image-container {
+.adm-dialog-image-container {
   margin-bottom: 12px;
   max-height: 40vh;
 }
-.adm-dialog-body .adm-dialog-header {
+.adm-dialog-header {
   margin-bottom: 8px;
   padding: 0 12px;
 }
-.adm-dialog-body .adm-dialog-title {
+.adm-dialog-title {
   margin-bottom: 8px;
   padding: 0 12px;
   font-weight: bold;
-  font-size: 18px;
+  font-size: var(--adm-font-size-10);
   line-height: 25px;
   text-align: center;
 }
-.adm-dialog-body .adm-dialog-content {
+.adm-dialog-content {
   padding: 0 12px 20px;
   max-height: 70vh;
   overflow-x: hidden;
   overflow-y: auto;
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   line-height: 1.4;
-  color: #333;
+  color: var(--adm-color-text);
 }
-.adm-dialog-body .adm-dialog-content-empty {
+.adm-dialog-content-empty {
   padding: 0;
   height: 12px;
 }
-.adm-dialog-body .adm-dialog-footer {
+.adm-dialog-footer {
   user-select: none;
 }
-.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row {
+.adm-dialog-footer .adm-dialog-action-row {
   display: flex;
   align-items: stretch;
-  border-top: 0.5px solid var(--adm-border-color);
+  border-top: 0.5px solid var(--adm-color-border);
 }
-.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row > * {
+.adm-dialog-footer .adm-dialog-action-row > * {
   flex: 1;
 }
-.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button {
+.adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button {
   padding: 10px;
-  font-size: 18px;
+  font-size: var(--adm-font-size-10);
   line-height: 25px;
   border-radius: 0;
-  border-right: solid 0.5px var(--adm-border-color);
+  border-right: solid 0.5px var(--adm-color-border);
 }
-.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button-bold {
+.adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button-bold {
   font-weight: bold;
 }
-.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button:last-child {
+.adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button:last-child {
   border-right: none;
 }
 .adm-dialog-image-container {

package/es/components/dialog/dialog.d.ts

@@ -1,28 +1,16 @@
-import React, { FC, ReactNode } from 'react';
-import type { MaskProps } from '../mask';
+import { FC, ReactNode } from 'react';
 import { Action } from './dialog-action-button';
-import { GetContainer } from '../../utils/render-to-container';
-import { PropagationEvent } from '../../utils/with-stop-propagation';
 import { NativeProps } from '../../utils/native-props';
-export declare type DialogProps = {
-    afterClose?: () => void;
-    afterShow?: () => void;
+import { CenterPopupProps } from '../center-popup';
+export declare type DialogProps = Pick<CenterPopupProps, 'afterClose' | 'afterShow' | 'bodyClassName' | 'bodyStyle' | 'destroyOnClose' | 'disableBodyScroll' | 'forceRender' | 'getContainer' | 'maskClassName' | 'maskStyle' | 'stopPropagation' | 'visible'> & {
     image?: string;
     header?: ReactNode;
     title?: ReactNode;
     content?: ReactNode;
     actions?: (Action | Action[])[];
     onAction?: (action: Action, index: number) => void | Promise<void>;
-    closeOnAction?: boolean;
     onClose?: () => void;
+    closeOnAction?: boolean;
     closeOnMaskClick?: boolean;
-    visible?: boolean;
-    getContainer?: GetContainer;
-    bodyStyle?: React.CSSProperties;
-    bodyClassName?: string;
-    maskStyle?: MaskProps['style'];
-    maskClassName?: string;
-    stopPropagation?: PropagationEvent[];
-    disableBodyScroll?: boolean;
 } & NativeProps;
 export declare const Dialog: FC<DialogProps>;

package/es/components/dialog/dialog.js

@@ -1,58 +1,19 @@
 import { __awaiter } from "tslib";
-import React, { useState } from 'react';
+import React from 'react';
 import { mergeProps } from '../../utils/with-default-props';
 import classNames from 'classnames';
-import { useUnmountedRef } from 'ahooks';
-import Mask from '../mask';
 import { DialogActionButton } from './dialog-action-button';
 import Image from '../image';
-import { renderToContainer } from '../../utils/render-to-container';
-import { withStopPropagation } from '../../utils/with-stop-propagation';
 import AutoCenter from '../auto-center';
-import { useSpring, animated } from '@react-spring/web';
-import { withNativeProps } from '../../utils/native-props';
+import CenterPopup from '../center-popup';
 const defaultProps = {
-  visible: false,
   actions: [],
   closeOnAction: false,
-  closeOnMaskClick: false,
-  stopPropagation: ['click'],
-  getContainer: null,
-  disableBodyScroll: true
+  closeOnMaskClick: false
 };
 export const Dialog = p => {
   const props = mergeProps(defaultProps, p);
-  const unmountedRef = useUnmountedRef();
-  const style = useSpring({
-    scale: props.visible ? 1 : 0.8,
-    opacity: props.visible ? 1 : 0,
-    config: {
-      mass: 1.2,
-      tension: 200,
-      friction: 25,
-      clamp: true
-    },
-    onStart: () => {
-      setActive(true);
-    },
-    onRest: () => {
-      var _a, _b;
-
-      if (unmountedRef.current) return;
-      setActive(props.visible);
-
-      if (props.visible) {
-        (_a = props.afterShow) === null || _a === void 0 ? void 0 : _a.call(props);
-      } else {
-        (_b = props.afterClose) === null || _b === void 0 ? void 0 : _b.call(props);
-      }
-    }
-  });
-  const [active, setActive] = useState(props.visible);
-  const body = React.createElement("div", {
-    className: classNames(cls('body'), props.image && cls('with-image'), props.bodyClassName),
-    style: props.bodyStyle
-  }, !!props.image && React.createElement("div", {
+  const element = React.createElement(React.Fragment, null, !!props.image && React.createElement("div", {
     className: cls('image-container')
   }, React.createElement(Image, {
     src: props.image,
@@ -85,26 +46,25 @@ export const Dialog = p => {
       })
     })));
   })));
-  const node = withNativeProps(props, React.createElement("div", {
-    className: cls(),
-    style: {
-      display: active ? undefined : 'none'
-    }
-  }, React.createElement(Mask, {
+  return React.createElement(CenterPopup, {
+    afterClose: props.afterClose,
+    afterShow: props.afterShow,
+    onMaskClick: props.closeOnMaskClick ? () => {
+      var _a;
+
+      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+    } : undefined,
     visible: props.visible,
-    onMaskClick: props.closeOnMaskClick ? props.onClose : undefined,
-    style: props.maskStyle,
-    className: classNames(cls('mask'), props.maskClassName),
-    disableBodyScroll: props.disableBodyScroll
-  }), React.createElement("div", {
-    className: cls('wrap'),
-    style: {
-      pointerEvents: props.visible ? undefined : 'none'
-    }
-  }, React.createElement(animated.div, {
-    style: style
-  }, body))));
-  return renderToContainer(props.getContainer, withStopPropagation(props.stopPropagation, node));
+    getContainer: props.getContainer,
+    bodyStyle: props.bodyStyle,
+    bodyClassName: classNames(cls('body'), props.image && cls('with-image'), props.bodyClassName),
+    maskStyle: props.maskStyle,
+    maskClassName: props.maskClassName,
+    stopPropagation: props.stopPropagation,
+    disableBodyScroll: props.disableBodyScroll,
+    destroyOnClose: props.destroyOnClose,
+    forceRender: props.forceRender
+  }, element);
 };
 
 function cls(name = '') {

package/es/components/divider/divider.css

@@ -3,7 +3,7 @@
   align-items: center;
   margin: 16px 0;
   border-width: 0;
-  border-color: var(--adm-border-color);
+  border-color: var(--adm-color-border);
   border-style: solid;
   color: var(--adm-color-weak);
   font-size: 14px;
@@ -35,5 +35,5 @@
   margin: 0 16px;
   vertical-align: middle;
   border-top: 0;
-  border-left: 1px solid var(--adm-border-color);
+  border-left: 1px solid var(--adm-color-border);
 }

package/es/components/dropdown/dropdown.css

@@ -6,7 +6,7 @@
   border-bottom: 1px solid transparent;
 }
 .adm-dropdown-open .adm-dropdown-nav {
-  border-bottom-color: var(--adm-border-color);
+  border-bottom-color: var(--adm-color-border);
 }
 .adm-dropdown-item {
   display: flex;
@@ -20,7 +20,7 @@
   align-items: center;
   position: relative;
   max-width: 100%;
-  font-size: 13px;
+  font-size: var(--adm-font-size-main);
   padding: 12px;
 }
 .adm-dropdown-item .adm-dropdown-item-title-text {

package/es/components/ellipsis/ellipsis.js

@@ -39,7 +39,6 @@ export const Ellipsis = p => {
     container.style.textOverflow = 'clip';
     container.style.whiteSpace = 'normal';
     container.style.webkitLineClamp = 'unset';
-    container.style.webkitBoxOrient = 'unset';
     container.style.display = 'block';
     const lineHeight = pxToNumber(originStyle.lineHeight);
     const maxHeight = Math.floor(lineHeight * (props.rows + 0.5) + pxToNumber(originStyle.paddingTop) + pxToNumber(originStyle.paddingBottom));
@@ -98,7 +97,7 @@ export const Ellipsis = p => {
         }
 
         const leftPartMiddle = Math.floor((leftPart[0] + leftPart[1]) / 2);
-        const rightPartMiddle = Math.floor((rightPart[0] + rightPart[1]) / 2);
+        const rightPartMiddle = Math.ceil((rightPart[0] + rightPart[1]) / 2);
         container.innerText = props.content.slice(0, leftPartMiddle) + '...' + actionText + '...' + props.content.slice(rightPartMiddle, end);
 
         if (container.offsetHeight <= maxHeight) {

package/es/components/empty/empty.css

@@ -14,6 +14,6 @@
 }
 .adm-empty-description {
   margin-top: 8px;
-  font-size: 14px;
+  font-size: var(--adm-font-size-6);
   color: var(--adm-color-light);
 }

package/es/components/error-block/create-error-block.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactElement, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+import type { ErrorBlockStatus, ImageRecord } from '.';
+export declare type ErrorBlockProps = {
+    status?: ErrorBlockStatus;
+    title?: ReactNode;
+    image?: string | ReactElement;
+    description?: ReactNode;
+    fullPage?: boolean;
+    children?: React.ReactNode;
+} & NativeProps<'--image-height' | '--image-height-full-page' | '--image-width' | '--image-width-full-page'>;
+export declare function createErrorBlock(imageRecord: ImageRecord): React.FC<ErrorBlockProps>;