antd-mobile 5.9.5 → 5.10.2

package/cjs/locales/ko-KR.js

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _mergeLocale = require("../utils/merge-locale");
+
+var _base = require("./base");
+
+const typeTemplate = '${label} 유효하지 않은 ${type} 입니다';
+const koKR = (0, _mergeLocale.mergeLocale)(_base.base, {
+  locale: 'ko-KR',
+  common: {
+    confirm: '확인',
+    cancel: '취소',
+    loading: '로딩중...'
+  },
+  Calendar: {
+    markItems: ['월', '화', '수', '목', '금', '토', '일'],
+    renderYearAndMonth: (year, month) => `${year}년${month}일`
+  },
+  Cascader: {
+    placeholder: '선택됨'
+  },
+  Dialog: {
+    ok: '확인'
+  },
+  ErrorBlock: {
+    default: {
+      title: '문제가 발생했습니다',
+      description: '잠시 후 다시 시도해주세요'
+    },
+    busy: {
+      title: '로딩 되지 않았습니다.',
+      description: '페이지를 새로고침 해주세요'
+    },
+    disconnected: {
+      title: '네트워크를 사용 중 입니다',
+      description: '페이지를 새로고침 해주세요'
+    },
+    empty: {
+      title: '정보를 찾을 수 없습니다',
+      description: '정확한 검색어인가요?'
+    }
+  },
+  Form: {
+    required: '필수',
+    optional: '선택',
+    defaultValidateMessages: {
+      default: '필드 유효성 검사 오류 ${label}',
+      required: '${label} 입력해 주세요',
+      enum: '${label} [${enum}] 중에 하나여야 합니다',
+      whitespace: '${label} 비워둘 수 없습니다',
+      date: {
+        format: '${label} 유효하지 않은 날짜 형식입니다',
+        parse: '${label} 날짜 형식으로 변환될 수 없습니다',
+        invalid: '${label} 유효하지 않은 날짜입니다'
+      },
+      types: {
+        string: typeTemplate,
+        method: typeTemplate,
+        array: typeTemplate,
+        object: typeTemplate,
+        number: typeTemplate,
+        date: typeTemplate,
+        boolean: typeTemplate,
+        integer: typeTemplate,
+        float: typeTemplate,
+        regexp: typeTemplate,
+        email: typeTemplate,
+        url: typeTemplate,
+        hex: typeTemplate
+      },
+      string: {
+        len: '${label} ${len}글자여야 합니다',
+        min: '${label} 적어도 ${min}글자 이상이어야 합니다',
+        max: '${label} ${max}글자 이하여야 합니다',
+        range: '${label} ${min}-${max}글자 사이어야 합니다'
+      },
+      number: {
+        len: '${label} 값은 ${len}이어야 합니다',
+        min: '${label} 최솟값은 ${min}입니다',
+        max: '${label} 최댓값은 ${max}입니다',
+        range: '${label} 값은 ${min}-${max} 사이어야 합니다'
+      },
+      array: {
+        len: '${len}이어야 합니다 ${label}',
+        min: '최소 ${min}이어야 합니다 ${label}',
+        max: '최대 ${max}이어야 합니다 ${label}',
+        range: '${label} ${min}-${max} 사이어야 합니다'
+      },
+      pattern: {
+        mismatch: '${label} ${pattern} 패턴과 일치하지 않습니다'
+      }
+    }
+  },
+  ImageUploader: {
+    uploading: '업로드 중...'
+  },
+  Mask: {
+    name: '마스크'
+  },
+  Modal: {
+    ok: '확인'
+  },
+  PullToRefresh: {
+    pulling: '스크롤을 당겨서 새로고침하십시오',
+    canRelease: '새로고침 하려면 놓으십시오',
+    complete: '새로고침 완료'
+  }
+});
+var _default = koKR;
+exports.default = _default;

package/cjs/locales/zh-HK.js

