antd-mobile 5.36.1 → 5.37.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 (224) hide show
  1. package/2x/bundle/antd-mobile.cjs.development.js +1260 -1138
  2. package/2x/bundle/antd-mobile.cjs.js +7 -7
  3. package/2x/bundle/antd-mobile.es.development.js +1260 -1138
  4. package/2x/bundle/antd-mobile.es.js +6853 -6777
  5. package/2x/bundle/antd-mobile.umd.development.js +1260 -1138
  6. package/2x/bundle/antd-mobile.umd.js +7 -7
  7. package/2x/bundle/style.css +50 -53
  8. package/2x/cjs/components/calendar-picker/calendar-picker.js +12 -6
  9. package/2x/cjs/components/calendar-picker-view/calendar-picker-view.d.ts +3 -0
  10. package/2x/cjs/components/calendar-picker-view/calendar-picker-view.js +41 -19
  11. package/2x/cjs/components/calendar-picker-view/useSyncScroll.d.ts +2 -0
  12. package/2x/cjs/components/calendar-picker-view/useSyncScroll.js +39 -0
  13. package/2x/cjs/components/card/card.css +5 -5
  14. package/2x/cjs/components/card/card.patch.css +21 -0
  15. package/2x/cjs/components/center-popup/center-popup.js +46 -43
  16. package/2x/cjs/components/check-list/check-list.js +15 -11
  17. package/2x/cjs/components/collapse/collapse.d.ts +9 -1
  18. package/2x/cjs/components/collapse/collapse.js +26 -28
  19. package/2x/cjs/components/config-provider/config-provider.d.ts +40 -2
  20. package/2x/cjs/components/dropdown/context.d.ts +2 -0
  21. package/2x/cjs/components/dropdown/context.js +10 -0
  22. package/2x/cjs/components/dropdown/dropdown.d.ts +11 -3
  23. package/2x/cjs/components/dropdown/dropdown.js +23 -16
  24. package/2x/cjs/components/dropdown/index.d.ts +1 -0
  25. package/2x/cjs/components/dropdown/item.d.ts +5 -1
  26. package/2x/cjs/components/dropdown/item.js +22 -8
  27. package/2x/cjs/components/form/form-item.d.ts +6 -5
  28. package/2x/cjs/components/form/form-item.js +25 -17
  29. package/2x/cjs/components/form/form.d.ts +1 -1
  30. package/2x/cjs/components/form/index.d.ts +1 -1
  31. package/2x/cjs/components/input/input.d.ts +3 -1
  32. package/2x/cjs/components/input/input.js +53 -51
  33. package/2x/cjs/components/list/list-item.d.ts +6 -2
  34. package/2x/cjs/components/list/list-item.js +16 -6
  35. package/2x/cjs/components/nav-bar/nav-bar.d.ts +4 -0
  36. package/2x/cjs/components/nav-bar/nav-bar.js +20 -15
  37. package/2x/cjs/components/notice-bar/notice-bar.css +0 -3
  38. package/2x/cjs/components/notice-bar/notice-bar.d.ts +3 -1
  39. package/2x/cjs/components/notice-bar/notice-bar.js +30 -25
  40. package/2x/cjs/components/number-keyboard/number-keyboard.d.ts +1 -1
  41. package/2x/cjs/components/number-keyboard/number-keyboard.js +14 -13
  42. package/2x/cjs/components/popup/popup-base-props.d.ts +3 -2
  43. package/2x/cjs/components/popup/popup-base-props.js +4 -0
  44. package/2x/cjs/components/popup/popup.js +5 -5
  45. package/2x/cjs/components/result/result.js +3 -10
  46. package/2x/cjs/components/result/use-result-icon.d.ts +3 -0
  47. package/2x/cjs/components/result/use-result-icon.js +37 -0
  48. package/2x/cjs/components/result-page/result-page.js +3 -10
  49. package/2x/cjs/components/search-bar/search-bar.d.ts +10 -2
  50. package/2x/cjs/components/search-bar/search-bar.js +34 -33
  51. package/2x/cjs/components/toast/toast.d.ts +2 -2
  52. package/2x/cjs/components/toast/toast.js +4 -4
  53. package/2x/cjs/components/virtual-input/virtual-input.d.ts +5 -5
  54. package/2x/cjs/components/virtual-input/virtual-input.js +26 -24
  55. package/2x/cjs/utils/is-node-with-content.d.ts +3 -0
  56. package/2x/cjs/utils/is-node-with-content.js +3 -0
  57. package/2x/cjs/utils/with-default-props.d.ts +7 -0
  58. package/2x/cjs/utils/with-default-props.js +21 -5
  59. package/2x/es/components/calendar-picker/calendar-picker.js +11 -5
  60. package/2x/es/components/calendar-picker-view/calendar-picker-view.d.ts +3 -0
  61. package/2x/es/components/calendar-picker-view/calendar-picker-view.js +40 -19
  62. package/2x/es/components/calendar-picker-view/useSyncScroll.d.ts +2 -0
  63. package/2x/es/components/calendar-picker-view/useSyncScroll.js +33 -0
  64. package/2x/es/components/card/card.css +5 -5
  65. package/2x/es/components/card/card.patch.css +21 -0
  66. package/2x/es/components/center-popup/center-popup.js +45 -42
  67. package/2x/es/components/check-list/check-list.js +15 -11
  68. package/2x/es/components/collapse/collapse.d.ts +9 -1
  69. package/2x/es/components/collapse/collapse.js +26 -28
  70. package/2x/es/components/config-provider/config-provider.d.ts +40 -2
  71. package/2x/es/components/dropdown/context.d.ts +2 -0
  72. package/2x/es/components/dropdown/context.js +2 -0
  73. package/2x/es/components/dropdown/dropdown.d.ts +11 -3
  74. package/2x/es/components/dropdown/dropdown.js +24 -17
  75. package/2x/es/components/dropdown/index.d.ts +1 -0
  76. package/2x/es/components/dropdown/item.d.ts +5 -1
  77. package/2x/es/components/dropdown/item.js +22 -8
  78. package/2x/es/components/form/form-item.d.ts +6 -5
  79. package/2x/es/components/form/form-item.js +24 -16
  80. package/2x/es/components/form/form.d.ts +1 -1
  81. package/2x/es/components/form/index.d.ts +1 -1
  82. package/2x/es/components/input/input.d.ts +3 -1
  83. package/2x/es/components/input/input.js +52 -50
  84. package/2x/es/components/list/list-item.d.ts +6 -2
  85. package/2x/es/components/list/list-item.js +16 -6
  86. package/2x/es/components/nav-bar/nav-bar.d.ts +4 -0
  87. package/2x/es/components/nav-bar/nav-bar.js +21 -16
  88. package/2x/es/components/notice-bar/notice-bar.css +0 -3
  89. package/2x/es/components/notice-bar/notice-bar.d.ts +3 -1
  90. package/2x/es/components/notice-bar/notice-bar.js +29 -24
  91. package/2x/es/components/number-keyboard/number-keyboard.d.ts +1 -1
  92. package/2x/es/components/number-keyboard/number-keyboard.js +13 -12
  93. package/2x/es/components/popup/popup-base-props.d.ts +3 -2
  94. package/2x/es/components/popup/popup-base-props.js +3 -0
  95. package/2x/es/components/popup/popup.js +5 -5
  96. package/2x/es/components/result/result.js +3 -10
  97. package/2x/es/components/result/use-result-icon.d.ts +3 -0
  98. package/2x/es/components/result/use-result-icon.js +29 -0
  99. package/2x/es/components/result-page/result-page.js +3 -10
  100. package/2x/es/components/search-bar/search-bar.d.ts +10 -2
  101. package/2x/es/components/search-bar/search-bar.js +33 -32
  102. package/2x/es/components/toast/toast.d.ts +2 -2
  103. package/2x/es/components/toast/toast.js +3 -3
  104. package/2x/es/components/virtual-input/virtual-input.d.ts +5 -5
  105. package/2x/es/components/virtual-input/virtual-input.js +25 -23
  106. package/2x/es/utils/is-node-with-content.d.ts +3 -0
  107. package/2x/es/utils/is-node-with-content.js +3 -0
  108. package/2x/es/utils/with-default-props.d.ts +7 -0
  109. package/2x/es/utils/with-default-props.js +20 -5
  110. package/2x/package.json +1 -1
  111. package/bundle/antd-mobile.cjs.development.js +1260 -1138
  112. package/bundle/antd-mobile.cjs.js +7 -7
  113. package/bundle/antd-mobile.compatible.umd.js +1 -1
  114. package/bundle/antd-mobile.es.development.js +1260 -1138
  115. package/bundle/antd-mobile.es.js +6853 -6777
  116. package/bundle/antd-mobile.umd.development.js +1260 -1138
  117. package/bundle/antd-mobile.umd.js +7 -7
  118. package/bundle/style.css +1 -1
  119. package/cjs/components/calendar-picker/calendar-picker.js +12 -6
  120. package/cjs/components/calendar-picker-view/calendar-picker-view.d.ts +3 -0
  121. package/cjs/components/calendar-picker-view/calendar-picker-view.js +41 -19
  122. package/cjs/components/calendar-picker-view/useSyncScroll.d.ts +2 -0
  123. package/cjs/components/calendar-picker-view/useSyncScroll.js +39 -0
  124. package/cjs/components/card/card.css +5 -5
  125. package/cjs/components/card/card.patch.css +17 -0
  126. package/cjs/components/center-popup/center-popup.js +46 -43
  127. package/cjs/components/check-list/check-list.js +15 -11
  128. package/cjs/components/collapse/collapse.d.ts +9 -1
  129. package/cjs/components/collapse/collapse.js +26 -28
  130. package/cjs/components/config-provider/config-provider.d.ts +40 -2
  131. package/cjs/components/dropdown/context.d.ts +2 -0
  132. package/cjs/components/dropdown/context.js +10 -0
  133. package/cjs/components/dropdown/dropdown.d.ts +11 -3
  134. package/cjs/components/dropdown/dropdown.js +23 -16
  135. package/cjs/components/dropdown/index.d.ts +1 -0
  136. package/cjs/components/dropdown/item.d.ts +5 -1
  137. package/cjs/components/dropdown/item.js +22 -8
  138. package/cjs/components/form/form-item.d.ts +6 -5
  139. package/cjs/components/form/form-item.js +25 -17
  140. package/cjs/components/form/form.d.ts +1 -1
  141. package/cjs/components/form/index.d.ts +1 -1
  142. package/cjs/components/input/input.d.ts +3 -1
  143. package/cjs/components/input/input.js +53 -51
  144. package/cjs/components/list/list-item.d.ts +6 -2
  145. package/cjs/components/list/list-item.js +16 -6
  146. package/cjs/components/nav-bar/nav-bar.d.ts +4 -0
  147. package/cjs/components/nav-bar/nav-bar.js +20 -15
  148. package/cjs/components/notice-bar/notice-bar.css +0 -2
  149. package/cjs/components/notice-bar/notice-bar.d.ts +3 -1
  150. package/cjs/components/notice-bar/notice-bar.js +30 -25
  151. package/cjs/components/number-keyboard/number-keyboard.d.ts +1 -1
  152. package/cjs/components/number-keyboard/number-keyboard.js +14 -13
  153. package/cjs/components/popup/popup-base-props.d.ts +3 -2
  154. package/cjs/components/popup/popup-base-props.js +4 -0
  155. package/cjs/components/popup/popup.js +5 -5
  156. package/cjs/components/result/result.js +3 -10
  157. package/cjs/components/result/use-result-icon.d.ts +3 -0
  158. package/cjs/components/result/use-result-icon.js +37 -0
  159. package/cjs/components/result-page/result-page.js +3 -10
  160. package/cjs/components/search-bar/search-bar.d.ts +10 -2
  161. package/cjs/components/search-bar/search-bar.js +34 -33
  162. package/cjs/components/toast/toast.css +1 -1
  163. package/cjs/components/toast/toast.d.ts +2 -2
  164. package/cjs/components/toast/toast.js +4 -4
  165. package/cjs/components/virtual-input/virtual-input.d.ts +5 -5
  166. package/cjs/components/virtual-input/virtual-input.js +26 -24
  167. package/cjs/utils/is-node-with-content.d.ts +3 -0
  168. package/cjs/utils/is-node-with-content.js +3 -0
  169. package/cjs/utils/with-default-props.d.ts +7 -0
  170. package/cjs/utils/with-default-props.js +21 -5
  171. package/es/components/calendar-picker/calendar-picker.js +11 -5
  172. package/es/components/calendar-picker-view/calendar-picker-view.d.ts +3 -0
  173. package/es/components/calendar-picker-view/calendar-picker-view.js +40 -19
  174. package/es/components/calendar-picker-view/useSyncScroll.d.ts +2 -0
  175. package/es/components/calendar-picker-view/useSyncScroll.js +33 -0
  176. package/es/components/card/card.css +5 -5
  177. package/es/components/card/card.patch.css +17 -0
  178. package/es/components/center-popup/center-popup.js +45 -42
  179. package/es/components/check-list/check-list.js +15 -11
  180. package/es/components/collapse/collapse.d.ts +9 -1
  181. package/es/components/collapse/collapse.js +26 -28
  182. package/es/components/config-provider/config-provider.d.ts +40 -2
  183. package/es/components/dropdown/context.d.ts +2 -0
  184. package/es/components/dropdown/context.js +2 -0
  185. package/es/components/dropdown/dropdown.d.ts +11 -3
  186. package/es/components/dropdown/dropdown.js +24 -17
  187. package/es/components/dropdown/index.d.ts +1 -0
  188. package/es/components/dropdown/item.d.ts +5 -1
  189. package/es/components/dropdown/item.js +22 -8
  190. package/es/components/form/form-item.d.ts +6 -5
  191. package/es/components/form/form-item.js +24 -16
  192. package/es/components/form/form.d.ts +1 -1
  193. package/es/components/form/index.d.ts +1 -1
  194. package/es/components/input/input.d.ts +3 -1
  195. package/es/components/input/input.js +52 -50
  196. package/es/components/list/list-item.d.ts +6 -2
  197. package/es/components/list/list-item.js +16 -6
  198. package/es/components/nav-bar/nav-bar.d.ts +4 -0
  199. package/es/components/nav-bar/nav-bar.js +21 -16
  200. package/es/components/notice-bar/notice-bar.css +0 -2
  201. package/es/components/notice-bar/notice-bar.d.ts +3 -1
  202. package/es/components/notice-bar/notice-bar.js +29 -24
  203. package/es/components/number-keyboard/number-keyboard.d.ts +1 -1
  204. package/es/components/number-keyboard/number-keyboard.js +13 -12
  205. package/es/components/popup/popup-base-props.d.ts +3 -2
  206. package/es/components/popup/popup-base-props.js +3 -0
  207. package/es/components/popup/popup.js +5 -5
  208. package/es/components/result/result.js +3 -10
  209. package/es/components/result/use-result-icon.d.ts +3 -0
  210. package/es/components/result/use-result-icon.js +29 -0
  211. package/es/components/result-page/result-page.js +3 -10
  212. package/es/components/search-bar/search-bar.d.ts +10 -2
  213. package/es/components/search-bar/search-bar.js +33 -32
  214. package/es/components/toast/toast.css +1 -1
  215. package/es/components/toast/toast.d.ts +2 -2
  216. package/es/components/toast/toast.js +3 -3
  217. package/es/components/virtual-input/virtual-input.d.ts +5 -5
  218. package/es/components/virtual-input/virtual-input.js +25 -23
  219. package/es/utils/is-node-with-content.d.ts +3 -0
  220. package/es/utils/is-node-with-content.js +3 -0
  221. package/es/utils/with-default-props.d.ts +7 -0
  222. package/es/utils/with-default-props.js +20 -5
  223. package/package.json +1 -1
  224. package/umd/antd-mobile.js +1 -1
