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.
- package/2x/bundle/antd-mobile.cjs.development.js +126 -119
- package/2x/bundle/antd-mobile.cjs.js +7 -7
- package/2x/bundle/antd-mobile.es.development.js +127 -120
- package/2x/bundle/antd-mobile.es.js +4458 -4441
- package/2x/bundle/antd-mobile.umd.development.js +126 -119
- package/2x/bundle/antd-mobile.umd.js +7 -7
- package/2x/bundle/style.css +1 -0
- package/2x/cjs/components/ellipsis/ellipsis.css +1 -0
- package/2x/cjs/components/ellipsis/ellipsis.d.ts +1 -1
- package/2x/cjs/components/ellipsis/ellipsis.js +28 -124
- package/2x/cjs/components/ellipsis/useMeasure.d.ts +2 -0
- package/2x/cjs/components/ellipsis/useMeasure.js +108 -0
- package/2x/cjs/components/ellipsis/~ellipsis.d.ts +15 -0
- package/2x/cjs/components/ellipsis/~ellipsis.js +161 -0
- package/2x/es/components/ellipsis/ellipsis.css +1 -0
- package/2x/es/components/ellipsis/ellipsis.d.ts +1 -1
- package/2x/es/components/ellipsis/ellipsis.js +28 -122
- package/2x/es/components/ellipsis/useMeasure.d.ts +2 -0
- package/2x/es/components/ellipsis/useMeasure.js +101 -0
- package/2x/es/components/ellipsis/~ellipsis.d.ts +15 -0
- package/2x/es/components/ellipsis/~ellipsis.js +151 -0
- package/2x/package.json +1 -1
- package/bundle/antd-mobile.cjs.development.js +126 -119
- package/bundle/antd-mobile.cjs.js +7 -7
- package/bundle/antd-mobile.compatible.umd.js +1 -1
- package/bundle/antd-mobile.es.development.js +127 -120
- package/bundle/antd-mobile.es.js +4458 -4441
- package/bundle/antd-mobile.umd.development.js +126 -119
- package/bundle/antd-mobile.umd.js +7 -7
- package/bundle/style.css +1 -1
- package/cjs/components/ellipsis/ellipsis.css +1 -0
- package/cjs/components/ellipsis/ellipsis.d.ts +1 -1
- package/cjs/components/ellipsis/ellipsis.js +28 -124
- package/cjs/components/ellipsis/useMeasure.d.ts +2 -0
- package/cjs/components/ellipsis/useMeasure.js +108 -0
- package/cjs/components/ellipsis/~ellipsis.d.ts +15 -0
- package/cjs/components/ellipsis/~ellipsis.js +161 -0
- package/es/components/ellipsis/ellipsis.css +1 -0
- package/es/components/ellipsis/ellipsis.d.ts +1 -1
- package/es/components/ellipsis/ellipsis.js +28 -122
- package/es/components/ellipsis/useMeasure.d.ts +2 -0
- package/es/components/ellipsis/useMeasure.js +101 -0
- package/es/components/ellipsis/~ellipsis.d.ts +15 -0
- package/es/components/ellipsis/~ellipsis.js +151 -0
- package/package.json +1 -1
- package/umd/antd-mobile.js +1 -1
package/2x/bundle/style.css
CHANGED
|
@@ -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 =
|
|
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
|
|
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
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
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
|
-
},
|
|
135
|
-
const
|
|
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
|
-
},
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
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
|
-
|
|
60
|
+
onContentClick(e);
|
|
152
61
|
}
|
|
153
62
|
}
|
|
154
|
-
},
|
|
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,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 = {
|