antd-mobile 5.12.3 → 5.12.4

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 (70) hide show
  1. package/2x/cjs/components/badge/badge.d.ts +1 -1
  2. package/2x/cjs/components/badge/badge.js +3 -1
  3. package/2x/cjs/components/badge/index.d.ts +2 -4
  4. package/2x/cjs/components/badge/index.js +2 -4
  5. package/2x/cjs/components/button/button.d.ts +6 -4
  6. package/2x/cjs/components/button/button.js +5 -1
  7. package/2x/cjs/components/image/broken-image-icon.d.ts +1 -0
  8. package/2x/cjs/components/image/broken-image-icon.js +21 -0
  9. package/2x/cjs/components/image/image-icon.d.ts +1 -0
  10. package/2x/cjs/components/image/image-icon.js +21 -0
  11. package/2x/cjs/components/image/image.css +4 -2
  12. package/2x/cjs/components/image/image.js +6 -4
  13. package/2x/cjs/components/infinite-scroll/infinite-scroll.js +8 -6
  14. package/2x/cjs/components/search-bar/search-bar.js +3 -0
  15. package/2x/cjs/components/side-bar/side-bar.d.ts +2 -1
  16. package/2x/cjs/components/toast/toast.css +1 -1
  17. package/2x/es/components/badge/badge.d.ts +1 -1
  18. package/2x/es/components/badge/badge.js +1 -1
  19. package/2x/es/components/badge/index.d.ts +2 -4
  20. package/2x/es/components/badge/index.js +2 -3
  21. package/2x/es/components/button/button.d.ts +6 -4
  22. package/2x/es/components/button/button.js +5 -1
  23. package/2x/es/components/image/broken-image-icon.d.ts +1 -0
  24. package/2x/es/components/image/broken-image-icon.js +9 -0
  25. package/2x/es/components/image/image-icon.d.ts +1 -0
  26. package/2x/es/components/image/image-icon.js +9 -0
  27. package/2x/es/components/image/image.css +4 -2
  28. package/2x/es/components/image/image.js +4 -3
  29. package/2x/es/components/infinite-scroll/infinite-scroll.js +8 -6
  30. package/2x/es/components/search-bar/search-bar.js +3 -0
  31. package/2x/es/components/side-bar/side-bar.d.ts +2 -1
  32. package/2x/es/components/toast/toast.css +1 -1
  33. package/2x/package.json +2 -2
  34. package/bundle/antd-mobile.cjs.js +39 -16
  35. package/bundle/antd-mobile.es.js +40 -17
  36. package/bundle/style.css +5 -3
  37. package/cjs/components/badge/badge.d.ts +1 -1
  38. package/cjs/components/badge/badge.js +3 -1
  39. package/cjs/components/badge/index.d.ts +2 -4
  40. package/cjs/components/badge/index.js +2 -4
  41. package/cjs/components/button/button.d.ts +6 -4
  42. package/cjs/components/button/button.js +5 -1
  43. package/cjs/components/image/broken-image-icon.d.ts +1 -0
  44. package/cjs/components/image/broken-image-icon.js +21 -0
  45. package/cjs/components/image/image-icon.d.ts +1 -0
  46. package/cjs/components/image/image-icon.js +21 -0
  47. package/cjs/components/image/image.css +4 -2
  48. package/cjs/components/image/image.js +6 -4
  49. package/cjs/components/infinite-scroll/infinite-scroll.js +8 -6
  50. package/cjs/components/search-bar/search-bar.js +3 -0
  51. package/cjs/components/side-bar/side-bar.d.ts +2 -1
  52. package/cjs/components/toast/toast.css +1 -1
  53. package/es/components/badge/badge.d.ts +1 -1
  54. package/es/components/badge/badge.js +1 -1
  55. package/es/components/badge/index.d.ts +2 -4
  56. package/es/components/badge/index.js +2 -3
  57. package/es/components/button/button.d.ts +6 -4
  58. package/es/components/button/button.js +5 -1
  59. package/es/components/image/broken-image-icon.d.ts +1 -0
  60. package/es/components/image/broken-image-icon.js +9 -0
  61. package/es/components/image/image-icon.d.ts +1 -0
  62. package/es/components/image/image-icon.js +9 -0
  63. package/es/components/image/image.css +4 -2
  64. package/es/components/image/image.js +4 -3
  65. package/es/components/infinite-scroll/infinite-scroll.js +8 -6
  66. package/es/components/search-bar/search-bar.js +3 -0
  67. package/es/components/side-bar/side-bar.d.ts +2 -1
  68. package/es/components/toast/toast.css +1 -1
  69. package/package.json +2 -2
  70. package/umd/antd-mobile.js +1 -1
