src/components/CollapsibleSectionHeader.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

import cx from 'clsx';
import * as React from 'react';
import { ChevronDown } from 'react-feather';

import Button from './Button';
import s from './CollapsibleSectionHeader.module.scss';
import { SectionNameType } from './shared/Basic';

type Props = {
  name: string;
  type: string;
  qty?: number;
  toggle?: () => void;
  isOpen?: boolean;
};

export default function Header({ name, type, toggle, isOpen, qty }: Props) {
  const handleKeyDown = React.useCallback(
    (e: React.KeyboardEvent) => {
      e.preventDefault();
      if (e.key === 'Enter' || e.key === ' ') {
        toggle();
      }
    },
    [toggle]
  );
  return (
    <div
      className={s.header}
      onClick={toggle}
      style={{ cursor: 'pointer' }}
      tabIndex={0}
      onKeyDown={handleKeyDown}
      role="button"
    >
      <div>
        <SectionNameType name={name} type={type} />
      </div>

      {typeof qty === 'number' ? <span className={s.qty}>{qty}</span> : null}

      <Button
        kind="minimal"
        onClick={toggle}
        className={s.btn}
        title="Toggle collapsible section"
      >
        <span className={cx(s.arrow, { [s.isOpen]: isOpen })}>
          <ChevronDown size={20} />
        </span>
      </Button>
    </div>
  );
}