@@ -9,6 +9,7 @@ var _mergeLocale = require("../utils/merge-locale");
 
 var _base = require("./base");
 
+const typeTemplate = '${label}不是一個有效的${type}';
 const zhHK = (0, _mergeLocale.mergeLocale)(_base.base, {
   locale: 'zh-HK',
   common: {
@@ -16,6 +17,10 @@ const zhHK = (0, _mergeLocale.mergeLocale)(_base.base, {
     cancel: '取消',
     loading: '加載中……'
   },
+  Calendar: {
+    markItems: ['一', '二', '三', '四', '五', '六', '日'],
+    renderYearAndMonth: (year, month) => `${year}年${month}月`
+  },
   Cascader: {
     placeholder: '請選擇'
   },
@@ -40,6 +45,57 @@ const zhHK = (0, _mergeLocale.mergeLocale)(_base.base, {
       description: '找找其他的吧'
     }
   },
+  Form: {
+    required: '必填',
+    optional: '選填',
+    defaultValidateMessages: {
+      default: '字段驗證錯誤${label}',
+      required: '請輸入${label}',
+      enum: '${label}必須是其中一個[${enum}]',
+      whitespace: '${label}不能為空字符',
+      date: {
+        format: '${label}日期格式無效',
+        parse: '${label}不能轉換為日期',
+        invalid: '${label}是一個無效日期'
+      },
+      types: {
+        string: typeTemplate,
+        method: typeTemplate,
+        array: typeTemplate,
+        object: typeTemplate,
+        number: typeTemplate,
+        date: typeTemplate,
+        boolean: typeTemplate,
+        integer: typeTemplate,
+        float: typeTemplate,
+        regexp: typeTemplate,
+        email: typeTemplate,
+        url: typeTemplate,
+        hex: typeTemplate
+      },
+      string: {
+        len: '${label}須為${len}個字符',
+        min: '${label}最少${min}個字符',
+        max: '${label}最多${max}個字符',
+        range: '${label}須在${min}-${max}字符之間'
+      },
+      number: {
+        len: '${label}必須等於${len}',
+        min: '${label}最小值為${min}',
+        max: '${label}最大值為${max}',
+        range: '${label}須在${min}-${max}之間'
+      },
+      array: {
+        len: '須為${len}個${label}',
+        min: '最少${min}個${label}',
+        max: '最多${max}個${label}',
+        range: '${label}数量須在${min}-${max}之間'
+      },
+      pattern: {
+        mismatch: '${label}與模式不匹配${pattern}'
+      }
+    }
+  },
   ImageUploader: {
     uploading: '上傳中...'
   },

package/cjs/locales/zh-TW.js

@@ -9,6 +9,7 @@ var _mergeLocale = require("../utils/merge-locale");
 
 var _base = require("./base");
 
+const typeTemplate = '${label}不是一個有效的${type}';
 const zhTW = (0, _mergeLocale.mergeLocale)(_base.base, {
   locale: 'zh-TW',
   common: {
@@ -16,6 +17,10 @@ const zhTW = (0, _mergeLocale.mergeLocale)(_base.base, {
     cancel: '取消',
     loading: '加載中……'
   },
+  Calendar: {
+    markItems: ['一', '二', '三', '四', '五', '六', '日'],
+    renderYearAndMonth: (year, month) => `${year}年${month}月`
+  },
   Cascader: {
     placeholder: '請選擇'
   },
@@ -40,6 +45,57 @@ const zhTW = (0, _mergeLocale.mergeLocale)(_base.base, {
       description: '找找其他的吧'
     }
   },
+  Form: {
+    required: '必填',
+    optional: '選填',
+    defaultValidateMessages: {
+      default: '字段驗證錯誤${label}',
+      required: '請輸入${label}',
+      enum: '${label}必須是其中一個[${enum}]',
+      whitespace: '${label}不能為空字符',
+      date: {
+        format: '${label}日期格式無效',
+        parse: '${label}不能轉換為日期',
+        invalid: '${label}是一個無效日期'
+      },
+      types: {
+        string: typeTemplate,
+        method: typeTemplate,
+        array: typeTemplate,
+        object: typeTemplate,
+        number: typeTemplate,
+        date: typeTemplate,
+        boolean: typeTemplate,
+        integer: typeTemplate,
+        float: typeTemplate,
+        regexp: typeTemplate,
+        email: typeTemplate,
+        url: typeTemplate,
+        hex: typeTemplate
+      },
+      string: {
+        len: '${label}須為${len}個字符',
+        min: '${label}最少${min}個字符',
+        max: '${label}最多${max}個字符',
+        range: '${label}須在${min}-${max}字符之間'
+      },
+      number: {
+        len: '${label}必須等於${len}',
+        min: '${label}最小值為${min}',
+        max: '${label}最大值為${max}',
+        range: '${label}須在${min}-${max}之間'
+      },
+      array: {
+        len: '須為${len}個${label}',
+        min: '最少${min}個${label}',
+        max: '最多${max}個${label}',
+        range: '${label}数量須在${min}-${max}之間'
+      },
+      pattern: {
+        mismatch: '${label}與模式不匹配${pattern}'
+      }
+    }
+  },
   ImageUploader: {
     uploading: '上傳中...'
   },

package/cjs/utils/traverse-react-node.d.ts

@@ -0,0 +1,2 @@
+import { ReactNode } from 'react';
+export declare function traverseReactNode(children: ReactNode, fn: (child: ReactNode, index: number) => void): void;

package/cjs/utils/traverse-react-node.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.traverseReactNode = traverseReactNode;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactIs = require("react-is");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function traverseReactNode(children, fn) {
+  let i = 0;
+
+  function handle(target) {
+    _react.default.Children.forEach(target, child => {
+      if (!(0, _reactIs.isFragment)(child)) {
+        fn(child, i);
+        i += 1;
+      } else {
+        handle(child.props.children);
+      }
+    });
+  }
+
+  handle(children);
+}

package/es/components/capsule-tabs/capsule-tabs.js

@@ -7,6 +7,7 @@ import { useResizeEffect } from '../../utils/use-resize-effect';
 import { useTabListScroll } from '../../utils/use-tab-list-scroll';
 import ScrollMask from '../scroll-mask';
 import { ShouldRender } from '../../utils/should-render';
+import { traverseReactNode } from '../../utils/traverse-react-node';
 const classPrefix = `adm-capsule-tabs`;
 export const CapsuleTab = () => {
   return null;
@@ -19,7 +20,7 @@ export const CapsuleTabs = props => {
   const keyToIndexRecord = {};
   let firstActiveKey = null;
   const panes = [];
-  React.Children.forEach(props.children, (child, index) => {
+  traverseReactNode(props.children, (child, index) => {
     if (!React.isValidElement(child)) return;
     const key = child.key;
     if (typeof key !== 'string') return;

package/es/components/collapse/collapse.js

@@ -8,6 +8,7 @@ import { usePropsValue } from '../../utils/use-props-value';
 import { useMount } from 'ahooks';
 import { useShouldRender } from '../../utils/should-render';
 import { useIsomorphicUpdateLayoutEffect } from '../../utils/use-isomorphic-update-layout-effect';
+import { traverseReactNode } from '../../utils/traverse-react-node';
 const classPrefix = `adm-collapse`;
 export const CollapsePanel = () => {
   return null;
@@ -81,7 +82,7 @@ export const Collapse = props => {
   var _a;
 
   const panels = [];
-  React.Children.forEach(props.children, child => {
+  traverseReactNode(props.children, child => {
     if (!React.isValidElement(child)) return;
     const key = child.key;
     if (typeof key !== 'string') return;

package/es/components/divider/divider.css

@@ -1,21 +1,21 @@
-.adm-divider {
+.adm-divider-horizontal {
   display: flex;
   align-items: center;
   margin: 16px 0;
-  color: var(--adm-color-weak);
-  font-size: 14px;
   border-width: 0;
   border-color: var(--adm-border-color);
   border-style: solid;
+  color: var(--adm-color-weak);
+  font-size: 14px;
 }
-.adm-divider-left.adm-divider::before {
+.adm-divider-left.adm-divider-horizontal::before {
   max-width: 10%;
 }
-.adm-divider-right.adm-divider::after {
+.adm-divider-right.adm-divider-horizontal::after {
   max-width: 10%;
 }
-.adm-divider::after,
-.adm-divider::before {
+.adm-divider-horizontal::after,
+.adm-divider-horizontal::before {
   flex: auto;
   display: block;
   content: '';
@@ -23,7 +23,17 @@
   border-color: inherit;
   border-width: 1px 0 0;
 }
-.adm-divider-content {
+.adm-divider-horizontal .adm-divider-content {
   flex: none;
   padding: 0 16px;
 }
+.adm-divider-vertical {
+  position: relative;
+  top: -0.06em;
+  display: inline-block;
+  height: 0.9em;
+  margin: 0 16px;
+  vertical-align: middle;
+  border-top: 0;
+  border-left: 1px solid var(--adm-border-color);
+}

package/es/components/divider/divider.d.ts

@@ -2,5 +2,6 @@ import { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type DividerProps = {
     contentPosition?: 'left' | 'right' | 'center';
+    direction?: 'horizontal' | 'vertical';
 } & NativeProps;
 export declare const Divider: FC<DividerProps>;

package/es/components/divider/divider.js

@@ -4,12 +4,13 @@ import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
 const classPrefix = `adm-divider`;
 const defaultProps = {
-  contentPosition: 'center'
+  contentPosition: 'center',
+  direction: 'horizontal'
 };
 export const Divider = p => {
   const props = mergeProps(defaultProps, p);
   return withNativeProps(props, React.createElement("div", {
-    className: classNames(classPrefix, `${classPrefix}-${props.contentPosition}`)
+    className: classNames(classPrefix, `${classPrefix}-${props.direction}`, `${classPrefix}-${props.contentPosition}`)
   }, props.children && React.createElement("div", {
     className: `${classPrefix}-content`
   }, props.children)));

package/es/components/form/form.js

@@ -9,6 +9,7 @@ import { Header } from './header';
 import { useConfig } from '../config-provider';
 import merge from 'lodash/merge';
 import { FormArray } from './form-array';
+import { traverseReactNode } from '../../utils/traverse-react-node';
 const classPrefix = 'adm-form';
 const defaultProps = defaultFormContext;
 export const Form = forwardRef((p, ref) => {
@@ -46,7 +47,7 @@ export const Form = forwardRef((p, ref) => {
     items = [];
   }
 
-  React.Children.forEach(props.children, child => {
+  traverseReactNode(props.children, child => {
     if (React.isValidElement(child)) {
       if (child.type === Header) {
         collect();

package/es/components/image-uploader/image-uploader.d.ts

@@ -1,5 +1,6 @@
 import { FC, InputHTMLAttributes } from 'react';
 import { NativeProps } from '../../utils/native-props';
+import type { ImageProps } from '../image';
 export declare type TaskStatus = 'pending' | 'fail';
 export interface ImageUploadItem {
     key?: string | number;
@@ -25,5 +26,6 @@ export declare type ImageUploaderProps = {
     onDelete?: (item: ImageUploadItem) => boolean | Promise<boolean> | void;
     preview?: boolean;
     showFailed?: boolean;
+    imageFit?: ImageProps['fit'];
 } & NativeProps<'--cell-size'>;
 export declare const ImageUploader: FC<ImageUploaderProps>;

package/es/components/image-uploader/image-uploader.js

@@ -18,7 +18,8 @@ const defaultProps = {
   defaultValue: [],
   accept: 'image/*',
   preview: true,
-  showFailed: true
+  showFailed: true,
+  imageFit: 'cover'
 };
 export const ImageUploader = p => {
   const props = mergeProps(defaultProps, p);
@@ -89,6 +90,8 @@ export const ImageUploader = p => {
         file
       }));
       setTasks(prev => [...prev, ...newTasks]);
+      e.target.value = ''; // HACK: fix the same file doesn't trigger onChange
+
       yield Promise.all(newTasks.map(currentTask => __awaiter(this, void 0, void 0, function* () {
         try {
           const result = yield props.upload(currentTask.file);
@@ -122,7 +125,6 @@ export const ImageUploader = p => {
           throw e;
         }
       }))).catch(error => console.error(error));
-      e.target.value = ''; // HACK: fix the same file doesn't trigger onChange
     });
   }
 
@@ -157,6 +159,7 @@ export const ImageUploader = p => {
       key: (_a = fileItem.key) !== null && _a !== void 0 ? _a : index,
       url: (_b = fileItem.thumbnailUrl) !== null && _b !== void 0 ? _b : fileItem.url,
       deletable: props.deletable,
+      imageFit: props.imageFit,
       onClick: () => {
         if (props.preview) {
           previewImage(index);
@@ -182,6 +185,7 @@ export const ImageUploader = p => {
       file: task.file,
       deletable: task.status !== 'pending',
       status: task.status,
+      imageFit: props.imageFit,
       onDelete: () => {
         setTasks(tasks.filter(x => x.id !== task.id));
       }

package/es/components/image-uploader/preview-item.d.ts

@@ -1,5 +1,6 @@
 import { FC } from 'react';
 import { TaskStatus } from './image-uploader';
+import type { ImageProps } from '../image';
 declare type Props = {
     onClick?: () => void;
     onDelete?: () => void;
@@ -7,6 +8,7 @@ declare type Props = {
     url?: string;
     file?: File;
     status?: TaskStatus;
+    imageFit: ImageProps['fit'];
 };
 declare const PreviewItem: FC<Props>;
 export default PreviewItem;

package/es/components/image-uploader/preview-item.js

@@ -14,7 +14,8 @@ const PreviewItem = props => {
     url,
     file,
     deletable,
-    onDelete
+    onDelete,
+    imageFit
   } = props;
   const src = useMemo(() => {
     if (url) {
@@ -54,7 +55,7 @@ const PreviewItem = props => {
   }, React.createElement(Image, {
     className: `${classPrefix}-cell-image`,
     src: src,
-    fit: 'cover',
+    fit: imageFit,
     onClick: props.onClick
   }), renderLoading(), renderDelete());
 };

package/es/components/index-bar/index-bar.js

@@ -7,6 +7,7 @@ import { Sidebar } from './sidebar';
 import { convertPx } from '../../utils/convert-px';
 import { Panel } from './panel';
 import { devWarning } from '../../utils/dev-log';
+import { traverseReactNode } from '../../utils/traverse-react-node';
 const classPrefix = `adm-index-bar`;
 const defaultProps = {
   sticky: true
@@ -17,7 +18,7 @@ export const IndexBar = forwardRef((p, ref) => {
   const bodyRef = useRef(null);
   const indexItems = [];
   const panels = [];
-  React.Children.forEach(props.children, child => {
+  traverseReactNode(props.children, child => {
     var _a;
 
     if (!React.isValidElement(child)) return;

package/es/components/jumbo-tabs/jumbo-tabs.js

@@ -7,6 +7,7 @@ import { useResizeEffect } from '../../utils/use-resize-effect';
 import { useTabListScroll } from '../../utils/use-tab-list-scroll';
 import ScrollMask from '../scroll-mask';
 import { ShouldRender } from '../../utils/should-render';
+import { traverseReactNode } from '../../utils/traverse-react-node';
 const classPrefix = `adm-jumbo-tabs`;
 export const JumboTab = () => {
   return null;
@@ -19,7 +20,7 @@ export const JumboTabs = props => {
   const keyToIndexRecord = {};
   let firstActiveKey = null;
   const panes = [];
-  React.Children.forEach(props.children, (child, index) => {
+  traverseReactNode(props.children, (child, index) => {
     if (!React.isValidElement(child)) return;
     const key = child.key;
     if (typeof key !== 'string') return;

package/es/components/mask/mask.css

@@ -15,6 +15,7 @@
   z-index: 0;
   width: 100%;
   height: 100%;
+  pointer-events: none;
 }
 .adm-mask-content {
   z-index: 1;

package/es/components/mask/mask.js

@@ -76,7 +76,14 @@ export const Mask = p => {
       opacity
     }, props.style), {
       display: active ? 'unset' : 'none'
-    })
+    }),
+    onClick: e => {
+      var _a;
+
+      if (e.target === e.currentTarget) {
+        (_a = props.onMaskClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+      }
+    }
   }, props.onMaskClick && React.createElement("div", {
     className: `${classPrefix}-aria-button`,
     role: 'button',

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

@@ -9,6 +9,7 @@ export declare type PickerValueExtend = {
 export declare type PickerColumnItem = {
     label: ReactNode;
     value: string;
+    key?: string | number;
 };
 export declare type PickerColumn = (string | PickerColumnItem)[];
 export declare type PickerViewProps = {

package/es/components/picker-view/wheel.js

@@ -140,6 +140,8 @@ export const Wheel = memo(props => {
     className: `${classPrefix}-column-wheel`,
     "aria-hidden": true
   }, column.map((item, index) => {
+    var _a;
+
     const selected = props.value === item.value;
     if (selected) selectedIndex = index;
 
@@ -149,7 +151,7 @@ export const Wheel = memo(props => {
     }
 
     return React.createElement("div", {
-      key: item.value,
+      key: (_a = item.key) !== null && _a !== void 0 ? _a : item.value,
       "data-selected": item.value === value,
       className: `${classPrefix}-column-item`,
       onClick: handleClick,

package/es/components/popover/popover-menu.js

@@ -3,7 +3,8 @@ import classNames from 'classnames';
 import { Popover } from './popover';
 const classPrefix = `adm-popover-menu`;
 export const PopoverMenu = forwardRef((props, ref) => {
-  const innerRef = useRef(null);
+  const innerRef = useRef(null); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
   useImperativeHandle(ref, () => innerRef.current, []);
   const onClick = useCallback(e => {
     var _a;

package/es/components/safe-area/safe-area.css

@@ -3,8 +3,8 @@
   width: 100%;
 }
 .adm-safe-area-position-top {
-  padding-top: env(safe-area-inset-top);
+  padding-top: calc(env(safe-area-inset-top) * var(--adm-hd));
 }
 .adm-safe-area-position-bottom {
-  padding-bottom: env(safe-area-inset-bottom);
+  padding-bottom: calc(env(safe-area-inset-bottom) * var(--adm-hd));
 }

package/es/components/side-bar/side-bar.js

@@ -4,6 +4,7 @@ import Badge from '../badge';
 import { withNativeProps } from '../../utils/native-props';
 import { usePropsValue } from '../../utils/use-props-value';
 import { Corner } from './corner';
+import { traverseReactNode } from '../../utils/traverse-react-node';
 const classPrefix = `adm-side-bar`;
 export const SideBarItem = () => {
   return null;
@@ -13,7 +14,7 @@ export const SideBar = props => {
 
   let firstActiveKey = null;
   const items = [];
-  React.Children.forEach(props.children, (child, index) => {
+  traverseReactNode(props.children, (child, index) => {
     if (!React.isValidElement(child)) return;
     const key = child.key;
     if (typeof key !== 'string') return;