@cashub/ui-elv 1.0.1 → 1.0.3

package/esm/section/SectionToolbarItem.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+const SectionToolbarItem = styled.div`
+  display: flex;
+  align-items: center;
+
+  > *:not(:first-child) {
+    margin-left: var(--spacing-s);
+  }
+`;
+export default SectionToolbarItem;

package/esm/section/index.js

@@ -0,0 +1,5 @@
+export { default as Section } from './Section';
+export { default as SectionBody } from './SectionBody';
+export { default as SectionHeader } from './SectionHeader';
+export { default as SectionToolbar } from './SectionToolbar';
+export { default as SectionToolbarItem } from './SectionToolbarItem';

package/esm/select/InputSelect.js

@@ -0,0 +1,263 @@
+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';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const InputSelect = _ref => {
+  let {
+    options = [],
+    value,
+    disabled,
+    onChange,
+    onSelect,
+    ...props
+  } = _ref;
+  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 => /*#__PURE__*/_jsx(Option, {
+      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 = 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 /*#__PURE__*/_jsxs(OutsideClickHandler, {
+    onOutsideClick: () => {
+      setDisplayListBox(false);
+    },
+    children: [/*#__PURE__*/_jsx(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 && /*#__PURE__*/_jsx(ListBox, {
+      style: styles.popper,
+      $display: displayListBox,
+      ref: setDropdownElement,
+      width: listBoxWidth,
+      onKeyUp: handleKeyUp,
+      onKeyDown: handleKeyDown,
+      children: /*#__PURE__*/_jsx(Options, {
+        ref: optionsElementRef,
+        children: optionItem
+      })
+    })]
+  });
+};
+export default InputSelect;