@shakthillc/components/es/TimePicker/TimePicker.js

React generic components for shakthi products

import _Object$assign from "babel-runtime/core-js/object/assign";
import _Object$getPrototypeOf from "babel-runtime/core-js/object/get-prototype-of";
import _classCallCheck from "babel-runtime/helpers/classCallCheck";
import _createClass from "babel-runtime/helpers/createClass";
import _possibleConstructorReturn from "babel-runtime/helpers/possibleConstructorReturn";
import _inherits from "babel-runtime/helpers/inherits";
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";

var TimePicker = function (_React$Component) {
  _inherits(TimePicker, _React$Component);

  function TimePicker(props) {
    _classCallCheck(this, TimePicker);

    var _this = _possibleConstructorReturn(this, (TimePicker.__proto__ || _Object$getPrototypeOf(TimePicker)).call(this, 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 = [];
    return _this;
  }

  _createClass(TimePicker, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.generateDropDown();
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps, prevState) {
      var _props$selectedOption = this.props.selectedOption,
          hour = _props$selectedOption.hour,
          minute = _props$selectedOption.minute;
      var _props$selectedOption2 = this.props.selectedOption,
          shour = _props$selectedOption2.hour,
          sminute = _props$selectedOption2.minute;

      if (this.props.selectedOption != null) {
        if (hour == "00" && minute == "00") {} else if (hour != shour && minute != sminute) {
          var selectedOption = _Object$assign({}, this.state.selectedOption, {
            hour: hour,
            minute: minute
          });
          this.setState({
            selectedOption: selectedOption
          });
        }
      }
    }
  }, {
    key: "handleChange",
    value: function handleChange(val, type) {
      var _this2 = this;

      var onChange = this.props.onChange;
      var selectedOption = this.state.selectedOption;

      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 }, function () {
        onChange && onChange(_this2.state.selectedOption);
      });
    }
  }, {
    key: "generateDropDown",
    value: function generateDropDown() {
      var _this3 = this;

      var _loop = function _loop(i) {
        if (i < 10) {
          _this3.hoursData.push(React.createElement(
            "p",
            {
              onClick: function onClick() {
                _this3.handleChange("0" + i, "h");
              },
              key: i,
              className: style["timepicker-list__item"]
            },
            "0",
            i
          ));
        } else {
          _this3.hoursData.push(React.createElement(
            "p",
            {
              onClick: function onClick() {
                _this3.handleChange(i, "h");
              },
              key: i,
              className: style["timepicker-list__item"]
            },
            i
          ));
        }
      };

      for (var i = 0; i < 24; i++) {
        _loop(i);
      }

      var _loop2 = function _loop2(i) {
        if (i < 10) {
          _this3.minutesData.push(React.createElement(
            "p",
            {
              onClick: function onClick() {
                _this3.handleChange("0" + i, "m");
              },
              key: i,
              className: style["timepicker-list__item"]
            },
            "0",
            i
          ));
        } else {
          _this3.minutesData.push(React.createElement(
            "p",
            {
              onClick: function onClick() {
                _this3.handleChange(i, "m");
              },
              key: i,
              className: style["timepicker-list__item"]
            },
            i
          ));
        }
      };

      for (var i = 0; i < 60; i++) {
        _loop2(i);
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this4 = this;

      var _props = this.props,
          isPopupOpen = _props.isPopupOpen,
          togglePopup = _props.togglePopup,
          _props$placeHolder = _props.placeHolder,
          placeHolder = _props$placeHolder === undefined ? "00:00" : _props$placeHolder,
          removeClose = _props.removeClose,
          _props$isMandatory = _props.isMandatory,
          isMandatory = _props$isMandatory === undefined ? false : _props$isMandatory,
          _props$help = _props.help,
          help = _props$help === undefined ? "" : _props$help;
      var options = this.props.options;
      var _state$selectedOption = this.state.selectedOption,
          hour = _state$selectedOption.hour,
          minute = _state$selectedOption.minute;

      var formattedHour = hour.toString().length < 2 ? "0" + hour : hour;
      var formattedMinute = minute.toString().length < 2 ? "0" + minute : minute;
      var borderStyle = isMandatory == true ? style['input-enableborder'] : "";
      return React.createElement(
        "div",
        { className: style["timepicker"] },
        React.createElement(
          "div",
          {
            className: isPopupOpen ? style["timepicker__sub--open"] + " " + borderStyle : style["timepicker__sub"] + " " + borderStyle,
            onClick: togglePopup
          },
          React.createElement(
            "div",
            { className: style["timepicker__textcontainer"] },
            React.createElement(
              "span",
              { className: style["textcontainer__selected-text"] },
              formattedHour,
              ":",
              formattedMinute
            )
          ),
          React.createElement(
            "div",
            {
              className: style["textcontainer__arrow"],
              onClick: function onClick() {
                _this4.handleChange(0, "c");
              }
            },
            React.createElement(
              Icon,
              { style: { color: "#777777", fontSize: 14 } },
              "close"
            )
          )
        ),
        isPopupOpen ? React.createElement(
          "div",
          {
            className: style["timepicker__timepicker-list"],
            onClick: removeClose
          },
          React.createElement(
            "div",
            { className: style["timepicker-list__item_group"] },
            " ",
            this.hoursData
          ),
          React.createElement(
            "div",
            { className: style["timepicker-list__item_group"] },
            " ",
            this.minutesData
          )
        ) : null,
        help && React.createElement(
          "p",
          { className: isMandatory === true ? style["input-holder__helper--red"] : style["input-holder__helper"] },
          help
        )
      );
    }
  }]);

  return TimePicker;
}(React.Component);

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

export default Popup(TimePicker);