brightyui
Version:
Brighty UI library
73 lines • 8.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var ChevronRightIcon_1 = require("../../images/IconComponents/ChevronRightIcon");
var Cell_module_scss_1 = tslib_1.__importDefault(require("../../../src/styles/Cell.module.scss"));
var Load_1 = tslib_1.__importDefault(require("../Load/Load"));
var BaseCell_1 = tslib_1.__importDefault(require("../BaseCell/BaseCell"));
var Typography_1 = tslib_1.__importDefault(require("../Typography/Typography"));
var EColors_1 = require("../../types/EColors");
var Icon_1 = tslib_1.__importDefault(require("../Icon/Icon"));
var InvestIcon_1 = require("../../images/IconComponents/InvestIcon");
var Button_1 = tslib_1.__importDefault(require("../Button"));
var Cell = function (_a) {
var type = _a.type, title = _a.title, subtitle = _a.subtitle, disabled = _a.disabled, loading = _a.loading, country = _a.country, currency = _a.currency, onClick = _a.onClick, buttonTitle = _a.buttonTitle, rightSide = _a.rightSide, leftSide = _a.leftSide, icon = _a.icon, wrapperRole = _a.wrapperRole;
var handleClick = function (e) {
if (type === 'button') {
return;
}
e.preventDefault();
e.stopPropagation();
onClick();
};
var defaultLeftSide = (0, react_1.useMemo)(function () {
if (type === 'default' && (leftSide || icon)) {
if (leftSide) {
return leftSide;
}
if (icon) {
return (0, jsx_runtime_1.jsx)(Icon_1.default, { type: 'icon', icon: icon });
}
}
return null;
}, [type, leftSide, icon]);
var defaultRightSide = (0, react_1.useMemo)(function () {
if (type === 'default') {
if (rightSide) {
return rightSide;
}
}
if (type === 'defaultReversed') {
if (rightSide) {
return rightSide;
}
}
return loading ? null : ((0, jsx_runtime_1.jsx)("div", { className: Cell_module_scss_1.default.chevron, children: (0, jsx_runtime_1.jsx)(ChevronRightIcon_1.ChevronRightIcon, {}) }));
}, [type, rightSide, icon]);
if (type === 'default' || type === 'defaultReversed') {
return ((0, jsx_runtime_1.jsx)(BaseCell_1.default, { wrapperRole: wrapperRole ? wrapperRole : 'button', disabled: disabled, onClick: handleClick, loading: loading, title: title && loading ? ((0, jsx_runtime_1.jsx)(Load_1.default, { width: subtitle ? 96 : 48 })) : ((0, jsx_runtime_1.jsx)(Typography_1.default, { variant: 'pSmallRegular', children: title })), subtitle: subtitle ? (loading ? ((0, jsx_runtime_1.jsx)(Load_1.default, { width: 48 })) : ((0, jsx_runtime_1.jsx)(Typography_1.default, { variant: 'captionRegular', color: EColors_1.EColors.text2, children: subtitle }))) : null, rightSide: defaultRightSide, leftSide: defaultLeftSide, reversed: type === 'defaultReversed' }));
}
if (type === 'country') {
return ((0, jsx_runtime_1.jsx)(BaseCell_1.default, { title: title && loading ? ((0, jsx_runtime_1.jsx)(Load_1.default, { width: subtitle ? 96 : 48 })) : ((0, jsx_runtime_1.jsx)(Typography_1.default, { variant: 'pSmallRegular', children: title })), subtitle: subtitle && loading ? ((0, jsx_runtime_1.jsx)(Load_1.default, { width: 48 })) : ((0, jsx_runtime_1.jsx)(Typography_1.default, { variant: 'captionRegular', color: EColors_1.EColors.text2, children: subtitle })), wrapperRole: wrapperRole ? wrapperRole : 'button', disabled: disabled, onClick: handleClick, loading: loading, leftSide: leftSide ? leftSide : (0, jsx_runtime_1.jsx)(Icon_1.default, { type: 'country', country: country, loading: loading }), rightSide: loading ? null : ((0, jsx_runtime_1.jsx)("div", { className: Cell_module_scss_1.default.chevron, children: (0, jsx_runtime_1.jsx)(ChevronRightIcon_1.ChevronRightIcon, {}) })) }));
}
if (type === 'currency') {
return ((0, jsx_runtime_1.jsx)(BaseCell_1.default, { title: title && loading ? ((0, jsx_runtime_1.jsx)(Load_1.default, { width: subtitle ? 96 : 48 })) : ((0, jsx_runtime_1.jsx)(Typography_1.default, { variant: 'pSmallRegular', children: title })), subtitle: subtitle && loading ? ((0, jsx_runtime_1.jsx)(Load_1.default, { width: 48 })) : typeof subtitle === 'string' ? ((0, jsx_runtime_1.jsx)(Typography_1.default, { variant: 'captionRegular', color: EColors_1.EColors.text2, children: subtitle })) : (subtitle), wrapperRole: wrapperRole ? wrapperRole : 'button', disabled: disabled, onClick: handleClick, loading: loading, leftSide: leftSide ? leftSide : (0, jsx_runtime_1.jsx)(Icon_1.default, { type: 'currency', currency: currency, loading: loading }), rightSide: loading ? null : ((0, jsx_runtime_1.jsx)("div", { className: Cell_module_scss_1.default.chevron, children: (0, jsx_runtime_1.jsx)(ChevronRightIcon_1.ChevronRightIcon, {}) })) }));
}
if (type === 'vaultHome') {
return ((0, jsx_runtime_1.jsx)(BaseCell_1.default, { title: title && loading ? ((0, jsx_runtime_1.jsx)(Load_1.default, { width: subtitle ? 96 : 48 })) : ((0, jsx_runtime_1.jsx)(Typography_1.default, { variant: 'pSmallRegular', children: title })), subtitle: subtitle && loading ? ((0, jsx_runtime_1.jsx)(Load_1.default, { width: 48 })) : ((0, jsx_runtime_1.jsxs)(Typography_1.default, { variant: 'captionRegular', color: EColors_1.EColors.text2, children: ["\u25B2 ", subtitle] })), wrapperRole: wrapperRole ? wrapperRole : 'button', disabled: disabled, onClick: handleClick, loading: loading, leftSide: leftSide ? (leftSide) : ((0, jsx_runtime_1.jsx)(Icon_1.default, { type: 'icon', icon: (0, jsx_runtime_1.jsx)(InvestIcon_1.InvestIcon, {}), loading: loading, wrapperColor: EColors_1.EColors.tertiary })), rightSide: loading ? null : ((0, jsx_runtime_1.jsx)("div", { className: Cell_module_scss_1.default.chevron, children: (0, jsx_runtime_1.jsx)(ChevronRightIcon_1.ChevronRightIcon, {}) })) }));
}
if (type === 'vaultDefault') {
return ((0, jsx_runtime_1.jsx)(BaseCell_1.default, { title: title && loading ? ((0, jsx_runtime_1.jsx)(Load_1.default, { width: subtitle ? 96 : 48 })) : ((0, jsx_runtime_1.jsx)(Typography_1.default, { variant: 'pSmallRegular', children: title })), subtitle: subtitle && loading ? ((0, jsx_runtime_1.jsx)(Load_1.default, { width: 48 })) : ((0, jsx_runtime_1.jsxs)(Typography_1.default, { variant: 'captionRegular', color: EColors_1.EColors.text2, children: ["\u25B2 ", subtitle] })), wrapperRole: wrapperRole ? wrapperRole : 'button', disabled: disabled, onClick: handleClick, loading: loading, leftSide: leftSide ? (leftSide) : ((0, jsx_runtime_1.jsx)(Icon_1.default, { type: 'currency', currency: currency, loading: loading, wrapperColor: EColors_1.EColors.tertiary })), rightSide: rightSide }));
}
if (type === 'button') {
return ((0, jsx_runtime_1.jsx)(BaseCell_1.default, { title: title && loading ? ((0, jsx_runtime_1.jsx)(Load_1.default, { width: subtitle ? 96 : 48 })) : ((0, jsx_runtime_1.jsx)(Typography_1.default, { variant: 'pSmallRegular', children: title })), subtitle: subtitle && loading ? ((0, jsx_runtime_1.jsx)(Load_1.default, { width: 48 })) : ((0, jsx_runtime_1.jsx)(Typography_1.default, { variant: 'captionRegular', color: EColors_1.EColors.text2, children: subtitle })), wrapperRole: wrapperRole ? wrapperRole : 'default', disabled: disabled, loading: loading, leftSide: leftSide ? leftSide : (0, jsx_runtime_1.jsx)(Icon_1.default, { type: 'icon', icon: icon, loading: loading }), rightSide: loading ? null : (0, jsx_runtime_1.jsx)(Button_1.default, { title: buttonTitle, onClick: onClick, theme: 'secondary', disabled: disabled }) }));
}
if (type === 'accountHome') {
return ((0, jsx_runtime_1.jsx)(BaseCell_1.default, { title: title && loading ? ((0, jsx_runtime_1.jsx)(Load_1.default, { width: subtitle ? 96 : 48 })) : ((0, jsx_runtime_1.jsx)(Typography_1.default, { variant: 'pSmallRegular', children: title })), subtitle: subtitle && loading ? ((0, jsx_runtime_1.jsx)(Load_1.default, { width: 48 })) : ((0, jsx_runtime_1.jsx)(Typography_1.default, { variant: 'captionRegular', color: EColors_1.EColors.text2, children: subtitle })), wrapperRole: wrapperRole ? wrapperRole : 'button', disabled: disabled, onClick: handleClick, loading: loading, leftSide: leftSide ? leftSide : (0, jsx_runtime_1.jsx)(Icon_1.default, { type: 'currency', currency: currency, loading: loading }), rightSide: rightSide }));
}
return null;
};
exports.default = Cell;
//# sourceMappingURL=Cell.js.map