@@ -1,16 +1,20 @@
1
- import React, { forwardRef, useState, useImperativeHandle, useMemo } from 'react';
2
- import { withNativeProps } from '../../utils/native-props';
3
- import dayjs from 'dayjs';
4
1
  import classNames from 'classnames';
5
- import { mergeProps } from '../../utils/with-default-props';
6
- import { useConfig } from '../config-provider';
7
- import isoWeek from 'dayjs/plugin/isoWeek';
2
+ import dayjs from 'dayjs';
8
3
  import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
4
+ import isoWeek from 'dayjs/plugin/isoWeek';
5
+ import React, { forwardRef, useContext, useImperativeHandle, useMemo, useRef, useState } from 'react';
6
+ import { withNativeProps } from '../../utils/native-props';
9
7
  import { usePropsValue } from '../../utils/use-props-value';
10
- import { convertValueToRange, convertPageToDayjs } from './convert';
8
+ import { mergeProps } from '../../utils/with-default-props';
9
+ import { useConfig } from '../config-provider';
10
+ import { convertPageToDayjs, convertValueToRange } from './convert';
11
+ import useSyncScroll from './useSyncScroll';
11
12
  dayjs.extend(isoWeek);
12
13
  dayjs.extend(isSameOrBefore);
13
14
  const classPrefix = 'adm-calendar-picker-view';
