instantjob-recruiter-client/dist/components/utils/button.js

a set of tools for creating an instantjob recruiter react client

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

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

var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n  display: flex;\n  ', '\n'], ['\n  display: flex;\n  ', '\n']),
    _templateObject2 = (0, _taggedTemplateLiteral3.default)(['\n    position: relative;\n    height: 40px;\n    width: 40px;\n  '], ['\n    position: relative;\n    height: 40px;\n    width: 40px;\n  ']),
    _templateObject3 = (0, _taggedTemplateLiteral3.default)(['\n  font-size: 16px;\n  padding: 10px 14px 8px 14px;\n  border-radius: 3px;\n  border: none;\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  text-align: center;\n  text-transform: uppercase;\n\n  ', '\n  ', '\n'], ['\n  font-size: 16px;\n  padding: 10px 14px 8px 14px;\n  border-radius: 3px;\n  border: none;\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  text-align: center;\n  text-transform: uppercase;\n\n  ', '\n  ', '\n']),
    _templateObject4 = (0, _taggedTemplateLiteral3.default)(['\n    ', ';\n    padding-left: 0;\n    padding-right: 0;\n  '], ['\n    ', ';\n    padding-left: 0;\n    padding-right: 0;\n  ']),
    _templateObject5 = (0, _taggedTemplateLiteral3.default)(['\n      color: white;\n    '], ['\n      color: white;\n    ']),
    _templateObject6 = (0, _taggedTemplateLiteral3.default)(['\n      color: ', ';\n      &:hover {\n        opacity: 1;\n        color: ', ';\n      }\n    '], ['\n      color: ', ';\n      &:hover {\n        opacity: 1;\n        color: ', ';\n      }\n    ']),
    _templateObject7 = (0, _taggedTemplateLiteral3.default)(['\n    color: ', ';\n    ', '\n  '], ['\n    color: ', ';\n    ', '\n  ']),
    _templateObject8 = (0, _taggedTemplateLiteral3.default)(['\n      &:hover {\n        opacity: 1;\n        background-color: ', '\n      }\n    '], ['\n      &:hover {\n        opacity: 1;\n        background-color: ', '\n      }\n    ']),
    _templateObject9 = (0, _taggedTemplateLiteral3.default)(['\n    color: ', ';\n    &:hover {\n      opacity: 1;\n      background-color: ', '\n    }\n  '], ['\n    color: ', ';\n    &:hover {\n      opacity: 1;\n      background-color: ', '\n    }\n  ']),
    _templateObject10 = (0, _taggedTemplateLiteral3.default)(['\n    background-color: ', ';\n    color: white;\n  '], ['\n    background-color: ', ';\n    color: white;\n  ']),
    _templateObject11 = (0, _taggedTemplateLiteral3.default)(['\n    background-color: ', ';\n    color: ', ';\n    ', ';\n    margin-bottom: 2px;\n  '], ['\n    background-color: ', ';\n    color: ', ';\n    ', ';\n    margin-bottom: 2px;\n  ']),
    _templateObject12 = (0, _taggedTemplateLiteral3.default)(['box-shadow: 0 1px 2px 1px ', ''], ['box-shadow: 0 1px 2px 1px ', '']),
    _templateObject13 = (0, _taggedTemplateLiteral3.default)(['\n  ', '\n'], ['\n  ', '\n']),
    _templateObject14 = (0, _taggedTemplateLiteral3.default)(['\n  margin: -5px;\n  font-size: 24px;\n  padding-', ': 10px;\n  transform: translate(0, -2px);\n'], ['\n  margin: -5px;\n  font-size: 24px;\n  padding-', ': 10px;\n  transform: translate(0, -2px);\n']);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _md = require('react-icons/lib/md');

var _reactSpinjs = require('react-spinjs');

var _reactSpinjs2 = _interopRequireDefault(_reactSpinjs);

var _styles = require('common/styles');

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

var Loading = function Loading(_ref) {
  var dark_background = _ref.dark_background;
  return _react2.default.createElement(_reactSpinjs2.default, { config: { color: dark_background ? 'white' : (0, _styles.color)('black', 'light'), length: 4, width: 2, radius: 5 } });
};

