antd-mobile 5.0.0-rc.5 → 5.0.0-rc.6

package/2x/cjs/components/dialog/dialog.d.ts

@@ -5,6 +5,7 @@ import { PropagationEvent } from '../../utils/with-stop-propagation';
 import { NativeProps } from '../../utils/native-props';
 export declare type DialogProps = {
     afterClose?: () => void;
+    afterShow?: () => void;
     image?: string;
     header?: ReactNode;
     title?: ReactNode;

package/2x/cjs/components/dialog/dialog.js

@@ -95,13 +95,15 @@ var Dialog = function Dialog(p) {
       setActive(true);
     },
     onRest: function onRest() {
-      var _a;
+      var _a, _b;
 
       if (unmountedRef.current) return;
       setActive(props.visible);
 
-      if (!props.visible) {
-        (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
+      if (props.visible) {
+        (_a = props.afterShow) === null || _a === void 0 ? void 0 : _a.call(props);
+      } else {
+        (_b = props.afterClose) === null || _b === void 0 ? void 0 : _b.call(props);
       }
     }
   });

package/2x/cjs/components/modal/modal.d.ts

@@ -5,6 +5,7 @@ import { PropagationEvent } from '../../utils/with-stop-propagation';
 import { NativeProps } from '../../utils/native-props';
 export declare type ModalProps = {
     afterClose?: () => void;
+    afterShow?: () => void;
     image?: string;
     header?: ReactNode;
     title?: ReactNode;

package/2x/cjs/components/modal/modal.js

@@ -95,13 +95,15 @@ var Modal = function Modal(p) {
       setActive(true);
     },
     onRest: function onRest() {
-      var _a;
+      var _a, _b;
 
       if (unmountedRef.current) return;
       setActive(props.visible);
 
-      if (!props.visible) {
-        (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
+      if (props.visible) {
+        (_a = props.afterShow) === null || _a === void 0 ? void 0 : _a.call(props);
+      } else {
+        (_b = props.afterClose) === null || _b === void 0 ? void 0 : _b.call(props);
       }
     }
   });

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

@@ -65,7 +65,7 @@ var Picker = /*#__PURE__*/(0, _react.memo)(function (p) {
       setInnerValue = _useState[1];
 
   (0, _react.useEffect)(function () {
-    if (!props.visible) {
+    if (innerValue !== value) {
       setInnerValue(value);
     }
   }, [props.visible]);
@@ -133,4 +133,5 @@ var Picker = /*#__PURE__*/(0, _react.memo)(function (p) {
 
   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));
 });
-exports.Picker = Picker;
+exports.Picker = Picker;
+Picker.displayName = 'Picker';

package/2x/cjs/components/picker-view/column.d.ts

@@ -1,9 +1,10 @@
-import { FC } from 'react';
+import React from 'react';
 import { PickerColumnItem, PickerValue } from './index';
 interface Props {
+    index: number;
     column: PickerColumnItem[];
     value: PickerValue;
-    onSelect: (value: PickerValue) => void;
+    onSelect: (value: PickerValue, index: number) => void;
 }
-export declare const Column: FC<Props>;
+export declare const Column: React.NamedExoticComponent<Props>;
 export {};

package/2x/cjs/components/picker-view/column.js

@@ -17,18 +17,24 @@ var _rubberband = require("../../utils/rubberband");
 
 var _bound = require("../../utils/bound");
 
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+
+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 _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-picker-view";
-
-var Column = function Column(props) {
+var Column = /*#__PURE__*/(0, _react.memo)(function (props) {
   var itemHeight = (0, _convertPx.convertPx)(34);
   var value = props.value,
-      onSelect = props.onSelect,
       column = props.column;
 
+  function onSelect(val) {
+    props.onSelect(val, props.index);
+  }
+
   var _useSpring = (0, _web.useSpring)(function () {
     return {
       from: {
@@ -54,20 +60,20 @@ var Column = function Column(props) {
     var finalPosition = targetIndex * -itemHeight;
     api.start({
       y: finalPosition,
-      immediate: y.idle
+      immediate: y.goal !== finalPosition
     });
   }, [value, column]);
   (0, _react.useLayoutEffect)(function () {
     if (column.length === 0) {
       if (value !== null) {
-        props.onSelect(null);
+        onSelect(null);
       }
     } else {
       if (!column.some(function (item) {
         return item.value === value;
       })) {
         var firstItem = column[0];
-        props.onSelect(firstItem.value);
+        onSelect(firstItem.value);
       }
     }
   }, [column, value]);
@@ -109,8 +115,6 @@ var Column = function Column(props) {
   var selectedIndex = null;
 
   function renderAccessible() {
-    console.log('selectedIndex', selectedIndex);
-
     if (selectedIndex === null) {
       return null;
     }
@@ -171,6 +175,15 @@ var Column = function Column(props) {
       className: classPrefix + "-column-item-label"
     }, item.label));
   })), renderAccessible());
-};
+}, function (prev, next) {
+  if (prev.value !== next.value) return false;
+  if (prev.onSelect !== next.onSelect) return false;
+
+  if (!(0, _isEqual["default"])(prev.column, next.column)) {
+    return false;
+  }
 
-exports.Column = Column;
+  return true;
+});
+exports.Column = Column;
+Column.displayName = 'Column';

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

@@ -5,6 +5,7 @@
   display: flex;
   position: relative;
   overflow: hidden;
+  background: var(--adm-color-white);
 }
 
 .adm-picker-view-column {

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

@@ -50,31 +50,36 @@ var PickerView = /*#__PURE__*/(0, _react.memo)(function (p) {
 
     if (props.value === innerValue) return;
     setInnerValue(props.value);
-  }, [props.value]); // Reset `innerValue` after 1s in case user does not update `value` when `onChange` is called
-
-  (0, _ahooks.useDebounceEffect)(function () {
-    if (props.value !== undefined && props.value !== innerValue) {
-      setInnerValue(props.value);
-    }
-  }, [props.value, innerValue], {
-    wait: 1000,
-    leading: false,
-    trailing: true
-  });
+  }, [props.value]);
+  (0, _react.useEffect)(function () {
+    if (props.value === innerValue) return;
+    var timeout = window.setTimeout(function () {
+      if (props.value !== undefined && props.value !== innerValue) {
+        setInnerValue(props.value);
+      }
+    }, 1000);
+    return function () {
+      window.clearTimeout(timeout);
+    };
+  }, [props.value, innerValue]);
   var columns = (0, _useColumns.useColumns)(props.columns, innerValue);
   var generateValueExtend = (0, _usePickerValueExtend.usePickerValueExtend)(columns);
