synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
177 lines • 10.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var react_tooltip_1 = (0, tslib_1.__importDefault)(require("react-tooltip"));
var SynapseTableConstants_1 = require("./table/SynapseTableConstants");
var icons_1 = require("@material-ui/icons");
var AccountCertified_1 = (0, tslib_1.__importDefault)(require("../assets/mui_components/AccountCertified"));
var AccountRegistered_1 = (0, tslib_1.__importDefault)(require("../assets/mui_components/AccountRegistered"));
var AccountValidated_1 = (0, tslib_1.__importDefault)(require("../assets/mui_components/AccountValidated"));
var Chromatin_1 = (0, tslib_1.__importDefault)(require("../assets/mui_components/Chromatin"));
var Data_1 = (0, tslib_1.__importDefault)(require("../assets/mui_components/Data"));
var DataLocked_1 = (0, tslib_1.__importDefault)(require("../assets/mui_components/DataLocked"));
var GeneExpression_1 = (0, tslib_1.__importDefault)(require("../assets/mui_components/GeneExpression"));
var GeneVariants_1 = (0, tslib_1.__importDefault)(require("../assets/mui_components/GeneVariants"));
var Clinical_1 = (0, tslib_1.__importDefault)(require("../assets/mui_components/Clinical"));
var Imaging_1 = (0, tslib_1.__importDefault)(require("../assets/mui_components/Imaging"));
var LineGraph_1 = (0, tslib_1.__importDefault)(require("../assets/mui_components/LineGraph"));
var Rat_1 = (0, tslib_1.__importDefault)(require("../assets/mui_components/Rat"));
var Kinomics_1 = (0, tslib_1.__importDefault)(require("../assets/mui_components/Kinomics"));
var Login_1 = (0, tslib_1.__importDefault)(require("../assets/mui_components/Login"));
var Proteomics_1 = (0, tslib_1.__importDefault)(require("../assets/mui_components/Proteomics"));
var Other_1 = (0, tslib_1.__importDefault)(require("../assets/mui_components/Other"));
var PackagableFile_1 = (0, tslib_1.__importDefault)(require("../assets/mui_components/PackagableFile"));
var Docker_1 = (0, tslib_1.__importDefault)(require("../assets/mui_components/Docker"));
var getIcon = function (options) {
var icon = options.icon, color = options.color;
// Styles for svg imported from mui
var muiSvgStyle = {
color: color,
verticalAlign: 'middle',
};
// Styles for custom svg missing from mui
var customSvgStyle = {
fill: color,
color: color,
verticalAlign: 'middle',
};
switch (icon) {
case 'arrowBack':
return react_1.default.createElement(icons_1.ArrowBackIos, { style: muiSvgStyle });
case 'arrowForward':
return react_1.default.createElement(icons_1.ArrowForwardIos, { style: muiSvgStyle });
case 'check':
return react_1.default.createElement(icons_1.Check, { style: muiSvgStyle });
case 'clear':
return react_1.default.createElement(icons_1.Clear, { style: muiSvgStyle });
case 'cart':
return react_1.default.createElement(icons_1.ShoppingCartOutlined, { style: muiSvgStyle });
case 'code':
return react_1.default.createElement(icons_1.Code, { style: muiSvgStyle });
case 'dashboard':
return react_1.default.createElement(icons_1.DashboardTwoTone, { style: muiSvgStyle });
case 'delete':
return react_1.default.createElement(icons_1.Delete, { style: muiSvgStyle });
case 'addToCart':
return react_1.default.createElement(icons_1.AddShoppingCart, { style: muiSvgStyle });
case 'addCircleOutline':
return react_1.default.createElement(icons_1.AddCircleOutline, { style: muiSvgStyle });
case 'addCircleTwoTone':
return react_1.default.createElement(icons_1.AddCircleTwoTone, { style: muiSvgStyle });
case 'reload':
return react_1.default.createElement(icons_1.Cached, { style: muiSvgStyle });
case 'photoCamera':
return react_1.default.createElement(icons_1.PhotoCameraOutlined, { style: muiSvgStyle });
case 'info':
return (react_1.default.createElement(icons_1.InfoOutlined, { fontSize: 'small', style: muiSvgStyle }));
case 'favTwoTone':
return react_1.default.createElement(icons_1.StarTwoTone, { style: muiSvgStyle });
case 'fav':
return react_1.default.createElement(icons_1.Star, { style: muiSvgStyle });
case 'peopleTwoTone':
return react_1.default.createElement(icons_1.PeopleTwoTone, { style: muiSvgStyle });
case 'challengesTwoTone':
return react_1.default.createElement(icons_1.AssessmentTwoTone, { style: muiSvgStyle });
case 'download':
return react_1.default.createElement(icons_1.GetAppTwoTone, { style: muiSvgStyle });
case 'searchOutlined':
return react_1.default.createElement(icons_1.SearchOutlined, { style: muiSvgStyle });
case 'searchTwoTone':
return react_1.default.createElement(icons_1.SearchTwoTone, { style: muiSvgStyle });
case 'time':
return react_1.default.createElement(icons_1.WatchLater, { style: muiSvgStyle });
case 'login':
return react_1.default.createElement(Login_1.default, { fill: color, style: customSvgStyle });
case 'helpOutlined':
return react_1.default.createElement(icons_1.HelpOutlined, { style: muiSvgStyle });
case 'expandLess':
return react_1.default.createElement(icons_1.ExpandLess, { fontSize: 'small', style: muiSvgStyle });
case 'expandMore':
return react_1.default.createElement(icons_1.ExpandMore, { fontSize: 'small', style: muiSvgStyle });
case 'rat':
return react_1.default.createElement(Rat_1.default, { fill: color, style: customSvgStyle });
case 'chromatin':
return react_1.default.createElement(Chromatin_1.default, { fill: color, style: customSvgStyle });
case 'clinical':
return react_1.default.createElement(Clinical_1.default, { fill: color, style: customSvgStyle });
case 'data':
return react_1.default.createElement(Data_1.default, { fill: color, style: customSvgStyle });
case 'dataLocked':
return react_1.default.createElement(DataLocked_1.default, { fill: color, style: customSvgStyle });
case 'geneExpression':
return (react_1.default.createElement(GeneExpression_1.default, { fill: color, style: customSvgStyle }));
case 'geneVariants':
return react_1.default.createElement(GeneVariants_1.default, { fill: color, style: customSvgStyle });
case 'imaging':
return react_1.default.createElement(Imaging_1.default, { fill: color, style: customSvgStyle });
case 'lineGraph':
return react_1.default.createElement(LineGraph_1.default, { fill: color, style: customSvgStyle });
case 'kinomics':
customSvgStyle.fill = 'none';
return (react_1.default.createElement(Kinomics_1.default, { fill: color ? color : 'currentColor', style: customSvgStyle }));
case 'proteomics':
customSvgStyle.fill = 'none';
return (react_1.default.createElement(Proteomics_1.default, { fill: color ? color : 'currentColor', style: customSvgStyle }));
case 'packagableFile':
customSvgStyle.fill = 'none';
return (react_1.default.createElement(PackagableFile_1.default, { fill: color ? color : 'currentColor', style: customSvgStyle }));
case 'other':
return react_1.default.createElement(Other_1.default, { fill: color, style: customSvgStyle });
case 'wiki':
return react_1.default.createElement(icons_1.LanguageTwoTone, { style: muiSvgStyle });
case 'file':
return react_1.default.createElement(icons_1.InsertDriveFileTwoTone, { style: muiSvgStyle });
case 'table':
return react_1.default.createElement(icons_1.TableChartTwoTone, { style: muiSvgStyle });
case 'challenge':
return react_1.default.createElement(icons_1.AssessmentTwoTone, { style: muiSvgStyle });
case 'discussion':
return react_1.default.createElement(icons_1.QuestionAnswerTwoTone, { style: muiSvgStyle });
case 'dataset':
return react_1.default.createElement(icons_1.GridOnTwoTone, { style: muiSvgStyle });
case 'docker':
return (react_1.default.createElement(Docker_1.default, { fill: color ? color : 'currentColor', style: customSvgStyle }));
case 'accountCertified':
return react_1.default.createElement(AccountCertified_1.default, null);
case 'accountRegistered':
return react_1.default.createElement(AccountRegistered_1.default, null);
case 'accountValidated':
return react_1.default.createElement(AccountValidated_1.default, null);
case 'warningOutlined':
return react_1.default.createElement(icons_1.ReportProblemOutlined, { style: muiSvgStyle });
case 'removeCircle':
return react_1.default.createElement(icons_1.RemoveCircleTwoTone, { style: muiSvgStyle });
default:
return react_1.default.createElement(react_1.default.Fragment, null);
}
};
var IconSvg = function (props) {
var options = props.options;
var icon = options.icon, color = options.color, padding = options.padding, label = options.label;
var mounted = true;
// Do not set inline style unless it is specified because it's hard to override
var getPadding = function (padding) {
if (padding === 'left') {
return { paddingLeft: '0.2rem' };
}
if (padding === 'right') {
return { paddingRight: '0.2rem' };
}
return {};
};
var wrapperCss = getPadding(padding);
(0, react_1.useEffect)(function () {
if (mounted) {
//
}
return function () {
mounted = false;
};
}, [icon, color]);
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("span", { "data-svg": icon, className: "styled-svg-wrapper", style: wrapperCss, id: "icon-" + icon, "data-for": "icon-" + icon, "data-tip": label }, getIcon(options)),
label && (react_1.default.createElement(react_tooltip_1.default, { className: 'icon-svg-tooltip', delayShow: SynapseTableConstants_1.TOOLTIP_DELAY_SHOW, id: "icon-" + icon, place: 'top' }))));
};
exports.default = IconSvg;
//# sourceMappingURL=IconSvg.js.map