antd-mobile 5.3.0 → 5.5.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 (156) hide show
  1. package/2x/cjs/components/avatar/avatar.js +1 -0
  2. package/2x/cjs/components/calendar/calendar.js +23 -20
  3. package/2x/cjs/components/cascader-view/cascader-view.d.ts +1 -0
  4. package/2x/cjs/components/cascader-view/use-cascader-value-extend.js +23 -0
  5. package/2x/cjs/components/check-list/check-list-item.js +1 -1
  6. package/2x/cjs/components/checkbox/checkbox.js +16 -4
  7. package/2x/cjs/components/floating-bubble/floating-bubble.d.ts +2 -0
  8. package/2x/cjs/components/floating-bubble/floating-bubble.js +56 -16
  9. package/2x/cjs/components/form/form-array.d.ts +19 -0
  10. package/2x/cjs/components/form/form-array.js +52 -0
  11. package/2x/cjs/components/form/form-item.css +6 -1
  12. package/2x/cjs/components/form/form-item.js +24 -8
  13. package/2x/cjs/components/form/form.css +5 -0
  14. package/2x/cjs/components/form/form.js +17 -6
  15. package/2x/cjs/components/form/index.css +11 -1
  16. package/2x/cjs/components/form/index.d.ts +2 -0
  17. package/2x/cjs/components/form/index.js +3 -0
  18. package/2x/cjs/components/image-uploader/image-uploader.d.ts +1 -1
  19. package/2x/cjs/components/image-uploader/image-uploader.js +17 -1
  20. package/2x/cjs/components/infinite-scroll/infinite-scroll.js +23 -19
  21. package/2x/cjs/components/modal/modal.js +0 -1
  22. package/2x/cjs/components/notice-bar/notice-bar.js +1 -1
  23. package/2x/cjs/components/popover/index.d.ts +7 -2
  24. package/2x/cjs/components/popover/normalize-placement.d.ts +2 -0
  25. package/2x/cjs/components/popover/normalize-placement.js +22 -0
  26. package/2x/cjs/components/popover/popover.css +0 -104
  27. package/2x/cjs/components/popover/popover.d.ts +11 -5
  28. package/2x/cjs/components/popover/popover.js +126 -22
  29. package/2x/cjs/components/popover/wrapper.d.ts +7 -0
  30. package/2x/cjs/components/popover/wrapper.js +41 -0
  31. package/2x/cjs/components/pull-to-refresh/pull-to-refresh.js +24 -9
  32. package/2x/cjs/components/radio/radio.js +16 -4
  33. package/2x/cjs/components/search-bar/search-bar.js +0 -1
  34. package/2x/cjs/components/swiper/swiper.js +1 -1
  35. package/2x/cjs/components/text-area/text-area.css +4 -1
  36. package/2x/cjs/components/text-area/text-area.d.ts +2 -2
  37. package/2x/cjs/utils/use-props-value.d.ts +2 -1
  38. package/2x/cjs/utils/use-props-value.js +4 -2
  39. package/2x/es/components/avatar/avatar.js +1 -0
  40. package/2x/es/components/calendar/calendar.js +23 -19
  41. package/2x/es/components/cascader-view/cascader-view.d.ts +1 -0
  42. package/2x/es/components/cascader-view/use-cascader-value-extend.js +23 -0
  43. package/2x/es/components/check-list/check-list-item.js +1 -1
  44. package/2x/es/components/checkbox/checkbox.js +17 -5
  45. package/2x/es/components/floating-bubble/floating-bubble.d.ts +2 -0
  46. package/2x/es/components/floating-bubble/floating-bubble.js +57 -17
  47. package/2x/es/components/form/form-array.d.ts +19 -0
  48. package/2x/es/components/form/form-array.js +38 -0
  49. package/2x/es/components/form/form-item.css +6 -1
  50. package/2x/es/components/form/form-item.js +22 -8
  51. package/2x/es/components/form/form.css +5 -0
  52. package/2x/es/components/form/form.js +16 -6
  53. package/2x/es/components/form/index.css +11 -1
  54. package/2x/es/components/form/index.d.ts +2 -0
  55. package/2x/es/components/form/index.js +2 -0
  56. package/2x/es/components/image-uploader/image-uploader.d.ts +1 -1
  57. package/2x/es/components/image-uploader/image-uploader.js +17 -1
  58. package/2x/es/components/infinite-scroll/infinite-scroll.js +22 -19
  59. package/2x/es/components/modal/modal.js +0 -1
  60. package/2x/es/components/notice-bar/notice-bar.js +1 -1
  61. package/2x/es/components/popover/index.d.ts +7 -2
  62. package/2x/es/components/popover/normalize-placement.d.ts +2 -0
  63. package/2x/es/components/popover/normalize-placement.js +15 -0
  64. package/2x/es/components/popover/popover.css +0 -104
  65. package/2x/es/components/popover/popover.d.ts +11 -5
  66. package/2x/es/components/popover/popover.js +118 -22
  67. package/2x/es/components/popover/wrapper.d.ts +7 -0
  68. package/2x/es/components/popover/wrapper.js +28 -0
  69. package/2x/es/components/pull-to-refresh/pull-to-refresh.js +24 -9
  70. package/2x/es/components/radio/radio.js +17 -5
  71. package/2x/es/components/search-bar/search-bar.js +0 -1
  72. package/2x/es/components/swiper/swiper.js +1 -1
  73. package/2x/es/components/text-area/text-area.css +4 -1
  74. package/2x/es/components/text-area/text-area.d.ts +2 -2
  75. package/2x/es/utils/use-props-value.d.ts +2 -1
  76. package/2x/es/utils/use-props-value.js +4 -2
  77. package/2x/package.json +2 -2
  78. package/cjs/components/avatar/avatar.js +1 -0
  79. package/cjs/components/calendar/calendar.js +23 -20
  80. package/cjs/components/cascader-view/cascader-view.d.ts +1 -0
  81. package/cjs/components/cascader-view/use-cascader-value-extend.js +23 -0
  82. package/cjs/components/check-list/check-list-item.js +1 -1
  83. package/cjs/components/checkbox/checkbox.js +16 -4
  84. package/cjs/components/floating-bubble/floating-bubble.d.ts +2 -0
  85. package/cjs/components/floating-bubble/floating-bubble.js +56 -16
  86. package/cjs/components/form/form-array.d.ts +19 -0
  87. package/cjs/components/form/form-array.js +52 -0
  88. package/cjs/components/form/form-item.css +5 -1
  89. package/cjs/components/form/form-item.js +24 -8
  90. package/cjs/components/form/form.css +4 -0
  91. package/cjs/components/form/form.js +17 -6
  92. package/cjs/components/form/index.css +9 -1
  93. package/cjs/components/form/index.d.ts +2 -0
  94. package/cjs/components/form/index.js +3 -0
  95. package/cjs/components/image-uploader/image-uploader.d.ts +1 -1
  96. package/cjs/components/image-uploader/image-uploader.js +17 -1
  97. package/cjs/components/infinite-scroll/infinite-scroll.js +23 -19
  98. package/cjs/components/modal/modal.js +0 -1
  99. package/cjs/components/notice-bar/notice-bar.js +1 -1
  100. package/cjs/components/popover/index.d.ts +7 -2
  101. package/cjs/components/popover/normalize-placement.d.ts +2 -0
  102. package/cjs/components/popover/normalize-placement.js +22 -0
  103. package/cjs/components/popover/popover.css +0 -84
  104. package/cjs/components/popover/popover.d.ts +11 -5
  105. package/cjs/components/popover/popover.js +126 -22
  106. package/cjs/components/popover/wrapper.d.ts +7 -0
  107. package/cjs/components/popover/wrapper.js +41 -0
  108. package/cjs/components/pull-to-refresh/pull-to-refresh.js +24 -9
  109. package/cjs/components/radio/radio.js +16 -4
  110. package/cjs/components/search-bar/search-bar.js +0 -1
  111. package/cjs/components/swiper/swiper.js +1 -1
  112. package/cjs/components/text-area/text-area.css +4 -1
  113. package/cjs/components/text-area/text-area.d.ts +2 -2
  114. package/cjs/utils/use-props-value.d.ts +2 -1
  115. package/cjs/utils/use-props-value.js +4 -2
  116. package/es/components/avatar/avatar.js +1 -0
  117. package/es/components/calendar/calendar.js +23 -19
  118. package/es/components/cascader-view/cascader-view.d.ts +1 -0
  119. package/es/components/cascader-view/use-cascader-value-extend.js +23 -0
  120. package/es/components/check-list/check-list-item.js +1 -1
  121. package/es/components/checkbox/checkbox.js +17 -5
  122. package/es/components/floating-bubble/floating-bubble.d.ts +2 -0
  123. package/es/components/floating-bubble/floating-bubble.js +57 -17
  124. package/es/components/form/form-array.d.ts +19 -0
  125. package/es/components/form/form-array.js +38 -0
  126. package/es/components/form/form-item.css +5 -1
  127. package/es/components/form/form-item.js +22 -8
  128. package/es/components/form/form.css +4 -0
  129. package/es/components/form/form.js +16 -6
  130. package/es/components/form/index.css +9 -1
  131. package/es/components/form/index.d.ts +2 -0
  132. package/es/components/form/index.js +2 -0
  133. package/es/components/image-uploader/image-uploader.d.ts +1 -1
  134. package/es/components/image-uploader/image-uploader.js +17 -1
  135. package/es/components/infinite-scroll/infinite-scroll.js +22 -19
  136. package/es/components/modal/modal.js +0 -1
  137. package/es/components/notice-bar/notice-bar.js +1 -1
  138. package/es/components/popover/index.d.ts +7 -2
  139. package/es/components/popover/normalize-placement.d.ts +2 -0
  140. package/es/components/popover/normalize-placement.js +15 -0
  141. package/es/components/popover/popover.css +0 -84
  142. package/es/components/popover/popover.d.ts +11 -5
  143. package/es/components/popover/popover.js +118 -22
  144. package/es/components/popover/wrapper.d.ts +7 -0
  145. package/es/components/popover/wrapper.js +28 -0
  146. package/es/components/pull-to-refresh/pull-to-refresh.js +24 -9
  147. package/es/components/radio/radio.js +17 -5
  148. package/es/components/search-bar/search-bar.js +0 -1
  149. package/es/components/swiper/swiper.js +1 -1
  150. package/es/components/text-area/text-area.css +4 -1
  151. package/es/components/text-area/text-area.d.ts +2 -2
  152. package/es/utils/use-props-value.d.ts +2 -1
  153. package/es/utils/use-props-value.js +4 -2
  154. package/package.json +2 -2
  155. package/umd/antd-mobile.js +1 -1
  156. package/umd/antd-mobile.js.LICENSE.txt +0 -24
