antd-mobile 5.14.3 → 5.15.0

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 (128) hide show
  1. package/2x/README.md +1 -2
  2. package/2x/bundle/antd-mobile.cjs.js +128 -121
  3. package/2x/bundle/antd-mobile.es.js +123 -116
  4. package/2x/bundle/style.css +9 -6
  5. package/2x/cjs/components/badge/badge.css +1 -1
  6. package/2x/cjs/components/badge/badge.d.ts +2 -0
  7. package/2x/cjs/components/badge/badge.js +2 -1
  8. package/2x/cjs/components/checkbox/checkbox.d.ts +18 -2
  9. package/2x/cjs/components/checkbox/checkbox.js +14 -4
  10. package/2x/cjs/components/checkbox/index.d.ts +13 -2
  11. package/2x/cjs/components/form/form-item.js +2 -4
  12. package/2x/cjs/components/form/form-subscribe.js +3 -9
  13. package/2x/cjs/components/form/form.d.ts +1 -1
  14. package/2x/cjs/components/form/index.d.ts +1 -1
  15. package/2x/cjs/components/infinite-scroll/infinite-scroll.js +13 -5
  16. package/2x/cjs/components/list/list.css +3 -0
  17. package/2x/cjs/components/list/list.d.ts +1 -1
  18. package/2x/cjs/components/rate/rate.css +2 -2
  19. package/2x/cjs/components/rate/rate.js +3 -3
  20. package/2x/cjs/components/rate/star.d.ts +2 -0
  21. package/2x/cjs/components/rate/star.js +37 -0
  22. package/2x/cjs/components/safe-area/safe-area.css +3 -2
  23. package/2x/cjs/components/text-area/text-area.d.ts +1 -0
  24. package/2x/cjs/components/text-area/text-area.js +5 -0
  25. package/2x/cjs/components/toast/methods.js +32 -73
  26. package/2x/cjs/components/water-mark/water-mark.js +3 -2
  27. package/2x/cjs/global/global.css +0 -1
  28. package/2x/cjs/global/theme-default.css +0 -1
  29. package/2x/cjs/utils/render-imperatively.d.ts +4 -1
  30. package/2x/cjs/utils/render-imperatively.js +23 -11
  31. package/2x/cjs/utils/use-props-value.js +2 -6
  32. package/2x/es/components/badge/badge.css +1 -1
  33. package/2x/es/components/badge/badge.d.ts +2 -0
  34. package/2x/es/components/badge/badge.js +2 -1
  35. package/2x/es/components/checkbox/checkbox.d.ts +18 -2
  36. package/2x/es/components/checkbox/checkbox.js +15 -3
  37. package/2x/es/components/checkbox/index.d.ts +13 -2
  38. package/2x/es/components/form/form-item.js +2 -2
  39. package/2x/es/components/form/form-subscribe.js +5 -8
  40. package/2x/es/components/form/form.d.ts +1 -1
  41. package/2x/es/components/form/index.d.ts +1 -1
  42. package/2x/es/components/infinite-scroll/infinite-scroll.js +14 -6
  43. package/2x/es/components/list/list.css +3 -0
  44. package/2x/es/components/list/list.d.ts +1 -1
  45. package/2x/es/components/rate/rate.css +2 -2
  46. package/2x/es/components/rate/rate.js +2 -2
  47. package/2x/es/components/rate/star.d.ts +2 -0
  48. package/2x/es/components/rate/star.js +25 -0
  49. package/2x/es/components/safe-area/safe-area.css +3 -2
  50. package/2x/es/components/text-area/text-area.d.ts +1 -0
  51. package/2x/es/components/text-area/text-area.js +5 -0
  52. package/2x/es/components/toast/methods.js +29 -67
  53. package/2x/es/components/water-mark/water-mark.js +3 -2
  54. package/2x/es/global/global.css +0 -1
  55. package/2x/es/global/theme-default.css +0 -1
  56. package/2x/es/utils/render-imperatively.d.ts +4 -1
  57. package/2x/es/utils/render-imperatively.js +23 -11
  58. package/2x/es/utils/use-props-value.js +2 -6
  59. package/2x/package.json +3 -3
  60. package/2x/umd/antd-mobile.js +1 -1
  61. package/README.md +1 -2
  62. package/bundle/antd-mobile.cjs.js +128 -121
  63. package/bundle/antd-mobile.es.js +123 -116
  64. package/bundle/style.css +9 -6
  65. package/cjs/components/badge/badge.css +1 -1
  66. package/cjs/components/badge/badge.d.ts +2 -0
  67. package/cjs/components/badge/badge.js +2 -1
  68. package/cjs/components/checkbox/checkbox.d.ts +18 -2
  69. package/cjs/components/checkbox/checkbox.js +14 -4
  70. package/cjs/components/checkbox/index.d.ts +13 -2
  71. package/cjs/components/form/form-item.js +2 -4
  72. package/cjs/components/form/form-subscribe.js +3 -9
  73. package/cjs/components/form/form.d.ts +1 -1
  74. package/cjs/components/form/index.d.ts +1 -1
  75. package/cjs/components/infinite-scroll/infinite-scroll.js +13 -5
  76. package/cjs/components/list/list.css +3 -0
  77. package/cjs/components/list/list.d.ts +1 -1
  78. package/cjs/components/rate/rate.css +2 -2
  79. package/cjs/components/rate/rate.js +3 -3
  80. package/cjs/components/rate/star.d.ts +2 -0
  81. package/cjs/components/rate/star.js +37 -0
  82. package/cjs/components/safe-area/safe-area.css +3 -2
  83. package/cjs/components/text-area/text-area.d.ts +1 -0
  84. package/cjs/components/text-area/text-area.js +5 -0
  85. package/cjs/components/toast/methods.js +32 -73
  86. package/cjs/components/water-mark/water-mark.js +3 -2
  87. package/cjs/global/global.css +0 -1
  88. package/cjs/global/theme-default.css +0 -1
  89. package/cjs/utils/render-imperatively.d.ts +4 -1
  90. package/cjs/utils/render-imperatively.js +23 -11
  91. package/cjs/utils/use-props-value.js +2 -6
  92. package/es/components/badge/badge.css +1 -1
  93. package/es/components/badge/badge.d.ts +2 -0
  94. package/es/components/badge/badge.js +2 -1
  95. package/es/components/checkbox/checkbox.d.ts +18 -2
  96. package/es/components/checkbox/checkbox.js +15 -3
  97. package/es/components/checkbox/index.d.ts +13 -2
  98. package/es/components/form/form-item.js +2 -2
  99. package/es/components/form/form-subscribe.js +5 -8
  100. package/es/components/form/form.d.ts +1 -1
  101. package/es/components/form/index.d.ts +1 -1
  102. package/es/components/infinite-scroll/infinite-scroll.js +14 -6
  103. package/es/components/list/list.css +3 -0
  104. package/es/components/list/list.d.ts +1 -1
  105. package/es/components/rate/rate.css +2 -2
  106. package/es/components/rate/rate.js +2 -2
  107. package/es/components/rate/star.d.ts +2 -0
  108. package/es/components/rate/star.js +25 -0
  109. package/es/components/safe-area/safe-area.css +3 -2
  110. package/es/components/text-area/text-area.d.ts +1 -0
  111. package/es/components/text-area/text-area.js +5 -0
  112. package/es/components/toast/methods.js +29 -67
  113. package/es/components/water-mark/water-mark.js +3 -2
  114. package/es/global/global.css +0 -1
  115. package/es/global/theme-default.css +0 -1
  116. package/es/utils/render-imperatively.d.ts +4 -1
  117. package/es/utils/render-imperatively.js +23 -11
  118. package/es/utils/use-props-value.js +2 -6
  119. package/package.json +3 -3
  120. package/umd/antd-mobile.js +1 -1
  121. package/2x/cjs/components/form/form-imperative-item.d.ts +0 -5
  122. package/2x/cjs/components/form/form-imperative-item.js +0 -57
  123. package/2x/es/components/form/form-imperative-item.d.ts +0 -5
  124. package/2x/es/components/form/form-imperative-item.js +0 -38
  125. package/cjs/components/form/form-imperative-item.d.ts +0 -5
  126. package/cjs/components/form/form-imperative-item.js +0 -57
  127. package/es/components/form/form-imperative-item.d.ts +0 -5
  128. package/es/components/form/form-imperative-item.js +0 -38
