@arco-design/mobile-react 2.22.3 → 2.24.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 (236) hide show
  1. package/CHANGELOG.md +32 -0
  2. package/README.en-US.md +2 -2
  3. package/README.md +2 -2
  4. package/cjs/_helpers/render.d.ts +3 -1
  5. package/cjs/_helpers/render.js +10 -3
  6. package/cjs/action-sheet/index.d.ts +5 -5
  7. package/cjs/action-sheet/index.js +4 -3
  8. package/cjs/action-sheet/methods.d.ts +1 -1
  9. package/cjs/badge/style/css/index.css +1 -2
  10. package/cjs/checkbox/checkbox.js +4 -0
  11. package/cjs/circle-progress/index.js +4 -0
  12. package/cjs/context-provider/index.d.ts +4 -0
  13. package/cjs/context-provider/index.js +14 -2
  14. package/cjs/dialog/index.d.ts +8 -8
  15. package/cjs/dialog/index.js +3 -2
  16. package/cjs/dialog/methods.d.ts +3 -3
  17. package/cjs/dialog/style/css/index.css +1 -2
  18. package/cjs/image-picker/index.js +18 -12
  19. package/cjs/image-picker/type.d.ts +10 -0
  20. package/cjs/image-preview/index.d.ts +3 -3
  21. package/cjs/image-preview/index.js +3 -2
  22. package/cjs/image-preview/methods.d.ts +2 -1
  23. package/cjs/image-preview/methods.js +2 -2
  24. package/cjs/index.d.ts +1 -0
  25. package/cjs/index.js +5 -1
  26. package/cjs/input/hooks.js +1 -0
  27. package/cjs/input/index.d.ts +5 -0
  28. package/cjs/input/index.js +6 -2
  29. package/cjs/input/style/css/index.css +1 -0
  30. package/cjs/input/style/index.less +1 -0
  31. package/cjs/masking/index.d.ts +4 -14
  32. package/cjs/masking/index.js +3 -2
  33. package/cjs/masking/methods.d.ts +3 -2
  34. package/cjs/masking/methods.js +2 -2
  35. package/cjs/nav-bar/index.d.ts +12 -0
  36. package/cjs/nav-bar/index.js +8 -2
  37. package/cjs/notify/index.d.ts +12 -12
  38. package/cjs/notify/index.js +3 -2
  39. package/cjs/notify/methods.d.ts +2 -1
  40. package/cjs/notify/methods.js +2 -2
  41. package/cjs/picker-view/components/picker-cell.js +3 -1
  42. package/cjs/popup/index.d.ts +4 -4
  43. package/cjs/popup/index.js +3 -2
  44. package/cjs/popup/methods.d.ts +1 -1
  45. package/cjs/popup-swiper/index.d.ts +12 -6
  46. package/cjs/popup-swiper/index.js +3 -2
  47. package/cjs/popup-swiper/methods.d.ts +1 -1
  48. package/cjs/progress/index.js +4 -0
  49. package/cjs/rate/index.js +5 -0
  50. package/cjs/slider/index.js +6 -1
  51. package/cjs/stepper/demo/style/css/mobile.css +4 -0
  52. package/cjs/stepper/demo/style/mobile.less +10 -0
  53. package/cjs/stepper/hooks/useButtonClick.d.ts +11 -0
  54. package/cjs/stepper/hooks/useButtonClick.js +74 -0
  55. package/cjs/stepper/hooks/useInputEvent.d.ts +9 -0
  56. package/cjs/stepper/hooks/useInputEvent.js +59 -0
  57. package/cjs/stepper/hooks/useValue.d.ts +6 -0
  58. package/cjs/stepper/hooks/useValue.js +44 -0
  59. package/cjs/stepper/index.d.ts +13 -0
  60. package/cjs/stepper/index.js +190 -0
  61. package/cjs/stepper/style/css/index.css +76 -0
  62. package/cjs/stepper/style/css/index.d.ts +2 -0
  63. package/cjs/stepper/style/css/index.js +5 -0
  64. package/cjs/stepper/style/index.d.ts +2 -0
  65. package/cjs/stepper/style/index.js +5 -0
  66. package/cjs/stepper/style/index.less +80 -0
  67. package/cjs/stepper/type.d.ts +159 -0
  68. package/cjs/stepper/type.js +3 -0
  69. package/cjs/style.d.ts +1 -0
  70. package/cjs/style.js +2 -0
  71. package/cjs/swipe-action/index.d.ts +1 -0
  72. package/cjs/swipe-action/index.js +10 -0
  73. package/cjs/switch/index.js +4 -0
  74. package/cjs/toast/index.d.ts +18 -18
  75. package/cjs/toast/index.js +3 -2
  76. package/cjs/toast/methods.d.ts +2 -1
  77. package/cjs/toast/methods.js +2 -2
  78. package/dist/index.js +463 -52
  79. package/dist/index.min.js +3 -3
  80. package/dist/style.css +77 -113
  81. package/dist/style.min.css +1 -1
  82. package/esm/_helpers/render.d.ts +3 -1
  83. package/esm/_helpers/render.js +10 -3
  84. package/esm/action-sheet/index.d.ts +5 -5
  85. package/esm/action-sheet/index.js +4 -3
  86. package/esm/action-sheet/methods.d.ts +1 -1
  87. package/esm/badge/style/css/index.css +1 -2
  88. package/esm/checkbox/checkbox.js +4 -0
  89. package/esm/circle-progress/index.js +4 -0
  90. package/esm/context-provider/index.d.ts +4 -0
  91. package/esm/context-provider/index.js +13 -2
  92. package/esm/dialog/index.d.ts +8 -8
  93. package/esm/dialog/index.js +3 -2
  94. package/esm/dialog/methods.d.ts +3 -3
  95. package/esm/dialog/style/css/index.css +1 -2
  96. package/esm/image-picker/index.js +18 -12
  97. package/esm/image-picker/type.d.ts +10 -0
  98. package/esm/image-preview/index.d.ts +3 -3
  99. package/esm/image-preview/index.js +3 -2
  100. package/esm/image-preview/methods.d.ts +2 -1
  101. package/esm/image-preview/methods.js +2 -2
  102. package/esm/index.d.ts +1 -0
  103. package/esm/index.js +1 -0
  104. package/esm/input/hooks.js +1 -0
  105. package/esm/input/index.d.ts +5 -0
  106. package/esm/input/index.js +6 -2
  107. package/esm/input/style/css/index.css +1 -0
  108. package/esm/input/style/index.less +1 -0
  109. package/esm/masking/index.d.ts +4 -14
  110. package/esm/masking/index.js +3 -2
  111. package/esm/masking/methods.d.ts +3 -2
  112. package/esm/masking/methods.js +2 -2
  113. package/esm/nav-bar/index.d.ts +12 -0
  114. package/esm/nav-bar/index.js +8 -2
  115. package/esm/notify/index.d.ts +12 -12
  116. package/esm/notify/index.js +3 -2
  117. package/esm/notify/methods.d.ts +2 -1
  118. package/esm/notify/methods.js +2 -2
  119. package/esm/picker-view/components/picker-cell.js +3 -1
  120. package/esm/popup/index.d.ts +4 -4
  121. package/esm/popup/index.js +3 -2
  122. package/esm/popup/methods.d.ts +1 -1
  123. package/esm/popup-swiper/index.d.ts +12 -6
  124. package/esm/popup-swiper/index.js +3 -2
  125. package/esm/popup-swiper/methods.d.ts +1 -1
  126. package/esm/progress/index.js +4 -0
  127. package/esm/rate/index.js +5 -0
  128. package/esm/slider/index.js +6 -1
  129. package/esm/stepper/demo/style/css/mobile.css +4 -0
  130. package/esm/stepper/demo/style/mobile.less +10 -0
  131. package/esm/stepper/hooks/useButtonClick.d.ts +11 -0
  132. package/esm/stepper/hooks/useButtonClick.js +69 -0
  133. package/esm/stepper/hooks/useInputEvent.d.ts +9 -0
  134. package/esm/stepper/hooks/useInputEvent.js +53 -0
  135. package/esm/stepper/hooks/useValue.d.ts +6 -0
  136. package/esm/stepper/hooks/useValue.js +38 -0
  137. package/esm/stepper/index.d.ts +13 -0
  138. package/esm/stepper/index.js +163 -0
  139. package/esm/stepper/style/css/index.css +76 -0
  140. package/esm/stepper/style/css/index.d.ts +2 -0
  141. package/esm/stepper/style/css/index.js +2 -0
  142. package/esm/stepper/style/index.d.ts +2 -0
  143. package/esm/stepper/style/index.js +2 -0
  144. package/esm/stepper/style/index.less +80 -0
  145. package/esm/stepper/type.d.ts +159 -0
  146. package/esm/stepper/type.js +1 -0
  147. package/esm/style.d.ts +1 -0
  148. package/esm/style.js +1 -0
  149. package/esm/swipe-action/index.d.ts +1 -0
  150. package/esm/swipe-action/index.js +1 -0
  151. package/esm/switch/index.js +4 -0
  152. package/esm/toast/index.d.ts +18 -18
  153. package/esm/toast/index.js +3 -2
  154. package/esm/toast/methods.d.ts +2 -1
  155. package/esm/toast/methods.js +2 -2
  156. package/package.json +3 -3
  157. package/style/css/public.css +4 -4
  158. package/tokens/app/arcodesign/default/css-variables.less +15 -0
  159. package/tokens/app/arcodesign/default/index.d.ts +15 -0
  160. package/tokens/app/arcodesign/default/index.js +16 -1
  161. package/tokens/app/arcodesign/default/index.json +180 -0
  162. package/tokens/app/arcodesign/default/index.less +15 -0
  163. package/umd/_helpers/render.d.ts +3 -1
  164. package/umd/_helpers/render.js +13 -7
  165. package/umd/action-sheet/index.d.ts +5 -5
  166. package/umd/action-sheet/index.js +4 -3
  167. package/umd/action-sheet/methods.d.ts +1 -1
  168. package/umd/badge/style/css/index.css +1 -2
  169. package/umd/checkbox/checkbox.js +4 -0
  170. package/umd/circle-progress/index.js +4 -0
  171. package/umd/context-provider/index.d.ts +4 -0
  172. package/umd/context-provider/index.js +13 -1
  173. package/umd/dialog/index.d.ts +8 -8
  174. package/umd/dialog/index.js +3 -2
  175. package/umd/dialog/methods.d.ts +3 -3
  176. package/umd/dialog/style/css/index.css +1 -2
  177. package/umd/image-picker/index.js +18 -12
  178. package/umd/image-picker/type.d.ts +10 -0
  179. package/umd/image-preview/index.d.ts +3 -3
  180. package/umd/image-preview/index.js +3 -2
  181. package/umd/image-preview/methods.d.ts +2 -1
  182. package/umd/image-preview/methods.js +2 -2
  183. package/umd/index.d.ts +1 -0
  184. package/umd/index.js +7 -5
  185. package/umd/input/hooks.js +1 -0
  186. package/umd/input/index.d.ts +5 -0
  187. package/umd/input/index.js +6 -2
  188. package/umd/input/style/css/index.css +1 -0
  189. package/umd/input/style/index.less +1 -0
  190. package/umd/masking/index.d.ts +4 -14
  191. package/umd/masking/index.js +3 -2
  192. package/umd/masking/methods.d.ts +3 -2
  193. package/umd/masking/methods.js +2 -2
  194. package/umd/nav-bar/index.d.ts +12 -0
  195. package/umd/nav-bar/index.js +8 -2
  196. package/umd/notify/index.d.ts +12 -12
  197. package/umd/notify/index.js +3 -2
  198. package/umd/notify/methods.d.ts +2 -1
  199. package/umd/notify/methods.js +2 -2
  200. package/umd/picker-view/components/picker-cell.js +3 -1
  201. package/umd/popup/index.d.ts +4 -4
  202. package/umd/popup/index.js +3 -2
  203. package/umd/popup/methods.d.ts +1 -1
  204. package/umd/popup-swiper/index.d.ts +12 -6
  205. package/umd/popup-swiper/index.js +3 -2
  206. package/umd/popup-swiper/methods.d.ts +1 -1
  207. package/umd/progress/index.js +4 -0
  208. package/umd/rate/index.js +5 -0
  209. package/umd/slider/index.js +6 -1
  210. package/umd/stepper/demo/style/css/mobile.css +4 -0
  211. package/umd/stepper/demo/style/mobile.less +10 -0
  212. package/umd/stepper/hooks/useButtonClick.d.ts +11 -0
  213. package/umd/stepper/hooks/useButtonClick.js +86 -0
  214. package/umd/stepper/hooks/useInputEvent.d.ts +9 -0
  215. package/umd/stepper/hooks/useInputEvent.js +71 -0
  216. package/umd/stepper/hooks/useValue.d.ts +6 -0
  217. package/umd/stepper/hooks/useValue.js +56 -0
  218. package/umd/stepper/index.d.ts +13 -0
  219. package/umd/stepper/index.js +191 -0
  220. package/umd/stepper/style/css/index.css +76 -0
  221. package/umd/stepper/style/css/index.d.ts +2 -0
  222. package/umd/stepper/style/css/index.js +15 -0
  223. package/umd/stepper/style/index.d.ts +2 -0
  224. package/umd/stepper/style/index.js +15 -0
  225. package/umd/stepper/style/index.less +80 -0
  226. package/umd/stepper/type.d.ts +159 -0
  227. package/umd/stepper/type.js +17 -0
  228. package/umd/style.d.ts +1 -0
  229. package/umd/style.js +4 -4
  230. package/umd/swipe-action/index.d.ts +1 -0
  231. package/umd/swipe-action/index.js +11 -4
  232. package/umd/switch/index.js +4 -0
  233. package/umd/toast/index.d.ts +18 -18
  234. package/umd/toast/index.js +3 -2
  235. package/umd/toast/methods.d.ts +2 -1
  236. package/umd/toast/methods.js +2 -2
