@actinc/dls
Version:
Design Language System (DLS) for ACT & Encoura front-end projects.
56 lines • 3.93 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);
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
* Copyright (c) ACT, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import { IconButton, Paper, TableBody, TableCell, TableHead, TableRow, Tooltip, } from '@mui/material';
import includes from 'lodash/includes';
import kebabCase from 'lodash/kebabCase';
import React from 'react';
import ChevronLeft from "../../../icons/ChevronLeft";
import CloseCircleOutline from "../../../icons/CloseCircleOutline";
import { StyledBox, StyledIconButton, StyledTable, StyledTableCell, StyledTableContainer, StyledTableRow, } from './styles';
export var RankSummary = function (_a) {
var boxContainerProps = _a.boxContainerProps, data = _a.data, idSubstring = _a.idSubstring, selectedPoint = _a.selectedPoint, setSelectedPoint = _a.setSelectedPoint, setShowSummary = _a.setShowSummary, _b = _a.showSummary, showSummary = _b === void 0 ? true : _b, tableContainerProps = _a.tableContainerProps;
var ref = React.useRef(null);
var stopPropagation = function (e) { return e.stopPropagation(); };
React.useEffect(function () {
if (ref.current) {
ref.current.addEventListener('wheel', stopPropagation);
}
return function () {
if (ref.current) {
ref.current.removeEventListener('wheel', stopPropagation);
}
};
}, [ref.current]);
return (_jsxs(StyledBox, __assign({ showSummary: showSummary }, boxContainerProps, { ref: ref, children: [!showSummary && (_jsx(Tooltip, { title: "Open Summary", children: _jsx(StyledIconButton, { "aria-label": "open summary", color: "secondary", id: "open-summary-".concat(kebabCase(idSubstring)), onClick: function () {
if (setShowSummary)
setShowSummary(true);
}, children: _jsx(ChevronLeft, {}) }) })), showSummary && (_jsx(StyledTableContainer, __assign({ component: Paper }, tableContainerProps, { children: _jsxs(StyledTable, { children: [_jsx(TableHead, { children: _jsx(TableRow, { children: _jsxs(StyledTableCell, { size: "small", children: ["Rank Summary", setShowSummary && (_jsx(IconButton, { "aria-label": "close summary", color: "secondary", id: "close-summary-".concat(kebabCase(idSubstring)), onClick: function () { return setShowSummary(false); }, sx: { float: 'right' }, children: _jsx(CloseCircleOutline, {}) }))] }) }) }), _jsx(TableBody, { children: data
.filter(function (d) { return !!d.label; })
.map(function (d, i) {
var _a;
var selectedLabelList = (_a = selectedPoint === null || selectedPoint === void 0 ? void 0 : selectedPoint.label) === null || _a === void 0 ? void 0 : _a.split(', ');
var isSelected = includes(selectedLabelList, d.label);
return (_jsxs(StyledTableRow, { onClick: function () {
if (setSelectedPoint)
setSelectedPoint(d);
}, children: [_jsx(TableCell, { sx: { width: '10px' }, children: i + 1 }), _jsx(TableCell, { sx: { opacity: selectedPoint && !isSelected ? 0.2 : 1 }, children: d.label })] }, d.label));
}) })] }) })))] })));
};
export default RankSummary;
//# sourceMappingURL=index.js.map