antd-mobile 5.0.0-rc.9 → 5.2.0

package/es/components/number-keyboard/number-keyboard.js

@@ -7,8 +7,8 @@ import Popup from '../popup';
 import { withNativeProps } from '../../utils/native-props';
 import SafeArea from '../safe-area';
 import { useMemoizedFn } from 'ahooks';
-var classPrefix = 'adm-number-keyboard';
-var defaultProps = {
+const classPrefix = 'adm-number-keyboard';
+const defaultProps = {
   defaultVisible: false,
   randomOrder: false,
   showCloseButton: true,
@@ -16,20 +16,22 @@ var defaultProps = {
   closeOnConfirm: true,
   safeArea: true
 };
-export var NumberKeyboard = function NumberKeyboard(p) {
-  var props = mergeProps(defaultProps, p);
-  var visible = props.visible,
-      title = props.title,
-      getContainer = props.getContainer,
-      confirmText = props.confirmText,
-      customKey = props.customKey,
-      randomOrder = props.randomOrder,
-      showCloseButton = props.showCloseButton,
-      onInput = props.onInput;
-  var keyboardRef = useRef(null);
-  var keys = useMemo(function () {
-    var defaultKeys = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
-    var keyList = randomOrder ? shuffle(defaultKeys) : defaultKeys;
+export const NumberKeyboard = p => {
+  const props = mergeProps(defaultProps, p);
+  const {
+    visible,
+    title,
+    getContainer,
+    confirmText,
+    customKey,
+    randomOrder,
+    showCloseButton,
+    onInput
+  } = props;
+  const keyboardRef = useRef(null);
+  const keys = useMemo(() => {
+    const defaultKeys = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
+    const keyList = randomOrder ? shuffle(defaultKeys) : defaultKeys;
     keyList.push('0');
 
     if (confirmText) {
@@ -41,28 +43,28 @@ export var NumberKeyboard = function NumberKeyboard(p) {
 
     return keyList;
   }, [customKey, confirmText, randomOrder, randomOrder && visible]);
-  var timeoutRef = useRef(-1);
-  var intervalRef = useRef(-1);
-  var onDelete = useMemoizedFn(function () {
+  const timeoutRef = useRef(-1);
+  const intervalRef = useRef(-1);
+  const onDelete = useMemoizedFn(() => {
     var _a;
 
     (_a = props.onDelete) === null || _a === void 0 ? void 0 : _a.call(props);
   });
 
-  var onBackspacePressStart = function onBackspacePressStart() {
-    timeoutRef.current = window.setTimeout(function () {
+  const onBackspacePressStart = () => {
+    timeoutRef.current = window.setTimeout(() => {
       onDelete();
       intervalRef.current = window.setInterval(onDelete, 150);
     }, 700);
   };
 
-  var onBackspacePressEnd = function onBackspacePressEnd() {
+  const onBackspacePressEnd = () => {
     clearTimeout(timeoutRef.current);
     clearInterval(intervalRef.current);
   }; // 点击键盘按键
 
 
-  var onKeyPress = function onKeyPress(e, key) {
+  const onKeyPress = (e, key) => {
     var _a, _b;
 
     e.preventDefault();
@@ -89,105 +91,99 @@ export var NumberKeyboard = function NumberKeyboard(p) {
   }; // 渲染 title 和 close button
 
 
-  var renderHeader = function renderHeader() {
+  const renderHeader = () => {
     if (!showCloseButton && !title) return null;
-    return /*#__PURE__*/React.createElement("div", {
-      className: classNames(classPrefix + "-header", {
+    return React.createElement("div", {
+      className: classNames(`${classPrefix}-header`, {
         'with-title': !!title
       })
-    }, title && /*#__PURE__*/React.createElement("div", {
-      className: classPrefix + "-title"
-    }, title), showCloseButton && /*#__PURE__*/React.createElement("span", {
-      className: classPrefix + "-header-close-button",
-      onClick: function onClick() {
+    }, title && React.createElement("div", {
+      className: `${classPrefix}-title`
+    }, title), showCloseButton && React.createElement("span", {
+      className: `${classPrefix}-header-close-button`,
+      onClick: () => {
         var _a;
 
         (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
       },
       role: 'button',
       title: 'CLOSE'
-    }, /*#__PURE__*/React.createElement(DownOutline, null)));
+    }, React.createElement(DownOutline, null)));
   }; // 渲染基础键盘按键
 
 
-  var renderKey = function renderKey(key, index) {
-    var isNumberKey = /^\d$/.test(key);
-    var className = classNames(classPrefix + "-key", {
+  const renderKey = (key, index) => {
+    const isNumberKey = /^\d$/.test(key);
+    const className = classNames(`${classPrefix}-key`, {
       'number-key': isNumberKey,
       'sign-key': !isNumberKey && key,
       'mid-key': index === 9 && !!confirmText
     });
-    return /*#__PURE__*/React.createElement("div", {
+    return React.createElement("div", {
       key: key,
       className: className,
-      onTouchStart: function onTouchStart() {
+      onTouchStart: () => {
         if (key === 'BACKSPACE') {
           onBackspacePressStart();
         }
       },
-      onTouchEnd: function onTouchEnd(e) {
+      onTouchEnd: e => {
         onKeyPress(e, key);
 
         if (key === 'BACKSPACE') {
           onBackspacePressEnd();
         }
       },
-      onMouseUp: function onMouseUp(e) {
+      onMouseUp: e => {
         onKeyPress(e, key);
       },
       title: key,
       role: 'button'
-    }, key === 'BACKSPACE' ? /*#__PURE__*/React.createElement(TextDeletionOutline, null) : key);
+    }, key === 'BACKSPACE' ? React.createElement(TextDeletionOutline, null) : key);
   };
 
-  return /*#__PURE__*/React.createElement(Popup, {
+  return React.createElement(Popup, {
     visible: visible,
     getContainer: getContainer,
     mask: false,
     afterClose: props.afterClose,
     afterShow: props.afterShow,
-    className: classPrefix + "-popup",
+    className: `${classPrefix}-popup`,
     stopPropagation: props.stopPropagation
-  }, withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+  }, withNativeProps(props, React.createElement("div", {
     ref: keyboardRef,
     className: classPrefix,
-    onMouseDown: function onMouseDown(e) {
+    onMouseDown: e => {
       e.preventDefault();
     }
-  }, renderHeader(), /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-wrapper"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(classPrefix + "-main", {
+  }, renderHeader(), React.createElement("div", {
+    className: `${classPrefix}-wrapper`
+  }, React.createElement("div", {
+    className: classNames(`${classPrefix}-main`, {
       'confirmed-style': !!confirmText
     })
-  }, keys.map(renderKey)), !!confirmText && /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-confirm"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-key extra-key bs-key",
-    onTouchStart: function onTouchStart() {
+  }, keys.map(renderKey)), !!confirmText && React.createElement("div", {
+    className: `${classPrefix}-confirm`
+  }, React.createElement("div", {
+    className: `${classPrefix}-key extra-key bs-key`,
+    onTouchStart: () => {
       onBackspacePressStart();
     },
-    onTouchEnd: function onTouchEnd(e) {
+    onTouchEnd: e => {
       onKeyPress(e, 'BACKSPACE');
       onBackspacePressEnd();
     },
-    onMouseUp: function onMouseUp(e) {
-      return onKeyPress(e, 'BACKSPACE');
-    },
+    onMouseUp: e => onKeyPress(e, 'BACKSPACE'),
     title: 'BACKSPACE',
     role: 'button'
-  }, /*#__PURE__*/React.createElement(TextDeletionOutline, null)), /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-key extra-key ok-key",
-    onTouchEnd: function onTouchEnd(e) {
-      return onKeyPress(e, 'OK');
-    },
-    onMouseUp: function onMouseUp(e) {
-      return onKeyPress(e, 'OK');
-    },
+  }, React.createElement(TextDeletionOutline, null)), React.createElement("div", {
+    className: `${classPrefix}-key extra-key ok-key`,
+    onTouchEnd: e => onKeyPress(e, 'OK'),
+    onMouseUp: e => onKeyPress(e, 'OK'),
     role: 'button'
-  }, confirmText))), props.safeArea && /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-footer"
-  }, /*#__PURE__*/React.createElement(SafeArea, {
+  }, confirmText))), props.safeArea && React.createElement("div", {
+    className: `${classPrefix}-footer`
+  }, React.createElement(SafeArea, {
     position: 'bottom'
   })))));
 };

package/es/components/page-indicator/page-indicator.js

@@ -2,25 +2,25 @@ import React, { memo } from 'react';
 import { withNativeProps } from '../../utils/native-props';
 import classNames from 'classnames';
 import { mergeProps } from '../../utils/with-default-props';
-var classPrefix = "adm-page-indicator";
-var defaultProps = {
+const classPrefix = `adm-page-indicator`;
+const defaultProps = {
   color: 'primary',
   direction: 'horizontal'
 };
-export var PageIndicator = /*#__PURE__*/memo(function (p) {
-  var props = mergeProps(defaultProps, p);
-  var dots = [];
+export const PageIndicator = memo(p => {
+  const props = mergeProps(defaultProps, p);
+  const dots = [];
 
-  for (var i = 0; i < props.total; i++) {
-    var _classNames;
-
-    dots.push( /*#__PURE__*/React.createElement("div", {
+  for (let i = 0; i < props.total; i++) {
+    dots.push(React.createElement("div", {
       key: i,
-      className: classNames(classPrefix + "-dot", (_classNames = {}, _classNames[classPrefix + "-dot-active"] = props.current === i, _classNames))
+      className: classNames(`${classPrefix}-dot`, {
+        [`${classPrefix}-dot-active`]: props.current === i
+      })
     }));
   }
 
-  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
-    className: classNames(classPrefix, classPrefix + "-" + props.direction, classPrefix + "-color-" + props.color)
+  return withNativeProps(props, React.createElement("div", {
+    className: classNames(classPrefix, `${classPrefix}-${props.direction}`, `${classPrefix}-color-${props.color}`)
   }, dots));
 });

package/es/components/passcode-input/passcode-input.d.ts

@@ -14,7 +14,7 @@ export declare type PasscodeInputProps = {
     onFocus?: () => void;
     keyboard?: ReactElement<NumberKeyboardProps>;
     onFill?: (val: string) => void;
-} & NativeProps<'--cell-gap' | '--cell-size'>;
+} & NativeProps<'--cell-gap' | '--cell-size' | '--dot-size' | '--border-color' | '--border-radius'>;
 export declare type PasscodeInputRef = {
     focus: () => void;
     blur: () => void;
@@ -32,4 +32,4 @@ export declare const PasscodeInput: React.ForwardRefExoticComponent<{
     onFocus?: (() => void) | undefined;
     keyboard?: React.ReactElement<NumberKeyboardProps, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | undefined;
     onFill?: ((val: string) => void) | undefined;
-} & NativeProps<"--cell-size" | "--cell-gap"> & React.RefAttributes<PasscodeInputRef>>;
+} & NativeProps<"--border-radius" | "--border-color" | "--cell-size" | "--dot-size" | "--cell-gap"> & React.RefAttributes<PasscodeInputRef>>;

package/es/components/passcode-input/passcode-input.js

@@ -4,8 +4,8 @@ import { withNativeProps } from '../../utils/native-props';
 import classNames from 'classnames';
 import { bound } from '../../utils/bound';
 import { usePropsValue } from '../../utils/use-props-value';
-var classPrefix = 'adm-passcode-input';
-var defaultProps = {
+const classPrefix = 'adm-passcode-input';
+const defaultProps = {
   defaultValue: '',
   length: 6,
   plain: false,
@@ -13,22 +13,15 @@ var defaultProps = {
   seperated: false,
   caret: true
 };
-export var PasscodeInput = /*#__PURE__*/forwardRef(function (p, ref) {
-  var props = mergeProps(defaultProps, p); // 防止 length 值不合法
-
-  var cellLength = props.length > 0 && props.length < Infinity ? Math.floor(props.length) : defaultProps.length;
-
-  var _useState = useState(false),
-      focused = _useState[0],
-      setFocused = _useState[1];
-
-  var _usePropsValue = usePropsValue(props),
-      value = _usePropsValue[0],
-      setValue = _usePropsValue[1];
-
-  var rootRef = useRef(null);
-  var nativeInputRef = useRef(null);
-  useEffect(function () {
+export const PasscodeInput = forwardRef((p, ref) => {
+  const props = mergeProps(defaultProps, p); // 防止 length 值不合法
+
+  const cellLength = props.length > 0 && props.length < Infinity ? Math.floor(props.length) : defaultProps.length;
+  const [focused, setFocused] = useState(false);
+  const [value, setValue] = usePropsValue(props);
+  const rootRef = useRef(null);
+  const nativeInputRef = useRef(null);
+  useEffect(() => {
     var _a;
 
     if (value.length >= cellLength) {
@@ -36,7 +29,7 @@ export var PasscodeInput = /*#__PURE__*/forwardRef(function (p, ref) {
     }
   }, [props.onFill, value, cellLength]);
 
-  var onFocus = function onFocus() {
+  const onFocus = () => {
     var _a, _b;
 
     if (!props.keyboard) {
@@ -47,9 +40,9 @@ export var PasscodeInput = /*#__PURE__*/forwardRef(function (p, ref) {
     (_b = props.onFocus) === null || _b === void 0 ? void 0 : _b.call(props);
   };
 
-  useEffect(function () {
+  useEffect(() => {
     if (!focused) return;
-    var timeout = window.setTimeout(function () {
+    const timeout = window.setTimeout(() => {
       var _a;
 
       (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
@@ -58,44 +51,42 @@ export var PasscodeInput = /*#__PURE__*/forwardRef(function (p, ref) {
         behavior: 'smooth'
       });
     }, 100);
-    return function () {
+    return () => {
       window.clearTimeout(timeout);
     };
   }, [focused]);
 
-  var onBlur = function onBlur() {
+  const onBlur = () => {
     var _a;
 
     setFocused(false);
     (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props);
   };
 
-  useImperativeHandle(ref, function () {
-    return {
-      focus: function focus() {
-        var _a;
+  useImperativeHandle(ref, () => ({
+    focus: () => {
+      var _a;
 
-        return (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-      },
-      blur: function blur() {
-        var _a, _b;
+      return (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    },
+    blur: () => {
+      var _a, _b;
 
-        (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-        (_b = nativeInputRef.current) === null || _b === void 0 ? void 0 : _b.blur();
-      }
-    };
-  });
+      (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+      (_b = nativeInputRef.current) === null || _b === void 0 ? void 0 : _b.blur();
+    }
+  }));
 
-  var renderCells = function renderCells() {
-    var cells = [];
-    var chars = value.split('');
-    var caretIndex = chars.length; // 光标位置index等于当前文字长度
+  const renderCells = () => {
+    const cells = [];
+    const chars = value.split('');
+    const caretIndex = chars.length; // 光标位置index等于当前文字长度
 
-    var focusedIndex = bound(chars.length, 0, cellLength - 1);
+    const focusedIndex = bound(chars.length, 0, cellLength - 1);
 
-    for (var i = 0; i < cellLength; i++) {
-      cells.push( /*#__PURE__*/React.createElement("div", {
-        className: classNames(classPrefix + "-cell", {
+    for (let i = 0; i < cellLength; i++) {
+      cells.push(React.createElement("div", {
+        className: classNames(`${classPrefix}-cell`, {
           caret: props.caret && caretIndex === i && focused,
           focused: focusedIndex === i && focused,
           dot: !props.plain && chars[i]
@@ -107,40 +98,40 @@ export var PasscodeInput = /*#__PURE__*/forwardRef(function (p, ref) {
     return cells;
   };
 
-  var cls = classNames(classPrefix, {
+  const cls = classNames(classPrefix, {
     focused: focused,
     error: props.error,
     seperated: props.seperated
   });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+  return React.createElement(React.Fragment, null, withNativeProps(props, React.createElement("div", {
     ref: rootRef,
     tabIndex: 0,
     className: cls,
     onFocus: onFocus,
     onBlur: onBlur
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-cell-container"
-  }, renderCells()), /*#__PURE__*/React.createElement("input", {
+  }, React.createElement("div", {
+    className: `${classPrefix}-cell-container`
+  }, renderCells()), React.createElement("input", {
     ref: nativeInputRef,
-    className: classPrefix + "-native-input",
+    className: `${classPrefix}-native-input`,
     value: value,
     type: 'text',
     pattern: '[0-9]*',
     inputMode: 'numeric',
-    onChange: function onChange(e) {
+    onChange: e => {
       setValue(e.target.value.slice(0, props.length));
     }
-  }))), props.keyboard && /*#__PURE__*/React.cloneElement(props.keyboard, {
+  }))), props.keyboard && React.cloneElement(props.keyboard, {
     visible: focused,
-    onInput: function onInput(v) {
+    onInput: v => {
       if (value.length < cellLength) {
         setValue((value + v).slice(0, props.length));
       }
     },
-    onDelete: function onDelete() {
+    onDelete: () => {
       setValue(value.slice(0, -1));
     },
-    onClose: function onClose() {
+    onClose: () => {
       var _a;
 
       (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.blur();

package/es/components/picker/index.js

@@ -3,5 +3,5 @@ import { attachPropertiesToComponent } from '../../utils/attach-properties-to-co
 import { Picker } from './picker';
 import { prompt } from './prompt';
 export default attachPropertiesToComponent(Picker, {
-  prompt: prompt
+  prompt
 });

package/es/components/picker/picker.css

@@ -1,10 +1,20 @@
 .adm-picker {
+  --header-button-font-size: 15px;
+  --title-font-size: 15px;
+  --item-font-size: 16px;
+  --item-height: 34px;
   width: 100%;
   height: 300px;
   overflow: hidden;
   position: relative;
   display: flex;
   flex-direction: column;
+  ---item-font-size: var(--item-font-size);
+  ---item-height: var(--item-height);
+}
+.adm-picker .adm-picker-view.adm-picker-view {
+  --item-font-size: var(---item-font-size);
+  --item-height: var(---item-height);
 }
 .adm-picker-header {
   flex: none;
@@ -12,16 +22,16 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 6px 8px;
+  padding: 4px 4px;
 }
 .adm-picker-header-button {
-  font-size: 15px;
+  font-size: var(--header-button-font-size);
   display: inline-block;
-  padding: 4px 4px;
+  padding: 8px 8px;
 }
 .adm-picker-header-title {
   padding: 4px 4px;
-  font-size: 15px;
+  font-size: var(--title-font-size);
   color: var(--adm-color-text);
   text-align: center;
   flex: 1;
@@ -34,3 +44,7 @@
 .adm-picker-body > .adm-picker-view {
   --height: 100%;
 }
+.adm-picker-popup .adm-popup-body {
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}

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

@@ -10,10 +10,11 @@ export declare type PickerProps = {
     onConfirm?: (value: PickerValue[], extend: PickerValueExtend) => void;
     onCancel?: () => void;
     onClose?: () => void;
+    closeOnMaskClick?: boolean;
     visible?: boolean;
     title?: ReactNode;
     confirmText?: ReactNode;
     cancelText?: ReactNode;
     children?: (items: (PickerColumnItem | null)[]) => ReactNode;
-} & Pick<PopupProps, 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'stopPropagation'> & NativeProps;
+} & Pick<PopupProps, 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'stopPropagation'> & NativeProps<'--header-button-font-size' | '--title-font-size' | '--item-font-size' | '--item-height'>;
 export declare const Picker: React.NamedExoticComponent<PickerProps>;