antd-mobile 5.37.1 → 5.38.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (210) hide show
  1. package/2x/README.md +2 -2
  2. package/2x/bundle/antd-mobile.cjs.development.js +2276 -1113
  3. package/2x/bundle/antd-mobile.cjs.js +7 -7
  4. package/2x/bundle/antd-mobile.es.development.js +2279 -1116
  5. package/2x/bundle/antd-mobile.es.js +7914 -7141
  6. package/2x/bundle/antd-mobile.umd.development.js +2276 -1113
  7. package/2x/bundle/antd-mobile.umd.js +7 -7
  8. package/2x/bundle/css-vars-patch.css +42 -0
  9. package/2x/bundle/style.css +142 -4
  10. package/2x/cjs/components/calendar-picker-view/calendar-picker-view.d.ts +1 -1
  11. package/2x/cjs/components/calendar-picker-view/calendar-picker-view.js +31 -10
  12. package/2x/cjs/components/card/card.css +1 -0
  13. package/2x/cjs/components/card/card.d.ts +2 -1
  14. package/2x/cjs/components/card/card.js +7 -3
  15. package/2x/cjs/components/card/card.patch.css +8 -0
  16. package/2x/cjs/components/date-picker/date-picker-quarter-utils.d.ts +7 -0
  17. package/2x/cjs/components/date-picker/date-picker-quarter-utils.js +77 -0
  18. package/2x/cjs/components/date-picker/date-picker-utils.d.ts +3 -2
  19. package/2x/cjs/components/date-picker/date-picker-utils.js +7 -0
  20. package/2x/cjs/components/ellipsis/ellipsis.css +1 -0
  21. package/2x/cjs/components/ellipsis/ellipsis.d.ts +1 -1
  22. package/2x/cjs/components/ellipsis/ellipsis.js +28 -124
  23. package/2x/cjs/components/ellipsis/useMeasure.d.ts +2 -0
  24. package/2x/cjs/components/ellipsis/useMeasure.js +108 -0
  25. package/2x/cjs/components/ellipsis/~ellipsis.d.ts +15 -0
  26. package/2x/cjs/components/ellipsis/~ellipsis.js +161 -0
  27. package/2x/cjs/components/image-uploader/image-uploader.js +2 -2
  28. package/2x/cjs/components/input/input.d.ts +2 -2
  29. package/2x/cjs/components/input/input.js +1 -0
  30. package/2x/cjs/components/notice-bar/notice-bar.css +30 -4
  31. package/2x/cjs/components/notice-bar/notice-bar.d.ts +5 -1
  32. package/2x/cjs/components/notice-bar/notice-bar.js +7 -3
  33. package/2x/cjs/components/search-bar/search-bar.d.ts +2 -2
  34. package/2x/cjs/components/search-bar/search-bar.js +1 -0
  35. package/2x/cjs/components/segmented/index.d.ts +4 -0
  36. package/2x/cjs/components/segmented/index.js +10 -0
  37. package/2x/cjs/components/segmented/segmented.css +113 -0
  38. package/2x/cjs/components/segmented/segmented.d.ts +21 -0
  39. package/2x/cjs/components/segmented/segmented.js +57 -0
  40. package/2x/cjs/components/segmented/segmented.patch.css +41 -0
  41. package/2x/cjs/components/tab-bar/tab-bar.d.ts +1 -0
  42. package/2x/cjs/components/tab-bar/tab-bar.js +2 -0
  43. package/2x/cjs/components/tabs/tabs.js +1 -1
  44. package/2x/cjs/components/toast/methods.js +9 -3
  45. package/2x/cjs/global/css-vars-patch.css +42 -0
  46. package/2x/cjs/index.d.ts +2 -0
  47. package/2x/cjs/index.js +7 -0
  48. package/2x/cjs/locales/cnr-ME.d.ts +139 -0
  49. package/2x/cjs/locales/cnr-ME.js +149 -0
  50. package/2x/cjs/locales/hr-HR.d.ts +139 -0
  51. package/2x/cjs/locales/hr-HR.js +149 -0
  52. package/2x/cjs/locales/kk-KZ.js +6 -6
  53. package/2x/cjs/locales/sr-RS.d.ts +139 -0
  54. package/2x/cjs/locales/sr-RS.js +149 -0
  55. package/2x/cjs/utils/render-imperatively.d.ts +1 -0
  56. package/2x/cjs/utils/render-imperatively.js +6 -3
  57. package/2x/es/components/calendar-picker-view/calendar-picker-view.d.ts +1 -1
  58. package/2x/es/components/calendar-picker-view/calendar-picker-view.js +32 -11
  59. package/2x/es/components/card/card.css +1 -0
  60. package/2x/es/components/card/card.d.ts +2 -1
  61. package/2x/es/components/card/card.js +7 -3
  62. package/2x/es/components/card/card.patch.css +8 -0
  63. package/2x/es/components/date-picker/date-picker-quarter-utils.d.ts +7 -0
  64. package/2x/es/components/date-picker/date-picker-quarter-utils.js +68 -0
  65. package/2x/es/components/date-picker/date-picker-utils.d.ts +3 -2
  66. package/2x/es/components/date-picker/date-picker-utils.js +7 -0
  67. package/2x/es/components/ellipsis/ellipsis.css +1 -0
  68. package/2x/es/components/ellipsis/ellipsis.d.ts +1 -1
  69. package/2x/es/components/ellipsis/ellipsis.js +28 -122
  70. package/2x/es/components/ellipsis/useMeasure.d.ts +2 -0
  71. package/2x/es/components/ellipsis/useMeasure.js +101 -0
  72. package/2x/es/components/ellipsis/~ellipsis.d.ts +15 -0
  73. package/2x/es/components/ellipsis/~ellipsis.js +151 -0
  74. package/2x/es/components/image-uploader/image-uploader.js +2 -2
  75. package/2x/es/components/input/input.d.ts +2 -2
  76. package/2x/es/components/input/input.js +1 -0
  77. package/2x/es/components/notice-bar/notice-bar.css +30 -4
  78. package/2x/es/components/notice-bar/notice-bar.d.ts +5 -1
  79. package/2x/es/components/notice-bar/notice-bar.js +7 -3
  80. package/2x/es/components/search-bar/search-bar.d.ts +2 -2
  81. package/2x/es/components/search-bar/search-bar.js +1 -0
  82. package/2x/es/components/segmented/index.d.ts +4 -0
  83. package/2x/es/components/segmented/index.js +3 -0
  84. package/2x/es/components/segmented/segmented.css +113 -0
  85. package/2x/es/components/segmented/segmented.d.ts +21 -0
  86. package/2x/es/components/segmented/segmented.js +48 -0
  87. package/2x/es/components/segmented/segmented.patch.css +41 -0
  88. package/2x/es/components/tab-bar/tab-bar.d.ts +1 -0
  89. package/2x/es/components/tab-bar/tab-bar.js +2 -0
  90. package/2x/es/components/tabs/tabs.js +1 -1
  91. package/2x/es/components/toast/methods.js +9 -3
  92. package/2x/es/global/css-vars-patch.css +42 -0
  93. package/2x/es/index.d.ts +2 -0
  94. package/2x/es/index.js +1 -0
  95. package/2x/es/locales/cnr-ME.d.ts +139 -0
  96. package/2x/es/locales/cnr-ME.js +142 -0
  97. package/2x/es/locales/hr-HR.d.ts +139 -0
  98. package/2x/es/locales/hr-HR.js +142 -0
  99. package/2x/es/locales/kk-KZ.js +6 -6
  100. package/2x/es/locales/sr-RS.d.ts +139 -0
  101. package/2x/es/locales/sr-RS.js +142 -0
  102. package/2x/es/utils/render-imperatively.d.ts +1 -0
  103. package/2x/es/utils/render-imperatively.js +6 -3
  104. package/2x/package.json +3 -2
  105. package/README.md +2 -2
  106. package/bundle/antd-mobile.cjs.development.js +2276 -1113
  107. package/bundle/antd-mobile.cjs.js +7 -7
  108. package/bundle/antd-mobile.compatible.umd.js +1 -1
  109. package/bundle/antd-mobile.es.development.js +2279 -1116
  110. package/bundle/antd-mobile.es.js +7914 -7141
  111. package/bundle/antd-mobile.umd.development.js +2276 -1113
  112. package/bundle/antd-mobile.umd.js +7 -7
  113. package/bundle/css-vars-patch.css +32 -0
  114. package/bundle/style.css +1 -1
  115. package/cjs/components/calendar-picker-view/calendar-picker-view.d.ts +1 -1
  116. package/cjs/components/calendar-picker-view/calendar-picker-view.js +31 -10
  117. package/cjs/components/card/card.css +1 -0
  118. package/cjs/components/card/card.d.ts +2 -1
  119. package/cjs/components/card/card.js +7 -3
  120. package/cjs/components/card/card.patch.css +6 -0
  121. package/cjs/components/date-picker/date-picker-quarter-utils.d.ts +7 -0
  122. package/cjs/components/date-picker/date-picker-quarter-utils.js +77 -0
  123. package/cjs/components/date-picker/date-picker-utils.d.ts +3 -2
  124. package/cjs/components/date-picker/date-picker-utils.js +7 -0
  125. package/cjs/components/ellipsis/ellipsis.css +1 -0
  126. package/cjs/components/ellipsis/ellipsis.d.ts +1 -1
  127. package/cjs/components/ellipsis/ellipsis.js +28 -124
  128. package/cjs/components/ellipsis/useMeasure.d.ts +2 -0
  129. package/cjs/components/ellipsis/useMeasure.js +108 -0
  130. package/cjs/components/ellipsis/~ellipsis.d.ts +15 -0
  131. package/cjs/components/ellipsis/~ellipsis.js +161 -0
  132. package/cjs/components/image-uploader/image-uploader.js +2 -2
  133. package/cjs/components/input/input.d.ts +2 -2
  134. package/cjs/components/input/input.js +1 -0
  135. package/cjs/components/notice-bar/notice-bar.css +25 -4
  136. package/cjs/components/notice-bar/notice-bar.d.ts +5 -1
  137. package/cjs/components/notice-bar/notice-bar.js +7 -3
  138. package/cjs/components/search-bar/search-bar.d.ts +2 -2
  139. package/cjs/components/search-bar/search-bar.js +1 -0
  140. package/cjs/components/segmented/index.d.ts +4 -0
  141. package/cjs/components/segmented/index.js +10 -0
  142. package/cjs/components/segmented/segmented.css +97 -0
  143. package/cjs/components/segmented/segmented.d.ts +21 -0
  144. package/cjs/components/segmented/segmented.js +57 -0
  145. package/cjs/components/segmented/segmented.patch.css +32 -0
  146. package/cjs/components/tab-bar/tab-bar.d.ts +1 -0
  147. package/cjs/components/tab-bar/tab-bar.js +2 -0
  148. package/cjs/components/tabs/tabs.js +1 -1
  149. package/cjs/components/toast/methods.js +9 -3
  150. package/cjs/global/css-vars-patch.css +32 -0
  151. package/cjs/index.d.ts +2 -0
  152. package/cjs/index.js +7 -0
  153. package/cjs/locales/cnr-ME.d.ts +139 -0
  154. package/cjs/locales/cnr-ME.js +149 -0
  155. package/cjs/locales/hr-HR.d.ts +139 -0
  156. package/cjs/locales/hr-HR.js +149 -0
  157. package/cjs/locales/kk-KZ.js +6 -6
  158. package/cjs/locales/sr-RS.d.ts +139 -0
  159. package/cjs/locales/sr-RS.js +149 -0
  160. package/cjs/utils/render-imperatively.d.ts +1 -0
  161. package/cjs/utils/render-imperatively.js +6 -3
  162. package/es/components/calendar-picker-view/calendar-picker-view.d.ts +1 -1
  163. package/es/components/calendar-picker-view/calendar-picker-view.js +32 -11
  164. package/es/components/card/card.css +1 -0
  165. package/es/components/card/card.d.ts +2 -1
  166. package/es/components/card/card.js +7 -3
  167. package/es/components/card/card.patch.css +6 -0
  168. package/es/components/date-picker/date-picker-quarter-utils.d.ts +7 -0
  169. package/es/components/date-picker/date-picker-quarter-utils.js +68 -0
  170. package/es/components/date-picker/date-picker-utils.d.ts +3 -2
  171. package/es/components/date-picker/date-picker-utils.js +7 -0
  172. package/es/components/ellipsis/ellipsis.css +1 -0
  173. package/es/components/ellipsis/ellipsis.d.ts +1 -1
  174. package/es/components/ellipsis/ellipsis.js +28 -122
  175. package/es/components/ellipsis/useMeasure.d.ts +2 -0
  176. package/es/components/ellipsis/useMeasure.js +101 -0
  177. package/es/components/ellipsis/~ellipsis.d.ts +15 -0
  178. package/es/components/ellipsis/~ellipsis.js +151 -0
  179. package/es/components/image-uploader/image-uploader.js +2 -2
  180. package/es/components/input/input.d.ts +2 -2
  181. package/es/components/input/input.js +1 -0
  182. package/es/components/notice-bar/notice-bar.css +25 -4
  183. package/es/components/notice-bar/notice-bar.d.ts +5 -1
  184. package/es/components/notice-bar/notice-bar.js +7 -3
  185. package/es/components/search-bar/search-bar.d.ts +2 -2
  186. package/es/components/search-bar/search-bar.js +1 -0
  187. package/es/components/segmented/index.d.ts +4 -0
  188. package/es/components/segmented/index.js +3 -0
  189. package/es/components/segmented/segmented.css +97 -0
  190. package/es/components/segmented/segmented.d.ts +21 -0
  191. package/es/components/segmented/segmented.js +48 -0
  192. package/es/components/segmented/segmented.patch.css +32 -0
  193. package/es/components/tab-bar/tab-bar.d.ts +1 -0
  194. package/es/components/tab-bar/tab-bar.js +2 -0
  195. package/es/components/tabs/tabs.js +1 -1
  196. package/es/components/toast/methods.js +9 -3
  197. package/es/global/css-vars-patch.css +32 -0
  198. package/es/index.d.ts +2 -0
  199. package/es/index.js +1 -0
  200. package/es/locales/cnr-ME.d.ts +139 -0
  201. package/es/locales/cnr-ME.js +142 -0
  202. package/es/locales/hr-HR.d.ts +139 -0
  203. package/es/locales/hr-HR.js +142 -0
  204. package/es/locales/kk-KZ.js +6 -6
  205. package/es/locales/sr-RS.d.ts +139 -0
  206. package/es/locales/sr-RS.js +142 -0
  207. package/es/utils/render-imperatively.d.ts +1 -0
  208. package/es/utils/render-imperatively.js +6 -3
  209. package/package.json +3 -2
  210. package/umd/antd-mobile.js +1 -1
