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

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

@@ -1,9 +1,11 @@
 .adm-progress-bar {
   --track-width: var(--adm-progress-bar-track-width, 3px);
+  --track-color: var(--adm-progress-bar-track-color, #e5e5e5);
   --fill-color: var(--adm-progress-bar-fill-color, #1677ff);
 }
 .adm-progress-bar-trail {
-  background: #e5e5e5;
+  background: var(--track-color);
+  overflow: hidden;
   height: var(--track-width);
   border-radius: var(--track-width);
 }

package/es/components/progress-bar/progress-bar.d.ts

@@ -2,5 +2,5 @@ import { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type ProgressBarProps = {
     percent?: number;
-} & NativeProps<'--track-width' | '--fill-color'>;
+} & NativeProps<'--track-width' | '--track-color' | '--fill-color'>;
 export declare const ProgressBar: FC<ProgressBarProps>;

package/es/components/pull-to-refresh/pull-to-refresh.d.ts

@@ -9,6 +9,7 @@ export declare type PullToRefreshProps = {
     completeDelay?: number;
     headHeight?: number;
     threshold?: number;
+    disabled?: boolean;
     renderText?: (status: PullStatus) => ReactNode;
 };
 export declare const defaultProps: {
@@ -17,6 +18,7 @@ export declare const defaultProps: {
     refreshingText: string;
     completeText: string;
     completeDelay: number;
+    disabled: boolean;
     onRefresh: () => void;
 };
 export declare const PullToRefresh: FC<PullToRefreshProps>;

package/es/components/pull-to-refresh/pull-to-refresh.js

@@ -46,6 +46,7 @@ export var defaultProps = {
   refreshingText: '加载中……',
   completeText: '刷新成功',
   completeDelay: 500,
+  disabled: false,
   onRefresh: function onRefresh() {}
 };
 export var PullToRefresh = function PullToRefresh(p) {
@@ -222,6 +223,7 @@ export var PullToRefresh = function PullToRefresh(p) {
     },
     axis: 'y',
     target: elementRef,
+    enabled: !props.disabled,
     eventOptions: supportsPassive ? {
       passive: false
     } : false

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/rate/rate.css

@@ -14,6 +14,7 @@
   text-align: center;
   overflow: hidden;
   cursor: pointer;
+  box-sizing: border-box;
 }
 .adm-rate-star-half {
   padding-right: 0;

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

@@ -26,6 +26,7 @@
   flex: auto;
   padding: 4px 8px 4px 4px;
   height: 28px;
+  box-sizing: border-box;
 }
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input.adm-input-wrapper {
   --placeholder-color: var(---placeholder-color);
@@ -34,6 +35,9 @@
   font-size: 13px;
   line-height: 19px;
 }
+.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input.adm-search-bar-input-without-icon {
+  padding-left: 8px;
+}
 .adm-search-bar .adm-search-bar-suffix {
   flex: none;
   margin-left: 16px;

package/es/components/search-bar/search-bar.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { InputRef, InputProps } from '../input';
 import { NativeProps } from '../../utils/native-props';
 export declare type SearchBarRef = InputRef;
@@ -10,6 +10,7 @@ export declare type SearchBarProps = Pick<InputProps, 'onFocus' | 'onBlur' | 'on
     clearable?: boolean;
     showCancelButton?: boolean | ((focus: boolean, value: string) => boolean);
     cancelText?: string;
+    icon?: ReactNode;
     clearOnCancel?: boolean;
     onSearch?: (val: string) => void;
     onChange?: (val: string) => void;
@@ -23,6 +24,7 @@ export declare const SearchBar: React.ForwardRefExoticComponent<Pick<InputProps,
     clearable?: boolean | undefined;
     showCancelButton?: boolean | ((focus: boolean, value: string) => boolean) | undefined;
     cancelText?: string | undefined;
+    icon?: ReactNode;
     clearOnCancel?: boolean | undefined;
     onSearch?: ((val: string) => void) | undefined;
     onChange?: ((val: string) => void) | undefined;

package/es/components/search-bar/search-bar.js

@@ -11,10 +11,11 @@ var defaultProps = {
   clearable: true,
   showCancelButton: false,
   defaultValue: '',
-  clearOnCancel: true
+  clearOnCancel: true,
+  icon: /*#__PURE__*/React.createElement(SearchOutline, null)
 };
 export var SearchBar = /*#__PURE__*/forwardRef(function (p, ref) {
-  var _classNames;
+  var _classNames, _classNames2;
 
   var _useConfig = useConfig(),
       locale = _useConfig.locale;
@@ -87,11 +88,11 @@ export var SearchBar = /*#__PURE__*/forwardRef(function (p, ref) {
     className: classNames(classPrefix, (_classNames = {}, _classNames[classPrefix + "-active"] = hasFocus, _classNames))
   }, /*#__PURE__*/React.createElement("div", {
     className: classPrefix + "-input-box"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, props.icon && /*#__PURE__*/React.createElement("div", {
     className: classPrefix + "-input-box-icon"
-  }, /*#__PURE__*/React.createElement(SearchOutline, null)), /*#__PURE__*/React.createElement(Input, {
+  }, props.icon), /*#__PURE__*/React.createElement(Input, {
     ref: inputRef,
-    className: classPrefix + "-input",
+    className: classNames(classPrefix + "-input", (_classNames2 = {}, _classNames2[classPrefix + "-input-without-icon"] = !props.icon, _classNames2)),
     value: value,
     onChange: setValue,
     maxLength: props.maxLength,

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

@@ -4,6 +4,7 @@
   --item-border-radius: 8px;
   width: var(--width);
   height: var(--height);
+  box-sizing: border-box;
   font-size: 15px;
   overflow-y: auto;
   transform: translateZ(0);
@@ -13,6 +14,7 @@
   display: flex;
   align-items: center;
   min-height: 50px;
+  box-sizing: border-box;
   padding: 6px 22px;
   position: relative;
   cursor: pointer;

package/es/components/side-bar/side-bar.d.ts

@@ -1,7 +1,7 @@
 import { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type SideBarItemProps = {
-    title?: string;
+    title?: ReactNode;
     disabled?: boolean;
     badge?: ReactNode;
 } & NativeProps;

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/components/tabs/tabs.css

@@ -1,6 +1,8 @@
 .adm-tabs {
   --title-font-size: 17px;
   --content-padding: 12px;
+  --active-line-height: 2px;
+  --active-line-border-radius: 0;
   position: relative;
 }
 .adm-tabs-header {
@@ -44,9 +46,10 @@
 .adm-tabs-tab-line {
   position: absolute;
   bottom: 0;
-  height: 2px;
+  height: var(--active-line-height);
   color: var(--adm-color-primary);
   background: var(--adm-color-primary);
+  border-radius: var(--active-line-border-radius);
 }
 .adm-tabs-content {
   padding: var(--content-padding);

package/es/components/tabs/tabs.d.ts

@@ -12,5 +12,5 @@ export declare type TabsProps = {
     activeLineMode?: 'auto' | 'full' | 'fixed';
     stretch?: boolean;
     onChange?: (key: string) => void;
-} & NativeProps<'--fixed-active-line-width' | '--title-font-size' | '--content-padding'>;
+} & NativeProps<'--fixed-active-line-width' | '--active-line-height' | '--active-line-border-radius' | '--title-font-size' | '--content-padding'>;
 export declare const Tabs: FC<TabsProps>;

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';
@@ -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.5",
+  "version": "5.0.0-rc.9",
   "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",