antd-mobile 5.39.0 → 5.41.0-alpha.0
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/README.md +8 -1
- package/2x/bundle/antd-mobile.cjs.development.js +2495 -1614
- package/2x/bundle/antd-mobile.cjs.js +7 -7
- package/2x/bundle/antd-mobile.es.development.js +1530 -649
- package/2x/bundle/antd-mobile.es.js +7495 -6799
- package/2x/bundle/antd-mobile.umd.development.js +2494 -1613
- package/2x/bundle/antd-mobile.umd.js +7 -7
- package/2x/bundle/style.css +11 -5
- package/2x/cjs/components/button/button.d.ts +2 -2
- package/2x/cjs/components/button/button.js +1 -0
- package/2x/cjs/components/calendar-picker-view/calendar-picker-view.js +3 -0
- package/2x/cjs/components/date-picker/date-picker-date-utils.d.ts +1 -1
- package/2x/cjs/components/date-picker/date-picker-date-utils.js +23 -8
- package/2x/cjs/components/date-picker/date-picker-quarter-utils.d.ts +3 -1
- package/2x/cjs/components/date-picker/date-picker-quarter-utils.js +7 -2
- package/2x/cjs/components/date-picker/date-picker-week-utils.d.ts +3 -1
- package/2x/cjs/components/date-picker/date-picker-week-utils.js +12 -4
- package/2x/cjs/components/date-picker-view/date-picker-view.d.ts +5 -3
- package/2x/cjs/components/date-picker-view/date-picker-view.js +3 -3
- package/2x/cjs/components/date-picker-view/useRenderLabel.js +2 -2
- package/2x/cjs/components/ellipsis/ellipsis.d.ts +3 -0
- package/2x/cjs/components/ellipsis/ellipsis.js +10 -2
- package/2x/cjs/components/number-keyboard/number-keyboard.d.ts +1 -1
- package/2x/cjs/components/popover/wrapper.d.ts +6 -9
- package/2x/cjs/components/popover/wrapper.js +32 -6
- package/2x/cjs/components/space/space.css +4 -4
- package/2x/cjs/components/swiper/swiper.js +1 -1
- package/2x/cjs/components/tabs/tabs.js +45 -13
- package/2x/cjs/components/virtual-input/virtual-input.css +7 -1
- package/2x/cjs/components/virtual-input/virtual-input.d.ts +6 -0
- package/2x/cjs/components/virtual-input/virtual-input.js +133 -7
- package/2x/cjs/index.d.ts +1 -0
- package/2x/cjs/index.js +7 -0
- package/2x/cjs/locales/ar-SA.d.ts +1 -0
- package/2x/cjs/locales/ar-SA.js +1 -0
- package/2x/cjs/locales/base.d.ts +1 -0
- package/2x/cjs/locales/base.js +1 -0
- package/2x/cjs/locales/cnr-ME.d.ts +1 -0
- package/2x/cjs/locales/cnr-ME.js +1 -0
- package/2x/cjs/locales/da-DK.d.ts +1 -0
- package/2x/cjs/locales/de-DE.d.ts +1 -0
- package/2x/cjs/locales/de-DE.js +1 -0
- package/2x/cjs/locales/en-US.d.ts +1 -0
- package/2x/cjs/locales/es-ES.d.ts +1 -0
- package/2x/cjs/locales/fa-IR.d.ts +1 -0
- package/2x/cjs/locales/fr-FR.d.ts +1 -0
- package/2x/cjs/locales/hr-HR.d.ts +1 -0
- package/2x/cjs/locales/hr-HR.js +1 -0
- package/2x/cjs/locales/hu-HU.d.ts +1 -0
- package/2x/cjs/locales/id-ID.d.ts +1 -0
- package/2x/cjs/locales/in-ID.d.ts +1 -0
- package/2x/cjs/locales/in-ID.js +1 -0
- package/2x/cjs/locales/it-IT.d.ts +1 -0
- package/2x/cjs/locales/ja-JP.d.ts +1 -0
- package/2x/cjs/locales/kk-KZ.d.ts +1 -0
- package/2x/cjs/locales/ko-KR.d.ts +1 -0
- package/2x/cjs/locales/ms-MY.d.ts +1 -0
- package/2x/cjs/locales/ms-MY.js +1 -0
- package/2x/cjs/locales/nb-NO.d.ts +1 -0
- package/2x/cjs/locales/nl-NL.d.ts +1 -0
- package/2x/cjs/locales/pt-BR.d.ts +1 -0
- package/2x/cjs/locales/ru-RU.d.ts +1 -0
- package/2x/cjs/locales/ru-RU.js +8 -2
- package/2x/cjs/locales/sr-RS.d.ts +1 -0
- package/2x/cjs/locales/sr-RS.js +1 -0
- package/2x/cjs/locales/th-TH.d.ts +1 -0
- package/2x/cjs/locales/th-TH.js +1 -0
- package/2x/cjs/locales/tr-TR.d.ts +1 -0
- package/2x/cjs/locales/vi-VN.d.ts +1 -0
- package/2x/cjs/locales/vi-VN.js +1 -0
- package/2x/cjs/locales/zh-CN.js +1 -0
- package/2x/cjs/locales/zh-HK.d.ts +1 -0
- package/2x/cjs/locales/zh-TW.d.ts +1 -0
- package/2x/cjs/utils/render-to-body.d.ts +1 -1
- package/2x/cjs/utils/render-to-body.js +2 -9
- package/2x/cjs/utils/render.d.ts +1 -9
- package/2x/cjs/utils/render.js +10 -68
- package/2x/cjs/utils/unstable-render.d.ts +9 -0
- package/2x/cjs/utils/unstable-render.js +37 -0
- package/2x/es/components/button/button.d.ts +2 -2
- package/2x/es/components/button/button.js +1 -0
- package/2x/es/components/calendar-picker-view/calendar-picker-view.js +3 -0
- package/2x/es/components/date-picker/date-picker-date-utils.d.ts +1 -1
- package/2x/es/components/date-picker/date-picker-date-utils.js +23 -8
- package/2x/es/components/date-picker/date-picker-quarter-utils.d.ts +3 -1
- package/2x/es/components/date-picker/date-picker-quarter-utils.js +7 -2
- package/2x/es/components/date-picker/date-picker-week-utils.d.ts +3 -1
- package/2x/es/components/date-picker/date-picker-week-utils.js +12 -4
- package/2x/es/components/date-picker-view/date-picker-view.d.ts +5 -3
- package/2x/es/components/date-picker-view/date-picker-view.js +4 -4
- package/2x/es/components/date-picker-view/useRenderLabel.js +2 -2
- package/2x/es/components/ellipsis/ellipsis.d.ts +3 -0
- package/2x/es/components/ellipsis/ellipsis.js +10 -2
- package/2x/es/components/number-keyboard/number-keyboard.d.ts +1 -1
- package/2x/es/components/popover/wrapper.d.ts +6 -9
- package/2x/es/components/popover/wrapper.js +30 -5
- package/2x/es/components/space/space.css +4 -4
- package/2x/es/components/swiper/swiper.js +1 -1
- package/2x/es/components/tabs/tabs.js +44 -12
- package/2x/es/components/virtual-input/virtual-input.css +7 -1
- package/2x/es/components/virtual-input/virtual-input.d.ts +6 -0
- package/2x/es/components/virtual-input/virtual-input.js +133 -7
- package/2x/es/index.d.ts +1 -0
- package/2x/es/index.js +3 -1
- package/2x/es/locales/ar-SA.d.ts +1 -0
- package/2x/es/locales/ar-SA.js +1 -0
- package/2x/es/locales/base.d.ts +1 -0
- package/2x/es/locales/base.js +1 -0
- package/2x/es/locales/cnr-ME.d.ts +1 -0
- package/2x/es/locales/cnr-ME.js +1 -0
- package/2x/es/locales/da-DK.d.ts +1 -0
- package/2x/es/locales/de-DE.d.ts +1 -0
- package/2x/es/locales/de-DE.js +1 -0
- package/2x/es/locales/en-US.d.ts +1 -0
- package/2x/es/locales/es-ES.d.ts +1 -0
- package/2x/es/locales/fa-IR.d.ts +1 -0
- package/2x/es/locales/fr-FR.d.ts +1 -0
- package/2x/es/locales/hr-HR.d.ts +1 -0
- package/2x/es/locales/hr-HR.js +1 -0
- package/2x/es/locales/hu-HU.d.ts +1 -0
- package/2x/es/locales/id-ID.d.ts +1 -0
- package/2x/es/locales/in-ID.d.ts +1 -0
- package/2x/es/locales/in-ID.js +1 -0
- package/2x/es/locales/it-IT.d.ts +1 -0
- package/2x/es/locales/ja-JP.d.ts +1 -0
- package/2x/es/locales/kk-KZ.d.ts +1 -0
- package/2x/es/locales/ko-KR.d.ts +1 -0
- package/2x/es/locales/ms-MY.d.ts +1 -0
- package/2x/es/locales/ms-MY.js +1 -0
- package/2x/es/locales/nb-NO.d.ts +1 -0
- package/2x/es/locales/nl-NL.d.ts +1 -0
- package/2x/es/locales/pt-BR.d.ts +1 -0
- package/2x/es/locales/ru-RU.d.ts +1 -0
- package/2x/es/locales/ru-RU.js +8 -2
- package/2x/es/locales/sr-RS.d.ts +1 -0
- package/2x/es/locales/sr-RS.js +1 -0
- package/2x/es/locales/th-TH.d.ts +1 -0
- package/2x/es/locales/th-TH.js +1 -0
- package/2x/es/locales/tr-TR.d.ts +1 -0
- package/2x/es/locales/vi-VN.d.ts +1 -0
- package/2x/es/locales/vi-VN.js +1 -0
- package/2x/es/locales/zh-CN.js +1 -0
- package/2x/es/locales/zh-HK.d.ts +1 -0
- package/2x/es/locales/zh-TW.d.ts +1 -0
- package/2x/es/utils/render-to-body.d.ts +1 -1
- package/2x/es/utils/render-to-body.js +2 -9
- package/2x/es/utils/render.d.ts +1 -9
- package/2x/es/utils/render.js +1 -65
- package/2x/es/utils/unstable-render.d.ts +9 -0
- package/2x/es/utils/unstable-render.js +28 -0
- package/2x/package.json +4 -4
- package/README.md +8 -1
- package/bundle/antd-mobile.cjs.development.js +2495 -1614
- package/bundle/antd-mobile.cjs.js +7 -7
- package/bundle/antd-mobile.compatible.umd.js +1 -1
- package/bundle/antd-mobile.es.development.js +1530 -649
- package/bundle/antd-mobile.es.js +7495 -6799
- package/bundle/antd-mobile.umd.development.js +2494 -1613
- package/bundle/antd-mobile.umd.js +7 -7
- package/bundle/style.css +1 -1
- package/cjs/components/button/button.d.ts +2 -2
- package/cjs/components/button/button.js +1 -0
- package/cjs/components/calendar-picker-view/calendar-picker-view.js +3 -0
- package/cjs/components/date-picker/date-picker-date-utils.d.ts +1 -1
- package/cjs/components/date-picker/date-picker-date-utils.js +23 -8
- package/cjs/components/date-picker/date-picker-quarter-utils.d.ts +3 -1
- package/cjs/components/date-picker/date-picker-quarter-utils.js +7 -2
- package/cjs/components/date-picker/date-picker-week-utils.d.ts +3 -1
- package/cjs/components/date-picker/date-picker-week-utils.js +12 -4
- package/cjs/components/date-picker-view/date-picker-view.d.ts +5 -3
- package/cjs/components/date-picker-view/date-picker-view.js +3 -3
- package/cjs/components/date-picker-view/useRenderLabel.js +2 -2
- package/cjs/components/ellipsis/ellipsis.d.ts +3 -0
- package/cjs/components/ellipsis/ellipsis.js +10 -2
- package/cjs/components/number-keyboard/number-keyboard.d.ts +1 -1
- package/cjs/components/popover/wrapper.d.ts +6 -9
- package/cjs/components/popover/wrapper.js +32 -6
- package/cjs/components/space/space.css +3 -3
- package/cjs/components/swiper/swiper.js +1 -1
- package/cjs/components/tabs/tabs.js +45 -13
- package/cjs/components/virtual-input/virtual-input.css +6 -1
- package/cjs/components/virtual-input/virtual-input.d.ts +6 -0
- package/cjs/components/virtual-input/virtual-input.js +133 -7
- package/cjs/index.d.ts +1 -0
- package/cjs/index.js +7 -0
- package/cjs/locales/ar-SA.d.ts +1 -0
- package/cjs/locales/ar-SA.js +1 -0
- package/cjs/locales/base.d.ts +1 -0
- package/cjs/locales/base.js +1 -0
- package/cjs/locales/cnr-ME.d.ts +1 -0
- package/cjs/locales/cnr-ME.js +1 -0
- package/cjs/locales/da-DK.d.ts +1 -0
- package/cjs/locales/de-DE.d.ts +1 -0
- package/cjs/locales/de-DE.js +1 -0
- package/cjs/locales/en-US.d.ts +1 -0
- package/cjs/locales/es-ES.d.ts +1 -0
- package/cjs/locales/fa-IR.d.ts +1 -0
- package/cjs/locales/fr-FR.d.ts +1 -0
- package/cjs/locales/hr-HR.d.ts +1 -0
- package/cjs/locales/hr-HR.js +1 -0
- package/cjs/locales/hu-HU.d.ts +1 -0
- package/cjs/locales/id-ID.d.ts +1 -0
- package/cjs/locales/in-ID.d.ts +1 -0
- package/cjs/locales/in-ID.js +1 -0
- package/cjs/locales/it-IT.d.ts +1 -0
- package/cjs/locales/ja-JP.d.ts +1 -0
- package/cjs/locales/kk-KZ.d.ts +1 -0
- package/cjs/locales/ko-KR.d.ts +1 -0
- package/cjs/locales/ms-MY.d.ts +1 -0
- package/cjs/locales/ms-MY.js +1 -0
- package/cjs/locales/nb-NO.d.ts +1 -0
- package/cjs/locales/nl-NL.d.ts +1 -0
- package/cjs/locales/pt-BR.d.ts +1 -0
- package/cjs/locales/ru-RU.d.ts +1 -0
- package/cjs/locales/ru-RU.js +8 -2
- package/cjs/locales/sr-RS.d.ts +1 -0
- package/cjs/locales/sr-RS.js +1 -0
- package/cjs/locales/th-TH.d.ts +1 -0
- package/cjs/locales/th-TH.js +1 -0
- package/cjs/locales/tr-TR.d.ts +1 -0
- package/cjs/locales/vi-VN.d.ts +1 -0
- package/cjs/locales/vi-VN.js +1 -0
- package/cjs/locales/zh-CN.js +1 -0
- package/cjs/locales/zh-HK.d.ts +1 -0
- package/cjs/locales/zh-TW.d.ts +1 -0
- package/cjs/utils/render-to-body.d.ts +1 -1
- package/cjs/utils/render-to-body.js +2 -9
- package/cjs/utils/render.d.ts +1 -9
- package/cjs/utils/render.js +10 -68
- package/cjs/utils/unstable-render.d.ts +9 -0
- package/cjs/utils/unstable-render.js +37 -0
- package/es/components/button/button.d.ts +2 -2
- package/es/components/button/button.js +1 -0
- package/es/components/calendar-picker-view/calendar-picker-view.js +3 -0
- package/es/components/date-picker/date-picker-date-utils.d.ts +1 -1
- package/es/components/date-picker/date-picker-date-utils.js +23 -8
- package/es/components/date-picker/date-picker-quarter-utils.d.ts +3 -1
- package/es/components/date-picker/date-picker-quarter-utils.js +7 -2
- package/es/components/date-picker/date-picker-week-utils.d.ts +3 -1
- package/es/components/date-picker/date-picker-week-utils.js +12 -4
- package/es/components/date-picker-view/date-picker-view.d.ts +5 -3
- package/es/components/date-picker-view/date-picker-view.js +4 -4
- package/es/components/date-picker-view/useRenderLabel.js +2 -2
- package/es/components/ellipsis/ellipsis.d.ts +3 -0
- package/es/components/ellipsis/ellipsis.js +10 -2
- package/es/components/number-keyboard/number-keyboard.d.ts +1 -1
- package/es/components/popover/wrapper.d.ts +6 -9
- package/es/components/popover/wrapper.js +30 -5
- package/es/components/space/space.css +3 -3
- package/es/components/swiper/swiper.js +1 -1
- package/es/components/tabs/tabs.js +44 -12
- package/es/components/virtual-input/virtual-input.css +6 -1
- package/es/components/virtual-input/virtual-input.d.ts +6 -0
- package/es/components/virtual-input/virtual-input.js +133 -7
- package/es/index.d.ts +1 -0
- package/es/index.js +3 -1
- package/es/locales/ar-SA.d.ts +1 -0
- package/es/locales/ar-SA.js +1 -0
- package/es/locales/base.d.ts +1 -0
- package/es/locales/base.js +1 -0
- package/es/locales/cnr-ME.d.ts +1 -0
- package/es/locales/cnr-ME.js +1 -0
- package/es/locales/da-DK.d.ts +1 -0
- package/es/locales/de-DE.d.ts +1 -0
- package/es/locales/de-DE.js +1 -0
- package/es/locales/en-US.d.ts +1 -0
- package/es/locales/es-ES.d.ts +1 -0
- package/es/locales/fa-IR.d.ts +1 -0
- package/es/locales/fr-FR.d.ts +1 -0
- package/es/locales/hr-HR.d.ts +1 -0
- package/es/locales/hr-HR.js +1 -0
- package/es/locales/hu-HU.d.ts +1 -0
- package/es/locales/id-ID.d.ts +1 -0
- package/es/locales/in-ID.d.ts +1 -0
- package/es/locales/in-ID.js +1 -0
- package/es/locales/it-IT.d.ts +1 -0
- package/es/locales/ja-JP.d.ts +1 -0
- package/es/locales/kk-KZ.d.ts +1 -0
- package/es/locales/ko-KR.d.ts +1 -0
- package/es/locales/ms-MY.d.ts +1 -0
- package/es/locales/ms-MY.js +1 -0
- package/es/locales/nb-NO.d.ts +1 -0
- package/es/locales/nl-NL.d.ts +1 -0
- package/es/locales/pt-BR.d.ts +1 -0
- package/es/locales/ru-RU.d.ts +1 -0
- package/es/locales/ru-RU.js +8 -2
- package/es/locales/sr-RS.d.ts +1 -0
- package/es/locales/sr-RS.js +1 -0
- package/es/locales/th-TH.d.ts +1 -0
- package/es/locales/th-TH.js +1 -0
- package/es/locales/tr-TR.d.ts +1 -0
- package/es/locales/vi-VN.d.ts +1 -0
- package/es/locales/vi-VN.js +1 -0
- package/es/locales/zh-CN.js +1 -0
- package/es/locales/zh-HK.d.ts +1 -0
- package/es/locales/zh-TW.d.ts +1 -0
- package/es/utils/render-to-body.d.ts +1 -1
- package/es/utils/render-to-body.js +2 -9
- package/es/utils/render.d.ts +1 -9
- package/es/utils/render.js +1 -65
- package/es/utils/unstable-render.d.ts +9 -0
- package/es/utils/unstable-render.js +28 -0
- package/package.json +4 -4
- package/umd/antd-mobile.js +1 -1
- package/2x/cjs/components/ellipsis/~ellipsis.d.ts +0 -15
- package/2x/cjs/components/ellipsis/~ellipsis.js +0 -161
- package/2x/es/components/ellipsis/~ellipsis.d.ts +0 -15
- package/2x/es/components/ellipsis/~ellipsis.js +0 -151
- package/cjs/components/ellipsis/~ellipsis.d.ts +0 -15
- package/cjs/components/ellipsis/~ellipsis.js +0 -161
- package/es/components/ellipsis/~ellipsis.d.ts +0 -15
- 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>;
|