design-system-simplefi
Version:
Design System for SimpleFi Applications
76 lines • 5.57 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;
};
import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import debounce from 'lodash.debounce';
import { getFontFamily, getFontSize } from '../../utils';
import { Heading } from '../typography/Heading';
import { FlexContainer, Inline } from '../layout';
import { SpaceSizes } from '../../theme/space/space.enums';
import { ColorTypes, theme } from '../../theme';
import { Tooltip } from '../Tooltip';
var ProgressBar = function (_a) {
var progressClr = _a.progressClr, percent = _a.percent, size = _a.size, text = _a.text, handleMouseEnter = _a.handleMouseEnter;
var strokeWidth = 6;
var viewBox = "0 0 " + size + " " + size;
var radius = (size - strokeWidth) / 2;
var dashArray = radius * Math.PI * 2;
// Scale 100% coverage overlay with the actual percent
var dashOffset = dashArray - dashArray * percent;
return (React.createElement("svg", { height: size, viewBox: viewBox, width: size, onMouseEnter: handleMouseEnter },
React.createElement("circle", { cx: size / 2, cy: size / 2, fill: "none", r: radius, stroke: "#E5D1EF", strokeWidth: strokeWidth + "px" }),
React.createElement("circle", { cx: size / 2, cy: size / 2, fill: "none", r: radius, stroke: theme.colors[ColorTypes[progressClr]], strokeWidth: strokeWidth + "px",
// Start progress marker at 12 O'Clock
style: {
strokeDasharray: dashArray,
strokeDashoffset: dashOffset,
}, transform: "rotate(-90 " + size / 2 + " " + size / 2 + ")" }),
React.createElement("text", { className: "circle-text", dy: ".3em", textAnchor: "middle", x: "50%", y: "50%" }, "" + text)));
};
var DialSt = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n min-width: 200px;\n max-width: 300px;\n text-transform: capitalize;\n h3 {\n color: ", ";\n }\n"], ["\n min-width: 200px;\n max-width: 300px;\n text-transform: capitalize;\n h3 {\n color: ", ";\n }\n"])), function (_a) {
var theme = _a.theme;
return theme.colors.black;
});
var StyledTooltip = styled(Tooltip)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n text-transform: none;\n left: -5px;\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 color: ", ";\n"], ["\n position: absolute;\n text-transform: none;\n left: -5px;\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 color: ", ";\n"])), getFontFamily('base'), getFontSize('md'), function (_a) {
var theme = _a.theme;
return theme.colors.black;
});
var Dial = function (_a) {
var primary = _a.primary, secondary = _a.secondary, percent = _a.percent, _b = _a.direction, direction = _b === void 0 ? 'row' : _b, _c = _a.currency, currency = _c === void 0 ? 'USD' : _c, _d = _a.size, size = _d === void 0 ? 90 : _d, _e = _a.tooltipPlacement, tooltipPlacement = _e === void 0 ? 'bottom' : _e;
var _f = useState(primary), currentData = _f[0], setCurrentData = _f[1];
var _g = useState(''), displayValue = _g[0], setDisplayValue = _g[1];
var debouncedHandleMouseLeave = debounce(function () { return !!secondary && setCurrentData(primary); }, 300);
var handleMouseEnter = function () {
debouncedHandleMouseLeave.cancel();
if (secondary)
setCurrentData(secondary);
};
useEffect(function () {
var dispValue = currentData.type === 'currency'
? parseInt(currentData.value.toString(), 10).toLocaleString('en-US', {
maximumFractionDigits: 0,
style: 'currency',
currency: currency,
})
: currentData.value.toLocaleString('en-US', {
maximumFractionDigits: 0,
style: 'percent',
});
setDisplayValue(dispValue);
}, [currentData.type]);
var title = (React.createElement(Inline, { align: "center", justify: "center" },
currentData.tooltipMessage && (React.createElement("div", { style: { position: 'relative' } },
React.createElement(StyledTooltip, { placement: tooltipPlacement, popup: currentData.tooltipMessage }, "i"))),
React.createElement(Heading, { padding: { top: 0.3, bottom: 0.3, left: 0.2, right: 0.2 }, size: "h3", style: { margin: 'auto 0 ', fontWeight: 'bold' }, onMouseEnter: handleMouseEnter }, currentData.label)));
var body = direction === 'row' ? (React.createElement(Inline, { align: "center", gap: SpaceSizes.xxs },
title,
React.createElement(ProgressBar, { handleMouseEnter: handleMouseEnter, percent: percent, progressClr: ColorTypes.midPurple, size: size, text: displayValue }))) : (React.createElement(FlexContainer, { alignItems: "center", flexDirection: "column", justifyContent: "center" },
title,
React.createElement(ProgressBar, { handleMouseEnter: handleMouseEnter, percent: percent, progressClr: ColorTypes.midPurple, size: 90, text: displayValue })));
return React.createElement(DialSt, { onMouseLeave: debouncedHandleMouseLeave }, body);
};
export default Dial;
var templateObject_1, templateObject_2;
//# sourceMappingURL=Dial.js.map