antd-mobile 5.0.0-rc.8 → 5.1.0

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;

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

@@ -5,20 +5,20 @@ import { useDrag } from '@use-gesture/react';
 import Button from '../button';
 import { nearest } from '../../utils/nearest';
 import { withNativeProps } from '../../utils/native-props';
-var defaultProps = {
+const defaultProps = {
   rightActions: [],
   leftActions: [],
   closeOnTouchOutside: true,
   closeOnAction: true
 };
-export var SwipeAction = /*#__PURE__*/forwardRef(function (p, ref) {
-  var props = mergeProps(defaultProps, p);
-  var rootRef = useRef(null);
-  var leftRef = useRef(null);
-  var rightRef = useRef(null);
+export const SwipeAction = forwardRef((p, ref) => {
+  const props = mergeProps(defaultProps, p);
+  const rootRef = useRef(null);
+  const leftRef = useRef(null);
+  const rightRef = useRef(null);
 
   function getWidth(ref) {
-    var element = ref.current;
+    const element = ref.current;
     if (!element) return 0;
     return element.offsetWidth;
   }
@@ -31,28 +31,24 @@ export var SwipeAction = /*#__PURE__*/forwardRef(function (p, ref) {
     return getWidth(rightRef);
   }
 
-  var _useSpring = useSpring(function () {
-    return {
-      x: 0,
-      config: {
-        tension: 200,
-        friction: 30
-      }
-    };
-  }, []),
-      x = _useSpring[0].x,
-      api = _useSpring[1];
-
-  var draggingRef = useRef(false);
-  var bind = useDrag(function (state) {
+  const [{
+    x
+  }, api] = useSpring(() => ({
+    x: 0,
+    config: {
+      tension: 200,
+      friction: 30
+    }
+  }), []);
+  const draggingRef = useRef(false);
+  const bind = useDrag(state => {
     draggingRef.current = true;
-    var _state$offset = state.offset,
-        offsetX = _state$offset[0];
+    const [offsetX] = state.offset;
 
     if (state.last) {
-      var leftWidth = getLeftWidth();
-      var rightWidth = getRightWidth();
-      var position = offsetX + state.velocity[0] * state.direction[0] * 50;
+      const leftWidth = getLeftWidth();
+      const rightWidth = getRightWidth();
+      let position = offsetX + state.velocity[0] * state.direction[0] * 50;
 
       if (offsetX > 0) {
         position = Math.max(0, position);
@@ -65,7 +61,7 @@ export var SwipeAction = /*#__PURE__*/forwardRef(function (p, ref) {
       api.start({
         x: nearest([-rightWidth, 0, leftWidth], position)
       });
-      window.setTimeout(function () {
+      window.setTimeout(() => {
         draggingRef.current = false;
       });
     } else {
@@ -75,12 +71,10 @@ export var SwipeAction = /*#__PURE__*/forwardRef(function (p, ref) {
       });
     }
   }, {
-    from: function from() {
-      return [x.get(), 0];
-    },
-    bounds: function bounds() {
-      var leftWidth = getLeftWidth();
-      var rightWidth = getRightWidth();
+    from: () => [x.get(), 0],
+    bounds: () => {
+      const leftWidth = getLeftWidth();
+      const rightWidth = getRightWidth();
       return {
         left: -rightWidth,
         right: leftWidth
@@ -100,27 +94,21 @@ export var SwipeAction = /*#__PURE__*/forwardRef(function (p, ref) {
     });
   }
 
-  useImperativeHandle(ref, function () {
-    return {
-      show: function show(side) {
-        if (side === void 0) {
-          side = 'right';
-        }
-
-        if (side === 'right') {
-          api.start({
-            x: -getRightWidth()
-          });
-        } else if (side === 'left') {
-          api.start({
-            x: getLeftWidth()
-          });
-        }
-      },
-      close: close
-    };
-  });
-  useEffect(function () {
+  useImperativeHandle(ref, () => ({
+    show: (side = 'right') => {
+      if (side === 'right') {
+        api.start({
+          x: -getRightWidth()
+        });
+      } else if (side === 'left') {
+        api.start({
+          x: getLeftWidth()
+        });
+      }
+    },
+    close
+  }));
+  useEffect(() => {
     if (!props.closeOnTouchOutside) return;
 
     function handle(e) {
@@ -128,7 +116,7 @@ export var SwipeAction = /*#__PURE__*/forwardRef(function (p, ref) {
         return;
       }
 
-      var root = rootRef.current;
+      const root = rootRef.current;
 
       if (root && !root.contains(e.target)) {
         close();
@@ -136,7 +124,7 @@ export var SwipeAction = /*#__PURE__*/forwardRef(function (p, ref) {
     }
 
     document.addEventListener('touchstart', handle);
-    return function () {
+    return () => {
       document.removeEventListener('touchstart', handle);
     };
   }, [props.closeOnTouchOutside]);
@@ -144,14 +132,14 @@ export var SwipeAction = /*#__PURE__*/forwardRef(function (p, ref) {
   function renderAction(action) {
     var _a, _b;
 
-    var color = (_a = action.color) !== null && _a !== void 0 ? _a : 'light';
-    return /*#__PURE__*/React.createElement(Button, {
+    const color = (_a = action.color) !== null && _a !== void 0 ? _a : 'light';
+    return React.createElement(Button, {
       key: action.key,
       className: 'adm-swipe-action-action-button',
       style: {
         '--background-color': (_b = colorRecord[color]) !== null && _b !== void 0 ? _b : color
       },
-      onClick: function onClick(e) {
+      onClick: e => {
         var _a, _b;
 
         if (props.closeOnAction) {
@@ -159,32 +147,32 @@ export var SwipeAction = /*#__PURE__*/forwardRef(function (p, ref) {
         }
 
         (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action, e);
-        (_b = props.onAction) === null || _b === void 0 ? void 0 : _b.call(props, action);
+        (_b = props.onAction) === null || _b === void 0 ? void 0 : _b.call(props, action, e);
       }
     }, action.text);
   }
 
-  return withNativeProps(props, /*#__PURE__*/React.createElement("div", Object.assign({
+  return withNativeProps(props, React.createElement("div", Object.assign({
     className: 'adm-swipe-action'
   }, bind(), {
     ref: rootRef,
-    onClickCapture: function onClickCapture(e) {
+    onClickCapture: e => {
       if (draggingRef.current) {
         e.stopPropagation();
         e.preventDefault();
       }
     }
-  }), /*#__PURE__*/React.createElement(animated.div, {
+  }), React.createElement(animated.div, {
     className: 'adm-swipe-action-track',
     style: {
-      x: x
+      x
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, React.createElement("div", {
     className: 'adm-swipe-action-actions adm-swipe-action-actions-left',
     ref: leftRef
-  }, props.leftActions.map(renderAction)), /*#__PURE__*/React.createElement("div", {
+  }, props.leftActions.map(renderAction)), React.createElement("div", {
     className: 'adm-swipe-action-content',
-    onClickCapture: function onClickCapture(e) {
+    onClickCapture: e => {
       if (x.goal !== 0) {
         e.preventDefault();
         e.stopPropagation();
@@ -193,18 +181,16 @@ export var SwipeAction = /*#__PURE__*/forwardRef(function (p, ref) {
         });
       }
     }
-  }, /*#__PURE__*/React.createElement(animated.div, {
+  }, React.createElement(animated.div, {
     style: {
-      pointerEvents: x.to(function (v) {
-        return v !== 0 && x.goal !== 0 ? 'none' : 'unset';
-      })
+      pointerEvents: x.to(v => v !== 0 && x.goal !== 0 ? 'none' : 'unset')
     }
-  }, props.children)), /*#__PURE__*/React.createElement("div", {
+  }, props.children)), React.createElement("div", {
     className: 'adm-swipe-action-actions adm-swipe-action-actions-right',
     ref: rightRef
   }, props.rightActions.map(renderAction)))));
 });
-var colorRecord = {
+const colorRecord = {
   light: 'var(--adm-color-light)',
   weak: 'var(--adm-color-weak)',
   primary: 'var(--adm-color-primary)',

package/2x/es/components/swiper/index.d.ts

@@ -16,7 +16,7 @@ declare const _default: import("react").ForwardRefExoticComponent<{
     stuckAtBoundary?: boolean | undefined;
     rubberband?: boolean | undefined;
     children?: import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)> | import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>[] | undefined;
-} & import("../../utils/native-props").NativeProps<"--border-radius" | "--height" | "--width" | "--track-padding"> & import("react").RefAttributes<import("./swiper").SwiperRef>> & {
+} & import("../../utils/native-props").NativeProps<"--border-radius" | "--width" | "--height" | "--track-padding"> & import("react").RefAttributes<import("./swiper").SwiperRef>> & {
     Item: import("react").FC<{
         onClick?: ((e: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
     } & import("../../utils/native-props").NativeProps<never>>;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { withNativeProps } from '../../utils/native-props';
-export var SwiperItem = function SwiperItem(props) {
-  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+export const SwiperItem = props => {
+  return withNativeProps(props, React.createElement("div", {
     className: 'adm-swiper-item',
     onClick: props.onClick
   }, props.children));

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

@@ -37,4 +37,4 @@ export declare const Swiper: React.ForwardRefExoticComponent<{
     stuckAtBoundary?: boolean | undefined;
     rubberband?: boolean | undefined;
     children?: React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>[] | undefined;
-} & NativeProps<"--border-radius" | "--height" | "--width" | "--track-padding"> & React.RefAttributes<SwiperRef>>;
+} & NativeProps<"--border-radius" | "--width" | "--height" | "--track-padding"> & React.RefAttributes<SwiperRef>>;