@@ -3,16 +3,21 @@ import './popover.less';
3
3
  import './popover-menu.less';
4
4
  export type { PopoverProps, PopoverRef } from './popover';
5
5
  export type { PopoverMenuProps, Action } from './popover-menu';
6
+ export declare type Placement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
7
+ export declare type DeprecatedPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
6
8
  declare const _default: import("react").ForwardRefExoticComponent<{
9
+ defaultVisible?: boolean | undefined;
10
+ visible?: boolean | undefined;
11
+ onVisibleChange?: ((visible: boolean) => void) | undefined;
7
12
  getContainer?: import("../../utils/render-to-container").GetContainer | undefined;
8
13
  destroyOnHide?: boolean | undefined;
9
14
  children: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
10
15
  mode?: "dark" | "light" | undefined;
11
16
  trigger?: "click" | undefined;
12
- placement?: "left" | "right" | "bottom" | "top" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | undefined;
17
+ placement?: DeprecatedPlacement | Placement | undefined;
13
18
  stopPropagation?: "click"[] | undefined;
14
19
  content: import("react").ReactNode;
15
- } & Pick<import("rc-tooltip/lib/Tooltip").TooltipProps, "visible" | "align" | "defaultVisible" | "onVisibleChange"> & import("../../utils/native-props").NativeProps<"--z-index"> & import("react").RefAttributes<import("./popover").PopoverRef>> & {
20
+ } & import("../../utils/native-props").NativeProps<"--z-index"> & import("react").RefAttributes<import("./popover").PopoverRef>> & {
16
21
  Menu: import("react").ForwardRefExoticComponent<Omit<import("./popover").PopoverProps, "content"> & {
17
22
  actions: import("./popover-menu").Action[];
18
23
  onAction?: ((item: import("./popover-menu").Action) => void) | undefined;
@@ -0,0 +1,2 @@
1
+ import { DeprecatedPlacement, Placement } from './index';
2
+ export declare function normalizePlacement(placement: Placement | DeprecatedPlacement): Placement;
@@ -0,0 +1,15 @@
1
+ const record = {
2
+ 'topLeft': 'top-start',
3
+ 'topRight': 'top-end',
4
+ 'bottomLeft': 'bottom-start',
5
+ 'bottomRight': 'bottom-end',
6
+ 'leftTop': 'left-start',
7
+ 'leftBottom': 'left-end',
8
+ 'rightTop': 'right-start',
9
+ 'rightBottom': 'right-end'
10
+ };
11
+ export function normalizePlacement(placement) {
12
+ var _a;
13
+
14
+ return (_a = record[placement]) !== null && _a !== void 0 ? _a : placement;
15
+ }
@@ -34,110 +34,6 @@
34
34
  display: none;
35
35
  }
36
36
 
37
- .adm-popover-placement-top,
38
- .adm-popover-placement-topLeft,
39
- .adm-popover-placement-topRight {
40
- padding-bottom: var(--arrow-size);
41
- }
42
-
43
- .adm-popover-placement-top .adm-popover-arrow,
44
- .adm-popover-placement-topLeft .adm-popover-arrow,
45
- .adm-popover-placement-topRight .adm-popover-arrow {
46
- bottom: 0;
47
- --arrow-icon-rotate: 0deg;
48
- }
49
-
50
- .adm-popover-placement-top .adm-popover-arrow {
51
- left: 50%;
52
- transform: translateX(-50%);
53
- }
54
-
55
- .adm-popover-placement-topLeft .adm-popover-arrow {
56
- left: 24px;
57
- }
58
-
59
- .adm-popover-placement-topRight .adm-popover-arrow {
60
- right: 24px;
61
- }
62
-
63
- .adm-popover-placement-right,
64
- .adm-popover-placement-rightTop,
65
- .adm-popover-placement-rightBottom {
66
- padding-left: var(--arrow-size);
67
- }
68
-
69
- .adm-popover-placement-right .adm-popover-arrow,
70
- .adm-popover-placement-rightTop .adm-popover-arrow,
71
- .adm-popover-placement-rightBottom .adm-popover-arrow {
72
- left: 0;
73
- --arrow-icon-rotate: 90deg;
74
- }
75
-
76
- .adm-popover-placement-right .adm-popover-arrow {
77
- top: 50%;
78
- transform: translateY(-50%);
79
- }
80
-
81
- .adm-popover-placement-rightTop .adm-popover-arrow {
82
- top: 24px;
83
- }
84
-
85
- .adm-popover-placement-rightBottom .adm-popover-arrow {
86
- bottom: 24px;
87
- }
88
-
89
- .adm-popover-placement-bottom,
90
- .adm-popover-placement-bottomLeft,
91
- .adm-popover-placement-bottomRight {
92
- padding-top: var(--arrow-size);
93
- }
94
-
95
- .adm-popover-placement-bottom .adm-popover-arrow,
96
- .adm-popover-placement-bottomLeft .adm-popover-arrow,
97
- .adm-popover-placement-bottomRight .adm-popover-arrow {
98
- top: 0;
99
- --arrow-icon-rotate: 180deg;
100
- }
101
-
102
- .adm-popover-placement-bottom .adm-popover-arrow {
103
- left: 50%;
104
- transform: translateX(-50%);
105
- }
106
-
107
- .adm-popover-placement-bottomLeft .adm-popover-arrow {
108
- left: 24px;
109
- }
110
-
111
- .adm-popover-placement-bottomRight .adm-popover-arrow {
112
- right: 24px;
113
- }
114
-
115
- .adm-popover-placement-left,
116
- .adm-popover-placement-leftTop,
117
- .adm-popover-placement-leftBottom {
118
- padding-right: var(--arrow-size);
119
- }
120
-
121
- .adm-popover-placement-left .adm-popover-arrow,
122
- .adm-popover-placement-leftTop .adm-popover-arrow,
123
- .adm-popover-placement-leftBottom .adm-popover-arrow {
124
- right: 0;
125
- --arrow-icon-rotate: 270deg;
126
- }
127
-
128
- .adm-popover-placement-left .adm-popover-arrow {
129
- top: 50%;
130
- transform: translateY(-50%);
131
- }
132
-
133
- .adm-popover-placement-leftTop .adm-popover-arrow {
134
- top: 24px;
135
- }
136
-
137
- .adm-popover-placement-leftBottom .adm-popover-arrow {
138
- bottom: 24px;
139
- }
140
-
141
37
  .adm-popover-inner {
142
38
  background-color: var(--background);
143
39
  background-clip: padding-box;
@@ -1,30 +1,36 @@
1
1
  import React, { ReactElement } from 'react';
2
- import type { TooltipProps } from 'rc-tooltip/lib/Tooltip';
3
2
  import { NativeProps } from '../../utils/native-props';
4
3
  import { PropagationEvent } from '../../utils/with-stop-propagation';
5
4
  import { GetContainer } from '../../utils/render-to-container';
5
+ import { DeprecatedPlacement, Placement } from './index';
6
6
  export declare type PopoverProps = {
7
+ defaultVisible?: boolean;
8
+ visible?: boolean;
9
+ onVisibleChange?: (visible: boolean) => void;
7
10
  getContainer?: GetContainer;
8
11
  destroyOnHide?: boolean;
9
12
  children: ReactElement;
10
13
  mode?: 'light' | 'dark';
11
14
  trigger?: 'click';
12
- placement?: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
15
+ placement?: Placement | DeprecatedPlacement;
13
16
  stopPropagation?: PropagationEvent[];
14
17
  content: React.ReactNode;
15
- } & Pick<TooltipProps, 'defaultVisible' | 'visible' | 'onVisibleChange' | 'align'> & NativeProps<'--z-index'>;
18
+ } & NativeProps<'--z-index'>;
16
19
  export declare type PopoverRef = {
17
20
  show: () => void;
18
21
  hide: () => void;
19
22
  visible: boolean;
20
23
  };
21
24
  export declare const Popover: React.ForwardRefExoticComponent<{
25
+ defaultVisible?: boolean | undefined;
26
+ visible?: boolean | undefined;
27
+ onVisibleChange?: ((visible: boolean) => void) | undefined;
22
28
  getContainer?: GetContainer | undefined;
23
29
  destroyOnHide?: boolean | undefined;
24
30
  children: ReactElement;
25
31
  mode?: "dark" | "light" | undefined;
26
32
  trigger?: "click" | undefined;
27
- placement?: "left" | "right" | "bottom" | "top" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | undefined;
33
+ placement?: DeprecatedPlacement | Placement | undefined;
28
34
  stopPropagation?: "click"[] | undefined;
29
35
  content: React.ReactNode;
30
- } & Pick<TooltipProps, "visible" | "align" | "defaultVisible" | "onVisibleChange"> & NativeProps<"--z-index"> & React.RefAttributes<PopoverRef>>;
36
+ } & NativeProps<"--z-index"> & React.RefAttributes<PopoverRef>>;
@@ -1,10 +1,18 @@
1
- import React, { forwardRef, useImperativeHandle } from 'react';
2
- import Tooltip from 'rc-tooltip';
1
+ import { __awaiter } from "tslib";
2
+ import React, { forwardRef, useImperativeHandle, useRef, useState, useEffect } from 'react';
3
3
  import classNames from 'classnames';
