antd-mobile 0.0.0-dev-626cbf51f → 0.0.0-dev.bc248f5c7

package/2x/cjs/components/switch/switch.d.ts

@@ -5,8 +5,9 @@ export declare type SwitchProps = {
     disabled?: boolean;
     checked?: boolean;
     defaultChecked?: boolean;
+    /** @deprecated use `onChange` instead */
     beforeChange?: (val: boolean) => Promise<void>;
-    onChange?: (checked: boolean) => void;
+    onChange?: (checked: boolean) => void | Promise<void>;
     checkedText?: ReactNode;
     uncheckedText?: ReactNode;
 } & NativeProps<'--checked-color' | '--width' | '--height' | '--border-width'>;

package/2x/cjs/components/switch/switch.js

@@ -19,6 +19,10 @@ var _withDefaultProps = require("../../utils/with-default-props");
 
 var _spinIcon = require("./spin-icon");
 
+var _configProvider = require("../config-provider");
+
+var _validate = require("../../utils/validate");
+
 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; }
@@ -34,6 +38,9 @@ const Switch = p => {
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
   const disabled = props.disabled || props.loading || false;
   const [changing, setChanging] = (0, _react.useState)(false);
+  const {
+    locale
+  } = (0, _configProvider.useConfig)();
   const [checked, setChecked] = (0, _usePropsValue.usePropsValue)({
     value: props.checked,
     defaultValue: props.defaultChecked,
@@ -53,14 +60,25 @@ const Switch = p => {
 
         try {
           yield props.beforeChange(nextChecked);
-          setChecked(nextChecked);
           setChanging(false);
         } catch (e) {
           setChanging(false);
           throw e;
         }
-      } else {
-        setChecked(nextChecked);
+      }
+
+      const result = setChecked(nextChecked);
+
+      if ((0, _validate.isPromise)(result)) {
+        setChanging(true);
+
+        try {
+          yield result;
+          setChanging(false);
+        } catch (e) {
+          setChanging(false);
+          throw e;
+        }
       }
     });
   }
@@ -70,7 +88,11 @@ const Switch = p => {
     className: (0, _classnames.default)(classPrefix, {
       [`${classPrefix}-checked`]: checked,
       [`${classPrefix}-disabled`]: disabled || changing
-    })
+    }),
+    role: 'switch',
+    "aria-label": locale.Switch.name,
+    "aria-checked": checked,
+    "aria-disabled": disabled
   }, _react.default.createElement("div", {
     className: `${classPrefix}-checkbox`
   }, _react.default.createElement("div", {

package/2x/cjs/components/tab-bar/tab-bar.css

@@ -4,7 +4,7 @@
   justify-content: flex-start;
   align-items: stretch;
   overflow: hidden;
-  min-height: 100px;
+  min-height: 96px;
 }
 
 .adm-tab-bar-item {
@@ -12,6 +12,7 @@
   color: var(--adm-color-weak);
   white-space: nowrap;
   padding: 8px 16px;
+  width: -webkit-min-content;
   width: min-content;
   position: relative;
   cursor: pointer;
@@ -22,17 +23,20 @@
 }
 
 .adm-tab-bar-item-icon {
-  font-size: 40px;
-  height: 44px;
+  font-size: 48px;
+  height: 48px;
   line-height: 1;
-  margin: 8px 0 2px;
 }
 
 .adm-tab-bar-item-title {
-  font-size: 22px;
+  font-size: var(--adm-font-size-3);
   line-height: 30px;
 }
 
+.adm-tab-bar-item-title-with-icon {
+  margin-top: 4px;
+}
+
 .adm-tab-bar-item-active {
   color: var(--adm-color-primary);
 }

package/2x/cjs/components/tab-bar/tab-bar.js

@@ -23,6 +23,7 @@ var _traverseReactNode = require("../../utils/traverse-react-node");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+/* istanbul ignore next */
 const TabBarItem = () => {
   return null;
 };
@@ -73,7 +74,7 @@ const TabBar = p => {
       }, typeof item.props.icon === 'function' ? item.props.icon(active) : item.props.icon);
 
       const titleElement = item.props.title && _react.default.createElement("div", {
-        className: `${classPrefix}-item-title`
+        className: (0, _classnames.default)(`${classPrefix}-item-title`, Boolean(iconElement) && `${classPrefix}-item-title-with-icon`)
       }, typeof item.props.title === 'function' ? item.props.title(active) : item.props.title);
 
       if (iconElement) {

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

@@ -1,15 +1,17 @@
 .adm-tabs {
-  --title-font-size: 34px;
+  --title-font-size: var(--adm-font-size-9);
   --content-padding: 24px;
   --active-line-height: 4px;
   --active-line-border-radius: var(--active-line-height);
+  --active-line-color: var(--adm-color-primary);
+  --active-title-color: var(--adm-color-primary);
   position: relative;
   min-width: 0;
 }
 
 .adm-tabs-header {
   position: relative;
-  border-bottom: solid 2px var(--adm-border-color);
+  border-bottom: solid 2px var(--adm-color-border);
 }
 
 .adm-tabs-tab-list {
@@ -37,6 +39,7 @@
 .adm-tabs-tab {
   white-space: nowrap;
   padding: 16px 0 20px;
+  width: -webkit-min-content;
   width: min-content;
   margin: 0 auto;
   font-size: var(--title-font-size);
@@ -45,7 +48,7 @@
 }
 
 .adm-tabs-tab-active {
-  color: var(--adm-color-primary);
+  color: var(--active-title-color);
 }
 
 .adm-tabs-tab-disabled {
@@ -57,8 +60,7 @@
   position: absolute;
   bottom: 0;
   height: var(--active-line-height);
-  color: var(--adm-color-primary);
-  background: var(--adm-color-primary);
+  background: var(--active-line-color);
   border-radius: var(--active-line-border-radius);
 }
 
@@ -78,10 +80,10 @@
 
 .adm-tabs-header-mask-left {
   left: 0;
-  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+  background: linear-gradient(to right, var(--adm-color-background), rgba(255, 255, 255, 0));
 }
 
 .adm-tabs-header-mask-right {
   right: 0;
-  background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));
+  background: linear-gradient(to left, var(--adm-color-background), rgba(255, 255, 255, 0));
 }

package/2x/cjs/components/tabs/tabs.d.ts

@@ -15,5 +15,5 @@ export declare type TabsProps = {
     stretch?: boolean;
     onChange?: (key: string) => void;
     children?: React.ReactNode;
-} & NativeProps<'--fixed-active-line-width' | '--active-line-height' | '--active-line-border-radius' | '--title-font-size' | '--content-padding'>;
+} & NativeProps<'--fixed-active-line-width' | '--active-line-height' | '--active-line-border-radius' | '--title-font-size' | '--content-padding' | '--active-title-color' | '--active-line-color'>;
 export declare const Tabs: FC<TabsProps>;

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

