brightyui
Version:
Brighty UI library
70 lines • 6.66 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from 'react';
import { ChevronRightIcon } from '../../images/IconComponents/ChevronRightIcon';
import styles from '../../../src/styles/Cell.module.scss';
import Load from '../Load/Load';
import BaseCell from '../BaseCell/BaseCell';
import Typography from '../Typography/Typography';
import { EColors } from '../../types/EColors';
import Icon from '../Icon/Icon';
import { InvestIcon } from '../../images/IconComponents/InvestIcon';
import Button from '../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 = useMemo(function () {
if (type === 'default' && (leftSide || icon)) {
if (leftSide) {
return leftSide;
}
if (icon) {
return _jsx(Icon, { type: 'icon', icon: icon });
}
}
return null;
}, [type, leftSide, icon]);
var defaultRightSide = useMemo(function () {
if (type === 'default') {
if (rightSide) {
return rightSide;
}
}
if (type === 'defaultReversed') {
if (rightSide) {
return rightSide;
}
}
return loading ? null : (_jsx("div", { className: styles.chevron, children: _jsx(ChevronRightIcon, {}) }));
}, [type, rightSide, icon]);
if (type === 'default' || type === 'defaultReversed') {
return (_jsx(BaseCell, { wrapperRole: wrapperRole ? wrapperRole : 'button', disabled: disabled, onClick: handleClick, loading: loading, title: title && loading ? (_jsx(Load, { width: subtitle ? 96 : 48 })) : (_jsx(Typography, { variant: 'pSmallRegular', children: title })), subtitle: subtitle ? (loading ? (_jsx(Load, { width: 48 })) : (_jsx(Typography, { variant: 'captionRegular', color: EColors.text2, children: subtitle }))) : null, rightSide: defaultRightSide, leftSide: defaultLeftSide, reversed: type === 'defaultReversed' }));
}
if (type === 'country') {
return (_jsx(BaseCell, { title: title && loading ? (_jsx(Load, { width: subtitle ? 96 : 48 })) : (_jsx(Typography, { variant: 'pSmallRegular', children: title })), subtitle: subtitle && loading ? (_jsx(Load, { width: 48 })) : (_jsx(Typography, { variant: 'captionRegular', color: EColors.text2, children: subtitle })), wrapperRole: wrapperRole ? wrapperRole : 'button', disabled: disabled, onClick: handleClick, loading: loading, leftSide: leftSide ? leftSide : _jsx(Icon, { type: 'country', country: country, loading: loading }), rightSide: loading ? null : (_jsx("div", { className: styles.chevron, children: _jsx(ChevronRightIcon, {}) })) }));
}
if (type === 'currency') {
return (_jsx(BaseCell, { title: title && loading ? (_jsx(Load, { width: subtitle ? 96 : 48 })) : (_jsx(Typography, { variant: 'pSmallRegular', children: title })), subtitle: subtitle && loading ? (_jsx(Load, { width: 48 })) : typeof subtitle === 'string' ? (_jsx(Typography, { variant: 'captionRegular', color: EColors.text2, children: subtitle })) : (subtitle), wrapperRole: wrapperRole ? wrapperRole : 'button', disabled: disabled, onClick: handleClick, loading: loading, leftSide: leftSide ? leftSide : _jsx(Icon, { type: 'currency', currency: currency, loading: loading }), rightSide: loading ? null : (_jsx("div", { className: styles.chevron, children: _jsx(ChevronRightIcon, {}) })) }));
}
if (type === 'vaultHome') {
return (_jsx(BaseCell, { title: title && loading ? (_jsx(Load, { width: subtitle ? 96 : 48 })) : (_jsx(Typography, { variant: 'pSmallRegular', children: title })), subtitle: subtitle && loading ? (_jsx(Load, { width: 48 })) : (_jsxs(Typography, { variant: 'captionRegular', color: EColors.text2, children: ["\u25B2 ", subtitle] })), wrapperRole: wrapperRole ? wrapperRole : 'button', disabled: disabled, onClick: handleClick, loading: loading, leftSide: leftSide ? (leftSide) : (_jsx(Icon, { type: 'icon', icon: _jsx(InvestIcon, {}), loading: loading, wrapperColor: EColors.tertiary })), rightSide: loading ? null : (_jsx("div", { className: styles.chevron, children: _jsx(ChevronRightIcon, {}) })) }));
}
if (type === 'vaultDefault') {
return (_jsx(BaseCell, { title: title && loading ? (_jsx(Load, { width: subtitle ? 96 : 48 })) : (_jsx(Typography, { variant: 'pSmallRegular', children: title })), subtitle: subtitle && loading ? (_jsx(Load, { width: 48 })) : (_jsxs(Typography, { variant: 'captionRegular', color: EColors.text2, children: ["\u25B2 ", subtitle] })), wrapperRole: wrapperRole ? wrapperRole : 'button', disabled: disabled, onClick: handleClick, loading: loading, leftSide: leftSide ? (leftSide) : (_jsx(Icon, { type: 'currency', currency: currency, loading: loading, wrapperColor: EColors.tertiary })), rightSide: rightSide }));
}
if (type === 'button') {
return (_jsx(BaseCell, { title: title && loading ? (_jsx(Load, { width: subtitle ? 96 : 48 })) : (_jsx(Typography, { variant: 'pSmallRegular', children: title })), subtitle: subtitle && loading ? (_jsx(Load, { width: 48 })) : (_jsx(Typography, { variant: 'captionRegular', color: EColors.text2, children: subtitle })), wrapperRole: wrapperRole ? wrapperRole : 'default', disabled: disabled, loading: loading, leftSide: leftSide ? leftSide : _jsx(Icon, { type: 'icon', icon: icon, loading: loading }), rightSide: loading ? null : _jsx(Button, { title: buttonTitle, onClick: onClick, theme: 'secondary', disabled: disabled }) }));
}
if (type === 'accountHome') {
return (_jsx(BaseCell, { title: title && loading ? (_jsx(Load, { width: subtitle ? 96 : 48 })) : (_jsx(Typography, { variant: 'pSmallRegular', children: title })), subtitle: subtitle && loading ? (_jsx(Load, { width: 48 })) : (_jsx(Typography, { variant: 'captionRegular', color: EColors.text2, children: subtitle })), wrapperRole: wrapperRole ? wrapperRole : 'button', disabled: disabled, onClick: handleClick, loading: loading, leftSide: leftSide ? leftSide : _jsx(Icon, { type: 'currency', currency: currency, loading: loading }), rightSide: rightSide }));
}
return null;
};
export default Cell;
//# sourceMappingURL=Cell.js.map