exports.default = function (_ref2) {
  var className = _ref2.className,
      dark_background = _ref2.dark_background,
      submit = _ref2.submit,
      children = _ref2.children,
      loading = _ref2.loading,
      disabled = _ref2.disabled,
      done = _ref2.done,
      discreet = _ref2.discreet,
      onClick = _ref2.onClick,
      Icon = _ref2.icon,
      left_icon = _ref2.left_icon,
      right_icon = _ref2.right_icon,
      label = _ref2.label,
      secondary = _ref2.secondary,
      navigation = _ref2.navigation,
      back = _ref2.back;

  var props = {
    onClick: !disabled && !loading && !done && onClick,
    disabled: disabled,
    discreet: discreet,
    dark_background: dark_background,
    done: done,
    secondary: secondary,
    navigation: navigation || back
  };
  if (!left_icon && Icon) {
    left_icon = _react2.default.createElement(Icon, null);
  }
  if (done) {
    left_icon = _react2.default.createElement(_md.MdDone, null);
  }
  if (back) {
    left_icon = _react2.default.createElement(_md.MdArrowBack, null);
  }
  if (navigation) {
    right_icon = _react2.default.createElement(_md.MdArrowForward, null);
  }
  return _react2.default.createElement(
    Container,
    { className: className, loading: loading },
    loading ? _react2.default.createElement(Loading, { dark_background: dark_background }) : submit ? _react2.default.createElement(Submit, (0, _extends3.default)({
      type: 'submit',
      value: children
    }, props)) : _react2.default.createElement(
      Content,
      props,
      left_icon ? _react2.default.createElement(
        IconContainer,
        null,
        left_icon
      ) : null,
      children,
      label,
      right_icon ? _react2.default.createElement(
        IconContainer,
        { right: true },
        right_icon
      ) : null
    )
  );
};

var Container = _styledComponents2.default.div(_templateObject, function (_ref3) {
  var loading = _ref3.loading;
  return loading ? (0, _styledComponents.css)(_templateObject2) : '';
});
var button_style = (0, _styledComponents.css)(_templateObject3, function (_ref4) {
  var disabled = _ref4.disabled,
      onClick = _ref4.onClick;
  return disabled ? _styles.disabled_link : onClick ? _styles.link : '';
}, function (_ref5) {
  var discreet = _ref5.discreet,
      disabled = _ref5.disabled,
      dark_background = _ref5.dark_background,
      secondary = _ref5.secondary,
      done = _ref5.done,
      navigation = _ref5.navigation;
  return discreet ? (0, _styledComponents.css)(_templateObject4, dark_background ? (0, _styledComponents.css)(_templateObject5) : (0, _styledComponents.css)(_templateObject6, (0, _styles.color)('black', 'light'), (0, _styles.color)('action'))) : secondary ? (0, _styledComponents.css)(_templateObject7, disabled ? dark_background ? (0, _styles.color)('white', 'normal', 0.5) : (0, _styles.color)('black', 'pale') : (0, _styles.color)('action'), disabled ? '' : (0, _styledComponents.css)(_templateObject8, dark_background ? (0, _styles.color)('white', 'normal', 0.25) : (0, _styles.color)('action', 'normal', 0.25))) : navigation ? (0, _styledComponents.css)(_templateObject9, (0, _styles.color)('black', 'light'), (0, _styles.color)('black', 'light', 0.25)) : done ? (0, _styledComponents.css)(_templateObject10, (0, _styles.color)('primary')) : (0, _styledComponents.css)(_templateObject11, disabled ? dark_background ? (0, _styles.color)('white', 'normal', 0.3) : (0, _styles.color)('black', 'pale') : (0, _styles.color)('action'), disabled ? dark_background ? (0, _styles.color)('white', 'normal', 0.64) : (0, _styles.color)('black', 'bright') : 'white', disabled ? '' : (0, _styledComponents.css)(_templateObject12, (0, _styles.color)('black', 'normal', 0.25)));
});
var Content = _styledComponents2.default.div(_templateObject13, button_style);
var Submit = _styledComponents2.default.input(_templateObject13, button_style);
var IconContainer = _styledComponents2.default.div(_templateObject14, function (_ref6) {
  var right = _ref6.right;
  return right ? 'left' : 'right';
});