react-misc-toolbox/dist/StyledModal.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.BODY = exports.EXIT_BUTTON = exports.BUTTONS = exports.HEADER = exports.MPM_HEADER = exports.CONTAINER = exports.USHIRO = exports.TAIL = exports.STEPS = exports.STEP = undefined;

var _defineProperty2 = require("babel-runtime/helpers/defineProperty");

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

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

var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);

var _templateObject = (0, _taggedTemplateLiteral3.default)(["\n  @media (max-width: ", "px) {\n    bottom: -15%;\n    right: 50%;\n    border-width: 0 0 1px 1px;\n  }\n  @media (min-width: ", "px) {\n    top: 50%;\n    right: 0;\n    border-width: 0 1px 1px 0;\n  }\n  display: block;\n  position: absolute;\n  z-index: 1;\n  width: 1rem;\n  height: 1rem;\n  border-style: solid;\n  transform: translateY(-50%) translateX(50%) rotate(-45deg);\n  transition: background-color 200ms;\n  border-color: ", ";\n  background-color: ", ";\n"], ["\n  @media (max-width: ", "px) {\n    bottom: -15%;\n    right: 50%;\n    border-width: 0 0 1px 1px;\n  }\n  @media (min-width: ", "px) {\n    top: 50%;\n    right: 0;\n    border-width: 0 1px 1px 0;\n  }\n  display: block;\n  position: absolute;\n  z-index: 1;\n  width: 1rem;\n  height: 1rem;\n  border-style: solid;\n  transform: translateY(-50%) translateX(50%) rotate(-45deg);\n  transition: background-color 200ms;\n  border-color: ", ";\n  background-color: ", ";\n"]),
    _templateObject2 = (0, _taggedTemplateLiteral3.default)(["\n  width: 100%;\n  display: flex;\n  @media (max-width: ", "px) {\n    flex-direction: column;\n  }\n  @media (min-width: ", "px) {\n    flex-direction: row;\n  }\n"], ["\n  width: 100%;\n  display: flex;\n  @media (max-width: ", "px) {\n    flex-direction: column;\n  }\n  @media (min-width: ", "px) {\n    flex-direction: row;\n  }\n"]),
    _templateObject3 = (0, _taggedTemplateLiteral3.default)(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  cursor: ", ";\n  height: 6rem;\n  padding: 1rem 2rem;\n  justify-content: flex-start;\n  border-style: solid;\n  border-color: ", ";\n  @media (min-width: ", "px) {\n    flex-basis: 100%;\n    border-width: 0 1px 1px 0;\n  }\n  @media (max-width: ", "px) {\n    flex-basis: auto;\n    border-width: 0 1px 1px 0;\n  }\n  transition: background-color 200ms;\n  ", ";\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  cursor: ", ";\n  height: 6rem;\n  padding: 1rem 2rem;\n  justify-content: flex-start;\n  border-style: solid;\n  border-color: ", ";\n  @media (min-width: ", "px) {\n    flex-basis: 100%;\n    border-width: 0 1px 1px 0;\n  }\n  @media (max-width: ", "px) {\n    flex-basis: auto;\n    border-width: 0 1px 1px 0;\n  }\n  transition: background-color 200ms;\n  ", ";\n"]),
    _templateObject4 = (0, _taggedTemplateLiteral3.default)(["\n  position: fixed;\n  height: 100%;\n  top: 0;\n  left: 0;\n  width: 100%;\n  background: ", ";\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  -webkit-tap-highlight-color: transparent;\n"], ["\n  position: fixed;\n  height: 100%;\n  top: 0;\n  left: 0;\n  width: 100%;\n  background: ", ";\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  -webkit-tap-highlight-color: transparent;\n"]),
    _templateObject5 = (0, _taggedTemplateLiteral3.default)(["\n  overflow-y: ", ";\n  background: ", ";\n  padding: ", ";\n  border-radius: ", ";\n"], ["\n  overflow-y: ", ";\n  background: ", ";\n  padding: ", ";\n  border-radius: ", ";\n"]),
    _templateObject6 = (0, _taggedTemplateLiteral3.default)(["\n  background: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  border-top: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n"], ["\n  background: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  border-top: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n"]),
    _templateObject7 = (0, _taggedTemplateLiteral3.default)(["\n  position: relative;\n  cursor: default;\n  z-index: 0;\n  background: ", ";\n  color: ", ";\n  margin: ", ";\n  border: ", ";\n  border-radius: ", ";\n"], ["\n  position: relative;\n  cursor: default;\n  z-index: 0;\n  background: ", ";\n  color: ", ";\n  margin: ", ";\n  border: ", ";\n  border-radius: ", ";\n"]),
    _templateObject8 = (0, _taggedTemplateLiteral3.default)(["\n  display: flex;\n  align-items: center;\n\n  padding: ", ";\n  margin: ", ";\n  border-bottom: ", ";\n  border-radius: ", ";\n  background: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n\n  padding: ", ";\n  margin: ", ";\n  border-bottom: ", ";\n  border-radius: ", ";\n  background: ", ";\n"]),
    _templateObject9 = (0, _taggedTemplateLiteral3.default)(["\n  padding: 0;\n"], ["\n  padding: 0;\n"]);

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _tinycolor = require("tinycolor2");

var _tinycolor2 = _interopRequireDefault(_tinycolor);

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

var backgroundColorTail = function backgroundColorTail(_ref) {
  var isOn = _ref.isOn,
      colors = _ref.colors,
      isDisabled = _ref.isDisabled;

  var getBackgroundColor = function getBackgroundColor(backgroundColorID) {
    return isOn ? colors.on[backgroundColorID] : colors.off[backgroundColorID];
  };
  if (isDisabled) {
    return "\n  background-color: " + colors.disabled.backgroundColor + ";\n  ";
  }
  return "\n  background-color: " + getBackgroundColor("backgroundColorA") + ";  \n  ";
};

var backgroundColor = function backgroundColor(_ref2) {
  var isOn = _ref2.isOn,
      colors = _ref2.colors,
      isDisabled = _ref2.isDisabled;

  var getBackgroundColor = function getBackgroundColor(backgroundColorID) {
    return isOn ? colors.on[backgroundColorID] : colors.off[backgroundColorID];
  };
  if (isDisabled) {
    return "    \n  background-color: " + colors.disabled.backgroundColor + ";\n  ";
  }
  return "\n  background-color: " + getBackgroundColor("backgroundColorA") + ";\n  :hover {\n    background-color: " + getBackgroundColor("backgroundColorB") + ";\n  }\n  :active {\n    background-color: " + getBackgroundColor("backgroundColorC") + ";\n  }\n  &:hover " + TAIL + " {\n    background-color: " + getBackgroundColor("backgroundColorB") + ";\n  }\n  &:active " + TAIL + " {\n    background-color: " + getBackgroundColor("backgroundColorC") + ";\n  }\n  ";
};

var TAIL = (0, _styledComponents2.default)("div")(_templateObject, function (_ref3) {
  var flexDirectionThreshold = _ref3.flexDirectionThreshold;
  return flexDirectionThreshold;
}, function (_ref4) {
  var flexDirectionThreshold = _ref4.flexDirectionThreshold;
  return flexDirectionThreshold;
}, function (_ref5) {
  var isDisabled = _ref5.isDisabled,
      colors = _ref5.colors;
  return isDisabled ? colors.disabled.backgroundColor : colors.on.backgroundColorC;
}, function (_ref6) {
  var isOn = _ref6.isOn,
      colors = _ref6.colors,
      isDisabled = _ref6.isDisabled;
  return !isDisabled ? isOn ? colors.on.backgroundColorA : colors.off.backgroundColorA : colors.disabled.backgroundColor;
});

var STEPS = _styledComponents2.default.div(_templateObject2, function (_ref7) {
  var flexDirectionThreshold = _ref7.flexDirectionThreshold;
  return flexDirectionThreshold;
}, function (_ref8) {
  var flexDirectionThreshold = _ref8.flexDirectionThreshold;
  return flexDirectionThreshold;
});

var STEP = (0, _styledComponents2.default)("div")(_templateObject3, function (_ref9) {
  var isDisabled = _ref9.isDisabled;
  return isDisabled ? "default" : "pointer";
}, function (_ref10) {
  var isDisabled = _ref10.isDisabled,
      colors = _ref10.colors;
  return isDisabled ? colors.disabled.backgroundColor : colors.on.backgroundColorC;
}, function (_ref11) {
  var flexDirectionThreshold = _ref11.flexDirectionThreshold;
  return flexDirectionThreshold;
}, function (_ref12) {
  var flexDirectionThreshold = _ref12.flexDirectionThreshold;
  return flexDirectionThreshold;
}, backgroundColor);

var USHIRO = _styledComponents2.default.div(_templateObject4, function (_ref13) {
  var theme = _ref13.theme;
  return theme.modaldialog.ushiro.background;
});
USHIRO.defaultProps = {
  theme: {
    modaldialog: {
      ushiro: {
        background: "rgba(0, 0, 0, 0.5)"
      }
    }
  }
};
var BODY = _styledComponents2.default.div(_templateObject5, function (_ref14) {
  var theme = _ref14.theme;
  return theme.modaldialog.body.overflowY;
}, function (_ref15) {
  var theme = _ref15.theme;
  return theme.modaldialog.body.background;
}, function (_ref16) {
  var theme = _ref16.theme;
  return theme.modaldialog.body.padding;
}, function (_ref17) {
  var hasheader = _ref17.hasheader,
      hasfooter = _ref17.hasfooter,
      theme = _ref17.theme;
  return (hasheader ? "0 0" : theme.modaldialog.body.borderRadius + " " + theme.modaldialog.body.borderRadius) + " " + (hasfooter ? "0 0" : theme.modaldialog.body.borderRadius + " " + theme.modaldialog.body.borderRadius);
});
BODY.defaultProps = {
  hasfooter: "false",
  hasheader: "false",
  theme: {
    modaldialog: {
      body: {
        background: "#fdfdfd",
        padding: "2.4rem 2rem",
        overflowY: "auto",
        borderRadius: "1rem"
      }
    }
  }
};
var EXIT_BUTTON = _styledComponents2.default.div(function (_ref18) {
  var _ref19;

  var theme = _ref18.theme;
  return theme.modaldialog && theme.modaldialog.exitbutton ? {
    zIndex: "2",
    position: "fixed",
    cursor: "pointer",
    background: theme.modaldialog.exitbutton.background,
    height: theme.modaldialog.exitbutton.height,
    width: theme.modaldialog.exitbutton.width,
    border: theme.modaldialog.exitbutton.border,
    top: theme.modaldialog.exitbutton.top,
    right: theme.modaldialog.exitbutton.right,
    borderRadius: "1rem",
    display: "flex"
  } : (_ref19 = {
    zIndex: "2",
    position: "fixed",
    cursor: "pointer"
  }, (0, _defineProperty3.default)(_ref19, "zIndex", 2), (0, _defineProperty3.default)(_ref19, "top", "2rem"), (0, _defineProperty3.default)(_ref19, "right", "2rem"), (0, _defineProperty3.default)(_ref19, "position", "fixed"), (0, _defineProperty3.default)(_ref19, "height", "1.75rem"), (0, _defineProperty3.default)(_ref19, "width", "1.75rem"), (0, _defineProperty3.default)(_ref19, "background", "#fff"), (0, _defineProperty3.default)(_ref19, "border", "1px solid #575757"), (0, _defineProperty3.default)(_ref19, "borderRadius", "1rem"), (0, _defineProperty3.default)(_ref19, "display", "flex"), _ref19);
});
// const EXIT_BUTTON = styled.div`
//   z-index: 2;
//   position: fixed;
//   cursor: pointer;
//   background: ${({ theme }) => theme.modaldialog.exitbutton.background};
//   height: ${({ theme }) => theme.modaldialog.exitbutton.height};
//   width: ${({ theme }) => theme.modaldialog.exitbutton.width};
//   border: ${({ theme }) => theme.modaldialog.exitbutton.border};
//   top: ${({ theme }) => theme.modaldialog.exitbutton.top};
//   right: ${({ theme }) => theme.modaldialog.exitbutton.right};
//   border-radius: 1rem;
//   display: flex;
// `
EXIT_BUTTON.defaultProps = {
  theme: {
    modaldialog: {
      exitbutton: {
        zIndex: 2,
        top: "2rem",
        right: "2rem",
        position: "fixed",
        height: "1.75rem",
        width: "1.75rem",

        background: "#fff",
        border: "1px solid #575757"
      }
    }
  }
};

var BUTTONS = _styledComponents2.default.div(_templateObject6, function (_ref20) {
  var theme = _ref20.theme;
  return theme.modaldialog.buttons.background;
}, function (_ref21) {
  var theme = _ref21.theme;
  return theme.modaldialog.buttons.padding;
}, function (_ref22) {
  var theme = _ref22.theme;
  return theme.modaldialog.buttons.borderRadius;
}, function (_ref23) {
  var theme = _ref23.theme;
  return theme.modaldialog.buttons.borderTop;
});

BUTTONS.defaultProps = {
  theme: {
    modaldialog: {
      buttons: {
        borderTop: "1px solid #575757",
        borderRadius: "0 0 0.375rem 0.375rem",
        padding: "0.5rem",
        background: "#fafafa"
      }
    }
  }
};

var CONTAINER = _styledComponents2.default.div(_templateObject7, function (_ref24) {
  var theme = _ref24.theme;
  return theme.modaldialog.container.background;
}, function (_ref25) {
  var theme = _ref25.theme;
  return theme.modaldialog.container.color;
}, function (_ref26) {
  var theme = _ref26.theme;
  return theme.modaldialog.container.margin;
}, function (_ref27) {
  var theme = _ref27.theme;
  return theme.modaldialog.container.border;
}, function (_ref28) {
  var theme = _ref28.theme;
  return theme.modaldialog.container.borderRadius;
});

CONTAINER.defaultProps = {
  theme: {
    modaldialog: {
      container: {
        margin: "0 1rem",
        border: "1px solid #575757",
        borderRadius: "0.375rem",
        color: "#020202",
        background: "#fff"
      }
    }
  }
};

var HEADER = _styledComponents2.default.div(_templateObject8, function (_ref29) {
  var theme = _ref29.theme;
  return theme.modaldialog.header.padding;
}, function (_ref30) {
  var theme = _ref30.theme;
  return theme.modaldialog.header.margin;
}, function (_ref31) {
  var theme = _ref31.theme;
  return theme.modaldialog.header.borderBottom;
}, function (_ref32) {
  var theme = _ref32.theme;
  return theme.modaldialog.header.borderRadius;
}, function (_ref33) {
  var theme = _ref33.theme;
  return theme.modaldialog.header.background;
});

HEADER.defaultProps = {
  theme: {
    modaldialog: {
      header: {
        margin: "0",
        padding: "2rem 2rem 1.5rem 2rem",
        borderBottom: "0.5rem solid #f0f0f0",
        borderRadius: "0.375rem 0.375rem 0 0 ",
        background: "#fafafa"
      }
    }
  }
};

var MPM_HEADER = (0, _styledComponents2.default)(HEADER)(_templateObject9);

exports.STEP = STEP;
exports.STEPS = STEPS;
exports.TAIL = TAIL;
exports.USHIRO = USHIRO;
exports.CONTAINER = CONTAINER;
exports.MPM_HEADER = MPM_HEADER;
exports.HEADER = HEADER;
exports.BUTTONS = BUTTONS;
exports.EXIT_BUTTON = EXIT_BUTTON;
exports.BODY = BODY;