'use client'; import { Icon } from '../../components'; import { bool, oneOf, string } from 'prop-types'; import { ButtonLayout } from '../button-layout/button-layout'; import { forwardRef, useImperativeHandle, useRef, useState } from 'react'; import { IconButtonProps, StateToggleIconType } from './icon-button.types'; /** * Icon button-layout component ** description */ export const IconButton = forwardRef( ( { icon, className = '', toggled = false, disabled = false, selected = false, variant = 'default', centralRipple = false, ...props }, ref, ) => { const [toggleIcon, setToggleIcon] = useState({ state: selected == true ? 'selected' : 'unselected', icon: toggled ? toggled.unselected ?? 'add_circle' : 'add_circle', }); const extraClassStyles = `m3-icon-button ${toggleIcon.state} ${variant} ${toggled ? 'toggled' : ''} ${className}`; const toggle = (extraClassStyles: string, icon: string) => { setToggleIcon({ state: extraClassStyles, icon: icon, }); }; const buttonRef = useRef(null); const callback = event => { if (toggled) { if (toggleIcon.state === 'selected') { toggle('', toggled.unselected ?? 'add_circle'); } else { toggle('selected', toggled.selected ?? 'add_circle'); } } if (props.onClick) { props.onClick.apply(null, event); } }; useImperativeHandle(ref, () => buttonRef.current); return ( {toggled ? toggleIcon.icon : icon ? icon : undefined} ); }, ); IconButton.propTypes = { icon: string, selected: bool, centralRipple: bool, variant: oneOf(['default', 'filled', 'tonal', 'outlined']), };