antd-mobile 5.40.0 → 5.41.0-alpha.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 (66) hide show
  1. package/2x/bundle/antd-mobile.cjs.development.js +225 -85
  2. package/2x/bundle/antd-mobile.cjs.js +6 -6
  3. package/2x/bundle/antd-mobile.es.development.js +225 -85
  4. package/2x/bundle/antd-mobile.es.js +2218 -2144
  5. package/2x/bundle/antd-mobile.umd.development.js +225 -85
  6. package/2x/bundle/antd-mobile.umd.js +7 -7
  7. package/2x/bundle/style.css +4 -1
  8. package/2x/cjs/components/calendar/calendar.d.ts +4 -1
  9. package/2x/cjs/components/calendar/calendar.js +18 -11
  10. package/2x/cjs/components/date-picker/date-picker-week-utils.js +2 -1
  11. package/2x/cjs/components/ellipsis/ellipsis.d.ts +3 -0
  12. package/2x/cjs/components/ellipsis/ellipsis.js +10 -2
  13. package/2x/cjs/components/swiper/swiper.js +1 -1
  14. package/2x/cjs/components/tabs/tabs.js +45 -13
  15. package/2x/cjs/components/virtual-input/virtual-input.css +4 -1
  16. package/2x/cjs/components/virtual-input/virtual-input.d.ts +6 -0
  17. package/2x/cjs/components/virtual-input/virtual-input.js +105 -8
  18. package/2x/es/components/calendar/calendar.d.ts +4 -1
  19. package/2x/es/components/calendar/calendar.js +19 -12
  20. package/2x/es/components/date-picker/date-picker-week-utils.js +2 -1
  21. package/2x/es/components/ellipsis/ellipsis.d.ts +3 -0
  22. package/2x/es/components/ellipsis/ellipsis.js +10 -2
  23. package/2x/es/components/swiper/swiper.js +1 -1
  24. package/2x/es/components/tabs/tabs.js +44 -12
  25. package/2x/es/components/virtual-input/virtual-input.css +4 -1
  26. package/2x/es/components/virtual-input/virtual-input.d.ts +6 -0
  27. package/2x/es/components/virtual-input/virtual-input.js +105 -8
  28. package/2x/package.json +3 -3
  29. package/bundle/antd-mobile.cjs.development.js +225 -85
  30. package/bundle/antd-mobile.cjs.js +6 -6
  31. package/bundle/antd-mobile.compatible.umd.js +1 -1
  32. package/bundle/antd-mobile.es.development.js +225 -85
  33. package/bundle/antd-mobile.es.js +2218 -2144
  34. package/bundle/antd-mobile.umd.development.js +225 -85
  35. package/bundle/antd-mobile.umd.js +7 -7
  36. package/bundle/style.css +1 -1
  37. package/cjs/components/calendar/calendar.d.ts +4 -1
  38. package/cjs/components/calendar/calendar.js +18 -11
  39. package/cjs/components/date-picker/date-picker-week-utils.js +2 -1
  40. package/cjs/components/ellipsis/ellipsis.d.ts +3 -0
  41. package/cjs/components/ellipsis/ellipsis.js +10 -2
  42. package/cjs/components/swiper/swiper.js +1 -1
  43. package/cjs/components/tabs/tabs.js +45 -13
  44. package/cjs/components/virtual-input/virtual-input.css +3 -1
  45. package/cjs/components/virtual-input/virtual-input.d.ts +6 -0
  46. package/cjs/components/virtual-input/virtual-input.js +105 -8
  47. package/es/components/calendar/calendar.d.ts +4 -1
  48. package/es/components/calendar/calendar.js +19 -12
  49. package/es/components/date-picker/date-picker-week-utils.js +2 -1
  50. package/es/components/ellipsis/ellipsis.d.ts +3 -0
  51. package/es/components/ellipsis/ellipsis.js +10 -2
  52. package/es/components/swiper/swiper.js +1 -1
  53. package/es/components/tabs/tabs.js +44 -12
  54. package/es/components/virtual-input/virtual-input.css +3 -1
  55. package/es/components/virtual-input/virtual-input.d.ts +6 -0
  56. package/es/components/virtual-input/virtual-input.js +105 -8
  57. package/package.json +3 -3
  58. package/umd/antd-mobile.js +1 -1
  59. package/2x/cjs/components/ellipsis/~ellipsis.d.ts +0 -15
  60. package/2x/cjs/components/ellipsis/~ellipsis.js +0 -161
  61. package/2x/es/components/ellipsis/~ellipsis.d.ts +0 -15
  62. package/2x/es/components/ellipsis/~ellipsis.js +0 -151
  63. package/cjs/components/ellipsis/~ellipsis.d.ts +0 -15
  64. package/cjs/components/ellipsis/~ellipsis.js +0 -161
  65. package/es/components/ellipsis/~ellipsis.d.ts +0 -15
  66. package/es/components/ellipsis/~ellipsis.js +0 -151
