synapse-react-client/dist/containers/table/table-top/ColumnSelection.js

[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ColumnSelection = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var react_bootstrap_1 = require("react-bootstrap");
var ElementWithTooltip_1 = require("../../widgets/ElementWithTooltip");
var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
var unCamelCase_1 = require("../../../utils/functions/unCamelCase");
var tooltipColumnSelectionId = 'addAndRemoveColumns';
var ColumnSelection = function (props) {
    var headers = props.headers, isColumnSelected = props.isColumnSelected, toggleColumnSelection = props.toggleColumnSelection, darkTheme = props.darkTheme, facetAliases = props.facetAliases;
    var _a = (0, react_1.useState)(false), show = _a[0], setShow = _a[1];
    var onDropdownClick = function (_show, _event, metadata) {
        if (metadata.source === "rootClose") {
            setShow(false);
        }
        else {
            setShow(true);
        }
    };
    return (react_1.default.createElement(react_bootstrap_1.Dropdown, { as: "span", onToggle: function (show, event, metadata) {
            return onDropdownClick(show, event, metadata);
        }, show: show, drop: "down" },
        react_1.default.createElement(ElementWithTooltip_1.ElementWithTooltip, { idForToolTip: tooltipColumnSelectionId, tooltipText: 'Add / Remove Table Columns', icon: darkTheme ? "columnsdark" : "columns", darkTheme: darkTheme }),
        react_1.default.createElement(react_bootstrap_1.Dropdown.Menu, { className: "SRC-primary-color-hover-dropdown", alignRight: true }, headers === null || headers === void 0 ? void 0 : headers.map(function (header) {
            var name = header.name;
            var isCurrentColumnSelected = isColumnSelected.includes(name);
            var iconStyle = {
                width: '11px',
                marginRight: '10px',
                visibility: isCurrentColumnSelected ? undefined : 'hidden',
            };
            var maybeShowPrimaryColor = isCurrentColumnSelected
                ? 'SRC-primary-text-color'
                : '';
            return (react_1.default.createElement(react_bootstrap_1.Dropdown.Item
            // @ts-ignore
            , { 
                // @ts-ignore
                onClick: function () { return toggleColumnSelection(name); }, key: name },
                react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { style: iconStyle, className: maybeShowPrimaryColor, icon: "check" }),
                (0, unCamelCase_1.unCamelCase)(name, facetAliases)));
        }))));
};
exports.ColumnSelection = ColumnSelection;
//# sourceMappingURL=ColumnSelection.js.map