@kiwicom/orbit-components/lib/Stack/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var React = _interopRequireWildcard(require("react"));

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var _media = _interopRequireDefault(require("../utils/media"));

var _defaultTokens = _interopRequireDefault(require("../defaultTokens"));

var _consts = require("./consts");

var _Button = require("../Button");

var _getSpacingToken = _interopRequireDefault(require("../common/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)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n      & > * {\n        margin: ", ";\n      }\n\n      // TODO other block components\n      & > ", " {\n        align-self: ", ";\n      }\n\n      ", "\n    "]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } 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 ".concat(tokens[finalType][finalSpacing], " 0") : "0 ".concat(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, _styledComponents.default)(function (_ref3) {
  var className = _ref3.className,
      children = _ref3.children;
  return React.createElement("div", {
    className: className
  }, children);
}).withConfig({
  displayName: "Stack__StyledStack",
  componentId: "sc-1t576ow-0"
})(["display:", ";flex-direction:", ";flex-wrap:", ";flex-grow:", ";flex-shrink:", ";flex-basis:", ";justify-content:", ";align-content:", ";align-items:", ";margin-bottom:", ";align-self:", ";& > *{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 align = _ref11.align,
      direction = _ref11.direction,
      flex = _ref11.flex;
  return flex && (direction === _consts.DIRECTIONS.COLUMN || align) && getAlign(align);
}, function (_ref12) {
  var align = _ref12.align,
      direction = _ref12.direction,
      flex = _ref12.flex;
  return flex && (direction === _consts.DIRECTIONS.COLUMN || align) && getAlign(align);
}, _getSpacingToken.default, function (_ref13) {
  var inline = _ref13.inline,
      flex = _ref13.flex;
  return flex && !inline && "stretch";
}, function (_ref14) {
  var align = _ref14.align;
  return align !== _consts.ALIGNS.EVEN && getSpacing();
}, _Button.StyledButton, function (_ref15) {
  var align = _ref15.align;
  return getAlign(align, true);
}, _media.default.desktop(_templateObject(), getSpacing(true), _Button.StyledButton, function (_ref16) {
  var desktop = _ref16.desktop,
      align = _ref16.align;
  return desktop && desktop.align !== align && getAlign(desktop.align === _consts.ALIGNS.EVEN ? _consts.ALIGNS.START : desktop.align);
}, function (_ref17) {
  var desktop = _ref17.desktop;
  return desktop && (0, _styledComponents.css)(["display:", ";flex-direction:", ";flex-wrap:", ";flex-grow:", ";flex-shrink:", ";flex-basis:", ";justify-content:", ";align-content:", ";align-items:", ";margin-bottom:", ";"], function (_ref18) {
    var inline = _ref18.inline;
    return isDefined(desktop.inline) && inline !== desktop.inline && (desktop.inline ? "inline-flex" : "flex");
  }, function (_ref19) {
    var direction = _ref19.direction;
    return isDefined(desktop.direction) && direction !== desktop.direction && (desktop.direction === _consts.DIRECTIONS.ROW ? "row" : "column");
  }, function (_ref20) {
    var wrap = _ref20.wrap;
    return isDefined(desktop.wrap) && wrap !== desktop.wrap && (desktop.wrap ? "wrap" : "nowrap");
  }, function (_ref21) {
    var grow = _ref21.grow;
    return isDefined(desktop.grow) && grow !== desktop.grow && (desktop.grow ? "1" : "0");
  }, function (_ref22) {
    var shrink = _ref22.shrink;
    return isDefined(desktop.shrink) && shrink !== desktop.shrink && (desktop.shrink ? "1" : "0");
  }, function (_ref23) {
    var basis = _ref23.basis;
    return isDefined(desktop.basis) && basis !== desktop.basis && desktop.basis;
  }, function (_ref24) {
    var flex = _ref24.flex,
        align = _ref24.align,
        direction = _ref24.direction;
    return flex && desktop && desktop.direction && (direction !== desktop.direction || align !== desktop.align) && desktop.direction === _consts.DIRECTIONS.ROW && getAlign(desktop.align || align);
  }, function (_ref25) {
    var align = _ref25.align,
        direction = _ref25.direction,
        flex = _ref25.flex;
    return flex && desktop && desktop.direction && (direction !== desktop.direction || align !== desktop.align) && desktop.direction === _consts.DIRECTIONS.COLUMN && getAlign(desktop.align || align);
  }, function (_ref26) {
    var align = _ref26.align,
        direction = _ref26.direction,
        flex = _ref26.flex;
    return flex && desktop && desktop.direction && (direction !== desktop.direction || align !== desktop.align) && desktop.direction === _consts.DIRECTIONS.COLUMN && getAlign(desktop.align || align);
  }, function (_ref27) {
    var theme = _ref27.theme,
        spaceAfter = _ref27.spaceAfter;
    return isDefined(desktop.spaceAfter) && spaceAfter !== desktop.spaceAfter && (0, _getSpacingToken.default)({
      spaceAfter: desktop.spaceAfter,
      theme: theme
    });
  });
}));
StyledStack.defaultProps = {
  theme: _defaultTokens.default
};

var Stack = function Stack(props) {
  var _props$inline = props.inline,
      inline = _props$inline === void 0 ? false : _props$inline,
      _props$direction = props.direction,
      direction = _props$direction === void 0 ? _consts.DIRECTIONS.COLUMN : _props$direction,
      _props$spacing = props.spacing,
      spacing = _props$spacing === void 0 ? _consts.SPACINGS.NATURAL : _props$spacing,
      _props$align = props.align,
      align = _props$align === void 0 ? _consts.ALIGNS.START : _props$align,
      _props$grow = props.grow,
      grow = _props$grow === void 0 ? true : _props$grow,
      _props$wrap = props.wrap,
      wrap = _props$wrap === void 0 ? false : _props$wrap,
      _props$shrink = props.shrink,
      shrink = _props$shrink === void 0 ? 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);
};

var _default = Stack;
exports.default = _default;