@@ -1,6 +1,6 @@
1
1
  import React, { FC } from 'react';
2
2
  import { NativeProps } from '../../utils/native-props';
3
- export declare const dot: unique symbol;
3
+ export declare const dot: JSX.Element;
4
4
  export declare type BadgeProps = {
5
5
  content?: React.ReactNode | typeof dot;
6
6
  color?: string;
@@ -14,7 +14,9 @@ var _nativeProps = require("../../utils/native-props");
14
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
15
 
16
16
  const classPrefix = `adm-badge`;
17
- const dot = Symbol();
17
+
18
+ const dot = _react.default.createElement(_react.default.Fragment, null);
19
+
18
20
  exports.dot = dot;
19
21
 
20
22
  const Badge = props => {
@@ -1,9 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import './badge.less';
3
- import { dot } from './badge';
4
3
  export type { BadgeProps } from './badge';
5
- declare type Properties = {
6
- dot: typeof dot;
4
+ declare const _default: import("react").FC<import("./badge").BadgeProps> & {
5
+ dot: JSX.Element;
7
6
  };
8
- declare const _default: import("react").FC<import("./badge").BadgeProps> & Properties;
9
7
  export default _default;
@@ -11,10 +11,8 @@ var _badge2 = require("./badge");
11
11
 
12
12
  var _attachPropertiesToComponent = require("../../utils/attach-properties-to-component");
13
13
 
14
- const properties = {
14
+ var _default = (0, _attachPropertiesToComponent.attachPropertiesToComponent)(_badge2.Badge, {
15
15
  dot: _badge2.dot
16
- };
17
-
18
- var _default = (0, _attachPropertiesToComponent.attachPropertiesToComponent)(_badge2.Badge, properties);
16
+ });
19
17
 
20
18
  exports.default = _default;
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { NativeProps } from '../../utils/native-props';
3
+ declare type NativeButtonProps = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
3
4
  export declare type ButtonProps = {
4
5
  color?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
5
6
  fill?: 'solid' | 'outline' | 'none';
@@ -9,11 +10,11 @@ export declare type ButtonProps = {
9
10
  loadingText?: string;
10
11
  loadingIcon?: React.ReactNode;
11
12
  disabled?: boolean;
12
- onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | Promise<void>;
13
+ onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | Promise<void> | unknown;
13
14
  type?: 'submit' | 'reset' | 'button';
14
15
  shape?: 'default' | 'rounded' | 'rectangular';
15
16
  children?: React.ReactNode;
16
- } & NativeProps<'--text-color' | '--background-color' | '--border-radius' | '--border-width' | '--border-style' | '--border-color'>;
17
+ } & Pick<NativeButtonProps, 'onMouseDown' | 'onMouseUp' | 'onTouchStart' | 'onTouchEnd'> & NativeProps<'--text-color' | '--background-color' | '--border-radius' | '--border-width' | '--border-style' | '--border-color'>;
17
18
  export declare type ButtonRef = {
18
19
  nativeElement: HTMLButtonElement | null;
19
20
  };
@@ -26,8 +27,9 @@ export declare const Button: React.ForwardRefExoticComponent<{
26
27
  loadingText?: string | undefined;
27
28
  loadingIcon?: React.ReactNode;
28
29
  disabled?: boolean | undefined;
29
- onClick?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | Promise<void>) | undefined;
30
+ onClick?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | Promise<void> | unknown) | undefined;
30
31
  type?: "reset" | "submit" | "button" | undefined;
31
32
  shape?: "default" | "rounded" | "rectangular" | undefined;
32
33
  children?: React.ReactNode;
33
- } & NativeProps<"--text-color" | "--background-color" | "--border-radius" | "--border-width" | "--border-style" | "--border-color"> & React.RefAttributes<ButtonRef>>;
34
+ } & Pick<NativeButtonProps, "onMouseDown" | "onMouseUp" | "onTouchEnd" | "onTouchStart"> & NativeProps<"--text-color" | "--background-color" | "--border-radius" | "--border-width" | "--border-style" | "--border-color"> & React.RefAttributes<ButtonRef>>;
35
+ export {};
@@ -81,7 +81,11 @@ const Button = (0, _react.forwardRef)((p, ref) => {
81
81
  [`${classPrefix}-large`]: props.size === 'large',
82
82
  [`${classPrefix}-loading`]: loading
83
83
  }, `${classPrefix}-shape-${props.shape}`),
