feat(plasma-*, sdds-*): fix renderValue prop in Select

salute-developers · Dec 9, 2024 · 6a5878a · 6a5878a
1 parent 910890d
commit 6a5878a
Show file tree

Hide file tree

Showing 5 changed files with 139 additions and 1 deletion.
diff --git a/...Select/Select.component-test.tsx/plasma-b2c Select -- prop renderValue.snap.png b/...Select/Select.component-test.tsx/plasma-b2c Select -- prop renderValue.snap.png
diff --git a/...Select/Select.component-test.tsx/plasma-web Select -- prop renderValue.snap.png b/...Select/Select.component-test.tsx/plasma-web Select -- prop renderValue.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
@@ -781,6 +781,69 @@ describe('plasma-b2c: Select', () => {
         cy.get('[id$="north_america"]').should('have.attr', 'data-name', 'test-data-name');
     });
 
+    it('prop: renderValue', () => {
+        cy.viewport(400, 800);
+
+        const Component = () => {
+            const [valueSingle, setValueSingle] = React.useState('paris');
+            const [valueMultiple, setValueMultiple] = React.useState(['paris', 'lyon']);
+
+            return (
+                <CypressTestDecoratorWithTypo>
+                    <div style={{ width: '300px' }}>
+                        <Select
+                            items={items}
+                            value={valueSingle}
+                            onChange={setValueSingle}
+                            renderValue={(item) => item.label.toUpperCase()}
+                        />
+                    </div>
+
+                    <br />
+
+                    <div style={{ width: '300px' }}>
+                        <Select
+                            items={items}
+                            multiselect
+                            value={valueMultiple}
+                            onChange={setValueMultiple}
+                            renderValue={(item) => item.label.toUpperCase()}
+                        />
+                    </div>
+
+                    <br />
+
+                    <div style={{ width: '300px' }}>
+                        <Select
+                            target="button-like"
+                            items={items}
+                            value={valueSingle}
+                            onChange={setValueSingle}
+                            renderValue={(item) => item.label.toUpperCase()}
+                        />
+                    </div>
+
+                    <br />
+
+                    <div style={{ width: '300px' }}>
+                        <Select
+                            target="button-like"
+                            items={items}
+                            multiselect
+                            value={valueMultiple}
+                            onChange={setValueMultiple}
+                            renderValue={(item) => item.label.toUpperCase()}
+                        />
+                    </div>
+                </CypressTestDecoratorWithTypo>
+            );
+        };
+
+        mount(<Component />);
+
+        cy.matchImageSnapshot();
+    });
+
     it('basic logic', () => {
         cy.viewport(1000, 500);
 

diff --git a/packages/plasma-new-hope/src/components/Select/ui/Target/ui/Textfield/Textfield.tsx b/packages/plasma-new-hope/src/components/Select/ui/Target/ui/Textfield/Textfield.tsx
@@ -39,6 +39,18 @@ export const Textfield = forwardRef<HTMLInputElement, TextfieldProps>(
     ) => {
         const withArrowInverse = opened ? classes.arrowInverse : undefined;
 
+        const getValue = () => {
+            if (multiselect || !value) {
+                return '';
+            }
+
+            if (renderValue) {
+                return renderValue(valueToItemMap.get(value.toString())!);
+            }
+
+            return valueToItemMap.get(value.toString())?.label || '';
+        };
+
         const getChips = (): string[] => {
             if (multiselect && Array.isArray(value)) {
                 if (value.length === 0) return [];
@@ -87,7 +99,7 @@ export const Textfield = forwardRef<HTMLInputElement, TextfieldProps>(
                 ref={ref}
                 inputWrapperRef={inputWrapperRef}
                 readOnly
-                value={multiselect ? undefined : valueToItemMap.get(value.toString())?.label || ''}
+                value={getValue()}
                 size={size}
                 view={view}
                 labelPlacement={labelPlacement}

diff --git a/packages/plasma-web/src/components/Select/Select.component-test.tsx b/packages/plasma-web/src/components/Select/Select.component-test.tsx
@@ -781,6 +781,69 @@ describe('plasma-web: Select', () => {
         cy.get('[id$="north_america"]').should('have.attr', 'data-name', 'test-data-name');
     });
 
+    it('prop: renderValue', () => {
+        cy.viewport(400, 800);
+
+        const Component = () => {
+            const [valueSingle, setValueSingle] = React.useState('paris');
+            const [valueMultiple, setValueMultiple] = React.useState(['paris', 'lyon']);
+
+            return (
+                <CypressTestDecoratorWithTypo>
+                    <div style={{ width: '300px' }}>
+                        <Select
+                            items={items}
+                            value={valueSingle}
+                            onChange={setValueSingle}
+                            renderValue={(item) => item.label.toUpperCase()}
+                        />
+                    </div>
+
+                    <br />
+
+                    <div style={{ width: '300px' }}>
+                        <Select
+                            items={items}
+                            multiselect
+                            value={valueMultiple}
+                            onChange={setValueMultiple}
+                            renderValue={(item) => item.label.toUpperCase()}
+                        />
+                    </div>
+
+                    <br />
+
+                    <div style={{ width: '300px' }}>
+                        <Select
+                            target="button-like"
+                            items={items}
+                            value={valueSingle}
+                            onChange={setValueSingle}
+                            renderValue={(item) => item.label.toUpperCase()}
+                        />
+                    </div>
+
+                    <br />
+
+                    <div style={{ width: '300px' }}>
+                        <Select
+                            target="button-like"
+                            items={items}
+                            multiselect
+                            value={valueMultiple}
+                            onChange={setValueMultiple}
+                            renderValue={(item) => item.label.toUpperCase()}
+                        />
+                    </div>
+                </CypressTestDecoratorWithTypo>
+            );
+        };
+
+        mount(<Component />);
+
+        cy.matchImageSnapshot();
+    });
+
     it('basic logic', () => {
         cy.viewport(1000, 500);