@shakthillc/components/src/CountGetter/CountGetter.js

React generic components for shakthi products

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

const CountGetter = ({ count, initial = 0,getCount }) => {
  const [value, setValue] = useState(initial);
  const [gray, setGray] = useState("left");

  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 (
    <div className={style["rangecontainer"]}>
      <Icon
        style={{ color: gray == "left" ? "gray" : "#005397" }}
        className={style["rangecontainer--left"]}
        onClick={() => {
          handleClick(false);
        }}
      >
        remove_circle_outline
      </Icon>
      <span
        style={{ padding: "0px 10px" }}
        className={style["rangecontainer__counter"]}
      >
        {value}
      </span>
      <Icon
        style={{ color: gray == "right" ? "gray" : "#005397" }}
        className={style["rangecontainer--right"]}
        onClick={() => {
          handleClick(true);
        }}
      >
        add_circle_outline
      </Icon>
    </div>
  );
};

export default CountGetter;