summaryrefslogtreecommitdiffstats
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/molecules/forms/fieldset.tsx25
-rw-r--r--src/components/molecules/forms/radio-group.tsx10
-rw-r--r--src/components/organisms/modals/settings-modal.module.scss1
-rw-r--r--src/components/organisms/modals/settings-modal.tsx1
-rw-r--r--src/components/organisms/toolbar/toolbar.tsx21
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 (