From 6be20422494e3806fba3d1c5ad5c3e98bd6e67e5 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Wed, 1 Jun 2022 19:34:43 +0200 Subject: chore: replace the Ackee select by a toggle component --- .../molecules/forms/select-with-tooltip.tsx | 78 ---------------------- 1 file changed, 78 deletions(-) delete mode 100644 src/components/molecules/forms/select-with-tooltip.tsx (limited to 'src/components/molecules/forms/select-with-tooltip.tsx') diff --git a/src/components/molecules/forms/select-with-tooltip.tsx b/src/components/molecules/forms/select-with-tooltip.tsx deleted file mode 100644 index 46075c2..0000000 --- a/src/components/molecules/forms/select-with-tooltip.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import useClickOutside from '@utils/hooks/use-click-outside'; -import { FC, useRef, useState } from 'react'; -import HelpButton from '../buttons/help-button'; -import Tooltip, { type TooltipProps } from '../modals/tooltip'; -import LabelledSelect, { type LabelledSelectProps } from './labelled-select'; -import styles from './select-with-tooltip.module.scss'; - -export type SelectWithTooltipProps = Omit< - LabelledSelectProps, - 'labelPosition' -> & - Pick & { - /** - * Set additional classnames to the select wrapper. - */ - className?: string; - /** - * Set additional classnames to the tooltip wrapper. - */ - tooltipClassName?: TooltipProps['className']; - }; - -/** - * SelectWithTooltip component - * - * Render a select with a button to display a tooltip about options. - */ -const SelectWithTooltip: FC = ({ - className = '', - content, - id, - title, - tooltipClassName = '', - ...props -}) => { - const [isTooltipOpened, setIsTooltipOpened] = useState(false); - const buttonRef = useRef(null); - const tooltipRef = useRef(null); - const buttonModifier = isTooltipOpened ? styles['btn--activated'] : ''; - const tooltipModifier = isTooltipOpened - ? styles['tooltip--visible'] - : styles['tooltip--hidden']; - - const closeTooltip = (target: EventTarget) => { - if (buttonRef.current && !buttonRef.current.contains(target as Node)) - setIsTooltipOpened(false); - }; - - useClickOutside( - tooltipRef, - (target) => isTooltipOpened && closeTooltip(target) - ); - - return ( -
- - setIsTooltipOpened(!isTooltipOpened)} - ref={buttonRef} - /> - -
- ); -}; - -export default SelectWithTooltip; -- cgit v1.2.3