@@ -4,16 +4,13 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.Ellipsis = void 0;
7
- var _react = _interopRequireWildcard(require("react"));
8
- var _runes = _interopRequireDefault(require("runes2"));
9
- var _withDefaultProps = require("../../utils/with-default-props");
7
+ var _react = _interopRequireDefault(require("react"));
10
8
  var _nativeProps = require("../../utils/native-props");
11
9
  var _useResizeEffect = require("../../utils/use-resize-effect");
12
- var _ahooks = require("ahooks");
10
+ var _withDefaultProps = require("../../utils/with-default-props");
13
11
  var _withStopPropagation = require("../../utils/with-stop-propagation");
12
+ var _useMeasure = _interopRequireDefault(require("./useMeasure"));
14
13
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
- 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); }
16
- 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; }
17
14
  const classPrefix = `adm-ellipsis`;
18
15
  const defaultProps = {
19
16
  direction: 'end',
@@ -27,135 +24,42 @@ const defaultProps = {
27
24
  };
28
25
  const Ellipsis = p => {
29
26
  const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
30
- const rootRef = (0, _react.useRef)(null);
31
- const expandElRef = (0, _react.useRef)(null);
32
- const collapseElRef = (0, _react.useRef)(null);
33
- const [ellipsised, setEllipsised] = (0, _react.useState)({});
34
- const [expanded, setExpanded] = (0, _react.useState)(props.defaultExpanded);
35
- const [exceeded, setExceeded] = (0, _react.useState)(false);
36
- const chars = (0, _react.useMemo)(() => (0, _runes.default)(props.content), [props.content]);
37
- function getSubString(start, end) {
38
- return chars.slice(start, end).join('');
39
- }
40
- function calcEllipsised() {
41
- var _a, _b;
42
- const root = rootRef.current;
43
- if (!root) return;
44
- const originDisplay = root.style.display;
45
- root.style.display = 'block';
46
- const originStyle = window.getComputedStyle(root);
47
- const container = document.createElement('div');
48
- const styleNames = Array.prototype.slice.apply(originStyle);
49
- styleNames.forEach(name => {
50
- container.style.setProperty(name, originStyle.getPropertyValue(name));
51
- });
52
- root.style.display = originDisplay;
53
- container.style.height = 'auto';
54
- container.style.minHeight = 'auto';
55
- container.style.maxHeight = 'auto';
56
- container.style.textOverflow = 'clip';
57
- container.style.webkitLineClamp = 'unset';
58
- container.style.display = 'block';
59
- const lineHeight = pxToNumber(originStyle.lineHeight);
60
- const maxHeight = Math.floor(lineHeight * (props.rows + 0.5) + pxToNumber(originStyle.paddingTop) + pxToNumber(originStyle.paddingBottom));
61
- container.innerText = props.content;
62
- document.body.appendChild(container);
63
- if (container.offsetHeight <= maxHeight) {
64
- setExceeded(false);
65
- } else {
66
- setExceeded(true);
67
- const end = props.content.length;
68
- const collapseEl = typeof props.collapseText === 'string' ? props.collapseText : (_a = collapseElRef.current) === null || _a === void 0 ? void 0 : _a.innerHTML;
69
- const expandEl = typeof props.expandText === 'string' ? props.expandText : (_b = expandElRef.current) === null || _b === void 0 ? void 0 : _b.innerHTML;
70
- const actionText = expanded ? collapseEl : expandEl;
71
- function check(left, right) {
72
- if (right - left <= 1) {
73
- if (props.direction === 'end') {
74
- return {
75
- leading: getSubString(0, left) + '...'
76
- };
77
- } else {
78
- return {
79
- tailing: '...' + getSubString(right, end)
80
- };
81
- }
82
- }
83
- const middle = Math.round((left + right) / 2);
84
- if (props.direction === 'end') {
85
- container.innerHTML = getSubString(0, middle) + '...' + actionText;
86
- } else {
87
- container.innerHTML = actionText + '...' + getSubString(middle, end);
88
- }
89
- if (container.offsetHeight <= maxHeight) {
90
- if (props.direction === 'end') {
91
- return check(middle, right);
92
- } else {
93
- return check(left, middle);
94
- }
95
- } else {
96
- if (props.direction === 'end') {
97
- return check(left, middle);
98
- } else {
99
- return check(middle, right);
100
- }
101
- }
102
- }
103
- function checkMiddle(leftPart, rightPart) {
104
- if (leftPart[1] - leftPart[0] <= 1 && rightPart[1] - rightPart[0] <= 1) {
105
- return {
106
- leading: getSubString(0, leftPart[0]) + '...',
107
- tailing: '...' + getSubString(rightPart[1], end)
108
- };
109
- }
110
- const leftPartMiddle = Math.floor((leftPart[0] + leftPart[1]) / 2);
111
- const rightPartMiddle = Math.ceil((rightPart[0] + rightPart[1]) / 2);
112
- container.innerHTML = getSubString(0, leftPartMiddle) + '...' + actionText + '...' + getSubString(rightPartMiddle, end);
113
- if (container.offsetHeight <= maxHeight) {
114
- return checkMiddle([leftPartMiddle, leftPart[1]], [rightPart[0], rightPartMiddle]);
115
- } else {
116
- return checkMiddle([leftPart[0], leftPartMiddle], [rightPartMiddle, rightPart[1]]);
117
- }
118
- }
119
- const middle = Math.floor((0 + end) / 2);
120
- const ellipsised = props.direction === 'middle' ? checkMiddle([0, middle], [middle, end]) : check(0, end);
121
- setEllipsised(ellipsised);
122
- }
123
- document.body.removeChild(container);
124
- }
125
- (0, _useResizeEffect.useResizeEffect)(calcEllipsised, rootRef);
126
- (0, _ahooks.useIsomorphicLayoutEffect)(() => {
127
- calcEllipsised();
128
- }, [props.content, props.direction, props.rows, props.expandText, props.collapseText]);
129
- const expandActionElement = !!props.expandText && (0, _withStopPropagation.withStopPropagation)(props.stopPropagationForActionButtons, _react.default.createElement("a", {
130
- ref: expandElRef,
27
+ const {
28
+ content,
29
+ direction,
30
+ rows,
31
+ expandText,
32
+ collapseText,
33
+ stopPropagationForActionButtons,
34
+ onContentClick,
35
+ defaultExpanded
36
+ } = props;
37
+ // ============================ Refs ============================
38
+ const rootRef = _react.default.useRef(null);
39
+ // ========================== Expanded ==========================
40
+ const [expanded, setExpanded] = _react.default.useState(defaultExpanded);
41
+ const expandNode = expandText ? (0, _withStopPropagation.withStopPropagation)(stopPropagationForActionButtons, _react.default.createElement("a", {
131
42
  onClick: () => {
132
43
  setExpanded(true);
133
44
  }
134
- }, props.expandText));
135
- const collapseActionElement = !!props.collapseText && (0, _withStopPropagation.withStopPropagation)(props.stopPropagationForActionButtons, _react.default.createElement("a", {
136
- ref: collapseElRef,
45
+ }, expandText)) : null;
46
+ const collapseNode = collapseText ? (0, _withStopPropagation.withStopPropagation)(stopPropagationForActionButtons, _react.default.createElement("a", {
137
47
  onClick: () => {
138
48
  setExpanded(false);
139
49
  }
140
- }, props.collapseText));
141
- const renderContent = () => {
142
- if (!exceeded) return props.content;
143
- if (expanded) return _react.default.createElement(_react.default.Fragment, null, props.content, collapseActionElement);
144
- return _react.default.createElement(_react.default.Fragment, null, ellipsised.leading, expandActionElement, ellipsised.tailing);
145
- };
50
+ }, collapseText)) : null;
51
+ // ========================== Ellipsis ==========================
52
+ const [measureNodes, forceResize] = (0, _useMeasure.default)(rootRef, content, rows, direction, expanded, expandNode, collapseNode);
53
+ (0, _useResizeEffect.useResizeEffect)(forceResize, rootRef);
54
+ // =========================== Render ===========================
146
55
  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
147
56
  ref: rootRef,
148
57
  className: classPrefix,
149
58
  onClick: e => {
150
59
  if (e.target === e.currentTarget) {
151
- props.onContentClick(e);
60
+ onContentClick(e);
152
61
  }
153
62
  }
154
- }, renderContent()));
63
+ }, measureNodes));
155
64
  };
