diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/molecules/forms/fieldset.tsx | 25 | ||||
| -rw-r--r-- | src/components/molecules/forms/radio-group.tsx | 10 | ||||
| -rw-r--r-- | src/components/organisms/modals/settings-modal.module.scss | 1 | ||||
| -rw-r--r-- | src/components/organisms/modals/settings-modal.tsx | 1 | ||||
| -rw-r--r-- | src/components/organisms/toolbar/toolbar.tsx | 21 |
5 files changed, 31 insertions, 27 deletions
diff --git a/src/components/molecules/forms/fieldset.tsx b/src/components/molecules/forms/fieldset.tsx index 670cfa1..dae3ead 100644 --- a/src/components/molecules/forms/fieldset.tsx +++ b/src/components/molecules/forms/fieldset.tsx @@ -1,4 +1,4 @@ -import useClickOutside from '@utils/hooks/use-click-outside'; +import useOnClickOutside from '@utils/hooks/use-on-click-outside'; import { cloneElement, FC, @@ -33,11 +33,15 @@ export type FieldsetProps = { */ legendClassName?: string; /** - * The legend position. Default: stacked. + * The legend position. + * + * @default 'stacked' */ legendPosition?: 'inline' | 'stacked'; /** - * An accessible role. Default: group. + * An accessible role. + * + * @default 'group' */ role?: 'group' | 'radiogroup' | 'presentation' | 'none'; /** @@ -63,7 +67,6 @@ const Fieldset: FC<FieldsetProps> = ({ }) => { const [isTooltipOpened, setIsTooltipOpened] = useState<boolean>(false); const buttonRef = useRef<HTMLButtonElement>(null); - const tooltipRef = useRef<HTMLDivElement>(null); const wrapperModifier = `wrapper--${legendPosition}`; const buttonModifier = isTooltipOpened ? styles['btn--activated'] : ''; const legendModifier = @@ -73,19 +76,17 @@ const Fieldset: FC<FieldsetProps> = ({ : 'tooltip--hidden'; /** - * Close the tooltip if the event target is outside. + * Close the tooltip if the target is not the button. * - * @param {EventTarget} target - The event target. + * @param {Node} target - The event target. */ - const closeTooltip = (target: EventTarget) => { - if (buttonRef.current && !buttonRef.current.contains(target as Node)) + const closeTooltip = (target: Node) => { + if (buttonRef.current && !buttonRef.current.contains(target)) { setIsTooltipOpened(false); + } }; - useClickOutside( - tooltipRef, - (target) => isTooltipOpened && closeTooltip(target) - ); + const tooltipRef = useOnClickOutside<HTMLDivElement>(closeTooltip); return ( <fieldset diff --git a/src/components/molecules/forms/radio-group.tsx b/src/components/molecules/forms/radio-group.tsx index 64bdaa0..134829f 100644 --- a/src/components/molecules/forms/radio-group.tsx +++ b/src/components/molecules/forms/radio-group.tsx @@ -2,7 +2,7 @@ import Fieldset, { type FieldsetProps, } from '@components/molecules/forms/fieldset'; import useStateChange from '@utils/hooks/use-state-change'; -import { ChangeEvent, FC, MouseEvent, SetStateAction, useState } from 'react'; +import { ChangeEvent, FC, MouseEvent, SetStateAction } from 'react'; import LabelledBooleanField, { type LabelledBooleanFieldProps, } from './labelled-boolean-field'; @@ -37,11 +37,15 @@ export type RadioGroupProps = Pick< */ initialChoice: string; /** - * The radio group kind. Default: regular. + * The radio group kind. + * + * @default 'regular */ kind?: 'regular' | 'toggle'; /** - * The legend position. Default: inline. + * The legend position. + * + * @default 'inline' */ legendPosition?: FieldsetProps['legendPosition']; /** diff --git a/src/components/organisms/modals/settings-modal.module.scss b/src/components/organisms/modals/settings-modal.module.scss deleted file mode 100644 index 70b786d..0000000 --- a/src/components/organisms/modals/settings-modal.module.scss +++ /dev/null @@ -1 +0,0 @@ -// TODO diff --git a/src/components/organisms/modals/settings-modal.tsx b/src/components/organisms/modals/settings-modal.tsx index 34f5619..0ab6b7a 100644 --- a/src/components/organisms/modals/settings-modal.tsx +++ b/src/components/organisms/modals/settings-modal.tsx @@ -4,7 +4,6 @@ import dynamic from 'next/dynamic'; import { FC } from 'react'; import { useIntl } from 'react-intl'; import { type SettingsFormProps } from '../forms/settings-form'; -import styles from './settings-modal.module.scss'; const DynamicSettingsForm = dynamic( () => import('@components/organisms/forms/settings-form'), diff --git a/src/components/organisms/toolbar/toolbar.tsx b/src/components/organisms/toolbar/toolbar.tsx index c18b8ea..50fc7f2 100644 --- a/src/components/organisms/toolbar/toolbar.tsx +++ b/src/components/organisms/toolbar/toolbar.tsx @@ -1,9 +1,9 @@ -import useClickOutside from '@utils/hooks/use-click-outside'; +import useOnClickOutside from '@utils/hooks/use-on-click-outside'; import useRouteChange from '@utils/hooks/use-route-change'; -import { FC, useRef, useState } from 'react'; +import { FC, useState } from 'react'; import MainNav, { type MainNavProps } from '../toolbar/main-nav'; import Search, { type SearchProps } from '../toolbar/search'; -import Settings, { SettingsProps } from '../toolbar/settings'; +import Settings, { type SettingsProps } from '../toolbar/settings'; import styles from './toolbar.module.scss'; export type ToolbarProps = Pick<SearchProps, 'searchPage'> & @@ -33,16 +33,17 @@ const Toolbar: FC<ToolbarProps> = ({ const [isNavOpened, setIsNavOpened] = useState<boolean>(false); const [isSearchOpened, setIsSearchOpened] = useState<boolean>(false); const [isSettingsOpened, setIsSettingsOpened] = useState<boolean>(false); - const mainNavRef = useRef<HTMLDivElement>(null); - const searchRef = useRef<HTMLDivElement>(null); - const settingsRef = useRef<HTMLDivElement>(null); - useClickOutside(mainNavRef, () => isNavOpened && setIsNavOpened(false)); - useClickOutside(searchRef, () => isSearchOpened && setIsSearchOpened(false)); - useClickOutside( - settingsRef, + const mainNavRef = useOnClickOutside<HTMLDivElement>( + () => isNavOpened && setIsNavOpened(false) + ); + const searchRef = useOnClickOutside<HTMLDivElement>( + () => isSearchOpened && setIsSearchOpened(false) + ); + const settingsRef = useOnClickOutside<HTMLDivElement>( () => isSettingsOpened && setIsSettingsOpened(false) ); + useRouteChange(() => setIsSearchOpened(false)); return ( |
