diff options
Diffstat (limited to 'src/components/organisms/toolbar')
4 files changed, 36 insertions, 49 deletions
diff --git a/src/components/organisms/toolbar/main-nav.stories.tsx b/src/components/organisms/toolbar/main-nav.stories.tsx index d79addf..31e2b65 100644 --- a/src/components/organisms/toolbar/main-nav.stories.tsx +++ b/src/components/organisms/toolbar/main-nav.stories.tsx @@ -1,5 +1,5 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { useCallback, useState } from 'react'; +import { useToggle } from '../../../utils/hooks'; import { MainNavItem } from './main-nav'; /** @@ -61,11 +61,7 @@ const Template: ComponentStory<typeof MainNavItem> = ({ setIsActive: _setIsActive, ...args }) => { - const [isOpen, setIsOpen] = useState<boolean>(isActive); - - const toggle = useCallback(() => { - setIsOpen((prevState) => !prevState); - }, []); + const [isOpen, toggle] = useToggle(isActive); return <MainNavItem isActive={isOpen} setIsActive={toggle} {...args} />; }; diff --git a/src/components/organisms/toolbar/search.stories.tsx b/src/components/organisms/toolbar/search.stories.tsx index 2c8dd10..0f211bd 100644 --- a/src/components/organisms/toolbar/search.stories.tsx +++ b/src/components/organisms/toolbar/search.stories.tsx @@ -1,5 +1,5 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { useState } from 'react'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { useToggle } from '../../../utils/hooks'; import { Search } from './search'; /** @@ -66,17 +66,9 @@ const Template: ComponentStory<typeof Search> = ({ setIsActive: _setIsActive, ...args }) => { - const [isOpen, setIsOpen] = useState<boolean>(isActive); + const [isOpen, toggle] = useToggle(isActive); - return ( - <Search - isActive={isOpen} - setIsActive={() => { - setIsOpen(!isOpen); - }} - {...args} - /> - ); + return <Search isActive={isOpen} setIsActive={toggle} {...args} />; }; /** diff --git a/src/components/organisms/toolbar/settings.stories.tsx b/src/components/organisms/toolbar/settings.stories.tsx index 793c521..c1fe37d 100644 --- a/src/components/organisms/toolbar/settings.stories.tsx +++ b/src/components/organisms/toolbar/settings.stories.tsx @@ -1,5 +1,5 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { useCallback, useState } from 'react'; +import { useToggle } from '../../../utils/hooks'; import { Settings } from './settings'; /** @@ -66,11 +66,7 @@ const Template: ComponentStory<typeof Settings> = ({ setIsActive: _setIsActive, ...args }) => { - const [isOpen, setIsOpen] = useState<boolean>(isActive); - - const toggle = useCallback(() => { - setIsOpen((prevState) => !prevState); - }, []); + const [isOpen, toggle] = useToggle(isActive); return <Settings isActive={isOpen} setIsActive={toggle} {...args} />; }; diff --git a/src/components/organisms/toolbar/toolbar.tsx b/src/components/organisms/toolbar/toolbar.tsx index c400285..c0be464 100644 --- a/src/components/organisms/toolbar/toolbar.tsx +++ b/src/components/organisms/toolbar/toolbar.tsx @@ -1,6 +1,10 @@ /* eslint-disable max-statements */ -import { type FC, useState, useCallback } from 'react'; -import { useOnClickOutside, useRouteChange } from '../../../utils/hooks'; +import type { FC } from 'react'; +import { + useBoolean, + useOnClickOutside, + useRouteChange, +} from '../../../utils/hooks'; import { MainNavItem, type MainNavItemProps } from './main-nav'; import { Search, type SearchProps } from './search'; import { Settings } from './settings'; @@ -27,54 +31,53 @@ export const Toolbar: FC<ToolbarProps> = ({ nav, searchPage, }) => { - const [isNavOpened, setIsNavOpened] = useState<boolean>(false); - const [isSearchOpened, setIsSearchOpened] = useState<boolean>(false); - const [isSettingsOpened, setIsSettingsOpened] = useState<boolean>(false); + const { + deactivate: deactivateMainNav, + state: isMainNavOpen, + toggle: toggleMainNav, + } = useBoolean(false); + const { + deactivate: deactivateSearch, + state: isSearchOpen, + toggle: toggleSearch, + } = useBoolean(false); + const { + deactivate: deactivateSettings, + state: isSettingsOpen, + toggle: toggleSettings, + } = useBoolean(false); const mainNavRef = useOnClickOutside<HTMLDivElement>( - () => isNavOpened && setIsNavOpened(false) + () => isMainNavOpen && deactivateMainNav() ); const searchRef = useOnClickOutside<HTMLDivElement>( - () => isSearchOpened && setIsSearchOpened(false) + () => isSearchOpen && deactivateSearch() ); const settingsRef = useOnClickOutside<HTMLDivElement>( - () => isSettingsOpened && setIsSettingsOpened(false) + () => isSettingsOpen && deactivateSettings() ); - const toggleMainNav = useCallback( - () => setIsNavOpened((prevState) => !prevState), - [] - ); - const toggleSearch = useCallback( - () => setIsSearchOpened((prevState) => !prevState), - [] - ); - const toggleSettings = useCallback( - () => setIsSettingsOpened((prevState) => !prevState), - [] - ); - - useRouteChange(() => setIsSearchOpened(false)); + useRouteChange(deactivateSearch); return ( <div className={`${styles.wrapper} ${className}`}> <MainNavItem className={styles.modal} - isActive={isNavOpened} + isActive={isMainNavOpen} items={nav} ref={mainNavRef} setIsActive={toggleMainNav} /> <Search className={`${styles.modal} ${styles['modal--search']}`} - isActive={isSearchOpened} + isActive={isSearchOpen} ref={searchRef} searchPage={searchPage} setIsActive={toggleSearch} /> <Settings className={`${styles.modal} ${styles['modal--settings']}`} - isActive={isSettingsOpened} + isActive={isSettingsOpen} ref={settingsRef} setIsActive={toggleSettings} /> |