antd-mobile 5.12.7 → 5.14.0

package/2x/es/components/selector/selector.css

@@ -1,5 +1,5 @@
 .adm-selector {
-  --color: #f5f5f5;
+  --color: var(--adm-color-box);
   --checked-color: #e7f1ff;
   --text-color: var(--adm-color-text);
   --checked-text-color: var(--adm-color-primary);
@@ -8,7 +8,7 @@
   --border-radius: 4px;
   --padding: 16px 32px;
   overflow: hidden;
-  font-size: 30px;
+  font-size: var(--adm-font-size-7);
   line-height: 1.4;
 }
 
@@ -32,7 +32,7 @@
 }
 
 .adm-selector-item-description {
-  font-size: 26px;
+  font-size: var(--adm-font-size-main);
   color: var(--adm-color-weak);
 }
 

package/2x/es/components/side-bar/corner.js

@@ -9,6 +9,6 @@ export const Corner = memo(props => withNativeProps(props, React.createElement("
   fillRule: 'evenodd'
 }, React.createElement("path", {
   d: 'M30,0 C13.4314575,3.04359188e-15 -2.02906125e-15,13.4314575 0,30 L0,30 L0,0 Z',
-  fill: 'var(--adm-color-white)',
+  fill: 'var(--adm-color-background)',
   transform: 'translate(15.000000, 15.000000) scale(-1, -1) translate(-15.000000, -15.000000) '
 })))));

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

@@ -2,11 +2,11 @@
   --height: 100%;
   --width: 210px;
   --item-border-radius: 16px;
-  --background-color: #f5f5f5;
+  --background-color: var(--adm-color-box);
   width: var(--width);
   height: var(--height);
   box-sizing: border-box;
-  font-size: 26px;
+  font-size: var(--adm-font-size-main);
   overflow-y: auto;
   transform: translateZ(0);
   -webkit-transform: translateZ(0);
@@ -49,7 +49,7 @@
 
 .adm-side-bar-item-active {
   color: var(--adm-color-primary);
-  background-color: var(--adm-color-white);
+  background-color: var(--adm-color-background);
   position: relative;
 }
 

package/2x/es/components/side-bar/side-bar.js

@@ -6,6 +6,8 @@ import { usePropsValue } from '../../utils/use-props-value';
 import { Corner } from './corner';
 import { traverseReactNode } from '../../utils/traverse-react-node';
 const classPrefix = `adm-side-bar`;
+/* istanbul ignore next */
+
 export const SideBarItem = () => {
   return null;
 };

package/2x/es/components/slider/slider.css

@@ -1,6 +1,6 @@
 .adm-slider {
   --fill-color: var(--adm-color-primary);
-  padding: 8px 24px;
+  padding: 10px 28px;
   list-style: none;
   user-select: none;
 }
@@ -12,33 +12,34 @@
 .adm-slider-track {
   position: relative;
   width: 100%;
-  height: 8px;
-  background-color: #f5f5f5;
+  height: 6px;
+  background-color: var(--adm-color-box);
+  border-radius: 6px;
 }
 
 .adm-slider-fill {
   position: absolute;
   z-index: 1;
-  height: 8px;
+  height: 6px;
+  border-radius: 6px;
   background-color: var(--fill-color);
 }
 
 .adm-slider-ticks {
   position: absolute;
   width: 100%;
-  height: 8px;
+  height: 6px;
   background: transparent;
 }
 
 .adm-slider-tick {
   position: absolute;
-  top: 50%;
-  width: 22px;
-  height: 22px;
-  margin-left: -10px;
-  background-color: #f5f5f5;
+  top: -4px;
+  width: 14px;
+  height: 14px;
+  margin-left: -6px;
+  background-color: var(--adm-color-box);
   border-radius: 50%;
-  transform: translate(0, -50%);
 }
 
 .adm-slider-tick-active {
@@ -46,14 +47,15 @@
 }
 
 .adm-slider-thumb {
-  width: 44px;
-  height: 44px;
-  margin: 10px;
+  width: 56px;
+  height: 56px;
+  margin: 4px;
   border-radius: 50%;
   text-align: center;
-  line-height: 44px;
+  line-height: 56px;
   background: var(--adm-color-white);
-  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.12), 0 3px 6px -4px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.12);
+  color: var(--fill-color);
 }
 
 .adm-slider-thumb:focus {
@@ -61,9 +63,9 @@
 }
 
 .adm-slider-thumb-icon {
-  width: 20px;
-  height: 20px;
-  margin: 12px;
+  width: 24px;
+  height: 24px;
+  margin: 16px;
   user-select: none;
 }
 
