@up-group-ui/react-controls
Version:
Up shared react controls
101 lines • 5.5 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.UpSvgIconSparkles = void 0;
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var typestyle_1 = require("typestyle");
var icons_1 = (0, tslib_1.__importDefault)(require("../../../Common/theming/icons"));
var mentors_1 = (0, tslib_1.__importDefault)(require("../../../Common/theming/mentors"));
var illustrations_1 = (0, tslib_1.__importDefault)(require("../../../Common/theming/illustrations"));
var classnames_1 = (0, tslib_1.__importDefault)(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 setTitle = function (iconData, iconTitle) {
var iconAsHtml = new DOMParser().parseFromString(iconData, 'text/html').querySelector('svg');
if (iconAsHtml) {
if (iconAsHtml.querySelector('title')) {
iconAsHtml.querySelector('title').innerHTML = iconTitle !== null && iconTitle !== void 0 ? iconTitle : '';
return iconAsHtml.outerHTML;
}
}
return iconData;
};
var isColorMustNotBeOverrided = function (iconName) {
return illustrations_1.default[iconName] !== undefined || mentors_1.default[iconName] !== undefined;
};
var getStyles = function (props) {
var styles = {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: "" + props.width,
height: "" + props.height,
margin: '1px',
$nest: {
'& svg': {
pointerEvents: 'none',
width: '100%',
height: '100%',
},
},
};
if (props.color) {
styles['$nest'] = {
'&.colored svg:not(.uncolored), &.colored svg path:not(.uncolored), &.colored svg polygon:not(.uncolored), &.colored svg polyline:not(.uncolored)': {
fill: props.color,
width: '100%',
height: '100%',
},
};
}
return (0, 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 = (0, tslib_1.__rest)(props, ["children", "className", "height", "width", "color"]);
return ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({}, othersProps, { className: (0, classnames_1.default)('up-icon-wrapper', className, getStyles(props)) }, { children: children }), void 0));
};
var UpSvgIcon = function (_a) {
var iconTitle = _a.iconTitle, 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 = (0, tslib_1.__rest)(_a, ["iconTitle", "children", "viewBox", "iconName", "iconHtml", "className", "color", "dataFor", "width", "height", "theme"]);
var finalHeight = height && !(0, utils_1.isString)(height) ? height + "px" : height || '20px';
var finalWidth = width && !(0, utils_1.isString)(width) ? width + "px" : width || '20px';
var iconData = iconName ? setTitle(getIconData(iconName), iconTitle) : iconHtml ? iconHtml : null;
var mentorOrIllustrationStyles = null;
if (iconName && !isColorMustNotBeOverrided(iconName)) {
mentorOrIllustrationStyles = 'colored';
}
if (iconData) {
var SvgIconElement = function () { return ((0, jsx_runtime_1.jsx)(SvgIconWrapper, (0, tslib_1.__assign)({ className: (0, classnames_1.default)(className, mentorOrIllustrationStyles), color: color, height: finalHeight, width: finalWidth, dangerouslySetInnerHTML: { __html: iconData } }, others), void 0)); };
if (dataFor != null) {
return ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ style: { display: 'inline-block' }, "data-for": dataFor, "data-tip": 'tooltip' }, { children: (0, jsx_runtime_1.jsx)(SvgIconElement, {}, void 0) }), void 0));
}
else {
return (0, jsx_runtime_1.jsx)(SvgIconElement, {}, void 0);
}
}
else {
var defaultViewBox = "0 0 " + width + " " + height;
var viewBoxProps = viewBox || defaultViewBox;
return ((0, jsx_runtime_1.jsx)("svg", (0, tslib_1.__assign)({}, others, { fill: color, viewBox: viewBoxProps }, { children: children }), void 0));
}
};
var UpSvgIconSparkles = function (props) {
return ((0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ style: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, props.style), { position: 'relative' }) }, { children: [(0, jsx_runtime_1.jsx)(UpSvgIcon, { width: Number(props.width) + 12, height: props.height, iconName: 'sparkles', style: {
position: 'absolute',
top: -Number(props.height) / 3,
left: -Number(props.width) / 5,
} }, void 0), (0, jsx_runtime_1.jsx)(UpSvgIcon, (0, tslib_1.__assign)({}, props, { style: {} }), void 0)] }), void 0));
};
exports.UpSvgIconSparkles = UpSvgIconSparkles;
exports.default = UpSvgIcon;
//# sourceMappingURL=UpSvgIcon.js.map