@cashub/ui 0.22.7 → 0.22.9

package/src/select/Select.js

@@ -0,0 +1,764 @@
+import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import OutsideClickHandler from 'react-outside-click-handler';
+import styled from 'styled-components';
+import uniqueId from 'lodash.uniqueid';
+import { TiArrowSortedDown } from 'react-icons/ti';
+import { MdClose } from 'react-icons/md';
+import { useCustomPopper } from '@cashub/hooks';
+import { KEY_CODE } from '@cashub/utils';
+import media from '../styles/mixin/media';
+import SelectedSingle from './subComponent/SelectedSingle';
+import SelectedMultiple from './subComponent/SelectedMultiple';
+import ListBox from './subComponent/ListBox';
+import SearchBox from './subComponent/SearchBox';
+import Options from './subComponent/Options';
+import OptionGroup from './subComponent/OptionGroup';
+import Option from './subComponent/Option';
+
+const Select = ({
+  options,
+  enableSelectAll = false,
+  selected,
+  onSelect,
+  onDeselect,
+  multiple = false,
+  allowClear = false,
+  allowSearch = true,
+  disabled,
+  placeholder = '',
+  fullWidth,
+  large,
+  fill,
+  fillReverse,
+  onBlur,
+  onSearch,
+}) => {
+  const { t } = useTranslation();
+  const [id] = useState(uniqueId('select-'));
+  const [allOptionId] = useState(uniqueId('allOptons-'));
+  const [display, setDisplay] = useState(false);
+  const [comboboxElement, setComboboxElement] = useState(null);
+  const [listBoxElement, setListBoxElement] = useState(null);
+  const optionsElementRef = useRef(null);
+  const searchBoxElement = useRef(null);
+  const [listBoxWidth, setListBoxWidth] = useState(0);
+  const [optionList, setOptionList] = useState([]);
+  const [focusedOption, setFocusedOption] = useState(null);
+  const [isFocusCombobox, setIsFocusCombobox] = useState(false);
+  const [selectedOptions, setSelectedOptions] = useState([]);
+  const [filteredOptions, setFilteredOptions] = useState(options);
+  const [search, setSearch] = useState('');
+
+  const { styles, attributes, state, update } = useCustomPopper(
+    comboboxElement,
+    listBoxElement,
+  );
+  const newOptions = useMemo(() => {
+    if (!options) return;
+    const newOptions = [...options];
+    if (options.length > 0 && multiple && enableSelectAll) {
+      newOptions.unshift({ id: allOptionId, text: t('All') });
+    }
+
+    return newOptions;
+  }, [options, multiple, enableSelectAll, allOptionId]);
+
+  // parse all value to string
+  // for subsequently determine whether it is a selected item
+  const parsedSelected = useMemo(() => {
+    if (selected || selected === 0) {
+      // multiple value
+      if (Array.isArray(selected)) {
+        return selected.map((value) => value.toString());
+      }
+
+      // single value
+      return selected.toString();
+    }
+    return '';
+  }, [selected]);
+
+  const selectedAllOptions = useMemo(() => {
+    if (
+      multiple &&
+      enableSelectAll &&
+      parsedSelected.length + 1 === newOptions.length
+    ) {
+      const selectedAllOptions = [...parsedSelected];
+      selectedAllOptions.unshift(allOptionId);
+      return selectedAllOptions;
+    }
+    return parsedSelected;
+  }, [
+    multiple,
+    enableSelectAll,
+    newOptions.length,
+    parsedSelected,
+    allOptionId,
+  ]);
+
+  // set focused option
+  const handleFocusItem = useCallback((element) => {
+    if (!optionsElementRef.current) return;
+
+    setFocusedOption(element);
+
+    const container = optionsElementRef.current;
+    if (container.scrollHeight > container.clientHeight) {
+      const scrollBottom = container.clientHeight + container.scrollTop;
+      const elementBottom = element.offsetTop + element.offsetHeight;
+      if (elementBottom > scrollBottom) {
+        container.scrollTop = elementBottom - container.clientHeight;
+      } else if (element.offsetTop < container.scrollTop) {
+        container.scrollTop = element.offsetTop;
+      }
+    }
+  }, []);
+
+  const focusFirstItem = useCallback(() => {
+    const firstItem = listBoxElement.querySelector('[role="option"]');
+
+    if (firstItem) {
+      handleFocusItem(firstItem);
+    }
+  }, [listBoxElement, handleFocusItem]);
+
+  const setupFocus = useCallback(() => {
+    if (!listBoxElement) return;
+
+    const selectedItem = listBoxElement.querySelector('[aria-selected="true"]');
+
+    if (selectedItem) {
+      handleFocusItem(selectedItem);
+    } else if (optionList.length > 0) {
+      focusFirstItem();
+    } else {
+      setFocusedOption(null);
+    }
+  }, [listBoxElement, handleFocusItem, focusFirstItem, optionList]);
+
+  const findPreviousItem = useCallback(
+    (currentItem) => {
+      const allItem = [...listBoxElement.querySelectorAll('[role="option"]')];
+      const currentItemIndex = allItem.indexOf(currentItem);
+      let previousItem = null;
+
+      if (currentItemIndex !== -1 && currentItemIndex > 0) {
+        previousItem = allItem[currentItemIndex - 1];
+      }
+
+      return previousItem;
+    },
+    [listBoxElement],
+  );
+
+  const findNextItem = useCallback(
+    (currentItem) => {
+      const allItem = [...listBoxElement.querySelectorAll('[role="option"]')];
+      const currentItemIndex = allItem.indexOf(currentItem);
+      let nextItem = null;
+
+      if (currentItemIndex !== -1 && currentItemIndex < allItem.length - 1) {
+        nextItem = allItem[currentItemIndex + 1];
+      }
+
+      return nextItem;
+    },
+    [listBoxElement],
+  );
+
+  const handleOnSelect = useCallback(
+    (event, value) => {
+      event.stopPropagation();
+      if (disabled === true) return;
+
+      // 選取選項
+      // 點選 all 全選
+      if (multiple) {
+        if (
+          value.toString() === allOptionId &&
+          selectedAllOptions.length < newOptions.length
+        ) {
+          for (let index = 1; index < newOptions.length; index += 1) {
+            onSelect(newOptions[index].id);
+          }
+        }
+
+        if (
+          value.toString() !== allOptionId &&
+          !selectedAllOptions.includes(value.toString())
+        ) {
+          // 選取一個選項，變成全選
+          if (selectedAllOptions.length + 2 === newOptions.length) {
+            onSelect(value);
+          } else {
+            // 選取特定選項
+            onSelect(value);
+          }
+        }
+
+        // 刪除選項
+        // 點選 all 刪除全選
+        if (
+          value.toString() === allOptionId &&
+          selectedAllOptions.length === newOptions.length
+        ) {
+          for (let index = 0; index < newOptions.length; index += 1) {
+            onDeselect(newOptions[index].id);
+          }
+        }
+
+        if (
+          value.toString() !== allOptionId &&
+          selectedAllOptions.includes(value.toString())
+        ) {
+          // 原本是 all 全選後來刪除其中一個選項
+          if (selectedAllOptions.length === newOptions.length) {
+            onDeselect(value);
+          } else {
+            // 刪除特定選項
+            onDeselect(value);
+          }
+        }
+        setDisplay(true);
+      } else {
+        onSelect(value);
+        setDisplay(false);
+      }
+      comboboxElement.focus();
+      setSearch('');
+    },
+    [
+      disabled,
+      onSelect,
+      comboboxElement,
+      selectedAllOptions,
+      onDeselect,
+      newOptions,
+      allOptionId,
+      multiple,
+    ],
+  );
+
+  const handleOnDeselect = useCallback(
+    (event, value) => {
+      event.stopPropagation();
+      if (disabled === true) return;
+
+      if (multiple) {
+        if (value.toString() === allOptionId) {
+          for (let index = 0; index < optionList.length; index += 1) {
+            onDeselect(optionList[index].id);
+          }
+        } else {
+          onDeselect(value);
+        }
+      } else {
+        onDeselect(value);
+      }
+    },
+    [disabled, onDeselect, optionList, allOptionId, multiple],
+  );
+
+  // list all selected option
+  const selectedItem = useMemo(() => {
+    if (selectedOptions.length > 0) {
+      if (multiple) {
+        if (selectedOptions[0].id === allOptionId) {
+          return (
+            <SelectedMultiple
+              content={selectedOptions[0].text}
+              key={selectedOptions[0].id}
+              onClick={(event) =>
+                handleOnDeselect(event, selectedOptions[0].id)
+              }
+              disabled={disabled}
+            />
+          );
+        }
+        return selectedOptions.map((value) => {
+          return (
+            <SelectedMultiple
+              content={value.text}
+              key={value.id}
+              onClick={(event) => handleOnDeselect(event, value.id)}
+              disabled={disabled}
+            />
+          );
+        });
+      }
+
+      return <SelectedSingle>{selectedOptions[0].text}</SelectedSingle>;
+    }
+
+    return placeholder;
+  }, [
+    placeholder,
+    handleOnDeselect,
+    multiple,
+    selectedOptions,
+    disabled,
+    allOptionId,
+  ]);
+
+  const optionItem = useMemo(() => {
+    if (optionList.length <= 0) return null;
+    return optionList.map((option) => {
+      if (option.child && option.child.length > 0) {
+        return (
+          <OptionGroup aria-labelledby={option.text} key={option.text}>
+            <Option role='presentation' id={option.text}>
+              {option.text}
+            </Option>
+
+            {option.child.map((option) => {
+              return (
+                <Option
+                  role='option'
+                  tabIndex='0'
+                  id={option.id}
+                  key={option.id}
+                  onClick={(event) => handleOnSelect(event, option.id)}
+                  focus={
+                    focusedOption && focusedOption.id === option.id.toString()
+                  }
+                  selected={option.selected}
+                  aria-selected={option.selected}
+                >
+                  {option.text}
+                </Option>
+              );
+            })}
+          </OptionGroup>
+        );
+      }
+
+      return (
+        <Option
+          role='option'
+          tabIndex='0'
+          id={option.id}
+          key={option.id}
+          onClick={(event) => handleOnSelect(event, option.id)}
+          focus={focusedOption && focusedOption.id === option.id.toString()}
+          selected={option.selected}
+          aria-selected={option.selected}
+        >
+          {option.text}
+        </Option>
+      );
+    });
+  }, [optionList, focusedOption, handleOnSelect]);
+
+  // show or hide listbox
+  // and set listbox width according to combobox current width
+  const handleToggle = () => {
+    if (disabled === true) return;
+
+    const tmpDisplay = !display;
+    if (!tmpDisplay) {
+      setFocusedOption(null);
+    }
+
+    setDisplay(tmpDisplay);
+    update();
+  };
+
+  // handle keyboard interaction
+  const handleKeyUp = (event) => {
+    const key = event.keyCode;
+
+    switch (key) {
+      case KEY_CODE.ENTER:
+        if (!display) {
+          handleToggle();
+        } else if (focusedOption) {
+          handleOnSelect(event, focusedOption.id);
+        }
+
+        break;
+      case KEY_CODE.ESCAPE:
+        if (display) {
+          handleToggle();
+        }
+        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.END: {
+        event.preventDefault();
+        const itemList = listBoxElement.querySelectorAll('[role="option"]');
+
+        if (itemList.length) {
+          handleFocusItem(itemList[itemList.length - 1]);
+        }
+
+        break;
+      }
+      case KEY_CODE.HOME:
+        event.preventDefault();
+        focusFirstItem();
+        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;
+    }
+  };
+
+  // handle search keyword change
+  const handleSearchChange = (event) => {
+    if (onSearch) {
+      onSearch(event.target.value);
+    }
+
+    setSearch(event.target.value);
+  };
+
+  const handleFocus = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    setIsFocusCombobox(true);
+  };
+
+  // determine selected option(s)
+  useEffect(() => {
+    if (!newOptions) return;
+
+    const tmpSelectedOptions = [];
+
+    newOptions.forEach((option) => {
+      if (option.child && option.child.length > 0) {
+        option.child.forEach((option) => {
+          if (multiple && selectedAllOptions.includes(option.id.toString())) {
+            tmpSelectedOptions.push(option);
+          } else if (selectedAllOptions === option.id.toString()) {
+            tmpSelectedOptions.push(option);
+          }
+        });
+      } else {
+        if (multiple && selectedAllOptions.includes(option.id.toString())) {
+          tmpSelectedOptions.push(option);
+        } else if (selectedAllOptions === option.id.toString()) {
+          tmpSelectedOptions.push(option);
+        }
+      }
+      return false;
+    });
+
+    setSelectedOptions(tmpSelectedOptions);
+  }, [newOptions, selectedAllOptions, multiple]);
+
+  useEffect(() => {
+    if (update) {
+      setTimeout(() => {
+        update();
+      }, 100);
+    }
+  }, [update, listBoxWidth]);
+
+  // observe element resized
+  useEffect(() => {
+    if (!comboboxElement) return;
+
+    const resizeObserverInstance = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.target) {
+          const borderBoxSize = entry.target.clientWidth;
+
+          setListBoxWidth(borderBoxSize);
+        }
+      }
+    });
+
+    resizeObserverInstance.observe(comboboxElement);
+
+    return () => {
+      // unobserve element
+      resizeObserverInstance.unobserve(comboboxElement);
+    };
+  }, [comboboxElement]);
+
+  // re-setup focus when option list changed and update popper position
+  useEffect(() => {
+    setupFocus();
+    if (update) update();
+  }, [setupFocus, optionList, update]);
+
+  // parse option list when filtered options change
+  useEffect(() => {
+    if (!filteredOptions) return;
+
+    setOptionList(
+      filteredOptions.map((option) => {
+        if (option.child && option.child.length > 0) {
+          return {
+            ...option,
+            child: option.child.map((option) => {
+              let selected = false;
+              if (
+                multiple &&
+                selectedAllOptions.includes(option.id.toString())
+              ) {
+                selected = true;
+              } else if (selectedAllOptions === option.id.toString()) {
+                selected = true;
+              }
+
+              return {
+                ...option,
+                selected,
+              };
+            }),
+          };
+        }
+
+        let selected = false;
+
+        if (multiple && selectedAllOptions.includes(option.id.toString())) {
+          selected = true;
+        } else if (selectedAllOptions === option.id.toString()) {
+          selected = true;
+        }
+
+        return {
+          ...option,
+          selected,
+        };
+      }),
+    );
+  }, [filteredOptions, multiple, selectedAllOptions]);
+
+  // filter options on search keyword changed
+  useEffect(() => {
+    const tmpFilteredOptions = [];
+
+    newOptions.forEach((option) => {
+      if (option.child && option.child.length > 0) {
+        const tmpFilteredChildOptions = option.child.filter(
+          (option) =>
+            option.text.toLowerCase().indexOf(search.toLowerCase().trim()) !==
+            -1,
+        );
+        if (tmpFilteredChildOptions.length > 0) {
+          tmpFilteredOptions.push({
+            ...option,
+            child: tmpFilteredChildOptions,
+          });
+        }
+      } else if (
+        option.text.toLowerCase().indexOf(search.toLowerCase().trim()) !== -1
+      ) {
+        tmpFilteredOptions.push(option);
+      }
+    });
+    setFilteredOptions(tmpFilteredOptions);
+  }, [search, newOptions]);
+
+  useEffect(() => {
+    if (display) {
+      setupFocus();
+
+      if (allowSearch) {
+        searchBoxElement.current.focus();
+      }
+    }
+  }, [setupFocus, display, allowSearch]);
+
+  return (
+    <OutsideClickHandler
+      onOutsideClick={() => {
+        setDisplay(false);
+        if (onBlur) onBlur();
+        setIsFocusCombobox(false);
+      }}
+      disabled={!isFocusCombobox}
+    >
+      <Combobox
+        role='combobox'
+        tabIndex='0'
+        aria-haspopup='listbox'
+        aria-expanded={display}
+        aria-owns={id}
+        ref={setComboboxElement}
+        onClick={handleToggle}
+        onKeyUp={handleKeyUp}
+        onKeyDown={handleKeyDown}
+        $display={display}
+        disabled={disabled}
+        fullWidth={fullWidth}
+        large={large}
+        $fill={fill}
+        fillReverse={fillReverse}
+        onFocus={handleFocus}
+        placeholder={placeholder}
+      >
+        {selectedItem}
+
+        {selectedOptions.length > 0 && !multiple && !disabled && allowClear && (
+          <CloseButton
+            onClick={() => {
+              onSelect('');
+            }}
+          />
+        )}
+        <ExpandArrow aria-haspopup='listbox' aria-expanded={display} />
+      </Combobox>
+      <ListBox
+        role='listbox'
+        tabIndex='0'
+        id={id}
+        ref={setListBoxElement}
+        onKeyUp={handleKeyUp}
+        onKeyDown={handleKeyDown}
+        width={listBoxWidth}
+        $display={display}
+        style={styles.popper}
+        {...attributes.popper}
+        placement={state && state.placement}
+      >
+        {allowSearch && (
+          <SearchBox
+            ref={searchBoxElement}
+            placeholder='Search'
+            onChange={handleSearchChange}
+            value={search}
+          />
+        )}
+
+        <Options ref={optionsElementRef} allowSearch={allowSearch}>
+          {optionItem || <Message>No results found</Message>}
+        </Options>
+      </ListBox>
+    </OutsideClickHandler>
+  );
+};
+
+const Combobox = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  min-height: 36px;
+  min-width: 160px;
+  cursor: pointer;
+  position: relative;
+  background: transparent;
+  color: var(--font-on-background);
+  font-size: var(--font-body1);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius-l);
+  padding: 0 calc(var(--spacing-s) * 2 + 8px) 0 var(--spacing-s);
+
+  &:focus {
+    ${({ disabled }) =>
+      !disabled &&
+      `
+        border-color: var(--color-primary);
+        outline: none;
+      `};
+  }
+
+  ${({ $display }) =>
+    $display &&
+    `
+      border-color: var(--color-primary);
+      outline: none;
+    `}
+
+  ${({ disabled }) => disabled && 'cursor: not-allowed;opacity: 0.5;'}
+  ${({ placeholder }) => placeholder && 'color: var(--font-on-mute);'}
+  
+  ${({ fullWidth }) => (fullWidth ? 'width: 100%' : 'max-width: 320px')};
+
+  ${({ large }) =>
+    large &&
+    `
+      height: 40px;
+      padding: 12px calc(var(--spacing-s) * 2 + 8px) 12px var(--spacing-s);
+    `}
+
+  ${({ $fill }) =>
+    $fill &&
+    `
+      background: var(--color-background2);
+      border-color: transparent;
+    `}
+
+  ${({ fillReverse }) =>
+    fillReverse &&
+    `
+      background: var(--color-background1);
+      border-color: transparent;
+    `}
+`;
+Combobox.displayName = 'Combobox';
+
+const CloseButton = styled(MdClose)`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--color-primary);
+  font-size: var(--font-body1);
+  right: var(--spacing-l);
+
+  ${media.tablet`
+    right: calc(var(--spacing) + var(--spacing-s));
+  `};
+`;
+CloseButton.displayName = 'CloseButton';
+
+const ExpandArrow = styled(TiArrowSortedDown)`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--color-primary);
+  font-size: var(--font-body1);
+  right: var(--spacing-s);
+`;
+ExpandArrow.displayName = 'ExpandArrow';
+
+const Message = styled.p`
+  margin: 0;
+  padding: 12px var(--spacing-s);
+`;
+Message.displayName = 'Message';
+
+export default Select;