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.
Files changed (208) hide show
  1. package/2x/README.md +2 -0
  2. package/2x/bundle/antd-mobile.cjs.js +3411 -3359
  3. package/2x/bundle/antd-mobile.es.js +3412 -3360
  4. package/2x/bundle/style.css +102 -40
  5. package/2x/cjs/components/button/button.css +1 -0
  6. package/2x/cjs/components/calendar/calendar.js +2 -2
  7. package/2x/cjs/components/cascader/cascader.js +1 -1
  8. package/2x/cjs/components/cascader-view/cascader-view.js +7 -3
  9. package/2x/cjs/components/date-picker/date-picker.d.ts +2 -2
  10. package/2x/cjs/components/date-picker/date-picker.js +3 -1
  11. package/2x/cjs/components/date-picker/index.d.ts +1 -1
  12. package/2x/cjs/components/date-picker-view/date-picker-view.d.ts +1 -1
  13. package/2x/cjs/components/date-picker-view/date-picker-view.js +2 -0
  14. package/2x/cjs/components/dialog/dialog.css +1 -0
  15. package/2x/cjs/components/dropdown/dropdown.css +2 -2
  16. package/2x/cjs/components/empty/empty.css +1 -0
  17. package/2x/cjs/components/floating-bubble/floating-bubble.css +1 -0
  18. package/2x/cjs/components/floating-panel/floating-panel.css +7 -4
  19. package/2x/cjs/components/form/form-item.css +1 -0
  20. package/2x/cjs/components/form/index.css +1 -0
  21. package/2x/cjs/components/grid/grid.css +1 -0
  22. package/2x/cjs/components/image/image.d.ts +1 -0
  23. package/2x/cjs/components/image/image.js +2 -1
  24. package/2x/cjs/components/image/test/image.test.d.ts +1 -0
  25. package/2x/cjs/components/image/test/image.test.js +34 -0
  26. package/2x/cjs/components/image-viewer/image-viewer.css +3 -0
  27. package/2x/cjs/components/index-bar/index-bar.css +2 -0
  28. package/2x/cjs/components/input/input.css +6 -0
  29. package/2x/cjs/components/jumbo-tabs/jumbo-tabs.css +2 -0
  30. package/2x/cjs/components/modal/modal.css +1 -0
  31. package/2x/cjs/components/number-keyboard/number-keyboard.css +3 -2
  32. package/2x/cjs/components/passcode-input/passcode-input.css +1 -1
  33. package/2x/cjs/components/picker/index.d.ts +4 -0
  34. package/2x/cjs/components/picker/picker.css +6 -0
  35. package/2x/cjs/components/picker/picker.d.ts +4 -0
  36. package/2x/cjs/components/picker/picker.js +7 -3
  37. package/2x/cjs/components/picker-view/picker-view.css +17 -3
  38. package/2x/cjs/components/picker-view/picker-view.d.ts +2 -0
  39. package/2x/cjs/components/picker-view/picker-view.js +10 -3
  40. package/2x/cjs/components/picker-view/wheel.js +1 -1
  41. package/2x/cjs/components/popover/popover.css +2 -0
  42. package/2x/cjs/components/result/result.css +1 -1
  43. package/2x/cjs/components/side-bar/side-bar.css +1 -0
  44. package/2x/cjs/components/slider/slider.css +4 -0
  45. package/2x/cjs/components/swipe-action/swipe-action.css +1 -0
  46. package/2x/cjs/components/swiper/swiper.css +1 -0
  47. package/2x/cjs/components/tab-bar/tab-bar.css +1 -0
  48. package/2x/cjs/components/tabs/tabs.css +1 -0
  49. package/2x/cjs/components/text-area/text-area.css +6 -0
  50. package/2x/cjs/global/global.css +1 -0
  51. package/2x/cjs/utils/use-props-value.d.ts +1 -1
  52. package/2x/cjs/utils/use-props-value.js +3 -1
  53. package/2x/cjs/utils/use-tab-list-scroll.js +1 -1
  54. package/2x/es/components/button/button.css +1 -0
  55. package/2x/es/components/calendar/calendar.js +2 -2
  56. package/2x/es/components/cascader/cascader.js +1 -1
  57. package/2x/es/components/cascader-view/cascader-view.js +6 -3
  58. package/2x/es/components/date-picker/date-picker.d.ts +2 -2
  59. package/2x/es/components/date-picker/date-picker.js +3 -1
  60. package/2x/es/components/date-picker/index.d.ts +1 -1
  61. package/2x/es/components/date-picker-view/date-picker-view.d.ts +1 -1
  62. package/2x/es/components/date-picker-view/date-picker-view.js +2 -0
  63. package/2x/es/components/dialog/dialog.css +1 -0
  64. package/2x/es/components/dropdown/dropdown.css +2 -2
  65. package/2x/es/components/empty/empty.css +1 -0
  66. package/2x/es/components/floating-bubble/floating-bubble.css +1 -0
  67. package/2x/es/components/floating-panel/floating-panel.css +7 -4
  68. package/2x/es/components/form/form-item.css +1 -0
  69. package/2x/es/components/form/index.css +1 -0
  70. package/2x/es/components/grid/grid.css +1 -0
  71. package/2x/es/components/image/image.d.ts +1 -0
  72. package/2x/es/components/image/image.js +2 -1
  73. package/2x/es/components/image/test/image.test.d.ts +1 -0
  74. package/2x/es/components/image/test/image.test.js +24 -0
  75. package/2x/es/components/image-viewer/image-viewer.css +3 -0
  76. package/2x/es/components/index-bar/index-bar.css +2 -0
  77. package/2x/es/components/input/input.css +6 -0
  78. package/2x/es/components/jumbo-tabs/jumbo-tabs.css +2 -0
  79. package/2x/es/components/modal/modal.css +1 -0
  80. package/2x/es/components/number-keyboard/number-keyboard.css +3 -2
  81. package/2x/es/components/passcode-input/passcode-input.css +1 -1
  82. package/2x/es/components/picker/index.d.ts +4 -0
  83. package/2x/es/components/picker/picker.css +6 -0
  84. package/2x/es/components/picker/picker.d.ts +4 -0
  85. package/2x/es/components/picker/picker.js +7 -3
  86. package/2x/es/components/picker-view/picker-view.css +17 -3
  87. package/2x/es/components/picker-view/picker-view.d.ts +2 -0
  88. package/2x/es/components/picker-view/picker-view.js +7 -3
  89. package/2x/es/components/picker-view/wheel.js +1 -1
  90. package/2x/es/components/popover/popover.css +2 -0
  91. package/2x/es/components/result/result.css +1 -1
  92. package/2x/es/components/side-bar/side-bar.css +1 -0
  93. package/2x/es/components/slider/slider.css +4 -0
  94. package/2x/es/components/swipe-action/swipe-action.css +1 -0
  95. package/2x/es/components/swiper/swiper.css +1 -0
  96. package/2x/es/components/tab-bar/tab-bar.css +1 -0
  97. package/2x/es/components/tabs/tabs.css +1 -0
  98. package/2x/es/components/text-area/text-area.css +6 -0
  99. package/2x/es/global/global.css +1 -0
  100. package/2x/es/utils/use-props-value.d.ts +1 -1
  101. package/2x/es/utils/use-props-value.js +3 -1
  102. package/2x/es/utils/use-tab-list-scroll.js +1 -1
  103. package/2x/package.json +1 -1
  104. package/2x/umd/antd-mobile.js +1 -1
  105. package/README.md +2 -0
  106. package/bundle/antd-mobile.cjs.js +3411 -3359
  107. package/bundle/antd-mobile.es.js +3412 -3360
  108. package/bundle/style.css +112 -54
  109. package/cjs/components/button/button.css +2 -1
  110. package/cjs/components/calendar/calendar.js +2 -2
  111. package/cjs/components/cascader/cascader.js +1 -1
  112. package/cjs/components/cascader-view/cascader-view.js +7 -3
  113. package/cjs/components/date-picker/date-picker.d.ts +2 -2
  114. package/cjs/components/date-picker/date-picker.js +3 -1
  115. package/cjs/components/date-picker/index.d.ts +1 -1
  116. package/cjs/components/date-picker-view/date-picker-view.d.ts +1 -1
  117. package/cjs/components/date-picker-view/date-picker-view.js +2 -0
  118. package/cjs/components/dialog/dialog.css +2 -1
  119. package/cjs/components/dropdown/dropdown.css +2 -2
  120. package/cjs/components/empty/empty.css +1 -0
  121. package/cjs/components/floating-bubble/floating-bubble.css +2 -1
  122. package/cjs/components/floating-panel/floating-panel.css +8 -5
  123. package/cjs/components/form/form-item.css +2 -1
  124. package/cjs/components/form/index.css +2 -1
  125. package/cjs/components/grid/grid.css +2 -1
  126. package/cjs/components/image/image.d.ts +1 -0
  127. package/cjs/components/image/image.js +2 -1
  128. package/cjs/components/image/test/image.test.d.ts +1 -0
  129. package/cjs/components/image/test/image.test.js +34 -0
  130. package/cjs/components/image-viewer/image-viewer.css +4 -1
  131. package/cjs/components/index-bar/index-bar.css +3 -1
  132. package/cjs/components/input/input.css +6 -1
  133. package/cjs/components/jumbo-tabs/jumbo-tabs.css +2 -0
  134. package/cjs/components/modal/modal.css +2 -1
  135. package/cjs/components/number-keyboard/number-keyboard.css +4 -3
  136. package/cjs/components/passcode-input/passcode-input.css +1 -1
  137. package/cjs/components/picker/index.d.ts +4 -0
  138. package/cjs/components/picker/picker.css +5 -0
  139. package/cjs/components/picker/picker.d.ts +4 -0
  140. package/cjs/components/picker/picker.js +7 -3
  141. package/cjs/components/picker-view/picker-view.css +17 -4
  142. package/cjs/components/picker-view/picker-view.d.ts +2 -0
  143. package/cjs/components/picker-view/picker-view.js +10 -3
  144. package/cjs/components/picker-view/wheel.js +1 -1
  145. package/cjs/components/popover/popover.css +3 -1
  146. package/cjs/components/result/result.css +1 -1
  147. package/cjs/components/side-bar/side-bar.css +2 -1
  148. package/cjs/components/slider/slider.css +7 -3
  149. package/cjs/components/swipe-action/swipe-action.css +1 -0
  150. package/cjs/components/swiper/swiper.css +1 -0
  151. package/cjs/components/tab-bar/tab-bar.css +1 -0
  152. package/cjs/components/tabs/tabs.css +1 -0
  153. package/cjs/components/text-area/text-area.css +6 -1
  154. package/cjs/global/global.css +2 -1
  155. package/cjs/utils/use-props-value.d.ts +1 -1
  156. package/cjs/utils/use-props-value.js +3 -1
  157. package/cjs/utils/use-tab-list-scroll.js +1 -1
  158. package/es/components/button/button.css +2 -1
  159. package/es/components/calendar/calendar.js +2 -2
  160. package/es/components/cascader/cascader.js +1 -1
  161. package/es/components/cascader-view/cascader-view.js +6 -3
  162. package/es/components/date-picker/date-picker.d.ts +2 -2
  163. package/es/components/date-picker/date-picker.js +3 -1
  164. package/es/components/date-picker/index.d.ts +1 -1
  165. package/es/components/date-picker-view/date-picker-view.d.ts +1 -1
  166. package/es/components/date-picker-view/date-picker-view.js +2 -0
  167. package/es/components/dialog/dialog.css +2 -1
  168. package/es/components/dropdown/dropdown.css +2 -2
  169. package/es/components/empty/empty.css +1 -0
  170. package/es/components/floating-bubble/floating-bubble.css +2 -1
  171. package/es/components/floating-panel/floating-panel.css +8 -5
  172. package/es/components/form/form-item.css +2 -1
  173. package/es/components/form/index.css +2 -1
  174. package/es/components/grid/grid.css +2 -1
  175. package/es/components/image/image.d.ts +1 -0
  176. package/es/components/image/image.js +2 -1
  177. package/es/components/image/test/image.test.d.ts +1 -0
  178. package/es/components/image/test/image.test.js +24 -0
  179. package/es/components/image-viewer/image-viewer.css +4 -1
  180. package/es/components/index-bar/index-bar.css +3 -1
  181. package/es/components/input/input.css +6 -1
  182. package/es/components/jumbo-tabs/jumbo-tabs.css +2 -0
  183. package/es/components/modal/modal.css +2 -1
  184. package/es/components/number-keyboard/number-keyboard.css +4 -3
  185. package/es/components/passcode-input/passcode-input.css +1 -1
  186. package/es/components/picker/index.d.ts +4 -0
  187. package/es/components/picker/picker.css +5 -0
  188. package/es/components/picker/picker.d.ts +4 -0
  189. package/es/components/picker/picker.js +7 -3
  190. package/es/components/picker-view/picker-view.css +17 -4
  191. package/es/components/picker-view/picker-view.d.ts +2 -0
  192. package/es/components/picker-view/picker-view.js +7 -3
  193. package/es/components/picker-view/wheel.js +1 -1
  194. package/es/components/popover/popover.css +3 -1
  195. package/es/components/result/result.css +1 -1
  196. package/es/components/side-bar/side-bar.css +2 -1
  197. package/es/components/slider/slider.css +7 -3
  198. package/es/components/swipe-action/swipe-action.css +1 -0
  199. package/es/components/swiper/swiper.css +1 -0
  200. package/es/components/tab-bar/tab-bar.css +1 -0
  201. package/es/components/tabs/tabs.css +1 -0
  202. package/es/components/text-area/text-area.css +6 -1
  203. package/es/global/global.css +2 -1
  204. package/es/utils/use-props-value.d.ts +1 -1
  205. package/es/utils/use-props-value.js +3 -1
  206. package/es/utils/use-tab-list-scroll.js +1 -1
  207. package/package.json +1 -1
  208. package/umd/antd-mobile.js +1 -1