@@ -1,15 +0,0 @@
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>;
@@ -1,161 +0,0 @@
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,15 +0,0 @@
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>;
@@ -1,151 +0,0 @@
1
- import React, { useMemo, useRef, useState } from 'react';
2
- import runes from 'runes2';
3
- import { mergeProps } from '../../utils/with-default-props';
4
- import { withNativeProps } from '../../utils/native-props';
5
- import { useResizeEffect } from '../../utils/use-resize-effect';
6
- import { useIsomorphicLayoutEffect } from 'ahooks';
7
- import { withStopPropagation } from '../../utils/with-stop-propagation';
8
- const classPrefix = `adm-ellipsis`;
9
- const defaultProps = {
10
- direction: 'end',
11
- rows: 1,
12
- expandText: '',
13
- content: '',
14
- collapseText: '',
15
- stopPropagationForActionButtons: [],
16
- onContentClick: () => {},
17
- defaultExpanded: false
18
- };
19
- export const Ellipsis = p => {
20
- const props = mergeProps(defaultProps, p);
21
- const rootRef = useRef(null);
22
- const expandElRef = useRef(null);
23
- const collapseElRef = useRef(null);
24
- const [ellipsised, setEllipsised] = useState({});
25
- const [expanded, setExpanded] = useState(props.defaultExpanded);
26
- const [exceeded, setExceeded] = useState(false);
27
- const chars = useMemo(() => runes(props.content), [props.content]);
28
- function getSubString(start, end) {
29
- return chars.slice(start, end).join('');
30
- }
31
- function calcEllipsised() {
32
- var _a, _b;
33
- const root = rootRef.current;
34
- if (!root) return;
35
- const originDisplay = root.style.display;
36
- root.style.display = 'block';
37
- const originStyle = window.getComputedStyle(root);
38
- const container = document.createElement('div');
39
- const styleNames = Array.prototype.slice.apply(originStyle);
40
- styleNames.forEach(name => {
41
- container.style.setProperty(name, originStyle.getPropertyValue(name));
42
- });
43
- root.style.display = originDisplay;
44
- container.style.height = 'auto';
45
- container.style.minHeight = 'auto';
46
- container.style.maxHeight = 'auto';
47
- container.style.textOverflow = 'clip';
48
- container.style.webkitLineClamp = 'unset';
49
- container.style.display = 'block';
50
- const lineHeight = pxToNumber(originStyle.lineHeight);
51
- const maxHeight = Math.floor(lineHeight * (props.rows + 0.5) + pxToNumber(originStyle.paddingTop) + pxToNumber(originStyle.paddingBottom));
52
- container.innerText = props.content;
53
- document.body.appendChild(container);
54
- if (container.offsetHeight <= maxHeight) {
55
- setExceeded(false);
56
- } else {
57
- setExceeded(true);
58
- const end = props.content.length;
59
- const collapseEl = typeof props.collapseText === 'string' ? props.collapseText : (_a = collapseElRef.current) === null || _a === void 0 ? void 0 : _a.innerHTML;
60
- const expandEl = typeof props.expandText === 'string' ? props.expandText : (_b = expandElRef.current) === null || _b === void 0 ? void 0 : _b.innerHTML;
61
- const actionText = expanded ? collapseEl : expandEl;
62
- function check(left, right) {
63
- if (right - left <= 1) {
64
- if (props.direction === 'end') {
65
- return {
66
- leading: getSubString(0, left) + '...'
67
- };
68
- } else {
69
- return {
70
- tailing: '...' + getSubString(right, end)
71
- };
72
- }
73
- }
74
- const middle = Math.round((left + right) / 2);
75
- if (props.direction === 'end') {
76
- container.innerHTML = getSubString(0, middle) + '...' + actionText;
77
- } else {
78
- container.innerHTML = actionText + '...' + getSubString(middle, end);
79
- }
80
- if (container.offsetHeight <= maxHeight) {
81
- if (props.direction === 'end') {
82
- return check(middle, right);
83
- } else {
84
- return check(left, middle);
85
- }
86
- } else {
87
- if (props.direction === 'end') {
88
- return check(left, middle);
89
- } else {
90
- return check(middle, right);
91
- }
92
- }
93
- }
94
- function checkMiddle(leftPart, rightPart) {
95
- if (leftPart[1] - leftPart[0] <= 1 && rightPart[1] - rightPart[0] <= 1) {
96
- return {
97
- leading: getSubString(0, leftPart[0]) + '...',
98
- tailing: '...' + getSubString(rightPart[1], end)
99
- };
100
- }
101
- const leftPartMiddle = Math.floor((leftPart[0] + leftPart[1]) / 2);
102
- const rightPartMiddle = Math.ceil((rightPart[0] + rightPart[1]) / 2);
103
- container.innerHTML = getSubString(0, leftPartMiddle) + '...' + actionText + '...' + getSubString(rightPartMiddle, end);
104
- if (container.offsetHeight <= maxHeight) {
105
- return checkMiddle([leftPartMiddle, leftPart[1]], [rightPart[0], rightPartMiddle]);
106
- } else {
107
- return checkMiddle([leftPart[0], leftPartMiddle], [rightPartMiddle, rightPart[1]]);
108
- }
109
- }
110
- const middle = Math.floor((0 + end) / 2);
111
- const ellipsised = props.direction === 'middle' ? checkMiddle([0, middle], [middle, end]) : check(0, end);
112
- setEllipsised(ellipsised);
113
- }
114
- document.body.removeChild(container);
115
- }
116
- useResizeEffect(calcEllipsised, rootRef);
117
- useIsomorphicLayoutEffect(() => {
118
- calcEllipsised();
119
- }, [props.content, props.direction, props.rows, props.expandText, props.collapseText]);
120
- const expandActionElement = !!props.expandText && withStopPropagation(props.stopPropagationForActionButtons, React.createElement("a", {
121
- ref: expandElRef,
122
- onClick: () => {
123
- setExpanded(true);
124
- }
125
- }, props.expandText));
126
- const collapseActionElement = !!props.collapseText && withStopPropagation(props.stopPropagationForActionButtons, React.createElement("a", {
127
- ref: collapseElRef,
128
- onClick: () => {
129
- setExpanded(false);
130
- }
131
- }, props.collapseText));
132
- const renderContent = () => {
133
- if (!exceeded) return props.content;
134
- if (expanded) return React.createElement(React.Fragment, null, props.content, collapseActionElement);
135
- return React.createElement(React.Fragment, null, ellipsised.leading, expandActionElement, ellipsised.tailing);
136
- };
137
- return withNativeProps(props, React.createElement("div", {
138
- ref: rootRef,
139
- className: classPrefix,
140
- onClick: e => {
141
- if (e.target === e.currentTarget) {
142
- props.onContentClick(e);
143
- }
144
- }
145
- }, renderContent()));
146
- };
147
- function pxToNumber(value) {
148
- if (!value) return 0;
149
- const match = value.match(/^\d*(\.\d*)?/);
150
- return match ? Number(match[0]) : 0;
151
- }
@@ -1,15 +0,0 @@
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>;
@@ -1,161 +0,0 @@
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,15 +0,0 @@
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>;