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

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

@@ -6,7 +6,7 @@ import { shuffle } from '../../utils/shuffle';
 import Popup from '../popup';
 import { withNativeProps } from '../../utils/native-props';
 import SafeArea from '../safe-area';
-import { usePersistFn } from 'ahooks';
+import { useMemoizedFn } from 'ahooks';
 var classPrefix = 'adm-number-keyboard';
 var defaultProps = {
   defaultVisible: false,
@@ -43,7 +43,7 @@ export var NumberKeyboard = function NumberKeyboard(p) {
   }, [customKey, confirmText, randomOrder, randomOrder && visible]);
   var timeoutRef = useRef(-1);
   var intervalRef = useRef(-1);
-  var onDelete = usePersistFn(function () {
+  var onDelete = useMemoizedFn(function () {
     var _a;
 
     (_a = props.onDelete) === null || _a === void 0 ? void 0 : _a.call(props);

package/es/components/picker/picker.js

@@ -7,7 +7,7 @@ import PickerView from '../picker-view';
 import { useColumns } from '../picker-view/use-columns';
 import { useConfig } from '../config-provider';
 import { usePickerValueExtend } from '../picker-view/use-picker-value-extend';
-import { usePersistFn } from 'ahooks';
+import { useMemoizedFn } from 'ahooks';
 var classPrefix = "adm-picker";
 var defaultProps = {
   defaultValue: []
@@ -51,7 +51,7 @@ export var Picker = /*#__PURE__*/memo(function (p) {
       setInnerValue(value);
     }
   }, [value]);
-  var onChange = usePersistFn(function (val, ext) {
+  var onChange = useMemoizedFn(function (val, ext) {
     var _a;
 
     setInnerValue(val);

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

@@ -1,6 +1,6 @@
 import React, { memo, useCallback, useEffect, useState } from 'react';
 import { mergeProps } from '../../utils/with-default-props';
-import { Column } from './column';
+import { Wheel } from './wheel';
 import { useColumns } from './use-columns';
 import { withNativeProps } from '../../utils/native-props';
 import { usePickerValueExtend } from './use-picker-value-extend';
@@ -56,7 +56,7 @@ export var PickerView = /*#__PURE__*/memo(function (p) {
   return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
     className: "" + classPrefix
   }, columns.map(function (column, index) {
-    return /*#__PURE__*/React.createElement(Column, {
+    return /*#__PURE__*/React.createElement(Wheel, {
       key: index,
       index: index,
       column: column,

package/es/components/picker-view/{column.d.ts → 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/es/components/picker-view/column.js → es/components/picker-view/wheel.js}

@@ -6,7 +6,7 @@ import { rubberbandIfOutOfBounds } from '../../utils/rubberband';
 import { bound } from '../../utils/bound';
 import isEqual from 'lodash/isEqual';
 var classPrefix = "adm-picker-view";
-export var Column = /*#__PURE__*/memo(function (props) {
+export var Wheel = /*#__PURE__*/memo(function (props) {
   var itemHeight = convertPx(34);
   var value = props.value,
       column = props.column;
@@ -63,7 +63,9 @@ export var Column = /*#__PURE__*/memo(function (props) {
     api.start({
       y: finalPosition
     });
-    onSelect(column[index].value);
+    var item = column[index];
+    if (!item) return;
+    onSelect(item.value);
   }
 
   var bind = useDrag(function (state) {
@@ -74,7 +76,7 @@ export var Column = /*#__PURE__*/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(bound(position, min, max) / itemHeight);
+      var targetIndex = min < max ? -Math.round(bound(position, min, max) / itemHeight) : 0;
       scrollSelect(targetIndex);
     } else {
       var _position = state.offset[1];
@@ -156,6 +158,7 @@ export var Column = /*#__PURE__*/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;
 
@@ -165,4 +168,4 @@ export var Column = /*#__PURE__*/memo(function (props) {
 
   return true;
 });
-Column.displayName = 'Column';
+Wheel.displayName = 'Wheel';

package/es/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/es/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/es/components/skeleton/index.js

@@ -0,0 +1,7 @@
+import "./skeleton.css";
+import { Skeleton, SkeletonParagraph, SkeletonTitle } from './skeleton';
+import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
+export default attachPropertiesToComponent(Skeleton, {
+  Title: SkeletonTitle,
+  Paragraph: SkeletonParagraph
+});

package/es/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/es/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/es/components/skeleton/skeleton.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { withNativeProps } from '../../utils/native-props';
+import classNames from 'classnames';
+import { generateIntArray } from '../../utils/generate-int-array';
+import { mergeProps } from '../../utils/with-default-props';
+var classPrefix = 'adm-skeleton';
+export var Skeleton = function Skeleton(props) {
+  var _classNames;
+
+  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+    className: classNames(classPrefix, (_classNames = {}, _classNames[classPrefix + "-animated"] = props.animated, _classNames))
+  }));
+};
+export var SkeletonTitle = function SkeletonTitle(props) {
+  return withNativeProps(props, /*#__PURE__*/React.createElement(Skeleton, {
+    animated: props.animated,
+    className: classPrefix + "-title"
+  }));
+};
+var defaultSkeletonParagraphProps = {
+  lineCount: 3
+};
+export var SkeletonParagraph = function SkeletonParagraph(p) {
+  var props = mergeProps(defaultSkeletonParagraphProps, p);
+  var keys = generateIntArray(1, props.lineCount);
+  var node = /*#__PURE__*/React.createElement("div", {
+    className: classPrefix + "-paragraph"
+  }, keys.map(function (key) {
+    return /*#__PURE__*/React.createElement(Skeleton, {
+      key: key,
+      animated: props.animated,
+      className: classPrefix + "-paragraph-line"
+    });
+  }));
+  return withNativeProps(props, node);
+};

package/es/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/es/components/stepper/stepper.js

@@ -20,7 +20,8 @@ export 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 = usePropsValue(props),
       value = _usePropsValue[0],
@@ -113,7 +114,8 @@ export var Stepper = function Stepper(p) {
 
       setHasFocus(false);
       (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
-    }
+    },
+    readOnly: inputReadOnly
   }), /*#__PURE__*/React.createElement(Button, {
     className: classPrefix + "-plus",
     onClick: handlePlus,

package/es/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/es/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/es/components/tab-bar/tab-bar.js

@@ -1,14 +1,21 @@
 import React from 'react';
 import classNames from 'classnames';
 import { withNativeProps } from '../../utils/native-props';
+import { mergeProps } from '../../utils/with-default-props';
 import Badge from '../badge';
+import SafeArea from '../safe-area';
 import { usePropsValue } from '../../utils/use-props-value';
 export var TabBarItem = function TabBarItem() {
   return null;
 };
-export var TabBar = function TabBar(props) {
+var classPrefix = "adm-tab-bar";
+var defaultProps = {
+  safeArea: false
+};
+export var TabBar = function TabBar(p) {
   var _a;
 
+  var props = mergeProps(defaultProps, p);
   var firstActiveKey = null;
   var items = [];
   React.Children.forEach(props.children, function (child, index) {
@@ -32,28 +39,32 @@ export var TabBar = function TabBar(props) {
       setActiveKey = _usePropsValue[1];
 
   return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
-    className: 'adm-tab-bar'
+    className: classPrefix
+  }, /*#__PURE__*/React.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.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.createElement("div", {
-        className: 'adm-tab-bar-item-title'
+        className: classPrefix + "-item-title"
       }, item.props.title);
 
       if (iconElement) {
         return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Badge, {
           content: item.props.badge,
-          className: 'adm-tab-bar-icon-badge'
+          className: classPrefix + "-icon-badge"
         }, iconElement), titleElement);
       } else if (titleElement) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Badge, {
+        return /*#__PURE__*/React.createElement(Badge, {
           content: item.props.badge,
-          className: 'adm-tab-bar-title-badge'
-        }, titleElement));
+          className: classPrefix + "-title-badge"
+        }, titleElement);
       }
 
       return null;
@@ -66,9 +77,9 @@ export var TabBar = function TabBar(props) {
         if (key === undefined || key === null) return;
         setActiveKey(key.toString());
       },
-      className: classNames('adm-tab-bar-item', {
-        'adm-tab-bar-item-active': active
-      })
+      className: classNames(classPrefix + "-item", (_classNames = {}, _classNames[classPrefix + "-item-active"] = active, _classNames))
     }, renderContent()));
+  })), props.safeArea && /*#__PURE__*/React.createElement(SafeArea, {
+    position: 'bottom'
   })));
 };

package/es/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/es/index.js

@@ -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';
@@ -58,6 +59,7 @@ export { default as Search } from './components/search-bar'; // TODO: deprecated
 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,5 +74,4 @@ export { default as TextArea } from './components/text-area';
 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';
+export { default as WaterMark } from './components/water-mark';

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

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
-import { usePersistFn } from 'ahooks';
+import { useMemoizedFn } from 'ahooks';
 export function useMutationEffect(effect, targetRef, options) {
-  var fn = usePersistFn(effect);
+  var fn = useMemoizedFn(effect);
   useEffect(function () {
     var observer = new MutationObserver(function () {
       fn();

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

@@ -1,5 +1,5 @@
 import { useRef } from 'react';
-import { usePersistFn, useUpdate } from 'ahooks';
+import { useMemoizedFn, useUpdate } from 'ahooks';
 export function usePropsValue(options) {
   var value = options.value,
       defaultValue = options.defaultValue,
@@ -11,7 +11,7 @@ export function usePropsValue(options) {
     stateRef.current = value;
   }
 
-  var setState = usePersistFn(function (v) {
+  var setState = useMemoizedFn(function (v) {
     if (value === undefined) {
       stateRef.current = v;
       update();

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

@@ -1,7 +1,7 @@
 import { useLayoutEffect } from 'react';
-import { usePersistFn } from 'ahooks';
+import { useMemoizedFn } from 'ahooks';
 export function useResizeEffect(effect, targetRef) {
-  var fn = usePersistFn(effect);
+  var fn = useMemoizedFn(effect);
   useLayoutEffect(function () {
     var target = targetRef.current;
     if (!target) return;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "antd-mobile",
-  "version": "5.0.0-rc.7",
+  "version": "5.0.0-rc.8",
   "dependencies": {
-    "@react-spring/web": "^9.3.1",
+    "@react-spring/web": "^9.3.2",
     "@types/resize-observer-browser": "^0.1.6",
     "@use-gesture/react": "^10.2.4",
-    "ahooks": "^2.10.14",
+    "ahooks": "^3.1.1",
     "antd-mobile-icons": "^0.2.2",
     "antd-mobile-v5-count": "^1.0.1",
     "classnames": "^2.3.1",