antd-mobile 5.13.1 → 5.14.2

package/2x/cjs/components/action-sheet/action-sheet.css

@@ -8,17 +8,17 @@
   display: flex;
   justify-content: center;
   color: var(--adm-color-weak);
-  font-size: 30px;
+  font-size: var(--adm-font-size-7);
   padding: 36px 24px;
-  border-bottom: 2px solid var(--adm-border-color);
+  border-bottom: 2px solid var(--adm-color-border);
 }
 
 .adm-action-sheet-button-list {
-  border-bottom: 2px solid var(--adm-border-color);
+  border-bottom: 2px solid var(--adm-color-border);
 }
 
 .adm-action-sheet-button-item-wrapper {
-  border-bottom: 2px solid var(--adm-border-color);
+  border-bottom: 2px solid var(--adm-color-border);
 }
 
 .adm-action-sheet-button-item-wrapper:last-child {
@@ -28,7 +28,7 @@
 .adm-action-sheet-button-item {
   text-align: center;
   display: block;
-  background-color: #ffffff;
+  background-color: var(--adm-color-background);
   padding: 32px;
 }
 
@@ -44,11 +44,11 @@
 
 .adm-action-sheet-button-item-name {
   color: var(--adm-color-text);
-  font-size: 36px;
+  font-size: var(--adm-font-size-10);
 }
 
 .adm-action-sheet-button-item-description {
-  font-size: 24px;
+  font-size: var(--adm-font-size-4);
   color: var(--adm-color-weak);
   padding-top: 4px;
 }
@@ -58,6 +58,6 @@
 }
 
 .adm-action-sheet-cancel {
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
   padding-top: 16px;
 }

package/2x/cjs/components/badge/badge.css

