hooks#useOutsideClick TypeScript Examples

Sidebar = ({ closeSidebar, nodeSections }: Props) => {
  const getLocalNodes = (): NodesType => {
    const nodes = localStorage.getItem(LOCAL_STORAGE.NODES);
    return nodes ? JSON.parse(nodes) : [];
  };

  const [localNodes, setLocalNodes] = useState<NodesType>(getLocalNodes());
  const [selectedNode, setSelectedNode] = useState(nodeApi.address);
  const ref = useOutsideClick(closeSidebar);

  useEffect(() => {
    localStorage.setItem(LOCAL_STORAGE.NODES, JSON.stringify(localNodes));
  }, [localNodes]);

  return (
    <div className={styles.sidebar} ref={ref} data-testid="sidebar">
      <Header closeSidebar={closeSidebar} selectedNode={selectedNode} />
      <Nodes
        nodeSections={nodeSections}
        localNodes={localNodes}
        setLocalNodes={setLocalNodes}
        selectedNode={selectedNode}
        setSelectedNode={setSelectedNode}
      />
      <Form nodeSections={nodeSections} localNodes={localNodes} setLocalNodes={setLocalNodes} />
    </div>
  );
}

MetaField: FC<Props> = ({ label, value, type }) => {
  const [isVisible, setIsVisible] = useState(false);

  const toggleAlert = () => {
    setIsVisible((prevValue) => !prevValue);
  };

  const hideAlert = () => {
    setIsVisible(false);
  };

  const ref = useOutsideClick(hideAlert);

  return (
    <div className={styles.item}>
      <span className={styles.label}>{label}:</span>
      <div ref={ref} className={styles.type} onClick={toggleAlert}>
        <span className={styles.typeText}>{value}</span>
        {isVisible && <pre className={styles.typeAlert}>{getPreformattedText(type)}</pre>}
      </div>
    </div>
  );
}

Filters = ({ values, setValues, isAnySelected }: Props) => {
  const [isOpen, setIsOpen] = useState(false);
  const filters = Object.keys(values);

  const handleChange = ({ target: { name, checked } }: ChangeEvent<HTMLInputElement>) => {
    setValues((prevValues) => {
      const newValues = { ...prevValues, [name]: checked };
      const stringifiedNewValues = JSON.stringify(newValues);

      localStorage.setItem(LOCAL_STORAGE.EVENT_FILTERS, stringifiedNewValues);
      return newValues;
    });
  };

  const getFilters = () =>
    filters.map((filter) => (
      <li key={filter}>
        <Checkbox
          label={filter}
          name={filter}
          className={styles.checkbox}
          checked={values[filter]}
          onChange={handleChange}
        />
      </li>
    ));

  const close = () => {
    setIsOpen(false);
  };

  const toggle = () => {
    setIsOpen((prevValue) => !prevValue);
  };

  const reset = () => {
    setValues(init.filterValues);
    localStorage.removeItem(LOCAL_STORAGE.EVENT_FILTERS);
    close();
  };

  const ref = useOutsideClick(close);
  const toggleButtonClassName = clsx(styles.button, styles.toggleButton);
  const resetButtonClassName = clsx(styles.button, styles.resetButton);

  return (
    <div className={styles.filters} ref={ref}>
      <button type="button" className={toggleButtonClassName} onClick={toggle}>
        <Sliders size={16} strokeWidth={3} />
      </button>
      {isOpen && (
        <div className={styles.body}>
          <ul className={styles.list}>{getFilters()}</ul>
          {isAnySelected && (
            <footer className={styles.footer}>
              <button type="button" className={resetButtonClassName} onClick={reset}>
                <X size={16} strokeWidth={3} className={styles.icon} />
                Clear filters
              </button>
            </footer>
          )}
        </div>
      )}
    </div>
  );
}

Select = ({
  isMulti,
  options,
  onChange,
  selectCaption,
  inputPlaceholder,
  isOpen,
}: ISelect): JSX.Element => {
  const [mutableOptions, setMutableOptions] = useState<ISingleOption[]>(options);
  const [selectedOptions, setSelectedOptions] = useState<ISingleOption[]>([]);
  const [currentOptionId, setCurrentOptionId] = useState<string>('');
  const [isOpenState, setIsOpenState] = useState<boolean>(isOpen || false);
  const containerRef = useRef<HTMLDivElement>(null);

  useOutsideClick(containerRef, () => {
    setIsOpenState(false);
  });

  const doesArrayConsistValue = (id: string) => {
    return selectedOptions.filter((element: ISingleOption) => element.id === id).length;
  };

  const isInputTextMatch = (inputText: string, value: string) => {
    const regex = new RegExp(`^${inputText}`, 'i');
    return regex.test(value);
  };

  const updateSelectedOptions = (option: ISingleOption): void => {
    const { id } = option;
    setCurrentOptionId(id);
    if (isMulti) {
      if (!doesArrayConsistValue(id)) {
        setSelectedOptions([option, ...selectedOptions]);
      } else {
        const newArray = selectedOptions.filter((element: ISingleOption) => element.id !== id);
        setSelectedOptions([...newArray]);
      }
    } else {
      setSelectedOptions([option]);
    }
  };

  const filterOptions = (e: React.ChangeEvent<HTMLInputElement>) => {
    const inputValue = e.target.value;
    const filteredOptions = options.filter((option) => isInputTextMatch(inputValue, option.value));
    setMutableOptions(filteredOptions);
  };

  const toggleList = (e: MouseEvent<HTMLDivElement>) => {
    const clickedElementName = (e.target as HTMLDivElement).localName;
    setMutableOptions(options);
    if (clickedElementName !== 'input') {
      setIsOpenState(!isOpenState);
    }
  };
  useEffect(() => {
    onChange(selectedOptions);
  }, [selectedOptions, onChange]);

  return (
    <StyledWrapper ref={containerRef}>
      <StyledTopWrapper onClick={toggleList}>
        {isOpenState ? (
          <StyledInput placeholder={inputPlaceholder} onChange={filterOptions} />
        ) : (
          <StyledSelectCaption id="selectCaption">{selectCaption}</StyledSelectCaption>
        )}
        <StyledArrowImage isOpen={isOpenState} src={ArrowIcon} />
      </StyledTopWrapper>
      {isOpenState && (
        <StyledSelect aria-multiselectable={isMulti} aria-labelledby="selectCaption" role="listbox">
          {mutableOptions.map((option) => (
            <Option
              key={option.id}
              option={option}
              isMulti={isMulti}
              selectedOptions={selectedOptions}
              currentOptionId={currentOptionId}
              updateSelectedOptions={updateSelectedOptions}
            />
          ))}
        </StyledSelect>
      )}
    </StyledWrapper>
  );
}