+  var handleSelect = (0, _react.useCallback)(function (val, index) {
+    setInnerValue(function (prev) {
+      var next = [].concat(prev);
+      next[index] = val;
+      return next;
+    });
+  }, []);
   return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
     className: "" + classPrefix
   }, columns.map(function (column, index) {
     return /*#__PURE__*/_react["default"].createElement(_column.Column, {
       key: index,
+      index: index,
       column: column,
       value: innerValue[index],
-      onSelect: function onSelect(val) {
-        var nextInnerValue = [].concat(innerValue);
-        nextInnerValue[index] = val;
-        setInnerValue(nextInnerValue);
-      }
+      onSelect: handleSelect
     });
   }), /*#__PURE__*/_react["default"].createElement("div", {
     className: classPrefix + "-mask"
@@ -86,4 +91,5 @@ var PickerView = /*#__PURE__*/(0, _react.memo)(function (p) {
     className: classPrefix + "-mask-bottom"
   }))));
 });
-exports.PickerView = PickerView;
+exports.PickerView = PickerView;
+PickerView.displayName = 'PickerView';

package/2x/cjs/components/progress-bar/progress-bar.css

@@ -5,6 +5,7 @@
 
 .adm-progress-bar-trail {
   background: #e5e5e5;
+  overflow: hidden;
   height: var(--track-width);
   border-radius: var(--track-width);
 }

