brightyui
Version:
Brighty UI library
76 lines • 4.09 kB
JavaScript
import { __assign, __awaiter, __generator } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useEffect, useMemo, useState } from 'react';
import styles from '../../../src/styles/Icon.module.scss';
import { ErrorIcon } from '../../images/IconComponents/ErrorIcon';
import { cnb } from 'cnbuilder';
import { EColors } from '../../types/EColors';
import useBool from '../../hooks/useBool';
var Icon = function (_a) {
var currency = _a.currency, type = _a.type, country = _a.country, icon = _a.icon, _b = _a.wrapperColor, wrapperColor = _b === void 0 ? EColors.fill4 : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, loading = _a.loading, width = _a.width, height = _a.height, subIcon = _a.subIcon, subIconClassname = _a.subIconClassname, src = _a.src;
var _d = useState(''), path = _d[0], setPath = _d[1];
var error = useBool();
var importIcon = function (path) { return __awaiter(void 0, void 0, void 0, function () {
var _path, err_1;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
_a.trys.push([0, 2, , 3]);
return [4 /*yield*/, import("../../../src/images/".concat(path, ".svg"))];
case 1:
_path = (_a.sent()).default;
setPath(_path);
error.onFalse();
return [3 /*break*/, 3];
case 2:
err_1 = _a.sent();
console.error(err_1);
error.onTrue();
return [3 /*break*/, 3];
case 3: return [2 /*return*/];
}
});
}); };
var getRoute = useCallback(function () {
switch (type) {
case 'currency':
return importIcon("currencies/".concat(currency));
case 'country':
return importIcon("countries/".concat(country));
default:
return null;
}
}, [type, currency, country]);
useEffect(function () {
getRoute();
}, [type, currency, country]);
var customStyles = useMemo(function () {
if (size === 'custom') {
return {
width: "".concat(width, "px"),
height: "".concat(height, "px"),
};
}
}, [width, height, size]);
if (loading) {
return (_jsx("div", { className: cnb(styles.root__round, styles.root__round__loading, styles["root__size_".concat(size)]), style: customStyles }));
}
if (!path && type !== 'icon' && type !== 'profile') {
return (_jsx("div", { className: cnb(styles.root__round, styles.root__round__loading, styles["root__size_".concat(size)]), style: customStyles }));
}
if ((type === 'currency' && currency) || (type === 'country' && country)) {
if (error.value) {
return (_jsx("div", { className: cnb(styles.root__round, styles.root__round__error, styles["root__size_".concat(size)]), style: customStyles, children: _jsx(ErrorIcon, {}) }));
}
return (_jsx("div", { className: cnb(styles.root__round, styles["root__size_".concat(size)]), style: customStyles, children: !!path && _jsx("img", { src: path }) }));
}
if (type === 'icon') {
return (_jsxs("div", { className: cnb(styles.root__round, styles["root__size_".concat(size)]), style: __assign({ backgroundColor: wrapperColor }, customStyles), children: [icon, subIcon && _jsx("div", { className: cnb(styles.subIcon, subIconClassname), children: subIcon })] }));
}
if (type === 'profile') {
return (_jsxs("div", { className: cnb(styles.root__round, styles["root__size_".concat(size)]), style: __assign({ backgroundColor: wrapperColor }, customStyles), children: [icon, !!src && _jsx("img", { src: src, className: styles.profileAvatar }), subIcon && _jsx("div", { className: cnb(styles.subIcon, subIconClassname), children: subIcon })] }));
}
return null;
};
export default Icon;
//# sourceMappingURL=Icon.js.map