antd-mobile 5.0.0-rc.2 → 5.0.0-rc.23

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

@@ -1,23 +1,25 @@
 import React, { useRef } from 'react';
 import { useDrag } from '@use-gesture/react';
-var classPrefix = "adm-slider";
+const classPrefix = `adm-slider`;
 
-var Thumb = function Thumb(props) {
-  var value = props.value,
-      min = props.min,
-      max = props.max,
-      disabled = props.disabled,
-      onDrag = props.onDrag;
-  var prevValue = useRef(value);
+const Thumb = props => {
+  const {
+    value,
+    min,
+    max,
+    disabled,
+    onDrag
+  } = props;
+  const prevValue = useRef(value);
 
-  var currentPosition = function currentPosition() {
+  const currentPosition = () => {
     return {
-      left: (value - min) / (max - min) * 100 + "%",
+      left: `${(value - min) / (max - min) * 100}%`,
       right: 'auto'
     };
   };
 
-  var bind = useDrag(function (state) {
+  const bind = useDrag(state => {
     var _a;
 
     if (disabled) return;
@@ -26,10 +28,10 @@ var Thumb = function Thumb(props) {
       prevValue.current = value;
     }
 
-    var x = state.xy[0] - state.initial[0];
-    var sliderOffsetWith = (_a = props.trackRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
+    const x = state.xy[0] - state.initial[0];
+    const sliderOffsetWith = (_a = props.trackRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
     if (!sliderOffsetWith) return;
-    var diff = x / Math.ceil(sliderOffsetWith) * (max - min);
+    const diff = x / Math.ceil(sliderOffsetWith) * (max - min);
     onDrag(prevValue.current + diff, state.first, state.last);
   }, {
     axis: 'x',
@@ -37,11 +39,11 @@ var Thumb = function Thumb(props) {
       touch: true
     }
   });
-  return /*#__PURE__*/React.createElement("div", Object.assign({
-    className: classPrefix + "-thumb-container",
+  return React.createElement("div", Object.assign({
+    className: `${classPrefix}-thumb-container`,
     style: currentPosition()
-  }, bind()), /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-thumb"
+  }, bind()), React.createElement("div", {
+    className: `${classPrefix}-thumb`
   }));
 };
 

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

@@ -1,31 +1,33 @@
 import React from 'react';
 import classNames from 'classnames';
-var classPrefix = "adm-slider";
+const classPrefix = `adm-slider`;
 
-var Ticks = function Ticks(_ref) {
-  var points = _ref.points,
-      max = _ref.max,
-      min = _ref.min,
-      upperBound = _ref.upperBound,
-      lowerBound = _ref.lowerBound;
-  var range = max - min;
-  var elements = points.map(function (point) {
-    var _classNames;
-
-    var offset = Math.abs(point - min) / range * 100 + "%";
-    var isActived = point <= upperBound && point >= lowerBound;
-    var style = {
+const Ticks = ({
+  points,
+  max,
+  min,
+  upperBound,
+  lowerBound
+}) => {
+  const range = max - min;
+  const elements = points.map(point => {
+    const offset = `${Math.abs(point - min) / range * 100}%`;
+    const isActived = point <= upperBound && point >= lowerBound;
+    const style = {
       left: offset
     };
-    var pointClassName = classNames((_classNames = {}, _classNames[classPrefix + "-tick"] = true, _classNames[classPrefix + "-tick-active"] = isActived, _classNames));
-    return /*#__PURE__*/React.createElement("span", {
+    const pointClassName = classNames({
+      [`${classPrefix}-tick`]: true,
+      [`${classPrefix}-tick-active`]: isActived
+    });
+    return React.createElement("span", {
       className: pointClassName,
       style: style,
       key: point
     });
   });
-  return /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-ticks"
+  return React.createElement("div", {
+    className: `${classPrefix}-ticks`
   }, elements);
 };
 

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

@@ -2,22 +2,28 @@ import React from 'react';
 import classNames from 'classnames';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
-var classPrefix = "adm-space";
-var defaultProps = {
+const classPrefix = `adm-space`;
+const defaultProps = {
   direction: 'horizontal'
 };
-export var Space = function Space(p) {
-  var _classNames;
-
-  var props = mergeProps(defaultProps, p);
-  var direction = props.direction,
-      onClick = props.onClick;
-  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
-    className: classNames(classPrefix, (_classNames = {}, _classNames[classPrefix + "-wrap"] = props.wrap, _classNames[classPrefix + "-block"] = props.block, _classNames[classPrefix + "-" + direction] = true, _classNames[classPrefix + "-align-" + props.align] = !!props.align, _classNames[classPrefix + "-justify-" + props.justify] = !!props.justify, _classNames)),
+export const Space = p => {
+  const props = mergeProps(defaultProps, p);
+  const {
+    direction,
+    onClick
+  } = props;
+  return withNativeProps(props, React.createElement("div", {
+    className: classNames(classPrefix, {
+      [`${classPrefix}-wrap`]: props.wrap,
+      [`${classPrefix}-block`]: props.block,
+      [`${classPrefix}-${direction}`]: true,
+      [`${classPrefix}-align-${props.align}`]: !!props.align,
+      [`${classPrefix}-justify-${props.justify}`]: !!props.justify
+    }),
     onClick: onClick
-  }, React.Children.map(props.children, function (child) {
-    return child !== null && child !== undefined && /*#__PURE__*/React.createElement("div", {
-      className: classPrefix + "-item"
+  }, React.Children.map(props.children, child => {
+    return child !== null && child !== undefined && React.createElement("div", {
+      className: `${classPrefix}-item`
     }, child);
   })));
 };

package/2x/es/components/spin-loading/index.d.ts

@@ -0,0 +1,4 @@
+import './spin-loading.less';
+import { SpinLoading } from './spin-loading';
+export type { SpinLoadingProps } from './spin-loading';
+export default SpinLoading;

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

@@ -0,0 +1,3 @@
+import "./spin-loading.css";
+import { SpinLoading } from './spin-loading';
+export default SpinLoading;

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

@@ -0,0 +1,29 @@
+.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);
+}
+
+.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: var(--color);
+}
+
+@keyframes adm-spin-loading-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}

package/2x/es/components/spin-loading/spin-loading.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare type SpinLoadingProps = {
+    color?: 'default' | 'primary' | 'white' | (string & {});
+} & NativeProps<'--color' | '--size'>;
+export declare const SpinLoading: React.NamedExoticComponent<SpinLoadingProps>;

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

@@ -0,0 +1,55 @@
+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';
+const classPrefix = 'adm-spin-loading';
+const colorRecord = {
+  default: 'var(--adm-color-weak)',
+  primary: 'var(--adm-color-primary)',
+  white: 'var(--adm-color-white)'
+};
+const defaultProps = {
+  color: 'default'
+};
+const circumference = 15 * 3.14159265358979 * 2;
+export const SpinLoading = memo(p => {
+  var _a;
+
+  const props = mergeProps(defaultProps, p);
+  const {
+    percent
+  } = useSpring({
+    loop: {
+      reverse: true
+    },
+    from: {
+      percent: 30
+    },
+    to: {
+      percent: 80
+    },
+    config: {
+      duration: 1200
+    }
+  });
+  return withNativeProps(props, React.createElement(animated.div, {
+    className: classPrefix,
+    style: {
+      '--color': (_a = colorRecord[props.color]) !== null && _a !== void 0 ? _a : props.color,
+      '--percent': percent
+    }
+  }, React.createElement("svg", {
+    className: `${classPrefix}-svg`,
+    viewBox: '0 0 32 32'
+  }, React.createElement(animated.circle, {
+    className: `${classPrefix}-fill`,
+    fill: 'transparent',
+    strokeWidth: '2',
+    strokeDasharray: circumference,
+    strokeDashoffset: percent,
+    strokeLinecap: 'square',
+    r: 15,
+    cx: 16,
+    cy: 16
+  }))));
+});

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

@@ -1,15 +1,16 @@
 .adm-stepper {
-  --height: 44px;
-  --input-width: 80px;
+  --height: 56px;
+  --input-width: 88px;
   --input-font-size: var(--adm-font-size-main);
   --input-font-color: var(--adm-color-text);
+  --input-background-color: #f5f5f5;
   --border-radius: 4px;
-  --border: 2px solid #e5e5e5;
-  --border-inner: var(--border);
+  --border: none;
+  --border-inner: solid 4px transparent;
   --active-border: var(--border);
-  --button-font-size: 20px;
+  --button-font-size: 30px;
   --button-text-color: var(--adm-color-primary);
-  --button-background-color: transparent;
+  --button-background-color: #f5f5f5;
   --button-width: var(--height);
   display: flex;
   align-items: center;
@@ -25,17 +26,18 @@
   border: var(--active-border);
 }
 
-.adm-stepper .adm-stepper-input {
+.adm-stepper-middle {
   flex: 1;
-  height: var(--height);
   border-left: var(--border-inner);
   border-right: var(--border-inner);
 }
 
-.adm-stepper .adm-stepper-input > input {
-  text-align: center;
-  font-size: var(--input-font-size);
-  color: var(--input-font-color);
+.adm-stepper .adm-stepper-input {
+  height: var(--height);
+  --background-color: var(--input-background-color);
+  --font-size: var(--input-font-size);
+  --color: var(--input-font-color);
+  --text-align: center;
 }
 
 .adm-stepper-minus,
@@ -46,12 +48,12 @@
   color: var(--button-text-color);
   background-color: var(--button-background-color);
   font-size: var(--button-font-size);
+  --border-width: 0;
 }
 
 .adm-stepper-minus:disabled,
 .adm-stepper-plus:disabled {
   color: var(--adm-color-weak);
-  opacity: 1;
 }
 
 .adm-stepper-minus svg,

package/2x/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'>;
+} & NativeProps<'--height' | '--input-width' | '--input-font-size' | '--input-background-color' | '--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/2x/es/components/stepper/stepper.js

@@ -7,34 +7,27 @@ import { mergeProps } from '../../utils/with-default-props';
 import { bound } from '../../utils/bound';
 import Input from '../input';
 import Button from '../button';
-var classPrefix = "adm-stepper";
-var defaultProps = {
+const classPrefix = `adm-stepper`;
+const defaultProps = {
   defaultValue: 0,
   step: 1,
   disabled: false
 };
-export var Stepper = function Stepper(p) {
-  var _classNames;
-
-  var props = mergeProps(defaultProps, p);
-  var disabled = props.disabled,
-      step = props.step,
-      max = props.max,
-      min = props.min;
-
-  var _usePropsValue = usePropsValue(props),
-      value = _usePropsValue[0],
-      setValue = _usePropsValue[1];
-
-  var _useState = useState(function () {
-    return value.toString();
-  }),
-      inputValue = _useState[0],
-      setInputValue = _useState[1];
+export const Stepper = p => {
+  const props = mergeProps(defaultProps, p);
+  const {
+    disabled,
+    step,
+    max,
+    min,
+    inputReadOnly
+  } = props;
+  const [value, setValue] = usePropsValue(props);
+  const [inputValue, setInputValue] = useState(() => value.toString());
 
   function setValueWithCheck(v) {
     if (isNaN(v)) return;
-    var target = bound(v, props.min, props.max);
+    let target = bound(v, props.min, props.max);
 
     if (props.digits || props.digits === 0) {
       target = parseFloat(target.toFixed(props.digits));
@@ -43,35 +36,32 @@ export var Stepper = function Stepper(p) {
     setValue(target);
   }
 
-  var _useState2 = useState(false),
-      hasFocus = _useState2[0],
-      setHasFocus = _useState2[1];
-
-  useEffect(function () {
+  const [hasFocus, setHasFocus] = useState(false);
+  useEffect(() => {
     if (!hasFocus) {
       setInputValue(value.toString());
     }
   }, [hasFocus]);
-  useEffect(function () {
+  useEffect(() => {
     if (!hasFocus) {
       setInputValue(value.toString());
     }
   }, [value]);
 
-  var handleInputChange = function handleInputChange(v) {
+  const handleInputChange = v => {
     setInputValue(v);
     setValueWithCheck(parseFloat(v));
   };
 
-  var handleMinus = function handleMinus() {
+  const handleMinus = () => {
     setValueWithCheck(value - step);
   };
 
-  var handlePlus = function handlePlus() {
+  const handlePlus = () => {
     setValueWithCheck(value + step);
   };
 
-  var minusDisabled = function minusDisabled() {
+  const minusDisabled = () => {
     if (min === undefined) {
       return disabled;
     } else {
@@ -79,7 +69,7 @@ export var Stepper = function Stepper(p) {
     }
   };
 
-  var plusDisabled = function plusDisabled() {
+  const plusDisabled = () => {
     if (max === undefined) {
       return disabled;
     } else {
@@ -87,38 +77,45 @@ export var Stepper = function Stepper(p) {
     }
   };
 
-  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
-    className: classNames(classPrefix, (_classNames = {}, _classNames[classPrefix + "-disabled"] = disabled, _classNames[classPrefix + "-active"] = hasFocus, _classNames))
-  }, /*#__PURE__*/React.createElement(Button, {
-    className: classPrefix + "-minus",
+  return withNativeProps(props, React.createElement("div", {
+    className: classNames(classPrefix, {
+      [`${classPrefix}-active`]: hasFocus
+    })
+  }, React.createElement(Button, {
+    className: `${classPrefix}-minus`,
     onClick: handleMinus,
     disabled: minusDisabled(),
     fill: 'none',
+    shape: 'rectangular',
     color: 'primary'
-  }, /*#__PURE__*/React.createElement(MinusOutline, null)), /*#__PURE__*/React.createElement(Input, {
-    className: classPrefix + "-input",
-    onFocus: function onFocus(e) {
+  }, React.createElement(MinusOutline, null)), React.createElement("div", {
+    className: `${classPrefix}-middle`
+  }, React.createElement(Input, {
+    className: `${classPrefix}-input`,
+    onFocus: e => {
       var _a;
 
       setHasFocus(true);
       (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
     },
     value: inputValue,
-    onChange: function onChange(val) {
+    onChange: val => {
       disabled || handleInputChange(val);
     },
     disabled: disabled,
-    onBlur: function onBlur(e) {
+    onBlur: e => {
       var _a;
 
       setHasFocus(false);
       (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
-    }
-  }), /*#__PURE__*/React.createElement(Button, {
-    className: classPrefix + "-plus",
+    },
+    readOnly: inputReadOnly
+  })), React.createElement(Button, {
+    className: `${classPrefix}-plus`,
     onClick: handlePlus,
     disabled: plusDisabled(),
     fill: 'none',
+    shape: 'rectangular',
     color: 'primary'
-  }, /*#__PURE__*/React.createElement(AddOutline, null))));
+  }, React.createElement(AddOutline, null))));
 };

package/2x/es/components/steps/index.js

@@ -3,5 +3,5 @@ import { attachPropertiesToComponent } from '../../utils/attach-properties-to-co
 import { Step } from './step';
 import { Steps } from './steps';
 export default attachPropertiesToComponent(Steps, {
-  Step: Step
+  Step
 });

package/2x/es/components/steps/step.js

@@ -1,24 +1,25 @@
 import React from 'react';
 import classNames from 'classnames';
 import { withNativeProps } from '../../utils/native-props';
-var classPrefix = "adm-step";
-export var Step = function Step(props) {
-  var title = props.title,
-      description = props.description,
-      icon = props.icon,
-      _props$status = props.status,
-      status = _props$status === void 0 ? 'wait' : _props$status;
-  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
-    className: classNames("" + classPrefix, classPrefix + "-status-" + status)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-indicator"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-icon-container"
-  }, icon)), /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-content"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-title"
-  }, title), !!description && /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-description"
+const classPrefix = `adm-step`;
+export const Step = props => {
+  const {
+    title,
+    description,
+    icon,
+    status = 'wait'
+  } = props;
+  return withNativeProps(props, React.createElement("div", {
+    className: classNames(`${classPrefix}`, `${classPrefix}-status-${status}`)
+  }, React.createElement("div", {
+    className: `${classPrefix}-indicator`
+  }, React.createElement("div", {
+    className: `${classPrefix}-icon-container`
+  }, icon)), React.createElement("div", {
+    className: `${classPrefix}-content`
+  }, React.createElement("div", {
+    className: `${classPrefix}-title`
+  }, title), !!description && React.createElement("div", {
+    className: `${classPrefix}-description`
   }, description))));
 };

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

@@ -37,6 +37,10 @@
   --icon-color: #e5e5e5;
 }
 
+.adm-step-status-wait .adm-step-title {
+  color: var(--adm-color-weak);
+}
+
 .adm-step-status-process {
   --icon-color: var(--adm-color-primary);
 }
@@ -58,7 +62,12 @@
 }
 
 .adm-steps {
+  --title-font-size: 26px;
+  --description-font-size: 24px;
+  --indicator-margin-right: 0;
+  --icon-size: 36px;
   width: 100%;
+  box-sizing: border-box;
 }
 
 .adm-steps-horizontal {
@@ -92,18 +101,21 @@
 
 .adm-steps-horizontal .adm-step-content {
   text-align: center;
-  font-size: 24px;
-  padding-top: 4px;
+  font-size: var(--description-font-size);
+  padding: 4px 16px 0;
+}
+
+.adm-steps-horizontal .adm-step-content .adm-step-title {
+  font-size: var(--title-font-size);
 }
 
 .adm-steps-horizontal .adm-step-content .adm-step-description {
-  margin-top: 4px;
+  margin-top: 8px;
   color: var(--adm-color-weak);
 }
 
 .adm-steps-vertical {
   padding: 16px 32px;
-  --title-font-size: 34px;
 }
 
 .adm-steps-vertical .adm-step {
@@ -114,7 +126,7 @@
 .adm-steps-vertical .adm-step .adm-step-indicator {
   flex: none;
   width: 48px;
-  margin-right: 16px;
+  margin-right: var(--indicator-margin-right);
 }
 
 .adm-steps-vertical .adm-step .adm-step-indicator::after {
@@ -137,7 +149,7 @@
 
 .adm-steps-vertical .adm-step .adm-step-content {
   flex: auto;
-  padding-bottom: 28px;
+  padding-bottom: 48px;
 }
 
 .adm-steps-vertical .adm-step .adm-step-content .adm-step-title {
@@ -146,13 +158,13 @@
 }
 
 .adm-steps-vertical .adm-step .adm-step-content .adm-step-description {
-  padding-top: 4px;
-  font-size: 30px;
+  padding-top: 8px;
+  font-size: var(--description-font-size);
   color: var(--adm-color-weak);
 }
 
 .adm-step-icon-container {
-  font-size: 36px;
+  font-size: var(--icon-size);
 }
 
 .adm-step-icon-dot {

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

@@ -4,6 +4,6 @@ declare type Direction = 'horizontal' | 'vertical';
 export declare type StepsProps = {
     current?: number;
     direction?: Direction;
-} & NativeProps;
+} & NativeProps<'--title-font-size' | '--description-font-size' | '--indicator-margin-right' | '--icon-size'>;
 export declare const Steps: FC<StepsProps>;
 export {};