@@ -0,0 +1,59 @@
1
+ "use strict";
2
+
3
+ exports.__esModule = true;
4
+ exports.default = useInputEvent;
5
+
6
+ var _helpers = require("../../_helpers");
7
+
8
+ function useInputEvent(params) {
9
+ var defaultValue = params.defaultValue,
10
+ min = params.min,
11
+ max = params.max,
12
+ digits = params.digits,
13
+ actualInputValue = params.actualInputValue,
14
+ allowEmpty = params.allowEmpty,
15
+ updateValue = params.updateValue,
16
+ onBlur = params.onBlur,
17
+ onChange = params.onChange,
18
+ onInput = params.onInput;
19
+
20
+ var handleInput = function handleInput(e) {
21
+ var targetValue = e.target.value;
22
+ var numberValue = Number(targetValue);
23
+ var pointIndex = targetValue.indexOf('.');
24
+
25
+ if (digits > 0 && pointIndex !== -1) {
26
+ var decimalLength = targetValue.slice(pointIndex + 1).length;
27
+ updateValue(decimalLength > digits ? actualInputValue : numberValue);
28
+ } else if (allowEmpty && targetValue === '') {
29
+ updateValue(Number.MIN_VALUE);
30
+ } else {
31
+ updateValue(numberValue);
32
+ }
33
+
34
+ onInput && onInput(e);
35
+ };
36
+
37
+ var handleBlur = function handleBlur(e) {
38
+ var targetValue = e.target.value;
39
+ var numberValue = Number(targetValue);
40
+
41
+ if (allowEmpty && targetValue === '') {
42
+ updateValue(Number.MIN_VALUE);
43
+ } else if (!allowEmpty && targetValue === '') {
44
+ updateValue(defaultValue);
45
+ } else {
46
+ updateValue(Math.max(min, Math.min(max, numberValue)));
47
+ }
48
+
49
+ onBlur && onBlur(e);
50
+ };
51
+
52
+ (0, _helpers.useUpdateEffect)(function () {
53
+ onChange && onChange(actualInputValue);
54
+ }, [actualInputValue]);
55
+ return {
56
+ handleInput: handleInput,
57
+ handleBlur: handleBlur
58
+ };
59
+ }
@@ -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,44 @@
1
+ "use strict";
2
+
3
+ exports.__esModule = true;
4
+ exports.default = useValue;
5
+
6
+ var _react = require("react");
7
+
8
+ function useValue(params) {
9
+ var defaultValue = params.defaultValue,
10
+ formatter = params.formatter,
11
+ max = params.max,
12
+ min = params.min,
13
+ value = params.value,
14
+ digits = params.digits;
15
+
16
+ var _useState = (0, _react.useState)(defaultValue),
17
+ innerValue = _useState[0],
18
+ setInnerValue = _useState[1];
19
+
20
+ var updateValue = function updateValue(updater) {
21
+ var tempValue = typeof updater === 'function' ? updater(innerValue) : updater;
22
+
23
+ if (formatter) {
24
+ new Promise(function (resolve) {
25
+ resolve(formatter(Number(tempValue)));
26
+ }).then(function (result) {
27
+ var res = Math.max(min, Math.min(max, result));
28
+ setInnerValue(res);
29
+ });
30
+ } else {
31
+ setInnerValue(tempValue);
32
+ }
33
+ };
34
+
35
+ var actualInputValue = value !== undefined ? value : innerValue; // 将actualInputValue等于Number.MIN_VALUE的情况视为空值
36
+ // @en If actualInputValue equal Number.MIN_VALUE, actualInputValue equal ''
37
+
38
+ var showValue = actualInputValue === Number.MIN_VALUE ? '' : digits > 0 ? parseFloat(String(actualInputValue)).toFixed(digits) : actualInputValue;
39
+ return {
40
+ updateValue: updateValue,
41
+ actualInputValue: actualInputValue,
42
+ showValue: showValue
43
+ };
44
+ }
@@ -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,190 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ exports.__esModule = true;
6
+ var _exportNames = {};
7
+ exports.default = void 0;
8
+
9
+ var _mobileUtils = require("@arco-design/mobile-utils");
10
+
11
+ var _react = _interopRequireWildcard(require("react"));
12
+
13
+ var _contextProvider = require("../context-provider");
14
+
15
+ var _useButtonClick2 = _interopRequireDefault(require("./hooks/useButtonClick"));
16
+
17
+ var _useInputEvent2 = _interopRequireDefault(require("./hooks/useInputEvent"));
18
+
19
+ var _icon = require("../icon");
20
+
21
+ var _useValue2 = _interopRequireDefault(require("./hooks/useValue"));
22
+
23
+ var _type = require("./type");
24
+
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
+ "aria-label": "decrease",
155
+ onClick: handleMinusButtonClick
156
+ }, minusButton || /*#__PURE__*/_react.default.createElement("div", {
157
+ className: (0, _mobileUtils.cls)(prefixCls + "-stepper-minus-button")
158
+ }, /*#__PURE__*/_react.default.createElement(_icon.IconMinus, {
159
+ className: (0, _mobileUtils.cls)(prefixCls + "-stepper-minus-button-icon", {
160
+ disabled: minusButtonDisable
161
+ })
162
+ }))), renderContent ? renderContent(actualInputValue) : /*#__PURE__*/_react.default.createElement("input", {
163
+ style: inputStyle,
164
+ className: (0, _mobileUtils.cls)(prefixCls + "-stepper-input", inputClass),
165
+ onFocus: onFocus,
166
+ onInput: handleInput,
167
+ onBlur: handleBlur,
168
+ disabled: disabled,
169
+ value: showValue,
170
+ readOnly: inputReadonly,
171
+ ref: inputRef,
172
+ type: "number",
173
+ role: "spinbutton",
174
+ "aria-valuenow": Number(showValue),
175
+ "aria-valuemax": max,
176
+ "aria-valuemin": min
177
+ }), /*#__PURE__*/_react.default.createElement("div", {
178
+ "aria-label": "increase",
179
+ onClick: handleAddButtonClick
180
+ }, addButton || /*#__PURE__*/_react.default.createElement("div", {
181
+ className: (0, _mobileUtils.cls)(prefixCls + "-stepper-add-button")
182
+ }, /*#__PURE__*/_react.default.createElement(_icon.IconAdd, {
183
+ className: (0, _mobileUtils.cls)(prefixCls + "-stepper-add-button-icon", {
184
+ disabled: addButtonDisable
185
+ })
186
+ }))));
187
+ });
188
+ });
189
+ var _default = Stepper;
190
+ exports.default = _default;
@@ -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,5 @@
1
+ "use strict";
2
+
3
+ require("../../../../style/css/public.css");
4
+
5
+ require("./index.css");
@@ -0,0 +1,2 @@
1
+ import '../../../style/public.less';
2
+ import './index.less';
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ require("../../../style/public.less");
4
+
5
+ require("./index.less");
@@ -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
+ }
@@ -0,0 +1,159 @@
1
+ import { ReactNode } from 'react';
2
+ export interface StepperProps {
3
+ /**
4
+ * 自定义类名
5
+ * @en Custom classname
6
+ */
7
+ className?: string;
8
+ /**
9
+ * 自定义样式
10
+ * @en Custom stylesheet
11
+ * */
12
+ style?: React.CSSProperties;
13
+ /**
14
+ * input样式
15
+ * @en Input stylesheet
16
+ */
17
+ inputStyle?: React.CSSProperties;
18
+ /**
19
+ * input类名
20
+ * @en Input class
21
+ */
22
+ inputClass?: string;
23
+ /**
24
+ * 绑定值,传入即受控
25
+ * @en Bundled value (Controlled)
26
+ */
27
+ value?: number;
28
+ /**
29
+ * 默认值
30
+ * @en Default value
31
+ * @default 1
32
+ */
33
+ defaultValue?: number;
34
+ /**
35
+ * 是否允许内容为空
36
+ * @en Whether the content is allowed to be empty
37
+ * @default false
38
+ */
39
+ allowEmpty?: boolean;
40
+ /**
41
+ * 格式化到小数点后固定位数,设置为 0 表示格式化到整数
42
+ * @en Formatted to a decimal point after a fixed number of digits, set to 0 indicates formatting to an integer
43
+ * @default 0
44
+ */
45
+ digits?: number;
46
+ /**
47
+ * 是否禁用步进器
48
+ * @en Whether to disable the stepper
49
+ * @default false
50
+ */
51
+ disabled?: boolean;
52
+ /**
53
+ * 输入框只读状态
54
+ * @en Input read only status
55
+ * @default false
56
+ */
57
+ inputReadonly?: boolean;
58
+ /**
59
+ * 最大值
60
+ * @en Max value
61
+ * @default Infinity
62
+ */
63
+ max?: number;
64
+ /**
65
+ * 最小值
66
+ * @en Min value
67
+ * @default 1
68
+ */
69
+ min?: number;
70
+ /**
71
+ * 是否允许操作大于/小于极限值时,操作结果等于极限值
72
+ * @en If an operation is allowed to be greater more/less than the limit value, the result of the operation is equal to the limit value
73
+ */
74
+ equalLimitDisabled?: boolean;
75
+ /**
76
+ * 递增/减值
77
+ * @en Incremental/Impairment value
78
+ * @default 1
79
+ */
80
+ step?: number;
81
+ /**
82
+ * 边框风格
83
+ * @en Border style
84
+ * @default "default"
85
+ */
86
+ theme?: 'square' | 'round' | 'default';
87
+ /**
88
+ * 格式化内部值(优先级最高)
89
+ * @en Format the inner value
90
+ */
91
+ formatter?: (innerValue: number) => number | Promise<number>;
92
+ /**
93
+ * 增加按钮
94
+ * @en Add button
95
+ */
96
+ addButton?: ReactNode;
97
+ /**
98
+ * 删除按钮
99
+ * @en Delete button
100
+ */
101
+ minusButton?: ReactNode;
102
+ /**
103
+ * 自定义输入框函数
104
+ * @en The function of customizing the input
105
+ */
106
+ renderContent?: (innerValue: number) => ReactNode;
107
+ /**
108
+ * 输入框失去焦点时触发
109
+ * @en Triggers when the input loses focus
110
+ */
111
+ onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
112
+ /**
113
+ * 数据变化时的触发
114
+ * @en Triggers when the data change
115
+ */
116
+ onChange?: (value: number | null) => void;
117
+ /**
118
+ * 输入框获得焦点时触发
119
+ * @en Triggers when the input gets focus
120
+ */
121
+ onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
122
+ /**
123
+ * 点击增加按钮时触发
124
+ * @en Triggers when the add button is clicked
125
+ */
126
+ onAddButtonClick?: (e: React.MouseEvent) => void;
127
+ /**
128
+ * 点击减少按钮时触发
129
+ * @en Triggers when the minus button is clicked
130
+ */
131
+ onMinusButtonClick?: (e: React.MouseEvent) => void;
132
+ /**
133
+ * 点击最外侧dom时触发
134
+ * @en Triggers when the most out dom is clicked
135
+ */
136
+ onClick?: (e: React.MouseEvent) => void;
137
+ /**
138
+ * 输入框输入时触发
139
+ * @en Triggers when the input is inputting
140
+ */
141
+ onInput?: (e: React.ChangeEvent) => void;
142
+ }
143
+ export interface StepperRef {
144
+ /**
145
+ * 最外层元素 DOM
146
+ * @en The most out element dom
147
+ */
148
+ dom: HTMLDivElement | null;
149
+ /**
150
+ * 输入框 DOM
151
+ * @en Input dom
152
+ */
153
+ input: HTMLInputElement | null;
154
+ /**
155
+ * 改变内部值的方法
156
+ * @en The function of changing inner value
157
+ */
158
+ changeValue: (newValue: number | null) => void;
159
+ }
@@ -0,0 +1,3 @@
1
+ "use strict";
2
+
3
+ exports.__esModule = true;
package/cjs/style.d.ts CHANGED
@@ -43,6 +43,7 @@ import './radio/style';
43
43
  import './rate/style';
44
44
  import './slider/style';
45
45
  import './search-bar/style';
46
+ import './stepper/style';
46
47
  import './steps/style';
47
48
  import './sticky/style';
48
49
  import './swipe-action/style';
package/cjs/style.js CHANGED
@@ -90,6 +90,8 @@ require("./slider/style");
90
90
 
91
91
  require("./search-bar/style");
92
92
 
93
+ require("./stepper/style");
94
+
93
95
  require("./steps/style");
94
96
 
95
97
  require("./sticky/style");
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { SwipeActionProps, SwipeActionRef } from './type';
3
+ export * from './type';
3
4
  /**
4
5
  * 滑动操作组件,左右滑动拉出菜单栏
5
6
  * @en SwipeAction component, slide left and right to pull out the menu bar