84
- disabled: disabled
84
+ disabled: disabled,
85
+ onMouseDown: props.onMouseDown,
86
+ onMouseUp: props.onMouseUp,
87
+ onTouchStart: props.onTouchStart,
88
+ onTouchEnd: props.onTouchEnd
85
89
  }, loading ? _react.default.createElement("div", {
86
90
  className: `${classPrefix}-loading-wrapper`
87
91
  }, props.loadingIcon, props.loadingText) : props.children));
@@ -0,0 +1 @@
1
+ export declare const BrokenImageIcon: () => JSX.Element;
@@ -0,0 +1,21 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.BrokenImageIcon = void 0;
7
+
8
+ var _react = _interopRequireDefault(require("react"));
9
+
10
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
+
12
+ const BrokenImageIcon = () => _react.default.createElement("svg", {
13
+ viewBox: '0 0 48 48',
14
+ xmlns: 'http://www.w3.org/2000/svg'
15
+ }, _react.default.createElement("path", {
16
+ d: 'M19.233 6.233 17.42 9.08l-10.817.001a.665.665 0 0 0-.647.562l-.007.096V34.9l5.989-8.707a2.373 2.373 0 0 1 1.801-1.005 2.415 2.415 0 0 1 1.807.625l.126.127 4.182 4.525 2.267-3.292 5.461 7.841-4.065 7.375H6.604c-1.86 0-3.382-1.47-3.482-3.317l-.005-.192V9.744c0-1.872 1.461-3.405 3.296-3.505l.19-.005h12.63Zm22.163 0c1.86 0 3.382 1.472 3.482 3.314l.005.192v29.14a3.507 3.507 0 0 1-3.3 3.505l-.191.006H27.789l3.63-6.587.06-.119a1.87 1.87 0 0 0-.163-1.853l-6.928-9.949 3.047-4.422a2.374 2.374 0 0 1 1.96-1.01 2.4 2.4 0 0 1 1.86.87l.106.14L42.05 34.89V9.74a.664.664 0 0 0-.654-.658H21.855l1.812-2.848h17.73Zm-28.305 5.611c.794 0 1.52.298 2.07.788l-.843 1.325-.067.114a1.87 1.87 0 0 0 .11 1.959l.848 1.217c-.556.515-1.3.83-2.118.83a3.122 3.122 0 0 1-3.117-3.116 3.119 3.119 0 0 1 3.117-3.117Z',
17
+ fill: '#DBDBDB',
18
+ fillRule: 'nonzero'
19
+ }));
20
+
21
+ exports.BrokenImageIcon = BrokenImageIcon;
@@ -0,0 +1 @@
1
+ export declare const ImageIcon: () => JSX.Element;
@@ -0,0 +1,21 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.ImageIcon = void 0;
7
+
8
+ var _react = _interopRequireDefault(require("react"));
9
+
10
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
+
12
+ const ImageIcon = () => _react.default.createElement("svg", {
13
+ viewBox: '0 0 48 48',
14
+ xmlns: 'http://www.w3.org/2000/svg'
15
+ }, _react.default.createElement("path", {
16
+ d: 'M41.396 6.234c1.923 0 3.487 1.574 3.487 3.505v29.14c0 1.937-1.568 3.51-3.491 3.51H6.604c-1.923 0-3.487-1.573-3.487-3.51V9.745c0-1.936 1.564-3.51 3.487-3.51Zm0 2.847H6.604c-.355 0-.654.3-.654.658V34.9l5.989-8.707a2.373 2.373 0 0 1 1.801-1.005 2.405 2.405 0 0 1 1.933.752l4.182 4.525 7.58-11.005a2.374 2.374 0 0 1 1.96-1.01c.79 0 1.532.38 1.966 1.01L42.05 34.89V9.74a.664.664 0 0 0-.654-.658Zm-28.305 2.763a3.119 3.119 0 0 1 3.117 3.117 3.119 3.119 0 0 1-3.117 3.117 3.122 3.122 0 0 1-3.117-3.117 3.119 3.119 0 0 1 3.117-3.117Z',
17
+ fill: '#DBDBDB',
18
+ fillRule: 'nonzero'
19
+ }));
20
+
21
+ exports.ImageIcon = ImageIcon;
@@ -14,13 +14,15 @@
14
14
 
