antd-mobile 5.16.0 → 5.17.1

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 (228) hide show
  1. package/2x/README.md +2 -0
  2. package/2x/bundle/antd-mobile.cjs.js +3416 -3361
  3. package/2x/bundle/antd-mobile.es.js +3417 -3362
  4. package/2x/bundle/style.css +98 -36
  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/center-popup/center-popup.js +3 -1
  10. package/2x/cjs/components/date-picker/date-picker.d.ts +2 -2
  11. package/2x/cjs/components/date-picker/date-picker.js +3 -1
  12. package/2x/cjs/components/date-picker/index.d.ts +1 -1
  13. package/2x/cjs/components/date-picker-view/date-picker-view.d.ts +1 -1
  14. package/2x/cjs/components/date-picker-view/date-picker-view.js +2 -0
  15. package/2x/cjs/components/dialog/dialog.css +1 -0
  16. package/2x/cjs/components/dialog/dialog.js +2 -1
  17. package/2x/cjs/components/dropdown/dropdown.css +2 -2
  18. package/2x/cjs/components/empty/empty.css +1 -0
  19. package/2x/cjs/components/floating-bubble/floating-bubble.css +1 -0
  20. package/2x/cjs/components/floating-panel/floating-panel.css +3 -0
  21. package/2x/cjs/components/form/form-item.css +1 -0
  22. package/2x/cjs/components/form/index.css +1 -0
  23. package/2x/cjs/components/grid/grid.css +1 -0
  24. package/2x/cjs/components/image/image.d.ts +1 -0
  25. package/2x/cjs/components/image/image.js +2 -1
  26. package/2x/cjs/components/image/test/image.test.d.ts +1 -0
  27. package/2x/cjs/components/image/test/image.test.js +34 -0
  28. package/2x/cjs/components/image-viewer/image-viewer.css +3 -0
  29. package/2x/cjs/components/index-bar/index-bar.css +2 -0
  30. package/2x/cjs/components/input/input.css +6 -0
  31. package/2x/cjs/components/jumbo-tabs/jumbo-tabs.css +2 -0
  32. package/2x/cjs/components/modal/modal.css +1 -0
  33. package/2x/cjs/components/modal/modal.js +2 -1
  34. package/2x/cjs/components/number-keyboard/number-keyboard.css +3 -2
  35. package/2x/cjs/components/passcode-input/passcode-input.css +1 -1
  36. package/2x/cjs/components/picker/index.d.ts +4 -0
  37. package/2x/cjs/components/picker/picker.css +6 -0
  38. package/2x/cjs/components/picker/picker.d.ts +4 -0
  39. package/2x/cjs/components/picker/picker.js +7 -3
  40. package/2x/cjs/components/picker-view/picker-view.css +17 -3
  41. package/2x/cjs/components/picker-view/picker-view.d.ts +2 -0
  42. package/2x/cjs/components/picker-view/picker-view.js +10 -3
  43. package/2x/cjs/components/popover/popover.css +2 -0
  44. package/2x/cjs/components/popup/popup-base-props.d.ts +1 -1
  45. package/2x/cjs/components/popup/popup-base-props.js +1 -1
  46. package/2x/cjs/components/result/result.css +1 -1
  47. package/2x/cjs/components/side-bar/side-bar.css +1 -0
  48. package/2x/cjs/components/slider/slider.css +4 -0
  49. package/2x/cjs/components/swipe-action/swipe-action.css +1 -0
  50. package/2x/cjs/components/swiper/swiper.css +1 -0
  51. package/2x/cjs/components/tab-bar/tab-bar.css +1 -0
  52. package/2x/cjs/components/tabs/tabs.css +1 -0
  53. package/2x/cjs/components/text-area/text-area.css +6 -0
  54. package/2x/cjs/components/text-area/text-area.js +0 -1
  55. package/2x/cjs/global/global.css +1 -0
  56. package/2x/cjs/utils/use-props-value.d.ts +1 -1
  57. package/2x/cjs/utils/use-props-value.js +3 -1
  58. package/2x/cjs/utils/use-tab-list-scroll.js +1 -1
  59. package/2x/es/components/button/button.css +1 -0
  60. package/2x/es/components/calendar/calendar.js +2 -2
  61. package/2x/es/components/cascader/cascader.js +1 -1
  62. package/2x/es/components/cascader-view/cascader-view.js +6 -3
  63. package/2x/es/components/center-popup/center-popup.js +3 -1
  64. package/2x/es/components/date-picker/date-picker.d.ts +2 -2
  65. package/2x/es/components/date-picker/date-picker.js +3 -1
  66. package/2x/es/components/date-picker/index.d.ts +1 -1
  67. package/2x/es/components/date-picker-view/date-picker-view.d.ts +1 -1
  68. package/2x/es/components/date-picker-view/date-picker-view.js +2 -0
  69. package/2x/es/components/dialog/dialog.css +1 -0
  70. package/2x/es/components/dialog/dialog.js +2 -1
  71. package/2x/es/components/dropdown/dropdown.css +2 -2
  72. package/2x/es/components/empty/empty.css +1 -0
  73. package/2x/es/components/floating-bubble/floating-bubble.css +1 -0
  74. package/2x/es/components/floating-panel/floating-panel.css +3 -0
  75. package/2x/es/components/form/form-item.css +1 -0
  76. package/2x/es/components/form/index.css +1 -0
  77. package/2x/es/components/grid/grid.css +1 -0
  78. package/2x/es/components/image/image.d.ts +1 -0
  79. package/2x/es/components/image/image.js +2 -1
  80. package/2x/es/components/image/test/image.test.d.ts +1 -0
  81. package/2x/es/components/image/test/image.test.js +24 -0
  82. package/2x/es/components/image-viewer/image-viewer.css +3 -0
  83. package/2x/es/components/index-bar/index-bar.css +2 -0
  84. package/2x/es/components/input/input.css +6 -0
  85. package/2x/es/components/jumbo-tabs/jumbo-tabs.css +2 -0
  86. package/2x/es/components/modal/modal.css +1 -0
  87. package/2x/es/components/modal/modal.js +2 -1
  88. package/2x/es/components/number-keyboard/number-keyboard.css +3 -2
  89. package/2x/es/components/passcode-input/passcode-input.css +1 -1
  90. package/2x/es/components/picker/index.d.ts +4 -0
  91. package/2x/es/components/picker/picker.css +6 -0
  92. package/2x/es/components/picker/picker.d.ts +4 -0
  93. package/2x/es/components/picker/picker.js +7 -3
  94. package/2x/es/components/picker-view/picker-view.css +17 -3
  95. package/2x/es/components/picker-view/picker-view.d.ts +2 -0
  96. package/2x/es/components/picker-view/picker-view.js +7 -3
  97. package/2x/es/components/popover/popover.css +2 -0
  98. package/2x/es/components/popup/popup-base-props.d.ts +1 -1
  99. package/2x/es/components/popup/popup-base-props.js +1 -1
  100. package/2x/es/components/result/result.css +1 -1
  101. package/2x/es/components/side-bar/side-bar.css +1 -0
  102. package/2x/es/components/slider/slider.css +4 -0
  103. package/2x/es/components/swipe-action/swipe-action.css +1 -0
  104. package/2x/es/components/swiper/swiper.css +1 -0
  105. package/2x/es/components/tab-bar/tab-bar.css +1 -0
  106. package/2x/es/components/tabs/tabs.css +1 -0
  107. package/2x/es/components/text-area/text-area.css +6 -0
  108. package/2x/es/components/text-area/text-area.js +0 -1
  109. package/2x/es/global/global.css +1 -0
  110. package/2x/es/utils/use-props-value.d.ts +1 -1
  111. package/2x/es/utils/use-props-value.js +3 -1
  112. package/2x/es/utils/use-tab-list-scroll.js +1 -1
  113. package/2x/package.json +1 -1
  114. package/2x/umd/antd-mobile.js +1 -1
  115. package/README.md +2 -0
  116. package/bundle/antd-mobile.cjs.js +3416 -3361
  117. package/bundle/antd-mobile.es.js +3417 -3362
  118. package/bundle/style.css +108 -50
  119. package/cjs/components/button/button.css +2 -1
  120. package/cjs/components/calendar/calendar.js +2 -2
  121. package/cjs/components/cascader/cascader.js +1 -1
  122. package/cjs/components/cascader-view/cascader-view.js +7 -3
  123. package/cjs/components/center-popup/center-popup.js +3 -1
  124. package/cjs/components/date-picker/date-picker.d.ts +2 -2
  125. package/cjs/components/date-picker/date-picker.js +3 -1
  126. package/cjs/components/date-picker/index.d.ts +1 -1
  127. package/cjs/components/date-picker-view/date-picker-view.d.ts +1 -1
  128. package/cjs/components/date-picker-view/date-picker-view.js +2 -0
  129. package/cjs/components/dialog/dialog.css +2 -1
  130. package/cjs/components/dialog/dialog.js +2 -1
  131. package/cjs/components/dropdown/dropdown.css +2 -2
  132. package/cjs/components/empty/empty.css +1 -0
  133. package/cjs/components/floating-bubble/floating-bubble.css +2 -1
  134. package/cjs/components/floating-panel/floating-panel.css +4 -1
  135. package/cjs/components/form/form-item.css +2 -1
  136. package/cjs/components/form/index.css +2 -1
  137. package/cjs/components/grid/grid.css +2 -1
  138. package/cjs/components/image/image.d.ts +1 -0
  139. package/cjs/components/image/image.js +2 -1
  140. package/cjs/components/image/test/image.test.d.ts +1 -0
  141. package/cjs/components/image/test/image.test.js +34 -0
  142. package/cjs/components/image-viewer/image-viewer.css +4 -1
  143. package/cjs/components/index-bar/index-bar.css +3 -1
  144. package/cjs/components/input/input.css +6 -1
  145. package/cjs/components/jumbo-tabs/jumbo-tabs.css +2 -0
  146. package/cjs/components/modal/modal.css +2 -1
  147. package/cjs/components/modal/modal.js +2 -1
  148. package/cjs/components/number-keyboard/number-keyboard.css +4 -3
  149. package/cjs/components/passcode-input/passcode-input.css +1 -1
  150. package/cjs/components/picker/index.d.ts +4 -0
  151. package/cjs/components/picker/picker.css +5 -0
  152. package/cjs/components/picker/picker.d.ts +4 -0
  153. package/cjs/components/picker/picker.js +7 -3
  154. package/cjs/components/picker-view/picker-view.css +17 -4
  155. package/cjs/components/picker-view/picker-view.d.ts +2 -0
  156. package/cjs/components/picker-view/picker-view.js +10 -3
  157. package/cjs/components/popover/popover.css +3 -1
  158. package/cjs/components/popup/popup-base-props.d.ts +1 -1
  159. package/cjs/components/popup/popup-base-props.js +1 -1
  160. package/cjs/components/result/result.css +1 -1
  161. package/cjs/components/side-bar/side-bar.css +2 -1
  162. package/cjs/components/slider/slider.css +7 -3
  163. package/cjs/components/swipe-action/swipe-action.css +1 -0
  164. package/cjs/components/swiper/swiper.css +1 -0
  165. package/cjs/components/tab-bar/tab-bar.css +1 -0
  166. package/cjs/components/tabs/tabs.css +1 -0
  167. package/cjs/components/text-area/text-area.css +6 -1
  168. package/cjs/components/text-area/text-area.js +0 -1
  169. package/cjs/global/global.css +2 -1
  170. package/cjs/utils/use-props-value.d.ts +1 -1
  171. package/cjs/utils/use-props-value.js +3 -1
  172. package/cjs/utils/use-tab-list-scroll.js +1 -1
  173. package/es/components/button/button.css +2 -1
  174. package/es/components/calendar/calendar.js +2 -2
  175. package/es/components/cascader/cascader.js +1 -1
  176. package/es/components/cascader-view/cascader-view.js +6 -3
  177. package/es/components/center-popup/center-popup.js +3 -1
  178. package/es/components/date-picker/date-picker.d.ts +2 -2
  179. package/es/components/date-picker/date-picker.js +3 -1
  180. package/es/components/date-picker/index.d.ts +1 -1
  181. package/es/components/date-picker-view/date-picker-view.d.ts +1 -1
  182. package/es/components/date-picker-view/date-picker-view.js +2 -0
  183. package/es/components/dialog/dialog.css +2 -1
  184. package/es/components/dialog/dialog.js +2 -1
  185. package/es/components/dropdown/dropdown.css +2 -2
  186. package/es/components/empty/empty.css +1 -0
  187. package/es/components/floating-bubble/floating-bubble.css +2 -1
  188. package/es/components/floating-panel/floating-panel.css +4 -1
  189. package/es/components/form/form-item.css +2 -1
  190. package/es/components/form/index.css +2 -1
  191. package/es/components/grid/grid.css +2 -1
  192. package/es/components/image/image.d.ts +1 -0
  193. package/es/components/image/image.js +2 -1
  194. package/es/components/image/test/image.test.d.ts +1 -0
  195. package/es/components/image/test/image.test.js +24 -0
  196. package/es/components/image-viewer/image-viewer.css +4 -1
  197. package/es/components/index-bar/index-bar.css +3 -1
  198. package/es/components/input/input.css +6 -1
  199. package/es/components/jumbo-tabs/jumbo-tabs.css +2 -0
  200. package/es/components/modal/modal.css +2 -1
  201. package/es/components/modal/modal.js +2 -1
  202. package/es/components/number-keyboard/number-keyboard.css +4 -3
  203. package/es/components/passcode-input/passcode-input.css +1 -1
  204. package/es/components/picker/index.d.ts +4 -0
  205. package/es/components/picker/picker.css +5 -0
  206. package/es/components/picker/picker.d.ts +4 -0
  207. package/es/components/picker/picker.js +7 -3
  208. package/es/components/picker-view/picker-view.css +17 -4
  209. package/es/components/picker-view/picker-view.d.ts +2 -0
  210. package/es/components/picker-view/picker-view.js +7 -3
  211. package/es/components/popover/popover.css +3 -1
  212. package/es/components/popup/popup-base-props.d.ts +1 -1
  213. package/es/components/popup/popup-base-props.js +1 -1
  214. package/es/components/result/result.css +1 -1
  215. package/es/components/side-bar/side-bar.css +2 -1
  216. package/es/components/slider/slider.css +7 -3
  217. package/es/components/swipe-action/swipe-action.css +1 -0
  218. package/es/components/swiper/swiper.css +1 -0
  219. package/es/components/tab-bar/tab-bar.css +1 -0
  220. package/es/components/tabs/tabs.css +1 -0
  221. package/es/components/text-area/text-area.css +6 -1
  222. package/es/components/text-area/text-area.js +0 -1
  223. package/es/global/global.css +2 -1
  224. package/es/utils/use-props-value.d.ts +1 -1
  225. package/es/utils/use-props-value.js +3 -1
  226. package/es/utils/use-tab-list-scroll.js +1 -1
  227. package/package.json +1 -1
  228. package/umd/antd-mobile.js +1 -1
