@krowdy-ui/views/Counter/Counter.js

React components that implement Google's Material Design.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

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

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

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

var _core = require("@krowdy-ui/core");

var _clsx = _interopRequireDefault(require("clsx"));

var styles = function styles(theme) {
  return {
    fontSizemedium: {
      fontSize: 14
    },
    fontSizesmall: {
      fontSize: 12
    },
    input: {
      padding: theme.spacing(0.5, 0),
      textAlign: 'center',
      width: 40
    },
    root: {
      borderBottom: "1px solid ".concat(theme.palette.grey[500]),
      color: theme.palette.grey[700],
      fontStyle: 'normal',
      fontWeight: 'normal',
      lineHeight: '100%',
      textAlign: 'center'
    }
  };
};

exports.styles = styles;

function addLeadingZero(number) {
  return number.toString().padStart(2, '0');
}

var Counter = function Counter(props) {
  var classes = props.classes,
      name = props.name,
      addIcon = props.addIcon,
      removeIcon = props.removeIcon,
      number = props.number,
      min = props.min,
      max = props.max,
      _props$disabled = props.disabled,
      disabled = _props$disabled === void 0 ? false : _props$disabled,
      _props$size = props.size,
      size = _props$size === void 0 ? 'middle' : _props$size,
      _props$type = props.type,
      type = _props$type === void 0 ? 'medium' : _props$type,
      _props$color = props.color,
      color = _props$color === void 0 ? 'primary' : _props$color,
      _props$onChange = props.onChange,
      onChange = _props$onChange === void 0 ? function () {} : _props$onChange;

  var onClick = function onClick(type) {
    if (type === 'increase') number < max && onChange({
      target: {
        name: name,
        value: number + 1
      }
    });else if (type === 'decrease') number > min && onChange({
      target: {
        name: name,
        value: number - 1
      }
    });
  };

  var _handleClickIncrease = function _handleClickIncrease() {
    onClick('increase');
  };

  var _handleClickDecrease = function _handleClickDecrease() {
    onClick('decrease');
  };

  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
    color: color,
    disabled: disabled,
    onClick: _handleClickDecrease,
    size: size,
    square: true
  }, removeIcon), /*#__PURE__*/_react["default"].createElement(_core.Input, {
    classes: {
      input: classes.input,
      root: (0, _clsx["default"])(classes.root, classes["fontSize".concat(type)])
    },
    disabled: disabled,
    disableUnderline: true,
    name: name,
    value: addLeadingZero(number)
  }), /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
    color: color,
    disabled: disabled,
    onClick: _handleClickIncrease,
    size: size,
    square: true
  }, addIcon));
};

process.env.NODE_ENV !== "production" ? Counter.propTypes = {
  addIcon: _propTypes["default"].node.isRequired,
  classes: _propTypes["default"].object,
  color: _propTypes["default"].string,
  disabled: _propTypes["default"].bool,
  max: _propTypes["default"].number,
  min: _propTypes["default"].number,
  name: _propTypes["default"].string,
  number: _propTypes["default"].number.isRequired,
  onChange: _propTypes["default"].func,
  removeIcon: _propTypes["default"].node.isRequired,
  type: _propTypes["default"].oneOf(['small', 'middle'])
} : void 0;
Counter.muiName = 'Counter';

var _default = (0, _styles.withStyles)(styles, {
  name: 'Counter'
})(Counter);

exports["default"] = _default;