package/2x/cjs/components/virtual-input/virtual-input.js

@@ -53,9 +53,7 @@ var VirtualInput = /*#__PURE__*/(0, _react.forwardRef)(function (p, ref) {
 
     var content = contentRef.current;
     if (!content) return;
-    content.scrollTo({
-      left: content.clientWidth
-    });
+    content.scrollLeft = content.clientWidth;
   }
 
   (0, _react.useLayoutEffect)(function () {

package/2x/es/components/dialog/dialog.d.ts

@@ -5,6 +5,7 @@ import { PropagationEvent } from '../../utils/with-stop-propagation';
 import { NativeProps } from '../../utils/native-props';
 export declare type DialogProps = {
     afterClose?: () => void;
+    afterShow?: () => void;
     image?: string;
     header?: ReactNode;
     title?: ReactNode;

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

@@ -68,13 +68,15 @@ export var Dialog = function Dialog(p) {
       setActive(true);
     },
     onRest: function onRest() {
-      var _a;
+      var _a, _b;
 
       if (unmountedRef.current) return;
       setActive(props.visible);
 
-      if (!props.visible) {
-        (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
+      if (props.visible) {
+        (_a = props.afterShow) === null || _a === void 0 ? void 0 : _a.call(props);
+      } else {
+        (_b = props.afterClose) === null || _b === void 0 ? void 0 : _b.call(props);
       }
     }
   });

package/2x/es/components/modal/modal.d.ts

@@ -5,6 +5,7 @@ import { PropagationEvent } from '../../utils/with-stop-propagation';
 import { NativeProps } from '../../utils/native-props';
 export declare type ModalProps = {
     afterClose?: () => void;
+    afterShow?: () => void;
     image?: string;
     header?: ReactNode;
     title?: ReactNode;

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

@@ -68,13 +68,15 @@ export var Modal = function Modal(p) {
       setActive(true);
     },
     onRest: function onRest() {
-      var _a;
+      var _a, _b;
 
       if (unmountedRef.current) return;
       setActive(props.visible);
 
-      if (!props.visible) {
-        (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
+      if (props.visible) {
+        (_a = props.afterShow) === null || _a === void 0 ? void 0 : _a.call(props);
+      } else {
+        (_b = props.afterClose) === null || _b === void 0 ? void 0 : _b.call(props);
       }
     }
   });

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

@@ -42,7 +42,7 @@ export var Picker = /*#__PURE__*/memo(function (p) {
       setInnerValue = _useState[1];
 
   useEffect(function () {
-    if (!props.visible) {
+    if (innerValue !== value) {
       setInnerValue(value);
     }
   }, [props.visible]);
@@ -107,4 +107,5 @@ export var Picker = /*#__PURE__*/memo(function (p) {
     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));
-});
+});
+Picker.displayName = 'Picker';

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

@@ -1,9 +1,10 @@
-import { FC } from 'react';
+import React from 'react';
 import { PickerColumnItem, PickerValue } from './index';
 interface Props {
+    index: number;
     column: PickerColumnItem[];
     value: PickerValue;
-    onSelect: (value: PickerValue) => void;
+    onSelect: (value: PickerValue, index: number) => void;
 }
-export declare const Column: FC<Props>;
+export declare const Column: React.NamedExoticComponent<Props>;
 export {};

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

@@ -1,16 +1,20 @@
-import React, { useLayoutEffect, useRef } from 'react';
+import React, { memo, useLayoutEffect, 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 Column = function Column(props) {
+export var Column = /*#__PURE__*/memo(function (props) {
   var itemHeight = convertPx(34);
   var value = props.value,
-      onSelect = props.onSelect,
       column = props.column;
 
+  function onSelect(val) {
+    props.onSelect(val, props.index);
+  }
+
   var _useSpring = useSpring(function () {
     return {
       from: {
@@ -36,20 +40,20 @@ export var Column = function Column(props) {
     var finalPosition = targetIndex * -itemHeight;
     api.start({
       y: finalPosition,
-      immediate: y.idle
+      immediate: y.goal !== finalPosition
     });
   }, [value, column]);
   useLayoutEffect(function () {
     if (column.length === 0) {
       if (value !== null) {
-        props.onSelect(null);
+        onSelect(null);
       }
     } else {
       if (!column.some(function (item) {
         return item.value === value;
       })) {
         var firstItem = column[0];
-        props.onSelect(firstItem.value);
+        onSelect(firstItem.value);
       }
     }
   }, [column, value]);
@@ -91,8 +95,6 @@ export var Column = function Column(props) {
   var selectedIndex = null;
 
   function renderAccessible() {
-    console.log('selectedIndex', selectedIndex);
-
     if (selectedIndex === null) {
       return null;
     }
@@ -153,4 +155,14 @@ export var Column = function Column(props) {
       className: classPrefix + "-column-item-label"
     }, item.label));
   })), renderAccessible());
-};
+}, function (prev, next) {
+  if (prev.value !== next.value) return false;
+  if (prev.onSelect !== next.onSelect) return false;
+
+  if (!isEqual(prev.column, next.column)) {
+    return false;
+  }
+
+  return true;
+});
+Column.displayName = 'Column';

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

@@ -5,6 +5,7 @@
   display: flex;
   position: relative;
   overflow: hidden;
+  background: var(--adm-color-white);
 }
 
 .adm-picker-view-column {

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

@@ -1,4 +1,4 @@
-import React, { memo, useEffect, useState } from 'react';
+import React, { memo, useCallback, useEffect, useState } from 'react';
 import { mergeProps } from '../../utils/with-default-props';
 import { Column } from './column';
 import { useColumns } from './use-columns';
@@ -32,31 +32,36 @@ export var PickerView = /*#__PURE__*/memo(function (p) {
 
     if (props.value === innerValue) return;
     setInnerValue(props.value);
-  }, [props.value]); // Reset `innerValue` after 1s in case user does not update `value` when `onChange` is called
-
-  useDebounceEffect(function () {
-    if (props.value !== undefined && props.value !== innerValue) {
-      setInnerValue(props.value);
-    }
-  }, [props.value, innerValue], {
-    wait: 1000,
-    leading: false,
-    trailing: true
-  });
+  }, [props.value]);
+  useEffect(function () {
+    if (props.value === innerValue) return;
+    var timeout = window.setTimeout(function () {
+      if (props.value !== undefined && props.value !== innerValue) {
+        setInnerValue(props.value);
+      }
+    }, 1000);
+    return function () {
+      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);
+      next[index] = val;
+      return next;
+    });
+  }, []);
   return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
     className: "" + classPrefix
   }, columns.map(function (column, index) {
     return /*#__PURE__*/React.createElement(Column, {
       key: index,
+      index: index,
       column: column,
       value: innerValue[index],
-      onSelect: function onSelect(val) {
-        var nextInnerValue = [].concat(innerValue);
-        nextInnerValue[index] = val;
-        setInnerValue(nextInnerValue);
-      }
+      onSelect: handleSelect
     });
   }), /*#__PURE__*/React.createElement("div", {
     className: classPrefix + "-mask"
@@ -67,4 +72,5 @@ export var PickerView = /*#__PURE__*/memo(function (p) {
   }), /*#__PURE__*/React.createElement("div", {
     className: classPrefix + "-mask-bottom"
   }))));
