@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.
- package/CHANGELOG.md +32 -0
- package/README.en-US.md +2 -2
- package/README.md +2 -2
- package/cjs/_helpers/render.d.ts +3 -1
- package/cjs/_helpers/render.js +10 -3
- package/cjs/action-sheet/index.d.ts +5 -5
- package/cjs/action-sheet/index.js +4 -3
- package/cjs/action-sheet/methods.d.ts +1 -1
- package/cjs/badge/style/css/index.css +1 -2
- package/cjs/checkbox/checkbox.js +4 -0
- package/cjs/circle-progress/index.js +4 -0
- package/cjs/context-provider/index.d.ts +4 -0
- package/cjs/context-provider/index.js +14 -2
- package/cjs/dialog/index.d.ts +8 -8
- package/cjs/dialog/index.js +3 -2
- package/cjs/dialog/methods.d.ts +3 -3
- package/cjs/dialog/style/css/index.css +1 -2
- package/cjs/image-picker/index.js +18 -12
- package/cjs/image-picker/type.d.ts +10 -0
- package/cjs/image-preview/index.d.ts +3 -3
- package/cjs/image-preview/index.js +3 -2
- package/cjs/image-preview/methods.d.ts +2 -1
- package/cjs/image-preview/methods.js +2 -2
- package/cjs/index.d.ts +1 -0
- package/cjs/index.js +5 -1
- package/cjs/input/hooks.js +1 -0
- package/cjs/input/index.d.ts +5 -0
- package/cjs/input/index.js +6 -2
- package/cjs/input/style/css/index.css +1 -0
- package/cjs/input/style/index.less +1 -0
- package/cjs/masking/index.d.ts +4 -14
- package/cjs/masking/index.js +3 -2
- package/cjs/masking/methods.d.ts +3 -2
- package/cjs/masking/methods.js +2 -2
- package/cjs/nav-bar/index.d.ts +12 -0
- package/cjs/nav-bar/index.js +8 -2
- package/cjs/notify/index.d.ts +12 -12
- package/cjs/notify/index.js +3 -2
- package/cjs/notify/methods.d.ts +2 -1
- package/cjs/notify/methods.js +2 -2
- package/cjs/picker-view/components/picker-cell.js +3 -1
- package/cjs/popup/index.d.ts +4 -4
- package/cjs/popup/index.js +3 -2
- package/cjs/popup/methods.d.ts +1 -1
- package/cjs/popup-swiper/index.d.ts +12 -6
- package/cjs/popup-swiper/index.js +3 -2
- package/cjs/popup-swiper/methods.d.ts +1 -1
- package/cjs/progress/index.js +4 -0
- package/cjs/rate/index.js +5 -0
- package/cjs/slider/index.js +6 -1
- package/cjs/stepper/demo/style/css/mobile.css +4 -0
- package/cjs/stepper/demo/style/mobile.less +10 -0
- package/cjs/stepper/hooks/useButtonClick.d.ts +11 -0
- package/cjs/stepper/hooks/useButtonClick.js +74 -0
- package/cjs/stepper/hooks/useInputEvent.d.ts +9 -0
- package/cjs/stepper/hooks/useInputEvent.js +59 -0
- package/cjs/stepper/hooks/useValue.d.ts +6 -0
- package/cjs/stepper/hooks/useValue.js +44 -0
- package/cjs/stepper/index.d.ts +13 -0
- package/cjs/stepper/index.js +190 -0
- package/cjs/stepper/style/css/index.css +76 -0
- package/cjs/stepper/style/css/index.d.ts +2 -0
- package/cjs/stepper/style/css/index.js +5 -0
- package/cjs/stepper/style/index.d.ts +2 -0
- package/cjs/stepper/style/index.js +5 -0
- package/cjs/stepper/style/index.less +80 -0
- package/cjs/stepper/type.d.ts +159 -0
- package/cjs/stepper/type.js +3 -0
- package/cjs/style.d.ts +1 -0
- package/cjs/style.js +2 -0
- package/cjs/swipe-action/index.d.ts +1 -0
- package/cjs/swipe-action/index.js +10 -0
- package/cjs/switch/index.js +4 -0
- package/cjs/toast/index.d.ts +18 -18
- package/cjs/toast/index.js +3 -2
- package/cjs/toast/methods.d.ts +2 -1
- package/cjs/toast/methods.js +2 -2
- package/dist/index.js +463 -52
- package/dist/index.min.js +3 -3
- package/dist/style.css +77 -113
- package/dist/style.min.css +1 -1
- package/esm/_helpers/render.d.ts +3 -1
- package/esm/_helpers/render.js +10 -3
- package/esm/action-sheet/index.d.ts +5 -5
- package/esm/action-sheet/index.js +4 -3
- package/esm/action-sheet/methods.d.ts +1 -1
- package/esm/badge/style/css/index.css +1 -2
- package/esm/checkbox/checkbox.js +4 -0
- package/esm/circle-progress/index.js +4 -0
- package/esm/context-provider/index.d.ts +4 -0
- package/esm/context-provider/index.js +13 -2
- package/esm/dialog/index.d.ts +8 -8
- package/esm/dialog/index.js +3 -2
- package/esm/dialog/methods.d.ts +3 -3
- package/esm/dialog/style/css/index.css +1 -2
- package/esm/image-picker/index.js +18 -12
- package/esm/image-picker/type.d.ts +10 -0
- package/esm/image-preview/index.d.ts +3 -3
- package/esm/image-preview/index.js +3 -2
- package/esm/image-preview/methods.d.ts +2 -1
- package/esm/image-preview/methods.js +2 -2
- package/esm/index.d.ts +1 -0
- package/esm/index.js +1 -0
- package/esm/input/hooks.js +1 -0
- package/esm/input/index.d.ts +5 -0
- package/esm/input/index.js +6 -2
- package/esm/input/style/css/index.css +1 -0
- package/esm/input/style/index.less +1 -0
- package/esm/masking/index.d.ts +4 -14
- package/esm/masking/index.js +3 -2
- package/esm/masking/methods.d.ts +3 -2
- package/esm/masking/methods.js +2 -2
- package/esm/nav-bar/index.d.ts +12 -0
- package/esm/nav-bar/index.js +8 -2
- package/esm/notify/index.d.ts +12 -12
- package/esm/notify/index.js +3 -2
- package/esm/notify/methods.d.ts +2 -1
- package/esm/notify/methods.js +2 -2
- package/esm/picker-view/components/picker-cell.js +3 -1
- package/esm/popup/index.d.ts +4 -4
- package/esm/popup/index.js +3 -2
- package/esm/popup/methods.d.ts +1 -1
- package/esm/popup-swiper/index.d.ts +12 -6
- package/esm/popup-swiper/index.js +3 -2
- package/esm/popup-swiper/methods.d.ts +1 -1
- package/esm/progress/index.js +4 -0
- package/esm/rate/index.js +5 -0
- package/esm/slider/index.js +6 -1
- package/esm/stepper/demo/style/css/mobile.css +4 -0
- package/esm/stepper/demo/style/mobile.less +10 -0
- package/esm/stepper/hooks/useButtonClick.d.ts +11 -0
- package/esm/stepper/hooks/useButtonClick.js +69 -0
- package/esm/stepper/hooks/useInputEvent.d.ts +9 -0
- package/esm/stepper/hooks/useInputEvent.js +53 -0
- package/esm/stepper/hooks/useValue.d.ts +6 -0
- package/esm/stepper/hooks/useValue.js +38 -0
- package/esm/stepper/index.d.ts +13 -0
- package/esm/stepper/index.js +163 -0
- package/esm/stepper/style/css/index.css +76 -0
- package/esm/stepper/style/css/index.d.ts +2 -0
- package/esm/stepper/style/css/index.js +2 -0
- package/esm/stepper/style/index.d.ts +2 -0
- package/esm/stepper/style/index.js +2 -0
- package/esm/stepper/style/index.less +80 -0
- package/esm/stepper/type.d.ts +159 -0
- package/esm/stepper/type.js +1 -0
- package/esm/style.d.ts +1 -0
- package/esm/style.js +1 -0
- package/esm/swipe-action/index.d.ts +1 -0
- package/esm/swipe-action/index.js +1 -0
- package/esm/switch/index.js +4 -0
- package/esm/toast/index.d.ts +18 -18
- package/esm/toast/index.js +3 -2
- package/esm/toast/methods.d.ts +2 -1
- package/esm/toast/methods.js +2 -2
- package/package.json +3 -3
- package/style/css/public.css +4 -4
- package/tokens/app/arcodesign/default/css-variables.less +15 -0
- package/tokens/app/arcodesign/default/index.d.ts +15 -0
- package/tokens/app/arcodesign/default/index.js +16 -1
- package/tokens/app/arcodesign/default/index.json +180 -0
- package/tokens/app/arcodesign/default/index.less +15 -0
- package/umd/_helpers/render.d.ts +3 -1
- package/umd/_helpers/render.js +13 -7
- package/umd/action-sheet/index.d.ts +5 -5
- package/umd/action-sheet/index.js +4 -3
- package/umd/action-sheet/methods.d.ts +1 -1
- package/umd/badge/style/css/index.css +1 -2
- package/umd/checkbox/checkbox.js +4 -0
- package/umd/circle-progress/index.js +4 -0
- package/umd/context-provider/index.d.ts +4 -0
- package/umd/context-provider/index.js +13 -1
- package/umd/dialog/index.d.ts +8 -8
- package/umd/dialog/index.js +3 -2
- package/umd/dialog/methods.d.ts +3 -3
- package/umd/dialog/style/css/index.css +1 -2
- package/umd/image-picker/index.js +18 -12
- package/umd/image-picker/type.d.ts +10 -0
- package/umd/image-preview/index.d.ts +3 -3
- package/umd/image-preview/index.js +3 -2
- package/umd/image-preview/methods.d.ts +2 -1
- package/umd/image-preview/methods.js +2 -2
- package/umd/index.d.ts +1 -0
- package/umd/index.js +7 -5
- package/umd/input/hooks.js +1 -0
- package/umd/input/index.d.ts +5 -0
- package/umd/input/index.js +6 -2
- package/umd/input/style/css/index.css +1 -0
- package/umd/input/style/index.less +1 -0
- package/umd/masking/index.d.ts +4 -14
- package/umd/masking/index.js +3 -2
- package/umd/masking/methods.d.ts +3 -2
- package/umd/masking/methods.js +2 -2
- package/umd/nav-bar/index.d.ts +12 -0
- package/umd/nav-bar/index.js +8 -2
- package/umd/notify/index.d.ts +12 -12
- package/umd/notify/index.js +3 -2
- package/umd/notify/methods.d.ts +2 -1
- package/umd/notify/methods.js +2 -2
- package/umd/picker-view/components/picker-cell.js +3 -1
- package/umd/popup/index.d.ts +4 -4
- package/umd/popup/index.js +3 -2
- package/umd/popup/methods.d.ts +1 -1
- package/umd/popup-swiper/index.d.ts +12 -6
- package/umd/popup-swiper/index.js +3 -2
- package/umd/popup-swiper/methods.d.ts +1 -1
- package/umd/progress/index.js +4 -0
- package/umd/rate/index.js +5 -0
- package/umd/slider/index.js +6 -1
- package/umd/stepper/demo/style/css/mobile.css +4 -0
- package/umd/stepper/demo/style/mobile.less +10 -0
- package/umd/stepper/hooks/useButtonClick.d.ts +11 -0
- package/umd/stepper/hooks/useButtonClick.js +86 -0
- package/umd/stepper/hooks/useInputEvent.d.ts +9 -0
- package/umd/stepper/hooks/useInputEvent.js +71 -0
- package/umd/stepper/hooks/useValue.d.ts +6 -0
- package/umd/stepper/hooks/useValue.js +56 -0
- package/umd/stepper/index.d.ts +13 -0
- package/umd/stepper/index.js +191 -0
- package/umd/stepper/style/css/index.css +76 -0
- package/umd/stepper/style/css/index.d.ts +2 -0
- package/umd/stepper/style/css/index.js +15 -0
- package/umd/stepper/style/index.d.ts +2 -0
- package/umd/stepper/style/index.js +15 -0
- package/umd/stepper/style/index.less +80 -0
- package/umd/stepper/type.d.ts +159 -0
- package/umd/stepper/type.js +17 -0
- package/umd/style.d.ts +1 -0
- package/umd/style.js +4 -4
- package/umd/swipe-action/index.d.ts +1 -0
- package/umd/swipe-action/index.js +11 -4
- package/umd/switch/index.js +4 -0
- package/umd/toast/index.d.ts +18 -18
- package/umd/toast/index.js +3 -2
- package/umd/toast/methods.d.ts +2 -1
- 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,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
|
+
}
|
package/cjs/style.d.ts
CHANGED
package/cjs/style.js
CHANGED