@shakthillc/components/src/TimePicker/TimePicker.js

React generic components for shakthi products

import React from "react";
import PropTypes from "prop-types";
import style from "./TimePicker.module.css";
import Popup from "./../Popup/Popup";
import Icon from "@material-ui/core/Icon";
import _ from "lodash";

class TimePicker extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedOption: {
        hour: props.selectedOption.hour,
        minute: props.selectedOption.minute,
      },
    };
    this.handleChange = this.handleChange.bind(this);
    this.generateDropDown = this.generateDropDown.bind(this);
    this.hoursData = [];
    this.minutesData = [];
  }

  componentDidMount() {
    this.generateDropDown();
  }

  componentDidUpdate(prevProps, prevState) {
    const { hour, minute } = this.props.selectedOption;
    const { hour: shour, minute: sminute } = this.props.selectedOption;
    if (this.props.selectedOption != null) {
      if (hour == "00" && minute == "00") {
      } else if (hour != shour && minute != sminute) {
        let selectedOption = Object.assign({}, this.state.selectedOption, {
          hour,
          minute,
        });
        this.setState({
          selectedOption
        });
      }
    }
  }
  handleChange(val, type) {
    let { onChange } = this.props;
    const { selectedOption } = this.state;
    var tempValue;
    if (type == "h") {
      tempValue = Object.assign(selectedOption, {
        hour: val,
      });
    } else if (type == "m") {
      tempValue = Object.assign(selectedOption, {
        minute: val,
      });
    } else {
      tempValue = Object.assign(selectedOption, {
        hour: "00",
        minute: "00",
      });
    }
    this.setState({ selectedOption: tempValue }, () => {
      onChange && onChange(this.state.selectedOption);
    });
  }
  generateDropDown() {
    for (let i = 0; i < 24; i++) {
      if (i < 10) {
        this.hoursData.push(
          <p
            onClick={() => {
              this.handleChange(`0${i}`, "h");
            }}
            key={i}
            className={style["timepicker-list__item"]}
          >
            0{i}
          </p>
        );
      } else {
        this.hoursData.push(
          <p
            onClick={() => {
              this.handleChange(i, "h");
            }}
            key={i}
            className={style["timepicker-list__item"]}
          >
            {i}
          </p>
        );
      }
    }
    for (let i = 0; i < 60; i++) {
      if (i < 10) {
        this.minutesData.push(
          <p
            onClick={() => {
              this.handleChange(`0${i}`, "m");
            }}
            key={i}
            className={style["timepicker-list__item"]}
          >
            0{i}
          </p>
        );
      } else {
        this.minutesData.push(
          <p
            onClick={() => {
              this.handleChange(i, "m");
            }}
            key={i}
            className={style["timepicker-list__item"]}
          >
            {i}
          </p>
        );
      }
    }
  }
  render() {
    let {
      isPopupOpen,
      togglePopup,
      placeHolder = "00:00",
      removeClose,
      isMandatory=false,
      help=""
    } = this.props;
    let { options } = this.props;
    const { hour, minute } = this.state.selectedOption;
    let formattedHour = hour.toString().length < 2 ? `0${hour}` : hour;
    let formattedMinute = minute.toString().length < 2 ? `0${minute}` : minute;
    let borderStyle= isMandatory == true ? style['input-enableborder'] : ""
    return (
      <div  className={style["timepicker"]}>
        <div
          className={
            isPopupOpen
              ? style["timepicker__sub--open"] +" "+ borderStyle
              : style["timepicker__sub"] +" "+ borderStyle
          }
          onClick={togglePopup}
        >
          <div className={style["timepicker__textcontainer"]}>
            <span className={style["textcontainer__selected-text"]}>
              {formattedHour}:{formattedMinute}
            </span>
          </div>
          <div
            className={style["textcontainer__arrow"]}
            onClick={() => {
              this.handleChange(0, "c");
            }}
          >
            <Icon style={{ color: "#777777", fontSize: 14 }}>close</Icon>
          </div>
        </div>
        {isPopupOpen ? (
          <div
            className={style["timepicker__timepicker-list"]}
            onClick={removeClose}
          >
            <div className={style["timepicker-list__item_group"]}>
              {" "}
              {this.hoursData}
            </div>
            <div className={style["timepicker-list__item_group"]}>
              {" "}
              {this.minutesData}
            </div>
          </div>
        ) : null}
        {help && <p className={isMandatory ===true? style["input-holder__helper--red"]:style["input-holder__helper"]}>
          {help}
          </p>}
      </div>
    );
  }
}

TimePicker.defaultProps = {
  disabled: false,
  selectedOption:{hour:"00",minute:"00"}
};
TimePicker.propTypes = {
  disabled: PropTypes.bool,
  onChange: PropTypes.func,
};

export default Popup(TimePicker);