@@ -1,4 +1,4 @@
1
- import React, { FC } from 'react';
1
+ import React from 'react';
2
2
  import { NativeProps } from '../../utils/native-props';
3
3
  export declare type CheckboxValue = string | number;
4
4
  export declare type CheckboxProps = {
@@ -13,4 +13,20 @@ export declare type CheckboxProps = {
13
13
  icon?: (checked: boolean, indeterminate: boolean) => React.ReactNode;
14
14
  children?: React.ReactNode;
15
15
  } & NativeProps<'--icon-size' | '--font-size' | '--gap'>;
16
- export declare const Checkbox: FC<CheckboxProps>;
16
+ export declare type CheckboxRef = {
17
+ check: () => void;
18
+ uncheck: () => void;
19
+ toggle: () => void;
20
+ };
21
+ export declare const Checkbox: React.ForwardRefExoticComponent<{
22
+ checked?: boolean | undefined;
23
+ defaultChecked?: boolean | undefined;
24
+ disabled?: boolean | undefined;
25
+ onChange?: ((checked: boolean) => void) | undefined;
26
+ value?: CheckboxValue | undefined;
27
+ indeterminate?: boolean | undefined;
28
+ block?: boolean | undefined;
29
+ id?: string | undefined;
30
+ icon?: ((checked: boolean, indeterminate: boolean) => React.ReactNode) | undefined;
31
+ children?: React.ReactNode;
32
+ } & NativeProps<"--font-size" | "--icon-size" | "--gap"> & React.RefAttributes<CheckboxRef>>;
@@ -1,4 +1,4 @@
1
- import React, { useContext } from 'react';
1
+ import React, { forwardRef, useContext, useImperativeHandle } from 'react';
2
2
  import { withNativeProps } from '../../utils/native-props';
3
3
  import classNames from 'classnames';
4
4
  import { CheckboxGroupContext } from './group-context';
@@ -14,7 +14,7 @@ const defaultProps = {
14
14
  defaultChecked: false,
15
15
  indeterminate: false
16
16
  };
17
- export const Checkbox = p => {
17
+ export const Checkbox = forwardRef((p, ref) => {
18
18
  const groupContext = useContext(CheckboxGroupContext);
19
19
  const props = mergeProps(defaultProps, p);
20
20
  let [checked, setChecked] = usePropsValue({
@@ -55,6 +55,18 @@ export const Checkbox = p => {
55
55
  disabled = disabled || groupContext.disabled;
56
56
  }
57
57
 
58
+ useImperativeHandle(ref, () => ({
59
+ check: () => {
60
+ setChecked(true);
61
+ },
62
+ uncheck: () => {
63
+ setChecked(false);
64
+ },
65
+ toggle: () => {
66
+ setChecked(!checked);
67
+ }
68
+ }));
69
+
58
70
  const renderIcon = () => {
59
71
  if (props.icon) {
60
72
  return React.createElement("div", {
@@ -83,4 +95,4 @@ export const Checkbox = p => {
83
95
  }), renderIcon(), props.children && React.createElement("div", {
84
96
  className: `${classPrefix}-content`
85
97
  }, props.children)));
86
- };
98
+ });
@@ -1,8 +1,19 @@
1
1
  /// <reference types="react" />
2
2
  import './checkbox.less';
3
- export type { CheckboxValue, CheckboxProps } from './checkbox';
3
+ export type { CheckboxValue, CheckboxProps, CheckboxRef } from './checkbox';
4
4
  export type { CheckboxGroupProps } from './group';
5
- declare const _default: import("react").FC<import("./checkbox").CheckboxProps> & {
5
+ declare const _default: import("react").ForwardRefExoticComponent<{
6
+ checked?: boolean | undefined;
7
+ defaultChecked?: boolean | undefined;
8
+ disabled?: boolean | undefined;
9
+ onChange?: ((checked: boolean) => void) | undefined;
10
+ value?: import("./checkbox").CheckboxValue | undefined;
11
+ indeterminate?: boolean | undefined;
12
+ block?: boolean | undefined;
13
+ id?: string | undefined;
14
+ icon?: ((checked: boolean, indeterminate: boolean) => import("react").ReactNode) | undefined;
15
+ children?: import("react").ReactNode;
16
+ } & import("../../utils/native-props").NativeProps<"--font-size" | "--icon-size" | "--gap"> & import("react").RefAttributes<import("./checkbox").CheckboxRef>> & {
6
17
  Group: import("react").FC<import("./group").CheckboxGroupProps>;
7
18
  };
8
19
  export default _default;
@@ -80,13 +80,13 @@ const FormItemLayout = props => {
80
80
  e.preventDefault();
81
81
  }
82
82
  }, React.createElement(QuestionCircleOutline, null)))) : null;
83
- const description = React.createElement(React.Fragment, null, props.description, hasFeedback && React.createElement(React.Fragment, null, props.errors.map((error, index) => React.createElement("div", {
83
+ const description = props.description || hasFeedback ? React.createElement(React.Fragment, null, props.description, hasFeedback && React.createElement(React.Fragment, null, props.errors.map((error, index) => React.createElement("div", {
84
84
  key: `error-${index}`,
85
85
  className: `${classPrefix}-feedback-error`
86
86
  }, error)), props.warnings.map((warning, index) => React.createElement("div", {
87
87
  key: `warning-${index}`,
88
88
  className: `${classPrefix}-feedback-warning`
89
- }, warning))));
89
+ }, warning)))) : null;
90
90
  return React.createElement(List.Item, {
91
91
  style: style,
92
92
  title: layout === 'vertical' && labelElement,
@@ -1,19 +1,16 @@
1
- import React, { memo } from 'react';
2
- import { useWatch } from 'rc-field-form';
1
+ import React, { memo, useContext } from 'react';
2
+ import { FieldContext, useWatch } from 'rc-field-form';
3
3
  import { useUpdate } from 'ahooks';
4
- import Form from '.';
5
4
  import { useIsomorphicUpdateLayoutEffect } from '../../utils/use-isomorphic-update-layout-effect';
6
5
  export const FormSubscribe = props => {
7
6
  const update = useUpdate();
8
- return React.createElement(Form.Item, {
9
- noStyle: true,
10
- dependencies: props.to
11
- }, form => React.createElement(React.Fragment, null, props.children(form.getFieldsValue(props.to), form), props.to.map(namePath => React.createElement(Watcher, {
7
+ const form = useContext(FieldContext);
8
+ return React.createElement(React.Fragment, null, props.children(form.getFieldsValue(props.to), form), props.to.map(namePath => React.createElement(Watcher, {
12
9
  key: namePath.toString(),
13
10
  form: form,
14
11
  namePath: namePath,
15
12
  onChange: update
16
- }))));
13
+ })));
17
14
  };
18
15
  export const Watcher = memo(props => {
19
16
  const value = useWatch(props.namePath, props.form);
@@ -8,7 +8,7 @@ export declare type FormProps = Pick<RcFormProps, 'form' | 'initialValues' | 'na
8
8
  footer?: ReactNode;
9
9
  mode?: ListProps['mode'];
10
10
  };
11
- export declare const Form: React.ForwardRefExoticComponent<Pick<RcFormProps<any>, "children" | "form" | "name" | "initialValues" | "preserve" | "validateMessages" | "validateTrigger" | "onFieldsChange" | "onFinish" | "onFinishFailed" | "onValuesChange"> & NativeProps<"--border-inner" | "--border-top" | "--border-bottom"> & Partial<FormContextType> & {
11
+ export declare const Form: React.ForwardRefExoticComponent<Pick<RcFormProps<any>, "children" | "form" | "name" | "initialValues" | "preserve" | "validateMessages" | "validateTrigger" | "onFieldsChange" | "onFinish" | "onFinishFailed" | "onValuesChange"> & NativeProps<"--border-bottom" | "--border-inner" | "--border-top"> & Partial<FormContextType> & {
12
12
  footer?: ReactNode;
13
13
  mode?: ListProps['mode'];
14
14
  } & React.RefAttributes<FormInstance>>;
@@ -7,7 +7,7 @@ export type { FormItemProps } from './form-item';
7
7
  export type { FormSubscribeProps } from './form-subscribe';
8
8
  export type { ValidateMessages, FieldData, NamePath, } from 'rc-field-form/es/interface';
9
9
  export type { FormArrayField, FormArrayOperation, FormArrayProps, } from './form-array';
10
- declare const _default: import("react").ForwardRefExoticComponent<Pick<import("rc-field-form").FormProps<any>, "children" | "form" | "name" | "initialValues" | "preserve" | "validateMessages" | "validateTrigger" | "onFieldsChange" | "onFinish" | "onFinishFailed" | "onValuesChange"> & import("../../utils/native-props").NativeProps<"--border-inner" | "--border-top" | "--border-bottom"> & Partial<import("./context").FormContextType> & {
10
+ declare const _default: import("react").ForwardRefExoticComponent<Pick<import("rc-field-form").FormProps<any>, "children" | "form" | "name" | "initialValues" | "preserve" | "validateMessages" | "validateTrigger" | "onFieldsChange" | "onFinish" | "onFinishFailed" | "onValuesChange"> & import("../../utils/native-props").NativeProps<"--border-bottom" | "--border-inner" | "--border-top"> & Partial<import("./context").FormContextType> & {
11
11
  footer?: import("react").ReactNode;
12
12
  mode?: "default" | "card" | undefined;
13
13
  } & import("react").RefAttributes<import("./form").FormInstance>> & {
@@ -1,7 +1,7 @@
1
1
  import { __awaiter } from "tslib";
2
2
  import { mergeProps } from '../../utils/with-default-props';
3
3
  import React, { useEffect, useRef, useState } from 'react';
4
- import { useLockFn, useMemoizedFn } from 'ahooks';
4
+ import { useLockFn, useThrottleFn } from 'ahooks';
5
5
  import { withNativeProps } from '../../utils/native-props';
6
6
  import { getScrollParent } from '../../utils/get-scroll-parent';
7
7
  import { useConfig } from '../config-provider';
@@ -36,7 +36,9 @@ export const InfiniteScroll = p => {
36
36
  const [flag, setFlag] = useState({});
37
37
  const nextFlagRef = useRef(flag);
38
38
  const [scrollParent, setScrollParent] = useState();
39
- const check = useMemoizedFn(() => __awaiter(void 0, void 0, void 0, function* () {
39
+ const {
40
+ run: check
41
+ } = useThrottleFn(() => __awaiter(void 0, void 0, void 0, function* () {
40
42
  if (nextFlagRef.current !== flag) return;
41
43
  if (!props.hasMore) return;
42
44
  const element = elementRef.current;
@@ -55,7 +57,11 @@ export const InfiniteScroll = p => {
55
57
  yield doLoadMore(false);
56
58
  setFlag(nextFlag);
57
59
  }
58
- })); // 确保在内容不足时会自动触发加载事件
60
+ }), {
61
+ wait: 100,
62
+ leading: true,
63
+ trailing: true
64
+ }); // Make sure to trigger `loadMore` when content changes
59
65
 
60
66
  useEffect(() => {
61
67
  check();
@@ -76,9 +82,11 @@ export const InfiniteScroll = p => {
76
82
  }, [scrollParent]);
77
83
 
78
84
  function retry() {
79
- setFailed(false);
80
- doLoadMore(true);
81
- setFlag(nextFlagRef.current);
85
+ return __awaiter(this, void 0, void 0, function* () {
86
+ setFailed(false);
87
+ yield doLoadMore(true);
88
+ setFlag(nextFlagRef.current);
89
+ });
82
90
  }
83
91
 
84
92
  return withNativeProps(props, React.createElement("div", {
@@ -10,6 +10,7 @@
10
10
  --padding-left: 24px;
11
11
  --padding-right: 24px;
12
12
  --font-size: var(--adm-font-size-9);
13
+ --extra-max-width: 70%;
13
14
  }
14
15
 
15
16
  .adm-list-header {
@@ -79,9 +80,11 @@
79
80
  }
80
81
 
81
82
  .adm-list-item-content-extra {
83
+ flex: none;
82
84
  padding-left: 24px;
83
85
  font-size: var(--adm-font-size-7);
84
86
  color: var(--adm-color-weak);
87
+ max-width: var(--extra-max-width);
85
88
  }
86
89
 
87
90
  .adm-list-item-content-arrow {
@@ -4,5 +4,5 @@ export declare type ListProps = {
4
4
  header?: ReactNode;
5
5
  mode?: 'default' | 'card';
6
6
  children?: ReactNode;
7
- } & NativeProps<'--header-font-size' | '--prefix-width' | '--prefix-padding-right' | '--align-items' | '--active-background-color' | '--border-inner' | '--border-top' | '--border-bottom' | '--padding-left' | '--padding-right' | '--font-size'>;
7
+ } & NativeProps<'--active-background-color' | '--align-items' | '--border-bottom' | '--border-inner' | '--border-top' | '--extra-max-width' | '--font-size' | '--header-font-size' | '--padding-left' | '--padding-right' | '--prefix-padding-right' | '--prefix-width'>;
8
8
  export declare const List: FC<ListProps>;
@@ -1,7 +1,7 @@
1
1
  .adm-rate {
2
2
  --star-size: 48px;
3
3
  --active-color: #ffd21e;
4
- --inactive-color: var(--adm-color-light);
4
+ --inactive-color: var(--adm-color-border);
5
5
  display: inline-flex;
6
6
  }
7
7
 
@@ -10,7 +10,7 @@
10
10
  }
11
11
 
12
12
  .adm-rate-star {
13
- padding: calc(var(--star-size) / 8);
13
+ padding: 0.125em;
14
14
  line-height: var(--star-size);
15
15
  font-size: var(--star-size);
16
16
  color: var(--inactive-color);
@@ -2,13 +2,13 @@ import React from 'react';
2
2
  import classNames from 'classnames';
3
3
  import { withNativeProps } from '../../utils/native-props';
4
4
  import { mergeProps } from '../../utils/with-default-props';
5
- import { StarFill } from 'antd-mobile-icons';
6
5
  import { usePropsValue } from '../../utils/use-props-value';
6
+ import { Star } from './star';
7
7
  const classPrefix = `adm-rate`;
8
8
  const defaultProps = {
9
9
  count: 5,
10
10
  allowHalf: false,
11
- character: React.createElement(StarFill, null),
11
+ character: React.createElement(Star, null),
12
12
  defaultValue: 0,
13
13
  readOnly: false,
14
14
  allowClear: true
@@ -0,0 +1,2 @@
1
+ import { FC } from 'react';
2
+ export declare const Star: FC;
@@ -0,0 +1,25 @@
1
+ import React from 'react';
2
+ export const Star = () => {
3
+ // return (
4
+ // <svg height='1em' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'>
5
+ // <title>{'star-fill\u5907\u4EFD 71'}</title>
6
+ // <path
7
+ // d='m24 36-10.52 5.53a2 2 0 0 1-2.902-2.108l2.01-11.714-8.511-8.296a2 2 0 0 1 1.108-3.411l11.762-1.71 5.26-10.657a2 2 0 0 1 3.586 0l5.26 10.658L42.815 16a2 2 0 0 1 1.108 3.411l-8.51 8.296 2.009 11.714a2 2 0 0 1-2.902 2.109L24 36Z'
8
+ // fill='#E5E5E5'
9
+ // fillRule='evenodd'
10
+ // />
11
+ // </svg>
12
+ // )
13
+ return React.createElement("svg", {
14
+ viewBox: '0 0 42 40',
15
+ height: '1em',
16
+ xmlns: 'http://www.w3.org/2000/svg',
17
+ style: {
18
+ verticalAlign: '-0.125em'
19
+ }
20
+ }, React.createElement("path", {
21
+ d: 'm21 34-10.52 5.53a2 2 0 0 1-2.902-2.108l2.01-11.714-8.511-8.296a2 2 0 0 1 1.108-3.411l11.762-1.71 5.26-10.657a2 2 0 0 1 3.586 0l5.26 10.658L39.815 14a2 2 0 0 1 1.108 3.411l-8.51 8.296 2.009 11.714a2 2 0 0 1-2.902 2.109L21 34Z',
22
+ fill: 'currentColor',
23
+ fillRule: 'evenodd'
24
+ }));
25
+ };
@@ -1,12 +1,13 @@
1
1
  .adm-safe-area {
2
+ --multiple: var(--adm-safe-area-multiple, 1);
2
3
  display: block;
3
4
  width: 100%;
4
5
  }
5
6
 
6
7
  .adm-safe-area-position-top {
7
- padding-top: calc(env(safe-area-inset-top) * var(--adm-hd));
8
+ padding-top: calc(env(safe-area-inset-top) * var(--multiple));
8
9
  }
9
10
 
10
11
  .adm-safe-area-position-bottom {
11
- padding-bottom: calc(env(safe-area-inset-bottom) * var(--adm-hd));
12
+ padding-bottom: calc(env(safe-area-inset-bottom) * var(--multiple));
12
13
  }
@@ -19,6 +19,7 @@ export declare type TextAreaRef = {
19
19
  clear: () => void;
20
20
  focus: () => void;
21
21
  blur: () => void;
22
+ nativeElement: HTMLTextAreaElement | null;
22
23
  };
23
24
  export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "onClick" | "disabled" | "name" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "autoComplete" | "autoFocus" | "readOnly"> & {
24
25
  onChange?: ((val: string) => void) | undefined;
@@ -40,7 +40,12 @@ export const TextArea = forwardRef((p, ref) => {
40
40
  var _a;
41
41
 
42
42
  (_a = nativeTextAreaRef.current) === null || _a === void 0 ? void 0 : _a.blur();
43
+ },
44
+
45
+ get nativeElement() {
46
+ return nativeTextAreaRef.current;
43
47
  }
48
+
44
49
  }));
45
50
  useIsomorphicLayoutEffect(() => {
46
51
  if (!autoSize) return;
@@ -1,86 +1,48 @@
1
- import React, { createRef, forwardRef, useEffect, useImperativeHandle, useState } from 'react';
2
- import { resolveContainer } from '../../utils/get-container';
1
+ import React from 'react';
3
2
  import { InternalToast } from './toast';
4
3
  import { mergeProps } from '../../utils/with-default-props';
5
- import { render, unmount as reactUnmount } from '../../utils/render';
6
- const containers = [];
7
-
8
- function unmount(container) {
9
- const unmountResult = reactUnmount(container);
10
-
11
- if (unmountResult && container.parentNode) {
12
- container.parentNode.removeChild(container);
13
- }
14
- }
15
-
4
+ import { renderImperatively } from '../../utils/render-imperatively';
5
+ let currentHandler = null;
6
+ let currentTimeout = null;
16
7
  const defaultProps = {
17
8
  duration: 2000,
18
9
  position: 'center',
19
10
  maskClickable: true
20
11
  };
12
+
13
+ const ToastInner = props => React.createElement(InternalToast, Object.assign({}, props));
14
+
21
15
  export function show(p) {
22
16
  const props = mergeProps(defaultProps, typeof p === 'string' ? {
23
17
  content: p
24
18
  } : p);
25
- let timer = 0;
26
- const {
27
- getContainer = () => document.body
28
- } = props;
29
- const container = document.createElement('div');
30
- const bodyContainer = resolveContainer(getContainer);
31
- bodyContainer.appendChild(container);
32
- clear();
33
- containers.push(container);
34
- const TempToast = forwardRef((_, ref) => {
35
- const [visible, setVisible] = useState(true);
36
- useEffect(() => {
37
- return () => {
38
- var _a;
19
+ const element = React.createElement(ToastInner, Object.assign({}, props, {
20
+ onClose: () => {
21
+ currentHandler = null;
22
+ }
23
+ }));
39
24
 
40
- (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
41
- };
42
- }, []);
43
- useEffect(() => {
44
- if (props.duration === 0) {
45
- return;
46
- }
25
+ if (currentHandler) {
26
+ currentHandler.replace(element);
27
+ } else {
28
+ currentHandler = renderImperatively(element);
29
+ }
47
30
 
48
- timer = window.setTimeout(() => {
49
- setVisible(false);
50
- }, props.duration);
51
- return () => {
52
- window.clearTimeout(timer);
53
- };
54
- }, []);
55
- useImperativeHandle(ref, () => ({
56
- close: () => setVisible(false)
57
- }));
58
- return React.createElement(InternalToast, Object.assign({}, props, {
59
- getContainer: () => container,
60
- visible: visible,
61
- afterClose: () => {
62
- unmount(container);
63
- }
64
- }));
65
- });
66
- const ref = createRef();
67
- render(React.createElement(TempToast, {
68
- ref: ref
69
- }), container);
70
- return {
71
- close: () => {
72
- var _a;
31
+ if (currentTimeout) {
32
+ window.clearTimeout(currentTimeout);
33
+ }
73
34
 
74
- (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();
75
- }
76
- };
35
+ if (props.duration !== 0) {
36
+ currentTimeout = window.setTimeout(() => {
37
+ clear();
38
+ }, props.duration);
39
+ }
40
+
41
+ return currentHandler;
77
42
  }
78
43
  export function clear() {
79
- while (true) {
80
- const container = containers.pop();
81
- if (!container) break;
82
- unmount(container);
83
- }
44
+ currentHandler === null || currentHandler === void 0 ? void 0 : currentHandler.close();
45
+ currentHandler = null;
84
46
  }
85
47
  export function config(val) {
86
48
  if (val.duration !== undefined) {
@@ -44,13 +44,14 @@ export const WaterMark = p => {
44
44
  const img = new Image();
45
45
  img.crossOrigin = 'anonymous';
46
46
  img.referrerPolicy = 'no-referrer';
47
- img.src = image;
48
47
 
49
48
  img.onload = () => {
50
49
  ctx.drawImage(img, -imageWidth * ratio / 2, -imageHeight * ratio / 2, imageWidth * ratio, imageHeight * ratio);
51
50
  ctx.restore();
52
51
  setBase64Url(canvas.toDataURL());
53
52
  };
53
+
54
+ img.src = image;
54
55
  } else if (content) {
55
56
  ctx.textBaseline = 'middle';
56
57
  ctx.textAlign = 'center'; // 文字绕中间旋转
@@ -65,7 +66,7 @@ export const WaterMark = p => {
65
66
  setBase64Url(canvas.toDataURL());
66
67
  }
67
68
  } else {
68
- throw new Error('当前环境不支持Canvas');
69
+ throw new Error('Canvas is not supported in the current environment');
69
70
  }
70
71
  }, [gapX, gapY, rotate, fontStyle, fontWeight, width, height, fontFamily, fontColor, image, content, fontSize]);
71
72
  return withNativeProps(props, React.createElement("div", {
@@ -12,7 +12,6 @@
12
12
  --adm-font-size-8: 32px;
13
13
  --adm-font-size-9: 34px;
14
14
  --adm-font-size-10: 36px;
15
- --adm-hd: 2;
16
15
  --adm-color-primary: #1677ff;
17
16
  --adm-color-success: #00b578;
18
17
  --adm-color-warning: #ff8f1f;
@@ -12,7 +12,6 @@
12
12
  --adm-font-size-8: 32px;
13
13
  --adm-font-size-9: 34px;
14
14
  --adm-font-size-10: 36px;
15
- --adm-hd: 2;
16
15
  --adm-color-primary: #1677ff;
17
16
  --adm-color-success: #00b578;
18
17
  --adm-color-warning: #ff8f1f;
@@ -4,7 +4,10 @@ declare type ImperativeProps = {
4
4
  onClose?: () => void;
5
5
  afterClose?: () => void;
6
6
  };
7
- export declare function renderImperatively(element: ReactElement<ImperativeProps>): {
7
+ declare type TargetElement = ReactElement<ImperativeProps>;
8
+ export declare type ImperativeHandler = {
8
9
  close: () => void;
10
+ replace: (element: TargetElement) => void;
9
11
  };
12
+ export declare function renderImperatively(element: TargetElement): ImperativeHandler;
10
13
  export {};
@@ -4,6 +4,8 @@ export function renderImperatively(element) {
4
4
  const Wrapper = React.forwardRef((_, ref) => {
5
5
  const [visible, setVisible] = useState(false);
6
6
  const closedRef = useRef(false);
7
+ const [elementToRender, setElementToRender] = useState(element);
8
+ const keyRef = useRef(0);
7
9
  useEffect(() => {
8
10
  if (!closedRef.current) {
9
11
  setVisible(true);
@@ -17,20 +19,28 @@ export function renderImperatively(element) {
17
19
 
18
20
  closedRef.current = true;
19
21
  setVisible(false);
20
- (_b = (_a = element.props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
22
+ (_b = (_a = elementToRender.props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
21
23
  }
22
24
 
23
25
  function afterClose() {
24
26
  var _a, _b;
25
27
 
26
28
  unmount();
27
- (_b = (_a = element.props).afterClose) === null || _b === void 0 ? void 0 : _b.call(_a);
29
+ (_b = (_a = elementToRender.props).afterClose) === null || _b === void 0 ? void 0 : _b.call(_a);
28
30
  }
29
31
 
30
32
  useImperativeHandle(ref, () => ({
31
- close: onClose
33
+ close: onClose,
34
+ replace: element => {
35
+ var _a, _b;
36
+
37
+ keyRef.current++;
38
+ (_b = (_a = elementToRender.props).afterClose) === null || _b === void 0 ? void 0 : _b.call(_a);
39
+ setElementToRender(element);
40
+ }
32
41
  }));
33
- return React.cloneElement(element, Object.assign(Object.assign({}, element.props), {
42
+ return React.cloneElement(elementToRender, Object.assign(Object.assign({}, elementToRender.props), {
43
+ key: keyRef.current,
34
44
  visible,
35
45
  onClose,
36
46
  afterClose
@@ -40,14 +50,16 @@ export function renderImperatively(element) {
40
50
  const unmount = renderToBody(React.createElement(Wrapper, {
41
51
  ref: wrapperRef
42
52
  }));
53
+ return {
54
+ close: () => {
55
+ var _a;
43
56
 
44
- function close() {
45
- var _a;
46
-
47
- (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.close();
48
- }
57
+ (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.close();
58
+ },
59
+ replace: element => {
60
+ var _a;
49
61
 
50
- return {
51
- close
62
+ (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.replace(element);
63
+ }
52
64
  };
53
65
  }
@@ -15,12 +15,8 @@ export function usePropsValue(options) {
15
15
 
16
16
  const setState = useMemoizedFn(v => {
17
17
  const nextValue = typeof v === 'function' ? v(stateRef.current) : v;
18
-
19
- if (value === undefined) {
20
- stateRef.current = nextValue;
21
- update();
22
- }
23
-
18
+ stateRef.current = nextValue;
19
+ update();
24
20
  onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
25
21
  });
26
22
  return [stateRef.current, setState];
package/2x/package.json CHANGED
@@ -1,18 +1,18 @@
1
1
  {
2
2
  "name": "antd-mobile",
3
- "version": "5.14.3",
3
+ "version": "5.15.0",
4
4
  "dependencies": {
5
5
  "@floating-ui/dom": "^0.5.2",
6
6
  "@react-spring/web": "^9.4.5",
7
7
  "@use-gesture/react": "10.2.15",
8
8
  "ahooks": "^3.4.1",
9
- "antd-mobile-icons": "^0.2.2",
9
+ "antd-mobile-icons": "^0.3.0",
10
10
  "antd-mobile-v5-count": "^1.0.1",
11
11
  "big.js": "^6.1.1",
12
12
  "classnames": "^2.3.1",
13
13
  "dayjs": "^1.11.3",
14
14
  "lodash": "^4.17.21",
15
- "rc-field-form": "^1.26.7",
15
+ "rc-field-form": "~1.26.7",
16
16
  "react-is": "^17.0.2",
17
17
  "staged-components": "^1.1.3",
18
18
  "tslib": "^2.4.0",