antd-mobile 5.0.0-rc.7 → 5.0.0-rc.8

package/cjs/components/infinite-scroll/infinite-scroll.js

@@ -43,7 +43,7 @@ var InfiniteScroll = function InfiniteScroll(p) {
   });
   var elementRef = (0, _react.useRef)(null);
   var checkTimeoutRef = (0, _react.useRef)();
-  var check = (0, _ahooks.usePersistFn)(function () {
+  var check = (0, _ahooks.useMemoizedFn)(function () {
     window.clearTimeout(checkTimeoutRef.current);
     checkTimeoutRef.current = window.setTimeout(function () {
       if (!props.hasMore) return;

package/cjs/components/mask/mask.js

@@ -99,9 +99,10 @@ var Mask = function Mask(p) {
   var node = (0, _withStopPropagation.withStopPropagation)(props.stopPropagation, (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement(_web.animated.div, {
     className: classPrefix,
     ref: ref,
-    style: Object.assign(Object.assign({}, props.style), {
+    style: Object.assign(Object.assign({
       background: background,
-      opacity: opacity,
+      opacity: opacity
+    }, props.style), {
       display: active ? 'unset' : 'none'
     })
   }, props.onMaskClick && /*#__PURE__*/_react["default"].createElement("div", {

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

@@ -66,7 +66,7 @@ var NumberKeyboard = function NumberKeyboard(p) {
   }, [customKey, confirmText, randomOrder, randomOrder && visible]);
   var timeoutRef = (0, _react.useRef)(-1);
   var intervalRef = (0, _react.useRef)(-1);
-  var onDelete = (0, _ahooks.usePersistFn)(function () {
+  var onDelete = (0, _ahooks.useMemoizedFn)(function () {
     var _a;
 
     (_a = props.onDelete) === null || _a === void 0 ? void 0 : _a.call(props);

package/cjs/components/picker/picker.js

@@ -74,7 +74,7 @@ var Picker = /*#__PURE__*/(0, _react.memo)(function (p) {
       setInnerValue(value);
     }
   }, [value]);
-  var onChange = (0, _ahooks.usePersistFn)(function (val, ext) {
+  var onChange = (0, _ahooks.useMemoizedFn)(function (val, ext) {
     var _a;
 
     setInnerValue(val);

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

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _withDefaultProps = require("../../utils/with-default-props");
 
-var _column = require("./column");
+var _wheel = require("./wheel");
 
 var _useColumns = require("./use-columns");
 
@@ -74,7 +74,7 @@ var PickerView = /*#__PURE__*/(0, _react.memo)(function (p) {
   return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
     className: "" + classPrefix
   }, columns.map(function (column, index) {
-    return /*#__PURE__*/_react["default"].createElement(_column.Column, {
+    return /*#__PURE__*/_react["default"].createElement(_wheel.Wheel, {
       key: index,
       index: index,
       column: column,

package/{2x/es/components/picker-view/column.d.ts → cjs/components/picker-view/wheel.d.ts}

@@ -6,5 +6,5 @@ interface Props {
     value: PickerValue;
     onSelect: (value: PickerValue, index: number) => void;
 }
-export declare const Column: React.NamedExoticComponent<Props>;
+export declare const Wheel: React.NamedExoticComponent<Props>;
 export {};

package/{2x/cjs/components/picker-view/column.js → cjs/components/picker-view/wheel.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Column = void 0;
+exports.Wheel = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -26,7 +26,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 = /*#__PURE__*/(0, _react.memo)(function (props) {
+var Wheel = /*#__PURE__*/(0, _react.memo)(function (props) {
   var itemHeight = (0, _convertPx.convertPx)(34);
   var value = props.value,
       column = props.column;
@@ -83,7 +83,9 @@ var Column = /*#__PURE__*/(0, _react.memo)(function (props) {
     api.start({
       y: finalPosition
     });
-    onSelect(column[index].value);
+    var item = column[index];
+    if (!item) return;
+    onSelect(item.value);
   }
 
   var bind = (0, _react2.useDrag)(function (state) {
@@ -94,7 +96,7 @@ var Column = /*#__PURE__*/(0, _react.memo)(function (props) {
     if (state.last) {
       draggingRef.current = false;
       var position = state.offset[1] + state.velocity[1] * state.direction[1] * 50;
-      var targetIndex = -Math.round((0, _bound.bound)(position, min, max) / itemHeight);
+      var targetIndex = min < max ? -Math.round((0, _bound.bound)(position, min, max) / itemHeight) : 0;
       scrollSelect(targetIndex);
     } else {
       var _position = state.offset[1];
@@ -176,6 +178,7 @@ var Column = /*#__PURE__*/(0, _react.memo)(function (props) {
     }, item.label));
   })), renderAccessible());
 }, function (prev, next) {
+  if (prev.index !== next.index) return false;
   if (prev.value !== next.value) return false;
   if (prev.onSelect !== next.onSelect) return false;
 
@@ -185,5 +188,5 @@ var Column = /*#__PURE__*/(0, _react.memo)(function (props) {
 
   return true;
 });
-exports.Column = Column;
-Column.displayName = 'Column';
+exports.Wheel = Wheel;
+Wheel.displayName = 'Wheel';

package/cjs/components/radio/radio.css

@@ -50,7 +50,7 @@
   font-size: var(--icon-size);
 }
 .adm-radio-content {
-  flex: none;
+  flex: 0 1 auto;
   font-size: var(--font-size);
   padding-left: var(--gap);
 }

package/cjs/components/skeleton/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import './skeleton.less';
+export type { SkeletonProps, SkeletonTitleProps } from './skeleton';
+declare const _default: import("react").FC<import("./skeleton").SkeletonProps> & {
+    Title: import("react").FC<import("./skeleton").SkeletonTitleProps>;
+    Paragraph: import("react").FC<import("./skeleton").SkeletonParagraphProps>;
+};
+export default _default;

package/cjs/components/skeleton/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+require("./skeleton.css");
+
+var _skeleton2 = require("./skeleton");
+
+var _attachPropertiesToComponent = require("../../utils/attach-properties-to-component");
+
+var _default = (0, _attachPropertiesToComponent.attachPropertiesToComponent)(_skeleton2.Skeleton, {
+  Title: _skeleton2.SkeletonTitle,
+  Paragraph: _skeleton2.SkeletonParagraph
+});
+
+exports["default"] = _default;

package/cjs/components/skeleton/skeleton.css

@@ -0,0 +1,39 @@
+.adm-skeleton {
+  --width: 100%;
+  --height: 0;
+  --border-radius: 0;
+  background-color: rgba(190, 190, 190, 0.2);
+  border-radius: var(--border-radius);
+  width: var(--width);
+  height: var(--height);
+  display: block;
+}
+.adm-skeleton.adm-skeleton-animated {
+  background: linear-gradient(90deg, rgba(190, 190, 190, 0.2) 25%, rgba(129, 129, 129, 0.24) 37%, rgba(190, 190, 190, 0.2) 63%);
+  background-size: 400% 100%;
+  animation: adm-skeleton-loading 1.4s ease infinite;
+}
+.adm-skeleton.adm-skeleton-title {
+  --width: 45%;
+  --height: 32px;
+  --border-radius: 2px;
+  margin-bottom: 16px;
+  margin-top: 16px;
+}
+.adm-skeleton.adm-skeleton-paragraph-line {
+  --height: 18px;
+  --border-radius: 2px;
+  margin-top: 12px;
+  margin-bottom: 12px;
+}
+.adm-skeleton.adm-skeleton-paragraph-line:last-child {
+  --width: 65%;
+}
+@keyframes adm-skeleton-loading {
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0 50%;
+  }
+}

package/cjs/components/skeleton/skeleton.d.ts

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare type SkeletonProps = {
+    animated?: boolean;
+} & NativeProps<'--width' | '--height' | '--border-radius'>;
+export declare const Skeleton: FC<SkeletonProps>;
+export declare type SkeletonTitleProps = {
+    animated?: boolean;
+} & NativeProps;
+export declare const SkeletonTitle: FC<SkeletonTitleProps>;
+export declare type SkeletonParagraphProps = {
+    animated?: boolean;
+    lineCount?: number;
+} & NativeProps;
+export declare const SkeletonParagraph: FC<SkeletonParagraphProps>;

package/cjs/components/skeleton/skeleton.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SkeletonTitle = exports.SkeletonParagraph = exports.Skeleton = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _nativeProps = require("../../utils/native-props");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _generateIntArray = require("../../utils/generate-int-array");
+
+var _withDefaultProps = require("../../utils/with-default-props");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var classPrefix = 'adm-skeleton';
+
+var Skeleton = function Skeleton(props) {
+  var _classNames;
+
+  return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])(classPrefix, (_classNames = {}, _classNames[classPrefix + "-animated"] = props.animated, _classNames))
+  }));
+};
+
+exports.Skeleton = Skeleton;
+
+var SkeletonTitle = function SkeletonTitle(props) {
+  return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement(Skeleton, {
+    animated: props.animated,
+    className: classPrefix + "-title"
+  }));
+};
+
+exports.SkeletonTitle = SkeletonTitle;
+var defaultSkeletonParagraphProps = {
+  lineCount: 3
+};
+
+var SkeletonParagraph = function SkeletonParagraph(p) {
+  var props = (0, _withDefaultProps.mergeProps)(defaultSkeletonParagraphProps, p);
+  var keys = (0, _generateIntArray.generateIntArray)(1, props.lineCount);
+
+  var node = /*#__PURE__*/_react["default"].createElement("div", {
+    className: classPrefix + "-paragraph"
+  }, keys.map(function (key) {
+    return /*#__PURE__*/_react["default"].createElement(Skeleton, {
+      key: key,
+      animated: props.animated,
+      className: classPrefix + "-paragraph-line"
+    });
+  }));
+
+  return (0, _nativeProps.withNativeProps)(props, node);
+};
+
+exports.SkeletonParagraph = SkeletonParagraph;

package/cjs/components/stepper/stepper.d.ts

@@ -9,6 +9,7 @@ export declare type StepperProps = Pick<InputProps, 'onFocus' | 'onBlur'> & {
     step?: number;
     digits?: number;
     disabled?: boolean;
+    inputReadOnly?: boolean;
     onChange?: (value: number) => void;
 } & NativeProps<'--height' | '--input-width' | '--input-font-size' | '--border-radius' | '--border' | '--border-inner' | '--active-border' | '--button-font-size' | '--button-background-color' | '--button-width' | '--input-font-color' | '--button-text-color'>;
 export declare const Stepper: FC<StepperProps>;

package/cjs/components/stepper/stepper.js

@@ -43,7 +43,8 @@ var Stepper = function Stepper(p) {
   var disabled = props.disabled,
       step = props.step,
       max = props.max,
-      min = props.min;
+      min = props.min,
+      inputReadOnly = props.inputReadOnly;
 
   var _usePropsValue = (0, _usePropsValue2.usePropsValue)(props),
       value = _usePropsValue[0],
@@ -136,7 +137,8 @@ var Stepper = function Stepper(p) {
 
       setHasFocus(false);
       (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
-    }
+    },
+    readOnly: inputReadOnly
   }), /*#__PURE__*/_react["default"].createElement(_button["default"], {
     className: classPrefix + "-plus",
     onClick: handlePlus,

package/cjs/components/tab-bar/tab-bar.css

@@ -1,4 +1,4 @@
-.adm-tab-bar {
+.adm-tab-bar-wrap {
   display: flex;
   flex-wrap: nowrap;
   justify-content: flex-start;

package/cjs/components/tab-bar/tab-bar.d.ts

@@ -11,5 +11,6 @@ export declare type TabBarProps = {
     activeKey?: string | null;
     defaultActiveKey?: string | null;
     onChange?: (key: string) => void;
+    safeArea?: boolean;
 } & NativeProps;
 export declare const TabBar: FC<TabBarProps>;

package/cjs/components/tab-bar/tab-bar.js

@@ -11,8 +11,12 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _nativeProps = require("../../utils/native-props");
 
+var _withDefaultProps = require("../../utils/with-default-props");
+
 var _badge = _interopRequireDefault(require("../badge"));
 
+var _safeArea = _interopRequireDefault(require("../safe-area"));
+
 var _usePropsValue2 = require("../../utils/use-props-value");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -22,10 +26,15 @@ var TabBarItem = function TabBarItem() {
 };
 
 exports.TabBarItem = TabBarItem;
+var classPrefix = "adm-tab-bar";
+var defaultProps = {
+  safeArea: false
+};
 
-var TabBar = function TabBar(props) {
+var TabBar = function TabBar(p) {
   var _a;
 
+  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
   var firstActiveKey = null;
   var items = [];
 
@@ -50,29 +59,33 @@ var TabBar = function TabBar(props) {
       setActiveKey = _usePropsValue[1];
 
   return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
-    className: 'adm-tab-bar'
+    className: classPrefix
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: classPrefix + "-wrap"
   }, items.map(function (item) {
+    var _classNames;
+
     var active = item.key === activeKey;
 
     function renderContent() {
       var iconElement = item.props.icon && /*#__PURE__*/_react["default"].createElement("div", {
-        className: 'adm-tab-bar-item-icon'
+        className: classPrefix + "-item-icon"
       }, typeof item.props.icon === 'function' ? item.props.icon(active) : item.props.icon);
 
       var titleElement = item.props.title && /*#__PURE__*/_react["default"].createElement("div", {
-        className: 'adm-tab-bar-item-title'
+        className: classPrefix + "-item-title"
       }, item.props.title);
 
       if (iconElement) {
         return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_badge["default"], {
           content: item.props.badge,
-          className: 'adm-tab-bar-icon-badge'
+          className: classPrefix + "-icon-badge"
         }, iconElement), titleElement);
       } else if (titleElement) {
-        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_badge["default"], {
+        return /*#__PURE__*/_react["default"].createElement(_badge["default"], {
           content: item.props.badge,
-          className: 'adm-tab-bar-title-badge'
-        }, titleElement));
+          className: classPrefix + "-title-badge"
+        }, titleElement);
       }
 
       return null;
@@ -85,10 +98,10 @@ var TabBar = function TabBar(props) {
         if (key === undefined || key === null) return;
         setActiveKey(key.toString());
       },
-      className: (0, _classnames["default"])('adm-tab-bar-item', {
-        'adm-tab-bar-item-active': active
-      })
+      className: (0, _classnames["default"])(classPrefix + "-item", (_classNames = {}, _classNames[classPrefix + "-item-active"] = active, _classNames))
     }, renderContent()));
+  })), props.safeArea && /*#__PURE__*/_react["default"].createElement(_safeArea["default"], {
+    position: 'bottom'
   })));
 };
 

package/cjs/index.d.ts

@@ -41,6 +41,7 @@ export { default as NavBar } from './components/nav-bar';
 export { default as NoticeBar } from './components/notice-bar';
 export { default as NumberKeyboard } from './components/number-keyboard';
 export { default as PageIndicator } from './components/page-indicator';
+export { default as PasscodeInput } from './components/passcode-input';
 export { default as Picker } from './components/picker';
 export { default as PickerView } from './components/picker-view';
 export { default as Popover } from './components/popover';
@@ -57,6 +58,7 @@ export { default as Search } from './components/search-bar';
 export { default as SearchBar } from './components/search-bar';
 export { default as Selector } from './components/selector';
 export { default as SideBar } from './components/side-bar';
+export { default as Skeleton } from './components/skeleton';
 export { default as Slider } from './components/slider';
 export { default as Space } from './components/space';
 export { default as Stepper } from './components//stepper';
@@ -72,4 +74,3 @@ export { default as Toast } from './components/toast';
 export { default as TreeSelect } from './components/tree-select';
 export { default as VirtualInput } from './components/virtual-input';
 export { default as WaterMark } from './components/water-mark';
-export { default as PasscodeInput } from './components/passcode-input';

package/cjs/index.js

@@ -351,6 +351,12 @@ Object.defineProperty(exports, "SideBar", {
     return _sideBar["default"];
   }
 });
+Object.defineProperty(exports, "Skeleton", {
+  enumerable: true,
+  get: function get() {
+    return _skeleton["default"];
+  }
+});
 Object.defineProperty(exports, "Slider", {
   enumerable: true,
   get: function get() {
@@ -532,6 +538,8 @@ var _numberKeyboard = _interopRequireDefault(require("./components/number-keyboa
 
 var _pageIndicator = _interopRequireDefault(require("./components/page-indicator"));
 
+var _passcodeInput = _interopRequireDefault(require("./components/passcode-input"));
+
 var _picker = _interopRequireDefault(require("./components/picker"));
 
 var _pickerView = _interopRequireDefault(require("./components/picker-view"));
@@ -562,6 +570,8 @@ var _selector = _interopRequireDefault(require("./components/selector"));
 
 var _sideBar = _interopRequireDefault(require("./components/side-bar"));
 
+var _skeleton = _interopRequireDefault(require("./components/skeleton"));
+
 var _slider = _interopRequireDefault(require("./components/slider"));
 
 var _space = _interopRequireDefault(require("./components/space"));
@@ -592,8 +602,6 @@ var _virtualInput = _interopRequireDefault(require("./components/virtual-input")
 
 var _waterMark = _interopRequireDefault(require("./components/water-mark"));
 
-var _passcodeInput = _interopRequireDefault(require("./components/passcode-input"));
-
 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); }

package/cjs/utils/use-mutation-effect.js

@@ -10,7 +10,7 @@ var _react = require("react");
 var _ahooks = require("ahooks");
 
 function useMutationEffect(effect, targetRef, options) {
-  var fn = (0, _ahooks.usePersistFn)(effect);
+  var fn = (0, _ahooks.useMemoizedFn)(effect);
   (0, _react.useEffect)(function () {
     var observer = new MutationObserver(function () {
       fn();

package/cjs/utils/use-props-value.js

@@ -20,7 +20,7 @@ function usePropsValue(options) {
     stateRef.current = value;
   }
 
-  var setState = (0, _ahooks.usePersistFn)(function (v) {
+  var setState = (0, _ahooks.useMemoizedFn)(function (v) {
     if (value === undefined) {
       stateRef.current = v;
       update();

package/cjs/utils/use-resize-effect.js

@@ -10,7 +10,7 @@ var _react = require("react");
 var _ahooks = require("ahooks");
 
 function useResizeEffect(effect, targetRef) {
-  var fn = (0, _ahooks.usePersistFn)(effect);
+  var fn = (0, _ahooks.useMemoizedFn)(effect);
   (0, _react.useLayoutEffect)(function () {
     var target = targetRef.current;
     if (!target) return;

package/es/components/checkbox/checkbox.css

@@ -67,7 +67,7 @@
   background-color: currentColor;
 }
 .adm-checkbox-content {
-  flex: none;
+  flex: 0 1 auto;
   font-size: var(--font-size);
   padding-left: var(--gap);
 }

package/es/components/date-picker/date-picker.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo } from 'react';
-import { usePersistFn } from 'ahooks';
+import { useMemoizedFn } from 'ahooks';
 import Picker from '../picker';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
@@ -31,7 +31,7 @@ export var DatePicker = function DatePicker(p) {
   var onConfirm = useCallback(function (val) {
     setValue(convertStringArrayToDate(val, props.precision));
   }, [setValue, props.precision]);
-  var onSelect = usePersistFn(function (val) {
+  var onSelect = useMemoizedFn(function (val) {
     var _a;
 
     var date = convertStringArrayToDate(val, props.precision);

package/es/components/image/lazy-detector.js

@@ -2,7 +2,10 @@ import React, { useEffect, useRef } from 'react';
 import { useInViewport } from 'ahooks';
 export var LazyDetector = function LazyDetector(props) {
   var ref = useRef(null);
-  var inViewport = useInViewport(ref);
+
+  var _useInViewport = useInViewport(ref),
+      inViewport = _useInViewport[0];
+
   useEffect(function () {
     if (inViewport) {
       props.onActive();

package/es/components/image-uploader/image-uploader.js

@@ -36,7 +36,7 @@ import { mergeProps } from '../../utils/with-default-props';
 import ImageViewer from '../image-viewer';
 import PreviewItem from './preview-item';
 import { usePropsValue } from '../../utils/use-props-value';
-import { usePersistFn } from 'ahooks';
+import { useMemoizedFn } from 'ahooks';
 import Space from '../space';
 import { withNativeProps } from '../../utils/native-props';
 var classPrefix = "adm-image-uploader";
@@ -56,7 +56,7 @@ export var ImageUploader = function ImageUploader(p) {
       value = _usePropsValue[0],
       setValue = _usePropsValue[1];
 
-  var updateValue = usePersistFn(function (updater) {
+  var updateValue = useMemoizedFn(function (updater) {
     setValue(updater(value));
   });
 
@@ -167,9 +167,15 @@ export var ImageUploader = function ImageUploader(p) {
                             });
                           });
                           updateValue(function (prev) {
-                            return [].concat(prev, [{
+                            var newVal = {
                               url: result.url
-                            }]);
+                            };
+
+                            if (result.extra !== undefined) {
+                              newVal.extra = result.extra;
+                            }
+
+                            return [].concat(prev, [newVal]);
                           });
                           _context.next = 12;
                           break;

package/es/components/image-viewer/slide.js

@@ -92,11 +92,6 @@ export var Slide = function Slide(props) {
       }
     },
     pinch: {
-      transform: function transform(_ref) {
-        var d = _ref[0],
-            a = _ref[1];
-        return [d < 0 ? d * 0.5 : d * 2, 0];
-      },
       from: function from() {
         return [zoom.get(), 0];
       }

package/es/components/index-bar/index-bar.css

@@ -52,7 +52,7 @@
 }
 .adm-index-bar-sidebar-row {
   cursor: pointer;
-  width: 100%;
+  width: auto;
   text-align: right;
   position: relative;
   padding: 0 12px;

package/es/components/infinite-scroll/infinite-scroll.js

@@ -1,6 +1,6 @@
 import { mergeProps } from '../../utils/with-default-props';
 import React, { useEffect, useRef } from 'react';
-import { useLockFn, usePersistFn } from 'ahooks';
+import { useLockFn, useMemoizedFn } from 'ahooks';
 import { withNativeProps } from '../../utils/native-props';
 import { getScrollParent } from '../../utils/get-scroll-parent';
 import Loading from '../loading';
@@ -25,7 +25,7 @@ export var InfiniteScroll = function InfiniteScroll(p) {
   });
   var elementRef = useRef(null);
   var checkTimeoutRef = useRef();
-  var check = usePersistFn(function () {
+  var check = useMemoizedFn(function () {
     window.clearTimeout(checkTimeoutRef.current);
     checkTimeoutRef.current = window.setTimeout(function () {
       if (!props.hasMore) return;

package/es/components/mask/mask.js

@@ -77,9 +77,10 @@ export var Mask = function Mask(p) {
   var node = withStopPropagation(props.stopPropagation, withNativeProps(props, /*#__PURE__*/React.createElement(animated.div, {
     className: classPrefix,
     ref: ref,
-    style: Object.assign(Object.assign({}, props.style), {
+    style: Object.assign(Object.assign({
       background: background,
-      opacity: opacity,
+      opacity: opacity
+    }, props.style), {
       display: active ? 'unset' : 'none'
     })
   }, props.onMaskClick && /*#__PURE__*/React.createElement("div", {