@@ -0,0 +1,29 @@
+.adm-tabs-header {
+  border-bottom: solid 2px #eeeeee;
+}
+
+.adm-tabs-tab {
+  font-size: 34px;
+}
+
+.adm-tabs-tab-active {
+  color: #1677ff;
+}
+
+.adm-tabs-tab-line {
+  height: 4px;
+  background: #1677ff;
+  border-radius: 4px;
+}
+
+.adm-tabs-content {
+  padding: 24px;
+}
+
+.adm-tabs-header-mask-left {
+  background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
+}
+
+.adm-tabs-header-mask-right {
+  background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0));
+}

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

@@ -1,7 +1,7 @@
 .adm-tag {
   --border-radius: var(--adm-tag-border-radius, 4px);
   padding: 4px 8px;
-  font-size: 22px;
+  font-size: var(--adm-font-size-3);
   line-height: 1;
   font-weight: normal;
   background: var(--background-color);

package/2x/cjs/components/text-area/text-area.css

@@ -1,5 +1,5 @@
 .adm-text-area {
-  --font-size: 34px;
+  --font-size: var(--adm-font-size-9);
   --color: var(--adm-color-text);
   --placeholder-color: var(--adm-color-light);
   --disabled-color: var(--adm-color-weak);
@@ -27,11 +27,17 @@
   background: transparent;
   border: 0;
   outline: none;
+  -webkit-appearance: none;
   appearance: none;
   min-height: 1.5em;
   text-align: var(--text-align);
 }
 
+.adm-text-area-element::-webkit-input-placeholder {
+  color: var(--placeholder-color);
+  font-family: inherit;
+}
+
 .adm-text-area-element::placeholder {
   color: var(--placeholder-color);
   font-family: inherit;
@@ -67,6 +73,6 @@
 .adm-text-area-count {
   text-align: var(--count-text-align);
   color: var(--adm-color-weak);
-  font-size: 34px;
+  font-size: var(--adm-font-size-9);
   padding-top: 16px;
 }

package/2x/cjs/components/text-area/text-area.d.ts

@@ -19,6 +19,7 @@ export declare type TextAreaRef = {
     clear: () => void;
     focus: () => void;
     blur: () => void;
+    nativeElement: HTMLTextAreaElement | null;
 };
 export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "onClick" | "disabled" | "name" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "autoComplete" | "autoFocus" | "readOnly"> & {
     onChange?: ((val: string) => void) | undefined;
@@ -33,4 +34,8 @@ export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.Detail
         maxRows?: number | undefined;
     } | undefined;
     id?: string | undefined;
-} & NativeProps<"--color" | "--font-size" | "--placeholder-color" | "--text-align" | "--disabled-color" | "--count-text-align"> & React.RefAttributes<TextAreaRef>>;
+} & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--color" | "--font-size" | "--placeholder-color" | "--text-align" | "--disabled-color" | "--count-text-align", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<TextAreaRef>>;