-});
+});
+PickerView.displayName = 'PickerView';

package/2x/es/components/progress-bar/progress-bar.css

@@ -5,6 +5,7 @@
 
 .adm-progress-bar-trail {
   background: #e5e5e5;
+  overflow: hidden;
   height: var(--track-width);
   border-radius: var(--track-width);
 }

package/2x/es/components/virtual-input/virtual-input.js

@@ -34,9 +34,7 @@ export var VirtualInput = /*#__PURE__*/forwardRef(function (p, ref) {
 
     var content = contentRef.current;
     if (!content) return;
-    content.scrollTo({
-      left: content.clientWidth
-    });
+    content.scrollLeft = content.clientWidth;
   }
 
   useLayoutEffect(function () {

package/2x/package.json

@@ -1,10 +1,10 @@
 {
   "name": "antd-mobile",
-  "version": "5.0.0-rc.5",
+  "version": "5.0.0-rc.6",
   "dependencies": {
     "@react-spring/web": "^9.3.1",
     "@types/resize-observer-browser": "^0.1.6",
-    "@use-gesture/react": "^10.2.2",
+    "@use-gesture/react": "^10.2.4",
     "ahooks": "^2.10.14",
     "antd-mobile-icons": "^0.2.2",
     "antd-mobile-v5-count": "^1.0.1",

package/cjs/components/dialog/dialog.d.ts

@@ -5,6 +5,7 @@ import { PropagationEvent } from '../../utils/with-stop-propagation';
 import { NativeProps } from '../../utils/native-props';
 export declare type DialogProps = {
     afterClose?: () => void;
+    afterShow?: () => void;
     image?: string;
     header?: ReactNode;
     title?: ReactNode;

package/cjs/components/dialog/dialog.js

@@ -95,13 +95,15 @@ var Dialog = function Dialog(p) {
       setActive(true);
     },
     onRest: function onRest() {
-      var _a;
+      var _a, _b;
 
       if (unmountedRef.current) return;
       setActive(props.visible);
 
-      if (!props.visible) {
-        (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
+      if (props.visible) {
+        (_a = props.afterShow) === null || _a === void 0 ? void 0 : _a.call(props);
+      } else {
+        (_b = props.afterClose) === null || _b === void 0 ? void 0 : _b.call(props);
       }
     }
   });

package/cjs/components/modal/modal.d.ts

@@ -5,6 +5,7 @@ import { PropagationEvent } from '../../utils/with-stop-propagation';
 import { NativeProps } from '../../utils/native-props';
 export declare type ModalProps = {
     afterClose?: () => void;
+    afterShow?: () => void;
     image?: string;
     header?: ReactNode;
     title?: ReactNode;

package/cjs/components/modal/modal.js

@@ -95,13 +95,15 @@ var Modal = function Modal(p) {
       setActive(true);
     },
     onRest: function onRest() {
-      var _a;
+      var _a, _b;
 
       if (unmountedRef.current) return;
       setActive(props.visible);
 
-      if (!props.visible) {
-        (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
+      if (props.visible) {
+        (_a = props.afterShow) === null || _a === void 0 ? void 0 : _a.call(props);
+      } else {
+        (_b = props.afterClose) === null || _b === void 0 ? void 0 : _b.call(props);
       }
     }
   });

package/cjs/components/picker/picker.js

@@ -65,7 +65,7 @@ var Picker = /*#__PURE__*/(0, _react.memo)(function (p) {
       setInnerValue = _useState[1];
 
   (0, _react.useEffect)(function () {
-    if (!props.visible) {
+    if (innerValue !== value) {
       setInnerValue(value);
     }
   }, [props.visible]);
@@ -133,4 +133,5 @@ var Picker = /*#__PURE__*/(0, _react.memo)(function (p) {
 
   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));
 });
-exports.Picker = Picker;
+exports.Picker = Picker;
+Picker.displayName = 'Picker';

package/cjs/components/picker-view/column.d.ts

@@ -1,9 +1,10 @@
-import { FC } from 'react';
+import React from 'react';
 import { PickerColumnItem, PickerValue } from './index';
 interface Props {
+    index: number;
     column: PickerColumnItem[];
     value: PickerValue;
-    onSelect: (value: PickerValue) => void;
+    onSelect: (value: PickerValue, index: number) => void;
 }
-export declare const Column: FC<Props>;
+export declare const Column: React.NamedExoticComponent<Props>;
 export {};