autodisol/components/CustomButton.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _Button = _interopRequireDefault(require("@material-ui/core/Button"));

var _CircularProgress = _interopRequireDefault(require("@material-ui/core/CircularProgress"));

var _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withStyles"));

var _classnames = _interopRequireDefault(require("classnames"));

var _propTypes = _interopRequireDefault(require("prop-types"));

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

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

var CustomButtonJSX = function CustomButtonJSX(_ref) {
  var css = _ref.classes,
      muiClasses = _ref.muiClasses,
      _ref$colorType = _ref.colorType,
      colorType = _ref$colorType === void 0 ? '' : _ref$colorType,
      _ref$height = _ref.height,
      height = _ref$height === void 0 ? 'short' : _ref$height,
      isWidthLimited = _ref.isWidthLimited,
      isLoading = _ref.isLoading,
      children = _ref.children,
      className = _ref.className,
      disabled = _ref.disabled,
      rest = _objectWithoutProperties(_ref, ["classes", "muiClasses", "colorType", "height", "isWidthLimited", "isLoading", "children", "className", "disabled"]);

  var buildProps = {};

  if (colorType === 'primary') {
    buildProps.color = 'primary';
  }

  return _react["default"].createElement(_Button["default"], _extends({
    className: (0, _classnames["default"])(css["".concat(colorType, "Button")], css["".concat(height, "Button")], isWidthLimited && css.limitedSizeButton, className),
    disabled: disabled || isLoading,
    classes: muiClasses
  }, rest, buildProps), isLoading && _react["default"].createElement(_CircularProgress["default"], {
    size: height === 'short' ? 25 : 40,
    className: css.spinner
  }), children);
};

CustomButtonJSX.propTypes = {
  classes: _propTypes["default"].object.isRequired,
  muiClasses: _propTypes["default"].object,
  colorType: _propTypes["default"].oneOf(["primary", "secondary", "tertiary", "error", "success", "yellow", "green", "blue"]),
  height: _propTypes["default"].oneOf(["tall", "short", "medium"]),
  isWidthLimited: _propTypes["default"].bool,
  isLoading: _propTypes["default"].bool,
  disabled: _propTypes["default"].bool,
  children: _propTypes["default"].any,
  className: _propTypes["default"].string
};
var CustomButton = (0, _withStyles["default"])(function (theme) {
  return {
    shortButton: {
      paddingTop: '0.59rem',
      paddingBottom: '0.59rem'
    },
    mediumButton: {
      paddingTop: '0.8rem',
      paddingBottom: '0.8rem'
    },
    tallButton: {
      paddingTop: '1.25rem',
      paddingBottom: '1.25rem'
    },
    secondaryButton: {
      backgroundColor: theme.palette.secondary.dark,
      color: '#FFFFFF',
      '&:hover': {
        backgroundColor: theme.palette.secondary.main
      }
    },
    tertiaryButton: {
      backgroundColor: theme.palette.secondary.light,
      color: theme.palette.secondary.dark
    },
    errorButton: {
      backgroundColor: theme.palette.error.main,
      color: 'white',
      '&:hover': {
        backgroundColor: theme.palette.error.light
      }
    },
    successButton: {
      backgroundColor: theme.palette.success.light,
      color: 'white',
      '&:hover': {
        backgroundColor: theme.palette.success.main
      }
    },
    greenButton: {
      backgroundColor: theme.palette.success.main,
      color: 'white',
      '&:hover': {
        backgroundColor: 'rgba(6, 136, 87, 0.8)'
      }
    },
    yellowButton: {
      backgroundColor: theme.palette.yellow.main,
      color: 'white',
      '&:hover': {
        backgroundColor: theme.palette.yellow.light
      }
    },
    blueButton: {
      backgroundColor: theme.palette.blue.main,
      color: 'white',
      '&:hover': {
        backgroundColor: 'rgba(100, 149, 237, 0.8)'
      }
    },
    limitedSizeButton: _defineProperty({}, theme.breakpoints.up('sm'), {
      maxWidth: 350
    }),
    spinner: {
      color: 'inherit',
      position: 'absolute'
    }
  };
})(CustomButtonJSX);
var _default = CustomButton;
exports["default"] = _default;