@arche-mc2/arche-controls
Version:
We know that there are a ton of react UI library projects to choose from. Our hope with this one is to provide the next generation of react components that you can use to bootstrap your next project, or as a reference for building a UIKit. Read on to get
91 lines • 4.52 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var typestyle_1 = require("typestyle");
var icons_1 = require("../../../Common/theming/icons");
var mentors_1 = require("../../../Common/theming/mentors");
var illustrations_1 = require("../../../Common/theming/illustrations");
var classnames = require("classnames");
var utils_1 = require("../../../Common/utils");
var getIconData = function (iconName) {
if (icons_1.default[iconName] !== undefined) {
return icons_1.default[iconName];
}
if (illustrations_1.default[iconName] !== undefined) {
return illustrations_1.default[iconName];
}
if (mentors_1.default[iconName] !== undefined) {
return mentors_1.default[iconName];
}
return null;
};
var isColorMustNotBeOverrided = function (iconName) {
return illustrations_1.default[iconName] !== undefined ||
mentors_1.default[iconName] !== undefined;
};
var getStyles = function (props) {
var styles = {
display: 'inline-block',
width: "" + props.width,
height: "" + props.height,
margin: '1px',
$nest: {
'& svg': {
pointerEvents: 'none',
},
},
};
if (props.color) {
styles['$nest'] = {
'&.colored svg:not(.uncolored), &.colored svg path:not(.uncolored), &.colored svg polygon:not(.uncolored), &.colored svg polyline:not(.uncolored), &.colored svg circle:not(.uncolored)': {
fill: props.color,
},
};
}
return typestyle_1.style(styles);
};
var SvgIconWrapper = function (props) {
var children = props.children, className = props.className, height = props.height, width = props.width, color = props.color, othersProps = tslib_1.__rest(props, ["children", "className", "height", "width", "color"]);
return (React.createElement("div", tslib_1.__assign({}, othersProps, { className: classnames('up-icon-wrapper', className, getStyles(props)) }), children));
};
var UpSvgIcon = function (_a) {
var children = _a.children, viewBox = _a.viewBox, iconName = _a.iconName, iconHtml = _a.iconHtml, className = _a.className, color = _a.color, dataFor = _a.dataFor, width = _a.width, height = _a.height, theme = _a.theme, others = tslib_1.__rest(_a, ["children", "viewBox", "iconName", "iconHtml", "className", "color", "dataFor", "width", "height", "theme"]);
var finalHeight = height && !utils_1.isString(height) ? height + "px" : height || '20px';
var finalWidth = width && !utils_1.isString(width) ? width + "px" : width || '20px';
var iconData = iconName
? getIconData(iconName)
: iconHtml
? iconHtml
: null;
var mentorOrIllustrationStyles = null;
if (iconName && !isColorMustNotBeOverrided(iconName)) {
mentorOrIllustrationStyles = 'colored';
}
if (iconData) {
var SvgIconElement = function () { return (React.createElement(SvgIconWrapper, tslib_1.__assign({ className: classnames(className, mentorOrIllustrationStyles), color: color, height: finalHeight, width: finalWidth, dangerouslySetInnerHTML: { __html: iconData } }, others))); };
if (dataFor != null) {
return (React.createElement("div", { style: { display: 'inline-block' }, "data-for": dataFor, "data-tip": 'tooltip' },
React.createElement(SvgIconElement, null)));
}
else {
return React.createElement(SvgIconElement, null);
}
}
else {
var defaultViewBox = "0 0 " + width + " " + height;
var viewBoxProps = viewBox || defaultViewBox;
return (React.createElement("svg", tslib_1.__assign({}, others, { fill: color, viewBox: viewBoxProps }), children));
}
};
exports.UpSvgIconSparkles = function (props) {
return (React.createElement("div", { style: tslib_1.__assign(tslib_1.__assign({}, props.style), { position: 'relative' }) },
React.createElement(UpSvgIcon, { width: Number(props.width) + 12, height: props.height, iconName: 'sparkles', style: {
position: 'absolute',
top: -Number(props.height) / 3,
left: -Number(props.width) / 5,
} }),
React.createElement(UpSvgIcon, tslib_1.__assign({}, props, { style: {} }))));
};
exports.default = UpSvgIcon;
//# sourceMappingURL=UpSvgIcon.js.map