antd-mobile 5.0.0-rc.9 → 5.0.0

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,6 @@
 .adm-picker-view {
   --height: 480px;
+  --item-font-size: 32px;
   height: var(--height);
   width: 100%;
   display: flex;
@@ -44,7 +45,7 @@
 }
 
 .adm-picker-view-column-item {
-  font-size: 32px;
+  font-size: var(--item-font-size);
   padding: 0 12px;
   height: 68px;
   display: flex;
@@ -66,6 +67,7 @@
   display: flex;
   flex-direction: column;
   position: relative;
+  z-index: 0;
 }
 
 .adm-picker-view-column-accessible > * {
@@ -86,7 +88,7 @@
 
 .adm-picker-view-mask {
   position: absolute;
-  z-index: 100;
+  z-index: 10000;
   left: 0;
   top: 0;
   width: 100%;
@@ -110,9 +112,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-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]);
 }

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

@@ -1,20 +1,16 @@
 import { useMemo } from 'react';
 import memoize from 'lodash/memoize';
 export function usePickerValueExtend(columns) {
-  var generateItems = useMemo(function () {
-    return memoize(function (val) {
-      return val.map(function (v, index) {
+  const generateItems = useMemo(() => {
+    return memoize(val => {
+      return val.map((v, index) => {
         var _a;
 
-        var column = columns[index];
+        const column = columns[index];
         if (!column) return null;
-        return (_a = column.find(function (item) {
-          return item.value === v;
-        })) !== null && _a !== void 0 ? _a : null;
+        return (_a = column.find(item => item.value === v)) !== null && _a !== void 0 ? _a : null;
       });
-    }, function (val) {
-      return JSON.stringify(val);
-    });
+    }, val => JSON.stringify(val));
   }, [columns]);
 
   function generateValueExtend(val) {

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

@@ -1,144 +1,138 @@
-import React, { memo, useLayoutEffect, useRef } from 'react';
+import React, { memo, useRef } from 'react';
 import { useSpring, animated } from '@react-spring/web';
 import { useDrag } from '@use-gesture/react';
 import { convertPx } from '../../utils/convert-px';
 import { rubberbandIfOutOfBounds } from '../../utils/rubberband';
 import { bound } from '../../utils/bound';
 import isEqual from 'lodash/isEqual';
-var classPrefix = "adm-picker-view";
-export var Wheel = /*#__PURE__*/memo(function (props) {
-  var itemHeight = convertPx(34);
-  var value = props.value,
-      column = props.column;
+import { useIsomorphicLayoutEffect } from 'ahooks';
+const classPrefix = `adm-picker-view`;
+export const Wheel = memo(props => {
+  const itemHeight = convertPx(34);
+  const {
+    value,
+    column
+  } = props;
 
   function onSelect(val) {
     props.onSelect(val, props.index);
   }
 
-  var _useSpring = useSpring(function () {
-    return {
-      from: {
-        y: 0
-      },
-      config: {
-        tension: 400,
-        mass: 0.8
-      }
-    };
-  }),
-      y = _useSpring[0].y,
-      api = _useSpring[1];
-
-  var draggingRef = useRef(false);
-  useLayoutEffect(function () {
+  const [{
+    y
+  }, api] = useSpring(() => ({
+    from: {
+      y: 0
+    },
+    config: {
+      tension: 400,
+      mass: 0.8
+    }
+  }));
+  const draggingRef = useRef(false);
+  useIsomorphicLayoutEffect(() => {
     if (draggingRef.current) return;
     if (!value) return;
-    var targetIndex = column.findIndex(function (item) {
-      return item.value === value;
-    });
+    const targetIndex = column.findIndex(item => item.value === value);
     if (targetIndex < 0) return;
-    var finalPosition = targetIndex * -itemHeight;
+    const finalPosition = targetIndex * -itemHeight;
     api.start({
       y: finalPosition,
       immediate: y.goal !== finalPosition
     });
   }, [value, column]);
-  useLayoutEffect(function () {
+  useIsomorphicLayoutEffect(() => {
     if (column.length === 0) {
       if (value !== null) {
         onSelect(null);
       }
     } else {
-      if (!column.some(function (item) {
-        return item.value === value;
-      })) {
-        var firstItem = column[0];
+      if (!column.some(item => item.value === value)) {
+        const firstItem = column[0];
         onSelect(firstItem.value);
       }
     }
   }, [column, value]);
 
   function scrollSelect(index) {
-    var finalPosition = index * -itemHeight;
+    const finalPosition = index * -itemHeight;
     api.start({
       y: finalPosition
     });
-    var item = column[index];
+    const item = column[index];
     if (!item) return;
     onSelect(item.value);
   }
 
-  var bind = useDrag(function (state) {
+  const bind = useDrag(state => {
     draggingRef.current = true;
-    var min = -((column.length - 1) * itemHeight);
-    var max = 0;
+    const min = -((column.length - 1) * itemHeight);
+    const max = 0;
 
     if (state.last) {
       draggingRef.current = false;
-      var position = state.offset[1] + state.velocity[1] * state.direction[1] * 50;
-      var targetIndex = min < max ? -Math.round(bound(position, min, max) / itemHeight) : 0;
+      const position = state.offset[1] + state.velocity[1] * state.direction[1] * 50;
+      const targetIndex = min < max ? -Math.round(bound(position, min, max) / itemHeight) : 0;
       scrollSelect(targetIndex);
     } else {
-      var _position = state.offset[1];
+      const position = state.offset[1];
       api.start({
-        y: rubberbandIfOutOfBounds(_position, min, max, itemHeight * 50, 0.2)
+        y: rubberbandIfOutOfBounds(position, min, max, itemHeight * 50, 0.2)
       });
     }
   }, {
     axis: 'y',
-    from: function from() {
-      return [0, y.get()];
-    },
+    from: () => [0, y.get()],
     filterTaps: true,
     pointer: {
       touch: true
     }
   });
-  var selectedIndex = null;
+  let selectedIndex = null;
 
   function renderAccessible() {
     if (selectedIndex === null) {
       return null;
     }
 
-    var current = column[selectedIndex];
-    var previousIndex = selectedIndex - 1;
-    var nextIndex = selectedIndex + 1;
-    var previous = column[previousIndex];
-    var next = column[nextIndex];
-    return /*#__PURE__*/React.createElement("div", {
+    const current = column[selectedIndex];
+    const previousIndex = selectedIndex - 1;
+    const nextIndex = selectedIndex + 1;
+    const previous = column[previousIndex];
+    const next = column[nextIndex];
+    return React.createElement("div", {
       className: 'adm-picker-view-column-accessible'
-    }, /*#__PURE__*/React.createElement("div", {
+    }, React.createElement("div", {
       className: 'adm-picker-view-column-accessible-current',
       role: 'button',
-      "aria-label": current ? "\u5F53\u524D\u9009\u62E9\u7684\u662F\uFF1A" + current.label : '当前未选择'
-    }, "-"), /*#__PURE__*/React.createElement("div", null, previous && /*#__PURE__*/React.createElement("div", {
+      "aria-label": current ? `当前选择的是：${current.label}` : '当前未选择'
+    }, "-"), React.createElement("div", null, previous && React.createElement("div", {
       className: 'adm-picker-view-column-accessible-button',
-      onClick: function onClick() {
+      onClick: () => {
         scrollSelect(previousIndex);
       },
       role: 'button',
-      "aria-label": "\u9009\u62E9\u4E0A\u4E00\u9879\uFF1A" + previous.label
-    }, "-")), /*#__PURE__*/React.createElement("div", null, next && /*#__PURE__*/React.createElement("div", {
+      "aria-label": `选择上一项：${previous.label}`
+    }, "-")), React.createElement("div", null, next && React.createElement("div", {
       className: 'adm-picker-view-column-accessible-button',
-      onClick: function onClick() {
+      onClick: () => {
         scrollSelect(nextIndex);
       },
       role: 'button',
-      "aria-label": "\u9009\u62E9\u4E0B\u4E00\u9879\uFF1A" + next.label
+      "aria-label": `选择下一项：${next.label}`
     }, "-")));
   }
 
-  return /*#__PURE__*/React.createElement("div", Object.assign({
-    className: classPrefix + "-column"
-  }, bind()), /*#__PURE__*/React.createElement(animated.div, {
+  return React.createElement("div", Object.assign({
+    className: `${classPrefix}-column`
+  }, bind()), React.createElement(animated.div, {
     style: {
-      y: y
+      translateY: y
     },
-    className: classPrefix + "-column-wheel",
+    className: `${classPrefix}-column-wheel`,
     "aria-hidden": true
-  }, column.map(function (item, index) {
-    var selected = props.value === item.value;
+  }, column.map((item, index) => {
+    const selected = props.value === item.value;
     if (selected) selectedIndex = index;
 
     function handleClick() {
@@ -146,18 +140,18 @@ export var Wheel = /*#__PURE__*/memo(function (props) {
       scrollSelect(index);
     }
 
-    return /*#__PURE__*/React.createElement("div", {
+    return React.createElement("div", {
       key: item.value,
       "data-selected": item.value === value,
-      className: classPrefix + "-column-item",
+      className: `${classPrefix}-column-item`,
       onClick: handleClick,
       "aria-hidden": !selected,
       "aria-label": selected ? 'active' : ''
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classPrefix + "-column-item-label"
+    }, React.createElement("div", {
+      className: `${classPrefix}-column-item-label`
     }, item.label));
   })), renderAccessible());
-}, function (prev, next) {
+}, (prev, next) => {
   if (prev.index !== next.index) return false;
   if (prev.value !== next.value) return false;
   if (prev.onSelect !== next.onSelect) return false;

package/2x/es/components/popover/arrow.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare const Arrow: React.NamedExoticComponent<NativeProps<never>>;

package/2x/es/components/popover/arrow.js

@@ -0,0 +1,12 @@
+import React, { memo } from 'react';
+import { withNativeProps } from '../../utils/native-props';
+export const Arrow = memo(props => {
+  return withNativeProps(props, React.createElement("svg", {
+    viewBox: '0 0 30 16'
+  }, React.createElement("g", {
+    transform: 'translate(-1300.000000, -841.000000)',
+    fill: 'currentColor'
+  }, React.createElement("path", {
+    d: 'M1300,841 L1330,841 L1318.07289,855.312538 C1316.65863,857.009645 1314.13637,857.238942 1312.43926,855.824685 C1312.25341,855.669808 1312.08199,855.49839 1311.92711,855.312538 L1300,841 L1300,841 Z'
+  }))));
+});