From 12b6a2a989db52733e26bebd55b37e5b72daa668 Mon Sep 17 00:00:00 2001 From: Dima Shugaev Date: Tue, 24 Dec 2024 14:49:40 +0300 Subject: [PATCH] feat(plasma): part 1 --- .../Select/Select.component-test.tsx | 91 +++++++++++++++++++ .../src/components/Select/Select.tsx | 23 +---- .../components/Select/ui/Target/Target.tsx | 2 - .../Select/ui/Target/Target.types.ts | 1 - .../ui/Target/ui/Textfield/Textfield.tsx | 3 +- .../ui/Target/ui/Textfield/Textfield.types.ts | 1 - .../Select/Select.component-test.tsx | 91 +++++++++++++++++++ 7 files changed, 188 insertions(+), 24 deletions(-) diff --git a/packages/plasma-b2c/src/components/Select/Select.component-test.tsx b/packages/plasma-b2c/src/components/Select/Select.component-test.tsx index f541795a79..62d0024c93 100644 --- a/packages/plasma-b2c/src/components/Select/Select.component-test.tsx +++ b/packages/plasma-b2c/src/components/Select/Select.component-test.tsx @@ -1134,4 +1134,95 @@ describe('plasma-b2c: Select', () => { cy.get('[id$="tree_level_1"]').should('not.exist'); cy.get('button').should('not.have.focus'); }); + + it('flow: opening', () => { + cy.viewport(1300, 500); + + const Component = () => { + const [valueSingle, setValueSingle] = React.useState('paris'); + const [valueMultiple, setValueMultiple] = React.useState(['paris', 'lyon']); + + return ( + +
+
+ +
+ +
+ +
+
+ + ); + }; + + mount(); + + cy.get('#button-single').click(); + cy.get('ul[role="tree"]').should('be.visible'); + cy.get('#button-single').click(); + cy.get('ul[role="tree"]').should('not.exist'); + cy.get('#button-single .select-target-arrow').click({ force: true }); + cy.get('ul[role="tree"]').should('be.visible'); + cy.get('#button-single .select-target-arrow').click({ force: true }); + cy.get('ul[role="tree"]').should('not.exist'); + + cy.get('#button-multiple').click(); + cy.get('ul[role="tree"]').should('be.visible'); + cy.get('#button-multiple').click(); + cy.get('ul[role="tree"]').should('not.exist'); + cy.get('#button-multiple .select-target-arrow').click({ force: true }); + cy.get('ul[role="tree"]').should('be.visible'); + cy.get('#button-multiple .select-target-arrow').click({ force: true }); + cy.get('ul[role="tree"]').should('not.exist'); + + cy.get('#textfield-single').click(); + cy.get('ul[role="tree"]').should('be.visible'); + cy.get('#textfield-single').click(); + cy.get('ul[role="tree"]').should('not.exist'); + + cy.get('#textfield-multiple').realClick({ position: 'topLeft' }); + cy.get('ul[role="tree"]').should('be.visible'); + cy.get('#textfield-multiple').realClick({ position: 'topLeft' }); + cy.get('ul[role="tree"]').should('not.exist'); + cy.get('#textfield-multiple').realClick({ position: 'center' }); + cy.get('ul[role="tree"]').should('not.exist'); + }); }); diff --git a/packages/plasma-new-hope/src/components/Select/Select.tsx b/packages/plasma-new-hope/src/components/Select/Select.tsx index 1ee65d46b4..466c7f0b5e 100644 --- a/packages/plasma-new-hope/src/components/Select/Select.tsx +++ b/packages/plasma-new-hope/src/components/Select/Select.tsx @@ -39,6 +39,7 @@ import { Context } from './Select.context'; export const selectRoot = (Root: RootProps>) => forwardRef((props, ref) => { const { + id, value: outerValue, onChange: outerOnChange, target = 'textfield-like', @@ -125,12 +126,12 @@ export const selectRoot = (Root: RootProps | ChangeEvent | null, ) => { if (outerOnChange) { - // Условие для отправки если комбобокс используется без формы. + // Условие для отправки если компонент используется без формы. if (!name && (typeof newValue === 'string' || Array.isArray(newValue))) { outerOnChange(newValue as any); } - // Условие для отправки если комбобокс используется с формой. + // Условие для отправки если компонент используется с формой. if (name && typeof newValue === 'object' && !Array.isArray(newValue)) { outerOnChange(newValue as any); } @@ -142,20 +143,6 @@ export const selectRoot = (Root: RootProps { - if (disabled) { - return; - } - - if (isCurrentListOpen) { - dispatchPath({ type: 'reset' }); - } else { - dispatchPath({ type: 'opened_first_level' }); - } - - dispatchFocusedPath({ type: 'reset' }); - }; - const handleListToggle = (opened: boolean) => { if (disabled) { return; @@ -308,6 +295,7 @@ export const selectRoot = (Root: RootProps {name && ( @@ -337,7 +325,7 @@ export const selectRoot = (Root: RootProps opened && handleListToggle(true)} + onToggle={handleListToggle} placement={placement} portal={portal} listWidth={listWidth} @@ -359,7 +347,6 @@ export const selectRoot = (Root: RootProps} multiselect={props.multiselect} view={view} - handleClickArrow={handleClickArrow} helperText={helperText} treeId={treeId} activeDescendantItemValue={activeDescendantItemValue} diff --git a/packages/plasma-new-hope/src/components/Select/ui/Target/Target.tsx b/packages/plasma-new-hope/src/components/Select/ui/Target/Target.tsx index ca9beb3b9f..ab3f633189 100644 --- a/packages/plasma-new-hope/src/components/Select/ui/Target/Target.tsx +++ b/packages/plasma-new-hope/src/components/Select/ui/Target/Target.tsx @@ -23,7 +23,6 @@ export const Target = forwardRef( inputWrapperRef, multiselect, view, - handleClickArrow, helperText, treeId, activeDescendantItemValue, @@ -79,7 +78,6 @@ export const Target = forwardRef( labelPlacement={labelPlacement} size={size} view={view} - handleClickArrow={handleClickArrow} contentLeft={contentLeft} helperText={helperText} treeId={treeId} diff --git a/packages/plasma-new-hope/src/components/Select/ui/Target/Target.types.ts b/packages/plasma-new-hope/src/components/Select/ui/Target/Target.types.ts index b5b5b1146a..ba80f369c8 100644 --- a/packages/plasma-new-hope/src/components/Select/ui/Target/Target.types.ts +++ b/packages/plasma-new-hope/src/components/Select/ui/Target/Target.types.ts @@ -26,7 +26,6 @@ export type TargetProps = Pick< onKeyDown: (event: KeyboardEvent) => void; selectProps: MergedSelectProps; inputWrapperRef: MutableRefObject; - handleClickArrow: () => void; treeId: string; activeDescendantItemValue: string; onChange: (newValue: string | number | Array) => void; 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 index 82618147cc..70b4fc66c1 100644 --- 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 @@ -20,7 +20,6 @@ export const Textfield = forwardRef( onKeyDown, size, view, - handleClickArrow, contentLeft, helperText, treeId, @@ -109,7 +108,7 @@ export const Textfield = forwardRef( placeholder={value instanceof Array && value.length ? '' : placeholder} contentLeft={contentLeft as React.ReactElement} contentRight={ - + } diff --git a/packages/plasma-new-hope/src/components/Select/ui/Target/ui/Textfield/Textfield.types.ts b/packages/plasma-new-hope/src/components/Select/ui/Target/ui/Textfield/Textfield.types.ts index 755c4f1a16..a54c3a833f 100644 --- a/packages/plasma-new-hope/src/components/Select/ui/Target/ui/Textfield/Textfield.types.ts +++ b/packages/plasma-new-hope/src/components/Select/ui/Target/ui/Textfield/Textfield.types.ts @@ -13,7 +13,6 @@ export type TextfieldProps = Pick< | 'onKeyDown' | 'size' | 'view' - | 'handleClickArrow' | 'contentLeft' | 'helperText' | 'treeId' diff --git a/packages/plasma-web/src/components/Select/Select.component-test.tsx b/packages/plasma-web/src/components/Select/Select.component-test.tsx index e499a8e60f..493262d23d 100644 --- a/packages/plasma-web/src/components/Select/Select.component-test.tsx +++ b/packages/plasma-web/src/components/Select/Select.component-test.tsx @@ -1134,4 +1134,95 @@ describe('plasma-web: Select', () => { cy.get('[id$="tree_level_1"]').should('not.exist'); cy.get('button').should('not.have.focus'); }); + + it('flow: opening', () => { + cy.viewport(1300, 500); + + const Component = () => { + const [valueSingle, setValueSingle] = React.useState('paris'); + const [valueMultiple, setValueMultiple] = React.useState(['paris', 'lyon']); + + return ( + +
+
+ +
+ +
+ +
+
+ + ); + }; + + mount(); + + cy.get('#button-single').click(); + cy.get('ul[role="tree"]').should('be.visible'); + cy.get('#button-single').click(); + cy.get('ul[role="tree"]').should('not.exist'); + cy.get('#button-single .select-target-arrow').click({ force: true }); + cy.get('ul[role="tree"]').should('be.visible'); + cy.get('#button-single .select-target-arrow').click({ force: true }); + cy.get('ul[role="tree"]').should('not.exist'); + + cy.get('#button-multiple').click(); + cy.get('ul[role="tree"]').should('be.visible'); + cy.get('#button-multiple').click(); + cy.get('ul[role="tree"]').should('not.exist'); + cy.get('#button-multiple .select-target-arrow').click({ force: true }); + cy.get('ul[role="tree"]').should('be.visible'); + cy.get('#button-multiple .select-target-arrow').click({ force: true }); + cy.get('ul[role="tree"]').should('not.exist'); + + cy.get('#textfield-single').click(); + cy.get('ul[role="tree"]').should('be.visible'); + cy.get('#textfield-single').click(); + cy.get('ul[role="tree"]').should('not.exist'); + + cy.get('#textfield-multiple').realClick({ position: 'topLeft' }); + cy.get('ul[role="tree"]').should('be.visible'); + cy.get('#textfield-multiple').realClick({ position: 'topLeft' }); + cy.get('ul[role="tree"]').should('not.exist'); + cy.get('#textfield-multiple').realClick({ position: 'center' }); + cy.get('ul[role="tree"]').should('not.exist'); + }); });