cloudhubui/dist/AddToCartButton.js

Various components to use in react projects

"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 _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));

var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));

var _styles = require("@material-ui/styles");

var _colors = require("@material-ui/core/colors");

var _Add = _interopRequireDefault(require("@material-ui/icons/Add"));

var _Remove = _interopRequireDefault(require("@material-ui/icons/Remove"));

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

var styles = function styles() {
  return {
    button: {
      borderRadius: 3,
      flex: 1,
      height: 42
    },
    paperButton: {
      display: 'flex',
      flex: 1,
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
      border: "0.5px solid ".concat(_colors.red[500]),
      fontSize: 14,
      textTransform: 'uppercase',
      fontWeight: 500,
      cursor: 'pointer',
      color: _colors.red[500],
      '&:hover': {
        background: _colors.red[900],
        color: '#FFF'
      },
      height: 42
    },
    paperCartButton: {
      display: 'flex',
      flex: 1,
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      color: '#FFF',
      fontSize: 14,
      textTransform: 'uppercase',
      fontWeight: 500,
      cursor: 'pointer',
      background: _colors.red[500],
      height: 42
    },
    itemButton: {
      color: '#FFF'
    },
    addremoveButton: {
      color: '#FFF'
    }
  };
}; // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
// Cart Button
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -


var AddToCartButton = function AddToCartButton(_ref) {
  var classes = _ref.classes,
      onAddItem = _ref.onAddItem,
      onRemoveItem = _ref.onRemoveItem,
      Qty = _ref.Qty;

  if (!Qty) {
    return /*#__PURE__*/_react.default.createElement(_Button.default, {
      className: classes.paperButton,
      onClick: onAddItem
    }, "Add to cart");
  }

  return /*#__PURE__*/_react.default.createElement(_Paper.default, {
    className: classes.paperCartButton
  }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
    className: classes.addremoveButton,
    onClick: onRemoveItem
  }, /*#__PURE__*/_react.default.createElement(_Remove.default, null)), /*#__PURE__*/_react.default.createElement(_Button.default, {
    className: classes.itemButton,
    onClick: onAddItem
  }, Qty), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
    className: classes.addremoveButton,
    onClick: onAddItem
  }, /*#__PURE__*/_react.default.createElement(_Add.default, null)));
};

var _default = (0, _styles.withStyles)(styles)(AddToCartButton);

exports.default = _default;