156
- exports.Ellipsis = Ellipsis;
157
- function pxToNumber(value) {
158
- if (!value) return 0;
159
- const match = value.match(/^\d*(\.\d*)?/);
160
- return match ? Number(match[0]) : 0;
161
- }
65
+ exports.Ellipsis = Ellipsis;
@@ -0,0 +1,2 @@
1
+ import React from 'react';
2
+ export default function useMeasure(containerRef: React.RefObject<HTMLDivElement>, content: string, rows: number, direction: 'start' | 'end' | 'middle', expanded: boolean, expandNode: React.ReactElement | null, collapseNode: React.ReactElement | null): readonly [React.JSX.Element, () => void];
@@ -0,0 +1,108 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = useMeasure;
7
+ var _rcUtil = require("rc-util");
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var _runes = _interopRequireDefault(require("runes2"));
10
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
+ const ELLIPSIS_TEXT = '...';
12
+ const measureStyle = {
13
+ visibility: 'hidden',
14
+ whiteSpace: 'inherit',
15
+ lineHeight: 'inherit',
16
+ fontSize: 'inherit'
17
+ };
18
+ function useMeasure(containerRef, content, rows, direction, expanded, expandNode, collapseNode) {
19
+ const contentChars = _react.default.useMemo(() => (0, _runes.default)(content), [content]);
20
+ const [maxHeight, setMaxHeight] = _react.default.useState(0);
21
+ const [walkingIndexes, setWalkingIndexes] = _react.default.useState([0, 0]);
22
+ const midIndex = Math.ceil((walkingIndexes[0] + walkingIndexes[1]) / 2);
23
+ const [status, setStatus] = _react.default.useState(100 /* STABLE_NO_ELLIPSIS */);
24
+ // ============================ Refs ============================
25
+ const singleRowMeasureRef = _react.default.useRef(null);
26
+ const fullMeasureRef = _react.default.useRef(null);
27
+ const midMeasureRef = _react.default.useRef(null);
28
+ const startMeasure = (0, _rcUtil.useEvent)(() => {
29
+ setStatus(1 /* PREPARE */);
30
+ setWalkingIndexes([0, direction === 'middle' ? Math.ceil(contentChars.length / 2) : contentChars.length]);
31
+ });
32
+ // Initialize
33
+ _react.default.useLayoutEffect(() => {
34
+ startMeasure();
35
+ }, [contentChars, rows]);
36
+ // Measure element height
37
+ _react.default.useLayoutEffect(() => {
38
+ var _a, _b;
39
+ if (status === 1 /* PREPARE */) {
40
+ const fullMeasureHeight = ((_a = fullMeasureRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
41
+ const singleRowMeasureHeight = ((_b = singleRowMeasureRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0;
42
+ const rowMeasureHeight = singleRowMeasureHeight * rows;
43
+ if (fullMeasureHeight <= rowMeasureHeight) {
44
+ setStatus(100 /* STABLE_NO_ELLIPSIS */);
45
+ } else {
46
+ setMaxHeight(rowMeasureHeight);
47
+ setStatus(2 /* MEASURE_WALKING */);
48
+ }
49
+ }
50
+ }, [status]);
51
+ // Walking measure
52
+ _react.default.useLayoutEffect(() => {
53
+ var _a;
54
+ if (status === 2 /* MEASURE_WALKING */) {
55
+ const diff = walkingIndexes[1] - walkingIndexes[0];
56
+ const midHeight = ((_a = midMeasureRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
57
+ if (diff > 1) {
58
+ if (midHeight > maxHeight) {
59
+ setWalkingIndexes([walkingIndexes[0], midIndex]);
60
+ } else {
61
+ setWalkingIndexes([midIndex, walkingIndexes[1]]);
62
+ }
63
+ } else {
64
+ if (midHeight > maxHeight) {
65
+ setWalkingIndexes([walkingIndexes[0], walkingIndexes[0]]);
66
+ } else {
67
+ setWalkingIndexes([walkingIndexes[1], walkingIndexes[1]]);
68
+ }
69
+ setStatus(99 /* STABLE_ELLIPSIS */);
70
+ }
71
+ }
72
+ }, [status, walkingIndexes]);
73
+ // =========================== Render ===========================
74
+ /** Render by cut index */
75
+ const renderContent = index => {
76
+ const prefixContent = contentChars.slice(0, index);
77
+ const suffixContent = contentChars.slice(contentChars.length - index);
78
+ return _react.default.createElement(_react.default.Fragment, null, direction === 'start' && _react.default.createElement(_react.default.Fragment, null, expandNode, ELLIPSIS_TEXT), direction !== 'start' && prefixContent.join(''), direction === 'middle' && _react.default.createElement(_react.default.Fragment, null, ELLIPSIS_TEXT, expandNode, ELLIPSIS_TEXT), direction !== 'end' && suffixContent.join(''), direction === 'end' && _react.default.createElement(_react.default.Fragment, null, ELLIPSIS_TEXT, expandNode));
79
+ };
80
+ const finalContent = _react.default.useMemo(() => {
81
+ if (expanded || status === 100 /* STABLE_NO_ELLIPSIS */) {
82
+ return _react.default.createElement(_react.default.Fragment, {
83
+ key: 'display'
84
+ }, content, status === 99 /* STABLE_ELLIPSIS */ && collapseNode);
85
+ }
86
+ if (status === 99 /* STABLE_ELLIPSIS */) {
87
+ return renderContent(midIndex);
88
+ }
89
+ return null;
90
+ }, [expanded, status, content, collapseNode, midIndex]);
91
+ const allNodes = _react.default.createElement(_react.default.Fragment, null, status === 1 /* PREPARE */ && _react.default.createElement("div", {
92
+ key: 'full',
93
+ "aria-hidden": true,
94
+ ref: fullMeasureRef,
95
+ style: measureStyle
96
+ }, content, expandNode), status === 1 /* PREPARE */ && _react.default.createElement("div", {
97
+ key: 'stable',
98
+ "aria-hidden": true,
99
+ ref: singleRowMeasureRef,
100
+ style: measureStyle
101
+ }, '\u00A0'), status === 2 /* MEASURE_WALKING */ && _react.default.createElement("div", {
102
+ key: 'walking-mid',
103
+ "aria-hidden": true,
104
+ ref: midMeasureRef,
105
+ style: measureStyle
106
+ }, renderContent(midIndex)), finalContent);
107
+ return [allNodes, startMeasure];
108
+ }
@@ -0,0 +1,15 @@
1
+ import React from 'react';
2
+ import type { FC, ReactNode } from 'react';
3
+ import { NativeProps } from '../../utils/native-props';
4
+ import { PropagationEvent } from '../../utils/with-stop-propagation';
5
+ export declare type EllipsisProps = {
6
+ content: string;
7
+ direction?: 'start' | 'end' | 'middle';
8
+ rows?: number;
9
+ expandText?: ReactNode;
10
+ collapseText?: ReactNode;
11
+ stopPropagationForActionButtons?: PropagationEvent[];
12
+ onContentClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
13
+ defaultExpanded?: boolean;
14
+ } & NativeProps;
15
+ export declare const Ellipsis: FC<EllipsisProps>;
@@ -0,0 +1,161 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.Ellipsis = void 0;
7
+ var _react = _interopRequireWildcard(require("react"));
8
+ var _runes = _interopRequireDefault(require("runes2"));
9
+ var _withDefaultProps = require("../../utils/with-default-props");
10
+ var _nativeProps = require("../../utils/native-props");
11
+ var _useResizeEffect = require("../../utils/use-resize-effect");
12
+ var _ahooks = require("ahooks");
13
+ var _withStopPropagation = require("../../utils/with-stop-propagation");
14
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
+ 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); }
16
+ 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; }
17
+ const classPrefix = `adm-ellipsis`;
18
+ const defaultProps = {
19
+ direction: 'end',
20
+ rows: 1,
21
+ expandText: '',
22
+ content: '',
23
+ collapseText: '',
24
+ stopPropagationForActionButtons: [],
25
+ onContentClick: () => {},
26
+ defaultExpanded: false
27
+ };
28
+ const Ellipsis = p => {
29
+ const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
30
+ const rootRef = (0, _react.useRef)(null);
31
+ const expandElRef = (0, _react.useRef)(null);
32
+ const collapseElRef = (0, _react.useRef)(null);
33
+ const [ellipsised, setEllipsised] = (0, _react.useState)({});
34
+ const [expanded, setExpanded] = (0, _react.useState)(props.defaultExpanded);
35
+ const [exceeded, setExceeded] = (0, _react.useState)(false);
36
+ const chars = (0, _react.useMemo)(() => (0, _runes.default)(props.content), [props.content]);
37
+ function getSubString(start, end) {
38
+ return chars.slice(start, end).join('');
39
+ }
40
+ function calcEllipsised() {
41
+ var _a, _b;
42
+ const root = rootRef.current;
43
+ if (!root) return;
44
+ const originDisplay = root.style.display;
45
+ root.style.display = 'block';
46
+ const originStyle = window.getComputedStyle(root);
47
+ const container = document.createElement('div');
48
+ const styleNames = Array.prototype.slice.apply(originStyle);
49
+ styleNames.forEach(name => {
50
+ container.style.setProperty(name, originStyle.getPropertyValue(name));
51
+ });
52
+ root.style.display = originDisplay;
53
+ container.style.height = 'auto';
54
+ container.style.minHeight = 'auto';
55
+ container.style.maxHeight = 'auto';
56
+ container.style.textOverflow = 'clip';
57
+ container.style.webkitLineClamp = 'unset';
58
+ container.style.display = 'block';
59
+ const lineHeight = pxToNumber(originStyle.lineHeight);
60
+ const maxHeight = Math.floor(lineHeight * (props.rows + 0.5) + pxToNumber(originStyle.paddingTop) + pxToNumber(originStyle.paddingBottom));
61
+ container.innerText = props.content;
62
+ document.body.appendChild(container);
63
+ if (container.offsetHeight <= maxHeight) {
64
+ setExceeded(false);
65
+ } else {
66
+ setExceeded(true);
67
+ const end = props.content.length;
68
+ const collapseEl = typeof props.collapseText === 'string' ? props.collapseText : (_a = collapseElRef.current) === null || _a === void 0 ? void 0 : _a.innerHTML;
69
+ const expandEl = typeof props.expandText === 'string' ? props.expandText : (_b = expandElRef.current) === null || _b === void 0 ? void 0 : _b.innerHTML;
70
+ const actionText = expanded ? collapseEl : expandEl;
71
+ function check(left, right) {
72
+ if (right - left <= 1) {
73
+ if (props.direction === 'end') {
74
+ return {
75
+ leading: getSubString(0, left) + '...'
76
+ };
77
+ } else {
78
+ return {
79
+ tailing: '...' + getSubString(right, end)
80
+ };
81
+ }
82
+ }
83
+ const middle = Math.round((left + right) / 2);
84
+ if (props.direction === 'end') {
85
+ container.innerHTML = getSubString(0, middle) + '...' + actionText;
86
+ } else {
87
+ container.innerHTML = actionText + '...' + getSubString(middle, end);
88
+ }
89
+ if (container.offsetHeight <= maxHeight) {
90
+ if (props.direction === 'end') {
91
+ return check(middle, right);
92
+ } else {
93
+ return check(left, middle);
94
+ }
95
+ } else {
96
+ if (props.direction === 'end') {
97
+ return check(left, middle);
98
+ } else {
99
+ return check(middle, right);
100
+ }
101
+ }
102
+ }
103
+ function checkMiddle(leftPart, rightPart) {
104
+ if (leftPart[1] - leftPart[0] <= 1 && rightPart[1] - rightPart[0] <= 1) {
105
+ return {
106
+ leading: getSubString(0, leftPart[0]) + '...',
107
+ tailing: '...' + getSubString(rightPart[1], end)
108
+ };
109
+ }
110
+ const leftPartMiddle = Math.floor((leftPart[0] + leftPart[1]) / 2);
111
+ const rightPartMiddle = Math.ceil((rightPart[0] + rightPart[1]) / 2);
112
+ container.innerHTML = getSubString(0, leftPartMiddle) + '...' + actionText + '...' + getSubString(rightPartMiddle, end);
113
+ if (container.offsetHeight <= maxHeight) {
114
+ return checkMiddle([leftPartMiddle, leftPart[1]], [rightPart[0], rightPartMiddle]);
115
+ } else {
116
+ return checkMiddle([leftPart[0], leftPartMiddle], [rightPartMiddle, rightPart[1]]);
117
+ }
118
+ }
119
+ const middle = Math.floor((0 + end) / 2);
120
+ const ellipsised = props.direction === 'middle' ? checkMiddle([0, middle], [middle, end]) : check(0, end);
121
+ setEllipsised(ellipsised);
122
+ }
123
+ document.body.removeChild(container);
124
+ }
125
+ (0, _useResizeEffect.useResizeEffect)(calcEllipsised, rootRef);
126
+ (0, _ahooks.useIsomorphicLayoutEffect)(() => {
127
+ calcEllipsised();
128
+ }, [props.content, props.direction, props.rows, props.expandText, props.collapseText]);
129
+ const expandActionElement = !!props.expandText && (0, _withStopPropagation.withStopPropagation)(props.stopPropagationForActionButtons, _react.default.createElement("a", {
130
+ ref: expandElRef,
131
+ onClick: () => {
132
+ setExpanded(true);
133
+ }
134
+ }, props.expandText));
135
+ const collapseActionElement = !!props.collapseText && (0, _withStopPropagation.withStopPropagation)(props.stopPropagationForActionButtons, _react.default.createElement("a", {
136
+ ref: collapseElRef,
137
+ onClick: () => {
138
+ setExpanded(false);
139
+ }
140
+ }, props.collapseText));
141
+ const renderContent = () => {
142
+ if (!exceeded) return props.content;
143
+ if (expanded) return _react.default.createElement(_react.default.Fragment, null, props.content, collapseActionElement);
144
+ return _react.default.createElement(_react.default.Fragment, null, ellipsised.leading, expandActionElement, ellipsised.tailing);
145
+ };
146
+ return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
147
+ ref: rootRef,
148
+ className: classPrefix,
149
+ onClick: e => {
150
+ if (e.target === e.currentTarget) {
151
+ props.onContentClick(e);
152
+ }
153
+ }
154
+ }, renderContent()));
155
+ };
156
+ exports.Ellipsis = Ellipsis;
157
+ function pxToNumber(value) {
158
+ if (!value) return 0;
159
+ const match = value.match(/^\d*(\.\d*)?/);
160
+ return match ? Number(match[0]) : 0;
161
+ }
@@ -227,14 +227,14 @@ const ImageUploader = (0, _react.forwardRef)((p, ref) => {
227
227
  }, _react.default.createElement("span", {
228
228
  className: `${classPrefix}-upload-button-icon`
229
229
  }, _react.default.createElement(_antdMobileIcons.AddOutline, null))), !props.disableUpload && _react.default.createElement("input", {
230
+ "aria-label": locale.ImageUploader.upload,
230
231
  ref: inputRef,
231
232
  capture: props.capture,
232
233
  accept: props.accept,
233
234
  multiple: props.multiple,
234
235
  type: 'file',
235
236
  className: `${classPrefix}-input`,
236
- onChange: onChange,
237
- "aria-hidden": true
237
+ onChange: onChange
238
238
  })));
