@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
366 lines • 21.8 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (g && (g = 0, op[0] && (_ = 0)), _) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
import React, { useRef } from "react";
import { MultiSelect as BlueprintMultiSelect, } from "@blueprintjs/select";
import { removeExtraSpaces } from "../../common/utils/stringUtils.js";
import { CLASSPREFIX as eccgui } from "../../configuration/constants.js";
import { Highlighter, IconButton, MenuItem, OverflowText, Spinner } from "./../../index.js";
/**
* Element behaves very similar to `SuggestField` but allows multiple selections.
* Its value does not represent a string but a stack of objects.
*
* Example usage: input field for user created tags.
*
* Attention: there may be another `MultiSelect` component in future but this will be a re-implemented `Select` like element allowing multiple selections.
*/
export function MultiSuggestField(_a) {
var _this = this;
var items = _a.items, externalSelectedItems = _a.selectedItems, prePopulateWithItems = _a.prePopulateWithItems, itemId = _a.itemId, itemLabel = _a.itemLabel, onSelection = _a.onSelection, contextOverlayProps = _a.contextOverlayProps, tagInputProps = _a.tagInputProps, inputProps = _a.inputProps, runOnQueryChange = _a.runOnQueryChange, _b = _a.fullWidth, fullWidth = _b === void 0 ? true : _b, _c = _a.noResultText, noResultText = _c === void 0 ? "No results." : _c, _d = _a.newItemCreationText, newItemCreationText = _d === void 0 ? "Add new item" : _d, _e = _a.newItemPostfix, newItemPostfix = _e === void 0 ? " (new item)" : _e, disabled = _a.disabled, createNewItemFromQuery = _a.createNewItemFromQuery, _f = _a.requestDelay, requestDelay = _f === void 0 ? 0 : _f, _g = _a.clearQueryOnSelection, clearQueryOnSelection = _g === void 0 ? false : _g, className = _a.className, dataTestId = _a["data-test-id"], dataTestid = _a["data-testid"], wrapperProps = _a.wrapperProps, searchPredicate = _a.searchPredicate, limitHeightOpened = _a.limitHeightOpened, intent = _a.intent, otherMultiSelectProps = __rest(_a, ["items", "selectedItems", "prePopulateWithItems", "itemId", "itemLabel", "onSelection", "contextOverlayProps", "tagInputProps", "inputProps", "runOnQueryChange", "fullWidth", "noResultText", "newItemCreationText", "newItemPostfix", "disabled", "createNewItemFromQuery", "requestDelay", "clearQueryOnSelection", "className", "data-test-id", "data-testid", "wrapperProps", "searchPredicate", "limitHeightOpened", "intent"]);
// Options created by a user
var createdItems = useRef([]);
// Options passed ouside (f.e. from the backend)
var _h = __read(React.useState(__spreadArray([], __read(items), false)), 2), externalItems = _h[0], setExternalItems = _h[1];
// All options (created and passed) that match the query
var _j = __read(React.useState([]), 2), filteredItems = _j[0], setFilteredItems = _j[1];
// All options (created and passed) selected by a user
var _k = __read(React.useState(function () {
return prePopulateWithItems ? __spreadArray([], __read(items), false) : externalSelectedItems ? __spreadArray([], __read(externalSelectedItems), false) : [];
}), 2), selectedItems = _k[0], setSelectedItems = _k[1];
// Max height of the menu
var _l = __read(React.useState(null), 2), calculatedMaxHeight = _l[0], setCalculatedMaxHeight = _l[1];
//currently focused element in popover list
var _m = __read(React.useState(null), 2), focusedItem = _m[0], setFocusedItem = _m[1];
var _o = __read(React.useState(false), 2), showSpinner = _o[0], setShowSpinner = _o[1];
var inputRef = React.useRef(null);
var requestState = useRef({});
/** Update external items when they change
* e.g for auto-complete when query change
*/
React.useEffect(function () {
setExternalItems(items);
setFilteredItems(__spreadArray(__spreadArray([], __read(items), false), __read(createdItems.current), false));
}, [items.map(function (item) { return itemId(item); }).join("|")]);
React.useEffect(function () {
onSelection === null || onSelection === void 0 ? void 0 : onSelection({
newlySelected: selectedItems.slice(-1)[0],
createdItems: createdItems.current,
selectedItems: selectedItems,
});
}, [
onSelection,
selectedItems.map(function (item) { return itemId(item); }).join("|"),
createdItems.current.map(function (item) { return itemId(item); }).join("|"),
]);
/**
* Update selected items if we get new selected items from outside
*/
React.useEffect(function () {
if (!externalSelectedItems) {
return;
}
setSelectedItems(externalSelectedItems);
}, [externalSelectedItems === null || externalSelectedItems === void 0 ? void 0 : externalSelectedItems.map(function (item) { return itemId(item); }).join("|")]);
React.useEffect(function () {
var calculateMaxHeight = function () {
if (inputRef.current) {
// Get the height of the input target
var inputTargetHeight = inputRef.current.getBoundingClientRect().height;
// Calculate the menu dropdown by using the limited height reduced by the target height
setCalculatedMaxHeight("calc(".concat(maxHeightToProcess, "vh - ").concat(inputTargetHeight, "px)"));
}
};
var removeListener = function () {
window.removeEventListener("resize", calculateMaxHeight);
};
if (!limitHeightOpened || (typeof limitHeightOpened === "number" && limitHeightOpened > 100))
return removeListener;
var maxHeightToProcess = typeof limitHeightOpened === "number" ? limitHeightOpened : 100;
calculateMaxHeight();
window.addEventListener("resize", calculateMaxHeight);
return removeListener;
}, [limitHeightOpened, selectedItems]);
/**
* using the equality prop specified checks if an item has already been selected
* @param matcher
* @returns
*/
var itemHasBeenSelectedAlready = function (matcher) {
return !!selectedItems.find(function (item) { return itemId(item) === matcher; });
};
/**
* removes already selected item from the selectedItems
* @param matcher
*/
var removeItemSelection = function (matcher) {
var filteredItems = selectedItems.filter(function (item) { return itemId(item) !== matcher; });
setSelectedItems(filteredItems);
};
var defaultFilterPredicate = function (item, query) {
return itemLabel(item).toLowerCase().includes(query);
};
/**
* selects and deselects an item from selection list
* if the item exists it removes it instead
* @param item
*/
var onItemSelect = function (item) {
var _a, _b;
if (itemHasBeenSelectedAlready(itemId(item))) {
removeItemSelection(itemId(item));
}
else {
setSelectedItems(function (items) { return __spreadArray(__spreadArray([], __read(items), false), [item], false); });
}
if (clearQueryOnSelection) {
requestState.current.query = "";
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
}
else {
(_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.select();
}
};
/**
* search through item list using "label prop" and update the items popover
* @param query
*/
var onQueryChange = function (query) {
setFilteredItems([]);
if (query.length && query !== requestState.current.query) {
requestState.current.query = query;
if (requestState.current.timeoutId) {
clearTimeout(requestState.current.timeoutId);
}
var fn = function () { return __awaiter(_this, void 0, void 0, function () {
var resultFromQuery, _a, outsideOptions, filter_1;
return __generator(this, function (_b) {
switch (_b.label) {
case 0:
setShowSpinner(true);
setFilteredItems([]);
_a = runOnQueryChange;
if (!_a) return [3 /*break*/, 2];
return [4 /*yield*/, runOnQueryChange(removeExtraSpaces(query))];
case 1:
_a = (_b.sent());
_b.label = 2;
case 2:
resultFromQuery = _a;
if (requestState.current.query === query) {
outsideOptions = __spreadArray([], __read((resultFromQuery !== null && resultFromQuery !== void 0 ? resultFromQuery : externalItems)), false);
filter_1 = searchPredicate !== null && searchPredicate !== void 0 ? searchPredicate : defaultFilterPredicate;
setFilteredItems(__spreadArray(__spreadArray([], __read(outsideOptions), false), __read(createdItems.current), false).filter(function (item) { return filter_1(item, query.toLowerCase()); }));
setShowSpinner(false);
}
return [2 /*return*/];
}
});
}); };
requestState.current.timeoutId = window.setTimeout(fn, requestDelay && requestDelay > 0 ? requestDelay : 0);
}
else if (!query.length) {
// if the query is empty we need to show all options and reset current query
requestState.current.query = "";
setFilteredItems(function () { return __spreadArray(__spreadArray([], __read(externalItems), false), __read(createdItems.current), false); });
}
};
// Renders the entries of the (search) options list
var optionRenderer = function (label) {
return React.createElement(Highlighter, { label: label, searchValue: requestState.current.query });
};
/**
* defines how an item in the item list is displayed
*/
var onItemRenderer = function (item, _a) {
var handleClick = _a.handleClick, modifiers = _a.modifiers;
if (!modifiers.matchesPredicate) {
return null;
}
var label = itemLabel(item);
if (createdItems.current.find(function (created) { return itemId(created) === itemId(item); })) {
label += newItemPostfix;
}
return (React.createElement(MenuItem, { active: modifiers.active, key: itemId(item), icon: itemHasBeenSelectedAlready(itemId(item)) ? "state-checked" : "state-unchecked", onClick: handleClick, text: optionRenderer(label), shouldDismissPopover: false }));
};
/**
* clear all selected items in the multi-select input
*/
var handleClear = function () {
requestState.current.query = "";
setSelectedItems([]);
setFilteredItems(__spreadArray(__spreadArray([], __read(externalItems), false), __read(createdItems.current), false));
};
/**
* remove a specific item from the multi-select input
* @param label
* @param index
*/
var removeTagFromSelectionViaIndex = function (_label, index) {
setSelectedItems(__spreadArray(__spreadArray([], __read(selectedItems.slice(0, index)), false), __read(selectedItems.slice(index + 1)), false));
};
/**
* Utility function to create a new Item. createNewItemFromQuery is assumed to be defined!
*/
var createNewItem = function (query) {
var newItem = createNewItemFromQuery(query);
//set new items
createdItems.current = __spreadArray(__spreadArray([], __read(createdItems.current), false), [newItem], false);
setFilteredItems(function (items) { return __spreadArray(__spreadArray([], __read(items), false), [newItem], false); });
requestState.current.query = "";
return newItem;
};
/**
* added functionality to create new item when there are no matching items on enter keypress
* @param event
*/
var handleOnKeyUp = function (event) {
var _a;
if (event.key === "Enter" && !filteredItems.length && !!requestState.current.query && createNewItemFromQuery) {
createNewItem(requestState.current.query);
}
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
};
/**
* added functionality to either create new item
* when there are no matching items or select an item on tab keypress
* @param event
*/
var handleOnKeyDown = function (event) {
if (event.key === "Tab" && !!requestState.current.query) {
event.preventDefault();
if (focusedItem) {
onItemSelect(focusedItem);
}
else {
onItemSelect(createNewItem(requestState.current.query));
}
requestState.current.query = "";
setTimeout(function () { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
}
};
/**
* create new item handler, displays the new item selector and creates a new item when selected
* @param label '
* @param active
* @param handleClick
* @returns
*/
var newItemRenderer = function (label, active, handleClick) {
if (!createNewItemFromQuery)
return undefined;
var clickHandler = function (e) {
createNewItem(label);
handleClick(e);
};
return (React.createElement(MenuItem, { id: "new-item", icon: "item-add-artefact", active: active, key: label, onClick: clickHandler, text: React.createElement(OverflowText, null, "".concat(newItemCreationText, " '").concat(label, "'")) }));
};
// Clear button and spinner are both shown as "right element"
var clearButton = selectedItems.length > 0 ? (React.createElement(IconButton, { disabled: disabled, name: "operation-clear", "data-test-id": dataTestId ? dataTestId + "_clearance" : undefined, "data-testid": dataTestid ? dataTestid + "_clearance" : undefined, onClick: handleClear })) : undefined;
var spinnerProps = showSpinner
? {
rightElement: React.createElement(Spinner, { position: "inline", size: "tiny" }),
}
: {};
var contentMultiSelect = (React.createElement(BlueprintMultiSelect, __assign({ placeholder: !otherMultiSelectProps.placeholder && createNewItemFromQuery
? "Search for item, or enter term to create new one..."
: undefined }, otherMultiSelectProps, { query: requestState.current.query, onQueryChange: onQueryChange, items: filteredItems, onItemSelect: onItemSelect, itemRenderer: onItemRenderer, itemsEqual: function (a, b) { return itemId(a) === itemId(b); }, selectedItems: selectedItems, noResults: React.createElement(MenuItem, { disabled: true, text: noResultText }), tagRenderer: function (item) { return itemLabel(item); }, createNewItemRenderer: newItemRenderer, onActiveItemChange: function (activeItem) { return setFocusedItem(activeItem); }, fill: fullWidth, createNewItemFromQuery: createNewItemFromQuery, disabled: disabled, tagInputProps: __assign(__assign({ inputProps: __assign({ id: "item", autoComplete: "off", "data-test-id": dataTestId ? dataTestId + "_searchinput" : undefined, "data-testid": dataTestid ? dataTestid + "_searchinput" : undefined }, inputProps), className: "".concat(eccgui, "-multisuggestfield ").concat(eccgui, "-multiselect") + (className ? " ".concat(className) : ""), fill: fullWidth, inputRef: inputRef, intent: intent, addOnBlur: true, onKeyDown: handleOnKeyDown, onKeyUp: handleOnKeyUp, onRemove: removeTagFromSelectionViaIndex, rightElement: (React.createElement(React.Fragment, null, clearButton !== null && clearButton !== void 0 ? clearButton : null,
otherMultiSelectProps.openOnKeyDown !== true && (React.createElement(IconButton, { disabled: disabled, name: "toggler-caretdown", "data-test-id": dataTestId ? dataTestId + "_toggler" : undefined, "data-testid": dataTestid ? dataTestid + "_toggler" : undefined })))), tagProps: { minimal: true }, disabled: disabled }, tagInputProps), spinnerProps), popoverTargetProps: {
className: "".concat(eccgui, "-multiselect__target"),
}, popoverProps: __assign({ minimal: true, placement: "bottom-start", matchTargetWidth: fullWidth }, contextOverlayProps), popoverContentProps: {
"data-test-id": dataTestId ? dataTestId + "_drowpdown" : undefined,
"data-testid": dataTestid ? dataTestid + "_dropdown" : undefined,
style: calculatedMaxHeight
? {
"--eccgui-multisuggestfield-max-height": "".concat(calculatedMaxHeight),
}
: undefined,
} })));
return wrapperProps || dataTestId || dataTestid ? (React.createElement("div", __assign({ className: "".concat(eccgui, "-multiselect__wrapper") }, (wrapperProps !== null && wrapperProps !== void 0 ? wrapperProps : {}), { "data-test-id": dataTestId, "data-testid": dataTestid }), contentMultiSelect)) : (React.createElement(React.Fragment, null, contentMultiSelect));
}
// we still return the Blueprint element here because it was already used like that
/**
* @deprecated (v26) use directly <MultiSuggestField<TYPE>> (`ofType` also returns the original BlueprintJS element, not ours!)
*/
MultiSuggestField.ofType = BlueprintMultiSelect.ofType;
export default MultiSuggestField;
//# sourceMappingURL=MultiSelect.js.map