react-misc-toolbox/dist/StyledDiagram.js

- [ ] diagramexample | optimize creating from blank slate

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CONTAINER = exports.ROW = exports.CELLCONTAINER = exports.CELL = exports.BOX = exports.TEXT = exports.colorScheme = undefined;

var _taggedTemplateLiteral2 = require("babel-runtime/helpers/taggedTemplateLiteral");

var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);

var _templateObject = (0, _taggedTemplateLiteral3.default)(["\n  display: flex;\n  position: absolute;\n"], ["\n  display: flex;\n  position: absolute;\n"]),
    _templateObject2 = (0, _taggedTemplateLiteral3.default)(["\n  display: flex;\n  position: absolute;\n\n  justify-content: center;\n  align-items: center;\n  min-height: ", ";\n  min-width: ", ";\n  /* transform: ", "; */\n\n  background-color: ", ";\n  color: ", ";\n  border: ", ";\n"], ["\n  display: flex;\n  position: absolute;\n\n  justify-content: center;\n  align-items: center;\n  min-height: ", ";\n  min-width: ", ";\n  /* transform: ", "; */\n\n  background-color: ", ";\n  color: ", ";\n  border: ", ";\n"]),
    _templateObject3 = (0, _taggedTemplateLiteral3.default)(["\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  justify-content: center;\n"], ["\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  justify-content: center;\n"]),
    _templateObject4 = (0, _taggedTemplateLiteral3.default)(["\n  display: flex;\n"], ["\n  display: flex;\n"]),
    _templateObject5 = (0, _taggedTemplateLiteral3.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n"]),
    _templateObject6 = (0, _taggedTemplateLiteral3.default)(["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 8rem;\n  border: ", ";\n\n  border-radius: ", ";\n  width: 12rem;\n  background-color: ", ";\n\n  background-image: ", ";\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 8rem;\n  border: ", ";\n\n  border-radius: ", ";\n  width: 12rem;\n  background-color: ", ";\n\n  background-image: ", ";\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n"]);

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _tinycolor = require("tinycolor2");

var _tinycolor2 = _interopRequireDefault(_tinycolor);

var _images = require("../static/images");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var arrowURLs = (0, _images.getArrowURLs)("../../static");

var colorScheme = {
  1: "#ccccff",
  0: "#ffffcc",
  2: "#ccffcc",
  3: "#aaeeff"
};

var TEXT = _styledComponents2.default.div(_templateObject);
var BOX = _styledComponents2.default.div(_templateObject2, function (_ref) {
  var type = _ref.type;

  switch (type) {
    case 20:
    case 10:
      return "3rem";
    default:
      return "auto";
  }
}, function (_ref2) {
  var type = _ref2.type;

  switch (type) {
    case 20:
    case 10:
      return "3rem";
    default:
      return "auto";
  }
}, function (_ref3) {
  var type = _ref3.type;

  switch (type) {
    case 20:
      return "rotate(135deg)";
    default:
      return "rotate(135deg)";
  }
}, function (_ref4) {
  var type = _ref4.type;

  switch (type) {
    case 20:
      return "#ffaaaa";
    default:
      return "white";
  }
}, function (_ref5) {
  var type = _ref5.type;

  switch (type) {
    case 20:
      return "white";
    default:
      return "black";
  }
}, function (_ref6) {
  var type = _ref6.type;

  switch (type) {
    default:
      return "1px solid black";
  }
});

var CONTAINER = _styledComponents2.default.div(_templateObject3);

var ROW = _styledComponents2.default.div(_templateObject4);

var CELLCONTAINER = _styledComponents2.default.div(_templateObject5);
var CELL = _styledComponents2.default.div(_templateObject6, function (_ref7) {
  var type = _ref7.type,
      isOn = _ref7.isOn;

  switch (type) {
    case 0:
    case 1:
    case 2:
    case 3:
      {
        if (!isOn) {
          return "1px solid #eee";
        } else {
          return "1px solid #333";
        }
      }
    // case 10:
    //   return "1px solid #aaf"
    // case 20:
    //   return "1px solid #faa"
  }
}, function (_ref8) {
  var type = _ref8.type;

  switch (type) {
    case 0:
    case 2:
      return "30%";
    case 1:
    case 3:
      return "0%";
    // case 20:
    //   return "100%"
  }
}, function (_ref9) {
  var type = _ref9.type;
  return colorScheme[type];
}, function (_ref10) {
  var image = _ref10.image;

  if (image === "w_e") return "url(\"" + arrowURLs.right + "\")";
  if (image === "e_w") return "url(\"" + arrowURLs.left + "\")";
  if (image === "n_s") return "url(\"" + arrowURLs.down + "\")";
  if (image === "s_n") return "url(\"" + arrowURLs.up + "\")";
  if (image === "nw_se") return "url(\"" + arrowURLs.downRight + "\")";
  if (image === "ne_sw") return "url(\"" + arrowURLs.downLeft + "\")";
  if (image === "sw_ne") return "url(\"" + arrowURLs.upRight + "\")";
  if (image === "se_nw") return "url(\"" + arrowURLs.upLeft + "\")";
});

exports.colorScheme = colorScheme;
exports.TEXT = TEXT;
exports.BOX = BOX;
exports.CELL = CELL;
exports.CELLCONTAINER = CELLCONTAINER;
exports.ROW = ROW;
exports.CONTAINER = CONTAINER;