@chayns-components/core 5.5.23 → 5.5.25
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/AGENTS.md +44 -0
- package/LICENSE +21 -0
- package/lib/cjs/components/copyable-content/CopyableContent.js +12 -2
- package/lib/cjs/components/copyable-content/CopyableContent.js.map +1 -1
- package/lib/cjs/components/copyable-content/CopyableContent.styles.js +15 -8
- package/lib/cjs/components/copyable-content/CopyableContent.styles.js.map +1 -1
- package/lib/cjs/components/copyable-content/CopyableContent.test.js +43 -0
- package/lib/cjs/components/copyable-content/CopyableContent.test.js.map +1 -1
- package/lib/cjs/components/truncation/Truncation.js +61 -149
- package/lib/cjs/components/truncation/Truncation.js.map +1 -1
- package/lib/cjs/components/truncation/Truncation.styles.js +3 -4
- package/lib/cjs/components/truncation/Truncation.styles.js.map +1 -1
- package/lib/cjs/components/truncation/Truncation.test.js +61 -0
- package/lib/cjs/components/truncation/Truncation.test.js.map +1 -0
- package/lib/esm/components/copyable-content/CopyableContent.js +13 -3
- package/lib/esm/components/copyable-content/CopyableContent.js.map +1 -1
- package/lib/esm/components/copyable-content/CopyableContent.styles.js +14 -7
- package/lib/esm/components/copyable-content/CopyableContent.styles.js.map +1 -1
- package/lib/esm/components/copyable-content/CopyableContent.test.js +43 -0
- package/lib/esm/components/copyable-content/CopyableContent.test.js.map +1 -1
- package/lib/esm/components/truncation/Truncation.js +61 -149
- package/lib/esm/components/truncation/Truncation.js.map +1 -1
- package/lib/esm/components/truncation/Truncation.styles.js +2 -3
- package/lib/esm/components/truncation/Truncation.styles.js.map +1 -1
- package/lib/esm/components/truncation/Truncation.test.js +58 -0
- package/lib/esm/components/truncation/Truncation.test.js.map +1 -0
- package/lib/types/components/copyable-content/CopyableContent.d.ts +4 -0
- package/lib/types/components/copyable-content/CopyableContent.styles.d.ts +7 -2
- package/lib/types/components/truncation/Truncation.d.ts +1 -1
- package/lib/types/components/truncation/Truncation.styles.d.ts +1 -1
- package/package.json +5 -4
- package/lib/cjs/utils/truncation.js +0 -42
- package/lib/cjs/utils/truncation.js.map +0 -1
- package/lib/esm/utils/truncation.js +0 -35
- package/lib/esm/utils/truncation.js.map +0 -1
- package/lib/types/utils/truncation.d.ts +0 -1
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { render, screen, waitFor } from '@testing-library/react';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { afterEach, describe, expect, it, vi } from 'vitest';
|
|
4
|
+
import Truncation from './Truncation';
|
|
5
|
+
vi.mock('@chayns-components/textstring', () => ({
|
|
6
|
+
Textstring: () => 'Mehr anzeigen',
|
|
7
|
+
TextstringProvider: ({
|
|
8
|
+
children
|
|
9
|
+
}) => children,
|
|
10
|
+
ttsToITextString: vi.fn()
|
|
11
|
+
}));
|
|
12
|
+
const resizeObserverCallbacks = [];
|
|
13
|
+
class ResizeObserverMock {
|
|
14
|
+
constructor(callback) {
|
|
15
|
+
resizeObserverCallbacks.push(callback);
|
|
16
|
+
}
|
|
17
|
+
disconnect() {}
|
|
18
|
+
observe() {}
|
|
19
|
+
unobserve() {}
|
|
20
|
+
}
|
|
21
|
+
vi.stubGlobal('ResizeObserver', ResizeObserverMock);
|
|
22
|
+
const triggerResize = height => {
|
|
23
|
+
resizeObserverCallbacks.forEach(callback => {
|
|
24
|
+
callback([{
|
|
25
|
+
contentRect: {
|
|
26
|
+
height
|
|
27
|
+
}
|
|
28
|
+
}]);
|
|
29
|
+
});
|
|
30
|
+
};
|
|
31
|
+
afterEach(() => {
|
|
32
|
+
resizeObserverCallbacks.length = 0;
|
|
33
|
+
});
|
|
34
|
+
describe('Truncation', () => {
|
|
35
|
+
it('shows the more action when content exceeds the collapsed height', async () => {
|
|
36
|
+
render(/*#__PURE__*/React.createElement(Truncation, {
|
|
37
|
+
collapsedHeight: 100
|
|
38
|
+
}, /*#__PURE__*/React.createElement("div", null, "Long content")));
|
|
39
|
+
triggerResize(240);
|
|
40
|
+
await waitFor(() => {
|
|
41
|
+
expect(screen.getByRole('button', {
|
|
42
|
+
name: 'Mehr anzeigen'
|
|
43
|
+
})).toBeInTheDocument();
|
|
44
|
+
});
|
|
45
|
+
});
|
|
46
|
+
it('keeps short content expanded without a more action', async () => {
|
|
47
|
+
render(/*#__PURE__*/React.createElement(Truncation, {
|
|
48
|
+
collapsedHeight: 100
|
|
49
|
+
}, /*#__PURE__*/React.createElement("div", null, "Short content")));
|
|
50
|
+
triggerResize(64);
|
|
51
|
+
await waitFor(() => {
|
|
52
|
+
expect(screen.queryByRole('button', {
|
|
53
|
+
name: 'Mehr anzeigen'
|
|
54
|
+
})).not.toBeInTheDocument();
|
|
55
|
+
});
|
|
56
|
+
});
|
|
57
|
+
});
|
|
58
|
+
//# sourceMappingURL=Truncation.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Truncation.test.js","names":["render","screen","waitFor","React","afterEach","describe","expect","it","vi","Truncation","mock","Textstring","TextstringProvider","children","ttsToITextString","fn","resizeObserverCallbacks","ResizeObserverMock","constructor","callback","push","disconnect","observe","unobserve","stubGlobal","triggerResize","height","forEach","contentRect","length","createElement","collapsedHeight","getByRole","name","toBeInTheDocument","queryByRole","not"],"sources":["../../../../src/components/truncation/Truncation.test.tsx"],"sourcesContent":["import { render, screen, waitFor } from '@testing-library/react';\nimport React from 'react';\nimport { afterEach, describe, expect, it, vi } from 'vitest';\nimport Truncation from './Truncation';\n\nvi.mock('@chayns-components/textstring', () => ({\n Textstring: () => 'Mehr anzeigen',\n TextstringProvider: ({ children }: { children: React.ReactNode }) => children,\n ttsToITextString: vi.fn(),\n}));\n\ntype ResizeObserverCallback = (entries: ResizeObserverEntry[]) => void;\n\nconst resizeObserverCallbacks: ResizeObserverCallback[] = [];\n\nclass ResizeObserverMock {\n constructor(callback: ResizeObserverCallback) {\n resizeObserverCallbacks.push(callback);\n }\n\n disconnect() {}\n\n observe() {}\n\n unobserve() {}\n}\n\nvi.stubGlobal('ResizeObserver', ResizeObserverMock);\n\nconst triggerResize = (height: number) => {\n resizeObserverCallbacks.forEach((callback) => {\n callback([\n {\n contentRect: { height } as DOMRectReadOnly,\n } as ResizeObserverEntry,\n ]);\n });\n};\n\nafterEach(() => {\n resizeObserverCallbacks.length = 0;\n});\n\ndescribe('Truncation', () => {\n it('shows the more action when content exceeds the collapsed height', async () => {\n render(\n <Truncation collapsedHeight={100}>\n <div>Long content</div>\n </Truncation>,\n );\n\n triggerResize(240);\n\n await waitFor(() => {\n expect(screen.getByRole('button', { name: 'Mehr anzeigen' })).toBeInTheDocument();\n });\n });\n\n it('keeps short content expanded without a more action', async () => {\n render(\n <Truncation collapsedHeight={100}>\n <div>Short content</div>\n </Truncation>,\n );\n\n triggerResize(64);\n\n await waitFor(() => {\n expect(screen.queryByRole('button', { name: 'Mehr anzeigen' })).not.toBeInTheDocument();\n });\n });\n});\n"],"mappings":"AAAA,SAASA,MAAM,EAAEC,MAAM,EAAEC,OAAO,QAAQ,wBAAwB;AAChE,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,EAAE,EAAEC,EAAE,QAAQ,QAAQ;AAC5D,OAAOC,UAAU,MAAM,cAAc;AAErCD,EAAE,CAACE,IAAI,CAAC,+BAA+B,EAAE,OAAO;EAC5CC,UAAU,EAAEA,CAAA,KAAM,eAAe;EACjCC,kBAAkB,EAAEA,CAAC;IAAEC;EAAwC,CAAC,KAAKA,QAAQ;EAC7EC,gBAAgB,EAAEN,EAAE,CAACO,EAAE,CAAC;AAC5B,CAAC,CAAC,CAAC;AAIH,MAAMC,uBAAiD,GAAG,EAAE;AAE5D,MAAMC,kBAAkB,CAAC;EACrBC,WAAWA,CAACC,QAAgC,EAAE;IAC1CH,uBAAuB,CAACI,IAAI,CAACD,QAAQ,CAAC;EAC1C;EAEAE,UAAUA,CAAA,EAAG,CAAC;EAEdC,OAAOA,CAAA,EAAG,CAAC;EAEXC,SAASA,CAAA,EAAG,CAAC;AACjB;AAEAf,EAAE,CAACgB,UAAU,CAAC,gBAAgB,EAAEP,kBAAkB,CAAC;AAEnD,MAAMQ,aAAa,GAAIC,MAAc,IAAK;EACtCV,uBAAuB,CAACW,OAAO,CAAER,QAAQ,IAAK;IAC1CA,QAAQ,CAAC,CACL;MACIS,WAAW,EAAE;QAAEF;MAAO;IAC1B,CAAC,CACJ,CAAC;EACN,CAAC,CAAC;AACN,CAAC;AAEDtB,SAAS,CAAC,MAAM;EACZY,uBAAuB,CAACa,MAAM,GAAG,CAAC;AACtC,CAAC,CAAC;AAEFxB,QAAQ,CAAC,YAAY,EAAE,MAAM;EACzBE,EAAE,CAAC,iEAAiE,EAAE,YAAY;IAC9EP,MAAM,cACFG,KAAA,CAAA2B,aAAA,CAACrB,UAAU;MAACsB,eAAe,EAAE;IAAI,gBAC7B5B,KAAA,CAAA2B,aAAA,cAAK,cAAiB,CACd,CAChB,CAAC;IAEDL,aAAa,CAAC,GAAG,CAAC;IAElB,MAAMvB,OAAO,CAAC,MAAM;MAChBI,MAAM,CAACL,MAAM,CAAC+B,SAAS,CAAC,QAAQ,EAAE;QAAEC,IAAI,EAAE;MAAgB,CAAC,CAAC,CAAC,CAACC,iBAAiB,CAAC,CAAC;IACrF,CAAC,CAAC;EACN,CAAC,CAAC;EAEF3B,EAAE,CAAC,oDAAoD,EAAE,YAAY;IACjEP,MAAM,cACFG,KAAA,CAAA2B,aAAA,CAACrB,UAAU;MAACsB,eAAe,EAAE;IAAI,gBAC7B5B,KAAA,CAAA2B,aAAA,cAAK,eAAkB,CACf,CAChB,CAAC;IAEDL,aAAa,CAAC,EAAE,CAAC;IAEjB,MAAMvB,OAAO,CAAC,MAAM;MAChBI,MAAM,CAACL,MAAM,CAACkC,WAAW,CAAC,QAAQ,EAAE;QAAEF,IAAI,EAAE;MAAgB,CAAC,CAAC,CAAC,CAACG,GAAG,CAACF,iBAAiB,CAAC,CAAC;IAC3F,CAAC,CAAC;EACN,CAAC,CAAC;AACN,CAAC,CAAC","ignoreList":[]}
|
|
@@ -17,6 +17,10 @@ export type CopyableContentProps = {
|
|
|
17
17
|
* Replaces the localized error message shown when copying fails.
|
|
18
18
|
*/
|
|
19
19
|
copyFailedMessage?: string;
|
|
20
|
+
/**
|
|
21
|
+
* The height of the content in its collapsed state.
|
|
22
|
+
*/
|
|
23
|
+
collapsedHeight?: number;
|
|
20
24
|
};
|
|
21
25
|
declare const CopyableContent: FC<CopyableContentProps>;
|
|
22
26
|
export default CopyableContent;
|
|
@@ -19,8 +19,13 @@ export declare const StyledCopyableContentButton: import("styled-components/dist
|
|
|
19
19
|
} & {
|
|
20
20
|
theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
|
|
21
21
|
}, never>>> & string;
|
|
22
|
-
export declare const
|
|
22
|
+
export declare const StyledCopyableContentTruncation: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
23
|
+
export declare const StyledCopyableContentBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme" | "$shouldShowPadding"> & {
|
|
24
|
+
$shouldShowPadding?: boolean;
|
|
25
|
+
} & {
|
|
23
26
|
theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
|
|
24
|
-
}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme"> & {
|
|
27
|
+
}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme" | "$shouldShowPadding"> & {
|
|
28
|
+
$shouldShowPadding?: boolean;
|
|
29
|
+
} & {
|
|
25
30
|
theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
|
|
26
31
|
}, never>>> & string;
|
|
@@ -5,7 +5,7 @@ export declare const StyledMotionTruncationContent: import("styled-components/di
|
|
|
5
5
|
}, never> & Partial<Pick<Omit<Omit<import("framer-motion").HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
6
6
|
ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
|
|
7
7
|
}, never>>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof React.Component<any, {}, any>>;
|
|
8
|
-
export declare const
|
|
8
|
+
export declare const StyledTruncationContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
9
9
|
export declare const StyledTruncationClampWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme" | "$position"> & {
|
|
10
10
|
$position: ClampPosition;
|
|
11
11
|
} & {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.5.
|
|
3
|
+
"version": "5.5.25",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -75,8 +75,8 @@
|
|
|
75
75
|
"vitest": "^1.6.1"
|
|
76
76
|
},
|
|
77
77
|
"dependencies": {
|
|
78
|
-
"@chayns-components/format": "^5.5.
|
|
79
|
-
"@chayns-components/textstring": "^5.5.
|
|
78
|
+
"@chayns-components/format": "^5.5.24",
|
|
79
|
+
"@chayns-components/textstring": "^5.5.24",
|
|
80
80
|
"@chayns/colors": "^2.0.2",
|
|
81
81
|
"@chayns/uac-service": "~0.0.62",
|
|
82
82
|
"clsx": "^2.1.1",
|
|
@@ -92,5 +92,6 @@
|
|
|
92
92
|
},
|
|
93
93
|
"publishConfig": {
|
|
94
94
|
"access": "public"
|
|
95
|
-
}
|
|
95
|
+
},
|
|
96
|
+
"gitHead": "fb124c67d5545a50ad85006b0ef94fa44a967f48"
|
|
96
97
|
}
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.truncateElement = void 0;
|
|
7
|
-
const doesElementOverflow = (element, referenceHeight) => element.scrollHeight > referenceHeight;
|
|
8
|
-
const doesElementHasOnlyText = element => {
|
|
9
|
-
// Check if element has no child elements.
|
|
10
|
-
if (element.children.length === 0) {
|
|
11
|
-
// If element has text (not empty), it is only text.
|
|
12
|
-
return element.textContent !== '';
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
// Element has child elements or no text, so it's not only text.
|
|
16
|
-
return false;
|
|
17
|
-
};
|
|
18
|
-
const removeLastLeafElement = element => {
|
|
19
|
-
// remove last element of html element where the last element is a leaf element and its content is a string
|
|
20
|
-
const {
|
|
21
|
-
lastElementChild,
|
|
22
|
-
lastChild
|
|
23
|
-
} = element;
|
|
24
|
-
if (lastElementChild && !doesElementHasOnlyText(lastElementChild) && lastElementChild.hasChildNodes()) {
|
|
25
|
-
removeLastLeafElement(lastElementChild);
|
|
26
|
-
} else if (lastChild && lastChild.nodeType === Node.TEXT_NODE && lastChild.textContent && lastChild.textContent.length > 25) {
|
|
27
|
-
lastChild.textContent = `${lastChild.textContent.substring(0, lastChild.textContent.length - 25)} ...`;
|
|
28
|
-
} else if (lastElementChild && doesElementHasOnlyText(lastElementChild) && lastElementChild.textContent && lastElementChild.textContent.length > 25) {
|
|
29
|
-
lastElementChild.textContent = `${lastElementChild.textContent.substring(0, lastElementChild.textContent.length - 25)} ...`;
|
|
30
|
-
} else if (lastChild) {
|
|
31
|
-
element.removeChild(lastChild);
|
|
32
|
-
} else if (lastElementChild) {
|
|
33
|
-
element.removeChild(lastElementChild);
|
|
34
|
-
}
|
|
35
|
-
};
|
|
36
|
-
const truncateElement = (element, referenceHeight) => {
|
|
37
|
-
while (doesElementOverflow(element, referenceHeight)) {
|
|
38
|
-
removeLastLeafElement(element);
|
|
39
|
-
}
|
|
40
|
-
};
|
|
41
|
-
exports.truncateElement = truncateElement;
|
|
42
|
-
//# sourceMappingURL=truncation.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"truncation.js","names":["doesElementOverflow","element","referenceHeight","scrollHeight","doesElementHasOnlyText","children","length","textContent","removeLastLeafElement","lastElementChild","lastChild","hasChildNodes","nodeType","Node","TEXT_NODE","substring","removeChild","truncateElement","exports"],"sources":["../../../src/utils/truncation.ts"],"sourcesContent":["const doesElementOverflow = (element: HTMLElement, referenceHeight: number): boolean =>\n element.scrollHeight > referenceHeight;\n\nconst doesElementHasOnlyText = (element: HTMLElement): boolean => {\n // Check if element has no child elements.\n if (element.children.length === 0) {\n // If element has text (not empty), it is only text.\n return element.textContent !== '';\n }\n\n // Element has child elements or no text, so it's not only text.\n return false;\n};\n\nconst removeLastLeafElement = (element: HTMLElement) => {\n // remove last element of html element where the last element is a leaf element and its content is a string\n const { lastElementChild, lastChild } = element;\n\n if (\n lastElementChild &&\n !doesElementHasOnlyText(lastElementChild as HTMLElement) &&\n lastElementChild.hasChildNodes()\n ) {\n removeLastLeafElement(lastElementChild as HTMLElement);\n } else if (\n lastChild &&\n lastChild.nodeType === Node.TEXT_NODE &&\n lastChild.textContent &&\n lastChild.textContent.length > 25\n ) {\n lastChild.textContent = `${lastChild.textContent.substring(0, lastChild.textContent.length - 25)} ...`;\n } else if (\n lastElementChild &&\n doesElementHasOnlyText(lastElementChild as HTMLElement) &&\n lastElementChild.textContent &&\n lastElementChild.textContent.length > 25\n ) {\n lastElementChild.textContent = `${lastElementChild.textContent.substring(\n 0,\n lastElementChild.textContent.length - 25,\n )} ...`;\n } else if (lastChild) {\n element.removeChild(lastChild);\n } else if (lastElementChild) {\n element.removeChild(lastElementChild);\n }\n};\nexport const truncateElement = (element: HTMLElement, referenceHeight: number) => {\n while (doesElementOverflow(element, referenceHeight)) {\n removeLastLeafElement(element);\n }\n};\n"],"mappings":";;;;;;AAAA,MAAMA,mBAAmB,GAAGA,CAACC,OAAoB,EAAEC,eAAuB,KACtED,OAAO,CAACE,YAAY,GAAGD,eAAe;AAE1C,MAAME,sBAAsB,GAAIH,OAAoB,IAAc;EAC9D;EACA,IAAIA,OAAO,CAACI,QAAQ,CAACC,MAAM,KAAK,CAAC,EAAE;IAC/B;IACA,OAAOL,OAAO,CAACM,WAAW,KAAK,EAAE;EACrC;;EAEA;EACA,OAAO,KAAK;AAChB,CAAC;AAED,MAAMC,qBAAqB,GAAIP,OAAoB,IAAK;EACpD;EACA,MAAM;IAAEQ,gBAAgB;IAAEC;EAAU,CAAC,GAAGT,OAAO;EAE/C,IACIQ,gBAAgB,IAChB,CAACL,sBAAsB,CAACK,gBAA+B,CAAC,IACxDA,gBAAgB,CAACE,aAAa,CAAC,CAAC,EAClC;IACEH,qBAAqB,CAACC,gBAA+B,CAAC;EAC1D,CAAC,MAAM,IACHC,SAAS,IACTA,SAAS,CAACE,QAAQ,KAAKC,IAAI,CAACC,SAAS,IACrCJ,SAAS,CAACH,WAAW,IACrBG,SAAS,CAACH,WAAW,CAACD,MAAM,GAAG,EAAE,EACnC;IACEI,SAAS,CAACH,WAAW,GAAG,GAAGG,SAAS,CAACH,WAAW,CAACQ,SAAS,CAAC,CAAC,EAAEL,SAAS,CAACH,WAAW,CAACD,MAAM,GAAG,EAAE,CAAC,MAAM;EAC1G,CAAC,MAAM,IACHG,gBAAgB,IAChBL,sBAAsB,CAACK,gBAA+B,CAAC,IACvDA,gBAAgB,CAACF,WAAW,IAC5BE,gBAAgB,CAACF,WAAW,CAACD,MAAM,GAAG,EAAE,EAC1C;IACEG,gBAAgB,CAACF,WAAW,GAAG,GAAGE,gBAAgB,CAACF,WAAW,CAACQ,SAAS,CACpE,CAAC,EACDN,gBAAgB,CAACF,WAAW,CAACD,MAAM,GAAG,EAC1C,CAAC,MAAM;EACX,CAAC,MAAM,IAAII,SAAS,EAAE;IAClBT,OAAO,CAACe,WAAW,CAACN,SAAS,CAAC;EAClC,CAAC,MAAM,IAAID,gBAAgB,EAAE;IACzBR,OAAO,CAACe,WAAW,CAACP,gBAAgB,CAAC;EACzC;AACJ,CAAC;AACM,MAAMQ,eAAe,GAAGA,CAAChB,OAAoB,EAAEC,eAAuB,KAAK;EAC9E,OAAOF,mBAAmB,CAACC,OAAO,EAAEC,eAAe,CAAC,EAAE;IAClDM,qBAAqB,CAACP,OAAO,CAAC;EAClC;AACJ,CAAC;AAACiB,OAAA,CAAAD,eAAA,GAAAA,eAAA","ignoreList":[]}
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
const doesElementOverflow = (element, referenceHeight) => element.scrollHeight > referenceHeight;
|
|
2
|
-
const doesElementHasOnlyText = element => {
|
|
3
|
-
// Check if element has no child elements.
|
|
4
|
-
if (element.children.length === 0) {
|
|
5
|
-
// If element has text (not empty), it is only text.
|
|
6
|
-
return element.textContent !== '';
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
// Element has child elements or no text, so it's not only text.
|
|
10
|
-
return false;
|
|
11
|
-
};
|
|
12
|
-
const removeLastLeafElement = element => {
|
|
13
|
-
// remove last element of html element where the last element is a leaf element and its content is a string
|
|
14
|
-
const {
|
|
15
|
-
lastElementChild,
|
|
16
|
-
lastChild
|
|
17
|
-
} = element;
|
|
18
|
-
if (lastElementChild && !doesElementHasOnlyText(lastElementChild) && lastElementChild.hasChildNodes()) {
|
|
19
|
-
removeLastLeafElement(lastElementChild);
|
|
20
|
-
} else if (lastChild && lastChild.nodeType === Node.TEXT_NODE && lastChild.textContent && lastChild.textContent.length > 25) {
|
|
21
|
-
lastChild.textContent = `${lastChild.textContent.substring(0, lastChild.textContent.length - 25)} ...`;
|
|
22
|
-
} else if (lastElementChild && doesElementHasOnlyText(lastElementChild) && lastElementChild.textContent && lastElementChild.textContent.length > 25) {
|
|
23
|
-
lastElementChild.textContent = `${lastElementChild.textContent.substring(0, lastElementChild.textContent.length - 25)} ...`;
|
|
24
|
-
} else if (lastChild) {
|
|
25
|
-
element.removeChild(lastChild);
|
|
26
|
-
} else if (lastElementChild) {
|
|
27
|
-
element.removeChild(lastElementChild);
|
|
28
|
-
}
|
|
29
|
-
};
|
|
30
|
-
export const truncateElement = (element, referenceHeight) => {
|
|
31
|
-
while (doesElementOverflow(element, referenceHeight)) {
|
|
32
|
-
removeLastLeafElement(element);
|
|
33
|
-
}
|
|
34
|
-
};
|
|
35
|
-
//# sourceMappingURL=truncation.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"truncation.js","names":["doesElementOverflow","element","referenceHeight","scrollHeight","doesElementHasOnlyText","children","length","textContent","removeLastLeafElement","lastElementChild","lastChild","hasChildNodes","nodeType","Node","TEXT_NODE","substring","removeChild","truncateElement"],"sources":["../../../src/utils/truncation.ts"],"sourcesContent":["const doesElementOverflow = (element: HTMLElement, referenceHeight: number): boolean =>\n element.scrollHeight > referenceHeight;\n\nconst doesElementHasOnlyText = (element: HTMLElement): boolean => {\n // Check if element has no child elements.\n if (element.children.length === 0) {\n // If element has text (not empty), it is only text.\n return element.textContent !== '';\n }\n\n // Element has child elements or no text, so it's not only text.\n return false;\n};\n\nconst removeLastLeafElement = (element: HTMLElement) => {\n // remove last element of html element where the last element is a leaf element and its content is a string\n const { lastElementChild, lastChild } = element;\n\n if (\n lastElementChild &&\n !doesElementHasOnlyText(lastElementChild as HTMLElement) &&\n lastElementChild.hasChildNodes()\n ) {\n removeLastLeafElement(lastElementChild as HTMLElement);\n } else if (\n lastChild &&\n lastChild.nodeType === Node.TEXT_NODE &&\n lastChild.textContent &&\n lastChild.textContent.length > 25\n ) {\n lastChild.textContent = `${lastChild.textContent.substring(0, lastChild.textContent.length - 25)} ...`;\n } else if (\n lastElementChild &&\n doesElementHasOnlyText(lastElementChild as HTMLElement) &&\n lastElementChild.textContent &&\n lastElementChild.textContent.length > 25\n ) {\n lastElementChild.textContent = `${lastElementChild.textContent.substring(\n 0,\n lastElementChild.textContent.length - 25,\n )} ...`;\n } else if (lastChild) {\n element.removeChild(lastChild);\n } else if (lastElementChild) {\n element.removeChild(lastElementChild);\n }\n};\nexport const truncateElement = (element: HTMLElement, referenceHeight: number) => {\n while (doesElementOverflow(element, referenceHeight)) {\n removeLastLeafElement(element);\n }\n};\n"],"mappings":"AAAA,MAAMA,mBAAmB,GAAGA,CAACC,OAAoB,EAAEC,eAAuB,KACtED,OAAO,CAACE,YAAY,GAAGD,eAAe;AAE1C,MAAME,sBAAsB,GAAIH,OAAoB,IAAc;EAC9D;EACA,IAAIA,OAAO,CAACI,QAAQ,CAACC,MAAM,KAAK,CAAC,EAAE;IAC/B;IACA,OAAOL,OAAO,CAACM,WAAW,KAAK,EAAE;EACrC;;EAEA;EACA,OAAO,KAAK;AAChB,CAAC;AAED,MAAMC,qBAAqB,GAAIP,OAAoB,IAAK;EACpD;EACA,MAAM;IAAEQ,gBAAgB;IAAEC;EAAU,CAAC,GAAGT,OAAO;EAE/C,IACIQ,gBAAgB,IAChB,CAACL,sBAAsB,CAACK,gBAA+B,CAAC,IACxDA,gBAAgB,CAACE,aAAa,CAAC,CAAC,EAClC;IACEH,qBAAqB,CAACC,gBAA+B,CAAC;EAC1D,CAAC,MAAM,IACHC,SAAS,IACTA,SAAS,CAACE,QAAQ,KAAKC,IAAI,CAACC,SAAS,IACrCJ,SAAS,CAACH,WAAW,IACrBG,SAAS,CAACH,WAAW,CAACD,MAAM,GAAG,EAAE,EACnC;IACEI,SAAS,CAACH,WAAW,GAAG,GAAGG,SAAS,CAACH,WAAW,CAACQ,SAAS,CAAC,CAAC,EAAEL,SAAS,CAACH,WAAW,CAACD,MAAM,GAAG,EAAE,CAAC,MAAM;EAC1G,CAAC,MAAM,IACHG,gBAAgB,IAChBL,sBAAsB,CAACK,gBAA+B,CAAC,IACvDA,gBAAgB,CAACF,WAAW,IAC5BE,gBAAgB,CAACF,WAAW,CAACD,MAAM,GAAG,EAAE,EAC1C;IACEG,gBAAgB,CAACF,WAAW,GAAG,GAAGE,gBAAgB,CAACF,WAAW,CAACQ,SAAS,CACpE,CAAC,EACDN,gBAAgB,CAACF,WAAW,CAACD,MAAM,GAAG,EAC1C,CAAC,MAAM;EACX,CAAC,MAAM,IAAII,SAAS,EAAE;IAClBT,OAAO,CAACe,WAAW,CAACN,SAAS,CAAC;EAClC,CAAC,MAAM,IAAID,gBAAgB,EAAE;IACzBR,OAAO,CAACe,WAAW,CAACP,gBAAgB,CAAC;EACzC;AACJ,CAAC;AACD,OAAO,MAAMQ,eAAe,GAAGA,CAAChB,OAAoB,EAAEC,eAAuB,KAAK;EAC9E,OAAOF,mBAAmB,CAACC,OAAO,EAAEC,eAAe,CAAC,EAAE;IAClDM,qBAAqB,CAACP,OAAO,CAAC;EAClC;AACJ,CAAC","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const truncateElement: (element: HTMLElement, referenceHeight: number) => void;
|