@shakthillc/components/es/CountGetter/CountGetter.js

React generic components for shakthi products

import _slicedToArray from "babel-runtime/helpers/slicedToArray";
import React, { useState } from "react";
import Icon from "@material-ui/core/Icon";
import style from "./CountGetter.module.css";

var CountGetter = function CountGetter(_ref) {
  var count = _ref.count,
      _ref$initial = _ref.initial,
      initial = _ref$initial === undefined ? 0 : _ref$initial,
      getCount = _ref.getCount;

  var _useState = useState(initial),
      _useState2 = _slicedToArray(_useState, 2),
      value = _useState2[0],
      setValue = _useState2[1];

  var _useState3 = useState("left"),
      _useState4 = _slicedToArray(_useState3, 2),
      gray = _useState4[0],
      setGray = _useState4[1];

  function handleClick(flag) {
    if (flag) {
      if (value + 1 == count) {
        setValue(value + 1);
        setGray("right");
        getCount(value + 1);
      } else if (count > value + 1) {
        setValue(value + 1);
        setGray("");
        getCount(value + 1);
      } else setGray("right");
    } else {
      if (value - 1 == 0) {
        setValue(value - 1);
        setGray("left");
        getCount(value - 1);
      } else if (value > 0) {
        setValue(value - 1);
        setGray("");
        getCount(value - 1);
      } else {
        setGray("left");
      }
    }
  }
  return React.createElement(
    "div",
    { className: style["rangecontainer"] },
    React.createElement(
      Icon,
      {
        style: { color: gray == "left" ? "gray" : "#005397" },
        className: style["rangecontainer--left"],
        onClick: function onClick() {
          handleClick(false);
        }
      },
      "remove_circle_outline"
    ),
    React.createElement(
      "span",
      {
        style: { padding: "0px 10px" },
        className: style["rangecontainer__counter"]
      },
      value
    ),
    React.createElement(
      Icon,
      {
        style: { color: gray == "right" ? "gray" : "#005397" },
        className: style["rangecontainer--right"],
        onClick: function onClick() {
          handleClick(true);
        }
      },
      "add_circle_outline"
    )
  );
};

export default CountGetter;