@chayns-components/core 5.0.0-beta.89 → 5.0.0-beta.891

package/lib/cjs/components/search-box/SearchBox.js

@@ -0,0 +1,580 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _chaynsApi = require("chayns-api");
+var _framerMotion = require("framer-motion");
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
+var _styledComponents = require("styled-components");
+var _calculate = require("../../utils/calculate");
+var _searchBox = require("../../utils/searchBox");
+var _Icon = _interopRequireDefault(require("../icon/Icon"));
+var _Input = _interopRequireDefault(require("../input/Input"));
+var _GroupName = _interopRequireDefault(require("./group-name/GroupName"));
+var _SearchBoxBody = _interopRequireDefault(require("./search-box-body/SearchBoxBody"));
+var _SearchBoxItem = _interopRequireDefault(require("./search-box-item/SearchBoxItem"));
+var _SearchBoxItem2 = require("./search-box-item/SearchBoxItem.styles");
+var _SearchBox = require("./SearchBox.styles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
+  placeholder,
+  lists,
+  onChange,
+  onBlur,
+  onSelect,
+  onKeyDown,
+  selectedId,
+  container = document.body,
+  shouldShowRoundImage,
+  shouldShowContentOnEmptyInput = true,
+  shouldAddInputToList = true,
+  shouldShowToggleIcon = false
+}, ref) => {
+  const [matchingListsItems, setMatchingListsItems] = (0, _react.useState)(lists);
+  const [selectedImage, setSelectedImage] = (0, _react.useState)();
+  const [value, setValue] = (0, _react.useState)('');
+  const [isAnimating, setIsAnimating] = (0, _react.useState)(false);
+  const [height, setHeight] = (0, _react.useState)(0);
+  const [width, setWidth] = (0, _react.useState)(0);
+  const [focusedIndex, setFocusedIndex] = (0, _react.useState)(null);
+  const [hasMultipleGroups, setHasMultipleGroups] = (0, _react.useState)(lists.length > 1);
+  const [filteredChildrenArray, setFilteredChildrenArray] = (0, _react.useState)();
+  const [inputToListValue, setInputToListValue] = (0, _react.useState)('');
+  const [groups, setGroups] = (0, _react.useState)(['all']);
+  const [portal, setPortal] = (0, _react.useState)();
+  const [internalCoordinates, setInternalCoordinates] = (0, _react.useState)({
+    x: 0,
+    y: 0
+  });
+  const boxRef = (0, _react.useRef)(null);
+  const contentRef = (0, _react.useRef)(null);
+  const inputRef = (0, _react.useRef)(null);
+  const theme = (0, _styledComponents.useTheme)();
+  const {
+    browser
+  } = (0, _chaynsApi.getDevice)();
+  (0, _react.useEffect)(() => {
+    if (boxRef.current) {
+      const {
+        x,
+        y
+      } = boxRef.current.getBoundingClientRect();
+      setInternalCoordinates({
+        x,
+        y
+      });
+    }
+  }, []);
+
+  /**
+   * Checks if Lists are smaller then 1
+   */
+  (0, _react.useEffect)(() => {
+    setHasMultipleGroups(lists.length > 1);
+  }, [lists]);
+  const filterbuttons = (0, _react.useMemo)(() => {
+    const items = [];
+    if (lists.length <= 1) {
+      return items;
+    }
+    lists.forEach(({
+      groupName
+    }) => {
+      if (groupName) {
+        items.push({
+          id: groupName,
+          text: groupName
+        });
+      }
+    });
+    return items;
+  }, [lists]);
+
+  /**
+   * Filters the lists by the FilterButtons
+   */
+  const activeList = (0, _react.useMemo)(() => {
+    let newLists = [];
+    if (groups[0] === 'all') {
+      newLists = lists;
+    } else {
+      lists.forEach(list => {
+        if (list.groupName && groups.includes(list.groupName)) {
+          newLists.push(list);
+        }
+      });
+    }
+    const newMatchingItems = [];
+    newLists.forEach(({
+      list,
+      groupName
+    }) => {
+      const newList = (0, _searchBox.searchList)({
+        items: list,
+        searchString: value
+      });
+      if (newList.length > 0) {
+        newMatchingItems.push({
+          groupName,
+          list: newList
+        });
+      }
+    });
+    if (newMatchingItems.length === 0 && shouldAddInputToList) {
+      newMatchingItems.push({
+        groupName: undefined,
+        list: []
+      });
+    }
+    const filteredMatchingListItems = newMatchingItems.map(({
+      list,
+      groupName
+    }) => ({
+      groupName,
+      list: list.filter(item => !(newMatchingItems.length === 1 && item.text === value))
+    }));
+    setMatchingListsItems(filteredMatchingListItems);
+    return newLists;
+  }, [groups, lists, shouldAddInputToList, value]);
+  const handleOpen = (0, _react.useCallback)(() => {
+    if (boxRef.current) {
+      const {
+        x,
+        y,
+        height: bodyHeight
+      } = boxRef.current.getBoundingClientRect();
+      setInternalCoordinates({
+        x,
+        y: y + bodyHeight
+      });
+      setIsAnimating(true);
+    }
+  }, []);
+  const handleClose = (0, _react.useCallback)(() => {
+    setIsAnimating(false);
+  }, []);
+  const handleFilterButtonsGroupSelect = keys => {
+    setGroups(keys.length === 0 ? ['all'] : keys);
+  };
+
+  /**
+   * This function closes the list of items
+   */
+  const handleOutsideClick = (0, _react.useCallback)(event => {
+    if (boxRef.current && !boxRef.current.contains(event.target) && contentRef.current && !contentRef.current.contains(event.target)) {
+      handleClose();
+    }
+  }, [handleClose]);
+
+  /**
+   * This hook listens for clicks
+   */
+  (0, _react.useEffect)(() => {
+    document.addEventListener('click', handleOutsideClick);
+    window.addEventListener('blur', () => handleClose());
+    return () => {
+      document.removeEventListener('click', handleOutsideClick);
+      window.addEventListener('blur', () => handleClose());
+    };
+  }, [handleOutsideClick, boxRef, handleClose]);
+
+  /**
+   * This hook calculates the height
+   */
+  (0, _react.useEffect)(() => {
+    const textArray = [];
+    activeList.forEach(({
+      list,
+      groupName
+    }) => {
+      list.forEach(({
+        text
+      }) => textArray.push(text));
+      if (!groupName) {
+        return;
+      }
+      textArray.push(groupName);
+    });
+    if (shouldAddInputToList && inputToListValue !== '') {
+      textArray.push(inputToListValue);
+    }
+    setHeight((0, _calculate.calculateContentHeight)(textArray));
+  }, [inputToListValue, activeList, placeholder, shouldAddInputToList]);
+
+  /**
+   * This hook calculates the width
+   */
+  (0, _react.useEffect)(() => {
+    const input = document.getElementById('search_box_input');
+    const getInputWidth = () => {
+      if (input) {
+        setWidth(input.offsetWidth);
+      }
+    };
+    if (input) {
+      new ResizeObserver(getInputWidth).observe(input);
+    }
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (selectedId) {
+      activeList.forEach(({
+        list
+      }) => {
+        const selectedItem = list.find(({
+          id
+        }) => id === selectedId);
+        if (selectedItem) {
+          setValue(selectedItem.text);
+          if (selectedItem.imageUrl) {
+            setSelectedImage(/*#__PURE__*/_react.default.createElement(_SearchBoxItem2.StyledSearchBoxItemImage, {
+              src: selectedItem.imageUrl,
+              $shouldShowRoundImage: shouldShowRoundImage
+            }));
+          }
+        }
+      });
+    }
+  }, [activeList, selectedId, shouldShowRoundImage]);
+
+  /**
+   * This hook resets the value if the selectedId changes to undefined. This is an own useEffect because the value
+   * should not be reset if the list changes and the selectedId is still undefined.
+   */
+  (0, _react.useEffect)(() => {
+    if (!selectedId) {
+      setValue('');
+    }
+  }, [selectedId]);
+
+  /**
+   * This function sets the items on focus if shouldShowContentOnEmptyInput
+   */
+  const handleFocus = (0, _react.useCallback)(() => {
+    if (shouldShowContentOnEmptyInput) {
+      const newMatchingItems = [];
+      activeList.forEach(({
+        list,
+        groupName
+      }) => {
+        const newList = (0, _searchBox.searchList)({
+          items: list,
+          searchString: value
+        });
+        if (newList.length > 0) {
+          newMatchingItems.push({
+            groupName,
+            list: newList
+          });
+        }
+      });
+      if (newMatchingItems.length === 0 && shouldAddInputToList) {
+        newMatchingItems.push({
+          groupName: undefined,
+          list: []
+        });
+      }
+      const filteredMatchingListItems = newMatchingItems.map(({
+        list,
+        groupName
+      }) => ({
+        groupName,
+        list: list.filter(item => !(newMatchingItems.length === 1 && item.text === value))
+      }));
+      setMatchingListsItems(filteredMatchingListItems);
+      if (filteredMatchingListItems.length !== 0) {
+        handleOpen();
+      } else {
+        handleClose();
+      }
+    }
+  }, [activeList, handleClose, handleOpen, shouldAddInputToList, shouldShowContentOnEmptyInput, value]);
+
+  /**
+   * This function filters the lists by input
+   */
+
+  (0, _react.useEffect)(() => {
+    const newMatchingItems = [];
+    activeList.forEach(({
+      list,
+      groupName
+    }) => {
+      const newList = (0, _searchBox.searchList)({
+        items: list,
+        searchString: value
+      });
+      if (newList.length > 0) {
+        newMatchingItems.push({
+          groupName,
+          list: newList
+        });
+      }
+    });
+    if (newMatchingItems.length === 0 && shouldAddInputToList) {
+      newMatchingItems.push({
+        groupName: undefined,
+        list: []
+      });
+    }
+    if (shouldAddInputToList && inputToListValue !== '') {
+      newMatchingItems.forEach(({
+        list
+      }) => {
+        list.forEach(({
+          text
+        }) => {
+          if (text.toLowerCase() === inputToListValue.toLowerCase()) {
+            setInputToListValue('');
+          }
+        });
+      });
+    }
+  }, [inputToListValue, activeList, shouldAddInputToList, shouldShowContentOnEmptyInput, value]);
+  const handleClick = (0, _react.useCallback)(() => {
+    if (isAnimating) {
+      handleClose();
+    } else {
+      handleOpen();
+    }
+  }, [handleClose, handleOpen, isAnimating]);
+  const rightElement = (0, _react.useMemo)(() => {
+    if (!shouldShowToggleIcon) {
+      return undefined;
+    }
+    return /*#__PURE__*/_react.default.createElement(_SearchBox.StyledSearchBoxIcon, {
+      onClick: handleClick
+    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      icons: ['fa fa-chevron-down'],
+      color: theme['006']
+    }));
+  }, [handleClick, shouldShowToggleIcon, theme]);
+
+  /**
+   * This function handles changes of the input
+   */
+  const handleChange = (0, _react.useCallback)(event => {
+    const filteredLists = [];
+    activeList.forEach(({
+      list,
+      groupName
+    }) => {
+      const newList = (0, _searchBox.searchList)({
+        items: list,
+        searchString: event.target.value
+      });
+      if (newList.length > 0) {
+        filteredLists.push({
+          groupName,
+          list: newList
+        });
+      }
+    });
+    if (filteredLists.length === 0 && shouldAddInputToList) {
+      filteredLists.push({
+        groupName: undefined,
+        list: []
+      });
+    }
+    setSelectedImage(undefined);
+    if (!shouldShowContentOnEmptyInput && !event.target.value) {
+      setMatchingListsItems([]);
+    } else {
+      setMatchingListsItems(filteredLists);
+      if (filteredLists.length !== 0) {
+        handleOpen();
+      } else {
+        handleClose();
+      }
+    }
+    setValue(event.target.value);
+    setInputToListValue(event.target.value);
+    if (typeof onChange === 'function') {
+      onChange(event);
+    }
+  }, [activeList, handleClose, handleOpen, onChange, shouldAddInputToList, shouldShowContentOnEmptyInput]);
+
+  /**
+   * This function handles the blur event of the input
+   */
+  const handleBlur = (0, _react.useCallback)(event => {
+    if (typeof onBlur === 'function') {
+      onBlur(event);
+    }
+  }, [onBlur]);
+
+  /**
+   * This function handles the item selection
+   */
+  const handleSelect = (0, _react.useCallback)(item => {
+    const newItem = {
+      ...item,
+      text: item.text.replace('<b>', '').replace('</b>', '').replace('</b', '')
+    };
+    setValue(newItem.text);
+    handleClose();
+    setSelectedImage(newItem.imageUrl ? /*#__PURE__*/_react.default.createElement(_SearchBoxItem2.StyledSearchBoxItemImage, {
+      src: newItem.imageUrl,
+      $shouldShowRoundImage: shouldShowRoundImage
+    }) : undefined);
+    setMatchingListsItems([]);
+    if (typeof onSelect === 'function') {
+      onSelect(newItem);
+    }
+  }, [handleClose, onSelect, shouldShowRoundImage]);
+  const content = (0, _react.useMemo)(() => {
+    const items = [];
+    matchingListsItems.forEach(({
+      groupName,
+      list
+    }, index) => {
+      if (hasMultipleGroups) {
+        if (list.length <= 0) {
+          return;
+        }
+        if (index !== 0) {
+          items.push(/*#__PURE__*/_react.default.createElement(_GroupName.default, {
+            key: groupName,
+            name: groupName ?? ''
+          }));
+        }
+      }
+      list.forEach(({
+        id,
+        text,
+        imageUrl
+      }) => {
+        items.push(/*#__PURE__*/_react.default.createElement(_SearchBoxItem.default, {
+          key: `${id}_${groupName ?? ''}`,
+          id: id,
+          text: text,
+          imageUrl: imageUrl,
+          shouldShowRoundImage: shouldShowRoundImage,
+          onSelect: handleSelect,
+          groupName: groupName
+        }));
+      });
+    });
+    if (shouldAddInputToList && inputToListValue !== '') {
+      items.push(/*#__PURE__*/_react.default.createElement(_SearchBoxItem.default, {
+        id: "input-value",
+        onSelect: handleSelect,
+        text: `<b>${inputToListValue}</b`
+      }));
+    }
+    return items;
+  }, [matchingListsItems, shouldAddInputToList, inputToListValue, hasMultipleGroups, shouldShowRoundImage, handleSelect]);
+  (0, _react.useEffect)(() => {
+    const handleKeyDown = e => {
+      if (!isAnimating) {
+        return;
+      }
+      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+        var _contentRef$current, _childrenArray$find;
+        e.preventDefault();
+        const children = (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.children;
+        if (!children) {
+          return;
+        }
+        const childrenArray = Array.from(children);
+        const newChildren = (_childrenArray$find = childrenArray.find(child => child.id.startsWith('searchbox-content__'))) === null || _childrenArray$find === void 0 ? void 0 : _childrenArray$find.children;
+        if (newChildren && newChildren.length > 0) {
+          const filteredChildren = Array.from(newChildren).filter(child => child.dataset.isgroupname !== 'true');
+          setFilteredChildrenArray(filteredChildren);
+          const newIndex = focusedIndex !== null ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + filteredChildren.length) % filteredChildren.length : 0;
+          if (focusedIndex !== null) {
+            const prevElement = filteredChildren[focusedIndex];
+            prevElement.tabIndex = -1;
+          }
+          setFocusedIndex(newIndex);
+          const newElement = filteredChildren[newIndex];
+          newElement.tabIndex = 0;
+          newElement.focus();
+        }
+      } else if (e.key === 'Enter' && focusedIndex !== null) {
+        if (filteredChildrenArray) {
+          var _element$children$;
+          const element = filteredChildrenArray[focusedIndex];
+          if (!element) {
+            return;
+          }
+          const {
+            id,
+            textContent
+          } = element;
+          let imageUrl;
+
+          // Just Ignore, it works
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          if ((_element$children$ = element.children[0]) !== null && _element$children$ !== void 0 && _element$children$.attributes.src) {
+            var _element$children$2;
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+            imageUrl = (_element$children$2 = element.children[0]) === null || _element$children$2 === void 0 ? void 0 : _element$children$2.attributes.src.nodeValue;
+          }
+          handleSelect({
+            id: id.replace('search-box-item__', ''),
+            text: textContent ?? '',
+            imageUrl
+          });
+        }
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [filteredChildrenArray, focusedIndex, handleSelect, isAnimating]);
+  const handleKeyPress = (0, _react.useCallback)(event => {
+    if (event.keyCode === 27) {
+      setMatchingListsItems([]);
+    }
+  }, []);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    clear: () => setValue('')
+  }), []);
+  (0, _react.useEffect)(() => {
+    document.addEventListener('keydown', handleKeyPress);
+    return () => {
+      document.addEventListener('keydown', handleKeyPress);
+    };
+  }, [handleKeyPress]);
+  (0, _react.useEffect)(() => {
+    setPortal(() => /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+      initial: false
+    }, isAnimating && /*#__PURE__*/_react.default.createElement(_SearchBoxBody.default, {
+      filterbuttons: filterbuttons,
+      selectedGroups: groups,
+      width: width,
+      coordinates: internalCoordinates,
+      browser: browser === null || browser === void 0 ? void 0 : browser.name,
+      height: height,
+      ref: contentRef,
+      onGroupSelect: handleFilterButtonsGroupSelect
+    }, content)), container));
+  }, [browser === null || browser === void 0 ? void 0 : browser.name, container, content, filterbuttons, groups, height, internalCoordinates, isAnimating, width]);
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_SearchBox.StyledSearchBox, {
+    ref: boxRef
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: "search_box_input"
+  }, /*#__PURE__*/_react.default.createElement(_Input.default, {
+    ref: inputRef,
+    onChange: handleChange,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    placeholder: placeholder,
+    onKeyDown: onKeyDown,
+    leftElement: selectedImage,
+    rightElement: rightElement,
+    value: value
+  })), portal), [handleBlur, handleChange, handleFocus, onKeyDown, placeholder, portal, rightElement, selectedImage, value]);
+});
+SearchBox.displayName = 'SearchBox';
+var _default = exports.default = SearchBox;
+//# sourceMappingURL=SearchBox.js.map