@arco-design/mobile-react 2.22.3 → 2.23.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (91) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/README.en-US.md +2 -2
  3. package/README.md +2 -2
  4. package/cjs/image-picker/index.js +18 -12
  5. package/cjs/image-picker/type.d.ts +10 -0
  6. package/cjs/index.d.ts +1 -0
  7. package/cjs/index.js +5 -1
  8. package/cjs/input/style/css/index.css +1 -0
  9. package/cjs/input/style/index.less +1 -0
  10. package/cjs/stepper/demo/style/css/mobile.css +4 -0
  11. package/cjs/stepper/demo/style/mobile.less +10 -0
  12. package/cjs/stepper/hooks/useButtonClick.d.ts +11 -0
  13. package/cjs/stepper/hooks/useButtonClick.js +74 -0
  14. package/cjs/stepper/hooks/useInputEvent.d.ts +9 -0
  15. package/cjs/stepper/hooks/useInputEvent.js +59 -0
  16. package/cjs/stepper/hooks/useValue.d.ts +6 -0
  17. package/cjs/stepper/hooks/useValue.js +44 -0
  18. package/cjs/stepper/index.d.ts +13 -0
  19. package/cjs/stepper/index.js +184 -0
  20. package/cjs/stepper/style/css/index.css +76 -0
  21. package/cjs/stepper/style/css/index.d.ts +2 -0
  22. package/cjs/stepper/style/css/index.js +5 -0
  23. package/cjs/stepper/style/index.d.ts +2 -0
  24. package/cjs/stepper/style/index.js +5 -0
  25. package/cjs/stepper/style/index.less +80 -0
  26. package/cjs/stepper/type.d.ts +159 -0
  27. package/cjs/stepper/type.js +3 -0
  28. package/cjs/style.d.ts +1 -0
  29. package/cjs/style.js +2 -0
  30. package/dist/index.js +349 -10
  31. package/dist/index.min.js +3 -3
  32. package/dist/style.css +64 -0
  33. package/dist/style.min.css +1 -1
  34. package/esm/image-picker/index.js +18 -12
  35. package/esm/image-picker/type.d.ts +10 -0
  36. package/esm/index.d.ts +1 -0
  37. package/esm/index.js +1 -0
  38. package/esm/input/style/css/index.css +1 -0
  39. package/esm/input/style/index.less +1 -0
  40. package/esm/stepper/demo/style/css/mobile.css +4 -0
  41. package/esm/stepper/demo/style/mobile.less +10 -0
  42. package/esm/stepper/hooks/useButtonClick.d.ts +11 -0
  43. package/esm/stepper/hooks/useButtonClick.js +69 -0
  44. package/esm/stepper/hooks/useInputEvent.d.ts +9 -0
  45. package/esm/stepper/hooks/useInputEvent.js +53 -0
  46. package/esm/stepper/hooks/useValue.d.ts +6 -0
  47. package/esm/stepper/hooks/useValue.js +38 -0
  48. package/esm/stepper/index.d.ts +13 -0
  49. package/esm/stepper/index.js +157 -0
  50. package/esm/stepper/style/css/index.css +76 -0
  51. package/esm/stepper/style/css/index.d.ts +2 -0
  52. package/esm/stepper/style/css/index.js +2 -0
  53. package/esm/stepper/style/index.d.ts +2 -0
  54. package/esm/stepper/style/index.js +2 -0
  55. package/esm/stepper/style/index.less +80 -0
  56. package/esm/stepper/type.d.ts +159 -0
  57. package/esm/stepper/type.js +1 -0
  58. package/esm/style.d.ts +1 -0
  59. package/esm/style.js +1 -0
  60. package/package.json +3 -3
  61. package/tokens/app/arcodesign/default/css-variables.less +15 -0
  62. package/tokens/app/arcodesign/default/index.d.ts +15 -0
  63. package/tokens/app/arcodesign/default/index.js +16 -1
  64. package/tokens/app/arcodesign/default/index.json +180 -0
  65. package/tokens/app/arcodesign/default/index.less +15 -0
  66. package/umd/image-picker/index.js +18 -12
  67. package/umd/image-picker/type.d.ts +10 -0
  68. package/umd/index.d.ts +1 -0
  69. package/umd/index.js +7 -5
  70. package/umd/input/style/css/index.css +1 -0
  71. package/umd/input/style/index.less +1 -0
  72. package/umd/stepper/demo/style/css/mobile.css +4 -0
  73. package/umd/stepper/demo/style/mobile.less +10 -0
  74. package/umd/stepper/hooks/useButtonClick.d.ts +11 -0
  75. package/umd/stepper/hooks/useButtonClick.js +86 -0
  76. package/umd/stepper/hooks/useInputEvent.d.ts +9 -0
  77. package/umd/stepper/hooks/useInputEvent.js +71 -0
  78. package/umd/stepper/hooks/useValue.d.ts +6 -0
  79. package/umd/stepper/hooks/useValue.js +56 -0
  80. package/umd/stepper/index.d.ts +13 -0
  81. package/umd/stepper/index.js +185 -0
  82. package/umd/stepper/style/css/index.css +76 -0
  83. package/umd/stepper/style/css/index.d.ts +2 -0
  84. package/umd/stepper/style/css/index.js +15 -0
  85. package/umd/stepper/style/index.d.ts +2 -0
  86. package/umd/stepper/style/index.js +15 -0
  87. package/umd/stepper/style/index.less +80 -0
  88. package/umd/stepper/type.d.ts +159 -0
  89. package/umd/stepper/type.js +17 -0
  90. package/umd/style.d.ts +1 -0
  91. package/umd/style.js +4 -4
