@activecollab/components
Version:
ActiveCollab Components
142 lines (141 loc) • 6.22 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 _ModeContext = require("./context/ModeContext");
var _SearchContext = require("./context/SearchContext");
var _IconButton = require("../IconButton");
var _Icons = require("../Icons");
var _Tooltip = require("../Tooltip");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 && Object.prototype.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; }
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