15
15
  .adm-image-tip {
16
16
  position: relative;
17
- background-color: #f3f3f3;
17
+ background-color: #f5f5f5;
18
18
  height: 100%;
19
19
  min-height: 48px;
20
20
  min-width: 48px;
21
21
  }
22
22
 
23
- .adm-image-tip > .antd-mobile-icon {
23
+ .adm-image-tip > svg {
24
+ width: 48px;
25
+ height: 48px;
24
26
  position: absolute;
25
27
  left: 50%;
26
28
  top: 50%;
@@ -11,8 +11,6 @@ var _react = _interopRequireWildcard(require("react"));
11
11
 
12
12
  var _nativeProps = require("../../utils/native-props");
13
13
 
14
- var _antdMobileIcons = require("antd-mobile-icons");
15
-
16
14
  var _stagedComponents = require("staged-components");
17
15
 
18
16
  var _toCssLength = require("../../utils/to-css-length");
@@ -21,6 +19,10 @@ var _lazyDetector = require("./lazy-detector");
21
19
 
22
20
  var _useIsomorphicUpdateLayoutEffect = require("../../utils/use-isomorphic-update-layout-effect");
23
21
 
22
+ var _imageIcon = require("./image-icon");
23
+
24
+ var _brokenImageIcon = require("./broken-image-icon");
25
+
24
26
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
25
27
 
26
28
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -30,10 +32,10 @@ const defaultProps = {
30
32
  fit: 'fill',
31
33
  placeholder: _react.default.createElement("div", {
32
34
  className: `${classPrefix}-tip`
33
- }, _react.default.createElement(_antdMobileIcons.PictureOutline, null)),
35
+ }, _react.default.createElement(_imageIcon.ImageIcon, null)),
34
36
  fallback: _react.default.createElement("div", {
35
37
  className: `${classPrefix}-tip`
36
- }, _react.default.createElement(_antdMobileIcons.PictureWrongOutline, null)),
38
+ }, _react.default.createElement(_brokenImageIcon.BrokenImageIcon, null)),
37
39
  lazy: false
38
40
  };