239
239
  (0, _react.useImperativeHandle)(ref, () => ({
240
240
  get nativeElement() {
@@ -4,7 +4,7 @@ declare type NativeInputProps = React.DetailedHTMLProps<React.InputHTMLAttribute
4
4
  declare type AriaProps = {
5
5
  role?: string;
6
6
  };
7
- export declare type InputProps = Pick<NativeInputProps, 'maxLength' | 'minLength' | 'autoComplete' | 'autoFocus' | 'pattern' | 'inputMode' | 'type' | 'name' | 'onFocus' | 'onBlur' | 'autoCapitalize' | 'autoCorrect' | 'onKeyDown' | 'onKeyUp' | 'onCompositionStart' | 'onCompositionEnd' | 'onClick' | 'step' | 'id' | 'placeholder' | 'readOnly' | 'disabled' | 'enterKeyHint'> & {
7
+ export declare type InputProps = Pick<NativeInputProps, 'maxLength' | 'minLength' | 'autoComplete' | 'autoFocus' | 'pattern' | 'inputMode' | 'type' | 'name' | 'onFocus' | 'onBlur' | 'onPaste' | 'autoCapitalize' | 'autoCorrect' | 'onKeyDown' | 'onKeyUp' | 'onCompositionStart' | 'onCompositionEnd' | 'onClick' | 'step' | 'id' | 'placeholder' | 'readOnly' | 'disabled' | 'enterKeyHint'> & {
8
8
  value?: string;
9
9
  defaultValue?: string;
10
10
  onChange?: (val: string) => void;
@@ -22,7 +22,7 @@ export declare type InputRef = {
22
22
  blur: () => void;
23
23
  nativeElement: HTMLInputElement | null;
24
24
  };
25
- export declare const Input: React.ForwardRefExoticComponent<Pick<NativeInputProps, "pattern" | "id" | "onClick" | "disabled" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "type" | "step" | "autoFocus" | "placeholder" | "autoCapitalize" | "autoCorrect" | "inputMode" | "name" | "readOnly" | "autoComplete" | "enterKeyHint" | "maxLength" | "minLength"> & {
25
+ export declare const Input: React.ForwardRefExoticComponent<Pick<NativeInputProps, "pattern" | "id" | "onClick" | "disabled" | "onPaste" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "type" | "step" | "autoFocus" | "placeholder" | "autoCapitalize" | "autoCorrect" | "inputMode" | "name" | "readOnly" | "autoComplete" | "enterKeyHint" | "maxLength" | "minLength"> & {
26
26
  value?: string | undefined;
27
27
  defaultValue?: string | undefined;
28
28
  onChange?: ((val: string) => void) | undefined;
@@ -96,6 +96,7 @@ const Input = (0, _react.forwardRef)((props, ref) => {
96
96
  checkValue();
97
97
  (_a = mergedProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(mergedProps, e);
98
98
  },
99
+ onPaste: mergedProps.onPaste,
99
100
  id: mergedProps.id,
100
101
  placeholder: mergedProps.placeholder,
101
102
  disabled: mergedProps.disabled,
@@ -5,6 +5,8 @@
5
5
  --font-size: var(--adm-font-size-7);
6
6
  --icon-font-size: var(--adm-font-size-10);
7
7
  --height: 80px;
8
+ --adm-notice-bar-border-radius: 8px;
9
+ --adm-notice-bar-border-width: 2px;
8
10
  height: var(--height);
9
11
  box-sizing: border-box;
10
12
  font-size: var(--font-size);
@@ -12,9 +14,9 @@
12
14
  display: flex;
13
15
  align-items: center;
14
16
  justify-content: space-between;
15
- border: solid 2px var(--border-color);
16
- border-left: none;
17
- border-right: none;
17
+ border: solid var(--adm-notice-bar-border-width) var(--border-color);
18
+ border-left-width: 0;
19
+ border-right-width: 0;
18
20
  background-color: var(--background-color);
19
21
  color: var(--text-color);
20
22
  }
@@ -32,7 +34,7 @@
32
34
  .adm-notice-bar.adm-notice-bar-error {
33
35
  --background-color: var(--adm-color-danger);
34
36
  --border-color: #d9281e;
35
- --text-color: #ffffff;
37
+ --text-color: #fff;
36
38
  }
37
39
 
38
40
  .adm-notice-bar.adm-notice-bar-info {
@@ -41,6 +43,12 @@
41
43
  --text-color: var(--adm-color-primary);
42
44
  }
43
45
 
46
+ .adm-notice-bar.adm-notice-bar-success {
47
+ --background-color: #d1fff0;
48
+ --border-color: #a8f0d8;
49
+ --text-color: var(--adm-color-success);
50
+ }
51
+
44
52
  .adm-notice-bar .adm-notice-bar-left {
45
53
  flex-shrink: 0;
46
54
  margin-right: 16px;
@@ -89,4 +97,22 @@
89
97
  padding-top: 16px;
90
98
  padding-bottom: 16px;
91
99
  line-height: 44px;
100
+ }
101
+
102
+ .adm-notice-bar-neutral {
103
+ border-radius: var(--adm-notice-bar-border-radius);
104
+ }
105
+
106
+ .adm-notice-bar-rounded {
107
+ border-radius: 2000px;
108
+ }
109
+
110
+ .adm-notice-bar-bordered {
111
+ border-left-width: var(--adm-notice-bar-border-width);
112
+ border-right-width: var(--adm-notice-bar-border-width);
113
+ }
114
+
115
+ .adm-notice-bar-without-border {
116
+ border-top-width: 0;
117
+ border-bottom-width: 0;
92
118
  }
@@ -3,7 +3,7 @@ import React from 'react';
3
3
  import { NativeProps } from '../../utils/native-props';
4
4
  export declare type NoticeBarProps = {
5
5
  /** The type of the NoticeBar */
6
- color?: 'default' | 'alert' | 'error' | 'info';
6
+ color?: 'default' | 'alert' | 'error' | 'success' | 'info';
7
7
  /** TDelay to start scrolling, unit ms */
8
8
  delay?: number;
9
9
  /** Scroll speed, unit px/s */
@@ -24,5 +24,9 @@ export declare type NoticeBarProps = {
24
24
  icon?: ReactNode;
25
25
  /** Whether to display multiple lines */
26
26
  wrap?: boolean;
27
+ /** Block shape */
28
+ shape?: 'rectangular' | 'neutral' | 'rounded';
29
+ /** Border visibility */
30
+ bordered?: 'block' | boolean;
27
31
  } & NativeProps<'--background-color' | '--border-color' | '--text-color' | '--font-size' | '--icon-font-size' | '--height'>;
28
32
  export declare const NoticeBar: React.NamedExoticComponent<NoticeBarProps>;
@@ -22,7 +22,9 @@ const defaultProps = {
22
22
  delay: 2000,
23
23
  speed: 50,
24
24
  icon: _react.default.createElement(_antdMobileIcons.SoundOutline, null),
25
- wrap: false
25
+ wrap: false,
26
+ shape: 'rectangular',
27
+ bordered: 'block'
26
28
  };
27
29
  const NoticeBar = (0, _react.memo)(props => {
28
30
  const {
@@ -78,8 +80,10 @@ const NoticeBar = (0, _react.memo)(props => {
78
80
  });
79
81
  if (!visible) return null;
80
82
  return (0, _nativeProps.withNativeProps)(mergedProps, _react.default.createElement("div", {
81
- className: (0, _classnames.default)(classPrefix, `${classPrefix}-${mergedProps.color}`, {
82
- [`${classPrefix}-wrap`]: mergedProps.wrap
83
+ className: (0, _classnames.default)(classPrefix, `${classPrefix}-${mergedProps.color}`, `${classPrefix}-${mergedProps.shape}`, {
84
+ [`${classPrefix}-wrap`]: mergedProps.wrap,
85
+ [`${classPrefix}-bordered`]: mergedProps.bordered === true,
86
+ [`${classPrefix}-without-border`]: mergedProps.bordered === false
83
87
  }),
84
88
  onClick: mergedProps.onClick
85
89
  }, mergedProps.icon && _react.default.createElement("span", {
@@ -3,7 +3,7 @@ import React from 'react';
3
3
  import { NativeProps } from '../../utils/native-props';
4
4
  import { InputProps, InputRef } from '../input';
5
5
  export declare type SearchBarRef = InputRef;
6
- export declare type SearchBarProps = Pick<InputProps, 'onFocus' | 'onBlur' | 'onClear' | 'onCompositionStart' | 'onCompositionEnd'> & {
6
+ export declare type SearchBarProps = Pick<InputProps, 'onFocus' | 'onBlur' | 'onClear' | 'onCompositionStart' | 'onCompositionEnd' | 'autoFocus'> & {
7
7
  value?: string;
8
8
  defaultValue?: string;
9
9
  maxLength?: number;
@@ -22,7 +22,7 @@ export declare type SearchBarProps = Pick<InputProps, 'onFocus' | 'onBlur' | 'on
22
22
  onChange?: (val: string) => void;
23
23
  onCancel?: () => void;
24
24
  } & NativeProps<'--background' | '--border-radius' | '--placeholder-color' | '--height' | '--padding-left'>;
25
- export declare const SearchBar: React.ForwardRefExoticComponent<Pick<InputProps, "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "onClear"> & {
25
+ export declare const SearchBar: React.ForwardRefExoticComponent<Pick<InputProps, "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "autoFocus" | "onClear"> & {
26
26
  value?: string | undefined;
27
27
  defaultValue?: string | undefined;
28
28
  maxLength?: number | undefined;
@@ -96,6 +96,7 @@ const SearchBar = (0, _react.forwardRef)((props, ref) => {
96
96
  value: value,
97
97
  onChange: setValue,
98
98
  maxLength: mergedProps.maxLength,
99
+ autoFocus: mergedProps.autoFocus,
99
100
  placeholder: mergedProps.placeholder,
100
101
  clearable: mergedProps.clearable,
101
102
  onlyShowClearWhenFocus: mergedProps.onlyShowClearWhenFocus,