From 71f189c1d5bce1cfe781e784aec2412405ce9ed7 Mon Sep 17 00:00:00 2001 From: Jessica Tatham Date: Mon, 25 Jan 2021 18:31:55 -0500 Subject: [PATCH 1/6] linter --- src/molecules/Dropdown/index.tsx | 25 +++++++++++++++++++----- storybook/stories/Dropdown.stories.tsx | 27 ++++++++++++++++++++++++-- 2 files changed, 45 insertions(+), 7 deletions(-) diff --git a/src/molecules/Dropdown/index.tsx b/src/molecules/Dropdown/index.tsx index 5aad581b..ae0a1a16 100644 --- a/src/molecules/Dropdown/index.tsx +++ b/src/molecules/Dropdown/index.tsx @@ -1,4 +1,4 @@ -import React, { useState, useRef } from 'react'; +import React, { useState, useRef, useEffect } from 'react'; import styled, { css } from '../../lib/styledComponents'; import Popper, { PopperProps } from '../../atoms/Popper'; @@ -17,6 +17,7 @@ interface DropdownProps extends PopperProps { disableScrollWhenOpen?: boolean; 'data-qaid'?: string; id?: string; + updatedIsOpen?: boolean; } export const StyledMenu = styled(Menu)` @@ -43,15 +44,25 @@ const Dropdown: React.SFC = ({ keepInViewPort, size, 'data-qaid': qaId, - id + id, + updatedIsOpen }) => { const [isOpen, setIsOpen] = useState(false); + const menuRef = useRef(); const ref = useRef(); + useEffect(() => { + if (updatedIsOpen === true || updatedIsOpen === false) { + setIsOpen(updatedIsOpen); + } + }, [updatedIsOpen]); + useDisableScroll(isOpen, disableScrollWhenOpen); - useOutsideClick(ref, () => { - setIsOpen(false); + useOutsideClick(menuRef, () => { + if (isOpen) { + setIsOpen(false); + } }); let width = '200px'; @@ -82,7 +93,11 @@ const Dropdown: React.SFC = ({ keepInViewPort={keepInViewPort} > {flyoutContainer ? ( - + {children} ) : ( diff --git a/storybook/stories/Dropdown.stories.tsx b/storybook/stories/Dropdown.stories.tsx index 4435aabd..0edb579d 100644 --- a/storybook/stories/Dropdown.stories.tsx +++ b/storybook/stories/Dropdown.stories.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import { storiesOf } from '@storybook/react'; import { withKnobs, boolean } from '@storybook/addon-knobs'; import { @@ -77,4 +77,27 @@ storiesOf('Dropdown', module)

- )); + )) + .add('Controled set is open', () => { + const [isOpen, setIsOpen] = useState(false); + const updateOpen = () => { + setIsOpen(!isOpen); + } + return ( + <> +

Controlled Is Open

+ ( + Dropdown + )} + updatedIsOpen={isOpen} + > +

+ I am the contents of a dropdown without a flyout container +

+ + + ) + }); From 28cb03fe925b8604840a42df4a4c025c588fc62b Mon Sep 17 00:00:00 2001 From: Jessica Tatham Date: Mon, 25 Jan 2021 19:14:33 -0500 Subject: [PATCH 2/6] update name of controlled param --- src/molecules/Dropdown/index.tsx | 12 ++++++------ storybook/stories/Dropdown.stories.tsx | 16 +++++++--------- 2 files changed, 13 insertions(+), 15 deletions(-) diff --git a/src/molecules/Dropdown/index.tsx b/src/molecules/Dropdown/index.tsx index ae0a1a16..92768b16 100644 --- a/src/molecules/Dropdown/index.tsx +++ b/src/molecules/Dropdown/index.tsx @@ -17,7 +17,7 @@ interface DropdownProps extends PopperProps { disableScrollWhenOpen?: boolean; 'data-qaid'?: string; id?: string; - updatedIsOpen?: boolean; + controlledIsOpen?: boolean; } export const StyledMenu = styled(Menu)` @@ -45,17 +45,17 @@ const Dropdown: React.SFC = ({ size, 'data-qaid': qaId, id, - updatedIsOpen + controlledIsOpen }) => { - const [isOpen, setIsOpen] = useState(false); + const [isOpen, setIsOpen] = useState(controlledIsOpen || false); const menuRef = useRef(); const ref = useRef(); useEffect(() => { - if (updatedIsOpen === true || updatedIsOpen === false) { - setIsOpen(updatedIsOpen); + if (controlledIsOpen === true || controlledIsOpen === false) { + setIsOpen(controlledIsOpen); } - }, [updatedIsOpen]); + }, [controlledIsOpen]); useDisableScroll(isOpen, disableScrollWhenOpen); diff --git a/storybook/stories/Dropdown.stories.tsx b/storybook/stories/Dropdown.stories.tsx index 0edb579d..069ec0e9 100644 --- a/storybook/stories/Dropdown.stories.tsx +++ b/storybook/stories/Dropdown.stories.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React from 'react'; import { storiesOf } from '@storybook/react'; import { withKnobs, boolean } from '@storybook/addon-knobs'; import { @@ -79,10 +79,8 @@ storiesOf('Dropdown', module) )) .add('Controled set is open', () => { - const [isOpen, setIsOpen] = useState(false); - const updateOpen = () => { - setIsOpen(!isOpen); - } + const controlledIsOpen = boolean('Controlled isOpen', false); + return ( <>

Controlled Is Open

@@ -90,13 +88,13 @@ storiesOf('Dropdown', module) flyoutContainer={false} offset={{ vertical: 50 }} renderLabel={() => ( - Dropdown + Dropdown )} - updatedIsOpen={isOpen} + controlledIsOpen={controlledIsOpen} >

- I am the contents of a dropdown without a flyout container -

+ I am the contents of a dropdown that is controlled +

) From 29dfd7859fbed4c37adfa142e926289531b95274 Mon Sep 17 00:00:00 2001 From: Jessica Tatham Date: Mon, 25 Jan 2021 19:27:57 -0500 Subject: [PATCH 3/6] linter --- src/molecules/Dropdown/Dropdown.test.tsx | 12 +++++++++++- .../Dropdown/__snapshots__/Dropdown.test.tsx.snap | 1 + 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/src/molecules/Dropdown/Dropdown.test.tsx b/src/molecules/Dropdown/Dropdown.test.tsx index f1318722..2dd80237 100644 --- a/src/molecules/Dropdown/Dropdown.test.tsx +++ b/src/molecules/Dropdown/Dropdown.test.tsx @@ -6,7 +6,11 @@ import Trigger from './DropdownTrigger'; const OutsideDiv = () => ; -const setup = (flyoutContainer: boolean = true, offsetTop = 0) => +const setup = ( + flyoutContainer: boolean = true, + offsetTop = 0, + controlledIsOpen: boolean = false +) => mountWithTheme( <> @@ -14,6 +18,7 @@ const setup = (flyoutContainer: boolean = true, offsetTop = 0) => flyoutContainer={flyoutContainer} label="I am a dropdown" offset={{ vertical: offsetTop }} + controlledIsOpen={controlledIsOpen} > Dropdown Content @@ -63,6 +68,11 @@ describe('', () => { expect(wrapper.find(StyledMenu)).toHaveLength(0); }); + it('renders the dropdown based on controlledIsOpen', () => { + const wrapper = setup(true, 0, true); + expect(wrapper.find(StyledMenu)).toHaveLength(1); + }); + it.todo('closes the flyout when clicked outside'); it.todo('closes the flyout when keydown escape'); }); diff --git a/src/molecules/Dropdown/__snapshots__/Dropdown.test.tsx.snap b/src/molecules/Dropdown/__snapshots__/Dropdown.test.tsx.snap index 74770c9f..ef98ce73 100644 --- a/src/molecules/Dropdown/__snapshots__/Dropdown.test.tsx.snap +++ b/src/molecules/Dropdown/__snapshots__/Dropdown.test.tsx.snap @@ -176,6 +176,7 @@ exports[` renders correctly 1`] = ` Date: Mon, 25 Jan 2021 19:31:58 -0500 Subject: [PATCH 4/6] update documentation --- src/molecules/Dropdown/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/molecules/Dropdown/README.md b/src/molecules/Dropdown/README.md index 90e3e309..20fcfc71 100644 --- a/src/molecules/Dropdown/README.md +++ b/src/molecules/Dropdown/README.md @@ -34,6 +34,7 @@ After adding the import you can use the Dropdown simply like this | keepInViewPort | `Boolean` | | Always keep the dropdown flyout within the viewport | data-qaid | `string` | | Optional prop for testing purposes | id | `string` | | Default HTML id prop to identify the element +| controlledIsOpen | `Boolean` | | Option prop to control whether the dropdown is open or closed ### Enum From 9b2f7e670def656dc7ad4f4be5dc88cf8e8f54c7 Mon Sep 17 00:00:00 2001 From: Jessica Tatham Date: Tue, 26 Jan 2021 12:19:24 -0500 Subject: [PATCH 5/6] linter --- src/molecules/Dropdown/Dropdown.test.tsx | 9 +++-- src/molecules/Dropdown/README.md | 2 +- .../__snapshots__/Dropdown.test.tsx.snap | 9 ++++- src/molecules/Dropdown/index.tsx | 23 +++++------ storybook/stories/Dropdown.stories.tsx | 39 +++++++++---------- 5 files changed, 45 insertions(+), 37 deletions(-) diff --git a/src/molecules/Dropdown/Dropdown.test.tsx b/src/molecules/Dropdown/Dropdown.test.tsx index 2dd80237..1c83eb5d 100644 --- a/src/molecules/Dropdown/Dropdown.test.tsx +++ b/src/molecules/Dropdown/Dropdown.test.tsx @@ -9,7 +9,7 @@ const OutsideDiv = () => ; const setup = ( flyoutContainer: boolean = true, offsetTop = 0, - controlledIsOpen: boolean = false + keepOpenOnClick = false ) => mountWithTheme( <> @@ -18,7 +18,7 @@ const setup = ( flyoutContainer={flyoutContainer} label="I am a dropdown" offset={{ vertical: offsetTop }} - controlledIsOpen={controlledIsOpen} + keepOpenOnClick={keepOpenOnClick} > Dropdown Content @@ -68,8 +68,11 @@ describe('', () => { expect(wrapper.find(StyledMenu)).toHaveLength(0); }); - it('renders the dropdown based on controlledIsOpen', () => { + it('does not close on click of dropdown menu', () => { const wrapper = setup(true, 0, true); + wrapper.find(Trigger).simulate('click'); + expect(wrapper.find(StyledMenu)).toHaveLength(1); + wrapper.find(StyledMenu).simulate('click'); expect(wrapper.find(StyledMenu)).toHaveLength(1); }); diff --git a/src/molecules/Dropdown/README.md b/src/molecules/Dropdown/README.md index 20fcfc71..8ef8f3da 100644 --- a/src/molecules/Dropdown/README.md +++ b/src/molecules/Dropdown/README.md @@ -34,7 +34,7 @@ After adding the import you can use the Dropdown simply like this | keepInViewPort | `Boolean` | | Always keep the dropdown flyout within the viewport | data-qaid | `string` | | Optional prop for testing purposes | id | `string` | | Default HTML id prop to identify the element -| controlledIsOpen | `Boolean` | | Option prop to control whether the dropdown is open or closed +| keepOpenOnClick | `Boolean` | | Opt into keeping the dropdown open on click ### Enum diff --git a/src/molecules/Dropdown/__snapshots__/Dropdown.test.tsx.snap b/src/molecules/Dropdown/__snapshots__/Dropdown.test.tsx.snap index ef98ce73..a30bf00e 100644 --- a/src/molecules/Dropdown/__snapshots__/Dropdown.test.tsx.snap +++ b/src/molecules/Dropdown/__snapshots__/Dropdown.test.tsx.snap @@ -171,13 +171,16 @@ exports[` renders correctly 1`] = ` } > - renders correctly 1`] = ` } >
I am a dropdown diff --git a/src/molecules/Dropdown/index.tsx b/src/molecules/Dropdown/index.tsx index 92768b16..b38c4b10 100644 --- a/src/molecules/Dropdown/index.tsx +++ b/src/molecules/Dropdown/index.tsx @@ -1,4 +1,4 @@ -import React, { useState, useRef, useEffect } from 'react'; +import React, { useState, useRef } from 'react'; import styled, { css } from '../../lib/styledComponents'; import Popper, { PopperProps } from '../../atoms/Popper'; @@ -17,7 +17,7 @@ interface DropdownProps extends PopperProps { disableScrollWhenOpen?: boolean; 'data-qaid'?: string; id?: string; - controlledIsOpen?: boolean; + keepOpenOnClick?: boolean; } export const StyledMenu = styled(Menu)` @@ -45,21 +45,22 @@ const Dropdown: React.SFC = ({ size, 'data-qaid': qaId, id, - controlledIsOpen + keepOpenOnClick = false }) => { - const [isOpen, setIsOpen] = useState(controlledIsOpen || false); + const [isOpen, setIsOpen] = useState(false); const menuRef = useRef(); const ref = useRef(); - useEffect(() => { - if (controlledIsOpen === true || controlledIsOpen === false) { - setIsOpen(controlledIsOpen); - } - }, [controlledIsOpen]); - useDisableScroll(isOpen, disableScrollWhenOpen); - useOutsideClick(menuRef, () => { + const getRef = (keepOpenOnClick: boolean) => { + if (keepOpenOnClick) { + return menuRef; + } + return ref; + }; + + useOutsideClick(getRef(keepOpenOnClick), () => { if (isOpen) { setIsOpen(false); } diff --git a/storybook/stories/Dropdown.stories.tsx b/storybook/stories/Dropdown.stories.tsx index 069ec0e9..58603793 100644 --- a/storybook/stories/Dropdown.stories.tsx +++ b/storybook/stories/Dropdown.stories.tsx @@ -78,24 +78,23 @@ storiesOf('Dropdown', module) )) - .add('Controled set is open', () => { - const controlledIsOpen = boolean('Controlled isOpen', false); - + .add('Do not close on click of dropdown', () => { + const keepOpenOnClick = boolean('keepOpenOnClick', true); + return ( - <> -

Controlled Is Open

- ( - Dropdown - )} - controlledIsOpen={controlledIsOpen} - > -

- I am the contents of a dropdown that is controlled -

- - - ) - }); + <> +

Do not close on click of dropdown

+ ( + {isOpen ? 'Open' : 'Close'} + )} + keepOpenOnClick={keepOpenOnClick} + > +

+ I am the contents of a dropdown that stays open on click. +

+ + + )}); From dd3eb355d46f515e1b181782f8ad36d7d3a291cf Mon Sep 17 00:00:00 2001 From: Jessica Tatham Date: Tue, 26 Jan 2021 12:22:59 -0500 Subject: [PATCH 6/6] reveert snapshots --- .../Dropdown/__snapshots__/Dropdown.test.tsx.snap | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/molecules/Dropdown/__snapshots__/Dropdown.test.tsx.snap b/src/molecules/Dropdown/__snapshots__/Dropdown.test.tsx.snap index a30bf00e..86308868 100644 --- a/src/molecules/Dropdown/__snapshots__/Dropdown.test.tsx.snap +++ b/src/molecules/Dropdown/__snapshots__/Dropdown.test.tsx.snap @@ -171,14 +171,11 @@ exports[` renders correctly 1`] = ` } > - renders correctly 1`] = ` } >
I am a dropdown