@activecollab/components
Version:
ActiveCollab Components
141 lines (140 loc) • 6.04 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CommandPaletteHeader = void 0;
var _react = _interopRequireWildcard(require("react"));
var _CommandPalette = require("./CommandPalette.styles");
var _context = require("./context");
var _IconButton = require("../IconButton");
var _Icons = require("../Icons");
var _Tooltip = require("../Tooltip");
var _ModeContext = require("./context/ModeContext");
var _SearchContext = require("./context/SearchContext");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var CommandPaletteHeader = exports.CommandPaletteHeader = function CommandPaletteHeader(_ref) {
var _ref$loading = _ref.loading,
loading = _ref$loading === void 0 ? false : _ref$loading,
commandsLength = _ref.commandsLength,
itemsLength = _ref.itemsLength;
var inputRef = (0, _react.useRef)(null);
var _useModeContext = (0, _ModeContext.useModeContext)(),
mode = _useModeContext.mode,
setMode = _useModeContext.setMode,
idModeEnabled = _useModeContext.idModeEnabled;
var _useSelectedContext = (0, _context.useSelectedContext)(),
setSelected = _useSelectedContext.setSelected,
selected = _useSelectedContext.selected;
var _useSearchContext = (0, _SearchContext.useSearchContext)(),
search = _useSearchContext.search,
onChangeSearch = _useSearchContext.onChangeSearch;
var focusInput = function focusInput() {
if (inputRef && inputRef.current) {
inputRef.current.focus();
}
};
var clearInput = function clearInput() {
if (inputRef && inputRef.current) {
inputRef.current.value = "";
onChangeSearch("");
}
};
(0, _react.useEffect)(function () {
if (search.length > 0) {
if (itemsLength > commandsLength) {
setSelected(commandsLength);
} else {
setSelected(0);
}
}
}, [search, commandsLength, itemsLength, setSelected]);
(0, _react.useEffect)(function () {
focusInput();
}, [mode]);
var handleInputPlaceholder = (0, _react.useMemo)(function () {
if (typeof mode === "object") {
return "Search";
}
if (mode === "id") {
return "1";
}
return "Search or jump to";
}, [mode]);
var handleKeyDown = function handleKeyDown(e) {
if (e.key === "Backspace" && mode !== "default" && e.target.value === "") {
setMode("default");
clearInput();
}
if (e.key === "Enter") {
var selectedItem = document.querySelectorAll(".cp-item")[selected];
if (itemsLength > 0) {
selectedItem.click();
}
}
};
return /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledCommandPaletteHeader, {
className: "cp-header"
}, /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledSearchIcon, null, /*#__PURE__*/_react.default.createElement(_Icons.SearchLargeIcon, null)), mode === "id" ? /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledParameter, null, "ID#:") : null, typeof mode === "object" ? /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledParameter, null, mode.name.length > 10 ? mode.name.slice(0, 10) + "..." : mode.name, "/") : null, /*#__PURE__*/_react.default.createElement(_CommandPalette.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: function onChange(e) {
var inputText = e.target.value;
if (inputText.startsWith("#") && idModeEnabled && search.length === 0) {
setMode("id");
onChangeSearch(inputText.slice(1));
return;
}
onChangeSearch(inputText);
}
}), /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledActionWrapper, null, loading ? /*#__PURE__*/_react.default.createElement(_CommandPalette.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.default.createElement(_Tooltip.Tooltip, {
title: "Search by ID",
placement: "top"
}, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
onKeyPress: function onKeyPress(e) {
if (e.key === "Enter") {
setMode("id");
clearInput();
}
},
onClick: function onClick() {
setMode("id");
clearInput();
},
variant: "text gray"
}, /*#__PURE__*/_react.default.createElement(_Icons.HashtagIcon, null))) : null, search.length > 0 || mode === "id" || typeof mode === "object" ? /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
title: "Clear",
placement: "top"
}, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
variant: "text gray",
onKeyPress: function onKeyPress(e) {
if (e.key === "Enter") {
setMode("default");
clearInput();
focusInput();
}
},
onClick: function onClick() {
setMode("default");
clearInput();
focusInput();
}
}, /*#__PURE__*/_react.default.createElement(_Icons.CloseIcon, null))) : null));
};
CommandPaletteHeader.displayName = "CommandPaletteItem";
//# sourceMappingURL=CommandPaletteHeader.js.map