4
4
  import { usePropsValue } from '../../utils/use-props-value';
5
5
  import { mergeProps } from '../../utils/with-default-props';
6
+ import { withNativeProps } from '../../utils/native-props';
6
7
  import { withStopPropagation } from '../../utils/with-stop-propagation';
7
8
  import { Arrow } from './arrow';
9
+ import { renderToContainer } from '../../utils/render-to-container';
10
+ import { arrow, computePosition, flip, offset, autoUpdate, hide, shift, limitShift } from '@floating-ui/dom';
11
+ import { Wrapper } from './wrapper';
12
+ import { useShouldRender } from '../../utils/should-render';
13
+ import { useClickAway, useIsomorphicLayoutEffect } from 'ahooks';
14
+ import { normalizePlacement } from './normalize-placement';
15
+ import { convertPx } from '../../utils/convert-px';
8
16
  const classPrefix = `adm-popover`;
9
17
  const defaultProps = {
10
18
  placement: 'top',
@@ -13,12 +21,11 @@ const defaultProps = {
13
21
  getContainer: () => document.body
14
22
  };
15
23
  export const Popover = forwardRef((p, ref) => {
16
- var _a;
17
-
18
24
  const props = mergeProps(defaultProps, p);
19
25
  const {
20
26
  mode = 'light'
21
27
  } = props;
28
+ const placement = normalizePlacement(props.placement);
22
29
  const [visible, setVisible] = usePropsValue({
23
30
  value: props.visible,
24
31
  defaultValue: props.defaultVisible,
@@ -31,23 +38,112 @@ export const Popover = forwardRef((p, ref) => {
31
38
  visible
32
39
  };
33
40
  }, [visible]);
34
- const overlay = withStopPropagation(props.stopPropagation, React.createElement("div", {
41
+ const targetRef = useRef(null);
42
+ const floatingRef = useRef(null);
43
+ const arrowRef = useRef(null);
44
+ const floating = withStopPropagation(props.stopPropagation, withNativeProps(props, React.createElement("div", {
45
+ className: classNames(classPrefix, `${classPrefix}-${mode}`, !visible && `${classPrefix}-hidden`),
46
+ ref: floatingRef
47
+ }, React.createElement("div", {
48
+ className: `${classPrefix}-arrow`,
49
+ ref: arrowRef
50
+ }, React.createElement(Arrow, {
51
+ className: `${classPrefix}-arrow-icon`
52
+ })), React.createElement("div", {
53
+ className: `${classPrefix}-inner`
54
+ }, React.createElement("div", {
35
55
  className: `${classPrefix}-inner-content`
36
- }, props.content));
37
- return React.createElement(Tooltip, Object.assign({}, props, {
38
- placement: props.placement,
39
- align: props.align,
40
- overlayClassName: classNames(`${classPrefix}-${mode}`, props.className),
41
- overlayStyle: props.style,
42
- destroyTooltipOnHide: props.destroyOnHide,
43
- prefixCls: classPrefix,
44
- getTooltipContainer: props.getContainer || (() => document.body),
45
- visible: visible,
46
- arrowContent: React.createElement(Arrow, {
47
- className: `${classPrefix}-arrow-icon`
48
- }),
49
- onVisibleChange: setVisible,
50
- trigger: (_a = props.trigger) !== null && _a !== void 0 ? _a : [],
51
- overlay: overlay
52
- }), props.children);
56
+ }, props.content)))));
57
+ const [targetElement, setTargetElement] = useState(null);
58
+
59
+ function update() {
60
+ var _a, _b, _c;
61
+
62
+ return __awaiter(this, void 0, void 0, function* () {
63
+ const target = (_b = (_a = targetRef.current) === null || _a === void 0 ? void 0 : _a.element) !== null && _b !== void 0 ? _b : null;
64
+ const floating = floatingRef.current;
65
+ const arrowElement = arrowRef.current;
66
+ setTargetElement(target);
67
+ if (!target || !floating || !arrowElement) return;
68
+ const {
69
+ x,
70
+ y,
71
+ placement: realPlacement,
72
+ middlewareData
73
+ } = yield computePosition(target, floating, {
74
+ placement,
75
+ middleware: [offset(convertPx(12)), shift({
76
+ padding: convertPx(4),
77
+ crossAxis: false,
78
+ limiter: limitShift()
79
+ }), flip(), hide(), arrow({
80
+ element: arrowElement,
81
+ padding: convertPx(12)
82
+ })]
83
+ });
84
+ Object.assign(floating.style, {
85
+ left: `${x}px`,
86
+ top: `${y}px`
87
+ });
88
+ const side = realPlacement.split('-')[0];
89
+ const arrowSide = {
90
+ top: 'bottom',
91
+ right: 'left',
92
+ bottom: 'top',
93
+ left: 'right'
94
+ }[side];
95
+ const {
96
+ x: arrowX,
97
+ y: arrowY
98
+ } = (_c = middlewareData.arrow) !== null && _c !== void 0 ? _c : {};
99
+ Object.assign(arrowElement.style, {
100
+ left: arrowX != null ? `${arrowX}px` : '',
101
+ top: arrowY != null ? `${arrowY}px` : '',
102
+ right: '',
103
+ bottom: '',
104
+ [arrowSide]: `-${convertPx(8)}px`
105
+ });
106
+ const arrowRotate = {
107
+ top: '0deg',
108
+ bottom: '180deg',
109
+ left: '270deg',
110
+ right: '90deg'
111
+ }[side];
112
+ arrowElement.style.setProperty('--arrow-icon-rotate', arrowRotate);
113
+ });
114
+ }
115
+
116
+ useIsomorphicLayoutEffect(() => {
117
+ update();
118
+ });
119
+ useEffect(() => {
120
+ if (!targetElement) return;
121
+ if (!props.trigger) return;
122
+
123
+ function handleClick() {
124
+ setVisible(v => !v);
125
+ }
126
+
127
+ targetElement.addEventListener('click', handleClick);
128
+ return () => {
129
+ targetElement.removeEventListener('click', handleClick);
130
+ };
131
+ }, [targetElement, props.trigger]);
132
+ useEffect(() => {
133
+ const floatingElement = floatingRef.current;
134
+ if (!targetElement || !floatingElement) return;
135
+ return autoUpdate(targetElement, floatingElement, update);
136
+ }, [targetElement]);
137
+ useClickAway(() => {
138
+ if (!props.trigger) return;
139
+ setVisible(false);
140
+ }, () => {
141
+ var _a;
142
+
143
+ return (_a = targetRef.current) === null || _a === void 0 ? void 0 : _a.element;
144
+ });
145
+ const shouldRender = useShouldRender(visible, false, props.destroyOnHide);
146
+ return React.createElement(React.Fragment, null, React.createElement(Wrapper, {
147
+ ref: targetRef
148
+ }, props.children), shouldRender && renderToContainer(props.getContainer, floating));
53
149
  });
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ export declare class Wrapper extends React.Component<{}, {}> {
3
+ element: Element | null;
4
+ componentDidMount(): void;
5
+ componentDidUpdate(): void;
6
+ render(): React.ReactNode;
7
+ }
@@ -0,0 +1,28 @@
1
+ import React from 'react';
2
+ import { findDOMNode } from 'react-dom';
3
+ export class Wrapper extends React.Component {
4
+ constructor() {
5
+ super(...arguments);
6
+ this.element = null;
7
+ }
8
+
9
+ componentDidMount() {
10
+ this.componentDidUpdate();
11
+ }
12
+
13
+ componentDidUpdate() {
14
+ // eslint-disable-next-line
15
+ const node = findDOMNode(this);
16
+
17
+ if (node instanceof Element) {
18
+ this.element = node;
19
+ } else {
20
+ this.element = null;
21
+ }
22
+ }
23
+
24
+ render() {
25
+ return React.Children.only(this.props.children);
26
+ }
27
+
28
+ }
@@ -103,15 +103,30 @@ export const PullToRefresh = p => {
103
103
 
104
104
  const [, y] = state.movement;
105
105
 
106
- if (state.first) {
107
- const element = elementRef.current;
108
- if (!element) return;
109
- const scrollParent = getScrollParent(element);
110
- if (!scrollParent) return;
111
- const top = 'scrollTop' in scrollParent ? scrollParent.scrollTop : scrollParent.scrollY;
112
-
113
- if (top <= 0 && y > 0) {
114
- pullingRef.current = true;
106
+ if (state.first && y > 0) {
107
+ const target = state.event.target;
108
+ if (!target || !(target instanceof Element)) return;
109
+ let scrollParent = getScrollParent(target);
110
+
111
+ while (true) {
112
+ if (!scrollParent) return;
113
+ const scrollTop = getScrollTop(scrollParent);
114
+
115
+ if (scrollTop > 0) {
116
+ return;
117
+ }
118
+
119
+ if (scrollParent instanceof Window) {
120
+ break;
121
+ }
122
+
123
+ scrollParent = getScrollParent(scrollParent.parentNode);
124
+ }
125
+
126
+ pullingRef.current = true;
127
+
128
+ function getScrollTop(element) {
129
+ return 'scrollTop' in element ? element.scrollTop : element.scrollY;
115
130
  }
116
131
  }
117
132
 
@@ -1,4 +1,4 @@
1
- import React, { useContext } from 'react';
1
+ import React, { useContext, useEffect, useRef } from 'react';
2
2
  import { withNativeProps } from '../../utils/native-props';
3
3
  import classNames from 'classnames';
4
4
  import { RadioGroupContext } from './group-context';
@@ -64,22 +64,34 @@ export const Radio = p => {
64
64
  }, checked && React.createElement(CheckIcon, null));
65
65
  };
66
66
 
67
+ const inputRef = useRef(null);
68
+ const labelRef = useRef(null);
69
+ useEffect(() => {
70
+ var _a;
71
+
72
+ (_a = labelRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('click', e => {
73
+ if (e.target !== inputRef.current) {
74
+ e.stopPropagation();
75
+ e.stopImmediatePropagation();
76
+ }
77
+ }, {
78
+ capture: false
79
+ });
80
+ }, []);
67
81
  return withNativeProps(props, React.createElement("label", {
82
+ ref: labelRef,
68
83
  className: classNames(classPrefix, {
69
84
  [`${classPrefix}-checked`]: checked,
70
85
  [`${classPrefix}-disabled`]: disabled,
71
86
  [`${classPrefix}-block`]: props.block
72
87
  })
73
88
  }, React.createElement("input", {
89
+ ref: inputRef,
74
90
  type: 'radio',
75
91
  checked: checked,
76
92
  onChange: e => {
77
93
  setChecked(e.target.checked);
78
94
  },
79
- onClick: e => {
80
- e.stopPropagation();
81
- e.nativeEvent.stopImmediatePropagation();
82
- },
83
95
  disabled: disabled,
84
96
  id: props.id
85
97
  }), renderIcon(), props.children && React.createElement("div", {
@@ -45,7 +45,6 @@ export const SearchBar = forwardRef((p, ref) => {
45
45
 
46
46
  const renderCancelButton = () => {
47
47
  let isShowCancel = false;
48
- const showCancelButton = props.showCancelButton;
49
48
 
50
49
  if (typeof props.showCancelButton === 'function') {
51
50
  isShowCancel = props.showCancelButton(hasFocus, value);
@@ -230,7 +230,7 @@ export const Swiper = forwardRef(staged((p, ref) => {
230
230
  style: {
231
231
  [isVertical ? 'y' : 'x']: position.to(position => `${-position}%`)
232
232
  }
233
- }, React.Children.map(validChildren, (child, index) => {
233
+ }, React.Children.map(validChildren, child => {
234
234
  return React.createElement("div", {
235
235
  className: 'adm-swiper-slide'
236
236
  }, child);
@@ -3,6 +3,8 @@
3
3
  --color: var(--adm-color-text);
4
4
  --placeholder-color: var(--adm-color-light);
5
5
  --disabled-color: var(--adm-color-weak);
6
+ --text-align: left;
7
+ --count-text-align: right;
6
8
  width: 100%;
7
9
  max-width: 100%;
8
10
  max-height: 100%;
@@ -27,6 +29,7 @@
27
29
  outline: none;
28
30
  appearance: none;
29
31
  min-height: 1.5em;
32
+ text-align: var(--text-align);
30
33
  }
31
34
 
32
35
  .adm-text-area-element::placeholder {
@@ -62,7 +65,7 @@
62
65
  }
63
66
 
64
67
  .adm-text-area-count {
65
- text-align: right;
68
+ text-align: var(--count-text-align);
66
69
  color: var(--adm-color-weak);
67
70
  font-size: 34px;
68
71
  padding-top: 16px;
@@ -14,7 +14,7 @@ export declare type TextAreaProps = Pick<React.DetailedHTMLProps<React.TextareaH
14
14
  maxRows?: number;
15
15
  };
16
16
  id?: string;
17
- } & NativeProps<'--font-size' | '--color' | '--placeholder-color' | '--disabled-color'>;
17
+ } & NativeProps<'--font-size' | '--color' | '--placeholder-color' | '--disabled-color' | '--text-align' | '--count-text-align'>;
18
18
  export declare type TextAreaRef = {
19
19
  clear: () => void;
20
20
  focus: () => void;
@@ -33,4 +33,4 @@ export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.Detail
33
33
  maxRows?: number | undefined;
34
34
  } | undefined;
35
35
  id?: string | undefined;
36
- } & NativeProps<"--color" | "--font-size" | "--placeholder-color" | "--disabled-color"> & React.RefAttributes<TextAreaRef>>;
36
+ } & NativeProps<"--color" | "--font-size" | "--placeholder-color" | "--text-align" | "--disabled-color" | "--count-text-align"> & React.RefAttributes<TextAreaRef>>;
@@ -1,7 +1,8 @@
1
+ import { SetStateAction } from 'react';
1
2
  declare type Options<T> = {
2
3
  value?: T;
3
4
  defaultValue: T;
4
5
  onChange?: (v: T) => void;
5
6
  };
6
- export declare function usePropsValue<T>(options: Options<T>): readonly [T, (this: unknown, v: T) => void];
7
+ export declare function usePropsValue<T>(options: Options<T>): readonly [T, (this: unknown, v: SetStateAction<T>) => void];
7
8
  export {};
@@ -14,12 +14,14 @@ export function usePropsValue(options) {
14
14
  }
15
15
 
16
16
  const setState = useMemoizedFn(v => {
17
+ const nextValue = typeof v === 'function' ? v(stateRef.current) : v;
18
+
17
19
  if (value === undefined) {
18
- stateRef.current = v;
20
+ stateRef.current = nextValue;
19
21
  update();
20
22
  }
21
23
 
22
- onChange === null || onChange === void 0 ? void 0 : onChange(v);
24
+ onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
23
25
  });
24
26
  return [stateRef.current, setState];
25
27
  }
package/2x/package.json CHANGED
@@ -1,7 +1,8 @@
1
1
  {
2
2
  "name": "antd-mobile",
3
- "version": "5.3.0",
3
+ "version": "5.5.0",
4
4
  "dependencies": {
5
+ "@floating-ui/dom": "^0.3.1",
5
6
  "@react-spring/web": "^9.4.3",
6
7
  "@types/resize-observer-browser": "^0.1.7",
7
8
  "@use-gesture/react": "^10.2.7",
@@ -12,7 +13,6 @@
12
13
  "dayjs": "^1.10.8",
13
14
  "lodash": "^4.17.21",
14
15
  "rc-field-form": "^1.23.1",
15
- "rc-tooltip": "^5.1.1",
16
16
  "staged-components": "^1.1.2",
17
17
  "tslib": "^2.3.1",
18
18
  "use-async-memo": "^1.2.3"
@@ -32,6 +32,7 @@ const Avatar = p => {
32
32
  placeholder: props.fallback,
33
33
  alt: props.alt,
34
34
  lazy: props.lazy,
35
+ fit: props.fit,
35
36
  onClick: props.onClick,
36
37
  onError: props.onError
37
38
  }));
@@ -50,7 +50,29 @@ const Calendar = (0, _react.forwardRef)((p, ref) => {
50
50
  if (item) markItems.unshift(item);
51
51
  }
52
52
 
53
- const [current, setCurrent] = (0, _react.useState)(() => (0, _dayjs.default)().date(1));
53
+ const dateRange = (0, _react.useMemo)(() => {
54
+ var _a, _b, _c, _d;
55
+
56
+ if (props.selectionMode === 'single') {
57
+ const value = (_b = (_a = props.value) !== null && _a !== void 0 ? _a : props.defaultValue) !== null && _b !== void 0 ? _b : null;
58
+ return [value, value];
59
+ } else if (props.selectionMode === 'range') {
60
+ return (_d = (_c = props.value) !== null && _c !== void 0 ? _c : props.defaultValue) !== null && _d !== void 0 ? _d : [null, null];
61
+ } else {
62
+ return [null, null];
63
+ }
64
+ }, [props.selectionMode, props.value, props.defaultValue]);
65
+ const [begin, setBegin] = (0, _react.useState)(null);
66
+ const [end, setEnd] = (0, _react.useState)(null);
67
+ (0, _ahooks.useIsomorphicLayoutEffect)(() => {
68
+ setBegin(dateRange[0] ? (0, _dayjs.default)(dateRange[0]) : null);
69
+ setEnd(dateRange[1] ? (0, _dayjs.default)(dateRange[1]) : null);
70
+ }, [dateRange[0], dateRange[1]]);
71
+ const [current, setCurrent] = (0, _react.useState)(() => {
72
+ var _a;
73
+
74
+ return (0, _dayjs.default)((_a = dateRange[0]) !== null && _a !== void 0 ? _a : today).date(1);
75
+ });
54
76
  (0, _ahooks.useUpdateEffect)(() => {
55
77
  var _a;
56
78
 
@@ -102,25 +124,6 @@ const Calendar = (0, _react.forwardRef)((p, ref) => {
102
124
  }
103
125
  }, _react.default.createElement(_arrowLeftDouble.ArrowLeftDouble, null)));
104
126
 
105
- const dateRange = (0, _react.useMemo)(() => {
106
- var _a, _b, _c, _d;
107
-
108
- if (props.selectionMode === 'single') {
109
- const value = (_b = (_a = props.value) !== null && _a !== void 0 ? _a : props.defaultValue) !== null && _b !== void 0 ? _b : null;
110
- return [value, value];
111
- } else if (props.selectionMode === 'range') {
112
- return (_d = (_c = props.value) !== null && _c !== void 0 ? _c : props.defaultValue) !== null && _d !== void 0 ? _d : [null, null];
113
- } else {
114
- return [null, null];
115
- }
116
- }, [props.selectionMode, props.value, props.defaultValue]);
117
- const [begin, setBegin] = (0, _react.useState)(null);
118
- const [end, setEnd] = (0, _react.useState)(null);
119
- (0, _ahooks.useIsomorphicLayoutEffect)(() => {
120
- setBegin(dateRange[0] ? (0, _dayjs.default)(dateRange[0]) : null);
121
- setEnd(dateRange[1] ? (0, _dayjs.default)(dateRange[1]) : null);
122
- }, [dateRange[0], dateRange[1]]);
123
-
124
127
  function renderCells() {
125
128
  var _a;
126
129
 
@@ -9,6 +9,7 @@ export declare type CascaderOption = {
9
9
  };
10
10
  export declare type CascaderValueExtend = {
11
11
  items: (CascaderOption | null)[];
12
+ isLeaf: boolean;
12
13
  };
13
14
  export declare type CascaderViewProps = {
14
15
  options: CascaderOption[];