pdf-reader-web/components/SelectBox/index.tsx

import React, { useState, useEffect, useRef } from 'react';

import Icon from '../Icon';
import Divider from '../Divider';

import {
  Container,
  Selected,
  Content,
  InputContent,
  OptionWrapper,
  Option,
} from './styled';

type Props = {
  onChange?: (item: SelectOptionType) => void;
  options: SelectOptionType[];
  defaultValue?: React.ReactNode;
  isDivide?: boolean;
  useInput?: boolean;
  style?: {};
};

const SelectBox: React.FC<Props> = ({
  onChange,
  options,
  defaultValue,
  isDivide = false,
  useInput = false,
  style,
}: Props) => {
  const selectRef = useRef<HTMLDivElement>(null);
  const optionRef = useRef<HTMLDivElement>(null);
  const [isCollapse, setCollapse] = useState(true);
  const [value, setValue] = useState(defaultValue);

  const handleClick = (): void => {
    setCollapse(!isCollapse);
  };

  const handleSelect = (index: number): void => {
    setValue(options[index].content);

    if (onChange) {
      onChange(options[index]);
    }
  };

  const handleBlur = (): void => {
    setCollapse(true);
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
    setValue(e.target.value || 0);
  };

  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {
    if (e.keyCode === 13 && onChange && value) {
      const param = {
        key: '',
        content: '',
        child: parseInt(value as string, 10),
      };
      onChange(param);
      setCollapse(true);
    }
  };

  useEffect(() => {
    if (defaultValue) {
      setValue(defaultValue);
    } else {
      setValue(options[0].content);
    }
  }, [defaultValue]);

  useEffect(() => {
    if (!isCollapse && selectRef.current) {
      const position = selectRef.current.getBoundingClientRect();
      if (optionRef.current) {
        optionRef.current.style.top = `${selectRef.current.clientHeight +
          position.top}px`;
        optionRef.current.style.left = `${position.left}px`;
      }
    }
  });

  return (
    <Container style={style}>
      <Selected
        ref={selectRef}
        onMouseDown={handleClick}
        onBlur={handleBlur}
        tabIndex={0}
        data-testid="selected"
      >
        {useInput &&
        (typeof value === 'string' || typeof value === 'number') ? (
          <InputContent
            value={value}
            onChange={handleChange}
            onKeyDown={handleKeyDown}
          />
        ) : (
          <Content>{value}</Content>
        )}
        {isDivide ? <Divider /> : null}
        <Icon glyph="down-arrow" />
      </Selected>
      {!isCollapse ? (
        <OptionWrapper ref={optionRef} data-testid="option-list">
          {options.map((option: SelectOptionType, index: number) => (
            <Option
              key={option.key}
              onMouseDown={(): void => {
                handleSelect(index);
              }}
            >
              {option.content}
            </Option>
          ))}
        </OptionWrapper>
      ) : null}
    </Container>
  );
};

export default SelectBox;