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

React components that implement Google's Material Design.

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@krowdy-ui/styles';
import { IconButton, Input } from '@krowdy-ui/core';
import clsx from 'clsx';
export 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'
    }
  };
};

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.createElement("div", null, /*#__PURE__*/React.createElement(IconButton, {
    color: color,
    disabled: disabled,
    onClick: _handleClickDecrease,
    size: size,
    square: true
  }, removeIcon), /*#__PURE__*/React.createElement(Input, {
    classes: {
      input: classes.input,
      root: clsx(classes.root, classes["fontSize".concat(type)])
    },
    disabled: disabled,
    disableUnderline: true,
    name: name,
    value: addLeadingZero(number)
  }), /*#__PURE__*/React.createElement(IconButton, {
    color: color,
    disabled: disabled,
    onClick: _handleClickIncrease,
    size: size,
    square: true
  }, addIcon));
};

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