diff options
Diffstat (limited to 'src/components/molecules/forms/fieldset.tsx')
| -rw-r--r-- | src/components/molecules/forms/fieldset.tsx | 118 |
1 files changed, 0 insertions, 118 deletions
diff --git a/src/components/molecules/forms/fieldset.tsx b/src/components/molecules/forms/fieldset.tsx deleted file mode 100644 index 7564d14..0000000 --- a/src/components/molecules/forms/fieldset.tsx +++ /dev/null @@ -1,118 +0,0 @@ -import { - cloneElement, - FC, - ReactComponentElement, - ReactNode, - useRef, - useState, -} from 'react'; -import { useOnClickOutside } from '../../../utils/hooks'; -import { HelpButton } from '../buttons'; -import { Tooltip } from '../modals'; -import styles from './fieldset.module.scss'; - -export type FieldsetProps = { - /** - * Set additional classnames to the body wrapper. - */ - bodyClassName?: string; - /** - * Set additional classnames to the help button. - */ - buttonClassName?: string; - /** - * The fieldset body. - */ - children: ReactNode | ReactNode[]; - /** - * Set additional classnames to the fieldset wrapper. - */ - className?: string; - /** - * The fieldset legend. - */ - legend: string; - /** - * Set additional classnames to the legend. - */ - legendClassName?: string; - /** - * The legend position. - * - * @default 'stacked' - */ - legendPosition?: 'inline' | 'stacked'; - /** - * An accessible role. - * - * @default 'group' - */ - role?: 'group' | 'radiogroup' | 'presentation' | 'none'; - /** - * An optional tooltip component. - */ - Tooltip?: ReactComponentElement<typeof Tooltip>; -}; - -/** - * Fieldset component - * - * Render a fieldset with a legend. - */ -export const Fieldset: FC<FieldsetProps> = ({ - bodyClassName = '', - buttonClassName = '', - children, - className = '', - legend, - legendClassName = '', - legendPosition = 'stacked', - Tooltip: TooltipComponent, - ...props -}) => { - const [isTooltipOpened, setIsTooltipOpened] = useState<boolean>(false); - const buttonRef = useRef<HTMLButtonElement>(null); - const wrapperModifier = `wrapper--${legendPosition}`; - const buttonModifier = isTooltipOpened ? styles['btn--activated'] : ''; - const legendModifier = - TooltipComponent === undefined ? '' : 'legend--has-tooltip'; - const tooltipModifier = isTooltipOpened - ? 'tooltip--visible' - : 'tooltip--hidden'; - - /** - * Close the tooltip if the target is not the button. - * - * @param {Node} target - The event target. - */ - const closeTooltip = (target: Node) => { - if (buttonRef.current && !buttonRef.current.contains(target)) { - setIsTooltipOpened(false); - } - }; - - const tooltipRef = useOnClickOutside<HTMLDivElement>(closeTooltip); - const fieldsetClass = `${styles.wrapper} ${styles[wrapperModifier]} ${className}`; - const legendClass = `${styles.legend} ${styles[legendModifier]} ${legendClassName}`; - - return ( - <fieldset {...props} className={fieldsetClass}> - <legend className={legendClass}>{legend}</legend> - {TooltipComponent && ( - <> - <HelpButton - aria-pressed={isTooltipOpened} - className={`${styles.btn} ${buttonModifier} ${buttonClassName}`} - onClick={() => setIsTooltipOpened(!isTooltipOpened)} - ref={buttonRef} - /> - {cloneElement(TooltipComponent, { - cloneClassName: `${styles.tooltip} ${styles[tooltipModifier]}`, - ref: tooltipRef, - })} - </> - )} - <div className={`${styles.body} ${bodyClassName}`}>{children}</div> - </fieldset> - ); -}; |
