@arco-design/mobile-react 2.22.3 → 2.23.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.23.0](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.22.3...@arco-design/mobile-react@2.23.0) (2022-11-29)
+
+
+### Bug Fixes
+
+* `ImagePicker` add click event ([#67](https://github.com/arco-design/arco-design-mobile/issues/67)) ([0f76fda](https://github.com/arco-design/arco-design-mobile/commit/0f76fda245ac9a171525800c1d170c93411f2820))
+
+
+### Features
+
+* add new component `Stepper` ([#46](https://github.com/arco-design/arco-design-mobile/issues/46)) ([a6ce795](https://github.com/arco-design/arco-design-mobile/commit/a6ce7958345ca5170cf00b7efa5cf74d02ebe93d))
+
+
+
+
+
 ## [2.22.3](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.22.2...@arco-design/mobile-react@2.22.3) (2022-11-23)
 
 

package/README.en-US.md

@@ -59,8 +59,8 @@ React & ReactDOM: **<a href="https://reactjs.org/docs/cdn-links.html" target="_b
 React Transition Group: **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">Click here</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.22.2/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.22.2/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.22.3/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.22.3/dist/index.min.js"></script>
 ```
 
 ## Full import

package/README.md

@@ -59,8 +59,8 @@ React & ReactDOM： **<a href="https://reactjs.org/docs/cdn-links.html" target="
 React Transition Group： **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">戳这里获取</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.22.2/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.22.2/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.22.3/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.22.3/dist/index.min.js"></script>
 ```
 
 ## 引入全部

package/cjs/image-picker/index.js

@@ -84,7 +84,9 @@ var ImagePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       onMaxSizeExceed = props.onMaxSizeExceed,
       onLimitExceed = props.onLimitExceed,
       upload = props.upload,
-      selectAdapter = props.selectAdapter;
+      selectAdapter = props.selectAdapter,
+      onSelectClick = props.onSelectClick,
+      onDeleteClick = props.onDeleteClick;
   var domRef = (0, _react.useRef)(null);
   var fileRef = (0, _react.useRef)(null);
   var cacheRef = (0, _react.useRef)([]);
@@ -185,6 +187,7 @@ var ImagePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   };
 
   var handleDelete = function handleDelete(index) {
+    onDeleteClick && onDeleteClick(index);
     onChange(images.filter(function (_i, j) {
       return j !== index;
     }));
@@ -208,17 +211,20 @@ var ImagePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
   };
 
-  var handleSelect = function handleSelect() {
-    var _fileRef$current;
-
-    selectAdapter ? selectAdapter().then(function (_ref4) {
-      var files = _ref4.files;
-      return handleChange({
-        target: {
-          files: files
-        }
-      }, true);
-    }) : (_fileRef$current = fileRef.current) == null ? void 0 : _fileRef$current.click();
+  var handleSelect = function handleSelect(e) {
+    if (e.target !== fileRef.current) {
+      var _fileRef$current;
+
+      onSelectClick && onSelectClick();
+      selectAdapter ? selectAdapter().then(function (_ref4) {
+        var files = _ref4.files;
+        return handleChange({
+          target: {
+            files: files
+          }
+        }, true);
+      }) : (_fileRef$current = fileRef.current) == null ? void 0 : _fileRef$current.click();
+    }
   };
 
   var getGridData = function getGridData(prefixCls, locale) {

package/cjs/image-picker/type.d.ts

@@ -164,6 +164,16 @@ export interface ImagePickerProps {
      * @en Select Adaptor
      */
     selectAdapter?: () => Promise<SelectCallback>;
+    /**
+     * 选图点击事件
+     * @en Select Icon Click Event
+     */
+    onSelectClick?: () => void;
+    /**
+     * 删除点击事件
+     * @en Delete Icon Click Event
+     */
+    onDeleteClick?: (index: number) => void;
 }
 export interface ImagePickerRef {
     /**

package/cjs/index.d.ts

@@ -42,6 +42,7 @@ export { default as Radio } from './radio';
 export { default as Rate } from './rate';
 export { default as Slider } from './slider';
 export { default as SearchBar } from './search-bar';
+export { default as Stepper } from './stepper';
 export { default as Steps } from './steps';
 export { default as Sticky } from './sticky';
 export { default as SwipeAction } from './swipe-action';

package/cjs/index.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.Transition = exports.Toast = exports.Textarea = exports.Tag = exports.Tabs = exports.TabBar = exports.Switch = exports.SwipeLoad = exports.SwipeAction = exports.Sticky = exports.Steps = exports.Slider = exports.ShowMonitor = exports.SearchBar = exports.Rate = exports.Radio = exports.PullRefresh = exports.Progress = exports.Portal = exports.PopupSwiper = exports.Popup = exports.Popover = exports.PickerView = exports.Picker = exports.Pagination = exports.Notify = exports.NoticeBar = exports.NavBar = exports.Masking = exports.Loading = exports.LoadMore = exports.Input = exports.ImagePreview = exports.ImagePicker = exports.Image = exports.Grid = exports.Ellipsis = exports.DropdownMenu = exports.Dropdown = exports.Dialog = exports.DatePicker = exports.CountDown = exports.ContextProvider = exports.Collapse = exports.CircleProgress = exports.Checkbox = exports.Cell = exports.Carousel = exports.Button = exports.Badge = exports.Avatar = exports.ActionSheet = void 0;
+exports.Transition = exports.Toast = exports.Textarea = exports.Tag = exports.Tabs = exports.TabBar = exports.Switch = exports.SwipeLoad = exports.SwipeAction = exports.Sticky = exports.Steps = exports.Stepper = exports.Slider = exports.ShowMonitor = exports.SearchBar = exports.Rate = exports.Radio = exports.PullRefresh = exports.Progress = exports.Portal = exports.PopupSwiper = exports.Popup = exports.Popover = exports.PickerView = exports.Picker = exports.Pagination = exports.Notify = exports.NoticeBar = exports.NavBar = exports.Masking = exports.Loading = exports.LoadMore = exports.Input = exports.ImagePreview = exports.ImagePicker = exports.Image = exports.Grid = exports.Ellipsis = exports.DropdownMenu = exports.Dropdown = exports.Dialog = exports.DatePicker = exports.CountDown = exports.ContextProvider = exports.Collapse = exports.CircleProgress = exports.Checkbox = exports.Cell = exports.Carousel = exports.Button = exports.Badge = exports.Avatar = exports.ActionSheet = void 0;
 
 var _actionSheet = _interopRequireDefault(require("./action-sheet"));
 
@@ -181,6 +181,10 @@ var _searchBar = _interopRequireDefault(require("./search-bar"));
 
 exports.SearchBar = _searchBar.default;
 
+var _stepper = _interopRequireDefault(require("./stepper"));
+
+exports.Stepper = _stepper.default;
+
 var _steps = _interopRequireDefault(require("./steps"));
 
 exports.Steps = _steps.default;

package/cjs/input/style/css/index.css

@@ -124,6 +124,7 @@
 }
 .arco-input-clear {
   color:  #c9cdd4 ;
+  font-size:  16PX ;
 }
 .arco-input {
   display: inline-block;

package/cjs/input/style/index.less

@@ -85,6 +85,7 @@
 }
 .@{prefix}-input-clear {
     .use-var(color, input-clear-icon-color);
+    .use-var(font-size, input-clear-icon-font-size);
 }
 
 .@{prefix}-input {

package/cjs/stepper/demo/style/css/mobile.css

@@ -0,0 +1,4 @@
+#demo-stepper .arcodesign-mobile-demo-content {
+  padding: 0;
+  background: transparent;
+}

package/cjs/stepper/demo/style/mobile.less

@@ -0,0 +1,10 @@
+@import "../../../../style/mixin.less";
+
+#demo-stepper {
+
+    .arcodesign-mobile-demo-content {
+        padding: 0;
+        background: transparent;
+    }
+
+}

package/cjs/stepper/hooks/useButtonClick.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { StepperProps } from '../type';
+export default function useButtonClick(params: Required<Pick<StepperProps, 'min' | 'max' | 'step' | 'disabled' | 'digits' | 'digits' | 'equalLimitDisabled'>> & Pick<StepperProps, 'onAddButtonClick' | 'onMinusButtonClick'> & {
+    actualInputValue: number;
+    updateValue: (updater: number | ((oldValue: number) => number)) => void;
+}): {
+    minusButtonDisable: boolean;
+    addButtonDisable: boolean;
+    handleMinusButtonClick: (e: React.MouseEvent) => void;
+    handleAddButtonClick: (e: React.MouseEvent) => void;
+};

package/cjs/stepper/hooks/useButtonClick.js

@@ -0,0 +1,74 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = useButtonClick;
+
+var _react = require("react");
+
+function correctCalculation(leftNumber, rightNumber, operator) {
+  var magnification = 1e17;
+  var left = leftNumber * magnification;
+  var right = rightNumber * magnification;
+  return operator === '-' ? (left - right) / magnification : (left + right) / magnification;
+}
+
+function useButtonClick(params) {
+  var actualInputValue = params.actualInputValue,
+      min = params.min,
+      max = params.max,
+      step = params.step,
+      disabled = params.disabled,
+      equalLimitDisabled = params.equalLimitDisabled,
+      updateValue = params.updateValue,
+      onAddButtonClick = params.onAddButtonClick,
+      onMinusButtonClick = params.onMinusButtonClick;
+
+  var _useState = (0, _react.useState)(function () {
+    return actualInputValue === min || disabled;
+  }),
+      minusButtonDisable = _useState[0],
+      setMinusButtonDisable = _useState[1];
+
+  var _useState2 = (0, _react.useState)(function () {
+    return actualInputValue === max || disabled;
+  }),
+      addButtonDisable = _useState2[0],
+      setAddButtonDisable = _useState2[1];
+
+  var handleMinusButtonClick = function handleMinusButtonClick(e) {
+    if (minusButtonDisable) {
+      return;
+    }
+
+    updateValue(function (oldValue) {
+      var result = correctCalculation(oldValue, step, '-');
+      return result < min ? equalLimitDisabled ? oldValue : min : result;
+    });
+    onMinusButtonClick && onMinusButtonClick(e);
+  };
+
+  var handleAddButtonClick = function handleAddButtonClick(e) {
+    if (addButtonDisable) {
+      return;
+    }
+
+    updateValue(function (oldValue) {
+      var result = correctCalculation(Number(oldValue), step, '+');
+      return result > max ? equalLimitDisabled ? oldValue : max : result;
+    });
+    onAddButtonClick && onAddButtonClick(e);
+  }; // 当前值改变时，更新按钮状态
+  // Changes button status when value changed
+
+
+  (0, _react.useEffect)(function () {
+    setMinusButtonDisable(actualInputValue <= min);
+    setAddButtonDisable(actualInputValue >= max);
+  }, [actualInputValue]);
+  return {
+    minusButtonDisable: minusButtonDisable,
+    addButtonDisable: addButtonDisable,
+    handleMinusButtonClick: handleMinusButtonClick,
+    handleAddButtonClick: handleAddButtonClick
+  };
+}

package/cjs/stepper/hooks/useInputEvent.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { StepperProps } from '../type';
+export default function useInputEvent(params: Required<Pick<StepperProps, 'defaultValue' | 'min' | 'max' | 'digits' | 'allowEmpty'>> & Pick<StepperProps, 'onBlur' | 'onChange' | 'onInput'> & {
+    actualInputValue: number;
+    updateValue: (updater: number | ((oldValue: number) => number)) => void;
+}): {
+    handleInput: (e: React.FocusEvent<HTMLInputElement>) => void;
+    handleBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
+};

package/cjs/stepper/hooks/useInputEvent.js

@@ -0,0 +1,59 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = useInputEvent;
+
+var _helpers = require("../../_helpers");
+
+function useInputEvent(params) {
+  var defaultValue = params.defaultValue,
+      min = params.min,
+      max = params.max,
+      digits = params.digits,
+      actualInputValue = params.actualInputValue,
+      allowEmpty = params.allowEmpty,
+      updateValue = params.updateValue,
+      onBlur = params.onBlur,
+      onChange = params.onChange,
+      onInput = params.onInput;
+
+  var handleInput = function handleInput(e) {
+    var targetValue = e.target.value;
+    var numberValue = Number(targetValue);
+    var pointIndex = targetValue.indexOf('.');
+
+    if (digits > 0 && pointIndex !== -1) {
+      var decimalLength = targetValue.slice(pointIndex + 1).length;
+      updateValue(decimalLength > digits ? actualInputValue : numberValue);
+    } else if (allowEmpty && targetValue === '') {
+      updateValue(Number.MIN_VALUE);
+    } else {
+      updateValue(numberValue);
+    }
+
+    onInput && onInput(e);
+  };
+
+  var handleBlur = function handleBlur(e) {
+    var targetValue = e.target.value;
+    var numberValue = Number(targetValue);
+
+    if (allowEmpty && targetValue === '') {
+      updateValue(Number.MIN_VALUE);
+    } else if (!allowEmpty && targetValue === '') {
+      updateValue(defaultValue);
+    } else {
+      updateValue(Math.max(min, Math.min(max, numberValue)));
+    }
+
+    onBlur && onBlur(e);
+  };
+
+  (0, _helpers.useUpdateEffect)(function () {
+    onChange && onChange(actualInputValue);
+  }, [actualInputValue]);
+  return {
+    handleInput: handleInput,
+    handleBlur: handleBlur
+  };
+}

package/cjs/stepper/hooks/useValue.d.ts

@@ -0,0 +1,6 @@
+import { StepperProps } from '..';
+export default function useValue(params: Required<Pick<StepperProps, 'defaultValue' | 'min' | 'max' | 'digits'>> & Pick<StepperProps, 'formatter' | 'value'>): {
+    updateValue: (updater: number | ((oldValue: number) => number)) => void;
+    actualInputValue: number;
+    showValue: string | number;
+};

package/cjs/stepper/hooks/useValue.js

@@ -0,0 +1,44 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = useValue;
+
+var _react = require("react");
+
+function useValue(params) {
+  var defaultValue = params.defaultValue,
+      formatter = params.formatter,
+      max = params.max,
+      min = params.min,
+      value = params.value,
+      digits = params.digits;
+
+  var _useState = (0, _react.useState)(defaultValue),
+      innerValue = _useState[0],
+      setInnerValue = _useState[1];
+
+  var updateValue = function updateValue(updater) {
+    var tempValue = typeof updater === 'function' ? updater(innerValue) : updater;
+
+    if (formatter) {
+      new Promise(function (resolve) {
+        resolve(formatter(Number(tempValue)));
+      }).then(function (result) {
+        var res = Math.max(min, Math.min(max, result));
+        setInnerValue(res);
+      });
+    } else {
+      setInnerValue(tempValue);
+    }
+  };
+
+  var actualInputValue = value !== undefined ? value : innerValue; // 将actualInputValue等于Number.MIN_VALUE的情况视为空值
+  // @en If actualInputValue equal Number.MIN_VALUE, actualInputValue equal ''
+
+  var showValue = actualInputValue === Number.MIN_VALUE ? '' : digits > 0 ? parseFloat(String(actualInputValue)).toFixed(digits) : actualInputValue;
+  return {
+    updateValue: updateValue,
+    actualInputValue: actualInputValue,
+    showValue: showValue
+  };
+}

package/cjs/stepper/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { StepperProps, StepperRef } from './type';
+export * from './type';
+/**
+ * 步进器组件，支持受控模式
+ * @en Stepper component, provide controlled mode
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 步进器
+ * @name_en Stepper
+ */
+declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<StepperRef>>;
+export default Stepper;

package/cjs/stepper/index.js

@@ -0,0 +1,184 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+var _exportNames = {};
+exports.default = void 0;
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _contextProvider = require("../context-provider");
+
+var _useButtonClick2 = _interopRequireDefault(require("./hooks/useButtonClick"));
+
+var _useInputEvent2 = _interopRequireDefault(require("./hooks/useInputEvent"));
+
+var _icon = require("../icon");
+
+var _useValue2 = _interopRequireDefault(require("./hooks/useValue"));
+
+var _type = require("./type");
+
+Object.keys(_type).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _type[key]) return;
+  exports[key] = _type[key];
+});
+
+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 _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; }
+
+/**
+ * 步进器组件，支持受控模式
+ * @en Stepper component, provide controlled mode
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 步进器
+ * @name_en Stepper
+ */
+var Stepper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
+      style = props.style,
+      inputStyle = props.inputStyle,
+      _props$inputClass = props.inputClass,
+      inputClass = _props$inputClass === void 0 ? '' : _props$inputClass,
+      value = props.value,
+      _props$defaultValue = props.defaultValue,
+      defaultValue = _props$defaultValue === void 0 ? 1 : _props$defaultValue,
+      _props$allowEmpty = props.allowEmpty,
+      allowEmpty = _props$allowEmpty === void 0 ? false : _props$allowEmpty,
+      _props$digits = props.digits,
+      digits = _props$digits === void 0 ? 0 : _props$digits,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? false : _props$disabled,
+      _props$inputReadonly = props.inputReadonly,
+      inputReadonly = _props$inputReadonly === void 0 ? false : _props$inputReadonly,
+      _props$max = props.max,
+      max = _props$max === void 0 ? Infinity : _props$max,
+      _props$min = props.min,
+      min = _props$min === void 0 ? 1 : _props$min,
+      _props$equalLimitDisa = props.equalLimitDisabled,
+      equalLimitDisabled = _props$equalLimitDisa === void 0 ? false : _props$equalLimitDisa,
+      _props$step = props.step,
+      step = _props$step === void 0 ? 1 : _props$step,
+      _props$theme = props.theme,
+      theme = _props$theme === void 0 ? 'default' : _props$theme,
+      formatter = props.formatter,
+      addButton = props.addButton,
+      minusButton = props.minusButton,
+      renderContent = props.renderContent,
+      onBlur = props.onBlur,
+      onChange = props.onChange,
+      onFocus = props.onFocus,
+      onAddButtonClick = props.onAddButtonClick,
+      onMinusButtonClick = props.onMinusButtonClick,
+      onClick = props.onClick,
+      onInput = props.onInput; // 值的相关逻辑
+  // @en The logic is that handle value
+
+  var _useValue = (0, _useValue2.default)({
+    defaultValue: defaultValue,
+    formatter: formatter,
+    min: min,
+    max: max,
+    value: value,
+    digits: digits
+  }),
+      updateValue = _useValue.updateValue,
+      actualInputValue = _useValue.actualInputValue,
+      showValue = _useValue.showValue; // 按钮点击的相关逻辑
+  // @en The logic is that handle button click
+
+
+  var _useButtonClick = (0, _useButtonClick2.default)({
+    actualInputValue: actualInputValue,
+    min: min,
+    max: max,
+    step: step,
+    disabled: disabled,
+    digits: digits,
+    equalLimitDisabled: equalLimitDisabled,
+    updateValue: updateValue,
+    onAddButtonClick: onAddButtonClick,
+    onMinusButtonClick: onMinusButtonClick
+  }),
+      minusButtonDisable = _useButtonClick.minusButtonDisable,
+      addButtonDisable = _useButtonClick.addButtonDisable,
+      handleAddButtonClick = _useButtonClick.handleAddButtonClick,
+      handleMinusButtonClick = _useButtonClick.handleMinusButtonClick; // 输入框操作的相关逻辑
+  // @en The logic is that handle input operation
+
+
+  var _useInputEvent = (0, _useInputEvent2.default)({
+    defaultValue: defaultValue,
+    min: min,
+    max: max,
+    digits: digits,
+    actualInputValue: actualInputValue,
+    allowEmpty: allowEmpty,
+    updateValue: updateValue,
+    onBlur: onBlur,
+    onChange: onChange,
+    onInput: onInput
+  }),
+      handleInput = _useInputEvent.handleInput,
+      handleBlur = _useInputEvent.handleBlur;
+
+  var domRef = (0, _react.useRef)(null);
+  var inputRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      dom: domRef.current,
+      input: inputRef.current,
+      changeValue: function changeValue(newValue) {
+        var tempValue = newValue != null ? newValue : defaultValue;
+        tempValue = Math.min(max, Math.max(tempValue, min));
+        updateValue(tempValue);
+      }
+    };
+  });
+  return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
+    var prefixCls = _ref.prefixCls;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _mobileUtils.cls)(prefixCls + "-stepper", prefixCls + "-" + theme, className),
+      style: style,
+      ref: domRef,
+      onClick: onClick
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      onClick: handleMinusButtonClick
+    }, minusButton || /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _mobileUtils.cls)(prefixCls + "-stepper-minus-button")
+    }, /*#__PURE__*/_react.default.createElement(_icon.IconMinus, {
+      className: (0, _mobileUtils.cls)(prefixCls + "-stepper-minus-button-icon", {
+        disabled: minusButtonDisable
+      })
+    }))), renderContent ? renderContent(actualInputValue) : /*#__PURE__*/_react.default.createElement("input", {
+      style: inputStyle,
+      className: (0, _mobileUtils.cls)(prefixCls + "-stepper-input", inputClass),
+      onFocus: onFocus,
+      onInput: handleInput,
+      onBlur: handleBlur,
+      disabled: disabled,
+      value: showValue,
+      readOnly: inputReadonly,
+      ref: inputRef,
+      type: "number"
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      onClick: handleAddButtonClick
+    }, addButton || /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _mobileUtils.cls)(prefixCls + "-stepper-add-button")
+    }, /*#__PURE__*/_react.default.createElement(_icon.IconAdd, {
+      className: (0, _mobileUtils.cls)(prefixCls + "-stepper-add-button-icon", {
+        disabled: addButtonDisable
+      })
+    }))));
+  });
+});
+var _default = Stepper;
+exports.default = _default;