@@ -4,6 +4,7 @@
4
4
  --gap-vertical: var(--gap);
5
5
  display: grid;
6
6
  grid-gap: 20px;
7
+ -webkit-column-gap: var(--gap-horizontal);
7
8
  column-gap: var(--gap-horizontal);
8
9
  row-gap: var(--gap-vertical);
9
10
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
@@ -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;
@@ -59,6 +59,7 @@
59
59
  }
60
60
 
61
61
  .adm-modal-footer {
62
+ -webkit-user-select: none;
62
63
  user-select: none;
63
64
  padding: 16px 24px 24px;
64
65
  }
@@ -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-white);
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-white);
115
+ background-color: var(--adm-color-background);
115
116
  }
116
117
 
117
118
  .adm-number-keyboard-key.extra-key:active::before,
@@ -22,7 +22,7 @@
22
22
  font-size: var(--adm-font-size-10);
23
23
  width: var(--cell-size);
24
24
  height: var(--cell-size);
25
- background: var(--adm-color-white);
25
+ background: var(--adm-color-background);
26
26
  }
27
27
 
28
28
  .adm-passcode-input:not(.seperated) {
@@ -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
- setValue(innerValue);
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-white);
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: linear-gradient(0deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.8) 50%, #ffffff);
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: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.8) 50%, #ffffff);
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 (!value) return;
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);
@@ -1,6 +1,6 @@
1
1
  .adm-result {
2
2
  padding: 64px 24px;
3
- background-color: var(--adm-color-white);
3
+ background-color: var(--adm-color-background);
4
4
  }
