feat(plasma-*, sdds-*): add beforeList and afterList props in Select

salute-developers · Dec 3, 2024 · c5fe13b · c5fe13b
1 parent 31ae7d4
commit c5fe13b
Show file tree

Hide file tree

Showing 8 changed files with 118 additions and 0 deletions.
diff --git a/...s/Select/Select.component-test.tsx/plasma-b2c Select -- prop afterList.snap.png b/...s/Select/Select.component-test.tsx/plasma-b2c Select -- prop afterList.snap.png
diff --git a/.../Select/Select.component-test.tsx/plasma-b2c Select -- prop beforeList.snap.png b/.../Select/Select.component-test.tsx/plasma-b2c Select -- prop beforeList.snap.png
diff --git a/...s/Select/Select.component-test.tsx/plasma-web Select -- prop afterList.snap.png b/...s/Select/Select.component-test.tsx/plasma-web Select -- prop afterList.snap.png
diff --git a/.../Select/Select.component-test.tsx/plasma-web Select -- prop beforeList.snap.png b/.../Select/Select.component-test.tsx/plasma-web Select -- prop beforeList.snap.png
diff --git a/packages/plasma-b2c/src/components/Select/Select.component-test.tsx b/packages/plasma-b2c/src/components/Select/Select.component-test.tsx
@@ -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);
 

diff --git a/packages/plasma-new-hope/src/components/Select/Select.tsx b/packages/plasma-new-hope/src/components/Select/Select.tsx
@@ -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>

diff --git a/packages/plasma-new-hope/src/components/Select/Select.types.ts b/packages/plasma-new-hope/src/components/Select/Select.types.ts
@@ -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;
 
         /**
          * Размер компонента.

diff --git a/packages/plasma-web/src/components/Select/Select.component-test.tsx b/packages/plasma-web/src/components/Select/Select.component-test.tsx
@@ -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);