antd-mobile 5.0.0-rc.9 → 5.2.0

package/2x/cjs/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/cjs/components/stepper/stepper.d.ts

@@ -2,14 +2,15 @@ import { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
 import { InputProps } from '../input';
 export declare type StepperProps = Pick<InputProps, 'onFocus' | 'onBlur'> & {
-    value?: number;
-    defaultValue?: number;
+    value?: number | null;
+    defaultValue?: number | null;
+    onChange?: (value: number | null) => void;
     min?: number;
     max?: number;
     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'>;
+    allowEmpty?: boolean;
+} & 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/cjs/components/stepper/stepper.js

@@ -13,7 +13,7 @@ var _antdMobileIcons = require("antd-mobile-icons");
 
 var _nativeProps = require("../../utils/native-props");
 
-var _usePropsValue2 = require("../../utils/use-props-value");
+var _usePropsValue = require("../../utils/use-props-value");
 
 var _withDefaultProps = require("../../utils/with-default-props");
 
@@ -23,42 +23,35 @@ var _input = _interopRequireDefault(require("../input"));
 
 var _button = _interopRequireDefault(require("../button"));
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var classPrefix = "adm-stepper";
-var defaultProps = {
+const classPrefix = `adm-stepper`;
+const defaultProps = {
   defaultValue: 0,
   step: 1,
-  disabled: false
+  disabled: false,
+  allowEmpty: false
 };
 
-var Stepper = function Stepper(p) {
-  var _classNames;
-
-  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
-  var disabled = props.disabled,
-      step = props.step,
-      max = props.max,
-      min = props.min,
-      inputReadOnly = props.inputReadOnly;
-
-  var _usePropsValue = (0, _usePropsValue2.usePropsValue)(props),
-      value = _usePropsValue[0],
-      setValue = _usePropsValue[1];
-
-  var _useState = (0, _react.useState)(function () {
-    return value.toString();
-  }),
-      inputValue = _useState[0],
-      setInputValue = _useState[1];
+const Stepper = p => {
+  const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  const {
+    disabled,
+    step,
+    max,
+    min,
+    inputReadOnly
+  } = props;
+  const [value, setValue] = (0, _usePropsValue.usePropsValue)(props);
+  const [inputValue, setInputValue] = (0, _react.useState)(() => convertValueToText(value));
 
   function setValueWithCheck(v) {
     if (isNaN(v)) return;
-    var target = (0, _bound.bound)(v, props.min, props.max);
+    let target = (0, _bound.bound)(v, props.min, props.max);
 
     if (props.digits || props.digits === 0) {
       target = parseFloat(target.toFixed(props.digits));
@@ -67,85 +60,114 @@ var Stepper = function Stepper(p) {
     setValue(target);
   }
 
-  var _useState2 = (0, _react.useState)(false),
-      hasFocus = _useState2[0],
-      setHasFocus = _useState2[1];
-
-  (0, _react.useEffect)(function () {
+  const [hasFocus, setHasFocus] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
     if (!hasFocus) {
-      setInputValue(value.toString());
+      setInputValue(convertValueToText(value));
     }
   }, [hasFocus]);
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     if (!hasFocus) {
-      setInputValue(value.toString());
+      setInputValue(convertValueToText(value));
     }
   }, [value]);
 
-  var handleInputChange = function handleInputChange(v) {
+  const handleInputChange = v => {
     setInputValue(v);
-    setValueWithCheck(parseFloat(v));
+    const value = convertTextToValue(v);
+
+    if (value === null) {
+      if (props.allowEmpty) {
+        setValue(null);
+      } else {
+        setValue(props.defaultValue);
+      }
+    } else {
+      setValueWithCheck(value);
+    }
   };
 
-  var handleMinus = function handleMinus() {
-    setValueWithCheck(value - step);
+  const handleMinus = () => {
+    setValueWithCheck((value !== null && value !== void 0 ? value : 0) - step);
   };
 
-  var handlePlus = function handlePlus() {
-    setValueWithCheck(value + step);
+  const handlePlus = () => {
+    setValueWithCheck((value !== null && value !== void 0 ? value : 0) + step);
   };
 
-  var minusDisabled = function minusDisabled() {
-    if (min === undefined) {
-      return disabled;
-    } else {
-      return disabled || value <= min;
+  const minusDisabled = () => {
+    if (disabled) return true;
+    if (value === null) return false;
+
+    if (min !== undefined) {
+      return value <= min;
     }
+
+    return false;
   };
 
-  var plusDisabled = function plusDisabled() {
-    if (max === undefined) {
-      return disabled;
-    } else {
-      return disabled || value >= max;
+  const plusDisabled = () => {
+    if (disabled) return true;
+    if (value === null) return false;
+
+    if (max !== undefined) {
+      return value >= max;
     }
+
+    return false;
   };
 
-  return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])(classPrefix, (_classNames = {}, _classNames[classPrefix + "-disabled"] = disabled, _classNames[classPrefix + "-active"] = hasFocus, _classNames))
-  }, /*#__PURE__*/_react["default"].createElement(_button["default"], {
-    className: classPrefix + "-minus",
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: (0, _classnames.default)(classPrefix, {
+      [`${classPrefix}-active`]: hasFocus
+    })
+  }, _react.default.createElement(_button.default, {
+    className: `${classPrefix}-minus`,
     onClick: handleMinus,
     disabled: minusDisabled(),
     fill: 'none',
+    shape: 'rectangular',
     color: 'primary'
-  }, /*#__PURE__*/_react["default"].createElement(_antdMobileIcons.MinusOutline, null)), /*#__PURE__*/_react["default"].createElement(_input["default"], {
-    className: classPrefix + "-input",
-    onFocus: function onFocus(e) {
+  }, _react.default.createElement(_antdMobileIcons.MinusOutline, null)), _react.default.createElement("div", {
+    className: `${classPrefix}-middle`
+  }, _react.default.createElement(_input.default, {
+    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["default"].createElement(_button["default"], {
-    className: classPrefix + "-plus",
+  })), _react.default.createElement(_button.default, {
+    className: `${classPrefix}-plus`,
     onClick: handlePlus,
     disabled: plusDisabled(),
     fill: 'none',
+    shape: 'rectangular',
     color: 'primary'
-  }, /*#__PURE__*/_react["default"].createElement(_antdMobileIcons.AddOutline, null))));
+  }, _react.default.createElement(_antdMobileIcons.AddOutline, null))));
 };
 
-exports.Stepper = Stepper;
+exports.Stepper = Stepper;
+
+function convertValueToText(value) {
+  if (value === null) return '';
+  return value.toString();
+}
+
+function convertTextToValue(text) {
+  if (text === '') return null;
+  return parseFloat(text);
+}

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 require("./steps.css");
 
@@ -17,4 +17,4 @@ var _default = (0, _attachPropertiesToComponent.attachPropertiesToComponent)(_st
   Step: _step.Step
 });
 
-exports["default"] = _default;
+exports.default = _default;

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

@@ -11,28 +11,29 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _nativeProps = require("../../utils/native-props");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-var classPrefix = "adm-step";
-
-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 (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])("" + classPrefix, classPrefix + "-status-" + status)
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-indicator"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-icon-container"
-  }, icon)), /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-content"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-title"
-  }, title), !!description && /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-description"
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const classPrefix = `adm-step`;
+
+const Step = props => {
+  const {
+    title,
+    description,
+    icon,
+    status = 'wait'
+  } = props;
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: (0, _classnames.default)(`${classPrefix}`, `${classPrefix}-status-${status}`)
+  }, _react.default.createElement("div", {
+    className: `${classPrefix}-indicator`
+  }, _react.default.createElement("div", {
+    className: `${classPrefix}-icon-container`
+  }, icon)), _react.default.createElement("div", {
+    className: `${classPrefix}-content`
+  }, _react.default.createElement("div", {
+    className: `${classPrefix}-title`
+  }, title), !!description && _react.default.createElement("div", {
+    className: `${classPrefix}-description`
   }, description))));
 };
 

