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

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/components/toast/index.d.ts

@@ -1,8 +1,9 @@
 import './toast.less';
-import { clear, show } from './methods';
+import { clear, show, config } from './methods';
 export type { ToastShowProps } from './methods';
 declare const Toast: {
     show: typeof show;
     clear: typeof clear;
+    config: typeof config;
 };
 export default Toast;

package/es/components/toast/index.js

@@ -1,7 +1,8 @@
 import "./toast.css";
-import { clear, show } from './methods';
+import { clear, show, config } from './methods';
 var Toast = {
   show: show,
-  clear: clear
+  clear: clear,
+  config: config
 };
 export default Toast;

package/es/components/toast/methods.d.ts

@@ -2,3 +2,4 @@ import { ToastProps } from './toast';
 export declare type ToastShowProps = Omit<ToastProps, 'visible'>;
 export declare function show(p: ToastShowProps | string): void;
 export declare function clear(): void;
+export declare function config(val: Pick<ToastProps, 'duration' | 'position' | 'maskClickable'>): void;

package/es/components/toast/methods.js

@@ -14,7 +14,9 @@ function unmount(container) {
 }
 
 var defaultProps = {
-  duration: 2000
+  duration: 2000,
+  position: 'center',
+  maskClickable: true
 };
 export function show(p) {
   var props = mergeProps(defaultProps, typeof p === 'string' ? {
@@ -74,4 +76,17 @@ export function clear() {
     if (!container) break;
     unmount(container);
   }
+}
+export function config(val) {
+  if (val.duration !== undefined) {
+    defaultProps.duration = val.duration;
+  }
+
+  if (val.position !== undefined) {
+    defaultProps.position = val.position;
+  }
+
+  if (val.maskClickable !== undefined) {
+    defaultProps.maskClickable = val.maskClickable;
+  }
 }

package/es/components/tree-select/tree-select.css

@@ -24,6 +24,7 @@
   display: flex;
   align-items: center;
   min-height: 50px;
+  box-sizing: border-box;
   padding: 6px 12px;
   position: relative;
 }

package/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/es/global/global.css

@@ -21,9 +21,6 @@ body {
   font-size: var(--adm-font-size-main);
   font-family: var(--adm-font-family);
 }
-* {
-  box-sizing: border-box;
-}
 a,
 button {
   cursor: pointer;

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';

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';

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.4",
+  "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.2",
-    "ahooks": "^2.10.14",
+    "@use-gesture/react": "^10.2.4",
+    "ahooks": "^3.1.1",
     "antd-mobile-icons": "^0.2.2",
     "antd-mobile-v5-count": "^1.0.1",
     "classnames": "^2.3.1",