antd-mobile 5.0.0-rc.9 → 5.2.0

package/cjs/components/page-indicator/index.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 require("./page-indicator.css");
 
 var _pageIndicator2 = require("./page-indicator");
 
 var _default = _pageIndicator2.PageIndicator;
-exports["default"] = _default;
+exports.default = _default;

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

@@ -13,32 +13,32 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _withDefaultProps = require("../../utils/with-default-props");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+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 _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 classPrefix = "adm-page-indicator";
-var defaultProps = {
+const classPrefix = `adm-page-indicator`;
+const defaultProps = {
   color: 'primary',
   direction: 'horizontal'
 };
-var PageIndicator = /*#__PURE__*/(0, _react.memo)(function (p) {
-  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
-  var dots = [];
+const PageIndicator = (0, _react.memo)(p => {
+  const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  const dots = [];
 
-  for (var i = 0; i < props.total; i++) {
-    var _classNames;
-
-    dots.push( /*#__PURE__*/_react["default"].createElement("div", {
+  for (let i = 0; i < props.total; i++) {
+    dots.push(_react.default.createElement("div", {
       key: i,
-      className: (0, _classnames["default"])(classPrefix + "-dot", (_classNames = {}, _classNames[classPrefix + "-dot-active"] = props.current === i, _classNames))
+      className: (0, _classnames.default)(`${classPrefix}-dot`, {
+        [`${classPrefix}-dot-active`]: props.current === i
+      })
     }));
   }
 
-  return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])(classPrefix, classPrefix + "-" + props.direction, classPrefix + "-color-" + props.color)
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: (0, _classnames.default)(classPrefix, `${classPrefix}-${props.direction}`, `${classPrefix}-color-${props.color}`)
   }, dots));
 });
 exports.PageIndicator = PageIndicator;

package/cjs/components/passcode-input/index.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 require("./passcode-input.css");
 
 var _passcodeInput2 = require("./passcode-input");
 
 var _default = _passcodeInput2.PasscodeInput;
-exports["default"] = _default;
+exports.default = _default;

package/cjs/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/cjs/components/passcode-input/passcode-input.js

@@ -15,16 +15,16 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _bound = require("../../utils/bound");
 
-var _usePropsValue2 = require("../../utils/use-props-value");
+var _usePropsValue = require("../../utils/use-props-value");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+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 _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 classPrefix = 'adm-passcode-input';
-var defaultProps = {
+const classPrefix = 'adm-passcode-input';
+const defaultProps = {
   defaultValue: '',
   length: 6,
   plain: false,
@@ -32,22 +32,15 @@ var defaultProps = {
   seperated: false,
   caret: true
 };
-var PasscodeInput = /*#__PURE__*/(0, _react.forwardRef)(function (p, ref) {
-  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p); // 防止 length 值不合法
-
-  var cellLength = props.length > 0 && props.length < Infinity ? Math.floor(props.length) : defaultProps.length;
-
-  var _useState = (0, _react.useState)(false),
-      focused = _useState[0],
-      setFocused = _useState[1];
-
-  var _usePropsValue = (0, _usePropsValue2.usePropsValue)(props),
-      value = _usePropsValue[0],
-      setValue = _usePropsValue[1];
-
-  var rootRef = (0, _react.useRef)(null);
-  var nativeInputRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(function () {
+const PasscodeInput = (0, _react.forwardRef)((p, ref) => {
+  const props = (0, _withDefaultProps.mergeProps)(defaultProps, p); // 防止 length 值不合法
+
+  const cellLength = props.length > 0 && props.length < Infinity ? Math.floor(props.length) : defaultProps.length;
+  const [focused, setFocused] = (0, _react.useState)(false);
+  const [value, setValue] = (0, _usePropsValue.usePropsValue)(props);
+  const rootRef = (0, _react.useRef)(null);
+  const nativeInputRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
     var _a;
 
     if (value.length >= cellLength) {
@@ -55,7 +48,7 @@ var PasscodeInput = /*#__PURE__*/(0, _react.forwardRef)(function (p, ref) {
     }
   }, [props.onFill, value, cellLength]);
 
-  var onFocus = function onFocus() {
+  const onFocus = () => {
     var _a, _b;
 
     if (!props.keyboard) {
@@ -66,9 +59,9 @@ var PasscodeInput = /*#__PURE__*/(0, _react.forwardRef)(function (p, ref) {
     (_b = props.onFocus) === null || _b === void 0 ? void 0 : _b.call(props);
   };
 
-  (0, _react.useEffect)(function () {
+  (0, _react.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({
@@ -77,44 +70,42 @@ var PasscodeInput = /*#__PURE__*/(0, _react.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);
   };
 
-  (0, _react.useImperativeHandle)(ref, function () {
-    return {
-      focus: function focus() {
-        var _a;
+  (0, _react.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 = (0, _bound.bound)(chars.length, 0, cellLength - 1);
+    const focusedIndex = (0, _bound.bound)(chars.length, 0, cellLength - 1);
 
-    for (var i = 0; i < cellLength; i++) {
-      cells.push( /*#__PURE__*/_react["default"].createElement("div", {
-        className: (0, _classnames["default"])(classPrefix + "-cell", {
+    for (let i = 0; i < cellLength; i++) {
+      cells.push(_react.default.createElement("div", {
+        className: (0, _classnames.default)(`${classPrefix}-cell`, {
           caret: props.caret && caretIndex === i && focused,
           focused: focusedIndex === i && focused,
           dot: !props.plain && chars[i]
@@ -126,40 +117,40 @@ var PasscodeInput = /*#__PURE__*/(0, _react.forwardRef)(function (p, ref) {
     return cells;
   };
 
-  var cls = (0, _classnames["default"])(classPrefix, {
+  const cls = (0, _classnames.default)(classPrefix, {
     focused: focused,
     error: props.error,
     seperated: props.seperated
   });
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
+  return _react.default.createElement(_react.default.Fragment, null, (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     ref: rootRef,
     tabIndex: 0,
     className: cls,
     onFocus: onFocus,
     onBlur: onBlur
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-cell-container"
-  }, renderCells()), /*#__PURE__*/_react["default"].createElement("input", {
+  }, _react.default.createElement("div", {
+    className: `${classPrefix}-cell-container`
+  }, renderCells()), _react.default.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["default"].cloneElement(props.keyboard, {
+  }))), props.keyboard && _react.default.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/cjs/components/picker/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 require("./picker.css");
 
@@ -17,4 +17,4 @@ var _default = (0, _attachPropertiesToComponent.attachPropertiesToComponent)(_pi
   prompt: _prompt.prompt
 });
 
-exports["default"] = _default;
+exports.default = _default;

package/cjs/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/cjs/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>;

package/cjs/components/picker/picker.js

@@ -13,7 +13,7 @@ var _withDefaultProps = require("../../utils/with-default-props");
 
 var _nativeProps = require("../../utils/native-props");
 
-var _usePropsValue2 = require("../../utils/use-props-value");
+var _usePropsValue = require("../../utils/use-props-value");
 
 var _pickerView = _interopRequireDefault(require("../picker-view"));
 
@@ -25,56 +25,51 @@ var _usePickerValueExtend = require("../picker-view/use-picker-value-extend");
 
 var _ahooks = require("ahooks");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _safeArea = _interopRequireDefault(require("../safe-area"));
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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 _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); }
 
-var classPrefix = "adm-picker";
-var defaultProps = {
-  defaultValue: []
+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; }
+
+const classPrefix = `adm-picker`;
+const defaultProps = {
+  defaultValue: [],
+  closeOnMaskClick: true
 };
-var Picker = /*#__PURE__*/(0, _react.memo)(function (p) {
+const Picker = (0, _react.memo)(p => {
   var _a;
 
-  var _useConfig = (0, _configProvider.useConfig)(),
-      locale = _useConfig.locale;
-
-  var props = (0, _withDefaultProps.mergeProps)(defaultProps, {
+  const {
+    locale
+  } = (0, _configProvider.useConfig)();
+  const props = (0, _withDefaultProps.mergeProps)(defaultProps, {
     confirmText: locale.common.confirm,
     cancelText: locale.common.cancel
   }, p);
-
-  var _usePropsValue = (0, _usePropsValue2.usePropsValue)(Object.assign(Object.assign({}, props), {
-    onChange: function onChange(val) {
+  const [value, setValue] = (0, _usePropsValue.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 = (0, _useColumns.useColumns)(props.columns, value);
-  var generateValueExtend = (0, _usePickerValueExtend.usePickerValueExtend)(columns);
-
-  var _useState = (0, _react.useState)(value),
-      innerValue = _useState[0],
-      setInnerValue = _useState[1];
+  })); // TODO: columns generated twice in Picker and PickerView, which can be improved
 
-  (0, _react.useEffect)(function () {
+  const columns = (0, _useColumns.useColumns)(props.columns, value);
+  const generateValueExtend = (0, _usePickerValueExtend.usePickerValueExtend)(columns);
+  const [innerValue, setInnerValue] = (0, _react.useState)(value);
+  (0, _react.useEffect)(() => {
     if (innerValue !== value) {
       setInnerValue(value);
     }
   }, [props.visible]);
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     if (!props.visible) {
       setInnerValue(value);
     }
   }, [value]);
-  var onChange = (0, _ahooks.useMemoizedFn)(function (val, ext) {
+  const onChange = (0, _ahooks.useMemoizedFn)((val, ext) => {
     var _a;
 
     setInnerValue(val);
@@ -83,42 +78,44 @@ var Picker = /*#__PURE__*/(0, _react.memo)(function (p) {
       (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, val, ext);
     }
   });
-  var pickerElement = (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
+  const pickerElement = (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: classPrefix
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-header"
-  }, /*#__PURE__*/_react["default"].createElement("a", {
-    className: classPrefix + "-header-button",
-    onClick: function onClick() {
+  }, _react.default.createElement("div", {
+    className: `${classPrefix}-header`
+  }, _react.default.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["default"].createElement("div", {
-    className: classPrefix + "-header-title"
-  }, props.title), /*#__PURE__*/_react["default"].createElement("a", {
-    className: classPrefix + "-header-button",
-    onClick: function onClick() {
+  }, props.cancelText), _react.default.createElement("div", {
+    className: `${classPrefix}-header-title`
+  }, props.title), _react.default.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["default"].createElement("div", {
-    className: classPrefix + "-body"
-  }, /*#__PURE__*/_react["default"].createElement(_pickerView["default"], {
+  }, props.confirmText)), _react.default.createElement("div", {
+    className: `${classPrefix}-body`
+  }, _react.default.createElement(_pickerView.default, {
     columns: props.columns,
     value: innerValue,
     onChange: onChange
   }))));
 
-  var popupElement = /*#__PURE__*/_react["default"].createElement(_popup["default"], {
+  const popupElement = _react.default.createElement(_popup.default, {
+    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);
     },
@@ -129,9 +126,11 @@ var Picker = /*#__PURE__*/(0, _react.memo)(function (p) {
     onClick: props.onClick,
     forceRender: true,
     stopPropagation: props.stopPropagation
-  }, pickerElement);
+  }, pickerElement, _react.default.createElement(_safeArea.default, {
+    position: 'bottom'
+  }));
 
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, popupElement, (_a = props.children) === null || _a === void 0 ? void 0 : _a.call(props, generateValueExtend(value).items));
+  return _react.default.createElement(_react.default.Fragment, null, popupElement, (_a = props.children) === null || _a === void 0 ? void 0 : _a.call(props, generateValueExtend(value).items));
 });
 exports.Picker = Picker;
 Picker.displayName = 'Picker';

package/cjs/components/picker/prompt.js

@@ -11,33 +11,33 @@ var _renderToBody = require("../../utils/render-to-body");
 
 var _picker = require("./picker");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+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 _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 prompt(props) {
-  return new Promise(function (resolve) {
-    var Wrapper = function Wrapper() {
-      var _useState = (0, _react.useState)(false),
-          visible = _useState[0],
-          setVisible = _useState[1];
-
-      (0, _react.useEffect)(function () {
+  return new Promise(resolve => {
+    const Wrapper = () => {
+      const [visible, setVisible] = (0, _react.useState)(false);
+      (0, _react.useEffect)(() => {
         setVisible(true);
       }, []);
-      return /*#__PURE__*/_react["default"].createElement(_picker.Picker, Object.assign({}, props, {
+      return _react.default.createElement(_picker.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);
@@ -46,6 +46,6 @@ function prompt(props) {
       }));
     };
 
-    var unmount = (0, _renderToBody.renderToBody)( /*#__PURE__*/_react["default"].createElement(Wrapper, null));
+    const unmount = (0, _renderToBody.renderToBody)(_react.default.createElement(Wrapper, null));
   });
 }

package/cjs/components/picker-view/index.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 var _pickerView = require("./picker-view");
 
 require("./picker-view.css");
 
 var _default = _pickerView.PickerView;
-exports["default"] = _default;
+exports.default = _default;