hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Add modification for wrapping text with ellipsis

Browse Source 
Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>
This commit is contained in:
Janne Savolainen 2023-04-13 13:54:27 +03:00
parent 99b0c8639f
commit bbb7764103
No known key found for this signature in database
GPG Key ID: 8C6CFB2FFFE8F68A
3 changed files with 44 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/technical-features/ui-components/src/element/element.tsx
View File

@ -3,6 +3,7 @@ import { pipeline } from "@ogre-tools/fp";
import { flexParentModification } from "./prop-modifications/flex/flex-parent";
import { classNameModification } from "./prop-modifications/class-names/class-names";
import { vanillaClassNameAdapterModification } from "./prop-modifications/class-names/vanilla-class-name-adapter";
import { wordWrapModification } from "./prop-modifications/word-wrap/word-wrap";
export const ElementFor =
<T extends HTMLElement, Y extends HTMLAttributes<T>>(TagName: React.ElementType) =>
@ -11,6 +12,7 @@ export const ElementFor =
props,
vanillaClassNameAdapterModification,
flexParentModification,
wordWrapModification,
classNameModification,
);

18
packages/technical-features/ui-components/src/element/prop-modifications/word-wrap/word-wrap.test.tsx Normal file
View File

@ -0,0 +1,18 @@
import React from "react";
import { Div } from "../../elements";
import { render } from "@testing-library/react";
import { discoverFor } from "@k8slens/react-testing-library-discovery";
describe("word-wrap", () => {
it("given word wrap wit, renders with class name", () => {
const rendered = render(
<Div _wordWrap _className={["some-class-name"]} data-some-element-test />,
);
const discover = discoverFor(() => rendered);
const { discovered } = discover.getSingleElement("some-element");
expect(discovered.className).toBe("overflow-hidden text-ellipsis some-class-name");
});
});

24
packages/technical-features/ui-components/src/element/prop-modifications/word-wrap/word-wrap.ts Normal file
View File

@ -0,0 +1,24 @@
import type { ClassName } from "../class-names/class-names";
declare global {
interface ElementProps {
_className?: ClassName;
_wordWrap?: boolean;
}
}
export const wordWrapModification = <T extends ElementProps>({
_wordWrap,
_className,
...props
}: T) => {
if (!_wordWrap) {
return { _className, ...props };
}
return {
...props,
_className: ["overflow-hidden", "text-ellipsis", _className],
};
};