All files / app/components CollapsibleSidePanel.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 59 60 61 62 63 64 65 66 67 68 69                      1x 1x   1x               1x             1x               1x                                                              
import React, { useState, ReactElement } from 'react';
import { delay } from 'lodash';
import { style as s } from 'app/styles';
 
interface ComponentProps {
  children: ReactElement | ReactElement[];
  style: object;
  onOpen?: () => void;
  onClose?: () => void;
}
 
const openDelaySeconds = 0.25;
const closeDelaySeconds = 0.5;
 
const openPanelStyle = {
  _extends: ['flexColumn'],
  position: 'relative',
  flexShrink: 0,
  width: 300,
  transition: `all ${openDelaySeconds}s ease`,
};
 
const closedPanelStyle = {
  _extends: ['flexColumn'],
  position: 'relative',
  width: 20,
  transition: `all ${closeDelaySeconds}s ease`,
};
 
const toggleIconStyle = {
  position: 'absolute',
  right: '@margins.medium+px',
  top: '@margins.medium+px',
  cursor: 'pointer',
  zIndex: 1,
};
 
export const CollapsibleSidePanel: React.FC<ComponentProps> = ({
  children,
  style,
  onOpen,
  onClose,
}): React.ReactElement => {
  const [isOpen, setIsOpen] = useState(false);
 
  const panelStyle = isOpen ? openPanelStyle : closedPanelStyle;
  return (
    <div style={s(panelStyle, style)} onClick={didClickPanel}>
      <div style={s(toggleIconStyle)} onClick={didToggle}>
        |||
      </div>
      {isOpen && children}
    </div>
  );
 
  function didClickPanel() {
    !isOpen && didToggle();
  }
 
  function didToggle() {
    if (isOpen) {
      onClose && delay(() => onClose(), closeDelaySeconds * 1000);
    } else {
      onOpen && delay(() => onOpen(), openDelaySeconds * 1000);
    }
    setIsOpen(!isOpen);
  }
};