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,33 +1,38 @@
1
- import React from 'react';
2
- import classNames from 'classnames';
3
1
  import { LeftOutline } from 'antd-mobile-icons';
2
+ import classNames from 'classnames';
3
+ import React from 'react';
4
4
  import { withNativeProps } from '../../utils/native-props';
5
- import { mergeProps } from '../../utils/with-default-props';
5
+ import { mergeProp, mergeProps } from '../../utils/with-default-props';
6
+ import { useConfig } from '../config-provider';
6
7
  const classPrefix = `adm-nav-bar`;
7
- const defaultProps = {
8
- backArrow: true
9
- };
10
- export const NavBar = p => {
11
- const props = mergeProps(defaultProps, p);
8
+ const defaultBackIcon = React.createElement(LeftOutline, null);
9
+ export const NavBar = props => {
10
+ const {
11
+ navBar: componentConfig = {}
12
+ } = useConfig();
13
+ const mergedProps = mergeProps(componentConfig, props);
12
14
  const {
13
15
  back,
16
+ backIcon,
14
17
  backArrow
15
- } = props;
16
- return withNativeProps(props, React.createElement("div", {
18
+ } = mergedProps;
19
+ const mergedDefaultBackIcon = componentConfig.backIcon || defaultBackIcon;
20
+ const mergedBackIcon = mergeProp(defaultBackIcon, componentConfig.backIcon, backArrow === true ? mergedDefaultBackIcon : backArrow, backIcon === true ? mergedDefaultBackIcon : backIcon);
21
+ return withNativeProps(mergedProps, React.createElement("div", {
17
22
  className: classNames(classPrefix)
18
23
  }, React.createElement("div", {
19
24
  className: `${classPrefix}-left`,
20
25
  role: 'button'
21
26
  }, back !== null && React.createElement("div", {
22
27
  className: `${classPrefix}-back`,
23
- onClick: props.onBack
24
- }, backArrow && React.createElement("span", {
28
+ onClick: mergedProps.onBack
29
+ }, mergedBackIcon && React.createElement("span", {
25
30
  className: `${classPrefix}-back-arrow`
26
- }, backArrow === true ? React.createElement(LeftOutline, null) : backArrow), React.createElement("span", {
31
+ }, mergedBackIcon), React.createElement("span", {
27
32
  "aria-hidden": 'true'
28
- }, back)), props.left), React.createElement("div", {
33
+ }, back)), mergedProps.left), React.createElement("div", {
29
34
  className: `${classPrefix}-title`
30
- }, props.children), React.createElement("div", {
35
+ }, mergedProps.children), React.createElement("div", {
31
36
  className: `${classPrefix}-right`
32
- }, props.right)));
37
+ }, mergedProps.right)));
33
38
  };
@@ -70,8 +70,6 @@
70
70
  display: flex;
71
71
  align-items: center;
72
72
  justify-content: center;
73
- }
74
- .adm-notice-bar-close-icon {
75
73
  font-size: var(--adm-font-size-10);
76
74
  }