39
41
  const Image = (0, _stagedComponents.staged)(p => {
@@ -47,9 +47,11 @@ const InfiniteScroll = p => {
47
47
  threshold: 250
48
48
  }, p);
49
49
  const doLoadMore = (0, _ahooks.useLockFn)(() => props.loadMore());
50
- const elementRef = (0, _react.useRef)(null);
50
+ const elementRef = (0, _react.useRef)(null); // Prevent duplicated trigger of `check` function
51
+
51
52
  const [flag, setFlag] = (0, _react.useState)({});
52
53
  const nextFlagRef = (0, _react.useRef)(flag);
54
+ const [scrollParent, setScrollParent] = (0, _react.useState)();
53
55
  const check = (0, _ahooks.useMemoizedFn)(() => (0, _tslib.__awaiter)(void 0, void 0, void 0, function* () {
54
56
  if (nextFlagRef.current !== flag) return;
55
57
  if (!props.hasMore) return;
@@ -57,6 +59,7 @@ const InfiniteScroll = p => {
57
59
  if (!element) return;
58
60
  if (!element.offsetParent) return;
59
61
  const parent = (0, _getScrollParent.getScrollParent)(element);
62
+ setScrollParent(parent);
60
63
  if (!parent) return;
61
64
  const rect = element.getBoundingClientRect();
62
65
  const elementTop = rect.top;
@@ -76,18 +79,17 @@ const InfiniteScroll = p => {
76
79
  (0, _react.useEffect)(() => {
77
80
  const element = elementRef.current;
78
81
  if (!element) return;
79
- const parent = (0, _getScrollParent.getScrollParent)(element);
80
- if (!parent) return;
82
+ if (!scrollParent) return;
81
83
 
82
84
  function onScroll() {
83
85
  check();
84
86
  }
85
87
 
86
- parent.addEventListener('scroll', onScroll);
88
+ scrollParent.addEventListener('scroll', onScroll);
87
89
  return () => {
88
- parent.removeEventListener('scroll', onScroll);
90
+ scrollParent.removeEventListener('scroll', onScroll);
89
91
  };
90
- }, []);
92
+ }, [scrollParent]);
91
93
  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
92
94
  className: classPrefix,
93
95
  ref: elementRef
@@ -96,6 +96,9 @@ const SearchBar = (0, _react.forwardRef)((p, ref) => {
96
96
 
97
97
  (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.blur();
98
98
  (_c = props.onCancel) === null || _c === void 0 ? void 0 : _c.call(props);
99
+ },
100
+ onMouseDown: e => {
101
+ e.preventDefault();
99
102
  }
100
103
  }, props.cancelText));
101
104
  };
@@ -1,10 +1,11 @@
1
1
  import { FC, ReactNode } from 'react';
2
2
  import React from 'react';
3
+ import { BadgeProps } from '../badge';
3
4
  import { NativeProps } from '../../utils/native-props';
4
5
  export declare type SideBarItemProps = {
5
6
  title?: ReactNode;
6
7
  disabled?: boolean;
7
- badge?: ReactNode;
8
+ badge?: BadgeProps['content'];
8
9
  } & NativeProps;
9
10
  export declare const SideBarItem: FC<SideBarItemProps>;
10
11
  export declare type SideBarProps = {
@@ -14,7 +14,7 @@
14
14
  transform: translate(-50%, -50%);
15
15
  width: auto;
16
16
  min-width: 192px;
17
- max-width: 70%;
17
+ max-width: 400px;
18
18
  max-height: 70%;
19
19
  overflow: auto;
20
20
  color: white;
@@ -1,6 +1,6 @@
1
1
  import React, { FC } from 'react';
2
2
  import { NativeProps } from '../../utils/native-props';
3
- export declare const dot: unique symbol;
3
+ export declare const dot: JSX.Element;
4
4
  export declare type BadgeProps = {
5
5
  content?: React.ReactNode | typeof dot;
6
6
  color?: string;
@@ -2,7 +2,7 @@ import classNames from 'classnames';
2
2
  import React from 'react';
3
3
  import { withNativeProps } from '../../utils/native-props';
4
4
  const classPrefix = `adm-badge`;
5
- export const dot = Symbol();
5
+ export const dot = React.createElement(React.Fragment, null);
6
6
  export const Badge = props => {
7
7
  const {
8
8
  content,
@@ -1,9 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import './badge.less';
3
- import { dot } from './badge';
4
3
  export type { BadgeProps } from './badge';
5
- declare type Properties = {
6
- dot: typeof dot;
4
+ declare const _default: import("react").FC<import("./badge").BadgeProps> & {
5
+ dot: JSX.Element;
7
6
  };
8
- declare const _default: import("react").FC<import("./badge").BadgeProps> & Properties;
9
7
  export default _default;
@@ -1,7 +1,6 @@
1
1
  import "./badge.css";
2
2
  import { Badge, dot } from './badge';
3
3
  import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
4
- const properties = {
4
+ export default attachPropertiesToComponent(Badge, {
5
5
  dot
6
- };
7
- export default attachPropertiesToComponent(Badge, properties);
6
+ });
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { NativeProps } from '../../utils/native-props';
3
+ declare type NativeButtonProps = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
3
4
  export declare type ButtonProps = {
4
5
  color?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
5
6
  fill?: 'solid' | 'outline' | 'none';
@@ -9,11 +10,11 @@ export declare type ButtonProps = {
9
10
  loadingText?: string;
10
11
  loadingIcon?: React.ReactNode;
11
12
  disabled?: boolean;
12
- onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | Promise<void>;
13
+ onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | Promise<void> | unknown;
13
14
  type?: 'submit' | 'reset' | 'button';
14
15
  shape?: 'default' | 'rounded' | 'rectangular';
15
16
  children?: React.ReactNode;
16
- } & NativeProps<'--text-color' | '--background-color' | '--border-radius' | '--border-width' | '--border-style' | '--border-color'>;
17
+ } & Pick<NativeButtonProps, 'onMouseDown' | 'onMouseUp' | 'onTouchStart' | 'onTouchEnd'> & NativeProps<'--text-color' | '--background-color' | '--border-radius' | '--border-width' | '--border-style' | '--border-color'>;
17
18
  export declare type ButtonRef = {
18
19
  nativeElement: HTMLButtonElement | null;
19
20
  };
@@ -26,8 +27,9 @@ export declare const Button: React.ForwardRefExoticComponent<{
26
27
  loadingText?: string | undefined;
27
28
  loadingIcon?: React.ReactNode;
28
29
  disabled?: boolean | undefined;
29
- onClick?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | Promise<void>) | undefined;
30
+ onClick?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | Promise<void> | unknown) | undefined;
30
31
  type?: "reset" | "submit" | "button" | undefined;
31
32
  shape?: "default" | "rounded" | "rectangular" | undefined;
32
33
  children?: React.ReactNode;
33
- } & NativeProps<"--text-color" | "--background-color" | "--border-radius" | "--border-width" | "--border-style" | "--border-color"> & React.RefAttributes<ButtonRef>>;
34
+ } & Pick<NativeButtonProps, "onMouseDown" | "onMouseUp" | "onTouchEnd" | "onTouchStart"> & NativeProps<"--text-color" | "--background-color" | "--border-radius" | "--border-width" | "--border-style" | "--border-color"> & React.RefAttributes<ButtonRef>>;
35
+ export {};
@@ -61,7 +61,11 @@ export const Button = forwardRef((p, ref) => {
61
61
  [`${classPrefix}-large`]: props.size === 'large',
62
62
  [`${classPrefix}-loading`]: loading
63
63
  }, `${classPrefix}-shape-${props.shape}`),
64
- disabled: disabled
64
+ disabled: disabled,
65
+ onMouseDown: props.onMouseDown,
66
+ onMouseUp: props.onMouseUp,
67
+ onTouchStart: props.onTouchStart,
68
+ onTouchEnd: props.onTouchEnd
65
69
  }, loading ? React.createElement("div", {
66
70
  className: `${classPrefix}-loading-wrapper`
67
71
  }, props.loadingIcon, props.loadingText) : props.children));
@@ -0,0 +1 @@
1
+ export declare const BrokenImageIcon: () => JSX.Element;
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+ export const BrokenImageIcon = () => React.createElement("svg", {
3
+ viewBox: '0 0 48 48',
4
+ xmlns: 'http://www.w3.org/2000/svg'
5
+ }, React.createElement("path", {
6
+ d: 'M19.233 6.233 17.42 9.08l-10.817.001a.665.665 0 0 0-.647.562l-.007.096V34.9l5.989-8.707a2.373 2.373 0 0 1 1.801-1.005 2.415 2.415 0 0 1 1.807.625l.126.127 4.182 4.525 2.267-3.292 5.461 7.841-4.065 7.375H6.604c-1.86 0-3.382-1.47-3.482-3.317l-.005-.192V9.744c0-1.872 1.461-3.405 3.296-3.505l.19-.005h12.63Zm22.163 0c1.86 0 3.382 1.472 3.482 3.314l.005.192v29.14a3.507 3.507 0 0 1-3.3 3.505l-.191.006H27.789l3.63-6.587.06-.119a1.87 1.87 0 0 0-.163-1.853l-6.928-9.949 3.047-4.422a2.374 2.374 0 0 1 1.96-1.01 2.4 2.4 0 0 1 1.86.87l.106.14L42.05 34.89V9.74a.664.664 0 0 0-.654-.658H21.855l1.812-2.848h17.73Zm-28.305 5.611c.794 0 1.52.298 2.07.788l-.843 1.325-.067.114a1.87 1.87 0 0 0 .11 1.959l.848 1.217c-.556.515-1.3.83-2.118.83a3.122 3.122 0 0 1-3.117-3.116 3.119 3.119 0 0 1 3.117-3.117Z',
7
+ fill: '#DBDBDB',
8
+ fillRule: 'nonzero'
9
+ }));
@@ -0,0 +1 @@
1
+ export declare const ImageIcon: () => JSX.Element;
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+ export const ImageIcon = () => React.createElement("svg", {
3
+ viewBox: '0 0 48 48',
4
+ xmlns: 'http://www.w3.org/2000/svg'
5
+ }, React.createElement("path", {
6
+ d: 'M41.396 6.234c1.923 0 3.487 1.574 3.487 3.505v29.14c0 1.937-1.568 3.51-3.491 3.51H6.604c-1.923 0-3.487-1.573-3.487-3.51V9.745c0-1.936 1.564-3.51 3.487-3.51Zm0 2.847H6.604c-.355 0-.654.3-.654.658V34.9l5.989-8.707a2.373 2.373 0 0 1 1.801-1.005 2.405 2.405 0 0 1 1.933.752l4.182 4.525 7.58-11.005a2.374 2.374 0 0 1 1.96-1.01c.79 0 1.532.38 1.966 1.01L42.05 34.89V9.74a.664.664 0 0 0-.654-.658Zm-28.305 2.763a3.119 3.119 0 0 1 3.117 3.117 3.119 3.119 0 0 1-3.117 3.117 3.122 3.122 0 0 1-3.117-3.117 3.119 3.119 0 0 1 3.117-3.117Z',
7
+ fill: '#DBDBDB',
8
+ fillRule: 'nonzero'
9
+ }));
@@ -14,13 +14,15 @@
14
14
 
15
15
  .adm-image-tip {
16
16
  position: relative;
17
- background-color: #f3f3f3;
17
+ background-color: #f5f5f5;
18
18
  height: 100%;
19
19
  min-height: 48px;
20
20
  min-width: 48px;
21
21
  }
22
22
 
23
- .adm-image-tip > .antd-mobile-icon {
23
+ .adm-image-tip > svg {
24
+ width: 48px;
25
+ height: 48px;
24
26
  position: absolute;
25
27
  left: 50%;
26
28
  top: 50%;
@@ -1,20 +1,21 @@
1
1
  import { mergeProps } from '../../utils/with-default-props';
2
2
  import React, { useState, useRef } from 'react';
3
3
  import { withNativeProps } from '../../utils/native-props';
4
- import { PictureOutline, PictureWrongOutline } from 'antd-mobile-icons';
5
4
  import { staged } from 'staged-components';
6
5
  import { toCSSLength } from '../../utils/to-css-length';
7
6
  import { LazyDetector } from './lazy-detector';
8
7
  import { useIsomorphicUpdateLayoutEffect } from '../../utils/use-isomorphic-update-layout-effect';
8
+ import { ImageIcon } from './image-icon';
9
+ import { BrokenImageIcon } from './broken-image-icon';
9
10
  const classPrefix = `adm-image`;
10
11
  const defaultProps = {
11
12
  fit: 'fill',
12
13
  placeholder: React.createElement("div", {
13
14
  className: `${classPrefix}-tip`
14
- }, React.createElement(PictureOutline, null)),
15
+ }, React.createElement(ImageIcon, null)),
15
16
  fallback: React.createElement("div", {
16
17
  className: `${classPrefix}-tip`
17
- }, React.createElement(PictureWrongOutline, null)),
18
+ }, React.createElement(BrokenImageIcon, null)),
18
19
  lazy: false
