ReactJS

1
import React from 'react';
2
import styles from './dropdownTemplate.css';
3
import {noop} from "../../utils/react/noop";
4

5
export interface IDropdownProps {
6
  button: React.ReactNode;
7
  children: React.ReactNode;
8
  isOpen?: boolean;
9
  onOpen?: () => void;
10
  onClose?: () => void;
11
}
12

13

14
export function Dropdown({button, children, isOpen, onOpen = noop, onClose = noop}: IDropdownProps) {
15
  const [isDropdownOpen, setIsDropdownOpen] = React.useState(isOpen)
16
  React.useEffect(() => setIsDropdownOpen(isOpen), [isOpen]);
17
  React.useEffect(() => isDropdownOpen ? onOpen() : onClose(), [isDropdownOpen])
18

19
  const handleOpen = () => {
20
    if (isOpen === undefined) {
21
      setIsDropdownOpen(!isDropdownOpen);
22
    }
23
  }
24

25
  return (
26
    <div className={styles.container}>
27
      <div onClick={handleOpen}>
28
        {button}
29
      </div>
30
      {isDropdownOpen && (
31
        <div className={styles.listContainer}>
32
          <div className={styles.list} onClick={() => setIsDropdownOpen(false)}>
33
            {children}
34
          </div>
35
        </div>
36
      )}
37
    </div>
38
  );
39
}
40