package/2x/cjs/components/text-area/text-area.js

@@ -57,7 +57,12 @@ const TextArea = (0, _react.forwardRef)((p, ref) => {
       var _a;
 
       (_a = nativeTextAreaRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+    },
+
+    get nativeElement() {
+      return nativeTextAreaRef.current;
     }
+
   }));
   (0, _ahooks.useIsomorphicLayoutEffect)(() => {
     if (!autoSize) return;
@@ -123,7 +128,8 @@ const TextArea = (0, _react.forwardRef)((p, ref) => {
       compositingRef.current = false;
 
       if (maxLength) {
-        setValue([...value].slice(0, maxLength).join(''));
+        const v = e.target.value;
+        setValue([...v].slice(0, maxLength).join(''));
       }
 
       (_a = props.onCompositionEnd) === null || _a === void 0 ? void 0 : _a.call(props, e);

package/2x/cjs/components/toast/methods.js

@@ -7,100 +7,59 @@ exports.clear = clear;
 exports.config = config;
 exports.show = show;
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _getContainer = require("../../utils/get-container");
+var _react = _interopRequireDefault(require("react"));
 
 var _toast = require("./toast");
 
 var _withDefaultProps = require("../../utils/with-default-props");
 
-var _render = require("../../utils/render");
-
-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; }
+var _renderImperatively = require("../../utils/render-imperatively");
 
-const containers = [];
-
-function unmount(container) {
-  const unmountResult = (0, _render.unmount)(container);
-
-  if (unmountResult && container.parentNode) {
-    container.parentNode.removeChild(container);
-  }
-}
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+let currentHandler = null;
+let currentTimeout = null;
 const defaultProps = {
   duration: 2000,
   position: 'center',
   maskClickable: true
 };
 
+const ToastInner = props => _react.default.createElement(_toast.InternalToast, Object.assign({}, props));
+
 function show(p) {
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, typeof p === 'string' ? {
     content: p
   } : p);
-  let timer = 0;
-  const {
-    getContainer = () => document.body
-  } = props;
-  const container = document.createElement('div');
-  const bodyContainer = (0, _getContainer.resolveContainer)(getContainer);
-  bodyContainer.appendChild(container);
-  clear();
-  containers.push(container);
-  const TempToast = (0, _react.forwardRef)((_, ref) => {
-    const [visible, setVisible] = (0, _react.useState)(true);
-    (0, _react.useEffect)(() => {
-      return () => {
-        var _a;
-
-        (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
-      };
-    }, []);
-    (0, _react.useEffect)(() => {
-      if (props.duration === 0) {
-        return;
-      }
-
-      timer = window.setTimeout(() => {
-        setVisible(false);
-      }, props.duration);
-      return () => {
-        window.clearTimeout(timer);
-      };
-    }, []);
-    (0, _react.useImperativeHandle)(ref, () => ({
-      close: () => setVisible(false)
-    }));
-    return _react.default.createElement(_toast.InternalToast, Object.assign({}, props, {
-      getContainer: () => container,
-      visible: visible,
-      afterClose: () => {
-        unmount(container);
-      }
-    }));
-  });
-  const ref = (0, _react.createRef)();
-  (0, _render.render)(_react.default.createElement(TempToast, {
-    ref: ref
-  }), container);
-  return {
-    close: () => {
-      var _a;
-
-      (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();
+
+  const element = _react.default.createElement(ToastInner, Object.assign({}, props, {
+    onClose: () => {
+      currentHandler = null;
     }
-  };
+  }));
+
+  if (currentHandler) {
+    currentHandler.replace(element);
+  } else {
+    currentHandler = (0, _renderImperatively.renderImperatively)(element);
+  }
+
+  if (currentTimeout) {
+    window.clearTimeout(currentTimeout);
+  }
+
+  if (props.duration !== 0) {
+    currentTimeout = window.setTimeout(() => {
+      clear();
+    }, props.duration);
+  }
+
+  return currentHandler;
 }
 
 function clear() {
-  while (true) {
-    const container = containers.pop();
-    if (!container) break;
-    unmount(container);
-  }
+  currentHandler === null || currentHandler === void 0 ? void 0 : currentHandler.close();
+  currentHandler = null;
 }
 
 function config(val) {

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

@@ -14,7 +14,7 @@
   transform: translate(-50%, -50%);
   width: auto;
   min-width: 192px;
-  max-width: 70%;
+  max-width: 400px;
   max-height: 70%;
   overflow: auto;
   color: white;
@@ -22,7 +22,7 @@
   background-color: rgba(0, 0, 0, 0.7);
   border-radius: 16px;
   pointer-events: all;
-  font-size: 30px;
+  font-size: var(--adm-font-size-7);
   line-height: 1.5;
   box-sizing: border-box;
 }

package/2x/cjs/components/toast/toast.d.ts

@@ -1,9 +1,10 @@
 import React, { ReactNode } from 'react';
+import type { MaskProps } from '../mask';
 import { PropagationEvent } from '../../utils/with-stop-propagation';
 import { GetContainer } from '../../utils/render-to-container';
 export interface ToastProps {
     afterClose?: () => void;
-    maskStyle?: React.CSSProperties;
+    maskStyle?: MaskProps['style'];
     maskClassName?: string;
     maskClickable?: boolean;
     content?: ReactNode;

package/2x/cjs/components/toast/toast.js

@@ -44,10 +44,14 @@ const InternalToast = p => {
 
     switch (icon) {
       case 'success':
-        return _react.default.createElement(_antdMobileIcons.CheckOutline, null);
+        return _react.default.createElement(_antdMobileIcons.CheckOutline, {
+          className: `${classPrefix}-icon-success`
+        });
 
       case 'fail':
-        return _react.default.createElement(_antdMobileIcons.CloseOutline, null);
+        return _react.default.createElement(_antdMobileIcons.CloseOutline, {
+          className: `${classPrefix}-icon-fail`
+        });
 
       case 'loading':
         return _react.default.createElement(_spinLoading.default, {

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

@@ -0,0 +1,13 @@
+.adm-toast-mask .adm-toast-main {
+  font-size: 30px;
+}
+
+.adm-toast-loading.adm-toast-loading {
+  width: 96px;
+  height: 96px;
+  margin: 0 auto 16px;
+}
+
+.adm-toast-loading.adm-toast-loading .adm-spin-loading-fill {
+  stroke: #ffffff;
+}

package/2x/cjs/components/tree-select/tree-select.css

@@ -15,7 +15,7 @@
 
 .adm-tree-select-column:first-child,
 .adm-tree-select-multiple-column:first-child {
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
 }
 
 .adm-tree-select-column:nth-child(2),

package/2x/cjs/components/virtual-input/virtual-input.css

@@ -1,5 +1,5 @@
 .adm-virtual-input {
-  --font-size: 34px;
+  --font-size: var(--adm-font-size-9);
   --color: var(--adm-color-text);
   --placeholder-color: var(--adm-color-light);
   --disabled-color: var(--adm-color-weak);
@@ -109,5 +109,5 @@
 
 .adm-virtual-input-clear .antd-mobile-icon {
   display: block;
-  font-size: 28px;
+  font-size: var(--adm-font-size-6);
 }

package/2x/cjs/components/virtual-input/virtual-input.d.ts

@@ -21,4 +21,8 @@ export declare const VirtualInput: React.ForwardRefExoticComponent<{
     keyboard?: React.ReactElement<NumberKeyboardProps, string | React.JSXElementConstructor<any>> | undefined;
     clearable?: boolean | undefined;
     onClear?: (() => void) | undefined;
-} & Pick<InputProps, "value" | "onChange" | "disabled" | "placeholder"> & NativeProps<"--color" | "--font-size" | "--placeholder-color" | "--text-align" | "--disabled-color" | "--caret-width" | "--caret-color"> & React.RefAttributes<VirtualInputRef>>;
+} & Pick<InputProps, "value" | "onChange" | "disabled" | "placeholder"> & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--color" | "--font-size" | "--placeholder-color" | "--text-align" | "--disabled-color" | "--caret-width" | "--caret-color", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<VirtualInputRef>>;

package/2x/cjs/components/water-mark/water-mark.js

@@ -62,13 +62,14 @@ const WaterMark = p => {
         const img = new Image();
         img.crossOrigin = 'anonymous';
         img.referrerPolicy = 'no-referrer';
-        img.src = image;
 
         img.onload = () => {
           ctx.drawImage(img, -imageWidth * ratio / 2, -imageHeight * ratio / 2, imageWidth * ratio, imageHeight * ratio);
           ctx.restore();
           setBase64Url(canvas.toDataURL());
         };
+
+        img.src = image;
       } else if (content) {
         ctx.textBaseline = 'middle';
         ctx.textAlign = 'center'; // 文字绕中间旋转
@@ -83,7 +84,7 @@ const WaterMark = p => {
         setBase64Url(canvas.toDataURL());
       }
     } else {
-      throw new Error('当前环境不支持Canvas');
+      throw new Error('Canvas is not supported in the current environment');
     }
   }, [gapX, gapY, rotate, fontStyle, fontWeight, width, height, fontFamily, fontColor, image, content, fontSize]);
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {