@activecollab/components
Version:
ActiveCollab Components
138 lines • 4.51 kB
JavaScript
import React, { useEffect, useMemo, useRef } from "react";
import { StyledActionWrapper, StyledCommandPaletteHeader, StyledInput, StyledParameter, StyledSearchIcon, StyledSpinnerLoader } from "./CommandPalette.styles";
import { useSelectedContext } from "./context";
import { useModeContext } from "./context/ModeContext";
import { useSearchContext } from "./context/SearchContext";
import { IconButton } from "../IconButton";
import { CloseIcon, HashtagIcon, SearchLargeIcon } from "../Icons";
import { Tooltip } from "../Tooltip";
export const CommandPaletteHeader = _ref => {
let {
loading = false,
commandsLength,
itemsLength
} = _ref;
const inputRef = useRef(null);
const {
mode,
setMode,
idModeEnabled
} = useModeContext();
const {
setSelected,
selected
} = useSelectedContext();
const {
search,
onChangeSearch
} = useSearchContext();
const focusInput = () => {
if (inputRef && inputRef.current) {
inputRef.current.focus();
}
};
const clearInput = () => {
if (inputRef && inputRef.current) {
inputRef.current.value = "";
onChangeSearch("");
}
};
useEffect(() => {
if (search.length > 0) {
if (itemsLength > commandsLength) {
setSelected(commandsLength);
} else {
setSelected(0);
}
}
}, [search, commandsLength, itemsLength, setSelected]);
useEffect(() => {
focusInput();
}, [mode]);
const handleInputPlaceholder = useMemo(() => {
if (typeof mode === "object") {
return "Search";
}
if (mode === "id") {
return "1";
}
return "Search or jump to";
}, [mode]);
const handleKeyDown = e => {
if (e.key === "Backspace" && mode !== "default" && e.target.value === "") {
setMode("default");
clearInput();
}
if (e.key === "Enter") {
const selectedItem = document.querySelectorAll(".cp-item")[selected];
if (itemsLength > 0) {
selectedItem.click();
}
}
};
return /*#__PURE__*/React.createElement(StyledCommandPaletteHeader, {
className: "cp-header"
}, /*#__PURE__*/React.createElement(StyledSearchIcon, null, /*#__PURE__*/React.createElement(SearchLargeIcon, null)), mode === "id" ? /*#__PURE__*/React.createElement(StyledParameter, null, "ID#:") : null, typeof mode === "object" ? /*#__PURE__*/React.createElement(StyledParameter, null, mode.name.length > 10 ? mode.name.slice(0, 10) + "..." : mode.name, "/") : null, /*#__PURE__*/React.createElement(StyledInput, {
ref: inputRef,
autoFocus: true,
placeholder: handleInputPlaceholder,
type: "search",
"aria-autocomplete": "list",
autoCapitalize: "none",
autoComplete: "off",
autoCorrect: "off",
role: "combobox",
spellCheck: false,
value: search,
onKeyDown: handleKeyDown,
onChange: e => {
const inputText = e.target.value;
if (inputText.startsWith("#") && idModeEnabled && search.length === 0) {
setMode("id");
onChangeSearch(inputText.slice(1));
return;
}
onChangeSearch(inputText);
}
}), /*#__PURE__*/React.createElement(StyledActionWrapper, null, loading ? /*#__PURE__*/React.createElement(StyledSpinnerLoader, {
"aria-busy": true,
"aria-label": "Loading...",
"aria-valuemax": 100,
"aria-valuemin": 0,
role: "progressbar"
}) : null, mode !== "id" && typeof mode !== "object" && idModeEnabled && search.length === 0 ? /*#__PURE__*/React.createElement(Tooltip, {
title: "Search by ID",
placement: "top"
}, /*#__PURE__*/React.createElement(IconButton, {
onKeyPress: e => {
if (e.key === "Enter") {
setMode("id");
clearInput();
}
},
onClick: () => {
setMode("id");
clearInput();
},
variant: "text gray"
}, /*#__PURE__*/React.createElement(HashtagIcon, null))) : null, search.length > 0 || mode === "id" || typeof mode === "object" ? /*#__PURE__*/React.createElement(Tooltip, {
title: "Clear",
placement: "top"
}, /*#__PURE__*/React.createElement(IconButton, {
variant: "text gray",
onKeyPress: e => {
if (e.key === "Enter") {
setMode("default");
clearInput();
focusInput();
}
},
onClick: () => {
setMode("default");
clearInput();
focusInput();
}
}, /*#__PURE__*/React.createElement(CloseIcon, null))) : null));
};
CommandPaletteHeader.displayName = "CommandPaletteItem";
//# sourceMappingURL=CommandPaletteHeader.js.map