19
20
  };
20
21
  export const Image = staged(p => {
@@ -27,9 +27,11 @@ export const InfiniteScroll = p => {
27
27
  threshold: 250
28
28
  }, p);
29
29
  const doLoadMore = useLockFn(() => props.loadMore());
30
- const elementRef = useRef(null);
30
+ const elementRef = useRef(null); // Prevent duplicated trigger of `check` function
31
+
31
32
  const [flag, setFlag] = useState({});
32
33
  const nextFlagRef = useRef(flag);
34
+ const [scrollParent, setScrollParent] = useState();
33
35
  const check = useMemoizedFn(() => __awaiter(void 0, void 0, void 0, function* () {
34
36
  if (nextFlagRef.current !== flag) return;
35
37
  if (!props.hasMore) return;
@@ -37,6 +39,7 @@ export const InfiniteScroll = p => {
37
39
  if (!element) return;
38
40
  if (!element.offsetParent) return;
39
41
  const parent = getScrollParent(element);
42
+ setScrollParent(parent);
40
43
  if (!parent) return;
41
44
  const rect = element.getBoundingClientRect();
42
45
  const elementTop = rect.top;
@@ -56,18 +59,17 @@ export const InfiniteScroll = p => {
56
59
  useEffect(() => {
57
60
  const element = elementRef.current;
58
61
  if (!element) return;
59
- const parent = getScrollParent(element);
60
- if (!parent) return;
62
+ if (!scrollParent) return;
61
63
 
62
64
  function onScroll() {
63
65
  check();
64
66
  }
65
67
 
66
- parent.addEventListener('scroll', onScroll);
68
+ scrollParent.addEventListener('scroll', onScroll);
67
69
  return () => {
68
- parent.removeEventListener('scroll', onScroll);
70
+ scrollParent.removeEventListener('scroll', onScroll);
69
71
  };
70
- }, []);
72
+ }, [scrollParent]);
71
73
  return withNativeProps(props, React.createElement("div", {
72
74
  className: classPrefix,
73
75
  ref: elementRef
@@ -74,6 +74,9 @@ export const SearchBar = forwardRef((p, ref) => {
74
74
 
75
75
  (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.blur();
76
76
  (_c = props.onCancel) === null || _c === void 0 ? void 0 : _c.call(props);
77
+ },
78
+ onMouseDown: e => {
79
+ e.preventDefault();
77
80
  }
78
81
  }, props.cancelText));
79
82
  };
@@ -1,10 +1,11 @@
1
1
  import { FC, ReactNode } from 'react';
2
2
  import React from 'react';
3
+ import { BadgeProps } from '../badge';
3
4
  import { NativeProps } from '../../utils/native-props';
4
5
  export declare type SideBarItemProps = {
5
6
  title?: ReactNode;
6
7
  disabled?: boolean;
7
- badge?: ReactNode;
8
+ badge?: BadgeProps['content'];
8
9
  } & NativeProps;
9
10
  export declare const SideBarItem: FC<SideBarItemProps>;
10
11
  export declare type SideBarProps = {
@@ -14,7 +14,7 @@
14
14
  transform: translate(-50%, -50%);
15
15
  width: auto;
16
16
  min-width: 192px;
17
- max-width: 70%;
17
+ max-width: 400px;
18
18
  max-height: 70%;
19
19
  overflow: auto;
20
20
  color: white;
package/2x/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "antd-mobile",
3
- "version": "5.12.3",
3
+ "version": "5.12.4",
4
4
  "dependencies": {
5
5
  "@floating-ui/dom": "^0.4.5",
6
6
  "@react-spring/web": "^9.4.5",
7
- "@use-gesture/react": "10.2.12",
7
+ "@use-gesture/react": "10.2.14",
8
8
  "ahooks": "^3.3.10",
9
9
  "antd-mobile-icons": "^0.2.2",
10
10
  "antd-mobile-v5-count": "^1.0.1",