design-system-simplefi
Version:
Design System for SimpleFi Applications
59 lines • 3.09 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 styled, { css, keyframes } from 'styled-components';
import PropTypes from 'prop-types';
import { pipe, prop, unless } from 'ramda';
import { isString } from 'ramda-adjunct';
import { pxToRem } from '../../utils';
var spin = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n"], ["\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n"])));
var getHorizontalMargin = pipe(prop('horizontalMargin'), unless(isString, pxToRem));
var Spinner = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-top: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n margin-right: ", ";\n border-radius: 50%;\n width: ", ";\n height: ", ";\n animation: ", " 1s infinite linear;\n border: solid rgba(255, 255, 255, 0.2);\n border-width: ", ";\n border-top-color: rgb(255, 255, 255);\n\n ", ";\n"], ["\n margin-top: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n margin-right: ", ";\n border-radius: 50%;\n width: ", ";\n height: ", ";\n animation: ", " 1s infinite linear;\n border: solid rgba(255, 255, 255, 0.2);\n border-width: ", ";\n border-top-color: rgb(255, 255, 255);\n\n ", ";\n"])), function (_a) {
var verticalMargin = _a.verticalMargin;
return pxToRem(verticalMargin);
}, function (_a) {
var verticalMargin = _a.verticalMargin;
return pxToRem(verticalMargin);
}, getHorizontalMargin, getHorizontalMargin, function (_a) {
var width = _a.width;
return pxToRem(width);
}, function (_a) {
var height = _a.height;
return pxToRem(height);
}, spin, function (_a) {
var borderWidth = _a.borderWidth;
return borderWidth + "px";
}, function (_a) {
var colorPalette = _a.colorPalette;
return colorPalette && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-color: ", ";\n border-top-color: ", ";\n "], ["\n border-color: ", ";\n border-top-color: ", ";\n "])), function (_a) {
var theme = _a.theme;
return theme.colors.neonPink;
}, function (_a) {
var theme = _a.theme;
return theme.colors.deepPurple;
});
});
Spinner.propTypes = {
colorPalette: PropTypes.bool,
width: PropTypes.number,
height: PropTypes.number,
verticalMargin: PropTypes.number,
horizontalMargin: PropTypes.oneOfType([
PropTypes.number,
PropTypes.oneOf(['auto']),
]),
borderWidth: PropTypes.number,
};
Spinner.defaultProps = {
className: 'spinner',
colorPalette: false,
width: 24,
height: 24,
verticalMargin: 15,
horizontalMargin: 'auto',
borderWidth: 4,
};
export default Spinner;
var templateObject_1, templateObject_2, templateObject_3;
//# sourceMappingURL=Spinner.js.map