package/2x/cjs/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/cjs/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/cjs/components/steps/steps.js

@@ -13,36 +13,38 @@ var _withDefaultProps = require("../../utils/with-default-props");
 
 var _nativeProps = require("../../utils/native-props");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var classPrefix = "adm-steps";
-var stepClassPrefix = "adm-step";
+const classPrefix = `adm-steps`;
+const stepClassPrefix = `adm-step`;
 
-var defaultIcon = /*#__PURE__*/_react["default"].createElement("span", {
-  className: stepClassPrefix + "-icon-dot"
+const defaultIcon = _react.default.createElement("span", {
+  className: `${stepClassPrefix}-icon-dot`
 });
 
-var defaultProps = {
+const defaultProps = {
   current: 0,
   direction: 'horizontal'
 };
 
-var Steps = function Steps(p) {
-  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
-  var direction = props.direction,
-      current = props.current;
-  var classString = (0, _classnames["default"])(classPrefix, classPrefix + "-" + direction);
-  return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
+const Steps = p => {
+  const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  const {
+    direction,
+    current
+  } = props;
+  const classString = (0, _classnames.default)(classPrefix, `${classPrefix}-${direction}`);
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: classString
-  }, _react["default"].Children.map(props.children, function (child, index) {
+  }, _react.default.Children.map(props.children, (child, index) => {
     var _a;
 
-    if (! /*#__PURE__*/_react["default"].isValidElement(child)) {
+    if (!_react.default.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';
@@ -50,10 +52,10 @@ var Steps = function Steps(p) {
       status = props.status || 'process';
     }
 
-    var icon = (_a = props.icon) !== null && _a !== void 0 ? _a : defaultIcon;
-    return /*#__PURE__*/_react["default"].cloneElement(child, {
-      status: status,
-      icon: icon
+    const icon = (_a = props.icon) !== null && _a !== void 0 ? _a : defaultIcon;
+    return _react.default.cloneElement(child, {
+      status,
+      icon
     });
   })));
 };

package/2x/cjs/components/swipe-action/index.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 require("./swipe-action.css");
 
 var _swipeAction2 = require("./swipe-action");
 
 var _default = _swipeAction2.SwipeAction;
-exports["default"] = _default;
+exports.default = _default;

package/2x/cjs/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;