antd-mobile 5.32.4 → 5.33.1

package/cjs/components/tabs/tabs.js

@@ -27,7 +27,8 @@ const Tab = () => {
 exports.Tab = Tab;
 const defaultProps = {
   activeLineMode: 'auto',
-  stretch: true
+  stretch: true,
+  direction: 'ltr'
 };
 const Tabs = p => {
   var _a;
@@ -37,6 +38,7 @@ const Tabs = p => {
   const keyToIndexRecord = {};
   let firstActiveKey = null;
   const panes = [];
+  const isRTL = props.direction === 'rtl';
   (0, _traverseReactNode.traverseReactNode)(props.children, (child, index) => {
     if (!(0, _react.isValidElement)(child)) return;
     const key = child.key;
@@ -121,6 +123,14 @@ const Tabs = p => {
     } else {
       x = activeTabLeft + (activeTabWidth - activeLineWidth) / 2;
     }
+    if (isRTL) {
+      /**
+       * In RTL mode, x equals the container width minus the x-coordinate of the current tab minus the width of the current tab.
+       * https://github.com/Fog3211/reproduce-codesandbox/blob/f0a3396a114cc00e88a51a67d3be60a746519b30/assets/images/antd_mobile_tabs_rtl_x.jpg?raw=true
+       */
+      const w = ['auto', 'full'].includes(props.activeLineMode) ? width : activeLineWidth;
+      x = -(containerWidth - x - w);
+    }
     api.start({
       x,
       width,
@@ -128,7 +138,16 @@ const Tabs = p => {
     });
     const maxScrollDistance = containerScrollWidth - containerWidth;
     if (maxScrollDistance <= 0) return;
-    const nextScrollLeft = (0, _bound.bound)(activeTabLeft - (containerWidth - activeTabWidth) / 2, 0, containerScrollWidth - containerWidth);
+    let nextScrollLeft = 0;
+    if (isRTL) {
+      /**
+       * 位移距离等于：activeTab的中心坐标距离容器中心坐标的距离，然后RTL取负数
+       * containerWidth / 2 - (activeTabLeft + (activeTabWidth - activeLineWidth) / 2) - activeLineWidth / 2,
+       */
+      nextScrollLeft = -(0, _bound.bound)(containerWidth / 2 - activeTabLeft + activeTabWidth / 2 - activeLineWidth, 0, maxScrollDistance);
+    } else {
+      nextScrollLeft = (0, _bound.bound)(activeTabLeft - (containerWidth - activeTabWidth) / 2, 0, maxScrollDistance);
+    }
     scrollApi.start({
       scrollLeft: nextScrollLeft,
       from: {
@@ -159,8 +178,20 @@ const Tabs = p => {
     const container = tabListContainerRef.current;
     if (!container) return;
     const scrollLeft = container.scrollLeft;
-    const showLeftMask = scrollLeft > 0;
-    const showRightMask = scrollLeft + container.offsetWidth < container.scrollWidth;
+    let showLeftMask = false;
+    let showRightMask = false;
+    if (isRTL) {
+      /**
+       * RTL模式下，只要滑动过，scrollLeft就再也回不到0（chrome是0.5）
+       * 所以要加round才能终止触发条件
+       * round(443.5) + 375 < 819
+       */
+      showLeftMask = Math.round(-scrollLeft) + container.offsetWidth < container.scrollWidth;
+      showRightMask = scrollLeft < 0;
+    } else {
+      showLeftMask = scrollLeft > 0;
+      showRightMask = scrollLeft + container.offsetWidth < container.scrollWidth;
+    }
     maskApi.start({
       leftMaskOpacity: showLeftMask ? 1 : 0,
       rightMaskOpacity: showRightMask ? 1 : 0,
@@ -175,7 +206,10 @@ const Tabs = p => {
     updateMask(true);
   }, []);
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
-    className: classPrefix
+    className: classPrefix,
+    style: {
+      direction: props.direction
+    }
   }, _react.default.createElement("div", {
     className: `${classPrefix}-header`
   }, _react.default.createElement(_web.animated.div, {

package/cjs/components/tag/tag.d.ts

@@ -1,10 +1,11 @@
-import React, { FC } from 'react';
+import React from 'react';
+import type { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type TagProps = {
     color?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | (string & {});
     fill?: 'solid' | 'outline';
     round?: boolean;
     onClick?: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
-    children?: React.ReactNode;
+    children?: ReactNode;
 } & NativeProps<'--border-color' | '--background-color' | '--text-color' | '--border-radius'>;
 export declare const Tag: FC<TagProps>;

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

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 import type { MaskProps } from '../mask';
 import { PropagationEvent } from '../../utils/with-stop-propagation';
 import { GetContainer } from '../../utils/render-to-container';
@@ -8,11 +8,11 @@ export interface ToastProps {
     maskClassName?: string;
     maskClickable?: boolean;
     content?: ReactNode;
-    icon?: 'success' | 'fail' | 'loading' | React.ReactNode;
+    icon?: 'success' | 'fail' | 'loading' | ReactNode;
     duration?: number;
     position?: 'top' | 'bottom' | 'center';
     visible?: boolean;
     getContainer?: GetContainer;
     stopPropagation?: PropagationEvent[];
 }
-export declare const InternalToast: React.FC<ToastProps>;
+export declare const InternalToast: FC<ToastProps>;

package/cjs/components/tree-select/multiple.d.ts

@@ -1,17 +1,14 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
 import { TreeSelectOption } from '.';
+import type { FieldNamesType } from '../../hooks';
 export declare type MultipleProps = {
     options: TreeSelectOption[];
     defaultValue?: string[];
     value?: string[];
     onChange?: (value: string[], nodes: TreeSelectOption[]) => void;
     selectAllText?: string[];
-    fieldNames?: {
-        label: string;
-        value: string;
-        children: string;
-    };
+    fieldNames?: FieldNamesType;
     expandKeys?: string[];
     defaultExpandKeys?: string[];
     onExpand?: (expandedKeys: string[], nodes: TreeSelectOption[]) => void;

package/cjs/components/tree-select/multiple.js

@@ -12,6 +12,7 @@ var _withDefaultProps = require("../../utils/with-default-props");
 var _checkbox = _interopRequireDefault(require("../checkbox"));
 var _usePropsValue = require("../../utils/use-props-value");
 var _devLog = require("../../utils/dev-log");
+var _hooks = require("../../hooks");
 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; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -27,9 +28,7 @@ const Multiple = p => {
   (0, _react.useEffect)(() => {
     (0, _devLog.devWarning)('TreeSelect', 'TreeSelect.Multiple has been deprecated.');
   }, []);
-  const labelName = props.fieldNames.label || 'label';
-  const valueName = props.fieldNames.value || 'value';
-  const childrenName = props.fieldNames.children || 'children';
+  const [labelName, valueName, childrenName] = (0, _hooks.useFieldNames)(props.fieldNames);
   // 打开的 keys
   const [expandKeys, setExpandKeys] = (0, _usePropsValue.usePropsValue)({
     value: props.expandKeys,

package/cjs/components/tree-select/tree-select.d.ts

@@ -1,8 +1,13 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
-export interface TreeSelectOption {
+import type { FieldNamesType } from '../../hooks';
+export declare type TreeSelectOption = {
+    label?: string;
+    value?: string;
+    children?: TreeSelectOption[];
+} & {
     [key: string]: any;
-}
+};
 export declare type TreeSelectProps = {
     options: TreeSelectOption[];
     defaultValue?: string[];
@@ -10,10 +15,6 @@ export declare type TreeSelectProps = {
     onChange?: (value: string[], extend: {
         options: TreeSelectOption[];
     }) => void;
-    fieldNames?: {
-        label: string;
-        value: string;
-        children: string;
-    };
+    fieldNames?: FieldNamesType;
 } & NativeProps;
 export declare const TreeSelect: FC<TreeSelectProps>;

package/cjs/components/tree-select/tree-select.js

@@ -10,6 +10,7 @@ var _nativeProps = require("../../utils/native-props");
 var _tree = require("../../utils/tree");
 var _withDefaultProps = require("../../utils/with-default-props");
 var _usePropsValue = require("../../utils/use-props-value");
+var _hooks = require("../../hooks");
 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; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -21,9 +22,7 @@ const defaultProps = {
 };
 const TreeSelect = p => {
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
-  const labelName = props.fieldNames.label || 'label';
-  const valueName = props.fieldNames.value || 'value';
-  const childrenName = props.fieldNames.children || 'children';
+  const [labelName, valueName, childrenName] = (0, _hooks.useFieldNames)(props.fieldNames);
   const [value, setValue] = (0, _usePropsValue.usePropsValue)({
     value: props.value,
     defaultValue: props.defaultValue

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

@@ -1,4 +1,5 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
+import type { ReactElement } from 'react';
 import type { InputProps } from '../input';
 import { NativeProps } from '../../utils/native-props';
 import { NumberKeyboardProps } from '../number-keyboard';

package/cjs/components/virtual-input/virtual-input.js

@@ -80,9 +80,16 @@ const VirtualInput = (0, _react.forwardRef)((p, ref) => {
     },
     visible: hasFocus,
     onClose: () => {
-      var _a, _b, _c;
-      (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-      (_c = (_b = keyboard.props).onClose) === null || _c === void 0 ? void 0 : _c.call(_b);
+      var _a, _b, _c, _d;
+      const activeElement = document.activeElement;
+      // Long press makes `activeElement` to be the child of rootRef
+      // We will trigger blur on the child element instead
+      if (activeElement && ((_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.contains(activeElement))) {
+        activeElement.blur();
+      } else {
+        (_b = rootRef.current) === null || _b === void 0 ? void 0 : _b.blur();
+      }
+      (_d = (_c = keyboard.props).onClose) === null || _d === void 0 ? void 0 : _d.call(_c);
     },
     getContainer: null
   });

package/cjs/components/water-mark/water-mark.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type WaterMarkProps = {
     gapX?: number;

package/cjs/hooks/index.d.ts

@@ -0,0 +1,5 @@
+export { useFieldNames } from './useFieldNames';
+export type { FieldNamesType } from './useFieldNames';
+export declare type BaseOptionType = {
+    [key: string]: any;
+};

package/cjs/hooks/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useFieldNames", {
+  enumerable: true,
+  get: function () {
+    return _useFieldNames.useFieldNames;
+  }
+});
+var _useFieldNames = require("./useFieldNames");

package/cjs/hooks/useFieldNames.d.ts

@@ -0,0 +1,7 @@
+export declare type FieldNamesType = {
+    label?: string;
+    value?: string;
+    disabled?: string;
+    children?: string;
+};
+export declare const useFieldNames: (fieldNames?: FieldNamesType) => string[];

package/cjs/hooks/useFieldNames.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFieldNames = void 0;
+var _react = require("react");
+const useFieldNames = (fieldNames = {}) => {
+  const fields = (0, _react.useMemo)(() => {
+    const {
+      label = 'label',
+      value = 'value',
+      disabled = 'disabled',
+      children = 'children'
+    } = fieldNames;
+    return [label, value, children, disabled];
+  }, [JSON.stringify(fieldNames)]);
+  return fields;
+};
+exports.useFieldNames = useFieldNames;

package/cjs/index.d.ts

@@ -12,6 +12,10 @@ export { default as Button } from './components/button';
 export type { ButtonProps, ButtonRef } from './components/button';
 export { default as Calendar } from './components/calendar';
 export type { CalendarProps, CalendarRef } from './components/calendar';
+export { default as CalendarPicker } from './components/calendar-picker';
+export type { CalendarPickerProps, CalendarPickerRef, } from './components/calendar-picker';
+export { default as CalendarPickerView } from './components/calendar-picker-view';
+export type { CalendarPickerViewProps, CalendarPickerViewRef, } from './components/calendar-picker-view';
 export { default as CapsuleTabs } from './components/capsule-tabs';
 export type { CapsuleTabsProps, CapsuleTabProps, } from './components/capsule-tabs';
 export { default as Card } from './components/card';
@@ -63,7 +67,7 @@ export type { GridProps, GridItemProps } from './components/grid';
 export { default as Image } from './components/image';
 export type { ImageProps } from './components/image';
 export { default as ImageUploader } from './components/image-uploader';
-export type { ImageUploaderProps, ImageUploadItem, } from './components/image-uploader';
+export type { ImageUploaderProps, ImageUploadItem, ImageUploaderRef, } from './components/image-uploader';
 export { default as ImageViewer } from './components/image-viewer';
 export type { ImageViewerProps, MultiImageViewerProps, MultiImageViewerRef, } from './components/image-viewer';
 export { default as IndexBar } from './components/index-bar';

package/cjs/index.js

@@ -39,6 +39,18 @@ Object.defineProperty(exports, "Calendar", {
     return _calendar.default;
   }
 });
+Object.defineProperty(exports, "CalendarPicker", {
+  enumerable: true,
+  get: function () {
+    return _calendarPicker.default;
+  }
+});
+Object.defineProperty(exports, "CalendarPickerView", {
+  enumerable: true,
+  get: function () {
+    return _calendarPickerView.default;
+  }
+});
 Object.defineProperty(exports, "CapsuleTabs", {
   enumerable: true,
   get: function () {
@@ -515,6 +527,8 @@ var _avatar = _interopRequireDefault(require("./components/avatar"));
 var _badge = _interopRequireDefault(require("./components/badge"));
 var _button = _interopRequireDefault(require("./components/button"));
 var _calendar = _interopRequireDefault(require("./components/calendar"));
+var _calendarPicker = _interopRequireDefault(require("./components/calendar-picker"));
+var _calendarPickerView = _interopRequireDefault(require("./components/calendar-picker-view"));
 var _capsuleTabs = _interopRequireDefault(require("./components/capsule-tabs"));
 var _card = _interopRequireDefault(require("./components/card"));
 var _cascadePicker = _interopRequireDefault(require("./components/cascade-picker"));

package/cjs/locales/base.d.ts

@@ -7,6 +7,11 @@ export declare const base: {
         close: string;
     };
     Calendar: {
+        title: string;
+        confirm: string;
+        start: string;
+        end: string;
+        today: string;
         markItems: string[];
         yearAndMonth: string;
     };

package/cjs/locales/base.js

@@ -14,6 +14,11 @@ const base = {
     close: 'Close'
   },
   Calendar: {
+    title: 'Date selection',
+    confirm: 'Confirm',
+    start: 'start',
+    end: 'end',
+    today: 'today',
     markItems: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
     yearAndMonth: '${year}/${month}'
   },

package/cjs/locales/da-DK.d.ts

@@ -7,6 +7,11 @@ declare const daDK: {
         close: string;
     };
     Calendar: {
+        title: string;
+        confirm: string;
+        start: string;
+        end: string;
+        today: string;
         markItems: string[];
         yearAndMonth: string;
     };

package/cjs/locales/en-US.d.ts

@@ -7,6 +7,11 @@ declare const enUS: {
         close: string;
     };
     Calendar: {
+        title: string;
+        confirm: string;
+        start: string;
+        end: string;
+        today: string;
         markItems: string[];
         yearAndMonth: string;
     };

package/cjs/locales/es-ES.d.ts

@@ -7,6 +7,11 @@ declare const esES: {
         close: string;
     };
     Calendar: {
+        title: string;
+        confirm: string;
+        start: string;
+        end: string;
+        today: string;
         markItems: string[];
         yearAndMonth: string;
     };

package/cjs/locales/fa-IR.d.ts

@@ -7,6 +7,11 @@ declare const faIR: {
         close: string;
     };
     Calendar: {
+        title: string;
+        confirm: string;
+        start: string;
+        end: string;
+        today: string;
         markItems: string[];
         yearAndMonth: string;
     };

package/cjs/locales/fr-FR.d.ts

@@ -7,6 +7,11 @@ declare const frFR: {
         close: string;
     };
     Calendar: {
+        title: string;
+        confirm: string;
+        start: string;
+        end: string;
+        today: string;
         markItems: string[];
         yearAndMonth: string;
     };

package/cjs/locales/id-ID.d.ts

@@ -7,6 +7,11 @@ declare const idID: {
         close: string;
     };
     Calendar: {
+        title: string;
+        confirm: string;
+        start: string;
+        end: string;
+        today: string;
         markItems: string[];
         yearAndMonth: string;
     };

package/cjs/locales/it-IT.d.ts

@@ -7,6 +7,11 @@ declare const itIT: {
         close: string;
     };
     Calendar: {
+        title: string;
+        confirm: string;
+        start: string;
+        end: string;
+        today: string;
         markItems: string[];
         yearAndMonth: string;
     };

package/cjs/locales/ja-JP.d.ts

@@ -7,6 +7,11 @@ declare const jaJP: {
         close: string;
     };
     Calendar: {
+        title: string;
+        confirm: string;
+        start: string;
+        end: string;
+        today: string;
         markItems: string[];
         yearAndMonth: string;
     };

package/cjs/locales/kk-KZ.d.ts

@@ -7,6 +7,11 @@ declare const kkKZ: {
         close: string;
     };
     Calendar: {
+        title: string;
+        confirm: string;
+        start: string;
+        end: string;
+        today: string;
         markItems: string[];
         yearAndMonth: string;
     };

package/cjs/locales/ko-KR.d.ts

@@ -7,6 +7,11 @@ declare const koKR: {
         close: string;
     };
     Calendar: {
+        title: string;
+        confirm: string;
+        start: string;
+        end: string;
+        today: string;
         markItems: string[];
         yearAndMonth: string;
     };

package/cjs/locales/nb-NO.d.ts

@@ -7,6 +7,11 @@ declare const nbNO: {
         close: string;
     };
     Calendar: {
+        title: string;
+        confirm: string;
+        start: string;
+        end: string;
+        today: string;
         markItems: string[];
         yearAndMonth: string;
     };

package/cjs/locales/nl-NL.d.ts

@@ -7,6 +7,11 @@ declare const nlNL: {
         close: string;
     };
     Calendar: {
+        title: string;
+        confirm: string;
+        start: string;
+        end: string;
+        today: string;
         markItems: string[];
         yearAndMonth: string;
     };

package/cjs/locales/ru-RU.d.ts

@@ -7,6 +7,11 @@ declare const ruRU: {
         close: string;
     };
     Calendar: {
+        title: string;
+        confirm: string;
+        start: string;
+        end: string;
+        today: string;
         markItems: string[];
         yearAndMonth: string;
     };