@@ -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;
@@ -2,7 +2,7 @@ import { FC, ReactNode } from 'react';
2
2
  import type { PickerViewProps } from '../picker-view';
3
3
  import { NativeProps } from '../../utils/native-props';
4
4
  import type { Precision, DatePickerFilter } from '../date-picker/date-picker-utils';
5
- export declare type DatePickerViewProps = Pick<PickerViewProps, 'style' | 'mouseWheel'> & {
5
+ export declare type DatePickerViewProps = Pick<PickerViewProps, 'style' | 'mouseWheel' | 'loading' | 'loadingContent'> & {
6
6
  value?: Date;
7
7
  defaultValue?: Date;
8
8
  onChange?: (value: Date) => void;
@@ -32,6 +32,8 @@ export const DatePickerView = p => {
32
32
  }, [props.onChange, props.precision]);
33
33
  return withNativeProps(props, React.createElement(PickerView, {
34
34
  columns: selected => generateDatePickerColumns(selected, props.min, props.max, props.precision, props.renderLabel, props.filter),
35
+ loading: props.loading,
36
+ loadingContent: props.loadingContent,
35
37
  value: pickerValue,
36
38
  mouseWheel: props.mouseWheel,
37
39
  onChange: onChange
@@ -63,6 +63,7 @@
63
63
  }
64
64
 
65
65
  .adm-dialog-footer {
66
+ -webkit-user-select: none;
66
67
  user-select: none;
67
68
  }
68
69
 
@@ -9,7 +9,8 @@ import CenterPopup from '../center-popup';
9
9
  const defaultProps = {
10
10
  actions: [],
11
11
  closeOnAction: false,
12
- closeOnMaskClick: false
12
+ closeOnMaskClick: false,
13
+ getContainer: null
13
14
  };
14
15
  export const Dialog = p => {
15
16
  const props = mergeProps(defaultProps, p);
@@ -1,5 +1,5 @@
1
1
  .adm-dropdown {
2
- background-color: white;
2
+ background-color: var(--adm-color-background);
3
3
  }
4
4
 
5
5
  .adm-dropdown .adm-dropdown-nav {
@@ -61,7 +61,7 @@
61
61
 
62
62
  .adm-dropdown-item-content {
63
63
  width: 100%;
64
- background: white;
64
+ background: var(--adm-color-background);
65
65
  }
66
66
 
67
67
  .adm-dropdown-item-content-hidden {
@@ -13,6 +13,7 @@
13
13
 
14
14
  .adm-empty-image-container .adm-empty-image {
15
15
  width: 128px;
16
+ height: intrinsic;
16
17
  }
17
18
 
18
19
  .adm-empty-description {
@@ -42,6 +42,7 @@
42
42
  overflow: hidden;
43
43
  cursor: pointer;
44
44
  transition: opacity ease 0.15s;
45
+ -webkit-user-select: none;
45
46
  user-select: none;
46
47
  touch-action: none;
47
48
  background: var(--background);
@@ -41,8 +41,11 @@
41
41
  display: flex;
42
42
  justify-content: center;
43
43
  align-items: center;
44
+ cursor: -webkit-grab;
44
45
  cursor: grab;
46
+ -webkit-user-select: none;
45
47
  user-select: none;
48
+ background-color: var(--adm-color-background);
46
49
  }
47
50
 
48
51
  .adm-floating-panel .adm-floating-panel-header .adm-floating-panel-bar {
@@ -17,6 +17,7 @@
17
17
  top: 0;
18
18
  font-family: SimSun, sans-serif;
19
19
  color: var(--adm-color-danger);
20
+ -webkit-user-select: none;
20
21
  user-select: none;
21
22
  }
22
23
 
@@ -43,6 +43,7 @@
43
43
  top: 0;
44
44
  font-family: SimSun, sans-serif;
45
45
  color: var(--adm-color-danger);
46
+ -webkit-user-select: none;
46
47
  user-select: none;
47
48
  }
48
49
 
@@ -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>;
@@ -87,7 +87,8 @@ export const Image = staged(p => {
87
87
  return withNativeProps(props, React.createElement("div", {
88
88
  ref: ref,
89
89
  className: classPrefix,
90
- style: style
90
+ style: style,
91
+ onClick: props.onContainerClick
91
92
  }, props.lazy && !initialized && React.createElement(LazyDetector, {
92
93
  onActive: () => {
93
94
  setInitialized(true);
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,24 @@
1
+ import { __awaiter } from "tslib";
2
+ import React from 'react';
3
+ import { fireEvent, render, testA11y } from 'testing';
4
+ import Image from '../index';
5
+ const demoSrc = 'https://images.unsplash.com/photo-1567945716310-4745a6b7844b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60';
6
+ describe('image', () => {
7
+ test('a11y', () => __awaiter(void 0, void 0, void 0, function* () {
8
+ yield testA11y(React.createElement(Image, {
9
+ src: demoSrc
10
+ }));
11
+ }));
12
+ test('onContainerClick can work', () => {
13
+ const onContainerClick = jest.fn();
14
+ const {
15
+ getByTestId
16
+ } = render(React.createElement(Image, {
17
+ src: demoSrc,
18
+ onContainerClick: onContainerClick,
19
+ "data-testid": 'img'
20
+ }));
21
+ fireEvent.click(getByTestId('img'));
22
+ expect(onContainerClick).toBeCalledTimes(1);
23
+ });
24
+ });
@@ -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,7 +10,8 @@ import CenterPopup from '../center-popup';
10
10
  const defaultProps = {
11
11
  actions: [],
12
12
  closeOnAction: false,
13
- closeOnMaskClick: false
13
+ closeOnMaskClick: false,
14
+ getContainer: null
14
15
  };
15
16
  export const Modal = p => {
16
17
  const props = mergeProps(defaultProps, p);
@@ -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;
@@ -97,14 +97,18 @@ export const Picker = memo(forwardRef((p, ref) => {
97
97
  className: `${classPrefix}-header-title`
98
98
  }, props.title), React.createElement("a", {
99
99
  role: 'button',
100
- className: `${classPrefix}-header-button`,
100
+ className: classNames(`${classPrefix}-header-button`, props.loading && `${classPrefix}-header-button-disabled`),
101
101
  onClick: () => {
102
- setValue(innerValue);
102
+ if (props.loading) return;
103
+ setValue(innerValue, true);
103
104
  setVisible(false);
104
- }
105
+ },
106
+ "aria-disabled": props.loading
105
107
  }, props.confirmText)), React.createElement("div", {
106
108
  className: `${classPrefix}-body`
107
109
  }, React.createElement(PickerView, {
110
+ loading: props.loading,
111
+ loadingContent: props.loadingContent,
108
112
  columns: props.columns,
109
113
  renderLabel: props.renderLabel,
110
114
  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>;
@@ -5,11 +5,15 @@ import { useColumnsExtend } from './columns-extend';
5
5
  import { withNativeProps } from '../../utils/native-props';
6
6
  import { useDebounceEffect } from 'ahooks';
7
7
  import { defaultRenderLabel } from '../picker/picker-utils';
8
+ import SpinLoading from '../spin-loading';
8
9
  const classPrefix = `adm-picker-view`;
9
10
  const defaultProps = {
10
11
  defaultValue: [],
11
12
  renderLabel: defaultRenderLabel,
12
- mouseWheel: false
13
+ mouseWheel: false,
14
+ loadingContent: React.createElement("div", {
15
+ className: `${classPrefix}-loading-content`
16
+ }, React.createElement(SpinLoading, null))
13
17
  };
14
18
  export const PickerView = memo(p => {
15
19
  const props = mergeProps(defaultProps, p);
@@ -53,7 +57,7 @@ export const PickerView = memo(p => {
53
57
  }, []);
54
58
  return withNativeProps(props, React.createElement("div", {
55
59
  className: `${classPrefix}`
56
- }, columns.map((column, index) => React.createElement(Wheel, {
60
+ }, props.loading ? props.loadingContent : React.createElement(React.Fragment, null, columns.map((column, index) => React.createElement(Wheel, {
57
61
  key: index,
58
62
  index: index,
59
63
  column: column,
@@ -69,6 +73,6 @@ export const PickerView = memo(p => {
69
73
  className: `${classPrefix}-mask-middle`
70
74
  }), React.createElement("div", {
71
75
  className: `${classPrefix}-mask-bottom`
72
- }))));
76
+ })))));
73
77
  });
74
78
  PickerView.displayName = 'PickerView';
@@ -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);
@@ -27,7 +27,7 @@ export declare const defaultPopupBaseProps: {
27
27
  destroyOnClose: boolean;
28
28
  disableBodyScroll: boolean;
29
29
  forceRender: boolean;
30
- getContainer: null;
30
+ getContainer: () => HTMLElement;
31
31
  mask: boolean;
32
32
  showCloseButton: boolean;
33
33
  stopPropagation: string[];
@@ -3,7 +3,7 @@ export const defaultPopupBaseProps = {
3
3
  destroyOnClose: false,
4
4
  disableBodyScroll: true,
5
5
  forceRender: false,
6
- getContainer: null,
6
+ getContainer: () => document.body,
7
7
  mask: true,
8
8
  showCloseButton: false,
9
9
  stopPropagation: ['click'],
@@ -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;
@@ -51,7 +51,6 @@ export const TextArea = forwardRef((p, ref) => {
51
51
  if (!autoSize) return;
52
52
  const textArea = nativeTextAreaRef.current;
53
53
  if (!textArea) return;
54
- textArea.style.height = 'auto';
55
54
  let height = textArea.scrollHeight;
56
55
 
57
56
  if (typeof autoSize === 'object') {
@@ -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 {};