@activecollab/components/dist/esm/components/CommandPalette/CommandPalette.js

ActiveCollab Components

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["children", "onChangeSearch", "search", "mode", "setMode", "loading", "idModeEnabled"];
import React, { cloneElement, forwardRef, useMemo, useRef, useState } from "react";
import { StyledCommandPalette, StyledCommandPaletteWrapper } from "./CommandPalette.styles";
import { CommandPaletteCommandItem } from "./CommandPaletteCommandItem";
import { CommandPaletteHeader } from "./CommandPaletteHeader";
import { CommandPaletteItem } from "./CommandPaletteItem";
import { CommandPaletteList } from "./CommandPaletteList";
import { ModeContextProvider, SelectedContextProvider, SearchContextProvider } from "./context";
import { deepMap } from "../../utils/deepChildrenMap";
import { Dialog } from "../Dialog";
export const _CommandPalette = /*#__PURE__*/forwardRef((_ref, ref) => {
  let {
      children,
      onChangeSearch,
      search,
      mode,
      setMode,
      loading,
      idModeEnabled = false
    } = _ref,
    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
  const [selected, setSelected] = useState(0);
  const listWrapperRef = useRef(null);
  const scrollToTop = () => {
    var _listWrapperRef$curre;
    (_listWrapperRef$curre = listWrapperRef.current) == null || _listWrapperRef$curre.scrollTo({
      top: 0,
      behavior: "smooth"
    });
  };
  const scrollToBottom = () => {
    var _listWrapperRef$curre2;
    (_listWrapperRef$curre2 = listWrapperRef.current) == null || _listWrapperRef$curre2.scrollTo({
      top: listWrapperRef.current.scrollHeight,
      behavior: "smooth"
    });
  };
  const filterChildren = useMemo(() => {
    let itemsLength = 0;
    let commandsLength = 0;
    const items = deepMap(children, child => {
      const item = child;
      let clonedElement;
      if (item && item.type === CommandPaletteList) {
        clonedElement = /*#__PURE__*/cloneElement(item, _extends({}, item.props));
      }
      if (item && item.type === CommandPaletteCommandItem) {
        clonedElement = /*#__PURE__*/cloneElement(item, _extends({}, item.props, {
          index: itemsLength,
          selected
        }));
        itemsLength++;
        commandsLength++;
      }
      if (item && item.type === CommandPaletteItem) {
        clonedElement = /*#__PURE__*/cloneElement(item, _extends({}, item.props, {
          index: itemsLength,
          selected
        }));
        itemsLength++;
      }
      return clonedElement;
    });
    return {
      items,
      itemsLength,
      commandsLength
    };
  }, [children, selected]);
  const handleChangeSelected = direction => {
    const items = document.querySelectorAll(".cp-item");
    let index = 0;
    let newIndex = 0;
    let newItem = null;
    if (direction === "down") {
      items.forEach((_, i) => {
        if (i === selected) {
          index = i;
        }
      });
      newIndex = index === items.length - 1 ? 0 : index + 1;
    } else if (direction === "up") {
      items.forEach((_, i) => {
        if (i === selected) {
          index = i;
        }
      });
      newIndex = !index ? items.length - 1 : index - 1;
    } else {
      setSelected(0);
    }
    newItem = items[newIndex];
    if (newItem && typeof newIndex === "number") {
      setSelected(newIndex);
      newItem.scrollIntoView({
        behavior: "smooth",
        block: newIndex ? "center" : "end"
      });
    }
  };
  return /*#__PURE__*/React.createElement(Dialog, _extends({}, rest, {
    ref: ref,
    animate: "fade"
  }), /*#__PURE__*/React.createElement(SearchContextProvider, {
    value: {
      search,
      onChangeSearch
    }
  }, /*#__PURE__*/React.createElement(SelectedContextProvider, {
    value: {
      selected: selected,
      setSelected
    }
  }, /*#__PURE__*/React.createElement(StyledCommandPalette, {
    onKeyDown: e => {
      if (e.key === "ArrowDown") {
        e.preventDefault();
        handleChangeSelected("down");
      }
      if (e.key === "ArrowUp") {
        e.preventDefault();
        handleChangeSelected("up");
      }
      if (e.key === "End") {
        e.preventDefault();
        scrollToBottom();
        setSelected(filterChildren.itemsLength - 1);
      }
      if (e.key === "Home") {
        e.preventDefault();
        scrollToTop();
        setSelected(0);
      }
    }
  }, /*#__PURE__*/React.createElement(ModeContextProvider, {
    value: {
      mode,
      setMode,
      idModeEnabled
    }
  }, /*#__PURE__*/React.createElement(CommandPaletteHeader, {
    commandsLength: filterChildren.commandsLength,
    itemsLength: filterChildren.itemsLength,
    loading: loading
  })), /*#__PURE__*/React.createElement(StyledCommandPaletteWrapper, {
    ref: listWrapperRef
  }, filterChildren.items)))));
});
_CommandPalette.displayName = "CommandPalette";

// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34757
export const CommandPalette = Object.assign({}, _CommandPalette, {
  List: CommandPaletteList,
  Item: CommandPaletteItem,
  CommandItem: CommandPaletteCommandItem
});
//# sourceMappingURL=CommandPalette.js.map