@@ -15,11 +15,11 @@
 }
 
 .adm-badge-content {
-  color: #fff;
+  color: var(--adm-color-white);
   box-sizing: border-box;
   min-width: 16px;
   padding: 2px 8px;
-  font-size: 18px;
+  font-size: var(--adm-font-size-1);
   line-height: 24px;
   white-space: nowrap;
   font-weight: normal;

package/2x/cjs/components/button/button.css

@@ -1,11 +1,11 @@
 .adm-button {
   --color: var(--adm-color-white);
   --text-color: var(--adm-button-text-color, var(--adm-color-text));
-  --background-color: var(--adm-button-background-color, var(--adm-color-white));
+  --background-color: var(--adm-button-background-color, var(--adm-color-background));
   --border-radius: var(--adm-button-border-radius, 8px);
   --border-width: var(--adm-button-border-width, 2px);
   --border-style: var(--adm-button-border-style, solid);
-  --border-color: var(--adm-button-border-color, var(--adm-border-color));
+  --border-color: var(--adm-button-border-color, var(--adm-color-border));
   color: var(--text-color);
   background-color: var(--background-color);
   position: relative;
@@ -14,7 +14,7 @@
   height: auto;
   padding: 14px 24px;
   margin: 0;
-  font-size: 34px;
+  font-size: var(--adm-font-size-9);
   line-height: 1.4;
   text-align: center;
   border: var(--border-width) var(--border-style) var(--border-color);
@@ -107,7 +107,7 @@
 .adm-button.adm-button-mini {
   padding-top: 6px;
   padding-bottom: 6px;
-  font-size: 26px;
+  font-size: var(--adm-font-size-main);
 }
 
 .adm-button.adm-button-mini.adm-button-shape-rounded {
@@ -118,13 +118,13 @@
 .adm-button.adm-button-small {
   padding-top: 6px;
   padding-bottom: 6px;
-  font-size: 30px;
+  font-size: var(--adm-font-size-7);
 }
 
 .adm-button.adm-button-large {
   padding-top: 22px;
   padding-bottom: 22px;
-  font-size: 36px;
+  font-size: var(--adm-font-size-10);
 }
 
 .adm-button.adm-button-shape-rounded {

package/2x/cjs/components/button/button.patch.css

@@ -0,0 +1,106 @@
+.adm-button {
+  color: #333333;
+  background-color: #ffffff;
+  font-size: 34px;
+  border-width: 2px;
+  border-style: solid;
+  border-color: #eeeeee;
+  border-radius: 8px;
+}
+
+.adm-button::before {
+  transform: translate(-2px, -2px);
+  border: 2px solid #000;
+  border-radius: 8px;
+}
+
+.adm-button-default.adm-button-fill-outline {
+  background-color: transparent;
+  border-color: #333333;
+}
+
+.adm-button-default.adm-button-fill-none {
+  background-color: transparent;
+  border-width: 0;
+}
+
+.adm-button:not(.adm-button-default) {
+  color: #ffffff;
+}
+
+.adm-button:not(.adm-button-default).adm-button-fill-outline {
+  background-color: transparent;
+}
+
+.adm-button:not(.adm-button-default).adm-button-fill-none {
+  background-color: transparent;
+  border-width: 0;
+}
+
+.adm-button-primary {
+  background-color: #1677ff;
+  border-color: #1677ff;
+}
+
+.adm-button-primary.adm-button-fill-outline,
+.adm-button-primary.adm-button-fill-none {
+  color: #1677ff;
+}
+
+.adm-button-success {
+  background-color: #00b578;
+  border-color: #00b578;
+}
+
+.adm-button-success.adm-button-fill-outline,
+.adm-button-success.adm-button-fill-none {
+  color: #00b578;
+}
+
+.adm-button-danger {
+  background-color: #00b578;
+  border-color: #00b578;
+}
+
+.adm-button-danger.adm-button-fill-outline,
+.adm-button-danger.adm-button-fill-none {
+  color: #00b578;
+}
+
+.adm-button-warning {
+  background-color: #ff8f1f;
+  border-color: #ff8f1f;
+}
+
+.adm-button-warning.adm-button-fill-outline,
+.adm-button-warning.adm-button-fill-none {
+  color: #ff8f1f;
+}
+
+.adm-button.adm-button-mini {
+  font-size: 26px;
+}
+
+.adm-button.adm-button-small {
+  padding-top: 6px;
+  padding-bottom: 6px;
+  font-size: 30px;
+}
+
+.adm-button.adm-button-large {
+  padding-top: 22px;
+  padding-bottom: 22px;
+  font-size: 36px;
+}
+
+.adm-button.adm-button-shape-rounded {
+  border-radius: 2000px;
+}
+
+.adm-button.adm-button-shape-rounded::before {
+  border-radius: 2000px;
+}
+
+.adm-button.adm-button-shape-rectangular {
+  border-radius: 0;
+}

package/2x/cjs/components/calendar/calendar.css

@@ -21,7 +21,7 @@
 }
 
 .adm-calendar .adm-calendar-header .adm-calendar-title {
-  font-size: 36px;
+  font-size: var(--adm-font-size-10);
   flex: auto;
   text-align: center;
 }
@@ -92,12 +92,12 @@
 
 .adm-calendar-cell .adm-calendar-cell-top {
   flex: none;
-  font-size: 36px;
+  font-size: var(--adm-font-size-10);
 }
 
 .adm-calendar-cell .adm-calendar-cell-bottom {
   flex: none;
-  font-size: 24px;
+  font-size: var(--adm-font-size-4);
   height: 24px;
   line-height: 24px;
   color: var(--adm-color-weak);
@@ -108,10 +108,10 @@
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
-  border-bottom: solid 2px var(--adm-border-color);
+  border-bottom: solid 2px var(--adm-color-border);
   height: 90px;
   box-sizing: border-box;
-  font-size: 30px;
+  font-size: var(--adm-font-size-7);
   padding: 0 16px;
 }
 

package/2x/cjs/components/capsule-tabs/capsule-tabs.css

@@ -6,7 +6,7 @@
 .adm-capsule-tabs-header {
   position: relative;
   padding: 24px 12px;
-  border-bottom: solid 2px var(--adm-border-color);
+  border-bottom: solid 2px var(--adm-color-border);
 }
 
 .adm-capsule-tabs-tab-list {
@@ -34,14 +34,14 @@
   margin: 0 auto;
   border-radius: 40px;
   cursor: pointer;
-  font-size: 30px;
+  font-size: var(--adm-font-size-7);
   text-align: center;
   white-space: nowrap;
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
 }
 
 .adm-capsule-tabs-tab-active {
-  color: #fff;
+  color: var(--adm-color-white);
   background-color: var(--adm-color-primary);
 }
 
@@ -52,24 +52,4 @@
 
 .adm-capsule-tabs-content {
   padding: 24px;
-}
-
-.adm-capsule-tabs-header-mask {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  z-index: 1;
-  width: 60px;
-  height: 100%;
-  pointer-events: none;
-}
-
-.adm-capsule-tabs-header-mask-left {
-  left: 0;
-  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
-}
-
-.adm-capsule-tabs-header-mask-right {
-  right: 0;
-  background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));
 }

package/2x/cjs/components/card/card.css

@@ -1,5 +1,5 @@
 .adm-card {
-  background: #ffffff;
+  background: var(--adm-color-background);
   border-radius: 16px;
   padding: 0 24px;
 }
@@ -14,11 +14,11 @@
 }
 
 .adm-card-header:not(:last-child) {
-  border-bottom: solid 1px var(--adm-border-color);
+  border-bottom: solid 1px var(--adm-color-border);
 }
 
 .adm-card-header-title {
-  font-size: 30px;
+  font-size: var(--adm-font-size-7);
   line-height: 1.4;
   font-weight: bold;
 }

