@kiwicom/orbit-components
Version:
<div align="center"> <a href="https://orbit.kiwi" target="_blank"> <img alt="orbit-components" src="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components.png" srcset="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components@2x.png 2x"
225 lines (192 loc) • 10.8 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _templateObject = _taggedTemplateLiteral(["\n & > * {\n margin: ", ";\n }\n \n // TODO other block components\n & > ", " {\n align-self: ", ";\n }\n \n ", "\n "], ["\n & > * {\n margin: ", ";\n }\n \n // TODO other block components\n & > ", " {\n align-self: ", ";\n }\n \n ", "\n "]);
var _react = require("react");
var React = _interopRequireWildcard(_react);
var _styledComponents = require("styled-components");
var _styledComponents2 = _interopRequireDefault(_styledComponents);
var _media = require("../utils/media");
var _media2 = _interopRequireDefault(_media);
var _defaultTokens = require("../defaultTokens");
var _defaultTokens2 = _interopRequireDefault(_defaultTokens);
var _consts = require("./consts");
var _Button = require("../Button");
var _getSpacingToken = require("../common/getSpacingToken");
var _getSpacingToken2 = _interopRequireDefault(_getSpacingToken);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
// TODO: use tokens for spacings
var getSpacing = function getSpacing() {
var isDesktop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
return function (_ref) {
var spacing = _ref.spacing,
direction = _ref.direction,
desktop = _ref.desktop;
return function () {
var _TOKENS$SPACING, _TOKENS$MOBILESPACING, _tokens;
var finalSpacing = isDesktop && desktop && desktop.spacing || spacing;
var finalDirection = isDesktop && desktop && desktop.direction || direction;
var finalType = isDesktop ? _consts.TOKENS.SPACING : _consts.TOKENS.MOBILESPACING;
var tokens = (_tokens = {}, _defineProperty(_tokens, _consts.TOKENS.SPACING, (_TOKENS$SPACING = {}, _defineProperty(_TOKENS$SPACING, _consts.SPACINGS.EXTRATIGHT, "2px"), _defineProperty(_TOKENS$SPACING, _consts.SPACINGS.TIGHT, "4px"), _defineProperty(_TOKENS$SPACING, _consts.SPACINGS.CONDENSED, "8px"), _defineProperty(_TOKENS$SPACING, _consts.SPACINGS.COMPACT, "12px"), _defineProperty(_TOKENS$SPACING, _consts.SPACINGS.NATURAL, "16px"), _defineProperty(_TOKENS$SPACING, _consts.SPACINGS.COMFY, "24px"), _defineProperty(_TOKENS$SPACING, _consts.SPACINGS.LOOSE, "32px"), _defineProperty(_TOKENS$SPACING, _consts.SPACINGS.EXTRALOOSE, "40px"), _TOKENS$SPACING)), _defineProperty(_tokens, _consts.TOKENS.MOBILESPACING, (_TOKENS$MOBILESPACING = {}, _defineProperty(_TOKENS$MOBILESPACING, _consts.SPACINGS.EXTRATIGHT, "2px"), _defineProperty(_TOKENS$MOBILESPACING, _consts.SPACINGS.TIGHT, "4px"), _defineProperty(_TOKENS$MOBILESPACING, _consts.SPACINGS.CONDENSED, "8px"), _defineProperty(_TOKENS$MOBILESPACING, _consts.SPACINGS.COMPACT, "12px"), _defineProperty(_TOKENS$MOBILESPACING, _consts.SPACINGS.NATURAL, "16px"), _defineProperty(_TOKENS$MOBILESPACING, _consts.SPACINGS.COMFY, "20px"), _defineProperty(_TOKENS$MOBILESPACING, _consts.SPACINGS.LOOSE, "28px"), _defineProperty(_TOKENS$MOBILESPACING, _consts.SPACINGS.EXTRALOOSE, "36px"), _TOKENS$MOBILESPACING)), _tokens);
// TODO: rtl here
return finalDirection === _consts.DIRECTIONS.COLUMN ? "0 0 " + tokens[finalType][finalSpacing] + " 0" : "0 " + tokens[finalType][finalSpacing] + " 0 0";
};
};
};
var getAlign = function getAlign() {
var _tokens2;
var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _consts.ALIGNS.START;
var self = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var align = self && name === _consts.ALIGNS.EVEN ? _consts.ALIGNS.START : name;
var tokens = (_tokens2 = {}, _defineProperty(_tokens2, _consts.ALIGNS.START, "flex-start"), _defineProperty(_tokens2, _consts.ALIGNS.END, "flex-end"), _defineProperty(_tokens2, _consts.ALIGNS.CENTER, "center"), _defineProperty(_tokens2, _consts.ALIGNS.EVEN, "space-between"), _tokens2);
return tokens[align];
};
var isDefined = function isDefined(property) {
return function (_ref2) {
var flex = _ref2.flex,
desktop = _ref2.desktop;
return flex && desktop && typeof property !== "undefined";
};
};
var StyledStack = (0, _styledComponents2.default)(function (_ref3) {
var className = _ref3.className,
children = _ref3.children;
return React.createElement(
"div",
{ className: className },
children
);
}).withConfig({
displayName: "Stack__StyledStack"
})(["display:", ";flex-direction:", ";flex-wrap:", ";flex-grow:", ";flex-shrink:", ";flex-basis:", ";justify-content:", ";align-items:", ";align-content:", ";margin-bottom:", ";& > *{margin:", ";&:last-child{margin:0;}}& > ", "{align-self:", ";}", ";"], function (_ref4) {
var inline = _ref4.inline,
flex = _ref4.flex;
return flex && (inline ? "inline-flex" : "flex");
}, function (_ref5) {
var direction = _ref5.direction,
flex = _ref5.flex;
return flex && (direction === _consts.DIRECTIONS.ROW ? "row" : "column");
}, function (_ref6) {
var wrap = _ref6.wrap,
flex = _ref6.flex;
return flex && (wrap ? "wrap" : "nowrap");
}, function (_ref7) {
var grow = _ref7.grow,
flex = _ref7.flex;
return flex && (grow ? "1" : "0");
}, function (_ref8) {
var shrink = _ref8.shrink,
flex = _ref8.flex;
return flex && (shrink ? "1" : "0");
}, function (_ref9) {
var basis = _ref9.basis,
flex = _ref9.flex;
return flex && basis;
}, function (_ref10) {
var flex = _ref10.flex,
align = _ref10.align,
direction = _ref10.direction;
return flex && (direction === _consts.DIRECTIONS.ROW || align) && getAlign(align);
}, function (_ref11) {
var flex = _ref11.flex;
return flex && "stretch";
}, function (_ref12) {
var align = _ref12.align,
direction = _ref12.direction,
flex = _ref12.flex;
return flex && (direction === _consts.DIRECTIONS.COLUMN || align) && getAlign(align);
}, _getSpacingToken2.default, function (_ref13) {
var align = _ref13.align;
return align !== _consts.ALIGNS.EVEN && getSpacing();
}, _Button.StyledButton, function (_ref14) {
var align = _ref14.align;
return getAlign(align, true);
}, _media2.default.desktop(_templateObject, getSpacing(true), _Button.StyledButton, function (_ref15) {
var desktop = _ref15.desktop,
align = _ref15.align;
return desktop && desktop.align !== align && getAlign(desktop.align === _consts.ALIGNS.EVEN ? _consts.ALIGNS.START : desktop.align);
}, function (_ref16) {
var desktop = _ref16.desktop;
return desktop && (0, _styledComponents.css)(["display:", ";flex-direction:", ";flex-wrap:", ";flex-grow:", ";flex-shrink:", ";flex-basis:", ";justify-content:", ";align-content:", ";"], function (_ref17) {
var inline = _ref17.inline;
return isDefined(desktop.inline) && inline !== desktop.inline && (desktop.inline ? "inline-flex" : "flex");
}, function (_ref18) {
var direction = _ref18.direction,
flex = _ref18.flex;
return flex && desktop && typeof desktop.direction !== "undefined" && direction !== desktop.direction && (desktop.direction === _consts.DIRECTIONS.ROW ? "row" : "column");
}, function (_ref19) {
var wrap = _ref19.wrap,
flex = _ref19.flex;
return flex && desktop && typeof desktop.wrap !== "undefined" && wrap !== desktop.wrap && (desktop.wrap ? "wrap" : "nowrap");
}, function (_ref20) {
var grow = _ref20.grow,
flex = _ref20.flex;
return flex && desktop && typeof desktop.grow !== "undefined" && grow !== desktop.grow && (desktop.grow ? "1" : "0");
}, function (_ref21) {
var shrink = _ref21.shrink,
flex = _ref21.flex;
return flex && desktop && typeof desktop.shrink !== "undefined" && shrink !== desktop.shrink && (desktop.shrink ? "1" : "0");
}, function (_ref22) {
var basis = _ref22.basis,
flex = _ref22.flex;
return flex && desktop && typeof desktop.basis !== "undefined" && basis !== desktop.basis && desktop.basis;
}, function (_ref23) {
var flex = _ref23.flex,
align = _ref23.align,
direction = _ref23.direction;
return flex && desktop && desktop.direction && (direction !== desktop.direction || align !== desktop.align) && desktop.direction === _consts.DIRECTIONS.ROW && getAlign(desktop.align || align);
}, function (_ref24) {
var align = _ref24.align,
direction = _ref24.direction,
flex = _ref24.flex;
return flex && desktop && desktop.direction && (direction !== desktop.direction || align !== desktop.align) && desktop.direction === _consts.DIRECTIONS.COLUMN && getAlign(desktop.align || align);
});
}));
StyledStack.defaultProps = {
theme: _defaultTokens2.default
};
var Stack = function Stack(props) {
var _props$inline = props.inline,
inline = _props$inline === undefined ? false : _props$inline,
_props$direction = props.direction,
direction = _props$direction === undefined ? _consts.DIRECTIONS.COLUMN : _props$direction,
_props$spacing = props.spacing,
spacing = _props$spacing === undefined ? _consts.SPACINGS.NATURAL : _props$spacing,
_props$align = props.align,
align = _props$align === undefined ? _consts.ALIGNS.START : _props$align,
_props$grow = props.grow,
grow = _props$grow === undefined ? true : _props$grow,
_props$wrap = props.wrap,
wrap = _props$wrap === undefined ? false : _props$wrap,
_props$shrink = props.shrink,
shrink = _props$shrink === undefined ? false : _props$shrink,
basis = props.basis,
desktop = props.desktop,
spaceAfter = props.spaceAfter,
children = props.children;
var flex = Object.keys(props).map(function (item) {
return !(item === "children" || item === "spaceAfter" || item === "spacing");
}).includes(true);
return React.createElement(
StyledStack,
{
flex: flex,
direction: direction,
align: align,
wrap: wrap,
grow: grow,
basis: basis,
inline: inline,
shrink: shrink,
spacing: spacing,
spaceAfter: spaceAfter,
desktop: desktop
},
children
);
};
exports.default = Stack;