All files / app/components CollapsibleGroup.tsx

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58                          4x             4x             4x           4x       4x             6x 6x                        
import React, { useState, ReactElement } from 'react';
import { style as s } from 'app/styles';
import { CaretRightIcon } from './CaretRightIcon';
import { CaretDownIcon } from './CaretDownIcon';
 
interface ComponentProps {
  children: ReactElement[];
  isOpen: boolean;
  onOpenToggle: () => void;
  style?: object;
  title: string;
}
 
const panelStyle = {
  _extends: 'flexColumn',
  flexGrow: 0,
  flexShrink: 0,
  position: 'relative',
};
 
const openPanelStyle = {
  _extends: panelStyle,
  height: 'calc(100% - 185px)',
  marginBottom: '@margins.large+px',
  transition: `all .25s ease`,
};
 
const closedPanelStyle = {
  ...panelStyle,
  height: 30,
  transition: `all .5s ease`,
};
 
const toggleIconStyle = {
  cursor: 'pointer',
};
 
export const CollapsibleGroup: React.FC<ComponentProps> = ({
  children,
  style,
  title,
  isOpen,
  onOpenToggle,
}): React.ReactElement => {
  const panelStyle = isOpen ? openPanelStyle : closedPanelStyle;
  return (
    <div style={s(panelStyle, style)} onClick={onOpenToggle}>
      <div style={s('flexRow')}>
        <div style={s(toggleIconStyle)}>
          {isOpen ? <CaretDownIcon /> : <CaretRightIcon />}
        </div>
        <div style={s('h2Text')}>{title}</div>
      </div>
      {isOpen && children}
    </div>
  );
};