antd-mobile 5.38.0 → 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 (46) hide show
  1. package/2x/bundle/antd-mobile.cjs.development.js +126 -119
  2. package/2x/bundle/antd-mobile.cjs.js +7 -7
  3. package/2x/bundle/antd-mobile.es.development.js +127 -120
  4. package/2x/bundle/antd-mobile.es.js +4458 -4441
  5. package/2x/bundle/antd-mobile.umd.development.js +126 -119
  6. package/2x/bundle/antd-mobile.umd.js +7 -7
  7. package/2x/bundle/style.css +1 -0
  8. package/2x/cjs/components/ellipsis/ellipsis.css +1 -0
  9. package/2x/cjs/components/ellipsis/ellipsis.d.ts +1 -1
  10. package/2x/cjs/components/ellipsis/ellipsis.js +28 -124
  11. package/2x/cjs/components/ellipsis/useMeasure.d.ts +2 -0
  12. package/2x/cjs/components/ellipsis/useMeasure.js +108 -0
  13. package/2x/cjs/components/ellipsis/~ellipsis.d.ts +15 -0
  14. package/2x/cjs/components/ellipsis/~ellipsis.js +161 -0
  15. package/2x/es/components/ellipsis/ellipsis.css +1 -0
  16. package/2x/es/components/ellipsis/ellipsis.d.ts +1 -1
  17. package/2x/es/components/ellipsis/ellipsis.js +28 -122
  18. package/2x/es/components/ellipsis/useMeasure.d.ts +2 -0
  19. package/2x/es/components/ellipsis/useMeasure.js +101 -0
  20. package/2x/es/components/ellipsis/~ellipsis.d.ts +15 -0
  21. package/2x/es/components/ellipsis/~ellipsis.js +151 -0
  22. package/2x/package.json +1 -1
  23. package/bundle/antd-mobile.cjs.development.js +126 -119
  24. package/bundle/antd-mobile.cjs.js +7 -7
  25. package/bundle/antd-mobile.compatible.umd.js +1 -1
  26. package/bundle/antd-mobile.es.development.js +127 -120
  27. package/bundle/antd-mobile.es.js +4458 -4441
  28. package/bundle/antd-mobile.umd.development.js +126 -119
  29. package/bundle/antd-mobile.umd.js +7 -7
  30. package/bundle/style.css +1 -1
  31. package/cjs/components/ellipsis/ellipsis.css +1 -0
  32. package/cjs/components/ellipsis/ellipsis.d.ts +1 -1
  33. package/cjs/components/ellipsis/ellipsis.js +28 -124
  34. package/cjs/components/ellipsis/useMeasure.d.ts +2 -0
  35. package/cjs/components/ellipsis/useMeasure.js +108 -0
  36. package/cjs/components/ellipsis/~ellipsis.d.ts +15 -0
  37. package/cjs/components/ellipsis/~ellipsis.js +161 -0
  38. package/es/components/ellipsis/ellipsis.css +1 -0
  39. package/es/components/ellipsis/ellipsis.d.ts +1 -1
  40. package/es/components/ellipsis/ellipsis.js +28 -122
  41. package/es/components/ellipsis/useMeasure.d.ts +2 -0
  42. package/es/components/ellipsis/useMeasure.js +101 -0
  43. package/es/components/ellipsis/~ellipsis.d.ts +15 -0
  44. package/es/components/ellipsis/~ellipsis.js +151 -0
  45. package/package.json +1 -1
  46. package/umd/antd-mobile.js +1 -1
@@ -1,4 +1,5 @@
1
1
  .adm-ellipsis {
2
2
  overflow: hidden;
3
3
  line-height: 1.5;
4
+ word-break: break-word;
4
5
  }
@@ -1,5 +1,5 @@
1
- import React from 'react';
2
1
  import type { FC, ReactNode } from 'react';
2
+ import React from 'react';
3
3
  import { NativeProps } from '../../utils/native-props';
4
4
  import { PropagationEvent } from '../../utils/with-stop-propagation';
5
5
  export declare type EllipsisProps = {
@@ -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
+ }
@@ -1,4 +1,5 @@
1
1
  .adm-ellipsis {
2
2
  overflow: hidden;
3
3
  line-height: 1.5;
4
+ word-break: break-word;
4
5
  }
@@ -1,5 +1,5 @@
1
- import React from 'react';
2
1
  import type { FC, ReactNode } from 'react';
2
+ import React from 'react';
3
3
  import { NativeProps } from '../../utils/native-props';
4
4
  import { PropagationEvent } from '../../utils/with-stop-propagation';
5
5
  export declare type EllipsisProps = {