@arco-design/mobile-react 2.26.0 → 2.27.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 +18 -0
- package/README.en-US.md +2 -2
- package/README.md +2 -2
- package/cjs/form/form-item.js +4 -2
- package/cjs/icon/IconHeart/index.js +1 -1
- package/cjs/icon/IconKeyboard/index.d.ts +7 -0
- package/cjs/icon/IconKeyboard/index.js +48 -0
- package/cjs/icon/IconKeyboardDelete/index.d.ts +7 -0
- package/cjs/icon/IconKeyboardDelete/index.js +44 -0
- package/cjs/icon/IconMinus/index.js +1 -1
- package/cjs/icon/IconMore/index.js +1 -1
- package/cjs/icon/IconNotice/index.js +1 -1
- package/cjs/icon/IconNoticeOff/index.js +1 -1
- package/cjs/icon/IconPlay/index.js +1 -1
- package/cjs/icon/IconSetting/index.js +2 -2
- package/cjs/icon/IconSound/index.js +1 -1
- package/cjs/icon/IconStar/index.js +1 -1
- package/cjs/icon/IconStarFill/index.js +1 -1
- package/cjs/icon/IconTriDown/index.js +1 -1
- package/cjs/icon/IconTriUp/index.js +1 -1
- package/cjs/icon/IconUpload/index.js +1 -1
- package/cjs/icon/IconWarnCircle/index.js +1 -1
- package/cjs/icon/IconWarnCircleFill/index.js +1 -1
- package/cjs/icon/index.d.ts +2 -0
- package/cjs/icon/index.js +12 -2
- package/cjs/image-picker/style/css/index.d.ts +1 -0
- package/cjs/image-picker/style/css/index.js +2 -0
- package/cjs/image-picker/style/index.d.ts +1 -0
- package/cjs/image-picker/style/index.js +2 -0
- package/cjs/index-bar/context.d.ts +3 -0
- package/cjs/index-bar/context.js +15 -0
- package/cjs/index-bar/demo/style/css/mobile.css +23 -0
- package/cjs/index-bar/demo/style/mobile.less +26 -0
- package/cjs/index-bar/group.d.ts +3 -0
- package/cjs/index-bar/group.js +101 -0
- package/cjs/index-bar/index.d.ts +15 -0
- package/cjs/index-bar/index.js +276 -0
- package/cjs/index-bar/side-bar.d.ts +3 -0
- package/cjs/index-bar/side-bar.js +102 -0
- package/cjs/index-bar/style/css/index.css +164 -0
- package/cjs/index-bar/style/css/index.d.ts +3 -0
- package/cjs/index-bar/style/css/index.js +7 -0
- package/cjs/index-bar/style/index.d.ts +3 -0
- package/cjs/index-bar/style/index.js +7 -0
- package/cjs/index-bar/style/index.less +122 -0
- package/cjs/index-bar/type.d.ts +195 -0
- package/cjs/index-bar/type.js +3 -0
- package/cjs/index-bar/utils.d.ts +6 -0
- package/cjs/index-bar/utils.js +68 -0
- package/cjs/index.d.ts +2 -0
- package/cjs/index.js +9 -1
- package/cjs/keyboard/demo/style/css/mobile.css +4 -0
- package/cjs/keyboard/demo/style/mobile.less +8 -0
- package/cjs/keyboard/index.d.ts +13 -0
- package/cjs/keyboard/index.js +270 -0
- package/cjs/keyboard/style/css/index.css +93 -0
- package/cjs/keyboard/style/css/index.d.ts +3 -0
- package/cjs/keyboard/style/css/index.js +7 -0
- package/cjs/keyboard/style/index.d.ts +3 -0
- package/cjs/keyboard/style/index.js +7 -0
- package/cjs/keyboard/style/index.less +80 -0
- package/cjs/keyboard/type.d.ts +102 -0
- package/cjs/keyboard/type.js +3 -0
- package/cjs/picker/index.js +3 -39
- package/cjs/picker/type.d.ts +1 -1
- package/cjs/picker-view/components/cascader.d.ts +2 -3
- package/cjs/picker-view/components/cascader.js +8 -6
- package/cjs/picker-view/components/multi-picker.d.ts +2 -3
- package/cjs/picker-view/components/multi-picker.js +31 -35
- package/cjs/picker-view/components/picker-cell.d.ts +1 -1
- package/cjs/picker-view/components/picker-cell.js +5 -7
- package/cjs/picker-view/index.d.ts +1 -1
- package/cjs/picker-view/index.js +9 -20
- package/cjs/picker-view/type.d.ts +2 -2
- package/cjs/slider/hooks/useSliderEvents.js +20 -20
- package/cjs/sticky/index.js +2 -2
- package/cjs/style.d.ts +2 -0
- package/cjs/style.js +4 -0
- package/dist/index.js +1793 -483
- package/dist/index.min.js +4 -4
- package/dist/style.css +215 -1
- package/dist/style.min.css +1 -1
- package/esm/form/form-item.js +4 -2
- package/esm/icon/IconHeart/index.js +1 -1
- package/esm/icon/IconKeyboard/index.d.ts +7 -0
- package/esm/icon/IconKeyboard/index.js +37 -0
- package/esm/icon/IconKeyboardDelete/index.d.ts +7 -0
- package/esm/icon/IconKeyboardDelete/index.js +33 -0
- package/esm/icon/IconMinus/index.js +1 -1
- package/esm/icon/IconMore/index.js +1 -1
- package/esm/icon/IconNotice/index.js +1 -1
- package/esm/icon/IconNoticeOff/index.js +1 -1
- package/esm/icon/IconPlay/index.js +1 -1
- package/esm/icon/IconSetting/index.js +2 -2
- package/esm/icon/IconSound/index.js +1 -1
- package/esm/icon/IconStar/index.js +1 -1
- package/esm/icon/IconStarFill/index.js +1 -1
- package/esm/icon/IconTriDown/index.js +1 -1
- package/esm/icon/IconTriUp/index.js +1 -1
- package/esm/icon/IconUpload/index.js +1 -1
- package/esm/icon/IconWarnCircle/index.js +1 -1
- package/esm/icon/IconWarnCircleFill/index.js +1 -1
- package/esm/icon/index.d.ts +2 -0
- package/esm/icon/index.js +2 -0
- package/esm/image-picker/style/css/index.d.ts +1 -0
- package/esm/image-picker/style/css/index.js +1 -0
- package/esm/image-picker/style/index.d.ts +1 -0
- package/esm/image-picker/style/index.js +1 -0
- package/esm/index-bar/context.d.ts +3 -0
- package/esm/index-bar/context.js +8 -0
- package/esm/index-bar/demo/style/css/mobile.css +23 -0
- package/esm/index-bar/demo/style/mobile.less +26 -0
- package/esm/index-bar/group.d.ts +3 -0
- package/esm/index-bar/group.js +83 -0
- package/esm/index-bar/index.d.ts +15 -0
- package/esm/index-bar/index.js +254 -0
- package/esm/index-bar/side-bar.d.ts +3 -0
- package/esm/index-bar/side-bar.js +90 -0
- package/esm/index-bar/style/css/index.css +164 -0
- package/esm/index-bar/style/css/index.d.ts +3 -0
- package/esm/index-bar/style/css/index.js +3 -0
- package/esm/index-bar/style/index.d.ts +3 -0
- package/esm/index-bar/style/index.js +3 -0
- package/esm/index-bar/style/index.less +122 -0
- package/esm/index-bar/type.d.ts +195 -0
- package/esm/index-bar/type.js +1 -0
- package/esm/index-bar/utils.d.ts +6 -0
- package/esm/index-bar/utils.js +53 -0
- package/esm/index.d.ts +2 -0
- package/esm/index.js +2 -0
- package/esm/keyboard/demo/style/css/mobile.css +4 -0
- package/esm/keyboard/demo/style/mobile.less +8 -0
- package/esm/keyboard/index.d.ts +13 -0
- package/esm/keyboard/index.js +243 -0
- package/esm/keyboard/style/css/index.css +93 -0
- package/esm/keyboard/style/css/index.d.ts +3 -0
- package/esm/keyboard/style/css/index.js +3 -0
- package/esm/keyboard/style/index.d.ts +3 -0
- package/esm/keyboard/style/index.js +3 -0
- package/esm/keyboard/style/index.less +80 -0
- package/esm/keyboard/type.d.ts +102 -0
- package/esm/keyboard/type.js +1 -0
- package/esm/picker/index.js +3 -40
- package/esm/picker/type.d.ts +1 -1
- package/esm/picker-view/components/cascader.d.ts +2 -3
- package/esm/picker-view/components/cascader.js +8 -6
- package/esm/picker-view/components/multi-picker.d.ts +2 -3
- package/esm/picker-view/components/multi-picker.js +31 -34
- package/esm/picker-view/components/picker-cell.d.ts +1 -1
- package/esm/picker-view/components/picker-cell.js +5 -7
- package/esm/picker-view/index.d.ts +1 -1
- package/esm/picker-view/index.js +10 -21
- package/esm/picker-view/type.d.ts +2 -2
- package/esm/slider/hooks/useSliderEvents.js +20 -20
- package/esm/sticky/index.js +2 -2
- package/esm/style.d.ts +2 -0
- package/esm/style.js +2 -0
- package/package.json +3 -3
- package/tokens/app/arcodesign/default/css-variables.less +43 -0
- package/tokens/app/arcodesign/default/index.d.ts +43 -0
- package/tokens/app/arcodesign/default/index.js +43 -0
- package/tokens/app/arcodesign/default/index.json +516 -0
- package/tokens/app/arcodesign/default/index.less +43 -0
- package/umd/form/form-item.js +4 -2
- package/umd/icon/IconHeart/index.js +1 -1
- package/umd/icon/IconKeyboard/index.d.ts +7 -0
- package/umd/icon/IconKeyboard/index.js +56 -0
- package/umd/icon/IconKeyboardDelete/index.d.ts +7 -0
- package/umd/icon/IconKeyboardDelete/index.js +52 -0
- package/umd/icon/IconMinus/index.js +1 -1
- package/umd/icon/IconMore/index.js +1 -1
- package/umd/icon/IconNotice/index.js +1 -1
- package/umd/icon/IconNoticeOff/index.js +1 -1
- package/umd/icon/IconPlay/index.js +1 -1
- package/umd/icon/IconSetting/index.js +2 -2
- package/umd/icon/IconSound/index.js +1 -1
- package/umd/icon/IconStar/index.js +1 -1
- package/umd/icon/IconStarFill/index.js +1 -1
- package/umd/icon/IconTriDown/index.js +1 -1
- package/umd/icon/IconTriUp/index.js +1 -1
- package/umd/icon/IconUpload/index.js +1 -1
- package/umd/icon/IconWarnCircle/index.js +1 -1
- package/umd/icon/IconWarnCircleFill/index.js +1 -1
- package/umd/icon/index.d.ts +2 -0
- package/umd/icon/index.js +12 -6
- package/umd/image-picker/style/css/index.d.ts +1 -0
- package/umd/image-picker/style/css/index.js +4 -4
- package/umd/image-picker/style/index.d.ts +1 -0
- package/umd/image-picker/style/index.js +4 -4
- package/umd/index-bar/context.d.ts +3 -0
- package/umd/index-bar/context.js +26 -0
- package/umd/index-bar/demo/style/css/mobile.css +23 -0
- package/umd/index-bar/demo/style/mobile.less +26 -0
- package/umd/index-bar/group.d.ts +3 -0
- package/umd/index-bar/group.js +107 -0
- package/umd/index-bar/index.d.ts +15 -0
- package/umd/index-bar/index.js +274 -0
- package/umd/index-bar/side-bar.d.ts +3 -0
- package/umd/index-bar/side-bar.js +113 -0
- package/umd/index-bar/style/css/index.css +164 -0
- package/umd/index-bar/style/css/index.d.ts +3 -0
- package/umd/index-bar/style/css/index.js +15 -0
- package/umd/index-bar/style/index.d.ts +3 -0
- package/umd/index-bar/style/index.js +15 -0
- package/umd/index-bar/style/index.less +122 -0
- package/umd/index-bar/type.d.ts +195 -0
- package/umd/index-bar/type.js +17 -0
- package/umd/index-bar/utils.d.ts +6 -0
- package/umd/index-bar/utils.js +78 -0
- package/umd/index.d.ts +2 -0
- package/umd/index.js +9 -5
- package/umd/keyboard/demo/style/css/mobile.css +4 -0
- package/umd/keyboard/demo/style/mobile.less +8 -0
- package/umd/keyboard/index.d.ts +13 -0
- package/umd/keyboard/index.js +271 -0
- package/umd/keyboard/style/css/index.css +93 -0
- package/umd/keyboard/style/css/index.d.ts +3 -0
- package/umd/keyboard/style/css/index.js +15 -0
- package/umd/keyboard/style/index.d.ts +3 -0
- package/umd/keyboard/style/index.js +15 -0
- package/umd/keyboard/style/index.less +80 -0
- package/umd/keyboard/type.d.ts +102 -0
- package/umd/keyboard/type.js +17 -0
- package/umd/picker/index.js +3 -39
- package/umd/picker/type.d.ts +1 -1
- package/umd/picker-view/components/cascader.d.ts +2 -3
- package/umd/picker-view/components/cascader.js +8 -6
- package/umd/picker-view/components/multi-picker.d.ts +2 -3
- package/umd/picker-view/components/multi-picker.js +31 -35
- package/umd/picker-view/components/picker-cell.d.ts +1 -1
- package/umd/picker-view/components/picker-cell.js +5 -7
- package/umd/picker-view/index.d.ts +1 -1
- package/umd/picker-view/index.js +9 -20
- package/umd/picker-view/type.d.ts +2 -2
- package/umd/slider/hooks/useSliderEvents.js +20 -20
- package/umd/sticky/index.js +2 -2
- package/umd/style.d.ts +2 -0
- package/umd/style.js +4 -4
@@ -0,0 +1,93 @@
|
|
1
|
+
.arco-keyboard {
|
2
|
+
background: #f2f3f5 ;
|
3
|
+
padding: 0.16rem ;
|
4
|
+
-webkit-touch-callout: none;
|
5
|
+
/* iOS Safari */
|
6
|
+
-webkit-user-select: none;
|
7
|
+
/* Chrome/Safari/Opera */
|
8
|
+
/* Konqueror */
|
9
|
+
/* Firefox */
|
10
|
+
/* Internet Explorer/Edge */
|
11
|
+
user-select: none;
|
12
|
+
/* Non-prefixed version, currently*/
|
13
|
+
}
|
14
|
+
.arco-keyboard-wrapper {
|
15
|
+
display: -webkit-box;
|
16
|
+
display: -webkit-flex;
|
17
|
+
display: flex;
|
18
|
+
}
|
19
|
+
.arco-keyboard-key-wrapper {
|
20
|
+
-webkit-box-flex: 2;
|
21
|
+
-webkit-flex: 2 0 auto;
|
22
|
+
flex: 2 0 auto;
|
23
|
+
}
|
24
|
+
.arco-keyboard-row {
|
25
|
+
display: -webkit-box;
|
26
|
+
display: -webkit-flex;
|
27
|
+
display: flex;
|
28
|
+
}
|
29
|
+
.arco-keyboard-row:not(.arco-keyboard-row:nth-last-child(1)) {
|
30
|
+
margin-bottom: 0.16rem ;
|
31
|
+
}
|
32
|
+
.arco-keyboard-row .arco-keyboard-key:not(.arco-keyboard-row .arco-keyboard-key:nth-child(1)) {
|
33
|
+
margin-left: 0.16rem ;
|
34
|
+
}
|
35
|
+
.arco-keyboard-row .arco-keyboard-key-special {
|
36
|
+
-webkit-box-flex: 2.1;
|
37
|
+
-webkit-flex: 2.1 0 auto;
|
38
|
+
flex: 2.1 0 auto;
|
39
|
+
}
|
40
|
+
.arco-keyboard-col {
|
41
|
+
-webkit-box-flex: 1;
|
42
|
+
-webkit-flex: 1;
|
43
|
+
flex: 1;
|
44
|
+
display: -webkit-box;
|
45
|
+
display: -webkit-flex;
|
46
|
+
display: flex;
|
47
|
+
-webkit-box-orient: vertical;
|
48
|
+
-webkit-box-direction: normal;
|
49
|
+
-webkit-flex-direction: column;
|
50
|
+
flex-direction: column;
|
51
|
+
margin-left: 0.16rem ;
|
52
|
+
}
|
53
|
+
.arco-keyboard-col .arco-keyboard-key:not(.arco-keyboard-col .arco-keyboard-key:nth-child(1)) {
|
54
|
+
margin-top: 0.16rem ;
|
55
|
+
}
|
56
|
+
.arco-keyboard-col .arco-keyboard-key-confirm {
|
57
|
+
-webkit-box-flex: 2.5;
|
58
|
+
-webkit-flex: 2.5 0 auto;
|
59
|
+
flex: 2.5 0 auto;
|
60
|
+
background: #165dff ;
|
61
|
+
color: #ffffff ;
|
62
|
+
font-size: 0.36rem ;
|
63
|
+
}
|
64
|
+
.arco-keyboard-key {
|
65
|
+
display: -webkit-box;
|
66
|
+
display: -webkit-flex;
|
67
|
+
display: flex;
|
68
|
+
-webkit-box-align: center;
|
69
|
+
-webkit-align-items: center;
|
70
|
+
align-items: center;
|
71
|
+
-webkit-box-pack: center;
|
72
|
+
-webkit-justify-content: center;
|
73
|
+
justify-content: center;
|
74
|
+
-webkit-box-flex: 1;
|
75
|
+
-webkit-flex: 1;
|
76
|
+
flex: 1;
|
77
|
+
font-weight: 500 ;
|
78
|
+
font-size: 0.44rem ;
|
79
|
+
line-height: 0.6rem ;
|
80
|
+
background: #ffffff ;
|
81
|
+
height: 0.96rem ;
|
82
|
+
border-radius: 0.08rem ;
|
83
|
+
color: #1d2129 ;
|
84
|
+
}
|
85
|
+
.arco-keyboard-key:active {
|
86
|
+
background: #e5e6eb ;
|
87
|
+
}
|
88
|
+
.arco-keyboard-key .arco-icon {
|
89
|
+
font-size: 0.52rem ;
|
90
|
+
}
|
91
|
+
.arco-keyboard-popup {
|
92
|
+
display: none;
|
93
|
+
}
|
@@ -0,0 +1,80 @@
|
|
1
|
+
@import '../../../style/mixin.less';
|
2
|
+
|
3
|
+
.@{prefix}-keyboard {
|
4
|
+
.use-var(background, keyboard-background);
|
5
|
+
.use-var(padding, keyboard-content-padding);
|
6
|
+
.noselect();
|
7
|
+
|
8
|
+
&-wrapper {
|
9
|
+
display: flex;
|
10
|
+
}
|
11
|
+
|
12
|
+
&-key-wrapper {
|
13
|
+
flex: 2 0 auto;
|
14
|
+
}
|
15
|
+
|
16
|
+
&-row {
|
17
|
+
display: flex;
|
18
|
+
&:not(&:nth-last-child(1)) {
|
19
|
+
.use-var(margin-bottom, keyboard-unified-margin);
|
20
|
+
}
|
21
|
+
|
22
|
+
.@{prefix}-keyboard-key {
|
23
|
+
&:not(&:nth-child(1)) {
|
24
|
+
.use-var(margin-left, keyboard-unified-margin);
|
25
|
+
}
|
26
|
+
|
27
|
+
&-special {
|
28
|
+
flex: 2.1 0 auto;
|
29
|
+
}
|
30
|
+
}
|
31
|
+
}
|
32
|
+
|
33
|
+
&-col {
|
34
|
+
flex: 1;
|
35
|
+
display: flex;
|
36
|
+
flex-direction: column;
|
37
|
+
.use-var(margin-left, keyboard-unified-margin);
|
38
|
+
|
39
|
+
.@{prefix}-keyboard-key {
|
40
|
+
&:not(&:nth-child(1)) {
|
41
|
+
.use-var(margin-top, keyboard-unified-margin);
|
42
|
+
}
|
43
|
+
|
44
|
+
&-confirm {
|
45
|
+
flex: 2.5 0 auto;
|
46
|
+
.use-var(background, keyboard-confirm-key-background);
|
47
|
+
.use-var(color, keyboard-confirm-key-color);
|
48
|
+
.use-var(font-size, keyboard-confirm-key-font-size);
|
49
|
+
}
|
50
|
+
}
|
51
|
+
}
|
52
|
+
|
53
|
+
&-key {
|
54
|
+
display: flex;
|
55
|
+
align-items: center;
|
56
|
+
justify-content: center;
|
57
|
+
flex: 1;
|
58
|
+
|
59
|
+
.use-var(font-weight, keyboard-key-font-weight);
|
60
|
+
.use-var(font-size, keyboard-key-font-size);
|
61
|
+
.use-var(line-height, keyboard-key-line-height);
|
62
|
+
.use-var(background, keyboard-key-background);
|
63
|
+
.use-var(border-radius, keyboard-key-border-radius);
|
64
|
+
.use-var(height, keyboard-key-height);
|
65
|
+
.use-var(border-radius, keyboard-key-border-radius);
|
66
|
+
.use-var(color, keyboard-key-color);
|
67
|
+
|
68
|
+
&:active {
|
69
|
+
.use-var(background, keyboard-key-active-background);
|
70
|
+
}
|
71
|
+
|
72
|
+
.@{prefix}-icon {
|
73
|
+
.use-var(font-size, keyboard-key-icon-size);
|
74
|
+
}
|
75
|
+
}
|
76
|
+
|
77
|
+
&-popup {
|
78
|
+
display: none;
|
79
|
+
}
|
80
|
+
}
|
@@ -0,0 +1,102 @@
|
|
1
|
+
import { CSSProperties, ReactNode } from 'react';
|
2
|
+
import { PopupProps, PopupRef } from '../popup';
|
3
|
+
export declare type ColumnData = string | number | ColumnObjData;
|
4
|
+
export declare type ColumnObjData = {
|
5
|
+
type: 'keyboard' | 'delete';
|
6
|
+
} | {
|
7
|
+
type: 'content';
|
8
|
+
content: ReactNode;
|
9
|
+
value: string | number;
|
10
|
+
};
|
11
|
+
export interface KeyboardProps extends PopupProps {
|
12
|
+
/**
|
13
|
+
* 常规键位自定义类名
|
14
|
+
* @en Custom classname for normal keys
|
15
|
+
*/
|
16
|
+
normalKeyClass?: string;
|
17
|
+
/**
|
18
|
+
* 常规键位自定义样式
|
19
|
+
* @en Custom style for normal keys
|
20
|
+
*/
|
21
|
+
normalKeyStyle?: CSSProperties;
|
22
|
+
/**
|
23
|
+
* 自定义类名
|
24
|
+
* @en Custom classname
|
25
|
+
*/
|
26
|
+
className?: string;
|
27
|
+
/**
|
28
|
+
* 自定义样式
|
29
|
+
* @en Custom stylesheet
|
30
|
+
*/
|
31
|
+
style?: React.CSSProperties;
|
32
|
+
/**
|
33
|
+
* 键盘展示类型,不同类型有不同布局。number - 纯数字常规键盘,confirm - 带确认按钮的键盘,tool - 带运算符的键盘
|
34
|
+
* @en Keyboard display type, different types have different layouts. number - a regular keyboard with pure numbers, confirm - a keyboard with a confirm button, tool - a keyboard with operators
|
35
|
+
* @default "number"
|
36
|
+
*/
|
37
|
+
type?: 'number' | 'confirm' | 'tool';
|
38
|
+
/**
|
39
|
+
* 是否打乱键盘中的数字展示位置
|
40
|
+
* @en Whether to scramble number placements in the keyboard
|
41
|
+
* @default false
|
42
|
+
*/
|
43
|
+
randomOrder: boolean;
|
44
|
+
/**
|
45
|
+
* 键盘顶部展示标题内容,样式纯自定义
|
46
|
+
* @en The title content displayed on the top of the keyboard, the style is purely customized
|
47
|
+
*/
|
48
|
+
title?: ReactNode;
|
49
|
+
/**
|
50
|
+
* 自定义渲染数字右侧(第四列)的内容
|
51
|
+
* @en Custom rendering of the content to the right of the number (fourth column)
|
52
|
+
*/
|
53
|
+
rightColumns?: ReactNode;
|
54
|
+
/**
|
55
|
+
* 点击确认后是否自动关闭键盘
|
56
|
+
* @en Whether to automatically close the keyboard after clicking confirm button
|
57
|
+
* @default false
|
58
|
+
*/
|
59
|
+
confirmClosable?: boolean;
|
60
|
+
/**
|
61
|
+
* 自定义渲染确认按钮内部内容
|
62
|
+
* @en Customize the internal content of the confirm button
|
63
|
+
*/
|
64
|
+
confirmButton?: ReactNode;
|
65
|
+
/**
|
66
|
+
* 自定义渲染删除按钮内部内容
|
67
|
+
* @en Customize the internal content of the delete button
|
68
|
+
*/
|
69
|
+
deleteButton?: ReactNode;
|
70
|
+
/**
|
71
|
+
* 自定义渲染收起键盘按钮内部内容
|
72
|
+
* @en Customize the internal content of the keyboard button
|
73
|
+
*/
|
74
|
+
keyboardButton?: ReactNode;
|
75
|
+
/**
|
76
|
+
* 收起键盘回调
|
77
|
+
* @en Callback for closing the keyboard
|
78
|
+
*/
|
79
|
+
close: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => {};
|
80
|
+
/**
|
81
|
+
* 点击确认按钮回调
|
82
|
+
* @en Callback for clicking the confirm button
|
83
|
+
*/
|
84
|
+
onConfirm?: () => {};
|
85
|
+
/**
|
86
|
+
* 点击删除按钮回调
|
87
|
+
* @en Callback for clicking the delete button
|
88
|
+
*/
|
89
|
+
onDelete?: () => {};
|
90
|
+
/**
|
91
|
+
* 点击常规按钮回调
|
92
|
+
* @en Callback for clicking the normal button
|
93
|
+
*/
|
94
|
+
onChange?: (data: string | number) => {};
|
95
|
+
}
|
96
|
+
export interface KeyboardRef extends PopupRef {
|
97
|
+
/**
|
98
|
+
* 最外层 DOM 元素
|
99
|
+
* @en The outer DOM element of the component
|
100
|
+
*/
|
101
|
+
keyboard: HTMLDivElement | null;
|
102
|
+
}
|
package/cjs/picker/index.js
CHANGED
@@ -44,42 +44,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
44
44
|
|
45
45
|
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; }
|
46
46
|
|
47
|
-
var getInitialValue = function getInitialValue(value, data, cascade) {
|
48
|
-
if (value && value.length) {
|
49
|
-
return value;
|
50
|
-
}
|
51
|
-
|
52
|
-
var computedValue = [];
|
53
|
-
|
54
|
-
if (!cascade) {
|
55
|
-
if (!(data[0] instanceof Array)) {
|
56
|
-
var _data$;
|
57
|
-
|
58
|
-
return (_data$ = data[0]) != null && _data$.value ? [data[0].value] : [];
|
59
|
-
}
|
60
|
-
|
61
|
-
data.map(function (column) {
|
62
|
-
computedValue.push(typeof column[0] === 'object' ? column[0].value : column[0]);
|
63
|
-
});
|
64
|
-
} else {
|
65
|
-
var cascadePickerData = data;
|
66
|
-
|
67
|
-
if (!cascadePickerData || !cascadePickerData.length) {
|
68
|
-
return computedValue;
|
69
|
-
}
|
70
|
-
|
71
|
-
computedValue.push(cascadePickerData[0].value);
|
72
|
-
var traverse = cascadePickerData[0].children;
|
73
|
-
|
74
|
-
while (traverse) {
|
75
|
-
computedValue.push(traverse[0].value);
|
76
|
-
traverse = traverse[0].children;
|
77
|
-
}
|
78
|
-
}
|
79
|
-
|
80
|
-
return computedValue;
|
81
|
-
};
|
82
|
-
|
83
47
|
var Picker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
84
48
|
var className = props.className,
|
85
49
|
itemStyle = props.itemStyle,
|
@@ -117,7 +81,7 @@ var Picker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
117
81
|
gestureOutOfControl = _props$gestureOutOfCo === void 0 ? true : _props$gestureOutOfCo,
|
118
82
|
otherProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
|
119
83
|
|
120
|
-
var _useState = (0, _react.useState)(
|
84
|
+
var _useState = (0, _react.useState)(value),
|
121
85
|
scrollValue = _useState[0],
|
122
86
|
setScrollValue = _useState[1];
|
123
87
|
|
@@ -171,7 +135,7 @@ var Picker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
171
135
|
(0, _mobileUtils.nextTick)(function () {
|
172
136
|
var _pickerViewRef$curren7;
|
173
137
|
|
174
|
-
var val = ((_pickerViewRef$curren7 = pickerViewRef.current) == null ? void 0 : _pickerViewRef$curren7.getAllColumnValues()) || scrollValue;
|
138
|
+
var val = ((_pickerViewRef$curren7 = pickerViewRef.current) == null ? void 0 : _pickerViewRef$curren7.getAllColumnValues()) || scrollValue || [];
|
175
139
|
|
176
140
|
if (onOk) {
|
177
141
|
onOk(val);
|
@@ -234,7 +198,7 @@ var Picker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
234
198
|
cols: cols,
|
235
199
|
rows: rows,
|
236
200
|
disabled: disabled,
|
237
|
-
value:
|
201
|
+
value: value,
|
238
202
|
onPickerChange: onPickerChange,
|
239
203
|
itemStyle: itemStyle,
|
240
204
|
clickable: clickable,
|
package/cjs/picker/type.d.ts
CHANGED
@@ -51,7 +51,7 @@ export interface PickerProps extends Omit<PopupProps, 'visible' | 'close' | 'chi
|
|
51
51
|
* 每列数据选择变化后的回调函数
|
52
52
|
* @en The callback after each column data selection changes
|
53
53
|
*/
|
54
|
-
onPickerChange?: (value: ValueType[], index: number) => void;
|
54
|
+
onPickerChange?: (value: ValueType[], index: number, data: PickerData[]) => void;
|
55
55
|
/**
|
56
56
|
* 每列样式
|
57
57
|
* @en Stylesheet per column
|
@@ -9,11 +9,10 @@ export interface CascaderProps {
|
|
9
9
|
disabled: boolean;
|
10
10
|
itemHeight: number;
|
11
11
|
wrapperHeight: number;
|
12
|
-
selectedValue
|
12
|
+
selectedValue?: ValueType[];
|
13
13
|
rows?: number;
|
14
14
|
hideEmptyCols?: boolean;
|
15
|
-
onValueChange?: (value: ValueType[], index: number) => void;
|
16
|
-
onPickerChange?: (value: ValueType[], index: number) => void;
|
15
|
+
onValueChange?: (value: ValueType[], index: number, data: PickerData[]) => void;
|
17
16
|
touchToStop?: boolean | number;
|
18
17
|
}
|
19
18
|
export interface CascaderRef {
|
@@ -28,7 +28,6 @@ var Cascader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
28
28
|
wrapperHeight = props.wrapperHeight,
|
29
29
|
rows = props.rows,
|
30
30
|
hideEmptyCols = props.hideEmptyCols,
|
31
|
-
onPickerChange = props.onPickerChange,
|
32
31
|
onValueChange = props.onValueChange,
|
33
32
|
_props$selectedValue = props.selectedValue,
|
34
33
|
selectedValue = _props$selectedValue === void 0 ? [] : _props$selectedValue,
|
@@ -53,7 +52,7 @@ var Cascader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
53
52
|
});
|
54
53
|
}
|
55
54
|
|
56
|
-
function _onValueChange(value, index) {
|
55
|
+
function _onValueChange(value, index, newData) {
|
57
56
|
var children = (0, _mobileUtils.arrayTreeFilter)(data, function (item, level) {
|
58
57
|
return level <= index && item.value === value[level];
|
59
58
|
});
|
@@ -63,15 +62,19 @@ var Cascader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
63
62
|
for (i = index + 1; i < cols && child && child.children; i++) {
|
64
63
|
child = child.children[0];
|
65
64
|
value[i] = child.value;
|
65
|
+
newData[i] = child;
|
66
66
|
}
|
67
67
|
|
68
68
|
value.length = i;
|
69
|
-
|
69
|
+
newData.length = i;
|
70
|
+
onValueChange == null ? void 0 : onValueChange(value, index, newData);
|
70
71
|
}
|
71
72
|
|
72
73
|
function _formatData() {
|
73
74
|
var childrenTree = (0, _mobileUtils.arrayTreeFilter)(data, function (item, level) {
|
74
|
-
return item.value === selectedValue[level];
|
75
|
+
return item.value === (selectedValue == null ? void 0 : selectedValue[level]);
|
76
|
+
}, {
|
77
|
+
fallbackChildIndex: 0
|
75
78
|
}).map(function (item) {
|
76
79
|
return item.children;
|
77
80
|
});
|
@@ -96,8 +99,7 @@ var Cascader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
96
99
|
data: formatData,
|
97
100
|
selectedValue: selectedValue,
|
98
101
|
itemHeight: itemHeight,
|
99
|
-
onValueChange: _onValueChange
|
100
|
-
onPickerChange: onPickerChange
|
102
|
+
onValueChange: _onValueChange
|
101
103
|
}, formatData.map(function (item, index) {
|
102
104
|
return /*#__PURE__*/_react.default.createElement(_pickerCell.default, {
|
103
105
|
key: index + "_picker_cell_cascader",
|
@@ -3,10 +3,9 @@ import { PickerData, ValueType } from '../type';
|
|
3
3
|
export interface MultiPickerProps {
|
4
4
|
prefixCls: string;
|
5
5
|
data: PickerData[][];
|
6
|
-
selectedValue
|
6
|
+
selectedValue?: ValueType[];
|
7
7
|
children: any;
|
8
8
|
itemHeight: number;
|
9
|
-
onValueChange: (value: ValueType[], index: number) => void;
|
10
|
-
onPickerChange?: (value: ValueType[], index: number) => void;
|
9
|
+
onValueChange: (value: ValueType[], index: number, data: PickerData[]) => void;
|
11
10
|
}
|
12
11
|
export default function MultiPicker(props: MultiPickerProps): JSX.Element;
|
@@ -10,60 +10,56 @@ var _react = _interopRequireDefault(require("react"));
|
|
10
10
|
function MultiPicker(props) {
|
11
11
|
var prefixCls = props.prefixCls,
|
12
12
|
onValueChange = props.onValueChange,
|
13
|
-
onPickerChange = props.onPickerChange,
|
14
13
|
children = props.children,
|
15
14
|
itemHeight = props.itemHeight,
|
16
15
|
selectedValue = props.selectedValue,
|
17
16
|
data = props.data;
|
18
17
|
|
19
|
-
function
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
return
|
26
|
-
return item && item[0] && item[0].value;
|
27
|
-
});
|
28
|
-
}
|
29
|
-
|
30
|
-
if (!children) {
|
31
|
-
return [];
|
32
|
-
}
|
33
|
-
|
34
|
-
return _react.default.Children.map(children, function (child) {
|
35
|
-
var childrenArray = _react.default.Children.toArray(child.children || child.props.children);
|
36
|
-
|
37
|
-
return childrenArray && childrenArray[0] && childrenArray[0].props.value;
|
18
|
+
function getCurrentData() {
|
19
|
+
return (data || []).map(function (item, itemIndex) {
|
20
|
+
var curSelected = selectedValue == null ? void 0 : selectedValue[itemIndex];
|
21
|
+
var cur = curSelected ? (item || []).find(function (i) {
|
22
|
+
return i.value === curSelected;
|
23
|
+
}) : undefined;
|
24
|
+
return cur || (item == null ? void 0 : item[0]);
|
38
25
|
});
|
39
26
|
}
|
40
27
|
|
41
|
-
function onChange(
|
42
|
-
var
|
28
|
+
function onChange(_ref) {
|
29
|
+
var index = _ref.index,
|
30
|
+
value = _ref.value,
|
31
|
+
changedData = _ref.changedData,
|
32
|
+
callback = _ref.callback;
|
33
|
+
var newData = getCurrentData().concat();
|
34
|
+
newData[index] = changedData;
|
35
|
+
var newValue = newData.map(function (d) {
|
36
|
+
return d == null ? void 0 : d.value;
|
37
|
+
});
|
43
38
|
newValue[index] = value;
|
44
39
|
|
45
40
|
if (callback) {
|
46
|
-
callback(newValue, index);
|
41
|
+
callback(newValue, index, newData);
|
47
42
|
}
|
48
43
|
}
|
49
44
|
|
50
|
-
function _onValueChange(value, index) {
|
51
|
-
onChange(
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
45
|
+
function _onValueChange(value, index, changedData) {
|
46
|
+
onChange({
|
47
|
+
index: index,
|
48
|
+
value: value,
|
49
|
+
callback: onValueChange,
|
50
|
+
changedData: changedData
|
51
|
+
});
|
56
52
|
}
|
57
53
|
|
58
54
|
function renderChild() {
|
59
|
-
var
|
55
|
+
var curData = getCurrentData();
|
56
|
+
var value = curData.map(function (d) {
|
57
|
+
return d == null ? void 0 : d.value;
|
58
|
+
});
|
60
59
|
return _react.default.Children.map(children, function (col, index) {
|
61
60
|
return /*#__PURE__*/_react.default.cloneElement(col, {
|
62
|
-
|
63
|
-
return
|
64
|
-
},
|
65
|
-
onValueChange: function onValueChange(val) {
|
66
|
-
return _onValueChange(val, index);
|
61
|
+
onValueChange: function onValueChange(val, changedData) {
|
62
|
+
return _onValueChange(val, index, changedData);
|
67
63
|
},
|
68
64
|
selectedValue: value[index]
|
69
65
|
});
|
@@ -8,7 +8,7 @@ export interface PickerCellProps {
|
|
8
8
|
itemHeight: number;
|
9
9
|
wrapperHeight: number;
|
10
10
|
selectedValue?: ValueType;
|
11
|
-
onValueChange?: (value: ValueType) => void;
|
11
|
+
onValueChange?: (value: ValueType, data: PickerData) => void;
|
12
12
|
disabled: boolean;
|
13
13
|
hideEmptyCols?: boolean;
|
14
14
|
/**
|
@@ -85,17 +85,15 @@ var PickerCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
85
85
|
// index有改变时再抛出
|
86
86
|
// @en Throws again when index changes
|
87
87
|
if (currentIndex !== nowItemIndex) {
|
88
|
-
setCurrentIndex(nowItemIndex);
|
89
|
-
var
|
88
|
+
setCurrentIndex(Math.max(nowItemIndex, 0));
|
89
|
+
var newData = data[nowItemIndex];
|
90
|
+
var newValue = newData == null ? void 0 : newData.value;
|
90
91
|
|
91
92
|
if (newValue !== currentValue) {
|
92
|
-
// if (!('selectedValue' in props)) {
|
93
|
-
// setCurrentValue(newValue);
|
94
|
-
// }
|
95
93
|
setCurrentValue(newValue);
|
96
94
|
|
97
95
|
if (onValueChange) {
|
98
|
-
onValueChange(newValue);
|
96
|
+
onValueChange(newValue, newData);
|
99
97
|
}
|
100
98
|
}
|
101
99
|
}
|
@@ -340,7 +338,7 @@ var PickerCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
340
338
|
var curIndex = data.findIndex(function (item) {
|
341
339
|
return item.value === selectedValue;
|
342
340
|
});
|
343
|
-
setCurrentIndex(curIndex);
|
341
|
+
setCurrentIndex(Math.max(curIndex, 0));
|
344
342
|
|
345
343
|
if (curIndex >= 0) {
|
346
344
|
_scrollToIndexWithChange(curIndex);
|
@@ -25,7 +25,7 @@ export interface PickerViewRef {
|
|
25
25
|
* 获取第 n 列的值
|
26
26
|
* @en Get the value of the nth column
|
27
27
|
*/
|
28
|
-
getColumnValue: (index: number) => ValueType;
|
28
|
+
getColumnValue: (index: number) => ValueType | undefined;
|
29
29
|
/**
|
30
30
|
* 手动更新元素布局
|
31
31
|
* @en Manually update the element layout
|