@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
package/cjs/masking/index.d.ts
CHANGED
@@ -191,12 +191,7 @@ export declare function methodsGenerator<P extends OpenBaseProps>(Comp: React.Fu
|
|
191
191
|
*/
|
192
192
|
open: (config: Pick<P, Exclude<keyof P, "visible" | "close">> & {
|
193
193
|
key?: string | undefined;
|
194
|
-
}) => {
|
195
|
-
/**
|
196
|
-
* 点击蒙层是否关闭菜单
|
197
|
-
* @en Whether to click the mask to close the menu
|
198
|
-
* @default true
|
199
|
-
*/
|
194
|
+
}, context?: import("../context-provider").GlobalContextParams | undefined) => {
|
200
195
|
close: () => void;
|
201
196
|
update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">> & {
|
202
197
|
key?: string | undefined;
|
@@ -210,16 +205,11 @@ declare const _default: React.ForwardRefExoticComponent<MaskingProps & React.Ref
|
|
210
205
|
* @param {MaskingProps} config Configuration
|
211
206
|
* @returns {{ close: () => void; update: (newConfig: MaskingProps) => void; }}
|
212
207
|
*/
|
213
|
-
open: (config: Pick<MaskingProps & React.RefAttributes<MaskingRef
|
208
|
+
open: (config: Pick<import("../context-provider").WithGlobalContext<MaskingProps & React.RefAttributes<MaskingRef>>, "ref" | "children" | "key" | "context" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "contentAtCenter" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer"> & {
|
214
209
|
key?: string | undefined;
|
215
|
-
}) => {
|
216
|
-
/**
|
217
|
-
* 点击蒙层是否关闭菜单
|
218
|
-
* @en Whether to click the mask to close the menu
|
219
|
-
* @default true
|
220
|
-
*/
|
210
|
+
}, context?: import("../context-provider").GlobalContextParams | undefined) => {
|
221
211
|
close: () => void;
|
222
|
-
update: (newConfig: Pick<MaskingProps & React.RefAttributes<MaskingRef
|
212
|
+
update: (newConfig: Pick<import("../context-provider").WithGlobalContext<MaskingProps & React.RefAttributes<MaskingRef>>, "ref" | "children" | "key" | "context" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "contentAtCenter" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer"> & {
|
223
213
|
key?: string | undefined;
|
224
214
|
}) => void;
|
225
215
|
};
|
package/cjs/masking/index.js
CHANGED
@@ -219,6 +219,8 @@ function methodsGenerator(Comp) {
|
|
219
219
|
open: (0, _methods.open)(Comp)
|
220
220
|
};
|
221
221
|
}
|
222
|
+
|
223
|
+
var MaskingWithGlobalContext = (0, _contextProvider.CompWithGlobalContext)(Masking);
|
222
224
|
/**
|
223
225
|
* 通用模态弹窗,内部内容自定义。默认做了防滚动穿透处理,如果弹层内容中需要滚动,则需将滚动容器传入`getScrollContainer`属性以在未滚动到顶部或底部时释放滚动。
|
224
226
|
* @en Generic modal popup with custom internal content. By default, anti-scroll penetration processing is performed. If scrolling is required in the content of the bullet layer, need to pass the scroll container to the `getScrollContainer` to release scrolling when it is not scrolled to the top or bottom.
|
@@ -228,7 +230,6 @@ function methodsGenerator(Comp) {
|
|
228
230
|
* @name_en Masking
|
229
231
|
*/
|
230
232
|
|
231
|
-
|
232
|
-
var _default = (0, _mobileUtils.componentWrapper)(Masking, methodsGenerator(Masking));
|
233
|
+
var _default = (0, _mobileUtils.componentWrapper)(Masking, methodsGenerator(MaskingWithGlobalContext));
|
233
234
|
|
234
235
|
exports.default = _default;
|
package/cjs/masking/methods.d.ts
CHANGED
@@ -1,4 +1,5 @@
|
|
1
1
|
import React from 'react';
|
2
|
+
import { GlobalContextParams } from '../context-provider';
|
2
3
|
export interface OpenBaseProps {
|
3
4
|
unmountOnExit?: boolean;
|
4
5
|
getContainer?: () => HTMLElement;
|
@@ -8,13 +9,13 @@ export interface OpenBaseProps {
|
|
8
9
|
}
|
9
10
|
export declare function getOpenMethod<T extends {
|
10
11
|
key?: string;
|
11
|
-
}, P extends OpenBaseProps>(Component: React.FunctionComponent<P>, containerId?: string, normalize?: (config: T) => P): (config: T) => {
|
12
|
+
}, P extends OpenBaseProps>(Component: React.FunctionComponent<P>, containerId?: string, normalize?: (config: T) => P): (config: T, context?: GlobalContextParams | undefined) => {
|
12
13
|
close: () => void;
|
13
14
|
update: (newConfig: T) => void;
|
14
15
|
};
|
15
16
|
export declare function open<P extends OpenBaseProps>(Component: React.FunctionComponent<P>, containerId?: string): (config: Pick<P, Exclude<keyof P, "visible" | "close">> & {
|
16
17
|
key?: string | undefined;
|
17
|
-
}) => {
|
18
|
+
}, context?: GlobalContextParams | undefined) => {
|
18
19
|
close: () => void;
|
19
20
|
update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">> & {
|
20
21
|
key?: string | undefined;
|
package/cjs/masking/methods.js
CHANGED
@@ -19,7 +19,7 @@ function getOpenMethod(Component, containerId, normalize) {
|
|
19
19
|
};
|
20
20
|
}
|
21
21
|
|
22
|
-
return function (config) {
|
22
|
+
return function (config, context) {
|
23
23
|
var baseProps = (0, _extends2.default)({
|
24
24
|
unmountOnExit: true
|
25
25
|
}, normalize(config), {
|
@@ -35,7 +35,7 @@ function getOpenMethod(Component, containerId, normalize) {
|
|
35
35
|
|
36
36
|
var leaving = false;
|
37
37
|
|
38
|
-
var _ReactDOMRender = new _render.ReactDOMRender(Component, div),
|
38
|
+
var _ReactDOMRender = new _render.ReactDOMRender(Component, div, context),
|
39
39
|
render = _ReactDOMRender.render;
|
40
40
|
|
41
41
|
function update(newConfig) {
|
package/cjs/nav-bar/index.d.ts
CHANGED
@@ -105,6 +105,18 @@ export interface NavBarProps {
|
|
105
105
|
* @en Set a custom style according to the scroll offset value. After setting this property, the scroll event of the scroll container will be monitored.
|
106
106
|
*/
|
107
107
|
getComputedStyleByScroll?: (offset: number) => CSSProperties;
|
108
|
+
/**
|
109
|
+
* 无障碍aria-label属性
|
110
|
+
* @en Accessibility attribute aria-label
|
111
|
+
* @default ""
|
112
|
+
*/
|
113
|
+
ariaLabel?: string;
|
114
|
+
/**
|
115
|
+
* 无障碍role属性
|
116
|
+
* @en Accessibility attribute role
|
117
|
+
* @default "banner"
|
118
|
+
*/
|
119
|
+
ariaRole?: string;
|
108
120
|
}
|
109
121
|
/**
|
110
122
|
* 导航栏组件,支持吸顶和沉浸式,支持在指定滚动位置展示,支持根据滚动位置实时更新style。
|
package/cjs/nav-bar/index.js
CHANGED
@@ -55,7 +55,11 @@ var NavBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
55
55
|
getScrollContainer = props.getScrollContainer,
|
56
56
|
_props$showOffset = props.showOffset,
|
57
57
|
showOffset = _props$showOffset === void 0 ? 0 : _props$showOffset,
|
58
|
-
getComputedStyleByScroll = props.getComputedStyleByScroll
|
58
|
+
getComputedStyleByScroll = props.getComputedStyleByScroll,
|
59
|
+
_props$ariaLabel = props.ariaLabel,
|
60
|
+
ariaLabel = _props$ariaLabel === void 0 ? '' : _props$ariaLabel,
|
61
|
+
_props$ariaRole = props.ariaRole,
|
62
|
+
ariaRole = _props$ariaRole === void 0 ? 'banner' : _props$ariaRole;
|
59
63
|
var navBarRef = (0, _react.useRef)(null);
|
60
64
|
|
61
65
|
var _useState = (0, _react.useState)(showOffset > 0),
|
@@ -143,7 +147,9 @@ var NavBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
143
147
|
paddingTop: fixed && statusBarHeight ? statusBarHeight + "px" : ''
|
144
148
|
}, style || {}, relBackground ? {
|
145
149
|
background: relBackground
|
146
|
-
} : {})
|
150
|
+
} : {}),
|
151
|
+
"aria-label": ariaLabel,
|
152
|
+
role: ariaRole
|
147
153
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
148
154
|
className: (0, _mobileUtils.cls)(className, system, prefixCls + "-nav-bar-wrapper", (_cls2 = {}, _cls2[prefixCls + "-nav-bar-wrapper-fixed"] = fixed, _cls2[prefixCls + "-nav-bar-wrapper-border"] = hasBottomLine, _cls2)),
|
149
155
|
style: (0, _extends2.default)({
|
package/cjs/notify/index.d.ts
CHANGED
@@ -9,7 +9,7 @@ export declare function methodsGenerator<P extends NotifyBaseProps>(Comp: React.
|
|
9
9
|
* @param {string | NotifyProps} config
|
10
10
|
* @returns {{ update: (config: NotifyProps) => void; close: () => void }}
|
11
11
|
*/
|
12
|
-
info: (originConfig: string | Pick<P, Exclude<keyof P, "visible" | "close"
|
12
|
+
info: (originConfig: string | Pick<P, Exclude<keyof P, "visible" | "close">>, context?: import("../context-provider").GlobalContextParams | undefined) => {
|
13
13
|
update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">>) => void;
|
14
14
|
close: () => void;
|
15
15
|
};
|
@@ -19,7 +19,7 @@ export declare function methodsGenerator<P extends NotifyBaseProps>(Comp: React.
|
|
19
19
|
* @param {string | NotifyProps} config
|
20
20
|
* @returns {{ update: (config: NotifyProps) => void; close: () => void }}
|
21
21
|
*/
|
22
|
-
success: (originConfig: string | Pick<P, Exclude<keyof P, "visible" | "close"
|
22
|
+
success: (originConfig: string | Pick<P, Exclude<keyof P, "visible" | "close">>, context?: import("../context-provider").GlobalContextParams | undefined) => {
|
23
23
|
update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">>) => void;
|
24
24
|
close: () => void;
|
25
25
|
};
|
@@ -29,7 +29,7 @@ export declare function methodsGenerator<P extends NotifyBaseProps>(Comp: React.
|
|
29
29
|
* @param {string | NotifyProps} config
|
30
30
|
* @returns {{ update: (config: NotifyProps) => void; close: () => void }}
|
31
31
|
*/
|
32
|
-
error: (originConfig: string | Pick<P, Exclude<keyof P, "visible" | "close"
|
32
|
+
error: (originConfig: string | Pick<P, Exclude<keyof P, "visible" | "close">>, context?: import("../context-provider").GlobalContextParams | undefined) => {
|
33
33
|
update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">>) => void;
|
34
34
|
close: () => void;
|
35
35
|
};
|
@@ -39,7 +39,7 @@ export declare function methodsGenerator<P extends NotifyBaseProps>(Comp: React.
|
|
39
39
|
* @param {string | NotifyProps} config
|
40
40
|
* @returns {{ update: (config: NotifyProps) => void; close: () => void }}
|
41
41
|
*/
|
42
|
-
warn: (originConfig: string | Pick<P, Exclude<keyof P, "visible" | "close"
|
42
|
+
warn: (originConfig: string | Pick<P, Exclude<keyof P, "visible" | "close">>, context?: import("../context-provider").GlobalContextParams | undefined) => {
|
43
43
|
update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">>) => void;
|
44
44
|
close: () => void;
|
45
45
|
};
|
@@ -51,8 +51,8 @@ declare const _default: React.ForwardRefExoticComponent<NotifyProps & React.RefA
|
|
51
51
|
* @param {string | NotifyProps} config
|
52
52
|
* @returns {{ update: (config: NotifyProps) => void; close: () => void }}
|
53
53
|
*/
|
54
|
-
info: (originConfig: string | Pick<NotifyProps & React.RefAttributes<NotifyRef
|
55
|
-
update: (newConfig: Pick<NotifyProps & React.RefAttributes<NotifyRef
|
54
|
+
info: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<NotifyProps & React.RefAttributes<NotifyRef>>, "style" | "content" | "transitionDuration" | "ref" | "key" | "context" | "getContainer" | "type" | "className" | "duration" | "onClose">, context?: import("../context-provider").GlobalContextParams | undefined) => {
|
55
|
+
update: (newConfig: Pick<import("../context-provider").WithGlobalContext<NotifyProps & React.RefAttributes<NotifyRef>>, "style" | "content" | "transitionDuration" | "ref" | "key" | "context" | "getContainer" | "type" | "className" | "duration" | "onClose">) => void;
|
56
56
|
close: () => void;
|
57
57
|
};
|
58
58
|
/**
|
@@ -61,8 +61,8 @@ declare const _default: React.ForwardRefExoticComponent<NotifyProps & React.RefA
|
|
61
61
|
* @param {string | NotifyProps} config
|
62
62
|
* @returns {{ update: (config: NotifyProps) => void; close: () => void }}
|
63
63
|
*/
|
64
|
-
success: (originConfig: string | Pick<NotifyProps & React.RefAttributes<NotifyRef
|
65
|
-
update: (newConfig: Pick<NotifyProps & React.RefAttributes<NotifyRef
|
64
|
+
success: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<NotifyProps & React.RefAttributes<NotifyRef>>, "style" | "content" | "transitionDuration" | "ref" | "key" | "context" | "getContainer" | "type" | "className" | "duration" | "onClose">, context?: import("../context-provider").GlobalContextParams | undefined) => {
|
65
|
+
update: (newConfig: Pick<import("../context-provider").WithGlobalContext<NotifyProps & React.RefAttributes<NotifyRef>>, "style" | "content" | "transitionDuration" | "ref" | "key" | "context" | "getContainer" | "type" | "className" | "duration" | "onClose">) => void;
|
66
66
|
close: () => void;
|
67
67
|
};
|
68
68
|
/**
|
@@ -71,8 +71,8 @@ declare const _default: React.ForwardRefExoticComponent<NotifyProps & React.RefA
|
|
71
71
|
* @param {string | NotifyProps} config
|
72
72
|
* @returns {{ update: (config: NotifyProps) => void; close: () => void }}
|
73
73
|
*/
|
74
|
-
error: (originConfig: string | Pick<NotifyProps & React.RefAttributes<NotifyRef
|
75
|
-
update: (newConfig: Pick<NotifyProps & React.RefAttributes<NotifyRef
|
74
|
+
error: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<NotifyProps & React.RefAttributes<NotifyRef>>, "style" | "content" | "transitionDuration" | "ref" | "key" | "context" | "getContainer" | "type" | "className" | "duration" | "onClose">, context?: import("../context-provider").GlobalContextParams | undefined) => {
|
75
|
+
update: (newConfig: Pick<import("../context-provider").WithGlobalContext<NotifyProps & React.RefAttributes<NotifyRef>>, "style" | "content" | "transitionDuration" | "ref" | "key" | "context" | "getContainer" | "type" | "className" | "duration" | "onClose">) => void;
|
76
76
|
close: () => void;
|
77
77
|
};
|
78
78
|
/**
|
@@ -81,8 +81,8 @@ declare const _default: React.ForwardRefExoticComponent<NotifyProps & React.RefA
|
|
81
81
|
* @param {string | NotifyProps} config
|
82
82
|
* @returns {{ update: (config: NotifyProps) => void; close: () => void }}
|
83
83
|
*/
|
84
|
-
warn: (originConfig: string | Pick<NotifyProps & React.RefAttributes<NotifyRef
|
85
|
-
update: (newConfig: Pick<NotifyProps & React.RefAttributes<NotifyRef
|
84
|
+
warn: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<NotifyProps & React.RefAttributes<NotifyRef>>, "style" | "content" | "transitionDuration" | "ref" | "key" | "context" | "getContainer" | "type" | "className" | "duration" | "onClose">, context?: import("../context-provider").GlobalContextParams | undefined) => {
|
85
|
+
update: (newConfig: Pick<import("../context-provider").WithGlobalContext<NotifyProps & React.RefAttributes<NotifyRef>>, "style" | "content" | "transitionDuration" | "ref" | "key" | "context" | "getContainer" | "type" | "className" | "duration" | "onClose">) => void;
|
86
86
|
close: () => void;
|
87
87
|
};
|
88
88
|
};
|
package/cjs/notify/index.js
CHANGED
@@ -176,6 +176,8 @@ function methodsGenerator(Comp) {
|
|
176
176
|
warn: (0, _methods.notify)(Comp, 'warn')
|
177
177
|
};
|
178
178
|
}
|
179
|
+
|
180
|
+
var NotifyWithGlobalContext = (0, _contextProvider.CompWithGlobalContext)(Notify);
|
179
181
|
/**
|
180
182
|
* 主动操作后显示的反馈信息横条,可采用方法调用或者组件调用的方式
|
181
183
|
* @en The feedback information bar displayed after active operation can be called by method or by component.
|
@@ -185,7 +187,6 @@ function methodsGenerator(Comp) {
|
|
185
187
|
* @name_en Notify
|
186
188
|
*/
|
187
189
|
|
188
|
-
|
189
|
-
var _default = (0, _mobileUtils.componentWrapper)(Notify, methodsGenerator(Notify));
|
190
|
+
var _default = (0, _mobileUtils.componentWrapper)(Notify, methodsGenerator(NotifyWithGlobalContext));
|
190
191
|
|
191
192
|
exports.default = _default;
|
package/cjs/notify/methods.d.ts
CHANGED
@@ -1,4 +1,5 @@
|
|
1
1
|
import React from 'react';
|
2
|
+
import { GlobalContextParams } from '../context-provider';
|
2
3
|
export interface NotifyBaseProps {
|
3
4
|
getContainer?: () => HTMLElement;
|
4
5
|
onClose?: (scene?: string) => void;
|
@@ -7,7 +8,7 @@ export interface NotifyBaseProps {
|
|
7
8
|
close?: (e: any) => void;
|
8
9
|
type?: string;
|
9
10
|
}
|
10
|
-
export declare function notify<P extends NotifyBaseProps>(Component: React.FC<P>, type?: string): (originConfig: string | Pick<P, Exclude<keyof P, "visible" | "close"
|
11
|
+
export declare function notify<P extends NotifyBaseProps>(Component: React.FC<P>, type?: string): (originConfig: string | Pick<P, Exclude<keyof P, "visible" | "close">>, context?: GlobalContextParams | undefined) => {
|
11
12
|
update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">>) => void;
|
12
13
|
close: () => void;
|
13
14
|
};
|
package/cjs/notify/methods.js
CHANGED
@@ -12,7 +12,7 @@ var _mobileUtils = require("@arco-design/mobile-utils");
|
|
12
12
|
var _render = require("../_helpers/render");
|
13
13
|
|
14
14
|
function notify(Component, type) {
|
15
|
-
return function (originConfig) {
|
15
|
+
return function (originConfig, context) {
|
16
16
|
var config = typeof originConfig === 'string' ? {
|
17
17
|
content: originConfig,
|
18
18
|
type: 'info'
|
@@ -31,7 +31,7 @@ function notify(Component, type) {
|
|
31
31
|
document.body.appendChild(div);
|
32
32
|
}
|
33
33
|
|
34
|
-
var _ReactDOMRender = new _render.ReactDOMRender(Component, div),
|
34
|
+
var _ReactDOMRender = new _render.ReactDOMRender(Component, div, context),
|
35
35
|
render = _ReactDOMRender.render,
|
36
36
|
unmount = _ReactDOMRender.unmount;
|
37
37
|
|
@@ -361,12 +361,14 @@ var PickerCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
361
361
|
ref: wrapRef,
|
362
362
|
onTouchStart: _handleItemTouchStart,
|
363
363
|
onTouchEnd: _handleColumnTouchEnd,
|
364
|
-
onTouchCancel: _handleColumnTouchEnd
|
364
|
+
onTouchCancel: _handleColumnTouchEnd,
|
365
|
+
"aria-disabled": disabled
|
365
366
|
}, data.map(function (item, index) {
|
366
367
|
var _cls;
|
367
368
|
|
368
369
|
var dis = Math.abs(index - currentIndex);
|
369
370
|
return /*#__PURE__*/_react.default.createElement("div", {
|
371
|
+
"aria-label": index === currentIndex ? "" + item.value : '',
|
370
372
|
key: index + "_" + item.value,
|
371
373
|
className: (0, _mobileUtils.cls)(prefixCls + "-column-item", (_cls = {
|
372
374
|
selected: index === currentIndex
|
package/cjs/popup/index.d.ts
CHANGED
@@ -52,7 +52,7 @@ export declare function methodsGenerator<P extends OpenBaseProps>(Comp: React.Fu
|
|
52
52
|
*/
|
53
53
|
open: (config: Pick<P, Exclude<keyof P, "visible" | "close">> & {
|
54
54
|
key?: string | undefined;
|
55
|
-
}) => {
|
55
|
+
}, context?: import("../context-provider").GlobalContextParams | undefined) => {
|
56
56
|
close: () => void;
|
57
57
|
update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">> & {
|
58
58
|
key?: string | undefined;
|
@@ -66,11 +66,11 @@ declare const _default: React.ForwardRefExoticComponent<PopupProps & React.RefAt
|
|
66
66
|
* @param {PopupProps} config Configuration
|
67
67
|
* @returns {{ close: () => void; update: (newConfig: PopupProps) => void; }}
|
68
68
|
*/
|
69
|
-
open: (config: Pick<PopupProps & React.RefAttributes<PopupRef
|
69
|
+
open: (config: Pick<import("../context-provider").WithGlobalContext<PopupProps & React.RefAttributes<PopupRef>>, "direction" | "ref" | "children" | "key" | "context" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer" | "needBottomOffset" | "translateZ"> & {
|
70
70
|
key?: string | undefined;
|
71
|
-
}) => {
|
71
|
+
}, context?: import("../context-provider").GlobalContextParams | undefined) => {
|
72
72
|
close: () => void;
|
73
|
-
update: (newConfig: Pick<PopupProps & React.RefAttributes<PopupRef
|
73
|
+
update: (newConfig: Pick<import("../context-provider").WithGlobalContext<PopupProps & React.RefAttributes<PopupRef>>, "direction" | "ref" | "children" | "key" | "context" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer" | "needBottomOffset" | "translateZ"> & {
|
74
74
|
key?: string | undefined;
|
75
75
|
}) => void;
|
76
76
|
};
|
package/cjs/popup/index.js
CHANGED
@@ -97,6 +97,8 @@ function methodsGenerator(Comp) {
|
|
97
97
|
open: (0, _methods.open)(Comp)
|
98
98
|
};
|
99
99
|
}
|
100
|
+
|
101
|
+
var PopupWithGlobalContext = (0, _contextProvider.CompWithGlobalContext)(Popup);
|
100
102
|
/**
|
101
103
|
* 基于模态弹窗的的全屏菜单,支持各个方向。默认做了防滚动穿透处理,如果弹层内容中需要滚动,则需将滚动容器传入`getScrollContainer`属性以在未滚动到顶部或底部时释放滚动。
|
102
104
|
* @en A full-screen menu based on a modal popup, supporting all directions. By default, anti-scroll penetration processing is performed. If scrolling is required in the content of the popup layer, you need to pass the scroll container to the `getScrollContainer` property to release scrolling when it is not scrolled to the top or bottom.
|
@@ -106,7 +108,6 @@ function methodsGenerator(Comp) {
|
|
106
108
|
* @name_en Popup
|
107
109
|
*/
|
108
110
|
|
109
|
-
|
110
|
-
var _default = (0, _mobileUtils.componentWrapper)(Popup, methodsGenerator(Popup));
|
111
|
+
var _default = (0, _mobileUtils.componentWrapper)(Popup, methodsGenerator(PopupWithGlobalContext));
|
111
112
|
|
112
113
|
exports.default = _default;
|
package/cjs/popup/methods.d.ts
CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
|
|
2
2
|
import { OpenBaseProps } from '../masking/methods';
|
3
3
|
export declare function open<P extends OpenBaseProps>(Component: React.FunctionComponent<P>): (config: Pick<P, Exclude<keyof P, "visible" | "close">> & {
|
4
4
|
key?: string | undefined;
|
5
|
-
}) => {
|
5
|
+
}, context?: import("../context-provider").GlobalContextParams | undefined) => {
|
6
6
|
close: () => void;
|
7
7
|
update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">> & {
|
8
8
|
key?: string | undefined;
|
@@ -59,11 +59,14 @@ export declare function methodsGenerator<P extends OpenBaseProps>(Comp: React.Fu
|
|
59
59
|
*/
|
60
60
|
open: (config: Pick<P, Exclude<keyof P, "visible" | "close">> & {
|
61
61
|
key?: string | undefined;
|
62
|
-
}) => {
|
62
|
+
}, context?: import("../context-provider").GlobalContextParams | undefined) => {
|
63
63
|
close: () => void;
|
64
64
|
update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">> & {
|
65
65
|
key?: string | undefined;
|
66
|
-
}) => void;
|
66
|
+
}) => void; /**
|
67
|
+
* 内容面板 touchstart 事件,返回true时表示阻止本组件内部处理事件
|
68
|
+
* @en The touchstart callback of content panel. When it returns true, it means that the event is prevented from being processed inside the component
|
69
|
+
*/
|
67
70
|
};
|
68
71
|
};
|
69
72
|
declare const _default: React.ForwardRefExoticComponent<PopupSwiperProps & React.RefAttributes<PopupSwiperRef>> & {
|
@@ -73,13 +76,16 @@ declare const _default: React.ForwardRefExoticComponent<PopupSwiperProps & React
|
|
73
76
|
* @param {string | PopupSwiperProps} config Configuration
|
74
77
|
* @returns {{ close: () => void; update: (newConfig: PopupSwiperProps) => void; }}
|
75
78
|
*/
|
76
|
-
open: (config: Pick<PopupSwiperProps & React.RefAttributes<PopupSwiperRef
|
79
|
+
open: (config: Pick<import("../context-provider").WithGlobalContext<PopupSwiperProps & React.RefAttributes<PopupSwiperRef>>, "direction" | "ref" | "children" | "key" | "context" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer" | "needBottomOffset" | "translateZ" | "onTouchEnd" | "onTouchStart" | "percentToClose" | "distanceToClose" | "speedToClose" | "allowSwipeDirections" | "exitDirection"> & {
|
77
80
|
key?: string | undefined;
|
78
|
-
}) => {
|
81
|
+
}, context?: import("../context-provider").GlobalContextParams | undefined) => {
|
79
82
|
close: () => void;
|
80
|
-
update: (newConfig: Pick<PopupSwiperProps & React.RefAttributes<PopupSwiperRef
|
83
|
+
update: (newConfig: Pick<import("../context-provider").WithGlobalContext<PopupSwiperProps & React.RefAttributes<PopupSwiperRef>>, "direction" | "ref" | "children" | "key" | "context" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer" | "needBottomOffset" | "translateZ" | "onTouchEnd" | "onTouchStart" | "percentToClose" | "distanceToClose" | "speedToClose" | "allowSwipeDirections" | "exitDirection"> & {
|
81
84
|
key?: string | undefined;
|
82
|
-
}) => void;
|
85
|
+
}) => void; /**
|
86
|
+
* 内容面板 touchstart 事件,返回true时表示阻止本组件内部处理事件
|
87
|
+
* @en The touchstart callback of content panel. When it returns true, it means that the event is prevented from being processed inside the component
|
88
|
+
*/
|
83
89
|
};
|
84
90
|
};
|
85
91
|
/**
|
@@ -280,6 +280,8 @@ function methodsGenerator(Comp) {
|
|
280
280
|
open: (0, _methods.open)(Comp)
|
281
281
|
};
|
282
282
|
}
|
283
|
+
|
284
|
+
var PopupSwiperWithGlobalContext = (0, _contextProvider.CompWithGlobalContext)(PopupSwiper);
|
283
285
|
/**
|
284
286
|
* 基于弹出层(Popup)封装的具有手势关闭功能的弹出层组件,拥有 Popup 组件的其他能力。
|
285
287
|
* @en The popup with gesture closing function based on the popup encapsulation, has other capabilities of the Popup component.
|
@@ -289,7 +291,6 @@ function methodsGenerator(Comp) {
|
|
289
291
|
* @name_en PopupSwiper
|
290
292
|
*/
|
291
293
|
|
292
|
-
|
293
|
-
var _default = (0, _mobileUtils.componentWrapper)(PopupSwiper, methodsGenerator(PopupSwiper));
|
294
|
+
var _default = (0, _mobileUtils.componentWrapper)(PopupSwiper, methodsGenerator(PopupSwiperWithGlobalContext));
|
294
295
|
|
295
296
|
exports.default = _default;
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
2
2
|
import { OpenBaseProps } from '../masking/methods';
|
3
3
|
export declare function open<P extends OpenBaseProps>(Component: React.FunctionComponent<P>): (config: Pick<P, Exclude<keyof P, "visible" | "close">> & {
|
4
4
|
key?: string | undefined;
|
5
|
-
}) => {
|
5
|
+
}, context?: import("../context-provider").GlobalContextParams | undefined) => {
|
6
6
|
close: () => void;
|
7
7
|
update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">> & {
|
8
8
|
key?: string | undefined;
|
package/cjs/progress/index.js
CHANGED
@@ -101,6 +101,10 @@ var Progress = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
101
101
|
function renderBarProgress(_ref) {
|
102
102
|
var prefixCls = _ref.prefixCls;
|
103
103
|
return /*#__PURE__*/_react.default.createElement("div", {
|
104
|
+
role: "progressbar",
|
105
|
+
"aria-valuenow": percentage,
|
106
|
+
"aria-valuemax": 100,
|
107
|
+
"aria-valuemin": 0,
|
104
108
|
className: (0, _mobileUtils.cls)(prefixCls + "-progress", {
|
105
109
|
'progress-fixed': mode === 'nav'
|
106
110
|
}, {
|
package/cjs/rate/index.js
CHANGED
@@ -160,6 +160,11 @@ var Rate = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
160
160
|
return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref2) {
|
161
161
|
var prefixCls = _ref2.prefixCls;
|
162
162
|
return /*#__PURE__*/_react.default.createElement("div", {
|
163
|
+
role: "slider",
|
164
|
+
"aria-valuemin": 0,
|
165
|
+
"aria-valuemax": count,
|
166
|
+
"aria-valuenow": innerValue,
|
167
|
+
"aria-disabled": disabled,
|
163
168
|
className: (0, _mobileUtils.cls)(prefixCls + "-rate", className, {
|
164
169
|
disabled: disabled
|
165
170
|
}),
|
package/cjs/slider/index.js
CHANGED
@@ -144,7 +144,12 @@ var Slider = /*#__PURE__*/(0, _react.forwardRef)(function (_, ref) {
|
|
144
144
|
'show-marks': showMarks
|
145
145
|
}),
|
146
146
|
style: style,
|
147
|
-
ref: domRef
|
147
|
+
ref: domRef,
|
148
|
+
role: "slider",
|
149
|
+
"aria-valuemin": min,
|
150
|
+
"aria-valuemax": max,
|
151
|
+
"aria-valuenow": Array.isArray(valueGroup) ? valueGroup[0] : valueGroup,
|
152
|
+
"aria-disabled": disabled
|
148
153
|
}, isHorizontal ? renderPrefixLabel : renderSuffixLabel, /*#__PURE__*/_react.default.createElement("div", {
|
149
154
|
className: prefixCls + "-slider-wrapper"
|
150
155
|
}, /*#__PURE__*/_react.default.createElement(_marks.default, {
|
@@ -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,74 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
exports.__esModule = true;
|
4
|
+
exports.default = useButtonClick;
|
5
|
+
|
6
|
+
var _react = require("react");
|
7
|
+
|
8
|
+
function correctCalculation(leftNumber, rightNumber, operator) {
|
9
|
+
var magnification = 1e17;
|
10
|
+
var left = leftNumber * magnification;
|
11
|
+
var right = rightNumber * magnification;
|
12
|
+
return operator === '-' ? (left - right) / magnification : (left + right) / magnification;
|
13
|
+
}
|
14
|
+
|
15
|
+
function useButtonClick(params) {
|
16
|
+
var actualInputValue = params.actualInputValue,
|
17
|
+
min = params.min,
|
18
|
+
max = params.max,
|
19
|
+
step = params.step,
|
20
|
+
disabled = params.disabled,
|
21
|
+
equalLimitDisabled = params.equalLimitDisabled,
|
22
|
+
updateValue = params.updateValue,
|
23
|
+
onAddButtonClick = params.onAddButtonClick,
|
24
|
+
onMinusButtonClick = params.onMinusButtonClick;
|
25
|
+
|
26
|
+
var _useState = (0, _react.useState)(function () {
|
27
|
+
return actualInputValue === min || disabled;
|
28
|
+
}),
|
29
|
+
minusButtonDisable = _useState[0],
|
30
|
+
setMinusButtonDisable = _useState[1];
|
31
|
+
|
32
|
+
var _useState2 = (0, _react.useState)(function () {
|
33
|
+
return actualInputValue === max || disabled;
|
34
|
+
}),
|
35
|
+
addButtonDisable = _useState2[0],
|
36
|
+
setAddButtonDisable = _useState2[1];
|
37
|
+
|
38
|
+
var handleMinusButtonClick = function handleMinusButtonClick(e) {
|
39
|
+
if (minusButtonDisable) {
|
40
|
+
return;
|
41
|
+
}
|
42
|
+
|
43
|
+
updateValue(function (oldValue) {
|
44
|
+
var result = correctCalculation(oldValue, step, '-');
|
45
|
+
return result < min ? equalLimitDisabled ? oldValue : min : result;
|
46
|
+
});
|
47
|
+
onMinusButtonClick && onMinusButtonClick(e);
|
48
|
+
};
|
49
|
+
|
50
|
+
var handleAddButtonClick = function handleAddButtonClick(e) {
|
51
|
+
if (addButtonDisable) {
|
52
|
+
return;
|
53
|
+
}
|
54
|
+
|
55
|
+
updateValue(function (oldValue) {
|
56
|
+
var result = correctCalculation(Number(oldValue), step, '+');
|
57
|
+
return result > max ? equalLimitDisabled ? oldValue : max : result;
|
58
|
+
});
|
59
|
+
onAddButtonClick && onAddButtonClick(e);
|
60
|
+
}; // 当前值改变时,更新按钮状态
|
61
|
+
// Changes button status when value changed
|
62
|
+
|
63
|
+
|
64
|
+
(0, _react.useEffect)(function () {
|
65
|
+
setMinusButtonDisable(actualInputValue <= min);
|
66
|
+
setAddButtonDisable(actualInputValue >= max);
|
67
|
+
}, [actualInputValue]);
|
68
|
+
return {
|
69
|
+
minusButtonDisable: minusButtonDisable,
|
70
|
+
addButtonDisable: addButtonDisable,
|
71
|
+
handleMinusButtonClick: handleMinusButtonClick,
|
72
|
+
handleAddButtonClick: handleAddButtonClick
|
73
|
+
};
|
74
|
+
}
|
@@ -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
|
+
};
|