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;