@zenkit/layout
Version:
ZenKit components for impliments layout
292 lines (263 loc) • 9.93 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.styles = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _styles = require("@zenkit/styles");
var _typography = require("@zenkit/typography");
var styles = function styles(theme) {
return (0, _extends2.default)({
display: {
display: function display(props) {
if (!props.display) {
if (props.inline) {
return 'inline';
}
if (typeof props.is === 'string' && ['span'].includes(props.is)) {
return 'inline-block';
}
return 'block';
}
if (props.display === 'none') {
return props.display;
}
return props.inline && !props.display.includes('inline') ? "inline-".concat(props.display) : props.display;
}
},
zIndex: {
zIndex: function zIndex(props) {
return theme.zIndex && theme.zIndex[props.zIndex] || props.zIndex;
}
},
float: {
float: function float(props) {
return props.float !== 'clearfix' && props.float;
},
'&::before': {
content: '""',
display: function display(props) {
return props.float === 'clearfix' ? 'table' : 'none';
}
},
'&::after': {
content: '""',
display: function display(props) {
return props.float === 'clearfix' ? 'table' : 'none';
},
clear: 'both'
}
},
position: {
position: function position(props) {
return props.position;
}
}
}, ['top', 'right', 'bottom', 'left'].reduce(function (acc, curr) {
acc[curr] = (0, _defineProperty2.default)({}, curr, function (props) {
if (props[curr] === true) {
return 0;
}
return props[curr];
});
return acc;
}, {}), {
margin: function margin(props) {
return {
marginTop: props.mt || props.my || props.m,
marginRight: props.mr || props.mx || props.m,
marginBottom: props.mb || props.my || props.m,
marginLeft: props.ml || props.mx || props.m
};
},
padding: function padding(props) {
return {
paddingTop: props.pt || props.py || props.p,
paddingRight: props.pr || props.px || props.p,
paddingBottom: props.pb || props.py || props.p,
paddingLeft: props.pl || props.px || props.p
};
},
minWidth: {
minWidth: function minWidth(props) {
return props.minSize || props.minWidth;
}
},
width: {
width: function width(props) {
return props.size || props.width;
}
},
maxWidth: {
maxWidth: function maxWidth(props) {
return props.maxSize || props.maxWidth;
}
},
minHeight: {
minHeight: function minHeight(props) {
return props.minSize || props.minHeight;
}
},
height: {
height: function height(props) {
return props.size || props.height;
}
},
maxHeight: {
maxHeight: function maxHeight(props) {
return props.maxSize || props.maxHeight;
}
},
ratio: {
height: 0,
paddingBottom: function paddingBottom(props) {
return "".concat(props.ratio * 100, "%");
}
},
borderColor: {
borderColor: function borderColor(props) {
return props.borderColor;
}
},
border: {
border: function border(props) {
return props.border;
}
},
borderTop: {
borderTop: function borderTop(props) {
return props.borderTop;
}
},
borderRight: {
borderRight: function borderRight(props) {
return props.borderRight;
}
},
borderBottom: {
borderBottom: function borderBottom(props) {
return props.borderBottom;
}
},
borderLeft: {
borderLeft: function borderLeft(props) {
return props.borderLeft;
}
},
outline: {
outline: function outline(props) {
return props.outline;
}
},
rounded: {
borderRadius: function borderRadius(props) {
if (props.rounded === 'all') {
return theme.rounded;
}
if (props.rounded === 'top') {
return "".concat(theme.rounded, " ").concat(theme.rounded, " 0 0");
}
if (props.rounded === 'right') {
return "0 ".concat(theme.rounded, " ").concat(theme.rounded, " 0");
}
if (props.rounded === 'bottom') {
return "0 0 ".concat(theme.rounded, " ").concat(theme.rounded);
}
if (props.rounded === 'left') {
return "".concat(theme.rounded, " 0 0 ").concat(theme.rounded);
}
if (props.rounded === 'circle') {
return '50%';
}
if (props.rounded === 'pill') {
return '50rem';
}
return props.rounded;
}
},
shadow: {
boxShadow: function boxShadow(props) {
return props.shadow;
}
}
});
};
exports.styles = styles;
function Box(props) {
var _cn;
var component = props.is,
display = props.display,
inline = props.inline,
zIndex = props.zIndex,
float = props.float,
position = props.position,
top = props.top,
right = props.right,
bottom = props.bottom,
left = props.left,
m = props.m,
mx = props.mx,
my = props.my,
mt = props.mt,
mr = props.mr,
mb = props.mb,
ml = props.ml,
p = props.p,
px = props.px,
py = props.py,
pt = props.pt,
pr = props.pr,
pb = props.pb,
pl = props.pl,
minSize = props.minSize,
size = props.size,
maxSize = props.maxSize,
minWidth = props.minWidth,
width = props.width,
maxWidth = props.maxWidth,
minHeight = props.minHeight,
height = props.height,
maxHeight = props.maxHeight,
ratio = props.ratio,
borderColor = props.borderColor,
border = props.border,
borderTop = props.borderTop,
borderRight = props.borderRight,
borderBottom = props.borderBottom,
borderLeft = props.borderLeft,
outline = props.outline,
rounded = props.rounded,
shadow = props.shadow,
fontFamily = props.fontFamily,
fontSize = props.fontSize,
lineHeight = props.lineHeight,
fontWeight = props.fontWeight,
textAlign = props.textAlign,
textShadow = props.textShadow,
theme = props.theme,
classes = props.classes,
classNameProps = props.className,
children = props.children,
otherProps = (0, _objectWithoutProperties2.default)(props, ["is", "display", "inline", "zIndex", "float", "position", "top", "right", "bottom", "left", "m", "mx", "my", "mt", "mr", "mb", "ml", "p", "px", "py", "pt", "pr", "pb", "pl", "minSize", "size", "maxSize", "minWidth", "width", "maxWidth", "minHeight", "height", "maxHeight", "ratio", "borderColor", "border", "borderTop", "borderRight", "borderBottom", "borderLeft", "outline", "rounded", "shadow", "fontFamily", "fontSize", "lineHeight", "fontWeight", "textAlign", "textShadow", "theme", "classes", "className", "children"]);
return React.createElement(_typography.Text, (0, _extends2.default)({
is: component,
className: (0, _classnames.default)(classes.display, (_cn = {}, (0, _defineProperty2.default)(_cn, classes.zIndex, zIndex), (0, _defineProperty2.default)(_cn, classes.float, float), (0, _defineProperty2.default)(_cn, classes.position, position), (0, _defineProperty2.default)(_cn, classes.top, top), (0, _defineProperty2.default)(_cn, classes.right, right), (0, _defineProperty2.default)(_cn, classes.bottom, bottom), (0, _defineProperty2.default)(_cn, classes.left, left), (0, _defineProperty2.default)(_cn, classes.margin, m || mx || my || mt || mr || mb || ml), (0, _defineProperty2.default)(_cn, classes.padding, p || px || py || pt || pr || pb || pl), (0, _defineProperty2.default)(_cn, classes.minWidth, minSize || minWidth), (0, _defineProperty2.default)(_cn, classes.width, size || width), (0, _defineProperty2.default)(_cn, classes.maxWidth, maxSize || maxWidth), (0, _defineProperty2.default)(_cn, classes.minHeight, minSize || minHeight), (0, _defineProperty2.default)(_cn, classes.height, size || height), (0, _defineProperty2.default)(_cn, classes.maxHeight, maxSize || maxHeight), (0, _defineProperty2.default)(_cn, classes.ratio, ratio), (0, _defineProperty2.default)(_cn, classes.borderColor, borderColor), (0, _defineProperty2.default)(_cn, classes.border, border), (0, _defineProperty2.default)(_cn, classes.borderTop, borderTop), (0, _defineProperty2.default)(_cn, classes.borderRight, borderRight), (0, _defineProperty2.default)(_cn, classes.borderBottom, borderBottom), (0, _defineProperty2.default)(_cn, classes.borderLeft, borderLeft), (0, _defineProperty2.default)(_cn, classes.outline, outline), (0, _defineProperty2.default)(_cn, classes.rounded, rounded), (0, _defineProperty2.default)(_cn, classes.shadow, shadow), _cn), classNameProps),
family: fontFamily,
size: fontSize,
height: lineHeight,
weight: fontWeight,
align: textAlign,
shadow: textShadow
}, otherProps), children);
}
Box.defaultProps = {
is: 'div'
};
var _default = (0, _styles.withStyles)(styles)(Box);
exports.default = _default;