design-system-simplefi
Version:
Design System for SimpleFi Applications
77 lines • 3.67 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 { css, } from 'styled-components';
import { any, apply, concat, curry, isEmpty, path, pipe } from 'ramda';
import { isNotUndefined, isNumber } from 'ramda-adjunct';
import { BASE_LINE_HEIGHT } from '../theme/constants';
import { SpaceSizes } from '../theme/space/space.enums';
import { pxToRem } from './helpers';
import { PaddingTypes } from '../components/layout/Padbox/Padbox.enums';
export var getPaddingSpace = function (_a) {
var _b = _a.paddingSize, paddingSize = _b === void 0 ? SpaceSizes.none : _b, _c = _a.paddingType, paddingType = _c === void 0 ? PaddingTypes.square : _c, theme = _a.theme;
var sizeValue = path(['space', paddingSize], theme);
switch (paddingType) {
case PaddingTypes.squish:
return [sizeValue / 2, sizeValue];
case PaddingTypes.stretch:
return [sizeValue, sizeValue / 2];
case PaddingTypes.horizontal:
return [0, sizeValue];
case PaddingTypes.vertial:
return [sizeValue, 0];
case PaddingTypes.square:
default:
return [sizeValue];
}
};
// createPadding :: Object -> string
// Object - { paddingSize: keyof typeof space; paddingType: keyof typeof paddingTypes; theme: DefaultTheme; }
export var createPadding = pipe(getPaddingSpace, apply(pxToRem), concat('padding: '));
var calculateSpacingValue = function (direction, generic) {
return pxToRem(BASE_LINE_HEIGHT * (isNumber(direction) ? direction : generic));
};
// createSpacing :: Kind -> Value -> string | string[]
// Kind - 'margin' or 'padding'
// Value - number or 'none' or object
export var createSpacing = curry(function (kind, value) {
if (value === undefined || isEmpty(value)) {
return undefined;
}
if (value === 'none') {
return kind + ": 0;";
}
if (isNumber(value)) {
return kind + ": " + pxToRem(BASE_LINE_HEIGHT * value) + ";";
}
var vertical = value.vertical, horizontal = value.horizontal, top = value.top, right = value.right, bottom = value.bottom, left = value.left;
var result = [];
if (any(isNotUndefined, [vertical, top])) {
result.push(kind + "-top: " + calculateSpacingValue(top, vertical) + ";");
}
if (any(isNotUndefined, [vertical, bottom])) {
result.push(kind + "-bottom: " + calculateSpacingValue(bottom, vertical) + ";");
}
if (any(isNotUndefined, [horizontal, left])) {
result.push(kind + "-left: " + calculateSpacingValue(left, horizontal) + ";");
}
if (any(isNotUndefined, [horizontal, right])) {
result.push(kind + "-right: " + calculateSpacingValue(right, horizontal) + ";");
}
return result;
});
// createMarginSpacing :: Value -> string | string[]
// Value - number or 'none' or object
export var createMarginSpacing = createSpacing('margin');
// createPaddingSpacing :: Value -> string | string[]
// Value - number or 'none' or object
export var createPaddingSpacing = createSpacing('padding');
// createSpacings :: Object -> string
// Object - {margin: number or 'none' or object, padding: number or 'none' or object }
export var createSpacings = function (_a) {
var margin = _a.margin, padding = _a.padding;
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", ";\n ", ";\n"], ["\n ", ";\n ", ";\n"])), createMarginSpacing(margin), createPaddingSpacing(padding));
};
var templateObject_1;
//# sourceMappingURL=space.js.map