Skip to content

Commit

Permalink
feat(plasma-*, sdds-*): add beforeList and afterList props in Select
Browse files Browse the repository at this point in the history
shuga2704 committed Dec 4, 2024
1 parent 0ae0c32 commit 960c4d7
Showing 8 changed files with 118 additions and 0 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -715,6 +715,54 @@ describe('plasma-b2c: Select', () => {
cy.matchImageSnapshot();
});

it('prop: beforeList', () => {
cy.viewport(400, 400);

mount(
<CypressTestDecoratorWithTypo>
<div style={{ display: 'flex', gap: '30px' }}>
<div style={{ width: '300px' }}>
<Select
id="single"
items={items}
label="Label"
placeholder="Placeholder"
beforeList="Content before list"
/>
</div>
</div>
</CypressTestDecoratorWithTypo>,
);

cy.get('#single').realClick();

cy.matchImageSnapshot();
});

it('prop: afterList', () => {
cy.viewport(400, 400);

mount(
<CypressTestDecoratorWithTypo>
<div style={{ display: 'flex', gap: '30px' }}>
<div style={{ width: '300px' }}>
<Select
id="single"
items={items}
label="Label"
placeholder="Placeholder"
afterList="Content after list"
/>
</div>
</div>
</CypressTestDecoratorWithTypo>,
);

cy.get('#single').realClick();

cy.matchImageSnapshot();
});

it('basic logic', () => {
cy.viewport(1000, 500);

6 changes: 6 additions & 0 deletions packages/plasma-new-hope/src/components/Select/Select.tsx
Original file line number Diff line number Diff line change
@@ -57,6 +57,8 @@ export const selectRoot = (Root: RootProps<HTMLButtonElement, Omit<MergedSelectP
separator,
closeAfterSelect: outerCloseAfterSelect,
isTargetAmount,
beforeList,
afterList,
...rest
} = props;
const transformedItems = useMemo(() => initialItemsTransform(items || []), [items]);
@@ -346,6 +348,8 @@ export const selectRoot = (Root: RootProps<HTMLButtonElement, Omit<MergedSelectP
listWidth={listWidth}
ref={targetRef}
>
{beforeList}

{transformedItems.map((item, index) => (
<Inner
key={`${index}/0`}
@@ -357,6 +361,8 @@ export const selectRoot = (Root: RootProps<HTMLButtonElement, Omit<MergedSelectP
listWidth={listWidth}
/>
))}

{afterList}
</Ul>
</Root>
</FloatingPopover>
16 changes: 16 additions & 0 deletions packages/plasma-new-hope/src/components/Select/Select.types.ts
Original file line number Diff line number Diff line change
@@ -142,6 +142,14 @@ export interface BasicProps<K extends ItemOption> {
* @default если single, то true; если multiple, то false
*/
closeAfterSelect?: boolean;
/**
* Ячейка для контента в начале выпадающего списка.
*/
beforeList?: React.ReactNode;
/**
* Ячейка для контента в конце выпадающего списка.
*/
afterList?: React.ReactNode;

/**
* Размер компонента.
@@ -308,6 +316,14 @@ export type MergedSelectProps<T = any, K extends DropdownNode = DropdownNode> =
* @default если single, то true; если multiple, то false
*/
closeAfterSelect?: boolean;
/**
* Ячейка для контента в начале выпадающего списка.
*/
beforeList?: React.ReactNode;
/**
* Ячейка для контента в конце выпадающего списка.
*/
afterList?: React.ReactNode;

/**
* Размер компонента.
Original file line number Diff line number Diff line change
@@ -715,6 +715,54 @@ describe('plasma-web: Select', () => {
cy.matchImageSnapshot();
});

it('prop: beforeList', () => {
cy.viewport(400, 400);

mount(
<CypressTestDecoratorWithTypo>
<div style={{ display: 'flex', gap: '30px' }}>
<div style={{ width: '300px' }}>
<Select
id="single"
items={items}
label="Label"
placeholder="Placeholder"
beforeList="Content before list"
/>
</div>
</div>
</CypressTestDecoratorWithTypo>,
);

cy.get('#single').realClick();

cy.matchImageSnapshot();
});

it('prop: afterList', () => {
cy.viewport(400, 400);

mount(
<CypressTestDecoratorWithTypo>
<div style={{ display: 'flex', gap: '30px' }}>
<div style={{ width: '300px' }}>
<Select
id="single"
items={items}
label="Label"
placeholder="Placeholder"
afterList="Content after list"
/>
</div>
</div>
</CypressTestDecoratorWithTypo>,
);

cy.get('#single').realClick();

cy.matchImageSnapshot();
});

it('basic logic', () => {
cy.viewport(1000, 500);

0 comments on commit 960c4d7

Please sign in to comment.