@@ -83,16 +85,16 @@
   position: relative;
   width: 100%;
   overflow: visible;
-  font-size: 24px;
-  height: 24px;
-  margin-top: 8px;
+  font-size: var(--adm-font-size-3);
+  height: 22px;
+  margin-top: 20px;
 }
 
 .adm-slider-mark-text {
   position: absolute;
   display: inline-block;
-  line-height: 32px;
-  color: #999;
+  line-height: 1;
+  color: var(--adm-color-text);
   text-align: center;
   word-break: keep-all;
   user-select: none;

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

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 import { SliderMarks } from './marks';
 export declare type SliderValue = number | [number, number];
@@ -12,7 +12,8 @@ export declare type SliderProps = {
     ticks?: boolean;
     disabled?: boolean;
     range?: boolean;
-    icon?: React.ReactNode;
+    icon?: ReactNode;
+    popover?: boolean | ((value: number) => ReactNode);
     onChange?: (value: SliderValue) => void;
     onAfterChange?: (value: SliderValue) => void;
 } & NativeProps<'--fill-color'>;

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

@@ -14,7 +14,8 @@ const defaultProps = {
   step: 1,
   ticks: false,
   range: false,
-  disabled: false
+  disabled: false,
+  popover: false
 };
 export const Slider = p => {
   var _a;
@@ -127,13 +128,14 @@ export const Slider = p => {
 
   const renderThumb = index => {
     return React.createElement(Thumb, {
-      icon: icon,
       key: index,
       value: sliderValue[index],
       min: min,
       max: max,
       disabled: disabled,
       trackRef: trackRef,
+      icon: icon,
+      popover: props.popover,
       onDrag: (position, first, last) => {
         if (first) {
           dragLockRef.current += 1;

package/2x/es/components/slider/thumb-icon.js

@@ -2,24 +2,26 @@ import React from 'react';
 import { withNativeProps } from '../../utils/native-props';
 export const ThumbIcon = props => {
   return withNativeProps(props, React.createElement("svg", {
-    viewBox: '0 0 20 20'
+    viewBox: '0 0 24 24',
+    xmlns: 'http://www.w3.org/2000/svg'
   }, React.createElement("g", {
-    stroke: 'none',
-    strokeWidth: '1',
-    fill: 'none',
+    fill: 'currentColor',
     fillRule: 'evenodd'
-  }, React.createElement("g", {
-    transform: 'translate(-604.000000, -656.000000)',
-    fill: '#999999'
-  }, React.createElement("g", {
-    transform: 'translate(592.000000, 644.000000)'
-  }, React.createElement("g", {
-    transform: 'translate(12.000000, 12.000000)'
-  }, React.createElement("polygon", {
-    points: '0 3.33333333 2.22222222 3.33333333 2.22222222 17.7777778 0 17.7777778'
-  }), React.createElement("polygon", {
-    points: '17.7777778 3.33333333 20 3.33333333 20 17.7777778 17.7777778 17.7777778'
-  }), React.createElement("path", {
-    d: 'M10.8888889,0 L9.11111111,0 C8.98888889,0 8.88888889,0.107142857 8.88888889,0.238095238 L8.88888889,19.7619048 C8.88888889,19.8928571 8.98888889,20 9.11111111,20 L10.8888889,20 C11.0111111,20 11.1111111,19.8928571 11.1111111,19.7619048 L11.1111111,0.238095238 C11.1111111,0.107142857 11.0111111,0 10.8888889,0 Z'
-  })))))));
+  }, React.createElement("rect", {
+    x: 10,
+    width: 4,
+    height: 24,
+    rx: 2
+  }), React.createElement("rect", {
+    y: 4,
+    width: 4,
+    height: 16,
+    rx: 2
+  }), React.createElement("rect", {
+    x: 20,
+    y: 4,
+    width: 4,
+    height: 16,
+    rx: 2
+  }))));
 };

package/2x/es/components/slider/thumb.d.ts

@@ -1,4 +1,4 @@
-import React, { FC, RefObject } from 'react';
+import React, { FC, RefObject, ReactNode } from 'react';
 declare type ThumbProps = {
     value: number;
     min: number;
@@ -7,6 +7,7 @@ declare type ThumbProps = {
     onDrag: (value: number, first: boolean, last: boolean) => void;
     trackRef: RefObject<HTMLDivElement>;
     icon?: React.ReactNode;
+    popover: boolean | ((value: number) => ReactNode);
 };
 declare const Thumb: FC<ThumbProps>;
 export default Thumb;

package/2x/es/components/slider/thumb.js

@@ -1,6 +1,7 @@
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import { useDrag } from '@use-gesture/react';
 import { ThumbIcon } from './thumb-icon';
+import { Popover } from '../popover/popover';
 const classPrefix = `adm-slider`;
 
 const Thumb = props => {
@@ -21,6 +22,7 @@ const Thumb = props => {
     };
   };
 
+  const [dragging, setDragging] = useState(false);
   const bind = useDrag(state => {
     var _a;
 
@@ -35,20 +37,29 @@ const Thumb = props => {
     if (!sliderOffsetWith) return;
     const diff = x / Math.ceil(sliderOffsetWith) * (max - min);
     onDrag(prevValue.current + diff, state.first, state.last);
+    setDragging(!state.last);
   }, {
     axis: 'x',
     pointer: {
       touch: true
     }
   });
-  return React.createElement("div", Object.assign({
-    className: `${classPrefix}-thumb-container`,
-    style: currentPosition()
-  }, bind()), React.createElement("div", {
+  const renderPopoverContent = typeof props.popover === 'function' ? props.popover : props.popover ? value => value.toString() : null;
+  const thumbElement = React.createElement("div", {
     className: `${classPrefix}-thumb`
   }, icon ? icon : React.createElement(ThumbIcon, {
     className: `${classPrefix}-thumb-icon`
-  })));
+  }));
+  return React.createElement("div", Object.assign({
+    className: `${classPrefix}-thumb-container`,
+    style: currentPosition()
+  }, bind()), renderPopoverContent ? React.createElement(Popover, {
+    content: renderPopoverContent(value),
+    placement: 'top',
+    visible: dragging,
+    getContainer: null,
+    mode: 'dark'
+  }, thumbElement) : thumbElement);
 };
 
 export default Thumb;

package/2x/es/components/space/space.patch.css

@@ -0,0 +1,16 @@
+.adm-space-vertical > .adm-space-item {
+  margin-bottom: 16px;
+}
+
+.adm-space-horizontal > .adm-space-item {
+  margin-right: 16px;
+}
+
+.adm-space-horizontal.adm-space-wrap {
+  flex-wrap: wrap;
+  margin-bottom: -16px;
+}
+
+.adm-space-horizontal.adm-space-wrap > .adm-space-item {
+  padding-bottom: 16px;
+}

package/2x/es/components/spin-loading/spin-loading.css

@@ -1,9 +1,6 @@
 .adm-spin-loading {
   --color: var(--adm-color-weak);
   --size: 64px;
-  --pi: 3.14159265;
-  --radius: 15;
-  --circumference: calc(var(--radius) * var(--pi) * 2);
   width: var(--size);
   height: var(--size);
 }

package/2x/es/components/spin-loading/spin-loading.js

@@ -2,6 +2,7 @@ import React, { memo } from 'react';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
 import { useSpring, animated } from '@react-spring/web';
+import { useMotionReduced } from '../../utils/reduce-and-restore-motion';
 const classPrefix = 'adm-spin-loading';
 const colorRecord = {
   default: 'var(--adm-color-weak)',
@@ -16,17 +17,19 @@ export const SpinLoading = memo(p => {
   var _a;
 
   const props = mergeProps(defaultProps, p);
+  const motionReduced = useMotionReduced();
   const {
     percent
   } = useSpring({
+    cancel: motionReduced,
     loop: {
       reverse: true
     },
     from: {
-      percent: 30
+      percent: 80
     },
     to: {
-      percent: 80
+      percent: 30
     },
     config: {
       duration: 1200

package/2x/es/components/spin-loading/spin-loading.patch.css

@@ -0,0 +1,14 @@
+.adm-spin-loading {
+  width: 64px;
+  height: 64px;
+}
+
+.adm-spin-loading-svg {
+  width: 100%;
+  height: 100%;
+  animation: adm-spin-loading-rotate 0.8s infinite linear;
+}
+
+.adm-spin-loading-svg > .adm-spin-loading-fill {
+  stroke: #999999;
+}

package/2x/es/components/stepper/stepper.css

@@ -3,14 +3,14 @@
   --input-width: 88px;
   --input-font-size: var(--adm-font-size-main);
   --input-font-color: var(--adm-color-text);
-  --input-background-color: #f5f5f5;
+  --input-background-color: var(--adm-color-box);
   --border-radius: 4px;
   --border: none;
   --border-inner: solid 4px transparent;
   --active-border: var(--border);
-  --button-font-size: 30px;
+  --button-font-size: var(--adm-font-size-7);
   --button-text-color: var(--adm-color-primary);
-  --button-background-color: #f5f5f5;
+  --button-background-color: var(--adm-color-box);
   --button-width: var(--height);
   display: flex;
   align-items: center;

package/2x/es/components/steps/steps.css

@@ -62,8 +62,8 @@
 }
 
 .adm-steps {
-  --title-font-size: 26px;
-  --description-font-size: 24px;
+  --title-font-size: var(--adm-font-size-main);
+  --description-font-size: var(--adm-font-size-4);
   --indicator-margin-right: 0;
   --icon-size: 36px;
   width: 100%;

package/2x/es/components/swipe-action/swipe-action.css

@@ -1,5 +1,5 @@
 .adm-swipe-action {
-  --background: #ffffff;
+  --background: var(--adm-color-background);
   background: var(--background);
   cursor: grab;
   overflow: hidden;

package/2x/es/components/swipe-action/swipe-action.js

@@ -6,6 +6,7 @@ import Button from '../button';
 import { nearest } from '../../utils/nearest';
 import { withNativeProps } from '../../utils/native-props';
 import { withStopPropagation } from '../../utils/with-stop-propagation';
+const classPrefix = `adm-swipe-action`;
 const defaultProps = {
   rightActions: [],
   leftActions: [],
@@ -137,7 +138,7 @@ export const SwipeAction = forwardRef((p, ref) => {
     const color = (_a = action.color) !== null && _a !== void 0 ? _a : 'light';
     return React.createElement(Button, {
       key: action.key,
-      className: 'adm-swipe-action-action-button',
+      className: `${classPrefix}-action-button`,
       style: {
         '--background-color': (_b = colorRecord[color]) !== null && _b !== void 0 ? _b : color
       },
@@ -155,7 +156,7 @@ export const SwipeAction = forwardRef((p, ref) => {
   }
 
   return withNativeProps(props, React.createElement("div", Object.assign({
-    className: 'adm-swipe-action'
+    className: classPrefix
   }, bind(), {
     ref: rootRef,
     onClickCapture: e => {
@@ -165,15 +166,15 @@ export const SwipeAction = forwardRef((p, ref) => {
       }
     }
   }), React.createElement(animated.div, {
-    className: 'adm-swipe-action-track',
+    className: `${classPrefix}-track`,
     style: {
       x
     }
   }, withStopPropagation(props.stopPropagation, React.createElement("div", {
-    className: 'adm-swipe-action-actions adm-swipe-action-actions-left',
+    className: `${classPrefix}-actions ${classPrefix}-actions-left`,
     ref: leftRef
   }, props.leftActions.map(renderAction))), React.createElement("div", {
-    className: 'adm-swipe-action-content',
+    className: `${classPrefix}-content`,
     onClickCapture: e => {
       if (x.goal !== 0) {
         e.preventDefault();
@@ -188,7 +189,7 @@ export const SwipeAction = forwardRef((p, ref) => {
       pointerEvents: x.to(v => v !== 0 && x.goal !== 0 ? 'none' : 'auto')
     }
   }, props.children)), withStopPropagation(props.stopPropagation, React.createElement("div", {
-    className: 'adm-swipe-action-actions adm-swipe-action-actions-right',
+    className: `${classPrefix}-actions ${classPrefix}-actions-right`,
     ref: rightRef
   }, props.rightActions.map(renderAction))))));
 });

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

@@ -11,6 +11,7 @@ import { staged } from 'staged-components';
 import { useRefState } from '../../utils/use-ref-state';
 import { bound } from '../../utils/bound';
 import { useIsomorphicLayoutEffect, useUpdateEffect } from 'ahooks';
+const classPrefix = `adm-swiper`;
 const defaultProps = {
   defaultIndex: 0,
   allowTouchMove: true,
@@ -209,10 +210,10 @@ export const Swiper = forwardRef(staged((p, ref) => {
     function renderTrackInner() {
       if (loop) {
         return React.createElement("div", {
-          className: 'adm-swiper-track-inner'
+          className: `${classPrefix}-track-inner`
         }, React.Children.map(validChildren, (child, index) => {
           return React.createElement(animated.div, {
-            className: 'adm-swiper-slide',
+            className: `${classPrefix}-slide`,
             style: {
               [isVertical ? 'y' : 'x']: position.to(position => {
                 let finalPosition = -position + index * 100;
@@ -227,13 +228,13 @@ export const Swiper = forwardRef(staged((p, ref) => {
         }));
       } else {
         return React.createElement(animated.div, {
-          className: 'adm-swiper-track-inner',
+          className: `${classPrefix}-track-inner`,
           style: {
             [isVertical ? 'y' : 'x']: position.to(position => `${-position}%`)
           }
         }, React.Children.map(validChildren, child => {
           return React.createElement("div", {
-            className: 'adm-swiper-slide'
+            className: `${classPrefix}-slide`
           }, child);
         }));
       }
@@ -244,12 +245,12 @@ export const Swiper = forwardRef(staged((p, ref) => {
       '--track-offset': `${props.trackOffset}%`
     };
     return withNativeProps(props, React.createElement("div", {
-      className: classNames('adm-swiper', `adm-swiper-${props.direction}`),
+      className: classNames(classPrefix, `${classPrefix}-${props.direction}`),
       style: style
     }, React.createElement("div", Object.assign({
       ref: trackRef,
-      className: classNames('adm-swiper-track', {
-        'adm-swiper-track-allow-touch-move': props.allowTouchMove
+      className: classNames(`${classPrefix}-track`, {
+        [`${classPrefix}-track-allow-touch-move`]: props.allowTouchMove
       }),
       onClickCapture: e => {
         if (draggingRef.current) {
@@ -257,7 +258,7 @@ export const Swiper = forwardRef(staged((p, ref) => {
         }
       }
     }, props.allowTouchMove ? bind() : {}), renderTrackInner()), props.indicator === undefined ? React.createElement("div", {
-      className: 'adm-swiper-indicator'
+      className: `${classPrefix}-indicator`
     }, React.createElement(PageIndicator, Object.assign({}, props.indicatorProps, {
       total: count,
       current: current,

package/2x/es/components/swiper/swiper.patch.css

@@ -0,0 +1,26 @@
+.adm-swiper {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: 0;
+}
+
+.adm-swiper-track {
+  padding: 0;
+}
+
+.adm-swiper-horizontal .adm-swiper-track {
+  transform: translateX(0%);
+}
+
+.adm-swiper-horizontal .adm-swiper-track-inner {
+  width: 100%;
+}
+
+.adm-swiper-vertical .adm-swiper-track {
+  transform: translateY(0%);
+}
+
+.adm-swiper-vertical .adm-swiper-track-inner {
+  height: 100%;
+}

package/2x/es/components/switch/switch.css

@@ -29,7 +29,7 @@
   height: var(--height);
   box-sizing: border-box;
   border-radius: 62px;
-  background: #e5e5e5;
+  background: var(--adm-color-border);
   z-index: 0;
   overflow: hidden;
   line-height: var(--height);
@@ -44,7 +44,7 @@
   height: calc(var(--height) - 2 * var(--border-width));
   border-radius: calc(var(--height) - 2 * var(--border-width));
   box-sizing: border-box;
-  background: #fff;
+  background: var(--adm-color-background);
   z-index: 1;
   transition: all 200ms;
   transform: scale(1);
@@ -57,7 +57,7 @@
   width: calc(var(--height) - 2 * var(--border-width));
   height: calc(var(--height) - 2 * var(--border-width));
   border-radius: calc(var(--height) - 2 * var(--border-width));
-  background: #fff;
+  background: var(--adm-color-white);
   position: absolute;
   z-index: 2;
   top: var(--border-width);
@@ -76,7 +76,7 @@
   height: 100%;
   color: var(--adm-color-weak);
   transition: margin 200ms;
-  font-size: 30px;
+  font-size: var(--adm-font-size-7);
 }
 
 .adm-switch.adm-switch-checked .adm-switch-checkbox {

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

@@ -4,7 +4,7 @@
   justify-content: flex-start;
   align-items: stretch;
   overflow: hidden;
-  min-height: 100px;
+  min-height: 96px;
 }
 
 .adm-tab-bar-item {
@@ -22,17 +22,20 @@
 }
 
 .adm-tab-bar-item-icon {
-  font-size: 40px;
-  height: 44px;
+  font-size: 48px;
+  height: 48px;
   line-height: 1;
-  margin: 8px 0 2px;
 }
 
 .adm-tab-bar-item-title {
-  font-size: 22px;
+  font-size: var(--adm-font-size-3);
   line-height: 30px;
 }
 
+.adm-tab-bar-item-title-with-icon {
+  margin-top: 4px;
+}
+
 .adm-tab-bar-item-active {
   color: var(--adm-color-primary);
 }

package/2x/es/components/tab-bar/tab-bar.js

@@ -6,6 +6,8 @@ import Badge from '../badge';
 import SafeArea from '../safe-area';
 import { usePropsValue } from '../../utils/use-props-value';
 import { traverseReactNode } from '../../utils/traverse-react-node';
+/* istanbul ignore next */
+
 export const TabBarItem = () => {
   return null;
 };
@@ -52,7 +54,7 @@ export const TabBar = p => {
         className: `${classPrefix}-item-icon`
       }, typeof item.props.icon === 'function' ? item.props.icon(active) : item.props.icon);
       const titleElement = item.props.title && React.createElement("div", {
-        className: `${classPrefix}-item-title`
+        className: classNames(`${classPrefix}-item-title`, Boolean(iconElement) && `${classPrefix}-item-title-with-icon`)
       }, typeof item.props.title === 'function' ? item.props.title(active) : item.props.title);
 
       if (iconElement) {