@shakthillc/components/lib/TimePicker/TimePicker.js

React generic components for shakthi products

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

var _TimePickerModule = require("./TimePicker.module.css");

var _TimePickerModule2 = _interopRequireDefault(_TimePickerModule);

var _Popup = require("./../Popup/Popup");

var _Popup2 = _interopRequireDefault(_Popup);

var _Icon = require("@material-ui/core/Icon");

var _Icon2 = _interopRequireDefault(_Icon);

var _lodash = require("lodash");

var _lodash2 = _interopRequireDefault(_lodash);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

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(_react2.default.createElement(
            "p",
            {
              onClick: function onClick() {
                _this3.handleChange("0" + i, "h");
              },
              key: i,
              className: _TimePickerModule2.default["timepicker-list__item"]
            },
            "0",
            i
          ));
        } else {
          _this3.hoursData.push(_react2.default.createElement(
            "p",
            {
              onClick: function onClick() {
                _this3.handleChange(i, "h");
              },
              key: i,
              className: _TimePickerModule2.default["timepicker-list__item"]
            },
            i
          ));
        }
      };

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

      var _loop2 = function _loop2(i) {
        if (i < 10) {
          _this3.minutesData.push(_react2.default.createElement(
            "p",
            {
              onClick: function onClick() {
                _this3.handleChange("0" + i, "m");
              },
              key: i,
              className: _TimePickerModule2.default["timepicker-list__item"]
            },
            "0",
            i
          ));
        } else {
          _this3.minutesData.push(_react2.default.createElement(
            "p",
            {
              onClick: function onClick() {
                _this3.handleChange(i, "m");
              },
              key: i,
              className: _TimePickerModule2.default["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 ? _TimePickerModule2.default['input-enableborder'] : "";
      return _react2.default.createElement(
        "div",
        { className: _TimePickerModule2.default["timepicker"] },
        _react2.default.createElement(
          "div",
          {
            className: isPopupOpen ? _TimePickerModule2.default["timepicker__sub--open"] + " " + borderStyle : _TimePickerModule2.default["timepicker__sub"] + " " + borderStyle,
            onClick: togglePopup
          },
          _react2.default.createElement(
            "div",
            { className: _TimePickerModule2.default["timepicker__textcontainer"] },
            _react2.default.createElement(
              "span",
              { className: _TimePickerModule2.default["textcontainer__selected-text"] },
              formattedHour,
              ":",
              formattedMinute
            )
          ),
          _react2.default.createElement(
            "div",
            {
              className: _TimePickerModule2.default["textcontainer__arrow"],
              onClick: function onClick() {
                _this4.handleChange(0, "c");
              }
            },
            _react2.default.createElement(
              _Icon2.default,
              { style: { color: "#777777", fontSize: 14 } },
              "close"
            )
          )
        ),
        isPopupOpen ? _react2.default.createElement(
          "div",
          {
            className: _TimePickerModule2.default["timepicker__timepicker-list"],
            onClick: removeClose
          },
          _react2.default.createElement(
            "div",
            { className: _TimePickerModule2.default["timepicker-list__item_group"] },
            " ",
            this.hoursData
          ),
          _react2.default.createElement(
            "div",
            { className: _TimePickerModule2.default["timepicker-list__item_group"] },
            " ",
            this.minutesData
          )
        ) : null,
        help && _react2.default.createElement(
          "p",
          { className: isMandatory === true ? _TimePickerModule2.default["input-holder__helper--red"] : _TimePickerModule2.default["input-holder__helper"] },
          help
        )
      );
    }
  }]);

  return TimePicker;
}(_react2.default.Component);

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

exports.default = (0, _Popup2.default)(TimePicker);