package/2x/cjs/components/cascader/cascader.css

@@ -15,14 +15,14 @@
 }
 
 .adm-cascader-header-button {
-  font-size: 30px;
+  font-size: var(--adm-font-size-7);
   display: inline-block;
   padding: 8px 8px;
 }
 
 .adm-cascader-header-title {
   padding: 8px 8px;
-  font-size: 30px;
+  font-size: var(--adm-font-size-7);
   color: var(--adm-color-text);
   text-align: center;
   flex: 1;

package/2x/cjs/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/2x/cjs/components/cascader-view/cascader-view.css

@@ -3,7 +3,7 @@
 }
 
 .adm-cascader-view-tabs.adm-tabs {
-  --title-font-size: 28px;
+  --title-font-size: var(--adm-font-size-6);
   --content-padding: none;
 }
 
@@ -26,7 +26,7 @@
 }
 
 .adm-cascader-view-item {
-  font-size: 28px;
+  font-size: var(--adm-font-size-6);
 }
 
 .adm-cascader-view-item-active {

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

@@ -52,7 +52,7 @@ const CascaderView = p => {
       (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, val, generateValueExtend(val));
     }
   }));
-  const [tabActiveKey, setTabActiveKey] = (0, _react.useState)(0);
+  const [tabActiveIndex, setTabActiveIndex] = (0, _react.useState)(0);
   const generateValueExtend = (0, _useCascaderValueExtend.useCascaderValueExtend)(props.options);
   const levels = (0, _react.useMemo)(() => {
     const ret = [];
@@ -84,15 +84,15 @@ const CascaderView = p => {
     return ret;
   }, [value, props.options]);
   (0, _react.useEffect)(() => {
-    setTabActiveKey(levels.length - 1);
+    setTabActiveIndex(levels.length - 1);
   }, [value]);
   (0, _react.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);
@@ -107,14 +107,20 @@ const CascaderView = p => {
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: classPrefix
   }, _react.default.createElement(_tabs.default, {
-    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.default.createElement(_tabs.default.Tab, {
-      key: index,
+      key: index.toString(),
       title: _react.default.createElement("div", {
         className: `${classPrefix}-header-title`
       }, selected ? selected.label : props.placeholder),

package/2x/cjs/components/cascader-view/use-cascader-value-extend.js

@@ -34,21 +34,12 @@ function useCascaderValueExtend(options) {
   }, [options]);
   const generateIsLeaf = (0, _react.useMemo)(() => {
     return (0, _memoize.default)(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/2x/cjs/components/center-popup/center-popup.css

@@ -0,0 +1,29 @@
+.adm-center-popup {
+  --background-color: var(--adm-center-popup-background-color, var(--adm-color-background));
+  --border-radius: var(--adm-center-popup-border-radius, 16px);
+  --max-width: var(--adm-center-popup-max-width, 75vw);
+  --min-width: var(--adm-center-popup-min-width, 560px);
+  --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/2x/cjs/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/2x/cjs/components/center-popup/center-popup.js

@@ -0,0 +1,116 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CenterPopup = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _renderToContainer = require("../../utils/render-to-container");
+
+var _mask = _interopRequireDefault(require("../mask"));
+
+var _withStopPropagation = require("../../utils/with-stop-propagation");
+
+var _withDefaultProps = require("../../utils/with-default-props");
+
+var _ahooks = require("ahooks");
+
+var _web = require("@react-spring/web");
+
+var _useInnerVisible = require("../../utils/use-inner-visible");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _nativeProps = require("../../utils/native-props");
+
+var _shouldRender = require("../../utils/should-render");
+
+var _useLockScroll = require("../../utils/use-lock-scroll");
+
+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); }
+
+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 defaultProps = {
+  destroyOnClose: false,
+  disableBodyScroll: true,
+  forceRender: false,
+  getContainer: null,
+  mask: true,
+  showCloseButton: false,
+  stopPropagation: ['click'],
+  visible: false
+};
+
+const CenterPopup = p => {
+  const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  const unmountedRef = (0, _ahooks.useUnmountedRef)();
+  const style = (0, _web.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] = (0, _react.useState)(props.visible);
+  (0, _ahooks.useIsomorphicLayoutEffect)(() => {
+    if (props.visible) {
+      setActive(true);
+    }
+  }, [props.visible]);
+  const ref = (0, _react.useRef)(null);
+  (0, _useLockScroll.useLockScroll)(ref, props.disableBodyScroll && active);
+  const maskVisible = (0, _useInnerVisible.useInnerVisible)(active && props.visible);
+
+  const body = _react.default.createElement("div", {
+    className: (0, _classnames.default)('adm-center-popup-body', props.bodyClassName),
+    style: props.bodyStyle
+  }, props.children);
+
+  const node = (0, _withStopPropagation.withStopPropagation)(props.stopPropagation, (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: 'adm-center-popup',
+    style: {
+      display: active ? undefined : 'none',
+      pointerEvents: active ? undefined : 'none'
+    }
+  }, props.mask && _react.default.createElement(_mask.default, {
+    visible: maskVisible,
+    forceRender: props.forceRender,
+    destroyOnClose: props.destroyOnClose,
+    onMaskClick: props.onMaskClick,
+    style: props.maskStyle,
+    className: (0, _classnames.default)('adm-center-popup-mask', props.maskClassName),
+    disableBodyScroll: false
+  }), _react.default.createElement("div", {
+    className: 'adm-center-popup-wrap'
+  }, _react.default.createElement(_web.animated.div, {
+    style: style,
+    ref: ref
+  }, body)))));
+  return _react.default.createElement(_shouldRender.ShouldRender, {
+    active: active,
+    forceRender: props.forceRender,
+    destroyOnClose: props.destroyOnClose
+  }, (0, _renderToContainer.renderToContainer)(props.getContainer, node));
+};
+
+exports.CenterPopup = CenterPopup;

package/2x/cjs/components/center-popup/center-popup.patch.css

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

package/2x/cjs/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/2x/cjs/components/center-popup/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("./center-popup.css");
+
+var _centerPopup2 = require("./center-popup");
+
+var _default = _centerPopup2.CenterPopup;
+exports.default = _default;

package/2x/cjs/components/check-list/check-list.css

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