@cashub/ui-elv 1.0.0

package/select/InputSelect.js

@@ -0,0 +1,270 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _reactOutsideClickHandler = _interopRequireDefault(require("react-outside-click-handler"));
+var _hooks = require("@cashub/hooks");
+var _utils = require("@cashub/utils");
+var _Input = _interopRequireDefault(require("../form/Input"));
+var _ListBox = _interopRequireDefault(require("./subComponent/ListBox"));
+var _Option = _interopRequireDefault(require("./subComponent/Option"));
+var _Options = _interopRequireDefault(require("./subComponent/Options"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const InputSelect = _ref => {
+  let {
+    options = [],
+    value,
+    disabled,
+    onChange,
+    onSelect,
+    ...props
+  } = _ref;
+  const [displayListBox, setDisplayListBox] = (0, _react.useState)(false);
+  const [filteredOptions, setFilteredOptions] = (0, _react.useState)([]);
+  const [optionList, setOptionList] = (0, _react.useState)([]);
+  const [focusedOption, setFocusedOption] = (0, _react.useState)(null);
+  const optionsElementRef = (0, _react.useRef)(null);
+  const [listBoxElement, setListBoxElement] = (0, _react.useState)(null);
+  const [dropdownElement, setDropdownElement] = (0, _react.useState)(null);
+  const [listBoxWidth, setListBoxWidth] = (0, _react.useState)(0);
+  const {
+    styles,
+    attributes,
+    state,
+    update
+  } = (0, _hooks.useCustomPopper)(listBoxElement, dropdownElement);
+  const handleKeyUp = event => {
+    const key = event.keyCode;
+    switch (key) {
+      case _utils.KEY_CODE.ENTER:
+        if (!displayListBox) {
+          handleDisplay();
+        } else if (focusedOption) {
+          handleClickOption(focusedOption.id);
+        }
+        break;
+      case _utils.KEY_CODE.ESCAPE:
+        setDisplayListBox(false);
+        break;
+      case _utils.KEY_CODE.UP:
+        {
+          if (!focusedOption) return;
+          const previousItem = findPreviousItem(focusedOption);
+          if (previousItem) {
+            handleFocusItem(previousItem);
+          }
+          break;
+        }
+      case _utils.KEY_CODE.DOWN:
+        {
+          if (!focusedOption) return;
+          const nextItem = findNextItem(focusedOption);
+          if (nextItem) {
+            handleFocusItem(nextItem);
+          }
+          break;
+        }
+      case _utils.KEY_CODE.HOME:
+        event.preventDefault();
+        focusFirstItem();
+        break;
+      case _utils.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 _utils.KEY_CODE.ENTER:
+      case _utils.KEY_CODE.ESCAPE:
+      case _utils.KEY_CODE.UP:
+      case _utils.KEY_CODE.DOWN:
+      case _utils.KEY_CODE.END:
+      case _utils.KEY_CODE.HOME:
+        event.preventDefault();
+        break;
+      default:
+        break;
+    }
+  };
+  const findPreviousItem = (0, _react.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 = (0, _react.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 = (0, _react.useCallback)(element => {
+    if (!optionsElementRef.current) return;
+    setFocusedOption(element);
+  }, []);
+  const focusFirstItem = (0, _react.useCallback)(() => {
+    const firstItem = dropdownElement.querySelector('[role="option"]');
+    if (firstItem) {
+      handleFocusItem(firstItem);
+    }
+  }, [dropdownElement, handleFocusItem]);
+  const setupFocus = (0, _react.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 = (0, _react.useCallback)(packageName => {
+    if (disabled === true) return;
+    onSelect(packageName);
+    setDisplayListBox(false);
+  }, [onSelect, disabled]);
+
+  // all option
+  const optionItem = (0, _react.useMemo)(() => {
+    return optionList.map(option => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+      role: "option",
+      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(),
+      children: option.package_name
+    }, option.package_name));
+  }, [optionList, handleClickOption, focusedOption]);
+
+  // parse all value to string
+  // for subsequently determine whether it is a selected item
+  const parsedSelected = (0, _react.useMemo)(() => {
+    if (value || value === 0) {
+      return value.toString();
+    }
+  }, [value]);
+
+  // observe element resized
+  (0, _react.useEffect)(() => {
+    if (!listBoxElement) return;
+    setListBoxWidth(listBoxElement.clientWidth);
+  }, [listBoxElement]);
+
+  // 過濾搜尋關鍵字資料
+  (0, _react.useEffect)(() => {
+    if (!options.length) return;
+    const tmpFilteredChildOptions = options.filter(option => {
+      return option.package_name.toLowerCase().includes(value.toLowerCase());
+    });
+    setFilteredOptions(tmpFilteredChildOptions);
+  }, [options, value]);
+  (0, _react.useEffect)(() => {
+    if (update) {
+      setTimeout(() => {
+        update();
+      }, 100);
+    }
+  }, [update, listBoxWidth]);
+
+  // observe element resized
+  (0, _react.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]);
+  (0, _react.useEffect)(() => {
+    let selected = false;
+    setOptionList(filteredOptions.map(option => {
+      if (parsedSelected === option.package_name) {
+        selected = true;
+      } else {
+        selected = false;
+      }
+      return {
+        ...option,
+        selected
+      };
+    }));
+  }, [filteredOptions, parsedSelected]);
+  (0, _react.useEffect)(() => {
+    if (displayListBox) {
+      setupFocus();
+    }
+  }, [displayListBox, setupFocus, value]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactOutsideClickHandler.default, {
+    onOutsideClick: () => {
+      setDisplayListBox(false);
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
+      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 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListBox.default, {
+      style: styles.popper,
+      $display: displayListBox,
+      ref: setDropdownElement,
+      width: listBoxWidth,
+      onKeyUp: handleKeyUp,
+      onKeyDown: handleKeyDown,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Options.default, {
+        ref: optionsElementRef,
+        children: optionItem
+      })
+    })]
+  });
+};
+var _default = exports.default = InputSelect;