@cashub/ui 0.49.0-beta.0 → 0.49.0-beta.2

package/src/select/InputSelect.js

@@ -1,314 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import OutsideClickHandler from 'react-outside-click-handler';
-import { useCustomPopper } from '@cashub/hooks';
-import { KEY_CODE } from '@cashub/utils';
-import Input from '../form/Input';
-import ListBox from './subComponent/ListBox';
-import Option from './subComponent/Option';
-import Options from './subComponent/Options';
-
-const InputSelect = ({
-  options = [],
-  value,
-  disabled,
-  onChange,
-  onSelect,
-  ...props
-}) => {
-  const [displayListBox, setDisplayListBox] = useState(false);
-  const [filteredOptions, setFilteredOptions] = useState([]);
-  const [optionList, setOptionList] = useState([]);
-  const [focusedOption, setFocusedOption] = useState(null);
-
-  const optionsElementRef = useRef(null);
-  const [listBoxElement, setListBoxElement] = useState(null);
-  const [dropdownElement, setDropdownElement] = useState(null);
-  const [listBoxWidth, setListBoxWidth] = useState(0);
-
-  const { styles, attributes, state, update } = useCustomPopper(
-    listBoxElement,
-    dropdownElement,
-  );
-
-  const handleKeyUp = (event) => {
-    const key = event.keyCode;
-
-    switch (key) {
-      case KEY_CODE.ENTER:
-        if (!displayListBox) {
-          handleDisplay();
-        } else if (focusedOption) {
-          handleClickOption(focusedOption.id);
-        }
-        break;
-
-      case KEY_CODE.ESCAPE:
-        setDisplayListBox(false);
-        break;
-
-      case KEY_CODE.UP: {
-        if (!focusedOption) return;
-        const previousItem = findPreviousItem(focusedOption);
-        if (previousItem) {
-          handleFocusItem(previousItem);
-        }
-        break;
-      }
-
-      case KEY_CODE.DOWN: {
-        if (!focusedOption) return;
-        const nextItem = findNextItem(focusedOption);
-        if (nextItem) {
-          handleFocusItem(nextItem);
-        }
-        break;
-      }
-
-      case KEY_CODE.HOME:
-        event.preventDefault();
-        focusFirstItem();
-        break;
-
-      case KEY_CODE.END: {
-        event.preventDefault();
-        const lastItem = dropdownElement.querySelectorAll('[role="option"]');
-        if (lastItem.length) {
-          handleFocusItem(lastItem[lastItem.length - 1]);
-        }
-        break;
-      }
-
-      default:
-        break;
-    }
-  };
-
-  const handleKeyDown = (event) => {
-    const key = event.keyCode;
-    switch (key) {
-      case KEY_CODE.ENTER:
-      case KEY_CODE.ESCAPE:
-      case KEY_CODE.UP:
-      case KEY_CODE.DOWN:
-      case KEY_CODE.END:
-      case KEY_CODE.HOME:
-        event.preventDefault();
-        break;
-      default:
-        break;
-    }
-  };
-
-  const findPreviousItem = useCallback(
-    (currentItem) => {
-      const allItem = [...dropdownElement.querySelectorAll('[role="option"]')];
-      const currentItemIndex = allItem.indexOf(currentItem);
-      let previousItem = null;
-
-      if (currentItemIndex !== -1 && currentItemIndex > 0) {
-        previousItem = allItem[currentItemIndex - 1];
-      }
-
-      return previousItem;
-    },
-    [dropdownElement],
-  );
-
-  const findNextItem = useCallback(
-    (currentItem) => {
-      const allItem = [...dropdownElement.querySelectorAll('[role="option"]')];
-      const currentItemIndex = allItem.indexOf(currentItem);
-
-      let nextItem = null;
-
-      if (currentItemIndex !== -1 && currentItemIndex !== allItem.length - 1) {
-        nextItem = allItem[currentItemIndex + 1];
-      }
-
-      return nextItem;
-    },
-    [dropdownElement],
-  );
-
-  // set focused option
-  const handleFocusItem = useCallback((element) => {
-    if (!optionsElementRef.current) return;
-    setFocusedOption(element);
-  }, []);
-
-  const focusFirstItem = useCallback(() => {
-    const firstItem = dropdownElement.querySelector('[role="option"]');
-    if (firstItem) {
-      handleFocusItem(firstItem);
-    }
-  }, [dropdownElement, handleFocusItem]);
-
-  const setupFocus = useCallback(() => {
-    if (!dropdownElement) return;
-
-    const selectedItem = dropdownElement.querySelector(
-      '[aria-selected="true"]',
-    );
-    if (selectedItem) {
-      handleFocusItem(selectedItem);
-    } else if (optionList.length > 0) {
-      focusFirstItem();
-    }
-  }, [dropdownElement, focusFirstItem, handleFocusItem, optionList]);
-
-  const handleDisplay = () => {
-    if (filteredOptions.length > 0) {
-      setDisplayListBox(true);
-      update();
-    }
-  };
-
-  const handleClickOption = useCallback(
-    (packageName) => {
-      if (disabled === true) return;
-      onSelect(packageName);
-      setDisplayListBox(false);
-    },
-    [onSelect, disabled],
-  );
-
-  // all option
-  const optionItem = useMemo(() => {
-    return optionList.map((option) => (
-      <Option
-        role='option'
-        key={option.package_name}
-        tabIndex='0'
-        id={option.package_name}
-        selected={option.selected}
-        aria-selected={option.selected}
-        onClick={() => {
-          handleClickOption(option.package_name);
-        }}
-        focus={
-          focusedOption && focusedOption.id === option.package_name.toString()
-        }
-      >
-        {option.package_name}
-      </Option>
-    ));
-  }, [optionList, handleClickOption, focusedOption]);
-
-  // parse all value to string
-  // for subsequently determine whether it is a selected item
-  const parsedSelected = useMemo(() => {
-    if (value || value === 0) {
-      return value.toString();
-    }
-  }, [value]);
-
-  // observe element resized
-  useEffect(() => {
-    if (!listBoxElement) return;
-
-    setListBoxWidth(listBoxElement.clientWidth);
-  }, [listBoxElement]);
-
-  // 過濾搜尋關鍵字資料
-  useEffect(() => {
-    if (!options.length) return;
-    const tmpFilteredChildOptions = options.filter((option) => {
-      return option.package_name.toLowerCase().includes(value.toLowerCase());
-    });
-    setFilteredOptions(tmpFilteredChildOptions);
-  }, [options, value]);
-
-  useEffect(() => {
-    if (update) {
-      setTimeout(() => {
-        update();
-      }, 100);
-    }
-  }, [update, listBoxWidth]);
-
-  // observe element resized
-  useEffect(() => {
-    if (!listBoxElement) return;
-
-    const resizeObserverInstance = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        if (entry.target) {
-          const borderBoxSize = entry.target.clientWidth;
-
-          setListBoxWidth(borderBoxSize);
-        }
-      }
-    });
-
-    resizeObserverInstance.observe(listBoxElement);
-
-    return () => {
-      resizeObserverInstance.unobserve(listBoxElement);
-    };
-  }, [listBoxElement]);
-
-  useEffect(() => {
-    let selected = false;
-    setOptionList(
-      filteredOptions.map((option) => {
-        if (parsedSelected === option.package_name) {
-          selected = true;
-        } else {
-          selected = false;
-        }
-
-        return {
-          ...option,
-          selected,
-        };
-      }),
-    );
-  }, [filteredOptions, parsedSelected]);
-
-  useEffect(() => {
-    if (displayListBox) {
-      setupFocus();
-    }
-  }, [displayListBox, setupFocus, value]);
-
-  return (
-    <OutsideClickHandler
-      onOutsideClick={() => {
-        setDisplayListBox(false);
-      }}
-    >
-      <Input
-        autoComplete='off'
-        {...props}
-        onChange={(event) => {
-          onChange(event);
-          if (!displayListBox) setDisplayListBox(true);
-        }}
-        value={value}
-        ref={setListBoxElement}
-        {...attributes.popper}
-        placement={state && state.placement}
-        onClick={handleDisplay}
-        onKeyUp={handleKeyUp}
-        onFocus={() => {
-          setDisplayListBox(true);
-        }}
-        onKeyDown={handleKeyDown}
-      />
-      {optionItem.length > 0 && (
-        <ListBox
-          style={styles.popper}
-          $display={displayListBox}
-          ref={setDropdownElement}
-          width={listBoxWidth}
-          onKeyUp={handleKeyUp}
-          onKeyDown={handleKeyDown}
-        >
-          <Options ref={optionsElementRef}>{optionItem}</Options>
-        </ListBox>
-      )}
-    </OutsideClickHandler>
-  );
-};
-
-export default InputSelect;