77
75
  .adm-notice-bar-wrap {
@@ -1,5 +1,5 @@
1
- import React from 'react';
2
1
  import type { ReactNode } from 'react';
2
+ import React from 'react';
3
3
  import { NativeProps } from '../../utils/native-props';
4
4
  export declare type NoticeBarProps = {
5
5
  /** The type of the NoticeBar */
@@ -12,6 +12,8 @@ export declare type NoticeBarProps = {
12
12
  content: ReactNode;
13
13
  /** Whether it can be closed */
14
14
  closeable?: boolean;
15
+ /** Custom close icon */
16
+ closeIcon?: ReactNode;
15
17
  /** Callback when closed */
16
18
  onClose?: () => void;
17
19
  /** Event when click */
@@ -1,29 +1,36 @@
1
- import React, { useState, useRef, memo } from 'react';
2
- import classNames from 'classnames';
3
- import { CloseOutline, SoundOutline } from 'antd-mobile-icons';
4
1
  import { useTimeout } from 'ahooks';
5
- import { mergeProps } from '../../utils/with-default-props';
2
+ import { CloseOutline, SoundOutline } from 'antd-mobile-icons';
3
+ import classNames from 'classnames';
4
+ import React, { memo, useRef, useState } from 'react';
6
5
  import { withNativeProps } from '../../utils/native-props';
7
- import { useResizeEffect } from '../../utils/use-resize-effect';
8
6
  import { useMutationEffect } from '../../utils/use-mutation-effect';
7
+ import { useResizeEffect } from '../../utils/use-resize-effect';
8
+ import { mergeProp, mergeProps } from '../../utils/with-default-props';
9
+ import { useConfig } from '../config-provider';
9
10
  const classPrefix = `adm-notice-bar`;
10
11
  const defaultProps = {
11
12
  color: 'default',
12
13
  delay: 2000,
13
14
  speed: 50,
14
- wrap: false,
15
- icon: React.createElement(SoundOutline, null)
15
+ icon: React.createElement(SoundOutline, null),
16
+ wrap: false
16
17
  };
17
- export const NoticeBar = memo(p => {
18
- const props = mergeProps(defaultProps, p);
18
+ export const NoticeBar = memo(props => {
19
+ const {
20
+ noticeBar: componentConfig = {}
21
+ } = useConfig();
22
+ const mergedProps = mergeProps(defaultProps, componentConfig, props);
23
+ const closeIcon = mergeProp(React.createElement(CloseOutline, {
24
+ className: `${classPrefix}-close-icon`
25
+ }), componentConfig.closeIcon, props.closeIcon);
19
26
  const containerRef = useRef(null);
20
27
  const textRef = useRef(null);
21
28
  const [visible, setVisible] = useState(true);
22
- const speed = props.speed;
29
+ const speed = mergedProps.speed;
23
30
  const delayLockRef = useRef(true);
24
31
  const animatingRef = useRef(false);
25
32
  function start() {
26
- if (delayLockRef.current || props.wrap) return;
33
+ if (delayLockRef.current || mergedProps.wrap) return;
27
34
  const container = containerRef.current;
28
35
  const text = textRef.current;
29
36
  if (!container || !text) return;
@@ -49,7 +56,7 @@ export const NoticeBar = memo(p => {
49
56
  useTimeout(() => {
50
57
  delayLockRef.current = false;
51
58
  start();
52
- }, props.delay);
59
+ }, mergedProps.delay);
53
60
  useResizeEffect(() => {
54
61
  start();
55
62
  }, containerRef);
@@ -61,14 +68,14 @@ export const NoticeBar = memo(p => {
61
68
  characterData: true
62
69
  });
63
70
  if (!visible) return null;
64
- return withNativeProps(props, React.createElement("div", {
65
- className: classNames(classPrefix, `${classPrefix}-${props.color}`, {
66
- [`${classPrefix}-wrap`]: props.wrap
71
+ return withNativeProps(mergedProps, React.createElement("div", {
72
+ className: classNames(classPrefix, `${classPrefix}-${mergedProps.color}`, {
73
+ [`${classPrefix}-wrap`]: mergedProps.wrap
67
74
  }),
68
- onClick: props.onClick
69
- }, props.icon && React.createElement("span", {
75
+ onClick: mergedProps.onClick
76
+ }, mergedProps.icon && React.createElement("span", {
70
77
  className: `${classPrefix}-left`
71
- }, props.icon), React.createElement("span", {
78
+ }, mergedProps.icon), React.createElement("span", {
72
79
  ref: containerRef,
73
80
  className: `${classPrefix}-content`
74
81
  }, React.createElement("span", {
@@ -78,16 +85,14 @@ export const NoticeBar = memo(p => {
78
85
  },
79
86
  ref: textRef,
80
87
  className: `${classPrefix}-content-inner`
81
- }, props.content)), (props.closeable || props.extra) && React.createElement("span", {
88
+ }, mergedProps.content)), (mergedProps.closeable || mergedProps.extra) && React.createElement("span", {
82
89
  className: `${classPrefix}-right`
83
- }, props.extra, props.closeable && React.createElement("div", {
90
+ }, mergedProps.extra, mergedProps.closeable && React.createElement("div", {
84
91
  className: `${classPrefix}-close`,
85
92
  onClick: () => {
86
93
  var _a;
87
94
  setVisible(false);
88
- (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
95
+ (_a = mergedProps.onClose) === null || _a === void 0 ? void 0 : _a.call(mergedProps);
89
96
  }
90
- }, React.createElement(CloseOutline, {
91
- className: `${classPrefix}-close-icon`
92
- })))));
97
+ }, closeIcon))));
93
98
  });
@@ -1,6 +1,6 @@
1
1
  import type { FC } from 'react';
2
- import { PopupProps } from '../popup';
3
2
  import { NativeProps } from '../../utils/native-props';
3
+ import { PopupProps } from '../popup';
4
4
  export declare type NumberKeyboardProps = {
5
5
  visible?: boolean;
6
6
  title?: string;
@@ -1,13 +1,13 @@
1
- import React, { useRef, useMemo } from 'react';
2
- import classNames from 'classnames';
1
+ import { useMemoizedFn } from 'ahooks';
3
2
  import { DownOutline, TextDeletionOutline } from 'antd-mobile-icons';
4
- import { mergeProps } from '../../utils/with-default-props';
3
+ import classNames from 'classnames';
4
+ import React, { useMemo, useRef } from 'react';
5
+ import { withNativeProps } from '../../utils/native-props';
5
6
  import { shuffle } from '../../utils/shuffle';
7
+ import { mergeProps } from '../../utils/with-default-props';
8
+ import { useConfig } from '../config-provider';
6
9
  import Popup from '../popup';
7
- import { withNativeProps } from '../../utils/native-props';
8
10
  import SafeArea from '../safe-area';
9
- import { useMemoizedFn } from 'ahooks';
10
- import { useConfig } from '../config-provider';
11
11
  const classPrefix = 'adm-number-keyboard';
12
12
  const defaultProps = {
13
13
  defaultVisible: false,
@@ -57,13 +57,13 @@ export const NumberKeyboard = p => {
57
57
  var _a;
58
58
  (_a = props.onDelete) === null || _a === void 0 ? void 0 : _a.call(props);
59
59
  });
60
- const onBackspacePressStart = () => {
60
+ const startContinueClear = () => {
61
61
  timeoutRef.current = window.setTimeout(() => {
62
62
  onDelete();
63
63
  intervalRef.current = window.setInterval(onDelete, 150);
64
64
  }, 700);
65
65
  };
66
- const onBackspacePressEnd = () => {
66
+ const stopContinueClear = () => {
67
67
  clearTimeout(timeoutRef.current);
68
68
  clearInterval(intervalRef.current);
69
69
  };
@@ -122,14 +122,15 @@ export const NumberKeyboard = p => {
122
122
  key: key,
123
123
  className: className,
124
124
  onTouchStart: () => {
125
+ stopContinueClear();
125
126
  if (key === 'BACKSPACE') {
126
- onBackspacePressStart();
127
+ startContinueClear();
127
128
  }
128
129
  },
129
130
  onTouchEnd: e => {
130
131
  onKeyPress(e, key);
131
132
  if (key === 'BACKSPACE') {
132
- onBackspacePressEnd();
133
+ stopContinueClear();
133
134
  }
134
135
  }
135
136
  }, ariaProps), key === 'BACKSPACE' ? React.createElement(TextDeletionOutline, null) : key);
@@ -161,11 +162,11 @@ export const NumberKeyboard = p => {
161
162
  }, React.createElement("div", {
162
163
  className: `${classPrefix}-key ${classPrefix}-key-extra ${classPrefix}-key-bs`,
163
164
  onTouchStart: () => {
164
- onBackspacePressStart();
165
+ startContinueClear();
165
166
  },
166
167
  onTouchEnd: e => {
167
168
  onKeyPress(e, 'BACKSPACE');
168
- onBackspacePressEnd();
169
+ stopContinueClear();
169
170
  },
170
171
  onContextMenu: e => {
171
172
  // Long press should not trigger native context menu
@@ -1,5 +1,4 @@
1
- import React from 'react';
2
- import type { CSSProperties } from 'react';
1
+ import React, { CSSProperties, ReactNode } from 'react';
3
2
  import { GetContainer } from '../../utils/render-to-container';
4
3
  import { MaskProps } from '../mask';
5
4
  import { PropagationEvent } from '../../utils/with-stop-propagation';
@@ -9,6 +8,7 @@ export declare type PopupBaseProps = {
9
8
  bodyClassName?: string;
10
9
  bodyStyle?: CSSProperties;
11
10
  closeOnMaskClick?: boolean;
11
+ closeIcon?: ReactNode;
12
12
  destroyOnClose?: boolean;
13
13
  disableBodyScroll?: boolean;
14
14
  forceRender?: boolean;
@@ -25,6 +25,7 @@ export declare type PopupBaseProps = {
25
25
  };
26
26
  export declare const defaultPopupBaseProps: {
27
27
  closeOnMaskClick: boolean;
28
+ closeIcon: React.JSX.Element;
28
29
  destroyOnClose: boolean;
29
30
  disableBodyScroll: boolean;
30
31
  forceRender: boolean;
@@ -1,5 +1,8 @@
1
+ import React from 'react';
2
+ import { CloseOutline } from 'antd-mobile-icons';
1
3
  export const defaultPopupBaseProps = {
2
4
  closeOnMaskClick: false,
5
+ closeIcon: React.createElement(CloseOutline, null),
3
6
  destroyOnClose: false,
4
7
  disableBodyScroll: true,
5
8
  forceRender: false,
@@ -9,7 +9,6 @@ import { renderToContainer } from '../../utils/render-to-container';
9
9
  import { useSpring, animated } from '@react-spring/web';
10
10
  import { withStopPropagation } from '../../utils/with-stop-propagation';
11
11
  import { ShouldRender } from '../../utils/should-render';
12
- import { CloseOutline } from 'antd-mobile-icons';
13
12
  import { defaultPopupBaseProps } from './popup-base-props';
14
13
  import { useInnerVisible } from '../../utils/use-inner-visible';
15
14
  import { useConfig } from '../config-provider';
@@ -20,11 +19,12 @@ const defaultProps = Object.assign(Object.assign({}, defaultPopupBaseProps), {
20
19
  position: 'bottom'
21
20
  });
22
21
  export const Popup = p => {
23
- const props = mergeProps(defaultProps, p);
24
- const bodyCls = classNames(`${classPrefix}-body`, props.bodyClassName, `${classPrefix}-body-position-${props.position}`);
25
22
  const {
26
- locale
23
+ locale,
24
+ popup: componentConfig = {}
27
25
  } = useConfig();
26
+ const props = mergeProps(defaultProps, componentConfig, p);
27
+ const bodyCls = classNames(`${classPrefix}-body`, props.bodyClassName, `${classPrefix}-body-position-${props.position}`);
28
28
  const [active, setActive] = useState(props.visible);
29
29
  const ref = useRef(null);
30
30
  useLockScroll(ref, props.disableBodyScroll && active ? 'strict' : false);
@@ -119,7 +119,7 @@ export const Popup = p => {
119
119
  },
120
120
  role: 'button',
121
121
  "aria-label": locale.common.close
122
- }, React.createElement(CloseOutline, null)), props.children))));
122
+ }, props.closeIcon), props.children))));
123
123
  return React.createElement(ShouldRender, {
124
124
  active: active,
125
125
  forceRender: props.forceRender,
@@ -1,16 +1,9 @@
1
1
  import React from 'react';
2
2
  import classNames from 'classnames';
3
- import { CheckCircleFill, CloseCircleFill, InformationCircleFill, ClockCircleFill, ExclamationCircleFill } from 'antd-mobile-icons';
4
3
  import { withNativeProps } from '../../utils/native-props';
5
4
  import { mergeProps } from '../../utils/with-default-props';
5
+ import { useResultIcon } from './use-result-icon';
6
6
  const classPrefix = `adm-result`;
7
- const iconRecord = {
8
- success: CheckCircleFill,
9
- error: CloseCircleFill,
10
- info: InformationCircleFill,
11
- waiting: ClockCircleFill,
12
- warning: ExclamationCircleFill
13
- };
14
7
  const defaultProps = {
15
8
  status: 'info'
16
9
  };
@@ -22,13 +15,13 @@ export const Result = p => {
22
15
  description,
23
16
  icon
24
17
  } = props;
18
+ const fallbackIcon = useResultIcon(status);
25
19
  if (!status) return null;
26
- const resultIcon = icon || React.createElement(iconRecord[status]);
27
20
  return withNativeProps(props, React.createElement("div", {
28
21
  className: classNames(classPrefix, `${classPrefix}-${status}`)
29
22
  }, React.createElement("div", {
30
23
  className: `${classPrefix}-icon`
31
- }, resultIcon), React.createElement("div", {
24
+ }, icon || fallbackIcon), React.createElement("div", {
32
25
  className: `${classPrefix}-title`
33
26
  }, title), !!description && React.createElement("div", {
34
27
  className: `${classPrefix}-description`
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ export declare type ResultIconProps = {};
3
+ export declare const useResultIcon: (status?: "error" | "waiting" | "success" | "warning" | "info" | undefined) => string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null;
@@ -0,0 +1,29 @@
1
+ import React from 'react';
2
+ import { CheckCircleFill, CloseCircleFill, InformationCircleFill, ClockCircleFill, ExclamationCircleFill } from 'antd-mobile-icons';
3
+ import { useConfig } from '../config-provider';
4
+ export const useResultIcon = status => {
5
+ const {
6
+ result: componentConfig = {}
7
+ } = useConfig();
8
+ const {
9
+ successIcon = React.createElement(CheckCircleFill, null),
10
+ errorIcon = React.createElement(CloseCircleFill, null),
11
+ infoIcon = React.createElement(InformationCircleFill, null),
12
+ waitingIcon = React.createElement(ClockCircleFill, null),
13
+ warningIcon = React.createElement(ExclamationCircleFill, null)
14
+ } = componentConfig || {};
15
+ switch (status) {
16
+ case 'success':
17
+ return successIcon;
18
+ case 'error':
19
+ return errorIcon;
20
+ case 'info':
21
+ return infoIcon;
22
+ case 'waiting':
23
+ return waitingIcon;
24
+ case 'warning':
25
+ return warningIcon;
26
+ default:
27
+ return null;
28
+ }
29
+ };
@@ -1,18 +1,11 @@
1
1
  import React, { useState } from 'react';
2
- import { CheckCircleFill, CloseCircleFill, InformationCircleFill, ClockCircleFill, ExclamationCircleFill } from 'antd-mobile-icons';
3
2
  import classNames from 'classnames';
4
3
  import { withNativeProps } from '../../utils/native-props';
5
4
  import { mergeProps } from '../../utils/with-default-props';
6
5
  import { isNodeWithContent } from '../../utils/is-node-with-content';
7
6
  import Button from '../button';
7
+ import { useResultIcon } from '../result/use-result-icon';
8
8
  const classPrefix = `adm-result-page`;
9
- const iconRecord = {
10
- success: CheckCircleFill,
11
- error: CloseCircleFill,
12
- info: InformationCircleFill,
13
- waiting: ClockCircleFill,
14
- warning: ExclamationCircleFill
15
- };
16
9
  const defaultProps = {
17
10
  status: 'info',
18
11
  details: []
@@ -30,7 +23,7 @@ export const ResultPage = p => {
30
23
  onPrimaryButtonClick,
31
24
  onSecondaryButtonClick
32
25
  } = props;
33
- const resultIcon = icon || React.createElement(iconRecord[status]);
26
+ const fallbackIcon = useResultIcon(status);
34
27
  const [collapse, setCollapse] = useState(true);
35
28
  const showSecondaryButton = isNodeWithContent(secondaryButtonText);
36
29
  const showPrimaryButton = isNodeWithContent(primaryButtonText);
@@ -40,7 +33,7 @@ export const ResultPage = p => {
40
33
  className: `${classPrefix}-header`
41
34
  }, React.createElement("div", {
42
35
  className: `${classPrefix}-icon`
43
- }, resultIcon), React.createElement("div", {
36
+ }, icon || fallbackIcon), React.createElement("div", {
44
37
  className: `${classPrefix}-title`
45
38
  }, title), isNodeWithContent(description) ? React.createElement("div", {
46
39
  className: `${classPrefix}-description`
@@ -1,7 +1,7 @@
1
- import React from 'react';
2
1
  import type { ReactNode } from 'react';
3
- import { InputRef, InputProps } from '../input';
2
+ import React from 'react';
4
3
  import { NativeProps } from '../../utils/native-props';
4
+ import { InputProps, InputRef } from '../input';
5
5
  export declare type SearchBarRef = InputRef;
6
6
  export declare type SearchBarProps = Pick<InputProps, 'onFocus' | 'onBlur' | 'onClear' | 'onCompositionStart' | 'onCompositionEnd'> & {
7
7
  value?: string;
@@ -12,6 +12,10 @@ export declare type SearchBarProps = Pick<InputProps, 'onFocus' | 'onBlur' | 'on
12
12
  onlyShowClearWhenFocus?: boolean;
13
13
  showCancelButton?: boolean | ((focus: boolean, value: string) => boolean);
14
14
  cancelText?: string;
15
+ searchIcon?: ReactNode;
16
+ /**
17
+ * @deprecated use `searchIcon` instead
18
+ */
15
19
  icon?: ReactNode;
16
20
  clearOnCancel?: boolean;
17
21
  onSearch?: (val: string) => void;
@@ -27,6 +31,10 @@ export declare const SearchBar: React.ForwardRefExoticComponent<Pick<InputProps,
27
31
  onlyShowClearWhenFocus?: boolean | undefined;
28
32
  showCancelButton?: boolean | ((focus: boolean, value: string) => boolean) | undefined;
29
33
  cancelText?: string | undefined;
34
+ searchIcon?: ReactNode;
35
+ /**
36
+ * @deprecated use `searchIcon` instead
37
+ */
30
38
  icon?: ReactNode;
31
39
  clearOnCancel?: boolean | undefined;
32
40
  onSearch?: ((val: string) => void) | undefined;
@@ -1,29 +1,30 @@
1
- import React, { useState, useRef, forwardRef, useImperativeHandle } from 'react';
1
+ import { SearchOutline } from 'antd-mobile-icons';
2
2
  import classNames from 'classnames';
3
- import Input from '../input';
4
- import Button from '../button';
3
+ import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
5
4
  import { withNativeProps } from '../../utils/native-props';
6
- import { mergeProps } from '../../utils/with-default-props';
7
- import { SearchOutline } from 'antd-mobile-icons';
8
5
  import { usePropsValue } from '../../utils/use-props-value';
6
+ import { mergeProp, mergeProps } from '../../utils/with-default-props';
7
+ import Button from '../button';
9
8
  import { useConfig } from '../config-provider';
9
+ import Input from '../input';
10
10
  const classPrefix = `adm-search-bar`;
11
11
  const defaultProps = {
12
12
  clearable: true,
13
13
  onlyShowClearWhenFocus: false,
14
14
  showCancelButton: false,
15
15
  defaultValue: '',
16
- clearOnCancel: true,
17
- icon: React.createElement(SearchOutline, null)
16
+ clearOnCancel: true
18
17
  };
19
- export const SearchBar = forwardRef((p, ref) => {
18
+ export const SearchBar = forwardRef((props, ref) => {
20
19
  const {
21
- locale
20
+ locale,
21
+ searchBar: componentConfig = {}
22
22
  } = useConfig();
23
- const props = mergeProps(defaultProps, {
23
+ const mergedProps = mergeProps(defaultProps, componentConfig, {
24
24
  cancelText: locale.common.cancel
25
- }, p);
26
- const [value, setValue] = usePropsValue(props);
25
+ }, props);
26
+ const searchIcon = mergeProp(React.createElement(SearchOutline, null), componentConfig.searchIcon, props.icon, props.searchIcon);
27
+ const [value, setValue] = usePropsValue(mergedProps);
27
28
  const [hasFocus, setHasFocus] = useState(false);
28
29
  const inputRef = useRef(null);
29
30
  const composingRef = useRef(false);
@@ -47,10 +48,10 @@ export const SearchBar = forwardRef((p, ref) => {
47
48
  }));
48
49
  const renderCancelButton = () => {
49
50
  let isShowCancel;
50
- if (typeof props.showCancelButton === 'function') {
51
- isShowCancel = props.showCancelButton(hasFocus, value);
51
+ if (typeof mergedProps.showCancelButton === 'function') {
52
+ isShowCancel = mergedProps.showCancelButton(hasFocus, value);
52
53
  } else {
53
- isShowCancel = props.showCancelButton && hasFocus;
54
+ isShowCancel = mergedProps.showCancelButton && hasFocus;
54
55
  }
55
56
  return isShowCancel && React.createElement("div", {
56
57
  className: `${classPrefix}-suffix`
@@ -59,66 +60,66 @@ export const SearchBar = forwardRef((p, ref) => {
59
60
  className: `${classPrefix}-cancel-button`,
60
61
  onClick: () => {
61
62
  var _a, _b, _c;
62
- if (props.clearOnCancel) {
63
+ if (mergedProps.clearOnCancel) {
63
64
  (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.clear();
64
65
  }
65
66
  (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.blur();
66
- (_c = props.onCancel) === null || _c === void 0 ? void 0 : _c.call(props);
67
+ (_c = mergedProps.onCancel) === null || _c === void 0 ? void 0 : _c.call(mergedProps);
67
68
  },
68
69
  onMouseDown: e => {
69
70
  e.preventDefault();
70
71
  }
71
- }, props.cancelText));
72
+ }, mergedProps.cancelText));
72
73
  };
73
- return withNativeProps(props, React.createElement("div", {
74
+ return withNativeProps(mergedProps, React.createElement("div", {
74
75
  className: classNames(classPrefix, {
75
76
  [`${classPrefix}-active`]: hasFocus
76
77
  })
77
78
  }, React.createElement("div", {
78
79
  className: `${classPrefix}-input-box`
79
- }, props.icon && React.createElement("div", {
80
+ }, searchIcon && React.createElement("div", {
80
81
  className: `${classPrefix}-input-box-icon`
81
- }, props.icon), React.createElement(Input, {
82
+ }, searchIcon), React.createElement(Input, {
82
83
  ref: inputRef,
83
84
  className: classNames(`${classPrefix}-input`, {
84
- [`${classPrefix}-input-without-icon`]: !props.icon
85
+ [`${classPrefix}-input-without-icon`]: !searchIcon
85
86
  }),
86
87
  value: value,
87
88
  onChange: setValue,
88
- maxLength: props.maxLength,
89
- placeholder: props.placeholder,
90
- clearable: props.clearable,
91
- onlyShowClearWhenFocus: props.onlyShowClearWhenFocus,
89
+ maxLength: mergedProps.maxLength,
90
+ placeholder: mergedProps.placeholder,
91
+ clearable: mergedProps.clearable,
92
+ onlyShowClearWhenFocus: mergedProps.onlyShowClearWhenFocus,
92
93
  onFocus: e => {
93
94
  var _a;
94
95
  setHasFocus(true);
95
- (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
96
+ (_a = mergedProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(mergedProps, e);
96
97
  },
97
98
  onBlur: e => {
98
99
  var _a;
99
100
  setHasFocus(false);
100
- (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
101
+ (_a = mergedProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(mergedProps, e);
101
102
  },
102
- onClear: props.onClear,
103
+ onClear: mergedProps.onClear,
103
104
  type: 'search',
104
105
  enterKeyHint: 'search',
105
106
  onEnterPress: () => {
106
107
  var _a, _b;
107
108
  if (!composingRef.current) {
108
109
  (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
109
- (_b = props.onSearch) === null || _b === void 0 ? void 0 : _b.call(props, value);
110
+ (_b = mergedProps.onSearch) === null || _b === void 0 ? void 0 : _b.call(mergedProps, value);
110
111
  }
111
112
  },
112
113
  "aria-label": locale.SearchBar.name,
113
114
  onCompositionStart: e => {
114
115
  var _a;
115
116
  composingRef.current = true;
116
- (_a = props.onCompositionStart) === null || _a === void 0 ? void 0 : _a.call(props, e);
117
+ (_a = mergedProps.onCompositionStart) === null || _a === void 0 ? void 0 : _a.call(mergedProps, e);
117
118
  },
118
119
  onCompositionEnd: e => {
119
120
  var _a;
120
121
  composingRef.current = false;
121
- (_a = props.onCompositionEnd) === null || _a === void 0 ? void 0 : _a.call(props, e);
122
+ (_a = mergedProps.onCompositionEnd) === null || _a === void 0 ? void 0 : _a.call(mergedProps, e);
122
123
  }
123
124
  })), renderCancelButton()));
124
125
  });
@@ -27,7 +27,7 @@
27
27
  }
28
28
  .adm-toast-mask .adm-toast-main-text {
29
29
  padding: 12px;
30
- min-width: 0px;
30
+ min-width: 0;
31
31
  }
32
32
  .adm-toast-mask .adm-toast-main-icon {
33
33
  padding: 35px 12px;
@@ -1,7 +1,7 @@
1
1
  import type { FC, ReactNode } from 'react';
2
- import type { MaskProps } from '../mask';
3
- import { PropagationEvent } from '../../utils/with-stop-propagation';
4
2
  import { GetContainer } from '../../utils/render-to-container';
3
+ import { PropagationEvent } from '../../utils/with-stop-propagation';
4
+ import type { MaskProps } from '../mask';
5
5
  export interface ToastProps {
6
6
  afterClose?: () => void;
7
7
  maskStyle?: MaskProps['style'];
@@ -1,9 +1,9 @@
1
- import React, { useMemo } from 'react';
2
- import classNames from 'classnames';
3
1
  import { CheckOutline, CloseOutline } from 'antd-mobile-icons';
4
- import Mask from '../mask';
2
+ import classNames from 'classnames';
3
+ import React, { useMemo } from 'react';
5
4
  import { mergeProps } from '../../utils/with-default-props';
6
5
  import AutoCenter from '../auto-center';
6
+ import Mask from '../mask';
7
7
  import SpinLoading from '../spin-loading';
8
8
  const classPrefix = `adm-toast`;
9
9
  const defaultProps = {