antd-mobile 5.0.0-rc.9 → 5.0.0

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

@@ -11,5 +11,5 @@ export declare type StepperProps = Pick<InputProps, 'onFocus' | 'onBlur'> & {
     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,35 +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,
-      inputReadOnly = props.inputReadOnly;
-
-  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));
@@ -44,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 {
@@ -80,7 +69,7 @@ export var Stepper = function Stepper(p) {
     }
   };
 
-  var plusDisabled = function plusDisabled() {
+  const plusDisabled = () => {
     if (max === undefined) {
       return disabled;
     } else {
@@ -88,39 +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);
     },
     readOnly: inputReadOnly
-  }), /*#__PURE__*/React.createElement(Button, {
-    className: classPrefix + "-plus",
+  })), 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 {};

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

@@ -2,31 +2,33 @@ import React from 'react';
 import classNames from 'classnames';
 import { mergeProps } from '../../utils/with-default-props';
 import { withNativeProps } from '../../utils/native-props';
-var classPrefix = "adm-steps";
-var stepClassPrefix = "adm-step";
-var defaultIcon = /*#__PURE__*/React.createElement("span", {
-  className: stepClassPrefix + "-icon-dot"
+const classPrefix = `adm-steps`;
+const stepClassPrefix = `adm-step`;
+const defaultIcon = React.createElement("span", {
+  className: `${stepClassPrefix}-icon-dot`
 });
-var defaultProps = {
+const defaultProps = {
   current: 0,
   direction: 'horizontal'
 };
-export var Steps = function Steps(p) {
-  var props = mergeProps(defaultProps, p);
-  var direction = props.direction,
-      current = props.current;
-  var classString = classNames(classPrefix, classPrefix + "-" + direction);
-  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+export const Steps = p => {
+  const props = mergeProps(defaultProps, p);
+  const {
+    direction,
+    current
+  } = props;
+  const classString = classNames(classPrefix, `${classPrefix}-${direction}`);
+  return withNativeProps(props, React.createElement("div", {
     className: classString
-  }, React.Children.map(props.children, function (child, index) {
+  }, React.Children.map(props.children, (child, index) => {
     var _a;
 
-    if (! /*#__PURE__*/React.isValidElement(child)) {
+    if (!React.isValidElement(child)) {
       return child;
     }
 
-    var props = child.props;
-    var status = props.status || 'wait';
+    const props = child.props;
+    let status = props.status || 'wait';
 
     if (index < current) {
       status = props.status || 'finish';
@@ -34,10 +36,10 @@ export var Steps = function Steps(p) {
       status = props.status || 'process';
     }
 
-    var icon = (_a = props.icon) !== null && _a !== void 0 ? _a : defaultIcon;
-    return /*#__PURE__*/React.cloneElement(child, {
-      status: status,
-      icon: icon
+    const icon = (_a = props.icon) !== null && _a !== void 0 ? _a : defaultIcon;
+    return React.cloneElement(child, {
+      status,
+      icon
     });
   })));
 };

package/2x/es/components/swipe-action/swipe-action.d.ts

@@ -14,7 +14,7 @@ export declare type Action = {
 export declare type SwipeActionProps = {
     rightActions?: Action[];
     leftActions?: Action[];
-    onAction?: (action: Action) => void;
+    onAction?: (action: Action, e: React.MouseEvent) => void;
     closeOnTouchOutside?: boolean;
     closeOnAction?: boolean;
     children: ReactNode;
@@ -22,7 +22,7 @@ export declare type SwipeActionProps = {
 export declare const SwipeAction: React.ForwardRefExoticComponent<{
     rightActions?: Action[] | undefined;
     leftActions?: Action[] | undefined;
-    onAction?: ((action: Action) => void) | undefined;
+    onAction?: ((action: Action, e: React.MouseEvent) => void) | undefined;
     closeOnTouchOutside?: boolean | undefined;
     closeOnAction?: boolean | undefined;
     children: ReactNode;