synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
212 lines • 13.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.EnumFacetFilter = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var fontawesome_svg_core_1 = require("@fortawesome/fontawesome-svg-core");
var free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
var react_bootstrap_1 = require("react-bootstrap");
var use_deep_compare_effect_1 = (0, tslib_1.__importDefault)(require("use-deep-compare-effect"));
var ElementWithTooltip_1 = require("../../../containers/widgets/ElementWithTooltip");
var utils_1 = require("../../../utils");
var useGetInfoFromIds_1 = (0, tslib_1.__importDefault)(require("../../../utils/hooks/useGetInfoFromIds"));
var Checkbox_1 = require("../Checkbox");
var FacetFilterHeader_1 = require("./FacetFilterHeader");
var core_1 = require("@material-ui/core");
fontawesome_svg_core_1.library.add(free_solid_svg_icons_1.faArrowLeft);
function valueToId(value) {
return value.replace(/\s/g, '').toLowerCase();
}
function valueToLabel(facet, profiles, entityHeaders) {
if (profiles === void 0) { profiles = []; }
if (entityHeaders === void 0) { entityHeaders = []; }
var value = facet.value;
var displayValue = value;
if (value === utils_1.SynapseConstants.VALUE_NOT_SET) {
displayValue = utils_1.SynapseConstants.FRIENDLY_VALUE_NOT_SET;
}
var profile = profiles.find(function (profile) { return profile.ownerId === value; });
if (profile) {
displayValue = profile ? profile.userName : "unknown (" + value + ")";
}
var eh = entityHeaders.find(function (eh) { return eh.id === value; });
if (eh) {
displayValue = eh ? eh.name : "unknown (" + value + ")";
}
return "" + displayValue;
}
function formatFacetValuesForDisplay(facetValues, isShowAll, visibleItemsCount) {
//sort facets by count
var facets = (0, tslib_1.__spreadArray)([], facetValues.sort(function (a, b) { return b.count - a.count; }), true);
if (isShowAll || facets.length <= visibleItemsCount) {
return facets;
}
else {
//if we are not hiding elected facets
if (facets.slice(visibleItemsCount).find(function (item) { return item.isSelected; })) {
return facets;
}
else {
return facets.splice(0, visibleItemsCount);
}
}
}
/************* QUERY ENUM CONMPONENT *************/
var EnumFacetFilter = function (_a) {
var facetValues = _a.facetValues, columnModel = _a.columnModel, onClear = _a.onClear, onChange = _a.onChange, facetAliases = _a.facetAliases, _b = _a.containerAs, containerAs = _b === void 0 ? 'Collapsible' : _b, _c = _a.dropdownType, dropdownType = _c === void 0 ? 'Icon' : _c, _d = _a.collapsed, collapsed = _d === void 0 ? false : _d;
var _e = (0, react_1.useState)(false), isShowAll = _e[0], setIsShowAll = _e[1];
var _f = (0, react_1.useState)(collapsed), isCollapsed = _f[0], setIsCollapsed = _f[1];
var _g = (0, react_1.useState)(false), isShowDropdown = _g[0], setIsShowDropdown = _g[1];
var _h = (0, react_1.useState)(false), showSearch = _h[0], setShowSearch = _h[1];
var _j = (0, react_1.useState)(''), searchTerm = _j[0], setSearchText = _j[1];
var _k = (0, react_1.useState)(facetValues), filteredSet = _k[0], setFilteredSet = _k[1];
(0, use_deep_compare_effect_1.default)(function () {
setFilteredSet(facetValues);
}, [facetValues]);
var visibleItemsCount = 5;
var selectionDelay = 1500; // in ms
var textInput = react_1.default.createRef();
var selectedValuesMap = {};
var timer;
var allIsSelected = facetValues.filter(function (item) { return item.isSelected; }).length === 0;
var userIds = (columnModel === null || columnModel === void 0 ? void 0 : columnModel.columnType) === 'USERID'
? facetValues.map(function (facet) { return facet.value; })
: [];
var userProfiles = (0, useGetInfoFromIds_1.default)({
ids: userIds,
type: 'USER_PROFILE',
});
var entityIds = (columnModel === null || columnModel === void 0 ? void 0 : columnModel.columnType) === 'ENTITYID'
? facetValues.map(function (facet) { return facet.value; })
: [];
var entityHeaders = (0, useGetInfoFromIds_1.default)({
ids: entityIds,
type: 'ENTITY_HEADER',
});
var handleTextInputFilterEvent = function (e) {
var inputValue = e.target.value;
setSearchText(inputValue);
setIsShowAll(true); // While in filter search mode, display all filtered values
if (!inputValue) {
// if input field is empty, display all facet values
facetValues.forEach(function (obj) {
obj.isSelected = false;
});
setFilteredSet(facetValues);
}
else {
// display only facet values that contain text from the text input field
var filtered = facetValues.filter(function (obj) {
var label = valueToLabel(obj, userProfiles, entityHeaders);
return label.toLowerCase().indexOf(inputValue.trim().toLowerCase()) > -1
? obj
: null;
});
setFilteredSet(filtered);
}
};
if (!columnModel) {
return react_1.default.createElement(react_1.default.Fragment, null);
}
var isDropdown = containerAs === 'Dropdown';
var content = (react_1.default.createElement("div", { className: isDropdown ? 'EnumFacetFilter__dropdown_menu' : '' },
react_1.default.createElement("div", { className: "EnumFacetFilter__checkboxContainer--forAll" },
react_1.default.createElement("div", { className: showSearch
? 'EnumFacetFilter__search active'
: 'EnumFacetFilter__search' },
react_1.default.createElement("button", { className: "EnumFacetFilter__closeSearch", onClick: function () {
setFilteredSet(facetValues);
setShowSearch(false);
setIsShowAll(false);
} },
react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { className: "EnumFacetFilter__previous", icon: free_solid_svg_icons_1.faArrowLeft })),
searchTerm.length > 0 && (react_1.default.createElement("button", { className: "EnumFacetFilter__resetSearch", onClick: function () {
var _a;
setSearchText('');
(_a = textInput.current) === null || _a === void 0 ? void 0 : _a.focus();
} },
react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { className: "EnumFacetFilter__reset", icon: 'times' }))),
react_1.default.createElement("input", { type: "text", placeholder: "Find values", value: searchTerm, ref: textInput, onChange: function (e) {
handleTextInputFilterEvent(e);
} })),
!showSearch && (react_1.default.createElement("div", { className: "EnumFacetFilter__checkAll" },
react_1.default.createElement(Checkbox_1.Checkbox, { className: "EnumFacetFilter__checkbox", onChange: function () {
onClear();
}, key: "select_all", checked: allIsSelected, label: "All", isSelectAll: true }),
react_1.default.createElement("button", { className: "EnumFacetFilter__searchbtn", onClick: function () {
var _a;
setSearchText('');
setShowSearch(true);
(_a = textInput.current) === null || _a === void 0 ? void 0 : _a.focus();
} },
react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { className: "EnumFacetFilter__searchicon", icon: 'search' }))))),
react_1.default.createElement("div", null,
filteredSet.length > 0 &&
formatFacetValuesForDisplay(filteredSet, isShowAll || isDropdown, visibleItemsCount).map(function (facet, index) { return (react_1.default.createElement(EnumFacetFilterOption, { key: "checkLabel" + index, id: valueToId(facet.value), index: index, label: valueToLabel(facet, userProfiles, entityHeaders), count: facet.count, isDropdown: isDropdown, initialIsSelected: facet.isSelected, onChange: function (isChecked) {
selectedValuesMap[facet.value] = isChecked;
clearTimeout(timer);
timer = setTimeout(function () {
onChange(selectedValuesMap);
setIsShowDropdown(false);
}, selectionDelay);
} })); }),
!isDropdown && (react_1.default.createElement(react_1.default.Fragment, null,
!isShowAll && filteredSet.length > visibleItemsCount && (react_1.default.createElement("button", { className: "EnumFacetFilter__showMoreFacetsBtn", onClick: function () { return setIsShowAll(true); } },
react_1.default.createElement("div", { className: "EnumFacetFilter__checkboxContainer" },
react_1.default.createElement("div", { className: "EnumFacetFilter__showMoreFacetsLabel" }, "Show more"),
react_1.default.createElement("div", { className: "EnumFacetFilter__howMoreFacetsCount" }, filteredSet.length)))),
isShowAll && filteredSet.length > visibleItemsCount && (react_1.default.createElement("button", { className: "EnumFacetFilter__showMoreFacetsBtn", onClick: function () { return setIsShowAll(false); } },
react_1.default.createElement("div", { className: "EnumFacetFilter__checkboxContainer" },
react_1.default.createElement("div", { className: "EnumFacetFilter__showMoreFacetsLabel" }, "Show Less")))))),
filteredSet.length <= 0 && (react_1.default.createElement("div", { className: "EnumFacetFilter__noMatch" }, "No match found")))));
var onToggle = function () { return setIsShowDropdown(!isShowDropdown); };
if (isDropdown) {
if (dropdownType === 'SelectBox') {
return (react_1.default.createElement(react_bootstrap_1.Dropdown, { className: 'EnumFacetFilter EnumFacetFilterSelect', show: isShowDropdown, onToggle: onToggle },
react_1.default.createElement(react_bootstrap_1.Dropdown.Toggle, { className: "secondary-caret", variant: "gray-select" },
allIsSelected && 'All',
!allIsSelected &&
facetValues.filter(function (item) { return item.isSelected; }).length === 1 &&
facetValues.filter(function (item) { return item.isSelected; })[0].value,
!allIsSelected &&
facetValues.filter(function (item) { return item.isSelected; }).length > 1 &&
'Multiple Values Selected'),
react_1.default.createElement(react_bootstrap_1.Dropdown.Menu, null, content)));
}
else {
return (react_1.default.createElement(react_bootstrap_1.Dropdown, { className: "EnumFacetFilter", show: isShowDropdown, onToggle: onToggle },
react_1.default.createElement(ElementWithTooltip_1.ElementWithTooltip, { idForToolTip: "facetFilterTooltip", tooltipText: "Filter by specific facet", key: "facetFilterTooltip", darkTheme: false, icon: 'filter' }),
react_1.default.createElement(react_bootstrap_1.Dropdown.Menu, null, content)));
}
}
else {
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(FacetFilterHeader_1.FacetFilterHeader, { facetAliases: facetAliases, isCollapsed: isCollapsed, label: columnModel.name, onClick: function (isCollapsed) { return setIsCollapsed(isCollapsed); } }),
react_1.default.createElement(core_1.Collapse, { className: "EnumFacetFilter", in: !isCollapsed }, content)));
}
};
exports.EnumFacetFilter = EnumFacetFilter;
function EnumFacetFilterOption(_a) {
var id = _a.id, index = _a.index, label = _a.label, count = _a.count, isDropdown = _a.isDropdown, initialIsSelected = _a.initialIsSelected, onChange = _a.onChange;
var _b = (0, react_1.useState)(initialIsSelected), isSelected = _b[0], setIsSelected = _b[1];
react_1.default.useEffect(function () {
setIsSelected(initialIsSelected);
}, [initialIsSelected]);
return (react_1.default.createElement("div", { className: "EnumFacetFilter__checkboxContainer", onClick: function () {
if (isDropdown) {
setIsSelected(!isSelected);
onChange(!isSelected);
}
} },
react_1.default.createElement(Checkbox_1.Checkbox, { className: "EnumFacetFilter__checkbox", onClick: function (event) { return event.stopPropagation(); }, onChange: function (newValue) {
setIsSelected(newValue);
onChange(newValue);
}, key: id + index, checked: isSelected, label: label }),
isDropdown && react_1.default.createElement("span", { className: "EnumFacetFilter__count" },
"(",
count,
")"),
!isDropdown && react_1.default.createElement("div", { className: "EnumFacetFilter__count" }, count)));
}
//# sourceMappingURL=EnumFacetFilter.js.map