ming-demo3/lib/components/keyboard/KeyboardedInput.js

mdf metaui web

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

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

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

var _Keyboard = _interopRequireDefault(require("./Keyboard"));

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

var KeyboardedInput = function (_React$Component) {
  (0, _inherits2["default"])(KeyboardedInput, _React$Component);

  function KeyboardedInput(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, KeyboardedInput);
    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(KeyboardedInput).call(this, props));
    _this.focus = _this.focus.bind((0, _assertThisInitialized2["default"])(_this));
    _this.handleFocus = _this.handleFocus.bind((0, _assertThisInitialized2["default"])(_this));
    _this.handleFocusLost = _this.handleFocusLost.bind((0, _assertThisInitialized2["default"])(_this));
    _this.handleChange = _this.handleChange.bind((0, _assertThisInitialized2["default"])(_this));
    _this.hideKeyboard = _this.hideKeyboard.bind((0, _assertThisInitialized2["default"])(_this));
    _this.handleOnBlur = _this.handleOnBlur.bind((0, _assertThisInitialized2["default"])(_this));
    _this.handleOnFocus = _this.handleOnFocus.bind((0, _assertThisInitialized2["default"])(_this));
    _this.state = {
      showKeyboard: false,
      input: null
    };
    return _this;
  }

  (0, _createClass2["default"])(KeyboardedInput, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.input.addEventListener('input', this.handleChange);
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.input.removeEventListener('input', this.handleChange);
    }
  }, {
    key: "focus",
    value: function focus() {
      this.input.focus();
    }
  }, {
    key: "handleChange",
    value: function handleChange(event) {
      this.props.onChange(event.target.value, event.target);
    }
  }, {
    key: "handleOnBlur",
    value: function handleOnBlur(value) {
      this.props.onBlur(value);
    }
  }, {
    key: "handleOnFocus",
    value: function handleOnFocus(value) {
      this.props.onFocus(value);
    }
  }, {
    key: "handleFocus",
    value: function handleFocus() {
      var _this2 = this;

      var that = this;
      setTimeout(function () {
        if (that.input && typeof that.props.value !== 'undefined') {
          that.input.focus();
          that.input.select();
          that.input.setSelectionRange(that.props.value.length, that.props.value.length);

          if (_this2.state.showKeyboard === false && that.props.onFocus) {
            that.props.onFocus(that.props.value);
          }

          that.setState(_objectSpread({}, _this2.state, {
            showKeyboard: true
          }));
        }
      }, 0);
    }
  }, {
    key: "handleFocusLost",
    value: function handleFocusLost(e) {
      var that = this;
      var target = e.target;
      setTimeout(function () {
        if (!document.activeElement.classList.contains('keyboard-button') && !document.activeElement.classList.contains('keyboard') && !document.activeElement.classList.contains('keyboard-row') && !document.activeElement.classList.contains('react-draggable-transparent-selection')) {
          if (that.props.onBlur) {
            that.props.onBlur(that.props.value, target);
          }

          that.setState(_objectSpread({}, that.state, {
            showKeyboard: false
          }));
        }
      }, 0);
    }
  }, {
    key: "hideKeyboard",
    value: function hideKeyboard() {
      if (this.props.onBlur) {
        this.props.onBlur(this.props.value);
      }

      this.setState(_objectSpread({}, this.state, {
        showKeyboard: false
      }));
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;

      return _react["default"].createElement("div", {
        className: this.props.containerClassName
      }, _react["default"].createElement("input", {
        name: this.props.name,
        className: "ant-input",
        id: this.props.id,
        placeholder: this.props.placeholder,
        required: this.props.required,
        value: this.props.value,
        type: this.props.type,
        onFocus: this.handleFocus,
        onBlur: this.handleFocusLost,
        min: this.props.min,
        max: this.props.max,
        step: this.props.step,
        pattern: this.props.pattern,
        onChange: this.handleChange,
        readOnly: this.props.readOnly === true,
        disabled: this.props.disabled === true ? "disabled" : "",
        ref: function ref(e) {
          _this3.input = e;
        }
      }), this.state.showKeyboard && this.props.enabled && this.props.readOnly !== true && _react["default"].createElement(_Keyboard["default"], {
        hideKeyboard: this.hideKeyboard,
        defaultKeyboard: this.props.defaultKeyboard,
        secondaryKeyboard: this.props.secondaryKeyboard,
        inputNode: this.input,
        dataset: this.props.dataset,
        opacity: this.props.opacity,
        isDraggable: this.props.isDraggable,
        isFirstLetterUppercase: this.props.isFirstLetterUppercase,
        uppercaseAfterSpace: this.props.uppercaseAfterSpace,
        keyboardClassName: this.props.keyboardClassName,
        showNumericRow: this.props.showNumericRow,
        showShift: this.props.showShift,
        showSymbols: this.props.showSymbols,
        showSpacebar: this.props.showSpacebar,
        showSubmit: this.props.showSubmit
      }));
    }
  }]);
  return KeyboardedInput;
}(_react["default"].Component);

(0, _defineProperty2["default"])(KeyboardedInput, "propTypes", {
  name: _propTypes["default"].any,
  containerClassName: _propTypes["default"].any,
  inputClassName: _propTypes["default"].any,
  keyboardClassName: _propTypes["default"].any,
  placeholder: _propTypes["default"].any,
  value: _propTypes["default"].any.isRequired,
  type: _propTypes["default"].any,
  min: _propTypes["default"].any,
  max: _propTypes["default"].any,
  step: _propTypes["default"].any,
  pattern: _propTypes["default"].any,
  readOnly: _propTypes["default"].any,
  enabled: _propTypes["default"].any,
  required: _propTypes["default"].bool,
  defaultKeyboard: _propTypes["default"].any,
  secondaryKeyboard: _propTypes["default"].any,
  opacity: _propTypes["default"].any,
  isDraggable: _propTypes["default"].any,
  isFirstLetterUppercase: _propTypes["default"].any,
  uppercaseAfterSpace: _propTypes["default"].any,
  dataset: _propTypes["default"].any,
  onChange: _propTypes["default"].func,
  onBlur: _propTypes["default"].func,
  onFocus: _propTypes["default"].func,
  showNumericRow: _propTypes["default"].bool,
  showShift: _propTypes["default"].bool,
  showSymbols: _propTypes["default"].bool,
  showSpacebar: _propTypes["default"].bool,
  showSubmit: _propTypes["default"].bool,
  id: _propTypes["default"].any
});
var _default = KeyboardedInput;
exports["default"] = _default;
//# sourceMappingURL=KeyboardedInput.js.map