@netdata/netdata-ui/dist/components/templates/layer/container.js

netdata UI kit

"use strict";

exports.__esModule = true;
exports["default"] = void 0;
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _alignItems = _interopRequireDefault(require("../mixins/alignItems"));
var _alignContent = _interopRequireDefault(require("../mixins/alignContent"));
var _justifyContent = _interopRequireDefault(require("../mixins/justifyContent"));
var _getMarginDimensions = _interopRequireDefault(require("./mixins/getMarginDimensions"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
var getCalc = function getCalc(from, to) {
  if (from !== "0" && to !== "0") return "calc((100% - " + from + ") - " + to + ")";
  if (from === "0" && to === "0") return "100%";
  return "calc(100% - " + (from === "0" ? to : from) + ")";
};
var maxHeight = function maxHeight(_ref) {
  var _ref$marginDimensions = _ref.marginDimensions,
    top = _ref$marginDimensions.top,
    bottom = _ref$marginDimensions.bottom;
  return "max-height: " + getCalc(top, bottom) + ";";
};
var maxWidth = function maxWidth(_ref2) {
  var _ref2$marginDimension = _ref2.marginDimensions,
    right = _ref2$marginDimension.right,
    left = _ref2$marginDimension.left;
  return "max-width: " + getCalc(left, right) + ";";
};
var hCenterAlignPositions = new Set(["top", "center", "bottom"]);
var leftAlignPositions = new Set(["bottom-left", "left", "top-left"]);
var styledLeft = function styledLeft(_ref3) {
  var position = _ref3.position,
    full = _ref3.full,
    marginDimensions = _ref3.marginDimensions;
  if (full === "horizontal" || full === true || leftAlignPositions.has(position)) {
    return "left: " + marginDimensions.left + ";";
  }
  if (hCenterAlignPositions.has(position)) {
    return "left: 50%;";
  }
  return "";
};
var vCenterAlignPositions = new Set(["right", "center", "left"]);
var topAlignPositions = new Set(["top-left", "top", "top-right"]);
var styledTop = function styledTop(_ref4) {
  var position = _ref4.position,
    full = _ref4.full,
    marginDimensions = _ref4.marginDimensions;
  if (full === "vertical" || full === true || topAlignPositions.has(position)) {
    return "top: " + marginDimensions.top + ";";
  }
  if (vCenterAlignPositions.has(position)) {
    return "top: 50%;";
  }
  return "";
};
var rightAlignPositions = new Set(["top-right", "right", "bottom-right"]);
var styledRight = function styledRight(_ref5) {
  var position = _ref5.position,
    full = _ref5.full,
    marginDimensions = _ref5.marginDimensions;
  if (full === "horizontal" || full === true || rightAlignPositions.has(position)) {
    return "right: " + marginDimensions.right + ";";
  }
  return "";
};
var bottomAlignPositions = new Set(["bottom-right", "bottom", "bottom-left"]);
var styledBottom = function styledBottom(_ref6) {
  var position = _ref6.position,
    full = _ref6.full,
    marginDimensions = _ref6.marginDimensions;
  if (full === "vertical" || full === true || bottomAlignPositions.has(position)) {
    return "bottom: " + marginDimensions.bottom + ";";
  }
  return "";
};
var transform = function transform(_ref7) {
  var full = _ref7.full,
    position = _ref7.position;
  var getValue = function getValue() {
    var left = full !== true && full !== "horizontal" && hCenterAlignPositions.has(position);
    var top = full !== true && full !== "vertical" && vCenterAlignPositions.has(position);
    if (!left && !top) return "";
    if (left && !top) return "translateX(-50%)";
    if (!left && top) return "translateY(-50%)";
    return "translate(-50%, -50%)";
  };
  var value = getValue();
  return value && "transform: " + value + ";";
};
var boxShadow = function boxShadow(_ref8) {
  var borderShadow = _ref8.borderShadow;
  return borderShadow && "box-shadow: 0px 2px 68px rgba(0, 0, 0, 0.288);";
};
var zIndex = function zIndex(_ref9) {
  var _ref9$zIndex = _ref9.zIndex,
    zIndex = _ref9$zIndex === void 0 ? 35 : _ref9$zIndex;
  return "z-index: " + zIndex + ";";
};
var Container = _styledComponents["default"].div.attrs(function (_ref10) {
  var theme = _ref10.theme,
    margin = _ref10.margin;
  return {
    marginDimensions: (0, _getMarginDimensions["default"])(theme, margin)
  };
}).withConfig({
  displayName: "container__Container",
  componentId: "sc-k2hlzf-0"
})(["position:", ";display:flex;outline:none;pointer-events:all;", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], function (_ref11) {
  var isAbsolute = _ref11.isAbsolute;
  return isAbsolute ? "absolute" : "fixed";
}, _alignItems["default"], _alignContent["default"], _justifyContent["default"], maxHeight, maxWidth, styledTop, styledRight, styledBottom, styledLeft, transform, boxShadow, zIndex);
var _default = exports["default"] = Container;