antd-mobile 5.16.1 → 5.17.2
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/2x/README.md +2 -0
- package/2x/bundle/antd-mobile.cjs.js +3411 -3359
- package/2x/bundle/antd-mobile.es.js +3412 -3360
- package/2x/bundle/style.css +102 -40
- package/2x/cjs/components/button/button.css +1 -0
- package/2x/cjs/components/calendar/calendar.js +2 -2
- package/2x/cjs/components/cascader/cascader.js +1 -1
- package/2x/cjs/components/cascader-view/cascader-view.js +7 -3
- package/2x/cjs/components/date-picker/date-picker.d.ts +2 -2
- package/2x/cjs/components/date-picker/date-picker.js +3 -1
- package/2x/cjs/components/date-picker/index.d.ts +1 -1
- package/2x/cjs/components/date-picker-view/date-picker-view.d.ts +1 -1
- package/2x/cjs/components/date-picker-view/date-picker-view.js +2 -0
- package/2x/cjs/components/dialog/dialog.css +1 -0
- package/2x/cjs/components/dropdown/dropdown.css +2 -2
- package/2x/cjs/components/empty/empty.css +1 -0
- package/2x/cjs/components/floating-bubble/floating-bubble.css +1 -0
- package/2x/cjs/components/floating-panel/floating-panel.css +7 -4
- package/2x/cjs/components/form/form-item.css +1 -0
- package/2x/cjs/components/form/index.css +1 -0
- package/2x/cjs/components/grid/grid.css +1 -0
- package/2x/cjs/components/image/image.d.ts +1 -0
- package/2x/cjs/components/image/image.js +2 -1
- package/2x/cjs/components/image/test/image.test.d.ts +1 -0
- package/2x/cjs/components/image/test/image.test.js +34 -0
- package/2x/cjs/components/image-viewer/image-viewer.css +3 -0
- package/2x/cjs/components/index-bar/index-bar.css +2 -0
- package/2x/cjs/components/input/input.css +6 -0
- package/2x/cjs/components/jumbo-tabs/jumbo-tabs.css +2 -0
- package/2x/cjs/components/modal/modal.css +1 -0
- package/2x/cjs/components/number-keyboard/number-keyboard.css +3 -2
- package/2x/cjs/components/passcode-input/passcode-input.css +1 -1
- package/2x/cjs/components/picker/index.d.ts +4 -0
- package/2x/cjs/components/picker/picker.css +6 -0
- package/2x/cjs/components/picker/picker.d.ts +4 -0
- package/2x/cjs/components/picker/picker.js +7 -3
- package/2x/cjs/components/picker-view/picker-view.css +17 -3
- package/2x/cjs/components/picker-view/picker-view.d.ts +2 -0
- package/2x/cjs/components/picker-view/picker-view.js +10 -3
- package/2x/cjs/components/picker-view/wheel.js +1 -1
- package/2x/cjs/components/popover/popover.css +2 -0
- package/2x/cjs/components/result/result.css +1 -1
- package/2x/cjs/components/side-bar/side-bar.css +1 -0
- package/2x/cjs/components/slider/slider.css +4 -0
- package/2x/cjs/components/swipe-action/swipe-action.css +1 -0
- package/2x/cjs/components/swiper/swiper.css +1 -0
- package/2x/cjs/components/tab-bar/tab-bar.css +1 -0
- package/2x/cjs/components/tabs/tabs.css +1 -0
- package/2x/cjs/components/text-area/text-area.css +6 -0
- package/2x/cjs/global/global.css +1 -0
- package/2x/cjs/utils/use-props-value.d.ts +1 -1
- package/2x/cjs/utils/use-props-value.js +3 -1
- package/2x/cjs/utils/use-tab-list-scroll.js +1 -1
- package/2x/es/components/button/button.css +1 -0
- package/2x/es/components/calendar/calendar.js +2 -2
- package/2x/es/components/cascader/cascader.js +1 -1
- package/2x/es/components/cascader-view/cascader-view.js +6 -3
- package/2x/es/components/date-picker/date-picker.d.ts +2 -2
- package/2x/es/components/date-picker/date-picker.js +3 -1
- package/2x/es/components/date-picker/index.d.ts +1 -1
- package/2x/es/components/date-picker-view/date-picker-view.d.ts +1 -1
- package/2x/es/components/date-picker-view/date-picker-view.js +2 -0
- package/2x/es/components/dialog/dialog.css +1 -0
- package/2x/es/components/dropdown/dropdown.css +2 -2
- package/2x/es/components/empty/empty.css +1 -0
- package/2x/es/components/floating-bubble/floating-bubble.css +1 -0
- package/2x/es/components/floating-panel/floating-panel.css +7 -4
- package/2x/es/components/form/form-item.css +1 -0
- package/2x/es/components/form/index.css +1 -0
- package/2x/es/components/grid/grid.css +1 -0
- package/2x/es/components/image/image.d.ts +1 -0
- package/2x/es/components/image/image.js +2 -1
- package/2x/es/components/image/test/image.test.d.ts +1 -0
- package/2x/es/components/image/test/image.test.js +24 -0
- package/2x/es/components/image-viewer/image-viewer.css +3 -0
- package/2x/es/components/index-bar/index-bar.css +2 -0
- package/2x/es/components/input/input.css +6 -0
- package/2x/es/components/jumbo-tabs/jumbo-tabs.css +2 -0
- package/2x/es/components/modal/modal.css +1 -0
- package/2x/es/components/number-keyboard/number-keyboard.css +3 -2
- package/2x/es/components/passcode-input/passcode-input.css +1 -1
- package/2x/es/components/picker/index.d.ts +4 -0
- package/2x/es/components/picker/picker.css +6 -0
- package/2x/es/components/picker/picker.d.ts +4 -0
- package/2x/es/components/picker/picker.js +7 -3
- package/2x/es/components/picker-view/picker-view.css +17 -3
- package/2x/es/components/picker-view/picker-view.d.ts +2 -0
- package/2x/es/components/picker-view/picker-view.js +7 -3
- package/2x/es/components/picker-view/wheel.js +1 -1
- package/2x/es/components/popover/popover.css +2 -0
- package/2x/es/components/result/result.css +1 -1
- package/2x/es/components/side-bar/side-bar.css +1 -0
- package/2x/es/components/slider/slider.css +4 -0
- package/2x/es/components/swipe-action/swipe-action.css +1 -0
- package/2x/es/components/swiper/swiper.css +1 -0
- package/2x/es/components/tab-bar/tab-bar.css +1 -0
- package/2x/es/components/tabs/tabs.css +1 -0
- package/2x/es/components/text-area/text-area.css +6 -0
- package/2x/es/global/global.css +1 -0
- package/2x/es/utils/use-props-value.d.ts +1 -1
- package/2x/es/utils/use-props-value.js +3 -1
- package/2x/es/utils/use-tab-list-scroll.js +1 -1
- package/2x/package.json +1 -1
- package/2x/umd/antd-mobile.js +1 -1
- package/README.md +2 -0
- package/bundle/antd-mobile.cjs.js +3411 -3359
- package/bundle/antd-mobile.es.js +3412 -3360
- package/bundle/style.css +112 -54
- package/cjs/components/button/button.css +2 -1
- package/cjs/components/calendar/calendar.js +2 -2
- package/cjs/components/cascader/cascader.js +1 -1
- package/cjs/components/cascader-view/cascader-view.js +7 -3
- package/cjs/components/date-picker/date-picker.d.ts +2 -2
- package/cjs/components/date-picker/date-picker.js +3 -1
- package/cjs/components/date-picker/index.d.ts +1 -1
- package/cjs/components/date-picker-view/date-picker-view.d.ts +1 -1
- package/cjs/components/date-picker-view/date-picker-view.js +2 -0
- package/cjs/components/dialog/dialog.css +2 -1
- package/cjs/components/dropdown/dropdown.css +2 -2
- package/cjs/components/empty/empty.css +1 -0
- package/cjs/components/floating-bubble/floating-bubble.css +2 -1
- package/cjs/components/floating-panel/floating-panel.css +8 -5
- package/cjs/components/form/form-item.css +2 -1
- package/cjs/components/form/index.css +2 -1
- package/cjs/components/grid/grid.css +2 -1
- package/cjs/components/image/image.d.ts +1 -0
- package/cjs/components/image/image.js +2 -1
- package/cjs/components/image/test/image.test.d.ts +1 -0
- package/cjs/components/image/test/image.test.js +34 -0
- package/cjs/components/image-viewer/image-viewer.css +4 -1
- package/cjs/components/index-bar/index-bar.css +3 -1
- package/cjs/components/input/input.css +6 -1
- package/cjs/components/jumbo-tabs/jumbo-tabs.css +2 -0
- package/cjs/components/modal/modal.css +2 -1
- package/cjs/components/number-keyboard/number-keyboard.css +4 -3
- package/cjs/components/passcode-input/passcode-input.css +1 -1
- package/cjs/components/picker/index.d.ts +4 -0
- package/cjs/components/picker/picker.css +5 -0
- package/cjs/components/picker/picker.d.ts +4 -0
- package/cjs/components/picker/picker.js +7 -3
- package/cjs/components/picker-view/picker-view.css +17 -4
- package/cjs/components/picker-view/picker-view.d.ts +2 -0
- package/cjs/components/picker-view/picker-view.js +10 -3
- package/cjs/components/picker-view/wheel.js +1 -1
- package/cjs/components/popover/popover.css +3 -1
- package/cjs/components/result/result.css +1 -1
- package/cjs/components/side-bar/side-bar.css +2 -1
- package/cjs/components/slider/slider.css +7 -3
- package/cjs/components/swipe-action/swipe-action.css +1 -0
- package/cjs/components/swiper/swiper.css +1 -0
- package/cjs/components/tab-bar/tab-bar.css +1 -0
- package/cjs/components/tabs/tabs.css +1 -0
- package/cjs/components/text-area/text-area.css +6 -1
- package/cjs/global/global.css +2 -1
- package/cjs/utils/use-props-value.d.ts +1 -1
- package/cjs/utils/use-props-value.js +3 -1
- package/cjs/utils/use-tab-list-scroll.js +1 -1
- package/es/components/button/button.css +2 -1
- package/es/components/calendar/calendar.js +2 -2
- package/es/components/cascader/cascader.js +1 -1
- package/es/components/cascader-view/cascader-view.js +6 -3
- package/es/components/date-picker/date-picker.d.ts +2 -2
- package/es/components/date-picker/date-picker.js +3 -1
- package/es/components/date-picker/index.d.ts +1 -1
- package/es/components/date-picker-view/date-picker-view.d.ts +1 -1
- package/es/components/date-picker-view/date-picker-view.js +2 -0
- package/es/components/dialog/dialog.css +2 -1
- package/es/components/dropdown/dropdown.css +2 -2
- package/es/components/empty/empty.css +1 -0
- package/es/components/floating-bubble/floating-bubble.css +2 -1
- package/es/components/floating-panel/floating-panel.css +8 -5
- package/es/components/form/form-item.css +2 -1
- package/es/components/form/index.css +2 -1
- package/es/components/grid/grid.css +2 -1
- package/es/components/image/image.d.ts +1 -0
- package/es/components/image/image.js +2 -1
- package/es/components/image/test/image.test.d.ts +1 -0
- package/es/components/image/test/image.test.js +24 -0
- package/es/components/image-viewer/image-viewer.css +4 -1
- package/es/components/index-bar/index-bar.css +3 -1
- package/es/components/input/input.css +6 -1
- package/es/components/jumbo-tabs/jumbo-tabs.css +2 -0
- package/es/components/modal/modal.css +2 -1
- package/es/components/number-keyboard/number-keyboard.css +4 -3
- package/es/components/passcode-input/passcode-input.css +1 -1
- package/es/components/picker/index.d.ts +4 -0
- package/es/components/picker/picker.css +5 -0
- package/es/components/picker/picker.d.ts +4 -0
- package/es/components/picker/picker.js +7 -3
- package/es/components/picker-view/picker-view.css +17 -4
- package/es/components/picker-view/picker-view.d.ts +2 -0
- package/es/components/picker-view/picker-view.js +7 -3
- package/es/components/picker-view/wheel.js +1 -1
- package/es/components/popover/popover.css +3 -1
- package/es/components/result/result.css +1 -1
- package/es/components/side-bar/side-bar.css +2 -1
- package/es/components/slider/slider.css +7 -3
- package/es/components/swipe-action/swipe-action.css +1 -0
- package/es/components/swiper/swiper.css +1 -0
- package/es/components/tab-bar/tab-bar.css +1 -0
- package/es/components/tabs/tabs.css +1 -0
- package/es/components/text-area/text-area.css +6 -1
- package/es/global/global.css +2 -1
- package/es/utils/use-props-value.d.ts +1 -1
- package/es/utils/use-props-value.js +3 -1
- package/es/utils/use-tab-list-scroll.js +1 -1
- package/package.json +1 -1
- package/umd/antd-mobile.js +1 -1
|
@@ -13,5 +13,6 @@ export declare type ImageProps = {
|
|
|
13
13
|
onClick?: (event: React.MouseEvent<HTMLImageElement, Event>) => void;
|
|
14
14
|
onError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
|
|
15
15
|
onLoad?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
|
|
16
|
+
onContainerClick?: (event: React.MouseEvent<HTMLDivElement, Event>) => void;
|
|
16
17
|
} & NativeProps<'--width' | '--height'> & Pick<React.ImgHTMLAttributes<HTMLImageElement>, 'crossOrigin' | 'decoding' | 'loading' | 'referrerPolicy' | 'sizes' | 'srcSet' | 'useMap'>;
|
|
17
18
|
export declare const Image: React.FC<ImageProps>;
|
|
@@ -108,7 +108,8 @@ const Image = (0, _stagedComponents.staged)(p => {
|
|
|
108
108
|
return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
|
|
109
109
|
ref: ref,
|
|
110
110
|
className: classPrefix,
|
|
111
|
-
style: style
|
|
111
|
+
style: style,
|
|
112
|
+
onClick: props.onContainerClick
|
|
112
113
|
}, props.lazy && !initialized && _react.default.createElement(_lazyDetector.LazyDetector, {
|
|
113
114
|
onActive: () => {
|
|
114
115
|
setInitialized(true);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _tslib = require("tslib");
|
|
4
|
+
|
|
5
|
+
var _react = _interopRequireDefault(require("react"));
|
|
6
|
+
|
|
7
|
+
var _testing = require("testing");
|
|
8
|
+
|
|
9
|
+
var _index = _interopRequireDefault(require("../index"));
|
|
10
|
+
|
|
11
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
|
+
|
|
13
|
+
const demoSrc = 'https://images.unsplash.com/photo-1567945716310-4745a6b7844b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60';
|
|
14
|
+
describe('image', () => {
|
|
15
|
+
test('a11y', () => (0, _tslib.__awaiter)(void 0, void 0, void 0, function* () {
|
|
16
|
+
yield (0, _testing.testA11y)(_react.default.createElement(_index.default, {
|
|
17
|
+
src: demoSrc
|
|
18
|
+
}));
|
|
19
|
+
}));
|
|
20
|
+
test('onContainerClick can work', () => {
|
|
21
|
+
const onContainerClick = jest.fn();
|
|
22
|
+
const {
|
|
23
|
+
getByTestId
|
|
24
|
+
} = (0, _testing.render)(_react.default.createElement(_index.default, {
|
|
25
|
+
src: demoSrc,
|
|
26
|
+
onContainerClick: onContainerClick,
|
|
27
|
+
"data-testid": 'img'
|
|
28
|
+
}));
|
|
29
|
+
|
|
30
|
+
_testing.fireEvent.click(getByTestId('img'));
|
|
31
|
+
|
|
32
|
+
expect(onContainerClick).toBeCalledTimes(1);
|
|
33
|
+
});
|
|
34
|
+
});
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
width: 100vw;
|
|
3
3
|
height: 100vh;
|
|
4
4
|
touch-action: none;
|
|
5
|
+
-webkit-user-select: none;
|
|
5
6
|
user-select: none;
|
|
6
7
|
}
|
|
7
8
|
|
|
@@ -16,6 +17,7 @@
|
|
|
16
17
|
height: 100%;
|
|
17
18
|
position: relative;
|
|
18
19
|
z-index: 1;
|
|
20
|
+
cursor: -webkit-grab;
|
|
19
21
|
cursor: grab;
|
|
20
22
|
touch-action: none;
|
|
21
23
|
}
|
|
@@ -43,6 +45,7 @@
|
|
|
43
45
|
top: 0;
|
|
44
46
|
width: 100%;
|
|
45
47
|
height: 100%;
|
|
48
|
+
cursor: -webkit-grab;
|
|
46
49
|
cursor: grab;
|
|
47
50
|
touch-action: none;
|
|
48
51
|
}
|
|
@@ -37,6 +37,7 @@
|
|
|
37
37
|
overflow: visible;
|
|
38
38
|
color: var(--adm-color-weak);
|
|
39
39
|
font-size: var(--adm-font-size-4);
|
|
40
|
+
-webkit-user-select: none;
|
|
40
41
|
user-select: none;
|
|
41
42
|
touch-action: none;
|
|
42
43
|
}
|
|
@@ -88,6 +89,7 @@
|
|
|
88
89
|
}
|
|
89
90
|
|
|
90
91
|
.adm-index-bar-sticky .adm-index-bar-anchor-title {
|
|
92
|
+
position: -webkit-sticky;
|
|
91
93
|
position: sticky;
|
|
92
94
|
z-index: 900;
|
|
93
95
|
top: var(--sticky-offset-top);
|
|
@@ -34,11 +34,17 @@
|
|
|
34
34
|
background: transparent;
|
|
35
35
|
border: 0;
|
|
36
36
|
outline: none;
|
|
37
|
+
-webkit-appearance: none;
|
|
37
38
|
appearance: none;
|
|
38
39
|
min-height: 1.5em;
|
|
39
40
|
text-align: var(--text-align);
|
|
40
41
|
}
|
|
41
42
|
|
|
43
|
+
.adm-input-element::-webkit-input-placeholder {
|
|
44
|
+
color: var(--placeholder-color);
|
|
45
|
+
font-family: inherit;
|
|
46
|
+
}
|
|
47
|
+
|
|
42
48
|
.adm-input-element::placeholder {
|
|
43
49
|
color: var(--placeholder-color);
|
|
44
50
|
font-family: inherit;
|
|
@@ -35,6 +35,7 @@
|
|
|
35
35
|
flex-direction: column;
|
|
36
36
|
align-items: center;
|
|
37
37
|
position: relative;
|
|
38
|
+
width: -webkit-min-content;
|
|
38
39
|
width: min-content;
|
|
39
40
|
margin: 0 auto;
|
|
40
41
|
padding: 24px 0;
|
|
@@ -49,6 +50,7 @@
|
|
|
49
50
|
}
|
|
50
51
|
|
|
51
52
|
.adm-jumbo-tabs-tab-description {
|
|
53
|
+
width: -webkit-min-content;
|
|
52
54
|
width: min-content;
|
|
53
55
|
padding: 0 16px;
|
|
54
56
|
border-radius: 20px;
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
|
|
11
11
|
.adm-number-keyboard-popup.adm-popup {
|
|
12
12
|
width: 100%;
|
|
13
|
+
-webkit-user-select: none;
|
|
13
14
|
user-select: none;
|
|
14
15
|
z-index: 1050;
|
|
15
16
|
}
|
|
@@ -31,7 +32,7 @@
|
|
|
31
32
|
align-items: center;
|
|
32
33
|
padding: 0 24px;
|
|
33
34
|
color: var(--adm-color-weak);
|
|
34
|
-
background-color: var(--adm-color-
|
|
35
|
+
background-color: var(--adm-color-background);
|
|
35
36
|
}
|
|
36
37
|
|
|
37
38
|
.adm-number-keyboard-header-close-button {
|
|
@@ -111,7 +112,7 @@
|
|
|
111
112
|
|
|
112
113
|
.adm-number-keyboard-key.extra-key,
|
|
113
114
|
.adm-number-keyboard-key.number-key {
|
|
114
|
-
background-color: var(--adm-color-
|
|
115
|
+
background-color: var(--adm-color-background);
|
|
115
116
|
}
|
|
116
117
|
|
|
117
118
|
.adm-number-keyboard-key.extra-key:active::before,
|
|
@@ -6,6 +6,8 @@ declare const _default: import("react").NamedExoticComponent<{
|
|
|
6
6
|
columns: import("../picker-view").PickerColumn[] | ((value: import("../picker-view").PickerValue[]) => import("../picker-view").PickerColumn[]);
|
|
7
7
|
value?: import("../picker-view").PickerValue[] | undefined;
|
|
8
8
|
defaultValue?: import("../picker-view").PickerValue[] | undefined;
|
|
9
|
+
loading?: boolean | undefined;
|
|
10
|
+
loadingContent?: import("react").ReactNode;
|
|
9
11
|
onSelect?: ((value: import("../picker-view").PickerValue[], extend: import("../picker-view").PickerValueExtend) => void) | undefined;
|
|
10
12
|
onConfirm?: ((value: import("../picker-view").PickerValue[], extend: import("../picker-view").PickerValueExtend) => void) | undefined;
|
|
11
13
|
onCancel?: (() => void) | undefined;
|
|
@@ -29,6 +31,8 @@ declare const _default: import("react").NamedExoticComponent<{
|
|
|
29
31
|
columns: import("../picker-view").PickerColumn[] | ((value: import("../picker-view").PickerValue[]) => import("../picker-view").PickerColumn[]);
|
|
30
32
|
value?: import("../picker-view").PickerValue[] | undefined;
|
|
31
33
|
defaultValue?: import("../picker-view").PickerValue[] | undefined;
|
|
34
|
+
loading?: boolean | undefined;
|
|
35
|
+
loadingContent?: import("react").ReactNode;
|
|
32
36
|
onSelect?: ((value: import("../picker-view").PickerValue[], extend: import("../picker-view").PickerValueExtend) => void) | undefined;
|
|
33
37
|
onConfirm?: ((value: import("../picker-view").PickerValue[], extend: import("../picker-view").PickerValueExtend) => void) | undefined;
|
|
34
38
|
onCancel?: (() => void) | undefined;
|
|
@@ -33,6 +33,12 @@
|
|
|
33
33
|
padding: 16px 16px;
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
+
.adm-picker-header-button-disabled,
|
|
37
|
+
.adm-picker-header-button-disabled:active {
|
|
38
|
+
opacity: 0.4;
|
|
39
|
+
cursor: not-allowed;
|
|
40
|
+
}
|
|
41
|
+
|
|
36
42
|
.adm-picker-header-title {
|
|
37
43
|
padding: 8px 8px;
|
|
38
44
|
font-size: var(--title-font-size);
|
|
@@ -12,6 +12,8 @@ export declare type PickerProps = {
|
|
|
12
12
|
columns: PickerColumn[] | ((value: PickerValue[]) => PickerColumn[]);
|
|
13
13
|
value?: PickerValue[];
|
|
14
14
|
defaultValue?: PickerValue[];
|
|
15
|
+
loading?: boolean;
|
|
16
|
+
loadingContent?: ReactNode;
|
|
15
17
|
onSelect?: (value: PickerValue[], extend: PickerValueExtend) => void;
|
|
16
18
|
onConfirm?: (value: PickerValue[], extend: PickerValueExtend) => void;
|
|
17
19
|
onCancel?: () => void;
|
|
@@ -31,6 +33,8 @@ export declare const Picker: React.MemoExoticComponent<React.ForwardRefExoticCom
|
|
|
31
33
|
columns: PickerColumn[] | ((value: PickerValue[]) => PickerColumn[]);
|
|
32
34
|
value?: PickerValue[] | undefined;
|
|
33
35
|
defaultValue?: PickerValue[] | undefined;
|
|
36
|
+
loading?: boolean | undefined;
|
|
37
|
+
loadingContent?: ReactNode;
|
|
34
38
|
onSelect?: ((value: PickerValue[], extend: PickerValueExtend) => void) | undefined;
|
|
35
39
|
onConfirm?: ((value: PickerValue[], extend: PickerValueExtend) => void) | undefined;
|
|
36
40
|
onCancel?: (() => void) | undefined;
|
|
@@ -122,14 +122,18 @@ const Picker = (0, _react.memo)((0, _react.forwardRef)((p, ref) => {
|
|
|
122
122
|
className: `${classPrefix}-header-title`
|
|
123
123
|
}, props.title), _react.default.createElement("a", {
|
|
124
124
|
role: 'button',
|
|
125
|
-
className: `${classPrefix}-header-button`,
|
|
125
|
+
className: (0, _classnames.default)(`${classPrefix}-header-button`, props.loading && `${classPrefix}-header-button-disabled`),
|
|
126
126
|
onClick: () => {
|
|
127
|
-
|
|
127
|
+
if (props.loading) return;
|
|
128
|
+
setValue(innerValue, true);
|
|
128
129
|
setVisible(false);
|
|
129
|
-
}
|
|
130
|
+
},
|
|
131
|
+
"aria-disabled": props.loading
|
|
130
132
|
}, props.confirmText)), _react.default.createElement("div", {
|
|
131
133
|
className: `${classPrefix}-body`
|
|
132
134
|
}, _react.default.createElement(_pickerView.default, {
|
|
135
|
+
loading: props.loading,
|
|
136
|
+
loadingContent: props.loadingContent,
|
|
133
137
|
columns: props.columns,
|
|
134
138
|
renderLabel: props.renderLabel,
|
|
135
139
|
value: innerValue,
|
|
@@ -7,12 +7,13 @@
|
|
|
7
7
|
display: flex;
|
|
8
8
|
position: relative;
|
|
9
9
|
overflow: hidden;
|
|
10
|
-
background: var(--adm-color-
|
|
10
|
+
background: var(--adm-color-background);
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
.adm-picker-view-column {
|
|
14
14
|
height: 100%;
|
|
15
15
|
flex: 1;
|
|
16
|
+
-webkit-user-select: none;
|
|
16
17
|
user-select: none;
|
|
17
18
|
touch-action: none;
|
|
18
19
|
position: relative;
|
|
@@ -21,6 +22,7 @@
|
|
|
21
22
|
|
|
22
23
|
.adm-picker-view-column-wheel {
|
|
23
24
|
width: 100%;
|
|
25
|
+
cursor: -webkit-grab;
|
|
24
26
|
cursor: grab;
|
|
25
27
|
position: absolute;
|
|
26
28
|
top: calc(50% - var(--item-height) / 2);
|
|
@@ -114,9 +116,21 @@
|
|
|
114
116
|
}
|
|
115
117
|
|
|
116
118
|
.adm-picker-view-mask-top {
|
|
117
|
-
background:
|
|
119
|
+
background: var(--adm-color-background);
|
|
120
|
+
-webkit-mask: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 50%, #000000 100%);
|
|
121
|
+
mask: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 50%, #000000 100%);
|
|
118
122
|
}
|
|
119
123
|
|
|
120
124
|
.adm-picker-view-mask-bottom {
|
|
121
|
-
background:
|
|
125
|
+
background: var(--adm-color-background);
|
|
126
|
+
-webkit-mask: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 50%, #000000 100%);
|
|
127
|
+
mask: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 50%, #000000 100%);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.adm-picker-view-loading-content {
|
|
131
|
+
width: 100%;
|
|
132
|
+
height: 100%;
|
|
133
|
+
display: flex;
|
|
134
|
+
justify-content: center;
|
|
135
|
+
align-items: center;
|
|
122
136
|
}
|
|
@@ -17,6 +17,8 @@ export declare type PickerViewProps = {
|
|
|
17
17
|
value?: PickerValue[];
|
|
18
18
|
defaultValue?: PickerValue[];
|
|
19
19
|
mouseWheel?: boolean;
|
|
20
|
+
loading?: boolean;
|
|
21
|
+
loadingContent?: ReactNode;
|
|
20
22
|
onChange?: (value: PickerValue[], extend: PickerValueExtend) => void;
|
|
21
23
|
} & Pick<PickerProps, 'renderLabel'> & NativeProps<'--height' | '--item-height' | '--item-font-size'>;
|
|
22
24
|
export declare const PickerView: React.NamedExoticComponent<PickerViewProps>;
|
|
@@ -19,6 +19,10 @@ var _ahooks = require("ahooks");
|
|
|
19
19
|
|
|
20
20
|
var _pickerUtils = require("../picker/picker-utils");
|
|
21
21
|
|
|
22
|
+
var _spinLoading = _interopRequireDefault(require("../spin-loading"));
|
|
23
|
+
|
|
24
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
25
|
+
|
|
22
26
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
23
27
|
|
|
24
28
|
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; }
|
|
@@ -27,7 +31,10 @@ const classPrefix = `adm-picker-view`;
|
|
|
27
31
|
const defaultProps = {
|
|
28
32
|
defaultValue: [],
|
|
29
33
|
renderLabel: _pickerUtils.defaultRenderLabel,
|
|
30
|
-
mouseWheel: false
|
|
34
|
+
mouseWheel: false,
|
|
35
|
+
loadingContent: _react.default.createElement("div", {
|
|
36
|
+
className: `${classPrefix}-loading-content`
|
|
37
|
+
}, _react.default.createElement(_spinLoading.default, null))
|
|
31
38
|
};
|
|
32
39
|
const PickerView = (0, _react.memo)(p => {
|
|
33
40
|
const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
|
|
@@ -71,7 +78,7 @@ const PickerView = (0, _react.memo)(p => {
|
|
|
71
78
|
}, []);
|
|
72
79
|
return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
|
|
73
80
|
className: `${classPrefix}`
|
|
74
|
-
}, columns.map((column, index) => _react.default.createElement(_wheel.Wheel, {
|
|
81
|
+
}, props.loading ? props.loadingContent : _react.default.createElement(_react.default.Fragment, null, columns.map((column, index) => _react.default.createElement(_wheel.Wheel, {
|
|
75
82
|
key: index,
|
|
76
83
|
index: index,
|
|
77
84
|
column: column,
|
|
@@ -87,7 +94,7 @@ const PickerView = (0, _react.memo)(p => {
|
|
|
87
94
|
className: `${classPrefix}-mask-middle`
|
|
88
95
|
}), _react.default.createElement("div", {
|
|
89
96
|
className: `${classPrefix}-mask-bottom`
|
|
90
|
-
}))));
|
|
97
|
+
})))));
|
|
91
98
|
});
|
|
92
99
|
exports.PickerView = PickerView;
|
|
93
100
|
PickerView.displayName = 'PickerView';
|
|
@@ -62,7 +62,7 @@ const Wheel = (0, _react.memo)(props => {
|
|
|
62
62
|
});
|
|
63
63
|
(0, _ahooks.useIsomorphicLayoutEffect)(() => {
|
|
64
64
|
if (draggingRef.current) return;
|
|
65
|
-
if (
|
|
65
|
+
if (value === null) return;
|
|
66
66
|
const targetIndex = column.findIndex(item => item.value === value);
|
|
67
67
|
if (targetIndex < 0) return;
|
|
68
68
|
const finalPosition = targetIndex * -itemHeight.current;
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
white-space: normal;
|
|
12
12
|
text-align: left;
|
|
13
13
|
cursor: auto;
|
|
14
|
+
-webkit-user-select: text;
|
|
14
15
|
user-select: text;
|
|
15
16
|
animation: none;
|
|
16
17
|
}
|
|
@@ -41,6 +42,7 @@
|
|
|
41
42
|
border-radius: 16px;
|
|
42
43
|
box-shadow: 0 0 60px 0 rgba(51, 51, 51, 0.2);
|
|
43
44
|
font-size: var(--adm-font-size-7);
|
|
45
|
+
width: -webkit-max-content;
|
|
44
46
|
width: max-content;
|
|
45
47
|
min-width: 64px;
|
|
46
48
|
max-width: calc(100vw - 48px);
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
--fill-color: var(--adm-color-primary);
|
|
3
3
|
padding: 10px 28px;
|
|
4
4
|
list-style: none;
|
|
5
|
+
-webkit-user-select: none;
|
|
5
6
|
user-select: none;
|
|
6
7
|
}
|
|
7
8
|
|
|
@@ -66,10 +67,12 @@
|
|
|
66
67
|
width: 24px;
|
|
67
68
|
height: 24px;
|
|
68
69
|
margin: 16px;
|
|
70
|
+
-webkit-user-select: none;
|
|
69
71
|
user-select: none;
|
|
70
72
|
}
|
|
71
73
|
|
|
72
74
|
.adm-slider-thumb-container {
|
|
75
|
+
cursor: -webkit-grab;
|
|
73
76
|
cursor: grab;
|
|
74
77
|
touch-action: none;
|
|
75
78
|
position: absolute;
|
|
@@ -97,6 +100,7 @@
|
|
|
97
100
|
color: var(--adm-color-text);
|
|
98
101
|
text-align: center;
|
|
99
102
|
word-break: keep-all;
|
|
103
|
+
-webkit-user-select: none;
|
|
100
104
|
user-select: none;
|
|
101
105
|
transform: translateX(-50%);
|
|
102
106
|
}
|
|
@@ -27,11 +27,17 @@
|
|
|
27
27
|
background: transparent;
|
|
28
28
|
border: 0;
|
|
29
29
|
outline: none;
|
|
30
|
+
-webkit-appearance: none;
|
|
30
31
|
appearance: none;
|
|
31
32
|
min-height: 1.5em;
|
|
32
33
|
text-align: var(--text-align);
|
|
33
34
|
}
|
|
34
35
|
|
|
36
|
+
.adm-text-area-element::-webkit-input-placeholder {
|
|
37
|
+
color: var(--placeholder-color);
|
|
38
|
+
font-family: inherit;
|
|
39
|
+
}
|
|
40
|
+
|
|
35
41
|
.adm-text-area-element::placeholder {
|
|
36
42
|
color: var(--placeholder-color);
|
|
37
43
|
font-family: inherit;
|
package/2x/cjs/global/global.css
CHANGED
|
@@ -4,5 +4,5 @@ declare type Options<T> = {
|
|
|
4
4
|
defaultValue: T;
|
|
5
5
|
onChange?: (v: T) => void;
|
|
6
6
|
};
|
|
7
|
-
export declare function usePropsValue<T>(options: Options<T>): readonly [T, (v: SetStateAction<T
|
|
7
|
+
export declare function usePropsValue<T>(options: Options<T>): readonly [T, (v: SetStateAction<T>, forceTrigger?: boolean) => void];
|
|
8
8
|
export {};
|
|
@@ -22,8 +22,10 @@ function usePropsValue(options) {
|
|
|
22
22
|
stateRef.current = value;
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
const setState = (0, _ahooks.useMemoizedFn)(v => {
|
|
25
|
+
const setState = (0, _ahooks.useMemoizedFn)((v, forceTrigger = false) => {
|
|
26
|
+
// `forceTrigger` means trigger `onChange` even if `v` is the same as `stateRef.current`
|
|
26
27
|
const nextValue = typeof v === 'function' ? v(stateRef.current) : v;
|
|
28
|
+
if (!forceTrigger && nextValue === stateRef.current) return;
|
|
27
29
|
stateRef.current = nextValue;
|
|
28
30
|
update();
|
|
29
31
|
onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
|
|
@@ -196,8 +196,8 @@ export const Calendar = forwardRef((p, ref) => {
|
|
|
196
196
|
}, renderCells());
|
|
197
197
|
const mark = React.createElement("div", {
|
|
198
198
|
className: `${classPrefix}-mark`
|
|
199
|
-
}, markItems.map(item => React.createElement("div", {
|
|
200
|
-
key:
|
|
199
|
+
}, markItems.map((item, index) => React.createElement("div", {
|
|
200
|
+
key: index,
|
|
201
201
|
className: `${classPrefix}-mark-cell`
|
|
202
202
|
}, item)));
|
|
203
203
|
return withNativeProps(props, React.createElement("div", {
|
|
@@ -82,7 +82,7 @@ export const Cascader = forwardRef((p, ref) => {
|
|
|
82
82
|
}, props.title), React.createElement("a", {
|
|
83
83
|
className: `${classPrefix}-header-button`,
|
|
84
84
|
onClick: () => {
|
|
85
|
-
setValue(innerValue);
|
|
85
|
+
setValue(innerValue, true);
|
|
86
86
|
setVisible(false);
|
|
87
87
|
}
|
|
88
88
|
}, props.confirmText)), React.createElement("div", {
|
|
@@ -9,6 +9,7 @@ import { useCascaderValueExtend } from './use-cascader-value-extend';
|
|
|
9
9
|
import { useConfig } from '../config-provider';
|
|
10
10
|
import { optionSkeleton } from './option-skeleton';
|
|
11
11
|
import Skeleton from '../skeleton';
|
|
12
|
+
import { useUpdateEffect } from 'ahooks';
|
|
12
13
|
const classPrefix = `adm-cascader-view`;
|
|
13
14
|
const defaultProps = {
|
|
14
15
|
defaultValue: []
|
|
@@ -28,6 +29,11 @@ export const CascaderView = p => {
|
|
|
28
29
|
}
|
|
29
30
|
}));
|
|
30
31
|
const [tabActiveIndex, setTabActiveIndex] = useState(0);
|
|
32
|
+
useUpdateEffect(() => {
|
|
33
|
+
var _a;
|
|
34
|
+
|
|
35
|
+
(_a = props.onTabsChange) === null || _a === void 0 ? void 0 : _a.call(props, tabActiveIndex);
|
|
36
|
+
}, [tabActiveIndex]);
|
|
31
37
|
const generateValueExtend = useCascaderValueExtend(props.options);
|
|
32
38
|
const levels = useMemo(() => {
|
|
33
39
|
const ret = [];
|
|
@@ -84,11 +90,8 @@ export const CascaderView = p => {
|
|
|
84
90
|
}, React.createElement(Tabs, {
|
|
85
91
|
activeKey: tabActiveIndex.toString(),
|
|
86
92
|
onChange: key => {
|
|
87
|
-
var _a;
|
|
88
|
-
|
|
89
93
|
const activeIndex = parseInt(key);
|
|
90
94
|
setTabActiveIndex(activeIndex);
|
|
91
|
-
(_a = props.onTabsChange) === null || _a === void 0 ? void 0 : _a.call(props, activeIndex);
|
|
92
95
|
},
|
|
93
96
|
stretch: false,
|
|
94
97
|
className: `${classPrefix}-tabs`
|
|
@@ -3,7 +3,7 @@ import type { PickerProps, PickerRef, PickerActions } from '../picker';
|
|
|
3
3
|
import { NativeProps } from '../../utils/native-props';
|
|
4
4
|
import type { Precision, DatePickerFilter } from './date-picker-utils';
|
|
5
5
|
export declare type DatePickerRef = PickerRef;
|
|
6
|
-
export declare type DatePickerProps = Pick<PickerProps, 'onCancel' | 'onClose' | 'closeOnMaskClick' | 'visible' | 'confirmText' | 'cancelText' | 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'title' | 'stopPropagation' | 'style' | 'mouseWheel' | 'forceRender' | 'destroyOnClose'> & {
|
|
6
|
+
export declare type DatePickerProps = Pick<PickerProps, 'onCancel' | 'onClose' | 'closeOnMaskClick' | 'visible' | 'confirmText' | 'cancelText' | 'getContainer' | 'loading' | 'loadingContent' | 'afterShow' | 'afterClose' | 'onClick' | 'title' | 'stopPropagation' | 'style' | 'mouseWheel' | 'forceRender' | 'destroyOnClose'> & {
|
|
7
7
|
value?: Date | null;
|
|
8
8
|
defaultValue?: Date | null;
|
|
9
9
|
onSelect?: (value: Date) => void;
|
|
@@ -15,7 +15,7 @@ export declare type DatePickerProps = Pick<PickerProps, 'onCancel' | 'onClose' |
|
|
|
15
15
|
renderLabel?: (type: Precision, data: number) => ReactNode;
|
|
16
16
|
filter?: DatePickerFilter;
|
|
17
17
|
} & NativeProps;
|
|
18
|
-
export declare const DatePicker: React.ForwardRefExoticComponent<Pick<PickerProps, "style" | "title" | "onClick" | "visible" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation" | "onCancel" | "onClose" | "closeOnMaskClick" | "cancelText" | "mouseWheel" | "confirmText"> & {
|
|
18
|
+
export declare const DatePicker: React.ForwardRefExoticComponent<Pick<PickerProps, "style" | "title" | "onClick" | "visible" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation" | "onCancel" | "onClose" | "loading" | "closeOnMaskClick" | "cancelText" | "mouseWheel" | "loadingContent" | "confirmText"> & {
|
|
19
19
|
value?: Date | null | undefined;
|
|
20
20
|
defaultValue?: Date | null | undefined;
|
|
21
21
|
onSelect?: ((value: Date) => void) | undefined;
|
|
@@ -33,7 +33,7 @@ export const DatePicker = forwardRef((p, ref) => {
|
|
|
33
33
|
return convertDateToStringArray(date, props.precision);
|
|
34
34
|
}, [value, props.precision, props.min, props.max]);
|
|
35
35
|
const onConfirm = useCallback(val => {
|
|
36
|
-
setValue(convertStringArrayToDate(val, props.precision));
|
|
36
|
+
setValue(convertStringArrayToDate(val, props.precision), true);
|
|
37
37
|
}, [setValue, props.precision]);
|
|
38
38
|
const onSelect = useMemoizedFn(val => {
|
|
39
39
|
var _a;
|
|
@@ -55,6 +55,8 @@ export const DatePicker = forwardRef((p, ref) => {
|
|
|
55
55
|
onConfirm: onConfirm,
|
|
56
56
|
onSelect: onSelect,
|
|
57
57
|
getContainer: props.getContainer,
|
|
58
|
+
loading: props.loading,
|
|
59
|
+
loadingContent: props.loadingContent,
|
|
58
60
|
afterShow: props.afterShow,
|
|
59
61
|
afterClose: props.afterClose,
|
|
60
62
|
onClick: props.onClick,
|
|
@@ -3,7 +3,7 @@ import './date-picker.less';
|
|
|
3
3
|
import { prompt } from './prompt';
|
|
4
4
|
export type { DatePickerProps, DatePickerRef } from './date-picker';
|
|
5
5
|
export type { DatePickerFilter } from './date-picker-utils';
|
|
6
|
-
declare const _default: import("react").ForwardRefExoticComponent<Pick<import("../picker").PickerProps, "style" | "title" | "onClick" | "visible" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation" | "onCancel" | "onClose" | "closeOnMaskClick" | "cancelText" | "mouseWheel" | "confirmText"> & {
|
|
6
|
+
declare const _default: import("react").ForwardRefExoticComponent<Pick<import("../picker").PickerProps, "style" | "title" | "onClick" | "visible" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation" | "onCancel" | "onClose" | "loading" | "closeOnMaskClick" | "cancelText" | "mouseWheel" | "loadingContent" | "confirmText"> & {
|
|
7
7
|
value?: Date | null | undefined;
|
|
8
8
|
defaultValue?: Date | null | undefined;
|
|
9
9
|
onSelect?: ((value: Date) => void) | undefined;
|