15
+ export const Context = React.createContext({
16
+ visible: false
17
+ });
14
18
  const defaultProps = {
15
19
  weekStartsOn: 'Sunday',
16
20
  defaultValue: null,
@@ -20,6 +24,7 @@ const defaultProps = {
20
24
  };
21
25
  export const CalendarPickerView = forwardRef((p, ref) => {
22
26
  var _a;
27
+ const bodyRef = useRef(null);
23
28
  const today = dayjs();
24
29
  const props = mergeProps(defaultProps, p);
25
30
  const {
@@ -44,6 +49,13 @@ export const CalendarPickerView = forwardRef((p, ref) => {
44
49
  });
45
50
  const [intermediate, setIntermediate] = useState(false);
46
51
  const [current, setCurrent] = useState(() => dayjs(dateRange ? dateRange[0] : today).date(1));
52
+ // =============================== Scroll ===============================
53
+ const context = useContext(Context);
54
+ const scrollTo = useSyncScroll(current, context.visible, bodyRef);
55
+ // ============================== Boundary ==============================
56
+ const maxDay = useMemo(() => props.max ? dayjs(props.max) : current.add(6, 'month'), [props.max, current]);
57
+ const minDay = useMemo(() => props.min ? dayjs(props.min) : current, [props.min, current]);
58
+ // ================================ Refs ================================
47
59
  useImperativeHandle(ref, () => ({
48
60
  jumpTo: pageOrPageGenerator => {
49
61
  let page;
@@ -55,20 +67,23 @@ export const CalendarPickerView = forwardRef((p, ref) => {
55
67
  } else {
56
68
  page = pageOrPageGenerator;
57
69
  }
58
- setCurrent(convertPageToDayjs(page));
70
+ const next = convertPageToDayjs(page);
71
+ setCurrent(next);
72
+ scrollTo(next);
59
73
  },
60
74
  jumpToToday: () => {
61
- setCurrent(dayjs().date(1));
75
+ const next = dayjs().date(1);
76
+ setCurrent(next);
77
+ scrollTo(next);
62
78
  },
63
79
  getDateRange: () => dateRange
64
80
  }));
81
+ // =============================== Render ===============================
65
82
  const header = React.createElement("div", {
66
83
  className: `${classPrefix}-header`
67
84
  }, React.createElement("div", {
68
85
  className: `${classPrefix}-title`
69
86
  }, (_a = props.title) !== null && _a !== void 0 ? _a : locale.Calendar.title));
70
- const maxDay = useMemo(() => props.max ? dayjs(props.max) : current.add(6, 'month'), [props.max, current]);
71
- const minDay = useMemo(() => props.min ? dayjs(props.min) : current, [props.min, current]);
72
87
  function renderBody() {
73
88
  var _a;
74
89
  const cells = [];
@@ -76,13 +91,21 @@ export const CalendarPickerView = forwardRef((p, ref) => {
76
91
  // 遍历月份
77
92
  while (monthIterator.isSameOrBefore(maxDay, 'month')) {
78
93
  const year = monthIterator.year();
79
- const month = monthIterator.month();
94
+ const month = monthIterator.month() + 1;
80
95
  const renderMap = {
81
96
  year,
82
- month: month + 1
97
+ month
83
98
  };
99
+ const yearMonth = `${year}-${month}`;
100
+ // 获取需要预先填充的空格,如果是 7 天则不需要填充
101
+ const presetEmptyCellCount = props.weekStartsOn === 'Monday' ? monthIterator.date(1).isoWeekday() - 1 : monthIterator.date(1).isoWeekday();
102
+ const presetEmptyCells = presetEmptyCellCount == 7 ? null : Array(presetEmptyCellCount).fill(null).map((_, index) => React.createElement("div", {
103
+ key: index,
104
+ className: `${classPrefix}-cell`
105
+ }));
84
106
  cells.push(React.createElement("div", {
85
- key: `${year}-${month}`
107
+ key: yearMonth,
108
+ "data-year-month": yearMonth
86
109
  }, React.createElement("div", {
87
110
  className: `${classPrefix}-title`
88
111
  }, (_a = locale.Calendar.yearAndMonth) === null || _a === void 0 ? void 0 : _a.replace(/\${(.*?)}/g, (_, variable) => {
@@ -90,10 +113,7 @@ export const CalendarPickerView = forwardRef((p, ref) => {
90
113
  return (_a = renderMap[variable]) === null || _a === void 0 ? void 0 : _a.toString();
91
114
  })), React.createElement("div", {
92
115
  className: `${classPrefix}-cells`
93
- }, Array(props.weekStartsOn === 'Monday' ? monthIterator.date(1).isoWeekday() - 1 : monthIterator.date(1).isoWeekday()).fill(null).map((_, index) => React.createElement("div", {
94
- key: index,
95
- className: `${classPrefix}-cell`
96
- })), Array(monthIterator.daysInMonth()).fill(null).map((_, index) => {
116
+ }, presetEmptyCells, Array(monthIterator.daysInMonth()).fill(null).map((_, index) => {
97
117
  var _a;
98
118
  const d = monthIterator.date(index + 1);
99
119
  let isSelect = false;
@@ -191,7 +211,8 @@ export const CalendarPickerView = forwardRef((p, ref) => {
191
211
  return cells;
192
212
  }
193
213
  const body = React.createElement("div", {
194
- className: `${classPrefix}-body`
214
+ className: `${classPrefix}-body`,
215
+ ref: bodyRef
195
216
  }, renderBody());
196
217
  const mark = React.createElement("div", {
197
218
  className: `${classPrefix}-mark`
@@ -0,0 +1,2 @@
1
+ import type { Dayjs } from 'dayjs';
2
+ export default function useSyncScroll(current: Dayjs, visible: boolean, bodyRef: React.RefObject<HTMLDivElement>): (date: Dayjs) => void;
@@ -0,0 +1,33 @@
1
+ import { useEvent } from 'rc-util';
2
+ import { useEffect, useRef } from 'react';
3
+ export default function useSyncScroll(current, visible, bodyRef) {
4
+ const rafRef = useRef();
5
+ const clean = () => {
6
+ if (rafRef.current) {
7
+ cancelAnimationFrame(rafRef.current);
8
+ }
9
+ };
10
+ const scrollTo = useEvent(date => {
11
+ clean();
12
+ rafRef.current = requestAnimationFrame(() => {
13
+ if (bodyRef.current) {
14
+ const yearMonth = date.format('YYYY-M');
15
+ const target = bodyRef.current.querySelector(`[data-year-month="${yearMonth}"]`);
16
+ if (target) {
17
+ // Scroll to the top of view
18
+ target.scrollIntoView({
19
+ block: 'start',
20
+ inline: 'nearest'
21
+ });
22
+ }
23
+ }
24
+ });
25
+ });
26
+ useEffect(() => {
27
+ if (visible && current) {
28
+ scrollTo(current);
29
+ return clean;
30
+ }
31
+ }, [current, visible]);
32
+ return scrollTo;
33
+ }
@@ -1,7 +1,7 @@
1
1
  .adm-card {
2
2
  background: var(--adm-color-background);
3
- border-radius: 16px;
4
- padding: 0 24px;
3
+ border-radius: var(--adm-card-border-radius, 16px);
4
+ padding: 0 var(--adm-card-padding-inline, 24px);
5
5
  }
6
6
 
7
7
  .adm-card-header {
@@ -10,11 +10,11 @@
10
10
  justify-content: space-between;
11
11
  align-items: center;
12
12
  box-sizing: border-box;
13
- padding: 24px 0;
13
+ padding: var(--adm-card-header-padding-block, 24px) 0;
14
14
  }
15
15
 
16
16
  .adm-card-header:not(:last-child) {
17
- border-bottom: solid 1px var(--adm-color-border);
17
+ border-bottom: solid var(--adm-card-header-border-width, 1px) var(--adm-card-header-border-color, var(--adm-color-border));
18
18
  }
19
19
 
20
20
  .adm-card-header-title {
@@ -24,5 +24,5 @@
24
24
  }
25
25
 
26
26
  .adm-card-body {
27
- padding: 24px 0;
27
+ padding: var(--adm-card-body-padding-block, 24px) 0;
28
28
  }
@@ -0,0 +1,21 @@
1
+ .adm-card {
2
+ background: #fff;
3
+ border-radius: 16px;
4
+ padding: 0 24px;
5
+ }
6
+
7
+ .adm-card-header {
8
+ padding: 24px 0;
9
+ }
10
+
11
+ .adm-card-header:not(:last-child) {
12
+ border-bottom: solid 1px #eee;
13
+ }
14
+
15
+ .adm-card-header-title {
16
+ font-size: 30px;
17
+ }
18
+
19
+ .adm-card-body {
20
+ padding: 24px 0;
21
+ }
@@ -1,27 +1,30 @@
1
- import React, { useRef, useState } from 'react';
2
- import { renderToContainer } from '../../utils/render-to-container';
3
- import Mask from '../mask';
4
- import { withStopPropagation } from '../../utils/with-stop-propagation';
5
- import { mergeProps } from '../../utils/with-default-props';
6
- import { useIsomorphicLayoutEffect, useUnmountedRef } from 'ahooks';
7
1
  import { animated, useSpring } from '@react-spring/web';
8
- import { useInnerVisible } from '../../utils/use-inner-visible';
2
+ import { useIsomorphicLayoutEffect, useUnmountedRef } from 'ahooks';
9
3
  import classNames from 'classnames';
4
+ import React, { useRef, useState } from 'react';
10
5
  import { withNativeProps } from '../../utils/native-props';
6
+ import { renderToContainer } from '../../utils/render-to-container';
11
7
  import { ShouldRender } from '../../utils/should-render';
8
+ import { useInnerVisible } from '../../utils/use-inner-visible';
12
9
  import { useLockScroll } from '../../utils/use-lock-scroll';
13
- import { CloseOutline } from 'antd-mobile-icons';
10
+ import { mergeProps } from '../../utils/with-default-props';
11
+ import { withStopPropagation } from '../../utils/with-stop-propagation';
12
+ import { useConfig } from '../config-provider';
13
+ import Mask from '../mask';
14
14
  import { defaultPopupBaseProps } from '../popup/popup-base-props';
15
15
  const classPrefix = 'adm-center-popup';
16
16
  const defaultProps = Object.assign(Object.assign({}, defaultPopupBaseProps), {
17
17
  getContainer: null
18
18
  });
19
- export const CenterPopup = p => {
20
- const props = mergeProps(defaultProps, p);
19
+ export const CenterPopup = props => {
20
+ const {
21
+ popup: componentConfig = {}
22
+ } = useConfig();
23
+ const mergedProps = mergeProps(defaultProps, componentConfig, props);
21
24
  const unmountedRef = useUnmountedRef();
22
25
  const style = useSpring({
23
- scale: props.visible ? 1 : 0.8,
24
- opacity: props.visible ? 1 : 0,
26
+ scale: mergedProps.visible ? 1 : 0.8,
27
+ opacity: mergedProps.visible ? 1 : 0,
25
28
  config: {
26
29
  mass: 1.2,
27
30
  tension: 200,
@@ -31,67 +34,67 @@ export const CenterPopup = p => {
31
34
  onRest: () => {
32
35
  var _a, _b;
33
36
  if (unmountedRef.current) return;
34
- setActive(props.visible);
35
- if (props.visible) {
36
- (_a = props.afterShow) === null || _a === void 0 ? void 0 : _a.call(props);
37
+ setActive(mergedProps.visible);
38
+ if (mergedProps.visible) {
39
+ (_a = mergedProps.afterShow) === null || _a === void 0 ? void 0 : _a.call(mergedProps);
37
40
  } else {
38
- (_b = props.afterClose) === null || _b === void 0 ? void 0 : _b.call(props);
41
+ (_b = mergedProps.afterClose) === null || _b === void 0 ? void 0 : _b.call(mergedProps);
39
42
  }
40
43
  }
41
44
  });
42
- const [active, setActive] = useState(props.visible);
45
+ const [active, setActive] = useState(mergedProps.visible);
43
46
  useIsomorphicLayoutEffect(() => {
44
- if (props.visible) {
47
+ if (mergedProps.visible) {
45
48
  setActive(true);
46
49
  }
47
- }, [props.visible]);
50
+ }, [mergedProps.visible]);
48
51
  const ref = useRef(null);
49
- useLockScroll(ref, props.disableBodyScroll && active);
50
- const maskVisible = useInnerVisible(active && props.visible);
52
+ useLockScroll(ref, mergedProps.disableBodyScroll && active);
53
+ const maskVisible = useInnerVisible(active && mergedProps.visible);
51
54
  const body = React.createElement("div", {
52
- className: classNames(`${classPrefix}-body`, props.bodyClassName),
53
- style: props.bodyStyle
54
- }, props.children);
55
- const node = withStopPropagation(props.stopPropagation, withNativeProps(props, React.createElement("div", {
55
+ className: classNames(`${classPrefix}-body`, mergedProps.bodyClassName),
56
+ style: mergedProps.bodyStyle
57
+ }, mergedProps.children);
58
+ const node = withStopPropagation(mergedProps.stopPropagation, withNativeProps(mergedProps, React.createElement("div", {
56
59
  className: classPrefix,
57
60
  style: {
58
61
  display: active ? undefined : 'none',
59
62
  pointerEvents: active ? undefined : 'none'
60
63
  }
61
- }, props.mask && React.createElement(Mask, {
64
+ }, mergedProps.mask && React.createElement(Mask, {
62
65
  visible: maskVisible,
63
- forceRender: props.forceRender,
64
- destroyOnClose: props.destroyOnClose,
66
+ forceRender: mergedProps.forceRender,
67
+ destroyOnClose: mergedProps.destroyOnClose,
65
68
  onMaskClick: e => {
66
69
  var _a, _b;
67
- (_a = props.onMaskClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
68
- if (props.closeOnMaskClick) {
69
- (_b = props.onClose) === null || _b === void 0 ? void 0 : _b.call(props);
70
+ (_a = mergedProps.onMaskClick) === null || _a === void 0 ? void 0 : _a.call(mergedProps, e);
71
+ if (mergedProps.closeOnMaskClick) {
72
+ (_b = mergedProps.onClose) === null || _b === void 0 ? void 0 : _b.call(mergedProps);
70
73
  }
71
74
  },
72
- style: props.maskStyle,
73
- className: classNames(`${classPrefix}-mask`, props.maskClassName),
75
+ style: mergedProps.maskStyle,
76
+ className: classNames(`${classPrefix}-mask`, mergedProps.maskClassName),
74
77
  disableBodyScroll: false,
75
- stopPropagation: props.stopPropagation
78
+ stopPropagation: mergedProps.stopPropagation
76
79
  }), React.createElement("div", {
77
80
  className: `${classPrefix}-wrap`,
78
- role: props.role,
79
- "aria-label": props['aria-label']
81
+ role: mergedProps.role,
82
+ "aria-label": mergedProps['aria-label']
80
83
  }, React.createElement(animated.div, {
81
84
  style: Object.assign(Object.assign({}, style), {
82
85
  pointerEvents: style.opacity.to(v => v === 1 ? 'unset' : 'none')
83
86
  }),
84
87
  ref: ref
85
- }, props.showCloseButton && React.createElement("a", {
88
+ }, mergedProps.showCloseButton && React.createElement("a", {
86
89
  className: classNames(`${classPrefix}-close`, 'adm-plain-anchor'),
87
90
  onClick: () => {
88
91
  var _a;
89
- (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
92
+ (_a = mergedProps.onClose) === null || _a === void 0 ? void 0 : _a.call(mergedProps);
90
93
  }
91
- }, React.createElement(CloseOutline, null)), body)))));
94
+ }, mergedProps.closeIcon), body)))));
92
95
  return React.createElement(ShouldRender, {
93
96
  active: active,
94
- forceRender: props.forceRender,
95
- destroyOnClose: props.destroyOnClose
96
- }, renderToContainer(props.getContainer, node));
97
+ forceRender: mergedProps.forceRender,
98
+ destroyOnClose: mergedProps.destroyOnClose
99
+ }, renderToContainer(mergedProps.getContainer, node));
97
100
  };
@@ -1,21 +1,25 @@
1
+ import { CheckOutline } from 'antd-mobile-icons';
1
2
  import React from 'react';
2
3
  import { withNativeProps } from '../../utils/native-props';
3
- import List from '../list';
4
+ import { usePropsValue } from '../../utils/use-props-value';
4
5
  import { mergeProps } from '../../utils/with-default-props';
6
+ import { useConfig } from '../config-provider';
7
+ import List from '../list';
5
8
  import { CheckListContext } from './context';
6
- import { usePropsValue } from '../../utils/use-props-value';
7
- import { CheckOutline } from 'antd-mobile-icons';
8
9
  const classPrefix = 'adm-check-list';
9
10
  const defaultProps = {
10
11
  multiple: false,
11
12
  defaultValue: [],
12
13
  activeIcon: React.createElement(CheckOutline, null)
13
14
  };
14
- export const CheckList = p => {
15
- const props = mergeProps(defaultProps, p);
16
- const [value, setValue] = usePropsValue(props);
15
+ export const CheckList = props => {
16
+ const {
17
+ checkList: componentConfig = {}
18
+ } = useConfig();
19
+ const mergedProps = mergeProps(defaultProps, componentConfig, props);
20
+ const [value, setValue] = usePropsValue(mergedProps);
17
21
  function check(val) {
18
- if (props.multiple) {
22
+ if (mergedProps.multiple) {
19
23
  setValue([...value, val]);
20
24
  } else {
21
25
  setValue([val]);
@@ -29,7 +33,7 @@ export const CheckList = p => {
29
33
  extra,
30
34
  disabled,
31
35
  readOnly
32
- } = props;
36
+ } = mergedProps;
33
37
  return React.createElement(CheckListContext.Provider, {
34
38
  value: {
35
39
  value,
@@ -40,8 +44,8 @@ export const CheckList = p => {
40
44
  disabled,
41
45
  readOnly
42
46
  }
43
- }, withNativeProps(props, React.createElement(List, {
44
- mode: props.mode,
47
+ }, withNativeProps(mergedProps, React.createElement(List, {
48
+ mode: mergedProps.mode,
45
49
  className: classPrefix
46
- }, props.children)));
50
+ }, mergedProps.children)));
47
51
  };
@@ -8,14 +8,22 @@ export declare type CollapsePanelProps = {
8
8
  forceRender?: boolean;
9
9
  destroyOnClose?: boolean;
10
10
  onClick?: (event: React.MouseEvent<Element, MouseEvent>) => void;
11
- arrow?: ReactNode | ((active: boolean) => ReactNode);
11
+ arrowIcon?: ReactNode | ((active: boolean) => ReactNode);
12
12
  children?: ReactNode;
13
+ /**
14
+ * @deprecated use `arrowIcon` instead
15
+ */
16
+ arrow?: ReactNode | ((active: boolean) => ReactNode);
13
17
  } & NativeProps;
14
18
  export declare const CollapsePanel: FC<CollapsePanelProps>;
15
19
  declare type ValueProps<T> = {
16
20
  activeKey?: T;
17
21
  defaultActiveKey?: T;
18
22
  onChange?: (activeKey: T) => void;
23
+ arrowIcon?: ReactNode | ((active: boolean) => ReactNode);
24
+ /**
25
+ * @deprecated use `arrowIcon` instead
26
+ */
19
27
  arrow?: ReactNode | ((active: boolean) => ReactNode);
20
28
  };
21
29
  export declare type CollapseProps = (({
@@ -9,6 +9,8 @@ import { traverseReactNode } from '../../utils/traverse-react-node';
9
9
  import { useIsomorphicUpdateLayoutEffect } from '../../utils/use-isomorphic-update-layout-effect';
10
10
  import { observe } from '../../utils/use-mutation-effect';
11
11
  import { usePropsValue } from '../../utils/use-props-value';
12
+ import { mergeProp, mergeProps } from '../../utils/with-default-props';
13
+ import { useConfig } from '../config-provider';
12
14
  import List from '../list';
13
15
  const classPrefix = `adm-collapse`;
14
16
  export const CollapsePanel = () => {
@@ -95,8 +97,12 @@ const CollapsePanelContent = props => {
95
97
  }, React.createElement(List.Item, null, shouldRender && props.children)));
96
98
  };
97
99
  export const Collapse = props => {
100
+ const {
101
+ collapse: componentConfig = {}
102
+ } = useConfig();
103
+ const mergedProps = mergeProps(componentConfig, props);
98
104
  const panels = [];
99
- traverseReactNode(props.children, child => {
105
+ traverseReactNode(mergedProps.children, child => {
100
106
  if (!isValidElement(child)) return;
101
107
  const key = child.key;
102
108
  if (typeof key !== 'string') return;
@@ -104,11 +110,11 @@ export const Collapse = props => {
104
110
  });
105
111
  const handlePropsValue = () => {
106
112
  var _a;
107
- if (!props.accordion) {
113
+ if (!mergedProps.accordion) {
108
114
  return {
109
- value: props.activeKey,
110
- defaultValue: (_a = props.defaultActiveKey) !== null && _a !== void 0 ? _a : [],
111
- onChange: props.onChange
115
+ value: mergedProps.activeKey,
116
+ defaultValue: (_a = mergedProps.defaultActiveKey) !== null && _a !== void 0 ? _a : [],
117
+ onChange: mergedProps.onChange
112
118
  };
113
119
  }
114
120
  const initValue = {
@@ -116,29 +122,29 @@ export const Collapse = props => {
116
122
  defaultValue: [],
117
123
  onChange: v => {
118
124
  var _a, _b;
119
- (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, (_b = v[0]) !== null && _b !== void 0 ? _b : null);
125
+ (_a = mergedProps.onChange) === null || _a === void 0 ? void 0 : _a.call(mergedProps, (_b = v[0]) !== null && _b !== void 0 ? _b : null);
120
126
  }
121
127
  };
122
- if (props.activeKey === undefined) {
128
+ if (mergedProps.activeKey === undefined) {
123
129
  initValue.value = undefined;
124
- } else if (props.activeKey !== null) {
125
- initValue.value = [props.activeKey];
130
+ } else if (mergedProps.activeKey !== null) {
131
+ initValue.value = [mergedProps.activeKey];
126
132
  }
127
- if (![null, undefined].includes(props.defaultActiveKey)) {
128
- initValue.defaultValue = [props.defaultActiveKey];
133
+ if (![null, undefined].includes(mergedProps.defaultActiveKey)) {
134
+ initValue.defaultValue = [mergedProps.defaultActiveKey];
129
135
  }
130
136
  return initValue;
131
137
  };
132
138
  const [activeKey, setActiveKey] = usePropsValue(handlePropsValue());
133
139
  const activeKeyList = activeKey === null ? [] : Array.isArray(activeKey) ? activeKey : [activeKey];
134
- return withNativeProps(props, React.createElement("div", {
140
+ return withNativeProps(mergedProps, React.createElement("div", {
135
141
  className: classPrefix
136
142
  }, React.createElement(List, null, panels.map(panel => {
137
143
  const key = panel.key;
138
144
  const active = activeKeyList.includes(key);
139
145
  function handleClick(event) {
140
146
  var _a, _b;
141
- if (props.accordion) {
147
+ if (mergedProps.accordion) {
142
148
  if (active) {
143
149
  setActiveKey([]);
144
150
  } else {
@@ -153,27 +159,19 @@ export const Collapse = props => {
153
159
  }
154
160
  (_b = (_a = panel.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
155
161
  }
156
- const renderArrow = () => {
157
- let arrow = React.createElement(DownOutline, null);
158
- if (props.arrow !== undefined) {
159
- arrow = props.arrow;
160
- }
161
- if (panel.props.arrow !== undefined) {
162
- arrow = panel.props.arrow;
163
- }
164
- return typeof arrow === 'function' ? arrow(active) : React.createElement("div", {
165
- className: classNames(`${classPrefix}-arrow`, {
166
- [`${classPrefix}-arrow-active`]: active
167
- })
168
- }, arrow);
169
- };
162
+ const arrow = mergeProp(React.createElement(DownOutline, null), mergedProps.arrow, mergedProps.arrowIcon, panel.props.arrow, panel.props.arrowIcon);
163
+ const arrowIcon = typeof arrow === 'function' ? arrow(active) : React.createElement("div", {
164
+ className: classNames(`${classPrefix}-arrow`, {
165
+ [`${classPrefix}-arrow-active`]: active
166
+ })
167
+ }, arrow);
170
168
  return React.createElement(React.Fragment, {
171
169
  key: key
172
170
  }, withNativeProps(panel.props, React.createElement(List.Item, {
173
171
  className: `${classPrefix}-panel-header`,
174
172
  onClick: handleClick,
175
173
  disabled: panel.props.disabled,
176
- arrow: renderArrow()
174
+ arrowIcon: arrowIcon
177
175
  }, panel.props.title)), React.createElement(CollapsePanelContent, {
178
176
  visible: active,
179
177
  forceRender: !!panel.props.forceRender,
@@ -1,14 +1,52 @@
1
- import type { FC, ReactNode } from 'react';
1
+ import { FC, ReactNode } from 'react';
2
2
  import { Locale } from '../../locales/base';
3
3
  declare type Config = {
4
4
  locale: Locale;
5
+ checkList?: {
6
+ activeIcon?: ReactNode;
7
+ };
8
+ collapse?: {
9
+ arrowIcon?: ReactNode | ((active: boolean) => ReactNode);
10
+ };
11
+ dropdown?: {
12
+ arrowIcon?: ReactNode;
13
+ };
14
+ form?: {
15
+ helpIcon?: ReactNode;
16
+ };
17
+ input?: {
18
+ clearIcon?: ReactNode;
19
+ };
20
+ list?: {
21
+ arrowIcon?: ReactNode;
22
+ };
23
+ navBar?: {
24
+ backIcon?: ReactNode;
25
+ };
26
+ noticeBar?: {
27
+ icon?: ReactNode;
28
+ closeIcon?: ReactNode;
29
+ };
30
+ popup?: {
31
+ closeIcon?: ReactNode;
32
+ };
33
+ result?: {
34
+ successIcon?: ReactNode;
35
+ errorIcon?: ReactNode;
36
+ infoIcon?: ReactNode;
37
+ waitingIcon?: ReactNode;
38
+ warningIcon?: ReactNode;
39
+ };
40
+ searchBar?: {
41
+ searchIcon?: ReactNode;
42
+ };
5
43
  };
6
44
  export declare const defaultConfigRef: {
7
45
  current: Config;
8
46
  };
9
47
  export declare function setDefaultConfig(config: Config): void;
10
48
  export declare function getDefaultConfig(): Config;
11
- export declare type ConfigProviderProps = Config & {
49
+ export declare type ConfigProviderProps = Partial<Config> & {
12
50
  children?: ReactNode;
13
51
  };
14
52
  export declare const ConfigProvider: FC<ConfigProviderProps>;
@@ -0,0 +1,2 @@
1
+ import React from 'react';
2
+ export declare const IconContext: React.Context<React.ReactNode>;
@@ -0,0 +1,2 @@
1
+ import React from 'react';
2
+ export const IconContext = React.createContext(null);
@@ -1,13 +1,17 @@
1
- import React from 'react';
2
1
  import type { ReactNode } from 'react';
3
- import { PopupProps } from '../popup';
2
+ import React from 'react';
4
3
  import { NativeProps } from '../../utils/native-props';
4
+ import { PopupProps } from '../popup';
5
5
  export declare type DropdownProps = {
6
6
  activeKey?: string | null;
7
7
  defaultActiveKey?: string | null;
8
8
  closeOnMaskClick?: boolean;
9
9
  closeOnClickAway?: boolean;
10
10
  onChange?: (key: string | null) => void;
11
+ arrowIcon?: ReactNode;
12
+ /**
13
+ * @deprecated use `arrowIcon` instead
14
+ */
11
15
  arrow?: ReactNode;
12
16
  getContainer?: PopupProps['getContainer'];
13
17
  } & NativeProps;
@@ -20,6 +24,10 @@ declare const Dropdown: React.ForwardRefExoticComponent<{
20
24
  closeOnMaskClick?: boolean | undefined;
21
25
  closeOnClickAway?: boolean | undefined;
22
26
  onChange?: ((key: string | null) => void) | undefined;
27
+ arrowIcon?: ReactNode;
28
+ /**
29
+ * @deprecated use `arrowIcon` instead
30
+ */
23
31
  arrow?: ReactNode;
24
32
  getContainer?: PopupProps['getContainer'];
25
33
  } & {
@@ -27,6 +35,6 @@ declare const Dropdown: React.ForwardRefExoticComponent<{
27
35
  style?: (React.CSSProperties & Partial<Record<never, string>>) | undefined;
28
36
  tabIndex?: number | undefined;
29
37
  } & React.AriaAttributes & {
30
- children?: React.ReactNode;
38
+ children?: ReactNode;
31
39
  } & React.RefAttributes<DropdownRef>>;
32
40
  export default Dropdown;