doj-react-adminlte/Form/CalendarInput/Input.js

Simple and easy-to-use AdminLTE components for React

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _moment = _interopRequireDefault(require("moment"));

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

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

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

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

var Input = /*#__PURE__*/function (_React$Component) {
  _inherits(Input, _React$Component);

  var _super = _createSuper(Input);

  function Input(props) {
    var _this;

    _classCallCheck(this, Input);

    _this = _super.call(this, props);

    _this.setMaskRef = function (el) {
      _this.maskRef = el;
    };

    _this.blink = function () {
      var times = 0;
      var blinkInterval = setInterval(function () {
        _this.setState({
          textError: !_this.state.textError
        });

        if (++times >= 4 && !_this.state.textError) {
          clearInterval(blinkInterval);
        }
      }, 70);
    };

    _this.resolveDisplayValue = function (value) {
      var _this$props = _this.props,
          datePicker = _this$props.datePicker,
          timePicker = _this$props.timePicker;
      var display = "";

      if (_moment.default.isMoment(value)) {
        var format = [];

        if (datePicker || !timePicker) {
          format.push("YYYY/MM/DD");
        }

        if (timePicker) {
          format.push("hh:mm A");
        }

        display = value.format(format.join(' '));
      }

      return display;
    };

    _this.dateReplaceAtPosition = function (value, position, insertion, offset) {
      var newValue = value.substring(0, position);
      var addedChars = 0,
          dayStale = false;
      var offsetPosition = position;
      position -= offset;

      if (insertion) {
        var newInsertion = "";

        if (position < 4) {
          if (insertion.match(/^\d$/)) {
            newInsertion = insertion;
            dayStale = true;
          }
        } else if (position === 4 && insertion === '/') {
          newInsertion = '/';
        } else if (position === 4 || position === 5) {
          if (insertion.match(/^\d$/)) {
            var onesMonth = value[_this.getOffsetPosition(6, offset)];

            if (insertion > '1') {
              newInsertion = '0' + insertion;
            } else if (onesMonth) {
              var month = insertion + onesMonth;

              if (month > '12') {
                newInsertion = '0' + insertion;
              } else if (month < '01') {
                newInsertion = '01';
              } else {
                newInsertion = insertion;
              }
            } else {
              newInsertion = insertion;
            }

            if (position === 4) {
              newInsertion = '/' + newInsertion;
            }

            dayStale = true;
          }
        } else if (position === 6) {
          if (insertion.match(/^\d$/)) {
            var _month = value[_this.getOffsetPosition(5, offset)] + insertion;

            if (_month > '12') {
              newInsertion = '2';
            } else if (_month < '01') {
              newInsertion = '1';
            } else {
              newInsertion = insertion;
            }

            dayStale = true;
          }
        } else if (position === 7 && insertion === '/') {
          newInsertion = '/';
        } else if (position >= 7) {
          if (insertion.match(/^\d$/)) {
            var daysInMonth = (0, _moment.default)(value.substring(0, 7), 'YYYY/MM').daysInMonth().toString(10);

            if (position === 7 || position === 8) {
              var onesDay = value[_this.getOffsetPosition(9, offset)];

              if (insertion > daysInMonth[0]) {
                newInsertion = '0' + insertion;
              } else if (onesDay) {
                var day = insertion + onesDay;

                if (day > daysInMonth) {
                  newInsertion = '0' + insertion;
                } else if (day < '01') {
                  newInsertion = '01';
                } else {
                  newInsertion = insertion;
                }
              } else {
                newInsertion = insertion;
              }

              if (position === 7) {
                newInsertion = '/' + newInsertion;
              }
            } else if (position === 9) {
              var _day = value[_this.getOffsetPosition(8, offset)] + insertion;

              if (_day > daysInMonth) {
                newInsertion = daysInMonth[1];
              } else if (_day < '01') {
                newInsertion = '1';
              } else {
                newInsertion = insertion;
              }
            }
          }
        }

        addedChars = newInsertion.length;
        var newPosition = position + addedChars;

        if ((newPosition === 4 || newPosition === 7) && addedChars) {
          newInsertion += '/';
          addedChars++;
        }

        newValue += newInsertion + value.substring(offsetPosition + addedChars);

        if (dayStale && newValue.length >= 10) {
          var _daysInMonth = (0, _moment.default)(newValue.substring(0, 7), 'YYYY/MM').daysInMonth().toString(10);

          var _day2 = newValue.substring(8, 10);

          if (_day2 > _daysInMonth) {
            newValue = newValue.substring(0, 8) + _daysInMonth + newValue.substring(10);
          }
        }
      }

      return [newValue, addedChars];
    };

    _this.getOffsetPosition = function (position, offset) {
      return position + offset;
    };

    _this.timeReplaceAtPosition = function (value, position, insertion, offset) {
      var newValue = value.substring(0, position);
      var addedChars = 0;
      var offsetPosition = position;
      position -= offset;

      if (insertion) {
        var newInsertion = "";

        if (position === 0) {
          if (insertion.match(/^\d$/)) {
            var onesHour = value[_this.getOffsetPosition(1, offset)];

            if (insertion > '1') {
              newInsertion = '0' + insertion;
            } else if (onesHour) {
              var hour = insertion + onesHour;

              if (hour > '12') {
                newInsertion = '0' + insertion;
              } else if (hour < '01') {
                newInsertion = '01';
              } else {
                newInsertion = insertion;
              }
            } else {
              newInsertion = insertion > '1' ? '0' + insertion : insertion;
            }
          }
        } else if (position === 1) {
          if (insertion.match(/^\d$/)) {
            var _hour = value[_this.getOffsetPosition(0, offset)] + insertion;

            if (_hour > '12') {
              newInsertion = '2';
            } else if (_hour < '01') {
              newInsertion = '1';
            } else {
              newInsertion = insertion;
            }
          }
        } else if (position === 2 && insertion === ':') {
          newInsertion = ':';
        } else if (position === 2 || position === 3) {
          if (insertion.match(/^\d$/)) {
            var onesMinute = value[_this.getOffsetPosition(4, offset)];

            if (insertion > '5') {
              newInsertion = '0' + insertion;
            } else if (onesMinute) {
              var minute = insertion + onesMinute;

              if (minute > '59') {
                newInsertion = '00';
              } else {
                newInsertion = insertion;
              }
            } else {
              newInsertion = insertion;
            }

            if (position === 2) {
              newInsertion = ':' + newInsertion;
            }
          }
        } else if (position === 4) {
          if (insertion.match(/^\d$/)) {
            newInsertion = insertion;
          }
        } else if (position === 5 && insertion === ' ') {
          newInsertion = ' ';
        } else if (position === 5 || position === 6) {
          var ap = insertion.toUpperCase();

          if (ap === 'A' || ap === 'P') {
            newInsertion = ap + 'M';
          }

          if (position === 5) {
            newInsertion = ' ' + newInsertion;
          }
        } else if (position === 7) {
          var m = insertion.toUpperCase();

          if (m === 'M') {
            newInsertion = 'M';
          }
        }

        addedChars = newInsertion.length;
        var newPosition = position + addedChars;

        if (newPosition === 2 && addedChars) {
          newInsertion += ':';
          addedChars++;
        }

        if (newPosition === 5 && addedChars) {
          newInsertion += ' ';
          addedChars++;
        }

        newValue += newInsertion + value.substring(offsetPosition + addedChars);
      }

      return [newValue, addedChars];
    };

    _this.dateDeleteAtPosition = function (value, position, offset) {
      var offsetPosition = position;
      position -= offset;

      if (offsetPosition + 1 === value.length) {
        if (position === 4 || position === 7) {
          return [value.substring(0, offsetPosition - 1), 2];
        }

        return [value.substring(0, offsetPosition), 1];
      }

      if (position === 4 || position === 7) {
        return [_this.dateReplaceAtPosition(value, offsetPosition - 1, "0", offset)[0], 2];
      }

      if ((position === 3 || position === 6) && offsetPosition + 2 === value.length) {
        return [value.substring(0, offsetPosition), 1];
      }

      return [_this.dateReplaceAtPosition(value, offsetPosition, "0", offset)[0], 1];
    };

    _this.timeDeleteAtPosition = function (value, position, offset) {
      var offsetPosition = position;
      position -= offset;

      if (offsetPosition + 1 === value.length) {
        if (position === 2 || position === 5) {
          return [value.substring(0, offsetPosition - 1), 2];
        }

        if (position === 7) {
          return [value.substring(0, offsetPosition - 1), 2];
        }

        return [value.substring(0, offsetPosition), 1];
      }

      if (position === 2 || position === 5) {
        return [_this.timeReplaceAtPosition(value, offsetPosition - 1, "0", offset)[0], 2];
      }

      if ((position === 1 || position === 4 || position === 6) && offsetPosition + 2 === value.length) {
        return [value.substring(0, offsetPosition), 1];
      }

      return [_this.timeReplaceAtPosition(value, offsetPosition, "0", offset)[0], 1];
    };

    _this.replaceAtPosition = function (value, position, insertion) {
      var _this$props2 = _this.props,
          datePicker = _this$props2.datePicker,
          timePicker = _this$props2.timePicker;

      if (datePicker) {
        if (position <= 9) {
          var _this$dateReplaceAtPo = _this.dateReplaceAtPosition(value, position, insertion, 0),
              _this$dateReplaceAtPo2 = _slicedToArray(_this$dateReplaceAtPo, 2),
              newValue = _this$dateReplaceAtPo2[0],
              offset = _this$dateReplaceAtPo2[1]; // return [newValue, offset];


          if (position + offset === 10 && offset >= 1 && timePicker) {
            return [newValue.substring(0, 10) + ' ' + newValue.substring(11), offset + 1];
          } else {
            return [newValue, offset];
          }
        } else if (timePicker) {
          if (position === 10) {
            if (insertion === ' ') {
              return [value.substring(0, position) + ' ' + value.substring(position + 1), 1];
            } else if (insertion.match(/^\d$/)) {
              value = value.substring(0, position) + ' ' + value.substring(position + 1);

              var _this$timeReplaceAtPo = _this.timeReplaceAtPosition(value, position + 1, insertion, 11),
                  _this$timeReplaceAtPo2 = _slicedToArray(_this$timeReplaceAtPo, 2),
                  _newValue = _this$timeReplaceAtPo2[0],
                  _offset = _this$timeReplaceAtPo2[1];

              return [_newValue, _offset + 1];
            }
          } else {
            return _this.timeReplaceAtPosition(value, position, insertion, 11);
          }
        }

        return [value, 0];
      } else if (timePicker) {
        return _this.timeReplaceAtPosition(value, position, insertion, 0);
      }

      return [value, 0];
    };

    _this.deleteAtPosition = function (value, position) {
      var _this$props3 = _this.props,
          datePicker = _this$props3.datePicker,
          timePicker = _this$props3.timePicker;

      if (datePicker) {
        if (position <= 9) {
          return _this.dateDeleteAtPosition(value, position, 0);
        } else if (timePicker) {
          if (position === 10) {
            if (value.length === position + 1) {
              value = value.substring(0, position);
            }

            var _this$dateDeleteAtPos = _this.dateDeleteAtPosition(value, position - 1, 0),
                _this$dateDeleteAtPos2 = _slicedToArray(_this$dateDeleteAtPos, 2),
                newValue = _this$dateDeleteAtPos2[0],
                offset = _this$dateDeleteAtPos2[1];

            return [newValue, offset + 1];
          } else {
            return _this.timeDeleteAtPosition(value, position, 11);
          }
        }
      } else if (timePicker) {
        return _this.timeDeleteAtPosition(value, position, 0);
      }

      return [value, 0];
    };

    _this.handleChange = function (event) {
      var display = _this.state.display;
      var target = event.target;
      var value = target.value; // Get current cursor location

      var cursor = target.selectionStart; // Get change start

      var changeStart = cursor > _this.selectionStart ? _this.selectionStart : cursor; // Get change

      var change = value.substring(changeStart, cursor); // Cursor offset

      var offset = 0,
          newValue = display;

      for (var i = 0; i < change.length; i++) {
        var currentOffset = void 0;

        var _this$replaceAtPositi = _this.replaceAtPosition(newValue, changeStart + offset, change[i]);

        var _this$replaceAtPositi2 = _slicedToArray(_this$replaceAtPositi, 2);

        newValue = _this$replaceAtPositi2[0];
        currentOffset = _this$replaceAtPositi2[1];
        offset += currentOffset;
      } // Get difference after insertions


      var difference = change.length - offset + (display.length - value.length); // If there is shortage

      var deleteOffset = 0;

      if (difference > 0) {
        while (deleteOffset < difference) {
          var _currentOffset = void 0;

          var _this$deleteAtPositio = _this.deleteAtPosition(newValue, changeStart + offset - deleteOffset + difference - 1);

          var _this$deleteAtPositio2 = _slicedToArray(_this$deleteAtPositio, 2);

          newValue = _this$deleteAtPositio2[0];
          _currentOffset = _this$deleteAtPositio2[1];
          deleteOffset += _currentOffset;
        }
      }

      var newCursor = deleteOffset ? cursor : changeStart + offset; // Set component value if complete

      var setDisplay = true;
      var _this$props4 = _this.props,
          datePicker = _this$props4.datePicker,
          timePicker = _this$props4.timePicker;

      if (_this.isComplete(newValue)) {
        // Get selected date
        var _this$props5 = _this.props,
            selectedDate = _this$props5.selectedDate,
            isSelectableDate = _this$props5.isSelectableDate;
        var format = [];

        if (datePicker || !timePicker) {
          format.push("YYYY/MM/DD");
        }

        if (timePicker) {
          format.push("hh:mm A");
        }

        var parseDate = (0, _moment.default)(newValue, format.join(' '));
        var newDate = selectedDate && timePicker && !datePicker ? selectedDate.hour(parseDate.hour()).minute(parseDate.minute()) : parseDate;

        if (!isSelectableDate(newDate)) {
          _this.blink();

          setDisplay = false;
        } else {
          _this.props.onDatePick(newDate);
        }
      } else if (newValue === "" && (datePicker || !timePicker)) {
        _this.props.onClear();
      }

      if (setDisplay) {
        _this.setState({
          display: newValue
        }, function () {
          target.setSelectionRange(newCursor, newCursor);
        });
      }
    };

    _this.isComplete = function (value) {
      var _this$props6 = _this.props,
          datePicker = _this$props6.datePicker,
          timePicker = _this$props6.timePicker;

      if (datePicker) {
        if (timePicker) {
          return value.length === 19;
        }
      }

      if (timePicker) {
        return value.length === 8;
      }

      return value.length === 10;
    };

    _this.handleSelect = function (event) {
      var target = event.target;
      var selectionStart = target.selectionStart,
          selectionEnd = target.selectionEnd;

      if (_this.maskRef) {
        _this.maskRef.scrollLeft = target.scrollLeft;
      }

      _this.selectionStart = selectionStart;
      _this.selectionEnd = selectionEnd;
    };

    _this.getMask = function () {
      var _this$props7 = _this.props,
          datePicker = _this$props7.datePicker,
          timePicker = _this$props7.timePicker;
      var mask = [];

      if (datePicker) {
        mask.push("YYYY/MM/DD");
      }

      if (timePicker) {
        mask.push("hh:mm aa");
      }

      return mask.join(' ');
    };

    _this.state = {
      display: "",
      textError: false
    };
    _this.selectionStart = 0;
    _this.selectionEnd = 0;
    _this.maskRef = null;
    return _this;
  }

  _createClass(Input, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var selectedValue = this.props.selectedValue;

      if (selectedValue) {
        this.setState({
          display: this.resolveDisplayValue(selectedValue)
        });
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      var _this$props8 = this.props,
          selectedValue = _this$props8.selectedValue,
          currentView = _this$props8.currentView;

      if (selectedValue !== prevProps.selectedValue || currentView !== prevProps.currentView && currentView === "none") {
        this.setState({
          display: this.resolveDisplayValue(selectedValue)
        });
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props9 = this.props,
          disabled = _this$props9.disabled,
          innerRef = _this$props9.innerRef,
          onFocus = _this$props9.onFocus,
          manualInput = _this$props9.manualInput;
      var _this$state = this.state,
          display = _this$state.display,
          textError = _this$state.textError;
      var mask = this.getMask();
      var inputStyle = {
        borderColor: this.props.isFocused ? "#3c8dbc" : undefined,
        color: textError ? "#aaa" : undefined
      };
      return /*#__PURE__*/_react.default.createElement("div", {
        ref: this.props.containerRef,
        style: {
          backgroundColor: disabled ? "#eee" : 'white'
        },
        className: "dralt-cal-input-container"
      }, manualInput && !disabled && /*#__PURE__*/_react.default.createElement("div", {
        ref: this.setMaskRef,
        className: "dralt-cal-mask"
      }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", {
        style: {
          color: 'white'
        }
      }, display), /*#__PURE__*/_react.default.createElement("span", null, mask.substr(display.length)))), /*#__PURE__*/_react.default.createElement("input", {
        className: "form-control",
        style: inputStyle,
        ref: innerRef,
        spellCheck: false,
        onFocus: onFocus,
        value: display,
        onChange: this.handleChange,
        onSelect: this.handleSelect,
        onMouseDown: this.props.onMouseDown,
        disabled: disabled,
        readOnly: !manualInput
      }));
    }
  }]);

  return Input;
}(_react.default.Component);

Input.defaultProps = {
  selectedValue: null,
  containerRef: null
};
var _default = Input;
exports.default = _default;