design-system-simplefi
Version:
Design System for SimpleFi Applications
87 lines • 6.59 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import React, { useEffect, useState } from 'react';
import styled, { css } from 'styled-components';
import debounce from 'lodash.debounce';
import { getColor, getFontFamily, getFontSize } from '../../utils';
import { FlexContainer, Inline } from '../layout';
import { Tooltip } from '../Tooltip';
// todo add icon for tooltip
var DataDetailSt = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: max-content;\n height: 90%;\n min-width: 110px;\n\n h3 {\n font-size: 14px;\n padding-top: 1px;\n padding-bottom: 5px;\n text-transform: capitalize;\n\n ", "\n }\n\n p {\n font-weight: 600;\n font-size: 20px;\n\n ", ";\n ", ";\n }\n"], ["\n width: max-content;\n height: 90%;\n min-width: 110px;\n\n h3 {\n font-size: 14px;\n padding-top: 1px;\n padding-bottom: 5px;\n text-transform: capitalize;\n\n ", "\n }\n\n p {\n font-weight: 600;\n font-size: 20px;\n\n ", ";\n ", ";\n }\n"])), function (_a) {
var principal = _a.principal, titleColor = _a.titleColor;
return !!principal && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-weight: bold;\n padding-bottom: 8px;\n font-size: 24px;\n color: ", ";\n "], ["\n font-weight: bold;\n padding-bottom: 8px;\n font-size: 24px;\n color: ", ";\n "])), getColor(titleColor) || 'midPurple');
}, function (_a) {
var principal = _a.principal;
return !!principal && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-size: 24px;\n "], ["\n font-size: 24px;\n "])));
}, function (_a) {
var value = _a.value, colored = _a.colored;
return !!colored && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), function (_a) {
var theme = _a.theme;
return value >= 0 ? theme.colors.neonGreen : theme.colors.neonCoral;
});
});
var StyledTooltip = styled(Tooltip)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n left: -10px;\n top: -20px;\n font-family: ", ";\n font-style: italic;\n font-weight: bold;\n font-size: ", ";\n line-height: 11px;\n text-align: center;\n\n ", "\n"], ["\n position: absolute;\n left: -10px;\n top: -20px;\n font-family: ", ";\n font-style: italic;\n font-weight: bold;\n font-size: ", ";\n line-height: 11px;\n text-align: center;\n\n ", "\n"])), getFontFamily('base'), getFontSize('md'), function (_a) {
var $principal = _a.$principal, $titleColor = _a.$titleColor;
return !!$principal && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), getColor($titleColor) || 'midPurple');
});
var DataDetail = function (_a) {
var _b = _a.principal, principal = _b === void 0 ? false : _b, primary = _a.primary, secondary = _a.secondary, _c = _a.currency, currency = _c === void 0 ? 'USD' : _c, _d = _a.colored, colored = _d === void 0 ? false : _d, _e = _a.titleColor, titleColor = _e === void 0 ? 'midPurple' : _e, _f = _a.tooltipPlacement, tooltipPlacement = _f === void 0 ? 'bottom' : _f, style = _a.style;
var _g = useState(primary), currentDisplay = _g[0], setCurrentDisplay = _g[1];
var _h = useState(''), valueDisplay = _h[0], setValueDisplay = _h[1];
var debouncedHandleMouseLeave = debounce(function () { return !!secondary && setCurrentDisplay(primary); }, 300);
var handleMouseEnter = function () {
debouncedHandleMouseLeave.cancel();
if (secondary)
setCurrentDisplay(secondary);
};
useEffect(function () {
var value = currentDisplay.value.toString();
var localeOptions = {
minimumFractionDigits: principal ? 0 : 2,
maximumFractionDigits: principal ? 0 : 2,
};
switch (currentDisplay.type) {
case 'currency':
localeOptions = __assign(__assign({}, localeOptions), { signDisplay: colored ? 'exceptZero' : 'auto', style: 'currency', currency: currency });
break;
case 'percent':
localeOptions = __assign(__assign({}, localeOptions), { style: 'percent', signDisplay: principal ? 'auto' : 'exceptZero' });
break;
case 'text':
localeOptions = {};
break;
case 'count':
default:
localeOptions = __assign(__assign({}, localeOptions), { signDisplay: colored ? 'exceptZero' : 'auto' });
}
if (currentDisplay.type !== 'text') {
setValueDisplay(parseFloat(value).toLocaleString('en-US', localeOptions));
}
else {
setValueDisplay(value);
}
}, [currentDisplay.type]);
return (React.createElement(DataDetailSt, { colored: colored, principal: principal, style: style, titleColor: titleColor, value: currentDisplay.value, onMouseLeave: debouncedHandleMouseLeave },
React.createElement(FlexContainer, { alignItems: principal ? 'flex-start' : 'center', flexDirection: "column", justifyContent: "center" },
React.createElement(Inline, { align: "center", justify: "center" },
currentDisplay.tooltipMessage && (React.createElement("div", { style: { position: 'relative' } },
React.createElement(StyledTooltip, { "$principal": principal, "$titleColor": titleColor, placement: tooltipPlacement, popup: currentDisplay.tooltipMessage }, "i"))),
React.createElement("h3", { onMouseEnter: handleMouseEnter }, currentDisplay.label)),
React.createElement("p", { onMouseEnter: handleMouseEnter }, valueDisplay))));
};
export default DataDetail;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
//# sourceMappingURL=DataDetail.js.map