5
5
 
6
6
  .adm-result-icon {
@@ -59,6 +59,7 @@
59
59
  position: absolute;
60
60
  z-index: 100;
61
61
  right: 0;
62
+ -webkit-user-select: none;
62
63
  user-select: none;
63
64
  pointer-events: none;
64
65
  }
@@ -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
  }
@@ -1,6 +1,7 @@
1
1
  .adm-swipe-action {
2
2
  --background: var(--adm-color-background);
3
3
  background: var(--background);
4
+ cursor: -webkit-grab;
4
5
  cursor: grab;
5
6
  overflow: hidden;
6
7
  touch-action: pan-y;
@@ -22,6 +22,7 @@
22
22
  }
23
23
 
24
24
  .adm-swiper-track-allow-touch-move {
25
+ cursor: -webkit-grab;
25
26
  cursor: grab;
26
27
  }
27
28
 
@@ -12,6 +12,7 @@
12
12
  color: var(--adm-color-weak);
13
13
  white-space: nowrap;
14
14
  padding: 8px 16px;
15
+ width: -webkit-min-content;
15
16
  width: min-content;
16
17
  position: relative;
17
18
  cursor: pointer;
@@ -39,6 +39,7 @@
39
39
  .adm-tabs-tab {
40
40
  white-space: nowrap;
41
41
  padding: 16px 0 20px;
42
+ width: -webkit-min-content;
42
43
  width: min-content;
43
44
  margin: 0 auto;
44
45
  font-size: var(--title-font-size);
@@ -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;
@@ -90,6 +90,7 @@ div.adm-px-tester {
90
90
  position: fixed;
91
91
  right: -100vw;
92
92
  bottom: -100vh;
93
+ -webkit-user-select: none;
93
94
  user-select: none;
94
95
  pointer-events: none;
95
96
  }
@@ -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>) => void];
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);
@@ -45,7 +45,7 @@ const useTabListScroll = (targetRef, activeIndex) => {
45
45
  from: {
46
46
  scrollLeft: containerScrollLeft
47
47
  },
48
- immediate
48
+ immediate: immediate && !scrollLeft.isAnimating
49
49
  });
50
50
  }
51
51
 
@@ -21,6 +21,7 @@
21
21
  border-radius: var(--border-radius);
22
22
  cursor: pointer;
23
23
  transition: opacity ease 0.15s;
24
+ -webkit-user-select: none;
24
25
  user-select: none;
25
26
  }
26
27
 
@@ -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: item,
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;