@@ -0,0 +1,4 @@
1
+ #demo-stepper .arcodesign-mobile-demo-content {
2
+ padding: 0;
3
+ background: transparent;
4
+ }
@@ -0,0 +1,10 @@
1
+ @import "../../../../style/mixin.less";
2
+
3
+ #demo-stepper {
4
+
5
+ .arcodesign-mobile-demo-content {
6
+ padding: 0;
7
+ background: transparent;
8
+ }
9
+
10
+ }
@@ -0,0 +1,11 @@
1
+ import React from 'react';
2
+ import { StepperProps } from '../type';
3
+ export default function useButtonClick(params: Required<Pick<StepperProps, 'min' | 'max' | 'step' | 'disabled' | 'digits' | 'digits' | 'equalLimitDisabled'>> & Pick<StepperProps, 'onAddButtonClick' | 'onMinusButtonClick'> & {
4
+ actualInputValue: number;
5
+ updateValue: (updater: number | ((oldValue: number) => number)) => void;
6
+ }): {
7
+ minusButtonDisable: boolean;
8
+ addButtonDisable: boolean;
9
+ handleMinusButtonClick: (e: React.MouseEvent) => void;
10
+ handleAddButtonClick: (e: React.MouseEvent) => void;
11
+ };
@@ -0,0 +1,86 @@
1
+ (function (global, factory) {
2
+ if (typeof define === "function" && define.amd) {
3
+ define(["exports", "react"], factory);
4
+ } else if (typeof exports !== "undefined") {
5
+ factory(exports, require("react"));
6
+ } else {
7
+ var mod = {
8
+ exports: {}
9
+ };
10
+ factory(mod.exports, global.react);
11
+ global.useButtonClick = mod.exports;
12
+ }
13
+ })(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react) {
14
+ "use strict";
15
+
16
+ _exports.__esModule = true;
17
+ _exports.default = useButtonClick;
18
+
19
+ function correctCalculation(leftNumber, rightNumber, operator) {
20
+ var magnification = 1e17;
21
+ var left = leftNumber * magnification;
22
+ var right = rightNumber * magnification;
23
+ return operator === '-' ? (left - right) / magnification : (left + right) / magnification;
24
+ }
25
+
26
+ function useButtonClick(params) {
27
+ var actualInputValue = params.actualInputValue,
28
+ min = params.min,
29
+ max = params.max,
30
+ step = params.step,
31
+ disabled = params.disabled,
32
+ equalLimitDisabled = params.equalLimitDisabled,
33
+ updateValue = params.updateValue,
34
+ onAddButtonClick = params.onAddButtonClick,
35
+ onMinusButtonClick = params.onMinusButtonClick;
36
+
37
+ var _useState = (0, _react.useState)(function () {
38
+ return actualInputValue === min || disabled;
39
+ }),
40
+ minusButtonDisable = _useState[0],
41
+ setMinusButtonDisable = _useState[1];
42
+
43
+ var _useState2 = (0, _react.useState)(function () {
44
+ return actualInputValue === max || disabled;
45
+ }),
46
+ addButtonDisable = _useState2[0],
47
+ setAddButtonDisable = _useState2[1];
48
+
49
+ var handleMinusButtonClick = function handleMinusButtonClick(e) {
50
+ if (minusButtonDisable) {
51
+ return;
52
+ }
53
+
54
+ updateValue(function (oldValue) {
55
+ var result = correctCalculation(oldValue, step, '-');
56
+ return result < min ? equalLimitDisabled ? oldValue : min : result;
57
+ });
58
+ onMinusButtonClick && onMinusButtonClick(e);
59
+ };
60
+
61
+ var handleAddButtonClick = function handleAddButtonClick(e) {
62
+ if (addButtonDisable) {
63
+ return;
64
+ }
65
+
66
+ updateValue(function (oldValue) {
67
+ var result = correctCalculation(Number(oldValue), step, '+');
68
+ return result > max ? equalLimitDisabled ? oldValue : max : result;
69
+ });
70
+ onAddButtonClick && onAddButtonClick(e);
71
+ }; // 当前值改变时,更新按钮状态
72
+ // Changes button status when value changed
73
+
74
+
75
+ (0, _react.useEffect)(function () {
76
+ setMinusButtonDisable(actualInputValue <= min);
77
+ setAddButtonDisable(actualInputValue >= max);
78
+ }, [actualInputValue]);
79
+ return {
80
+ minusButtonDisable: minusButtonDisable,
81
+ addButtonDisable: addButtonDisable,
82
+ handleMinusButtonClick: handleMinusButtonClick,
83
+ handleAddButtonClick: handleAddButtonClick
84
+ };
85
+ }
86
+ });
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+ import { StepperProps } from '../type';
3
+ export default function useInputEvent(params: Required<Pick<StepperProps, 'defaultValue' | 'min' | 'max' | 'digits' | 'allowEmpty'>> & Pick<StepperProps, 'onBlur' | 'onChange' | 'onInput'> & {
4
+ actualInputValue: number;
5
+ updateValue: (updater: number | ((oldValue: number) => number)) => void;
6
+ }): {
7
+ handleInput: (e: React.FocusEvent<HTMLInputElement>) => void;
8
+ handleBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
9
+ };
@@ -0,0 +1,71 @@
1
+ (function (global, factory) {
2
+ if (typeof define === "function" && define.amd) {
3
+ define(["exports", "../../_helpers"], factory);
4
+ } else if (typeof exports !== "undefined") {
5
+ factory(exports, require("../../_helpers"));
6
+ } else {
7
+ var mod = {
8
+ exports: {}
9
+ };
10
+ factory(mod.exports, global._helpers);
11
+ global.useInputEvent = mod.exports;
12
+ }
13
+ })(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _helpers) {
14
+ "use strict";
15
+
16
+ _exports.__esModule = true;
17
+ _exports.default = useInputEvent;
18
+
19
+ function useInputEvent(params) {
20
+ var defaultValue = params.defaultValue,
21
+ min = params.min,
22
+ max = params.max,
23
+ digits = params.digits,
24
+ actualInputValue = params.actualInputValue,
25
+ allowEmpty = params.allowEmpty,
26
+ updateValue = params.updateValue,
27
+ onBlur = params.onBlur,
28
+ onChange = params.onChange,
29
+ onInput = params.onInput;
30
+
31
+ var handleInput = function handleInput(e) {
32
+ var targetValue = e.target.value;
33
+ var numberValue = Number(targetValue);
34
+ var pointIndex = targetValue.indexOf('.');
35
+
36
+ if (digits > 0 && pointIndex !== -1) {
37
+ var decimalLength = targetValue.slice(pointIndex + 1).length;
38
+ updateValue(decimalLength > digits ? actualInputValue : numberValue);
39
+ } else if (allowEmpty && targetValue === '') {
40
+ updateValue(Number.MIN_VALUE);
41
+ } else {
42
+ updateValue(numberValue);
43
+ }
44
+
45
+ onInput && onInput(e);
46
+ };
47
+
48
+ var handleBlur = function handleBlur(e) {
49
+ var targetValue = e.target.value;
50
+ var numberValue = Number(targetValue);
51
+
52
+ if (allowEmpty && targetValue === '') {
53
+ updateValue(Number.MIN_VALUE);
54
+ } else if (!allowEmpty && targetValue === '') {
55
+ updateValue(defaultValue);
56
+ } else {
57
+ updateValue(Math.max(min, Math.min(max, numberValue)));
58
+ }
59
+
60
+ onBlur && onBlur(e);
61
+ };
62
+
63
+ (0, _helpers.useUpdateEffect)(function () {
64
+ onChange && onChange(actualInputValue);
65
+ }, [actualInputValue]);
66
+ return {
67
+ handleInput: handleInput,
68
+ handleBlur: handleBlur
69
+ };
70
+ }
71
+ });
@@ -0,0 +1,6 @@
1
+ import { StepperProps } from '..';
2
+ export default function useValue(params: Required<Pick<StepperProps, 'defaultValue' | 'min' | 'max' | 'digits'>> & Pick<StepperProps, 'formatter' | 'value'>): {
3
+ updateValue: (updater: number | ((oldValue: number) => number)) => void;
4
+ actualInputValue: number;
5
+ showValue: string | number;
6
+ };
@@ -0,0 +1,56 @@
1
+ (function (global, factory) {
2
+ if (typeof define === "function" && define.amd) {
3
+ define(["exports", "react"], factory);
4
+ } else if (typeof exports !== "undefined") {
5
+ factory(exports, require("react"));
6
+ } else {
7
+ var mod = {
8
+ exports: {}
9
+ };
10
+ factory(mod.exports, global.react);
11
+ global.useValue = mod.exports;
12
+ }
13
+ })(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react) {
14
+ "use strict";
15
+
16
+ _exports.__esModule = true;
17
+ _exports.default = useValue;
18
+
19
+ function useValue(params) {
20
+ var defaultValue = params.defaultValue,
21
+ formatter = params.formatter,
22
+ max = params.max,
23
+ min = params.min,
24
+ value = params.value,
25
+ digits = params.digits;
26
+
27
+ var _useState = (0, _react.useState)(defaultValue),
28
+ innerValue = _useState[0],
29
+ setInnerValue = _useState[1];
30
+
31
+ var updateValue = function updateValue(updater) {
32
+ var tempValue = typeof updater === 'function' ? updater(innerValue) : updater;
33
+
34
+ if (formatter) {
35
+ new Promise(function (resolve) {
36
+ resolve(formatter(Number(tempValue)));
37
+ }).then(function (result) {
38
+ var res = Math.max(min, Math.min(max, result));
39
+ setInnerValue(res);
40
+ });
41
+ } else {
42
+ setInnerValue(tempValue);
43
+ }
44
+ };
45
+
46
+ var actualInputValue = value !== undefined ? value : innerValue; // 将actualInputValue等于Number.MIN_VALUE的情况视为空值
47
+ // @en If actualInputValue equal Number.MIN_VALUE, actualInputValue equal ''
48
+
49
+ var showValue = actualInputValue === Number.MIN_VALUE ? '' : digits > 0 ? parseFloat(String(actualInputValue)).toFixed(digits) : actualInputValue;
50
+ return {
51
+ updateValue: updateValue,
52
+ actualInputValue: actualInputValue,
53
+ showValue: showValue
54
+ };
55
+ }
56
+ });
@@ -0,0 +1,13 @@
1
+ import React from 'react';
2
+ import { StepperProps, StepperRef } from './type';
3
+ export * from './type';
4
+ /**
5
+ * 步进器组件,支持受控模式
6
+ * @en Stepper component, provide controlled mode
7
+ * @type 数据录入
8
+ * @type_en Data Entry
9
+ * @name 步进器
10
+ * @name_en Stepper
11
+ */
12
+ declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<StepperRef>>;
13
+ export default Stepper;
@@ -0,0 +1,185 @@
1
+ (function (global, factory) {
2
+ if (typeof define === "function" && define.amd) {
3
+ define(["exports", "@arco-design/mobile-utils", "react", "../context-provider", "./hooks/useButtonClick", "./hooks/useInputEvent", "../icon", "./hooks/useValue", "./type"], factory);
4
+ } else if (typeof exports !== "undefined") {
5
+ factory(exports, require("@arco-design/mobile-utils"), require("react"), require("../context-provider"), require("./hooks/useButtonClick"), require("./hooks/useInputEvent"), require("../icon"), require("./hooks/useValue"), require("./type"));
6
+ } else {
7
+ var mod = {
8
+ exports: {}
9
+ };
10
+ factory(mod.exports, global.mobileUtils, global.react, global.contextProvider, global.useButtonClick, global.useInputEvent, global.icon, global.useValue, global.type);
11
+ global.index = mod.exports;
12
+ }
13
+ })(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _mobileUtils, _react, _contextProvider, _useButtonClick2, _useInputEvent2, _icon, _useValue2, _type) {
14
+ "use strict";
15
+
16
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
17
+
18
+ _exports.__esModule = true;
19
+ var _exportNames = {};
20
+ _exports.default = void 0;
21
+ _react = _interopRequireWildcard(_react);
22
+ _useButtonClick2 = _interopRequireDefault(_useButtonClick2);
23
+ _useInputEvent2 = _interopRequireDefault(_useInputEvent2);
24
+ _useValue2 = _interopRequireDefault(_useValue2);
25
+ Object.keys(_type).forEach(function (key) {
26
+ if (key === "default" || key === "__esModule") return;
27
+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
28
+ if (key in _exports && _exports[key] === _type[key]) return;
29
+ _exports[key] = _type[key];
30
+ });
31
+
32
+ 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); }
33
+
34
+ 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; }
35
+
36
+ /**
37
+ * 步进器组件,支持受控模式
38
+ * @en Stepper component, provide controlled mode
39
+ * @type 数据录入
40
+ * @type_en Data Entry
41
+ * @name 步进器
42
+ * @name_en Stepper
43
+ */
44
+ var Stepper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
45
+ var _props$className = props.className,
46
+ className = _props$className === void 0 ? '' : _props$className,
47
+ style = props.style,
48
+ inputStyle = props.inputStyle,
49
+ _props$inputClass = props.inputClass,
50
+ inputClass = _props$inputClass === void 0 ? '' : _props$inputClass,
51
+ value = props.value,
52
+ _props$defaultValue = props.defaultValue,
53
+ defaultValue = _props$defaultValue === void 0 ? 1 : _props$defaultValue,
54
+ _props$allowEmpty = props.allowEmpty,
55
+ allowEmpty = _props$allowEmpty === void 0 ? false : _props$allowEmpty,
56
+ _props$digits = props.digits,
57
+ digits = _props$digits === void 0 ? 0 : _props$digits,
58
+ _props$disabled = props.disabled,
59
+ disabled = _props$disabled === void 0 ? false : _props$disabled,
60
+ _props$inputReadonly = props.inputReadonly,
61
+ inputReadonly = _props$inputReadonly === void 0 ? false : _props$inputReadonly,
62
+ _props$max = props.max,
63
+ max = _props$max === void 0 ? Infinity : _props$max,
64
+ _props$min = props.min,
65
+ min = _props$min === void 0 ? 1 : _props$min,
66
+ _props$equalLimitDisa = props.equalLimitDisabled,
67
+ equalLimitDisabled = _props$equalLimitDisa === void 0 ? false : _props$equalLimitDisa,
68
+ _props$step = props.step,
69
+ step = _props$step === void 0 ? 1 : _props$step,
70
+ _props$theme = props.theme,
71
+ theme = _props$theme === void 0 ? 'default' : _props$theme,
72
+ formatter = props.formatter,
73
+ addButton = props.addButton,
74
+ minusButton = props.minusButton,
75
+ renderContent = props.renderContent,
76
+ onBlur = props.onBlur,
77
+ onChange = props.onChange,
78
+ onFocus = props.onFocus,
79
+ onAddButtonClick = props.onAddButtonClick,
80
+ onMinusButtonClick = props.onMinusButtonClick,
81
+ onClick = props.onClick,
82
+ onInput = props.onInput; // 值的相关逻辑
83
+ // @en The logic is that handle value
84
+
85
+ var _useValue = (0, _useValue2.default)({
86
+ defaultValue: defaultValue,
87
+ formatter: formatter,
88
+ min: min,
89
+ max: max,
90
+ value: value,
91
+ digits: digits
92
+ }),
93
+ updateValue = _useValue.updateValue,
94
+ actualInputValue = _useValue.actualInputValue,
95
+ showValue = _useValue.showValue; // 按钮点击的相关逻辑
96
+ // @en The logic is that handle button click
97
+
98
+
99
+ var _useButtonClick = (0, _useButtonClick2.default)({
100
+ actualInputValue: actualInputValue,
101
+ min: min,
102
+ max: max,
103
+ step: step,
104
+ disabled: disabled,
105
+ digits: digits,
106
+ equalLimitDisabled: equalLimitDisabled,
107
+ updateValue: updateValue,
108
+ onAddButtonClick: onAddButtonClick,
109
+ onMinusButtonClick: onMinusButtonClick
110
+ }),
111
+ minusButtonDisable = _useButtonClick.minusButtonDisable,
112
+ addButtonDisable = _useButtonClick.addButtonDisable,
113
+ handleAddButtonClick = _useButtonClick.handleAddButtonClick,
114
+ handleMinusButtonClick = _useButtonClick.handleMinusButtonClick; // 输入框操作的相关逻辑
115
+ // @en The logic is that handle input operation
116
+
117
+
118
+ var _useInputEvent = (0, _useInputEvent2.default)({
119
+ defaultValue: defaultValue,
120
+ min: min,
121
+ max: max,
122
+ digits: digits,
123
+ actualInputValue: actualInputValue,
124
+ allowEmpty: allowEmpty,
125
+ updateValue: updateValue,
126
+ onBlur: onBlur,
127
+ onChange: onChange,
128
+ onInput: onInput
129
+ }),
130
+ handleInput = _useInputEvent.handleInput,
131
+ handleBlur = _useInputEvent.handleBlur;
132
+
133
+ var domRef = (0, _react.useRef)(null);
134
+ var inputRef = (0, _react.useRef)(null);
135
+ (0, _react.useImperativeHandle)(ref, function () {
136
+ return {
137
+ dom: domRef.current,
138
+ input: inputRef.current,
139
+ changeValue: function changeValue(newValue) {
140
+ var tempValue = newValue != null ? newValue : defaultValue;
141
+ tempValue = Math.min(max, Math.max(tempValue, min));
142
+ updateValue(tempValue);
143
+ }
144
+ };
145
+ });
146
+ return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
147
+ var prefixCls = _ref.prefixCls;
148
+ return /*#__PURE__*/_react.default.createElement("div", {
149
+ className: (0, _mobileUtils.cls)(prefixCls + "-stepper", prefixCls + "-" + theme, className),
150
+ style: style,
151
+ ref: domRef,
152
+ onClick: onClick
153
+ }, /*#__PURE__*/_react.default.createElement("div", {
154
+ onClick: handleMinusButtonClick
155
+ }, minusButton || /*#__PURE__*/_react.default.createElement("div", {
156
+ className: (0, _mobileUtils.cls)(prefixCls + "-stepper-minus-button")
157
+ }, /*#__PURE__*/_react.default.createElement(_icon.IconMinus, {
158
+ className: (0, _mobileUtils.cls)(prefixCls + "-stepper-minus-button-icon", {
159
+ disabled: minusButtonDisable
160
+ })
161
+ }))), renderContent ? renderContent(actualInputValue) : /*#__PURE__*/_react.default.createElement("input", {
162
+ style: inputStyle,
163
+ className: (0, _mobileUtils.cls)(prefixCls + "-stepper-input", inputClass),
164
+ onFocus: onFocus,
165
+ onInput: handleInput,
166
+ onBlur: handleBlur,
167
+ disabled: disabled,
168
+ value: showValue,
169
+ readOnly: inputReadonly,
170
+ ref: inputRef,
171
+ type: "number"
172
+ }), /*#__PURE__*/_react.default.createElement("div", {
173
+ onClick: handleAddButtonClick
174
+ }, addButton || /*#__PURE__*/_react.default.createElement("div", {
175
+ className: (0, _mobileUtils.cls)(prefixCls + "-stepper-add-button")
176
+ }, /*#__PURE__*/_react.default.createElement(_icon.IconAdd, {
177
+ className: (0, _mobileUtils.cls)(prefixCls + "-stepper-add-button-icon", {
178
+ disabled: addButtonDisable
179
+ })
180
+ }))));
181
+ });
182
+ });
183
+ var _default = Stepper;
184
+ _exports.default = _default;
185
+ });
@@ -0,0 +1,76 @@
1
+ .arco-stepper {
2
+ display: -webkit-box;
3
+ display: -webkit-flex;
4
+ display: flex;
5
+ font-size: 0.28rem ;
6
+ }
7
+ .arco-stepper.arco-square {
8
+ border: 1PX solid #f2f3f5 ;
9
+ border-radius: 0.04rem ;
10
+ }
11
+ .arco-stepper.arco-square .arco-stepper-add-button,
12
+ .arco-stepper.arco-square .arco-stepper-minus-button,
13
+ .arco-stepper.arco-square .arco-stepper-input {
14
+ background: #ffffff ;
15
+ }
16
+ .arco-stepper.arco-square .arco-stepper-input {
17
+ border-left: 1PX solid #f2f3f5 ;
18
+ border-right: 1PX solid #f2f3f5 ;
19
+ }
20
+ .arco-stepper.arco-round .arco-stepper-minus-button,
21
+ .arco-stepper.arco-round .arco-stepper-add-button {
22
+ border-radius: 50% ;
23
+ }
24
+ .arco-stepper.arco-round .arco-stepper-input {
25
+ background: transparent ;
26
+ }
27
+ .arco-stepper-minus-button {
28
+ display: -webkit-box;
29
+ display: -webkit-flex;
30
+ display: flex;
31
+ -webkit-box-align: center;
32
+ -webkit-align-items: center;
33
+ align-items: center;
34
+ -webkit-box-pack: center;
35
+ -webkit-justify-content: center;
36
+ justify-content: center;
37
+ font-size: 0.2rem ;
38
+ width: 0.56rem ;
39
+ height: 0.56rem ;
40
+ background: #f7f8fa ;
41
+ }
42
+ .arco-stepper-minus-button-icon {
43
+ color: #1d2129 ;
44
+ }
45
+ .arco-stepper-minus-button-icon.disabled {
46
+ color: #c9cdd4 ;
47
+ }
48
+ .arco-stepper-input {
49
+ text-align: center;
50
+ width: 0.8rem ;
51
+ height: 0.56rem ;
52
+ background: #f7f8fa ;
53
+ color: #1d2129 ;
54
+ margin: 0 1PX ;
55
+ }
56
+ .arco-stepper-add-button {
57
+ display: -webkit-box;
58
+ display: -webkit-flex;
59
+ display: flex;
60
+ -webkit-box-align: center;
61
+ -webkit-align-items: center;
62
+ align-items: center;
63
+ -webkit-box-pack: center;
64
+ -webkit-justify-content: center;
65
+ justify-content: center;
66
+ font-size: 0.2rem ;
67
+ width: 0.56rem ;
68
+ height: 0.56rem ;
69
+ background: #f7f8fa ;
70
+ }
71
+ .arco-stepper-add-button-icon {
72
+ color: #1d2129 ;
73
+ }
74
+ .arco-stepper-add-button-icon.disabled {
75
+ color: #c9cdd4 ;
76
+ }
@@ -0,0 +1,2 @@
1
+ import '../../../../style/css/public.css';
2
+ import './index.css';
@@ -0,0 +1,15 @@
1
+ (function (global, factory) {
2
+ if (typeof define === "function" && define.amd) {
3
+ define(["../../../../style/css/public.css", "./index.css"], factory);
4
+ } else if (typeof exports !== "undefined") {
5
+ factory(require("../../../../style/css/public.css"), require("./index.css"));
6
+ } else {
7
+ var mod = {
8
+ exports: {}
9
+ };
10
+ factory(global._public, global.index);
11
+ global.index = mod.exports;
12
+ }
13
+ })(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_public, _index) {
14
+ "use strict";
15
+ });
@@ -0,0 +1,2 @@
1
+ import '../../../style/public.less';
2
+ import './index.less';
@@ -0,0 +1,15 @@
1
+ (function (global, factory) {
2
+ if (typeof define === "function" && define.amd) {
3
+ define(["../../../style/public.less", "./index.less"], factory);
4
+ } else if (typeof exports !== "undefined") {
5
+ factory(require("../../../style/public.less"), require("./index.less"));
6
+ } else {
7
+ var mod = {
8
+ exports: {}
9
+ };
10
+ factory(global._public, global.index);
11
+ global.index = mod.exports;
12
+ }
13
+ })(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_public, _index) {
14
+ "use strict";
15
+ });
@@ -0,0 +1,80 @@
1
+ @import '../../../style/mixin.less';
2
+
3
+ .@{prefix}-stepper {
4
+ display: flex;
5
+ .use-var(font-size, stepper-font-size);
6
+
7
+ &.@{prefix}-square {
8
+ .use-var(border, stepper-square-border);
9
+ .use-var(border-radius, stepper-square-border-radius);
10
+
11
+ .@{prefix}-stepper {
12
+ &-add-button,
13
+ &-minus-button,
14
+ &-input {
15
+ .use-var(background, stepper-square-background-color);
16
+ }
17
+ &-input {
18
+ .use-var(border-left, stepper-square-border);
19
+ .use-var(border-right, stepper-square-border);
20
+ }
21
+ }
22
+ }
23
+
24
+ &.@{prefix}-round {
25
+ .@{prefix}-stepper {
26
+ &-minus-button,
27
+ &-add-button {
28
+ .use-var(border-radius, stepper-round-button-border-radius);
29
+ }
30
+ &-input {
31
+ .use-var(background, stepper-round-input-background-color);
32
+ }
33
+ }
34
+ }
35
+
36
+ &-minus-button {
37
+ display: flex;
38
+ align-items: center;
39
+ justify-content: center;
40
+ .use-var(font-size, stepper-button-icon-size);
41
+ .use-var(width, stepper-button-size);
42
+ .use-var(height, stepper-button-size);
43
+ .use-var(background, stepper-default-background-color);
44
+
45
+ &-icon {
46
+ .use-var(color, stepper-content-color);
47
+
48
+ &.disabled {
49
+ .use-var(color, stepper-disable-color);
50
+ }
51
+ }
52
+ }
53
+
54
+ &-input {
55
+ text-align: center;
56
+ .use-var(width, stepper-input-width);
57
+ .use-var(height, stepper-input-height);
58
+ .use-var(background, stepper-default-background-color);
59
+ .use-var(color, stepper-content-color);
60
+ .use-var(margin, stepper-input-margin);
61
+ }
62
+
63
+ &-add-button {
64
+ display: flex;
65
+ align-items: center;
66
+ justify-content: center;
67
+ .use-var(font-size, stepper-button-icon-size);
68
+ .use-var(width, stepper-button-size);
69
+ .use-var(height, stepper-button-size);
70
+ .use-var(background, stepper-default-background-color);
71
+
72
+ &-icon {
73
+ .use-var(color, stepper-content-color);
74
+
75
+ &.disabled {
76
+ .use-var(color, stepper-disable-color);
77
+ }
78
+ }
79
+ }
80
+ }