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

Make separator in Map-component know left and right item

Browse Source 
Co-authored-by: Janne Savolainen <janne.savolainen@live.fi>

Signed-off-by: Iku-turso <mikko.aspiala@gmail.com>
This commit is contained in:
Iku-turso 2022-10-20 12:33:07 +03:00 committed by Janne Savolainen
parent 18f1e1b6aa
commit aa785c9738
No known key found for this signature in database
GPG Key ID: 8C6CFB2FFFE8F68A
4 changed files with 74 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/common/utils/add-separator/add-separator.ts
View File

@ -3,7 +3,7 @@
* Licensed under MIT License. See LICENSE in root directory for more information. * Licensed under MIT License. See LICENSE in root directory for more information.
*/ */
type GetSeparator<Item, Separator> = (left: Item, right: Item) => Separator; export type GetSeparator<Item, Separator> = (left: Item, right: Item) => Separator;
export const addSeparator = <Item, Separator>( export const addSeparator = <Item, Separator>(
getSeparator: GetSeparator<Item, Separator>, getSeparator: GetSeparator<Item, Separator>,

32
src/renderer/components/map/__snapshots__/map.test.tsx.snap
View File

@ -39,6 +39,38 @@ exports[`Map given more than one item and separator renders 1`] = `
</body> </body>
`; `;
exports[`Map given more than one item and separator using left and right renders 1`] = `
<body>
<div>
<div
data-testid="some-item-id"
/>
<div
data-testid="separator-between-some-item-id-and-some-other-item-id"
>
Some separator between
some-item-id
and
some-other-item-id
</div>
<div
data-testid="some-other-item-id"
/>
<div
data-testid="separator-between-some-other-item-id-and-some-another-item-id"
>
Some separator between
some-other-item-id
and
some-another-item-id
</div>
<div
data-testid="some-another-item-id"
/>
</div>
</body>
`;
exports[`Map given no items and placeholder renders 1`] = ` exports[`Map given no items and placeholder renders 1`] = `
<body> <body>
<div> <div>

38
src/renderer/components/map/map.test.tsx
View File

@ -118,4 +118,42 @@ describe("Map", () => {
expect(rendered.getAllByTestId("separator")).toHaveLength(2); expect(rendered.getAllByTestId("separator")).toHaveLength(2);
}); });
}); });
describe("given more than one item and separator using left and right", () => {
let rendered: RenderResult;
beforeEach(() => {
rendered = render(
<Map
items={[
{ id: "some-item-id" },
{ id: "some-other-item-id" },
{ id: "some-another-item-id" },
]}
getSeparator={(left, right) => (
<div data-testid={`separator-between-${left.id}-and-${right.id}`}>
Some separator between
{left.id}
and
{right.id}
</div>
)}
>
{(item) => <div data-testid={item.id} />}
</Map>,
);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("renders items", () => {
expect(rendered.getByTestId("some-item-id")).toBeInTheDocument();
});
it("renders separator", () => {
expect(rendered.getByTestId("separator-between-some-item-id-and-some-other-item-id")).toBeInTheDocument();
});
});
}); });

5
src/renderer/components/map/map.tsx
View File

@ -5,6 +5,7 @@
import { pipeline } from "@ogre-tools/fp"; import { pipeline } from "@ogre-tools/fp";
import { identity, map } from "lodash/fp"; import { identity, map } from "lodash/fp";
import React from "react"; import React from "react";
import type { GetSeparator } from "../../../common/utils/add-separator/add-separator";
import { addSeparator } from "../../../common/utils/add-separator/add-separator"; import { addSeparator } from "../../../common/utils/add-separator/add-separator";
interface RequiredPropertiesForItem { interface RequiredPropertiesForItem {
@ -15,7 +16,7 @@ interface MapProps<Item extends RequiredPropertiesForItem> {
items: Item[]; items: Item[];
children: (item: Item) => React.ReactElement; children: (item: Item) => React.ReactElement;
getPlaceholder?: () => React.ReactElement; getPlaceholder?: () => React.ReactElement;
getSeparator?: () => React.ReactElement; getSeparator?: GetSeparator<Item, React.ReactElement>;
} }
export const Map = <Item extends RequiredPropertiesForItem>( export const Map = <Item extends RequiredPropertiesForItem>(
@ -42,7 +43,7 @@ export const Map = <Item extends RequiredPropertiesForItem>(
id: `separator-between-${left.item.id}-and-${right.item.id}`, id: `separator-between-${left.item.id}-and-${right.item.id}`,
}, },
render: getSeparator, render: () => getSeparator(left.item, right.item),
}), }),
items, items,