packages/pass/components/Layout/Button/CollapsibleHeaderToggleButton.tsx

   1 import { type FC, useContext } from 'react';
   2
   3 import { Button, type ButtonProps } from '@proton/atoms';
   4 import { Icon } from '@proton/components';
   5 import CollapsibleContext from '@proton/components/components/collapsible/CollapsibleContext';
   6
   7 const CollapsibleHeaderToggleButton: FC<ButtonProps> = ({ children, disabled, onClick, ...rest }) => {
   8     /* Must be used inside a <Collapsible> component */
   9     const { isExpanded, toggle, headerId, contentId, disabled: contextDisabled } = useContext(CollapsibleContext);
  10
  11     const handleButtonClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
  12         e.stopPropagation();
  13         e.preventDefault();
  14         toggle();
  15         onClick?.(e);
  16     };
  17
  18     return (
  19         <Button
  20             {...rest}
  21             disabled={disabled || contextDisabled}
  22             aria-expanded={isExpanded}
  23             aria-describedby={headerId}
  24             aria-controls={contentId}
  25             onClick={handleButtonClick}
  26         >
  27             {isExpanded ? <Icon name="cross" /> : <Icon name="chevron-down" />}
  28             {children}
  29         </Button>
  30     );
  31 };
  32 export default CollapsibleHeaderToggleButton;