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
|
@@ -2,9 +2,6 @@
|
|
|
2
2
|
--border-radius: 8px;
|
|
3
3
|
--header-height: 28px;
|
|
4
4
|
--z-index: var(--adm-floating-panel-z-index, 900);
|
|
5
|
-
border-top-left-radius: var(--border-radius);
|
|
6
|
-
border-top-right-radius: var(--border-radius);
|
|
7
|
-
background: var(--adm-color-white);
|
|
8
5
|
position: fixed;
|
|
9
6
|
z-index: var(--z-index);
|
|
10
7
|
bottom: 0;
|
|
@@ -30,7 +27,7 @@
|
|
|
30
27
|
bottom: -100vh;
|
|
31
28
|
height: 100vh;
|
|
32
29
|
width: 100vw;
|
|
33
|
-
background: var(--adm-color-
|
|
30
|
+
background: var(--adm-color-background);
|
|
34
31
|
}
|
|
35
32
|
.adm-floating-panel .adm-floating-panel-header {
|
|
36
33
|
flex: none;
|
|
@@ -38,8 +35,13 @@
|
|
|
38
35
|
display: flex;
|
|
39
36
|
justify-content: center;
|
|
40
37
|
align-items: center;
|
|
38
|
+
cursor: -webkit-grab;
|
|
41
39
|
cursor: grab;
|
|
42
|
-
user-select: none;
|
|
40
|
+
-webkit-user-select: none;
|
|
41
|
+
user-select: none;
|
|
42
|
+
background-color: var(--adm-color-background);
|
|
43
|
+
border-top-left-radius: var(--border-radius);
|
|
44
|
+
border-top-right-radius: var(--border-radius);
|
|
43
45
|
}
|
|
44
46
|
.adm-floating-panel .adm-floating-panel-header .adm-floating-panel-bar {
|
|
45
47
|
height: 3px;
|
|
@@ -50,4 +52,5 @@
|
|
|
50
52
|
.adm-floating-panel .adm-floating-panel-content {
|
|
51
53
|
flex: 1;
|
|
52
54
|
overflow-y: scroll;
|
|
55
|
+
background: var(--adm-color-background);
|
|
53
56
|
}
|
|
@@ -4,7 +4,8 @@
|
|
|
4
4
|
--gap-vertical: var(--gap);
|
|
5
5
|
display: grid;
|
|
6
6
|
grid-gap: 10px;
|
|
7
|
-
column-gap: var(--gap-horizontal);
|
|
7
|
+
-webkit-column-gap: var(--gap-horizontal);
|
|
8
|
+
column-gap: var(--gap-horizontal);
|
|
8
9
|
row-gap: var(--gap-vertical);
|
|
9
10
|
grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
|
|
10
11
|
align-items: stretch;
|
|
@@ -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,7 +2,8 @@
|
|
|
2
2
|
width: 100vw;
|
|
3
3
|
height: 100vh;
|
|
4
4
|
touch-action: none;
|
|
5
|
-
user-select: none;
|
|
5
|
+
-webkit-user-select: none;
|
|
6
|
+
user-select: none;
|
|
6
7
|
}
|
|
7
8
|
.adm-image-viewer-footer {
|
|
8
9
|
position: absolute;
|
|
@@ -14,6 +15,7 @@
|
|
|
14
15
|
height: 100%;
|
|
15
16
|
position: relative;
|
|
16
17
|
z-index: 1;
|
|
18
|
+
cursor: -webkit-grab;
|
|
17
19
|
cursor: grab;
|
|
18
20
|
touch-action: none;
|
|
19
21
|
}
|
|
@@ -37,6 +39,7 @@
|
|
|
37
39
|
top: 0;
|
|
38
40
|
width: 100%;
|
|
39
41
|
height: 100%;
|
|
42
|
+
cursor: -webkit-grab;
|
|
40
43
|
cursor: grab;
|
|
41
44
|
touch-action: none;
|
|
42
45
|
}
|
|
@@ -33,7 +33,8 @@
|
|
|
33
33
|
overflow: visible;
|
|
34
34
|
color: var(--adm-color-weak);
|
|
35
35
|
font-size: var(--adm-font-size-4);
|
|
36
|
-
user-select: none;
|
|
36
|
+
-webkit-user-select: none;
|
|
37
|
+
user-select: none;
|
|
37
38
|
touch-action: none;
|
|
38
39
|
}
|
|
39
40
|
.adm-index-bar-sidebar-bubble {
|
|
@@ -77,6 +78,7 @@
|
|
|
77
78
|
width: 100%;
|
|
78
79
|
}
|
|
79
80
|
.adm-index-bar-sticky .adm-index-bar-anchor-title {
|
|
81
|
+
position: -webkit-sticky;
|
|
80
82
|
position: sticky;
|
|
81
83
|
z-index: 900;
|
|
82
84
|
top: var(--sticky-offset-top);
|
|
@@ -32,10 +32,15 @@
|
|
|
32
32
|
background: transparent;
|
|
33
33
|
border: 0;
|
|
34
34
|
outline: none;
|
|
35
|
-
appearance: none;
|
|
35
|
+
-webkit-appearance: none;
|
|
36
|
+
appearance: none;
|
|
36
37
|
min-height: 1.5em;
|
|
37
38
|
text-align: var(--text-align);
|
|
38
39
|
}
|
|
40
|
+
.adm-input-element::-webkit-input-placeholder {
|
|
41
|
+
color: var(--placeholder-color);
|
|
42
|
+
font-family: inherit;
|
|
43
|
+
}
|
|
39
44
|
.adm-input-element::placeholder {
|
|
40
45
|
color: var(--placeholder-color);
|
|
41
46
|
font-family: inherit;
|
|
@@ -30,6 +30,7 @@
|
|
|
30
30
|
flex-direction: column;
|
|
31
31
|
align-items: center;
|
|
32
32
|
position: relative;
|
|
33
|
+
width: -webkit-min-content;
|
|
33
34
|
width: min-content;
|
|
34
35
|
margin: 0 auto;
|
|
35
36
|
padding: 12px 0;
|
|
@@ -42,6 +43,7 @@
|
|
|
42
43
|
padding: 0 4px;
|
|
43
44
|
}
|
|
44
45
|
.adm-jumbo-tabs-tab-description {
|
|
46
|
+
width: -webkit-min-content;
|
|
45
47
|
width: min-content;
|
|
46
48
|
padding: 0 8px;
|
|
47
49
|
border-radius: 10px;
|
|
@@ -8,7 +8,8 @@
|
|
|
8
8
|
}
|
|
9
9
|
.adm-number-keyboard-popup.adm-popup {
|
|
10
10
|
width: 100%;
|
|
11
|
-
user-select: none;
|
|
11
|
+
-webkit-user-select: none;
|
|
12
|
+
user-select: none;
|
|
12
13
|
z-index: 1050;
|
|
13
14
|
}
|
|
14
15
|
.adm-number-keyboard-popup.adm-popup .adm-popup-body {
|
|
@@ -26,7 +27,7 @@
|
|
|
26
27
|
align-items: center;
|
|
27
28
|
padding: 0 12px;
|
|
28
29
|
color: var(--adm-color-weak);
|
|
29
|
-
background-color: var(--adm-color-
|
|
30
|
+
background-color: var(--adm-color-background);
|
|
30
31
|
}
|
|
31
32
|
.adm-number-keyboard-header-close-button {
|
|
32
33
|
padding: 0 12px;
|
|
@@ -93,7 +94,7 @@
|
|
|
93
94
|
}
|
|
94
95
|
.adm-number-keyboard-key.extra-key,
|
|
95
96
|
.adm-number-keyboard-key.number-key {
|
|
96
|
-
background-color: var(--adm-color-
|
|
97
|
+
background-color: var(--adm-color-background);
|
|
97
98
|
}
|
|
98
99
|
.adm-number-keyboard-key.extra-key:active::before,
|
|
99
100
|
.adm-number-keyboard-key.number-key:active::before {
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
font-size: var(--adm-font-size-10);
|
|
21
21
|
width: var(--cell-size);
|
|
22
22
|
height: var(--cell-size);
|
|
23
|
-
background: var(--adm-color-
|
|
23
|
+
background: var(--adm-color-background);
|
|
24
24
|
}
|
|
25
25
|
.adm-passcode-input:not(.seperated) {
|
|
26
26
|
border-radius: var(--border-radius);
|
|
@@ -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;
|
|
@@ -29,6 +29,11 @@
|
|
|
29
29
|
display: inline-block;
|
|
30
30
|
padding: 8px 8px;
|
|
31
31
|
}
|
|
32
|
+
.adm-picker-header-button-disabled,
|
|
33
|
+
.adm-picker-header-button-disabled:active {
|
|
34
|
+
opacity: 0.4;
|
|
35
|
+
cursor: not-allowed;
|
|
36
|
+
}
|
|
32
37
|
.adm-picker-header-title {
|
|
33
38
|
padding: 4px 4px;
|
|
34
39
|
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,18 +7,20 @@
|
|
|
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
|
.adm-picker-view-column {
|
|
13
13
|
height: 100%;
|
|
14
14
|
flex: 1;
|
|
15
|
-
user-select: none;
|
|
15
|
+
-webkit-user-select: none;
|
|
16
|
+
user-select: none;
|
|
16
17
|
touch-action: none;
|
|
17
18
|
position: relative;
|
|
18
19
|
z-index: 0;
|
|
19
20
|
}
|
|
20
21
|
.adm-picker-view-column-wheel {
|
|
21
22
|
width: 100%;
|
|
23
|
+
cursor: -webkit-grab;
|
|
22
24
|
cursor: grab;
|
|
23
25
|
position: absolute;
|
|
24
26
|
top: calc(50% - var(--item-height) / 2);
|
|
@@ -100,8 +102,19 @@
|
|
|
100
102
|
border-bottom: solid 1px var(--adm-color-border);
|
|
101
103
|
}
|
|
102
104
|
.adm-picker-view-mask-top {
|
|
103
|
-
background:
|
|
105
|
+
background: var(--adm-color-background);
|
|
106
|
+
-webkit-mask: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 50%, #000000 100%);
|
|
107
|
+
mask: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 50%, #000000 100%);
|
|
104
108
|
}
|
|
105
109
|
.adm-picker-view-mask-bottom {
|
|
106
|
-
background:
|
|
110
|
+
background: var(--adm-color-background);
|
|
111
|
+
-webkit-mask: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 50%, #000000 100%);
|
|
112
|
+
mask: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 50%, #000000 100%);
|
|
113
|
+
}
|
|
114
|
+
.adm-picker-view-loading-content {
|
|
115
|
+
width: 100%;
|
|
116
|
+
height: 100%;
|
|
117
|
+
display: flex;
|
|
118
|
+
justify-content: center;
|
|
119
|
+
align-items: center;
|
|
107
120
|
}
|
|
@@ -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,7 +11,8 @@
|
|
|
11
11
|
white-space: normal;
|
|
12
12
|
text-align: left;
|
|
13
13
|
cursor: auto;
|
|
14
|
-
user-select: text;
|
|
14
|
+
-webkit-user-select: text;
|
|
15
|
+
user-select: text;
|
|
15
16
|
animation: none;
|
|
16
17
|
}
|
|
17
18
|
.adm-popover.adm-popover-dark {
|
|
@@ -36,6 +37,7 @@
|
|
|
36
37
|
border-radius: 8px;
|
|
37
38
|
box-shadow: 0 0 30px 0 rgba(51, 51, 51, 0.2);
|
|
38
39
|
font-size: var(--adm-font-size-7);
|
|
40
|
+
width: -webkit-max-content;
|
|
39
41
|
width: max-content;
|
|
40
42
|
min-width: 32px;
|
|
41
43
|
max-width: calc(100vw - 24px);
|
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
--fill-color: var(--adm-color-primary);
|
|
3
3
|
padding: 5px 14px;
|
|
4
4
|
list-style: none;
|
|
5
|
-
user-select: none;
|
|
5
|
+
-webkit-user-select: none;
|
|
6
|
+
user-select: none;
|
|
6
7
|
}
|
|
7
8
|
.adm-slider-track-container {
|
|
8
9
|
padding: 8px 0;
|
|
@@ -57,9 +58,11 @@
|
|
|
57
58
|
width: 12px;
|
|
58
59
|
height: 12px;
|
|
59
60
|
margin: 8px;
|
|
60
|
-
user-select: none;
|
|
61
|
+
-webkit-user-select: none;
|
|
62
|
+
user-select: none;
|
|
61
63
|
}
|
|
62
64
|
.adm-slider-thumb-container {
|
|
65
|
+
cursor: -webkit-grab;
|
|
63
66
|
cursor: grab;
|
|
64
67
|
touch-action: none;
|
|
65
68
|
position: absolute;
|
|
@@ -85,7 +88,8 @@
|
|
|
85
88
|
color: var(--adm-color-text);
|
|
86
89
|
text-align: center;
|
|
87
90
|
word-break: keep-all;
|
|
88
|
-
user-select: none;
|
|
91
|
+
-webkit-user-select: none;
|
|
92
|
+
user-select: none;
|
|
89
93
|
transform: translateX(-50%);
|
|
90
94
|
}
|
|
91
95
|
.adm-slider-disabled {
|
|
@@ -26,10 +26,15 @@
|
|
|
26
26
|
background: transparent;
|
|
27
27
|
border: 0;
|
|
28
28
|
outline: none;
|
|
29
|
-
appearance: none;
|
|
29
|
+
-webkit-appearance: none;
|
|
30
|
+
appearance: none;
|
|
30
31
|
min-height: 1.5em;
|
|
31
32
|
text-align: var(--text-align);
|
|
32
33
|
}
|
|
34
|
+
.adm-text-area-element::-webkit-input-placeholder {
|
|
35
|
+
color: var(--placeholder-color);
|
|
36
|
+
font-family: inherit;
|
|
37
|
+
}
|
|
33
38
|
.adm-text-area-element::placeholder {
|
|
34
39
|
color: var(--placeholder-color);
|
|
35
40
|
font-family: inherit;
|
package/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", {
|