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
@@ -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-white);
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
  }
@@ -15,7 +15,8 @@
15
15
  top: 0;
16
16
  font-family: SimSun, sans-serif;
17
17
  color: var(--adm-color-danger);
18
- user-select: none;
18
+ -webkit-user-select: none;
19
+ user-select: none;
19
20
  }
20
21
  .adm-form-item-label .adm-form-item-required-text {
21
22
  margin-left: 4px;
@@ -37,7 +37,8 @@
37
37
  top: 0;
38
38
  font-family: SimSun, sans-serif;
39
39
  color: var(--adm-color-danger);
40
- user-select: none;
40
+ -webkit-user-select: none;
41
+ user-select: none;
41
42
  }
42
43
  .adm-form-item-label .adm-form-item-required-text {
43
44
  margin-left: 4px;
@@ -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;
@@ -49,7 +49,8 @@
49
49
  color: var(--adm-color-text);
50
50
  }
51
51
  .adm-modal-footer {
52
- user-select: none;
52
+ -webkit-user-select: none;
53
+ user-select: none;
53
54
  padding: 8px 12px 12px;
54
55
  }
55
56
  .adm-modal-footer-empty {
@@ -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-white);
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-white);
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-white);
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
- 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,18 +7,20 @@
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
  .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: linear-gradient(0deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.8) 50%, #ffffff);
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: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.8) 50%, #ffffff);
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 (!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,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);
@@ -1,6 +1,6 @@
1
1
  .adm-result {
2
2
  padding: 32px 12px;
3
- background-color: var(--adm-color-white);
3
+ background-color: var(--adm-color-background);
4
4
  }
5
5
  .adm-result-icon {
6
6
  box-sizing: border-box;
@@ -53,7 +53,8 @@
53
53
  position: absolute;
54
54
  z-index: 100;
55
55
  right: 0;
56
- user-select: none;
56
+ -webkit-user-select: none;
57
+ user-select: none;
57
58
  pointer-events: none;
58
59
  }
59
60
  .adm-side-bar-item-corner-top {
@@ -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 {
@@ -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;
@@ -20,6 +20,7 @@
20
20
  padding: var(--track-padding);
21
21
  }
22
22
  .adm-swiper-track-allow-touch-move {
23
+ cursor: -webkit-grab;
23
24
  cursor: grab;
24
25
  }
25
26
  .adm-swiper-track-inner {
@@ -11,6 +11,7 @@
11
11
  color: var(--adm-color-weak);
12
12
  white-space: nowrap;
13
13
  padding: 4px 8px;
14
+ width: -webkit-min-content;
14
15
  width: min-content;
15
16
  position: relative;
16
17
  cursor: pointer;
@@ -33,6 +33,7 @@
33
33
  .adm-tabs-tab {
34
34
  white-space: nowrap;
35
35
  padding: 8px 0 10px;
36
+ width: -webkit-min-content;
36
37
  width: min-content;
37
38
  margin: 0 auto;
38
39
  font-size: var(--title-font-size);
@@ -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;
@@ -80,6 +80,7 @@ div.adm-px-tester {
80
80
  position: fixed;
81
81
  right: -100vw;
82
82
  bottom: -100vh;
83
- user-select: none;
83
+ -webkit-user-select: none;
84
+ user-select: none;
84
85
  pointer-events: none;
85
86
  }
@@ -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,7 +21,8 @@
21
21
  border-radius: var(--border-radius);
22
22
  cursor: pointer;
23
23
  transition: opacity ease 0.15s;
24
- user-select: none;
24
+ -webkit-user-select: none;
25
+ user-select: none;
25
26
  }
26
27
  .adm-button:focus {
27
28
  outline: none;
@@ -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", {