package/cjs/stepper/style/css/index.css

@@ -0,0 +1,76 @@
+.arco-stepper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  font-size:  0.28rem ;
+}
+.arco-stepper.arco-square {
+  border:  1PX solid #f2f3f5 ;
+  border-radius:  0.04rem ;
+}
+.arco-stepper.arco-square .arco-stepper-add-button,
+.arco-stepper.arco-square .arco-stepper-minus-button,
+.arco-stepper.arco-square .arco-stepper-input {
+  background:  #ffffff ;
+}
+.arco-stepper.arco-square .arco-stepper-input {
+  border-left:  1PX solid #f2f3f5 ;
+  border-right:  1PX solid #f2f3f5 ;
+}
+.arco-stepper.arco-round .arco-stepper-minus-button,
+.arco-stepper.arco-round .arco-stepper-add-button {
+  border-radius:  50% ;
+}
+.arco-stepper.arco-round .arco-stepper-input {
+  background:  transparent ;
+}
+.arco-stepper-minus-button {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+  font-size:  0.2rem ;
+  width:  0.56rem ;
+  height:  0.56rem ;
+  background:  #f7f8fa ;
+}
+.arco-stepper-minus-button-icon {
+  color:  #1d2129 ;
+}
+.arco-stepper-minus-button-icon.disabled {
+  color:  #c9cdd4 ;
+}
+.arco-stepper-input {
+  text-align: center;
+  width:  0.8rem ;
+  height:  0.56rem ;
+  background:  #f7f8fa ;
+  color:  #1d2129 ;
+  margin:  0 1PX ;
+}
+.arco-stepper-add-button {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+  font-size:  0.2rem ;
+  width:  0.56rem ;
+  height:  0.56rem ;
+  background:  #f7f8fa ;
+}
+.arco-stepper-add-button-icon {
+  color:  #1d2129 ;
+}
+.arco-stepper-add-button-icon.disabled {
+  color:  #c9cdd4 ;
+}

package/cjs/stepper/style/css/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../../style/css/public.css';
+import './index.css';