antd-mobile 5.0.0-rc.8 → 5.1.0

package/2x/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/2x/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/2x/es/components/picker/picker.css

@@ -1,10 +1,21 @@
 .adm-picker {
+  --header-button-font-size: 30px;
+  --title-font-size: 30px;
+  --item-font-size: 32px;
+  --item-height: 68px;
   width: 100%;
   height: 600px;
   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 {
@@ -13,18 +24,18 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 12px 16px;
+  padding: 8px 8px;
 }
 
 .adm-picker-header-button {
-  font-size: 30px;
+  font-size: var(--header-button-font-size);
   display: inline-block;
-  padding: 8px 8px;
+  padding: 16px 16px;
 }
 
 .adm-picker-header-title {
   padding: 8px 8px;
-  font-size: 30px;
+  font-size: var(--title-font-size);
   color: var(--adm-color-text);
   text-align: center;
   flex: 1;
@@ -38,4 +49,9 @@
 
 .adm-picker-body > .adm-picker-view {
   --height: 100%;
+}
+
+.adm-picker-popup .adm-popup-body {
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
 }

package/2x/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?: string;
-    cancelText?: string;
+    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>;

package/2x/es/components/picker/picker.js

@@ -8,50 +8,44 @@ import { useColumns } from '../picker-view/use-columns';
 import { useConfig } from '../config-provider';
 import { usePickerValueExtend } from '../picker-view/use-picker-value-extend';
 import { useMemoizedFn } from 'ahooks';
-var classPrefix = "adm-picker";
-var defaultProps = {
-  defaultValue: []
+import SafeArea from '../safe-area';
+const classPrefix = `adm-picker`;
+const defaultProps = {
+  defaultValue: [],
+  closeOnMaskClick: true
 };
-export var Picker = /*#__PURE__*/memo(function (p) {
+export const Picker = memo(p => {
   var _a;
 
-  var _useConfig = useConfig(),
-      locale = _useConfig.locale;
-
-  var props = mergeProps(defaultProps, {
+  const {
+    locale
+  } = useConfig();
+  const props = mergeProps(defaultProps, {
     confirmText: locale.common.confirm,
     cancelText: locale.common.cancel
   }, p);
-
-  var _usePropsValue = usePropsValue(Object.assign(Object.assign({}, props), {
-    onChange: function onChange(val) {
+  const [value, setValue] = usePropsValue(Object.assign(Object.assign({}, props), {
+    onChange: val => {
       var _a;
 
       (_a = props.onConfirm) === null || _a === void 0 ? void 0 : _a.call(props, val, generateValueExtend(val));
     }
-  })),
-      value = _usePropsValue[0],
-      setValue = _usePropsValue[1]; // TODO: columns generated twice in Picker and PickerView, which can be improved
-
-
-  var columns = useColumns(props.columns, value);
-  var generateValueExtend = usePickerValueExtend(columns);
-
-  var _useState = useState(value),
-      innerValue = _useState[0],
-      setInnerValue = _useState[1];
+  })); // TODO: columns generated twice in Picker and PickerView, which can be improved
 
-  useEffect(function () {
+  const columns = useColumns(props.columns, value);
+  const generateValueExtend = usePickerValueExtend(columns);
+  const [innerValue, setInnerValue] = useState(value);
+  useEffect(() => {
     if (innerValue !== value) {
       setInnerValue(value);
     }
   }, [props.visible]);
-  useEffect(function () {
+  useEffect(() => {
     if (!props.visible) {
       setInnerValue(value);
     }
   }, [value]);
-  var onChange = useMemoizedFn(function (val, ext) {
+  const onChange = useMemoizedFn((val, ext) => {
     var _a;
 
     setInnerValue(val);
@@ -60,41 +54,43 @@ export var Picker = /*#__PURE__*/memo(function (p) {
       (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, val, ext);
     }
   });
-  var pickerElement = withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+  const pickerElement = withNativeProps(props, React.createElement("div", {
     className: classPrefix
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-header"
-  }, /*#__PURE__*/React.createElement("a", {
-    className: classPrefix + "-header-button",
-    onClick: function onClick() {
+  }, React.createElement("div", {
+    className: `${classPrefix}-header`
+  }, React.createElement("a", {
+    className: `${classPrefix}-header-button`,
+    onClick: () => {
       var _a, _b;
 
       (_a = props.onCancel) === null || _a === void 0 ? void 0 : _a.call(props);
       (_b = props.onClose) === null || _b === void 0 ? void 0 : _b.call(props);
     }
-  }, props.cancelText), /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-header-title"
-  }, props.title), /*#__PURE__*/React.createElement("a", {
-    className: classPrefix + "-header-button",
-    onClick: function onClick() {
+  }, props.cancelText), React.createElement("div", {
+    className: `${classPrefix}-header-title`
+  }, props.title), React.createElement("a", {
+    className: `${classPrefix}-header-button`,
+    onClick: () => {
       var _a;
 
       setValue(innerValue);
       (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
     }
-  }, props.confirmText)), /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-body"
-  }, /*#__PURE__*/React.createElement(PickerView, {
+  }, props.confirmText)), React.createElement("div", {
+    className: `${classPrefix}-body`
+  }, React.createElement(PickerView, {
     columns: props.columns,
     value: innerValue,
     onChange: onChange
   }))));
-  var popupElement = /*#__PURE__*/React.createElement(Popup, {
+  const popupElement = React.createElement(Popup, {
+    className: `${classPrefix}-popup`,
     visible: props.visible,
     position: 'bottom',
-    onMaskClick: function onMaskClick() {
+    onMaskClick: () => {
       var _a, _b;
 
+      if (!props.closeOnMaskClick) return;
       (_a = props.onCancel) === null || _a === void 0 ? void 0 : _a.call(props);
       (_b = props.onClose) === null || _b === void 0 ? void 0 : _b.call(props);
     },
@@ -105,7 +101,9 @@ export var Picker = /*#__PURE__*/memo(function (p) {
     onClick: props.onClick,
     forceRender: true,
     stopPropagation: props.stopPropagation
-  }, pickerElement);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, popupElement, (_a = props.children) === null || _a === void 0 ? void 0 : _a.call(props, generateValueExtend(value).items));
+  }, pickerElement, React.createElement(SafeArea, {
+    position: 'bottom'
+  }));
+  return React.createElement(React.Fragment, null, popupElement, (_a = props.children) === null || _a === void 0 ? void 0 : _a.call(props, generateValueExtend(value).items));
 });
 Picker.displayName = 'Picker';

package/2x/es/components/picker/prompt.js

@@ -2,28 +2,28 @@ import React, { useEffect, useState } from 'react';
 import { renderToBody } from '../../utils/render-to-body';
 import { Picker } from './picker';
 export function prompt(props) {
-  return new Promise(function (resolve) {
-    var Wrapper = function Wrapper() {
-      var _useState = useState(false),
-          visible = _useState[0],
-          setVisible = _useState[1];
-
-      useEffect(function () {
+  return new Promise(resolve => {
+    const Wrapper = () => {
+      const [visible, setVisible] = useState(false);
+      useEffect(() => {
         setVisible(true);
       }, []);
-      return /*#__PURE__*/React.createElement(Picker, Object.assign({}, props, {
+      return React.createElement(Picker, Object.assign({}, props, {
         visible: visible,
-        onConfirm: function onConfirm(val) {
+        onConfirm: (val, extend) => {
+          var _a;
+
+          (_a = props.onConfirm) === null || _a === void 0 ? void 0 : _a.call(props, val, extend);
           resolve(val);
         },
-        onClose: function onClose() {
+        onClose: () => {
           var _a;
 
           (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
           setVisible(false);
           resolve(null);
         },
-        afterClose: function afterClose() {
+        afterClose: () => {
           var _a;
 
           (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
@@ -32,6 +32,6 @@ export function prompt(props) {
       }));
     };
 
-    var unmount = renderToBody( /*#__PURE__*/React.createElement(Wrapper, null));
+    const unmount = renderToBody(React.createElement(Wrapper, null));
   });
 }

package/2x/es/components/picker-view/picker-view.css

@@ -1,5 +1,7 @@
 .adm-picker-view {
   --height: 480px;
+  --item-height: 68px;
+  --item-font-size: 32px;
   height: var(--height);
   width: 100%;
   display: flex;
@@ -21,7 +23,7 @@
   width: 100%;
   cursor: grab;
   position: absolute;
-  top: calc(50% - 34px);
+  top: calc(50% - var(--item-height) / 2);
   left: 0;
 }
 
@@ -44,9 +46,9 @@
 }
 
 .adm-picker-view-column-item {
-  font-size: 32px;
+  font-size: var(--item-font-size);
   padding: 0 12px;
-  height: 68px;
+  height: var(--item-height);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -58,6 +60,16 @@
   white-space: nowrap;
 }
 
+.adm-picker-view-column-item.adm-picker-view-column-item-dummy {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  padding: 0;
+  opacity: 0;
+  user-select: none;
+  pointer-events: none;
+}
+
 .adm-picker-view-column-accessible {
   width: 100%;
   height: 100%;
@@ -66,6 +78,7 @@
   display: flex;
   flex-direction: column;
   position: relative;
+  z-index: 0;
 }
 
 .adm-picker-view-column-accessible > * {
@@ -86,7 +99,7 @@
 
 .adm-picker-view-mask {
   position: absolute;
-  z-index: 100;
+  z-index: 10000;
   left: 0;
   top: 0;
   width: 100%;
@@ -102,7 +115,7 @@
 }
 
 .adm-picker-view-mask-middle {
-  height: 68px;
+  height: var(--item-height);
   box-sizing: border-box;
   flex: none;
   border-top: solid 2px var(--adm-border-color);
@@ -110,9 +123,9 @@
 }
 
 .adm-picker-view-mask-top {
-  background: linear-gradient(0deg, rgba(255, 255, 255, 0.7) 50%, #ffffff);
+  background: linear-gradient(0deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.8) 50%, #ffffff);
 }
 
 .adm-picker-view-mask-bottom {
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 50%, #ffffff);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.8) 50%, #ffffff);
 }

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

@@ -14,5 +14,5 @@ export declare type PickerViewProps = {
     value?: PickerValue[];
     defaultValue?: PickerValue[];
     onChange?: (value: PickerValue[], extend: PickerValueExtend) => void;
-} & NativeProps<'--height'>;
+} & NativeProps<'--height' | '--item-height' | '--item-font-size'>;
 export declare const PickerView: React.NamedExoticComponent<PickerViewProps>;

package/2x/es/components/picker-view/picker-view.js

@@ -5,18 +5,14 @@ import { useColumns } from './use-columns';
 import { withNativeProps } from '../../utils/native-props';
 import { usePickerValueExtend } from './use-picker-value-extend';
 import { useDebounceEffect } from 'ahooks';
-var classPrefix = "adm-picker-view";
-var defaultProps = {
+const classPrefix = `adm-picker-view`;
+const defaultProps = {
   defaultValue: []
 };
-export var PickerView = /*#__PURE__*/memo(function (p) {
-  var props = mergeProps(defaultProps, p);
-
-  var _useState = useState(props.value === undefined ? props.defaultValue : props.value),
-      innerValue = _useState[0],
-      setInnerValue = _useState[1];
-
-  useDebounceEffect(function () {
+export const PickerView = memo(p => {
+  const props = mergeProps(defaultProps, p);
+  const [innerValue, setInnerValue] = useState(props.value === undefined ? props.defaultValue : props.value);
+  useDebounceEffect(() => {
     var _a;
 
     if (props.value === innerValue) return;
@@ -27,50 +23,48 @@ export var PickerView = /*#__PURE__*/memo(function (p) {
     trailing: true
   }); // Sync `value` to `innerValue`
 
-  useEffect(function () {
+  useEffect(() => {
     if (props.value === undefined) return; // Uncontrolled mode
 
     if (props.value === innerValue) return;
     setInnerValue(props.value);
   }, [props.value]);
-  useEffect(function () {
+  useEffect(() => {
     if (props.value === innerValue) return;
-    var timeout = window.setTimeout(function () {
+    const timeout = window.setTimeout(() => {
       if (props.value !== undefined && props.value !== innerValue) {
         setInnerValue(props.value);
       }
     }, 1000);
-    return function () {
+    return () => {
       window.clearTimeout(timeout);
     };
   }, [props.value, innerValue]);
-  var columns = useColumns(props.columns, innerValue);
-  var generateValueExtend = usePickerValueExtend(columns);
-  var handleSelect = useCallback(function (val, index) {
-    setInnerValue(function (prev) {
-      var next = [].concat(prev);
+  const columns = useColumns(props.columns, innerValue);
+  const generateValueExtend = usePickerValueExtend(columns);
+  const handleSelect = useCallback((val, index) => {
+    setInnerValue(prev => {
+      const next = [...prev];
       next[index] = val;
       return next;
     });
   }, []);
-  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
-    className: "" + classPrefix
-  }, columns.map(function (column, index) {
-    return /*#__PURE__*/React.createElement(Wheel, {
-      key: index,
-      index: index,
-      column: column,
-      value: innerValue[index],
-      onSelect: handleSelect
-    });
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-mask"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-mask-top"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-mask-middle"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-mask-bottom"
+  return withNativeProps(props, React.createElement("div", {
+    className: `${classPrefix}`
+  }, columns.map((column, index) => React.createElement(Wheel, {
+    key: index,
+    index: index,
+    column: column,
+    value: innerValue[index],
+    onSelect: handleSelect
+  })), React.createElement("div", {
+    className: `${classPrefix}-mask`
+  }, React.createElement("div", {
+    className: `${classPrefix}-mask-top`
+  }), React.createElement("div", {
+    className: `${classPrefix}-mask-middle`
+  }), React.createElement("div", {
+    className: `${classPrefix}-mask-bottom`
   }))));
 });
 PickerView.displayName = 'PickerView';

package/2x/es/components/picker-view/use-columns.js

@@ -1,14 +1,10 @@
 import { useMemo } from 'react';
 export function useColumns(rawColumns, value) {
-  return useMemo(function () {
-    var columns = typeof rawColumns === 'function' ? rawColumns(value) : rawColumns;
-    return columns.map(function (column) {
-      return column.map(function (item) {
-        return typeof item === 'string' ? {
-          label: item,
-          value: item
-        } : item;
-      });
-    });
+  return useMemo(() => {
+    const columns = typeof rawColumns === 'function' ? rawColumns(value) : rawColumns;
+    return columns.map(column => column.map(item => typeof item === 'string' ? {
+      label: item,
+      value: item
+    } : item));
   }, [rawColumns, value]);
 }