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

mdf metaui web

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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 = _interopRequireWildcard(require("react"));

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

var _reactDraggable = _interopRequireDefault(require("react-draggable"));

var _SvgIcon = _interopRequireDefault(require("@mdf/metaui-web/lib/components/common/SvgIcon"));

var _KeyboardButton = _interopRequireDefault(require("./KeyboardButton"));

var _LatinLayout = _interopRequireDefault(require("./layouts/LatinLayout"));

var _CyrillicLayout = _interopRequireDefault(require("./layouts/CyrillicLayout"));

var _SymbolsLayout = _interopRequireDefault(require("./layouts/SymbolsLayout"));

var _GermanLayout = _interopRequireDefault(require("./layouts/GermanLayout"));

var _FrenchLayout = _interopRequireDefault(require("./layouts/FrenchLayout"));

var _BackspaceIcon = _interopRequireDefault(require("./icons/BackspaceIcon"));

var _LanguageIcon = _interopRequireDefault(require("./icons/LanguageIcon"));

var _ShiftIcon = _interopRequireDefault(require("./icons/ShiftIcon"));

var _DraggableIcon = _interopRequireDefault(require("./icons/DraggableIcon"));

var Keyboard = function (_PureComponent) {
  (0, _inherits2["default"])(Keyboard, _PureComponent);

  function Keyboard(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, Keyboard);
    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(Keyboard).call(this, props));
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getCharacterClassName", function (letter) {
      var _char = "".concat(letter);

      if (_char.length > 1) {
        return '';
      }

      return "keyboard-key-".concat(_char.charCodeAt(0));
    });
    _this.handleLetterButtonClick = _this.handleLetterButtonClick.bind((0, _assertThisInitialized2["default"])(_this));
    _this.handleBackspaceClick = _this.handleBackspaceClick.bind((0, _assertThisInitialized2["default"])(_this));
    _this.clearInput = _this.clearInput.bind((0, _assertThisInitialized2["default"])(_this));
    _this.handleShiftClick = _this.handleShiftClick.bind((0, _assertThisInitialized2["default"])(_this));
    _this.handleSymbolsClick = _this.handleSymbolsClick.bind((0, _assertThisInitialized2["default"])(_this));
    _this.handleLanguageClick = _this.handleLanguageClick.bind((0, _assertThisInitialized2["default"])(_this));
    _this.handleDragKeyClick = _this.handleDragKeyClick.bind((0, _assertThisInitialized2["default"])(_this));
    _this.state = {
      currentLanguage: props.defaultKeyboard,
      showSymbols: false,
      uppercase: _this.isUppercase()
    };
    return _this;
  }

  (0, _createClass2["default"])(Keyboard, [{
    key: "getKeys",
    value: function getKeys() {
      var keysSet;

      if (this.state.showSymbols) {
        keysSet = _SymbolsLayout["default"];
      } else if (this.state.currentLanguage === 'us') {
        keysSet = _LatinLayout["default"];
      } else if (this.state.currentLanguage === 'de') {
        keysSet = _GermanLayout["default"];
      } else if (this.state.currentLanguage === 'fr') {
        keysSet = _FrenchLayout["default"];
      } else if (this.state.currentLanguage === 'ru') {
        keysSet = _CyrillicLayout["default"];
      } else if (this.state.currentLanguage) {
        keysSet = this.state.currentLanguage;
      } else {
        keysSet = _LatinLayout["default"];
      }

      return this.state.uppercase ? keysSet.map(function (keyRow) {
        return keyRow.map(function (key) {
          return isFinite(key) ? key : key.toUpperCase();
        });
      }) : keysSet;
    }
  }, {
    key: "getSymbolsKeyValue",
    value: function getSymbolsKeyValue() {
      var symbolsKeyValue;

      if (!this.state.showSymbols) {
        symbolsKeyValue = '.?!&';
      } else if (this.state.currentLanguage === 'us' || this.state.currentLanguage === 'de') {
        symbolsKeyValue = 'Abc';
      } else if (this.state.currentLanguage === 'ru') {
        symbolsKeyValue = 'Абв';
      } else {
        symbolsKeyValue = 'Abc';
      }

      return symbolsKeyValue;
    }
  }, {
    key: "handleLanguageClick",
    value: function handleLanguageClick() {
      this.setState({
        currentLanguage: this.state.currentLanguage === this.props.defaultKeyboard ? this.props.secondaryKeyboard : this.props.defaultKeyboard
      });
    }
  }, {
    key: "clearInput",
    value: function clearInput() {
      var inputNode = this.props.inputNode;
      inputNode.value = '';

      if (this.props.onClick) {
        this.props.onClick('');
      }

      setTimeout(function () {
        inputNode.focus();
      }, 0);
      inputNode.dispatchEvent(new CustomEvent('input'));
    }
  }, {
    key: "handleShiftClick",
    value: function handleShiftClick() {
      this.setState({
        uppercase: !this.state.uppercase
      });
    }
  }, {
    key: "handleSymbolsClick",
    value: function handleSymbolsClick() {
      this.setState({
        showSymbols: !this.state.showSymbols
      });
    }
  }, {
    key: "handleLetterButtonClick",
    value: function handleLetterButtonClick(key) {
      var inputNode = this.props.inputNode;
      var value = inputNode.value;
      var selectionStart;
      var selectionEnd;

      try {
        selectionStart = inputNode.selectionStart;
        selectionEnd = inputNode.selectionEnd;
      } catch (e) {
        selectionStart = value.length;
        selectionEnd = value.length;
      }

      var nextValue = value.substring(0, selectionStart) + key + value.substring(selectionEnd);
      inputNode.value = nextValue;

      if (this.props.onClick) {
        this.props.onClick(nextValue);
      }

      setTimeout(function () {
        inputNode.focus();

        try {
          var offset = !isFinite(key) ? key.length : 1;
          inputNode.setSelectionRange(selectionStart + offset, selectionStart + offset);
        } catch (e) {
          console.error(e);
        }
      });
      this.setState({
        uppercase: this.isUppercase()
      });
      inputNode.dispatchEvent(new CustomEvent('input'));
    }
  }, {
    key: "handleDragKeyClick",
    value: function handleDragKeyClick() {
      var inputNode = this.props.inputNode;
      setTimeout(function () {
        inputNode.focus();
      }, 0);
    }
  }, {
    key: "isUppercase",
    value: function isUppercase() {
      var _this$props = this.props,
          inputNode = _this$props.inputNode,
          isFirstLetterUppercase = _this$props.isFirstLetterUppercase,
          uppercaseAfterSpace = _this$props.uppercaseAfterSpace,
          dataset = _this$props.dataset;
      return inputNode.type !== 'password' && dataset.type !== 'email' && (!inputNode.value.length && isFirstLetterUppercase || inputNode.value.length > 0 && inputNode.value[inputNode.value.length - 1] === ' ' && uppercaseAfterSpace);
    }
  }, {
    key: "handleBackspaceClick",
    value: function handleBackspaceClick() {
      var inputNode = this.props.inputNode;
      var value = inputNode.value;
      var selectionStart;
      var selectionEnd;

      try {
        selectionStart = inputNode.selectionStart;
        selectionEnd = inputNode.selectionEnd;
      } catch (e) {
        selectionStart = 0;
        selectionEnd = value.length;
      }

      var nextValue;
      var nextSelectionPosition;

      if (selectionStart === selectionEnd) {
        nextValue = value.substring(0, selectionStart - 1) + value.substring(selectionEnd);
        nextSelectionPosition = selectionStart - 1;
      } else {
        nextValue = value.substring(0, selectionStart) + value.substring(selectionEnd);
        nextSelectionPosition = selectionStart;
      }

      nextSelectionPosition = nextSelectionPosition > 0 ? nextSelectionPosition : 0;
      inputNode.value = nextValue;

      if (this.props.onClick) {
        this.props.onClick(nextValue);
      }

      setTimeout(function () {
        inputNode.focus();

        try {
          inputNode.setSelectionRange(nextSelectionPosition, nextSelectionPosition);
        } catch (e) {
          console.error(e);
        }
      }, 0);
      this.setState({
        uppercase: this.isUppercase()
      });
      inputNode.dispatchEvent(new CustomEvent('input'));
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props2 = this.props,
          inputNode = _this$props2.inputNode,
          secondaryKeyboard = _this$props2.secondaryKeyboard;
      var keys = this.getKeys();
      var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
      var symbolsKeyValue = this.getSymbolsKeyValue();
      return _react["default"].createElement(_reactDraggable["default"], {
        disabled: this.props.isDraggable === false,
        defaultPosition: {
          x: 0,
          y: 0
        }
      }, _react["default"].createElement("div", {
        className: "keyboard keyboard-wrapper ".concat(typeof this.props.keyboardClassName !== 'undefined' ? this.props.keyboardClassName : ''),
        style: {
          opacity: "".concat(typeof this.props.opacity !== 'undefined' ? this.props.opacity : 1)
        }
      }, this.props.showNumericRow ? _react["default"].createElement("div", {
        className: "keyboard-row"
      }, numbers.map(function (button) {
        return _react["default"].createElement(_KeyboardButton["default"], {
          value: button,
          onClick: _this2.handleLetterButtonClick,
          classes: "keyboard-numberButton ".concat(_this2.getCharacterClassName(button)),
          key: button
        });
      }), _react["default"].createElement(_KeyboardButton["default"], {
        classes: "backspace-button",
        value: _react["default"].createElement(_SvgIcon["default"], {
          type: "shanchu1"
        }),
        onClick: this.handleBackspaceClick
      })) : null, keys.map(function (row, i) {
        return _react["default"].createElement("div", {
          key: "r".concat(i),
          className: "keyboard-row"
        }, keys.length === i + 1 && _this2.props.showShift && _react["default"].createElement(_KeyboardButton["default"], {
          classes: "shift-symbols",
          value: _react["default"].createElement(_SvgIcon["default"], {
            type: _this2.state.uppercase ? 'qiehuanxiaoxie' : 'qiehuandaxie'
          }),
          onClick: _this2.handleShiftClick
        }), row.map(function (button, ii) {
          switch (button.toLowerCase()) {
            case '*bs':
              return _react["default"].createElement(_KeyboardButton["default"], {
                classes: "backspace-button",
                value: _react["default"].createElement(_BackspaceIcon["default"], null),
                onClick: _this2.handleBackspaceClick,
                key: "b".concat(ii)
              });

            case '*sh':
              return _react["default"].createElement(_KeyboardButton["default"], {
                classes: "shift-symbols",
                value: _react["default"].createElement(_ShiftIcon["default"], null),
                onClick: _this2.handleShiftClick,
                key: "b".concat(ii)
              });

            default:
              return _react["default"].createElement(_KeyboardButton["default"], {
                value: button,
                classes: _this2.getCharacterClassName(button),
                onClick: _this2.handleLetterButtonClick,
                key: "b".concat(ii)
              });
          }
        }), keys.length === i + 1 && _this2.props.showSymbols && _react["default"].createElement(_KeyboardButton["default"], {
          classes: "shift-symbols",
          value: symbolsKeyValue,
          onClick: _this2.handleSymbolsClick
        }));
      }), _react["default"].createElement("div", {
        className: "keyboard-row"
      }, typeof secondaryKeyboard !== 'undefined' ? _react["default"].createElement(_KeyboardButton["default"], {
        value: _react["default"].createElement(_LanguageIcon["default"], null),
        onClick: this.handleLanguageClick
      }) : null, inputNode.dataset.type === 'email' ? _react["default"].createElement(_KeyboardButton["default"], {
        value: '@',
        onClick: this.handleLetterButtonClick
      }) : null, this.props.isDraggable !== false ? _react["default"].createElement(_KeyboardButton["default"], {
        value: _react["default"].createElement(_DraggableIcon["default"], null),
        classes: "keyboard-draggable-button",
        onClick: this.handleDragKeyClick
      }) : null, this.props.showSpacebar ? _react["default"].createElement(_KeyboardButton["default"], {
        value: ' ',
        classes: "keyboard-space",
        onClick: this.handleLetterButtonClick
      }) : null, inputNode.dataset.type === 'email' ? _react["default"].createElement(_KeyboardButton["default"], {
        value: '.',
        onClick: this.handleLetterButtonClick
      }) : null, this.props.showSubmit ? _react["default"].createElement(_KeyboardButton["default"], {
        value: String.fromCharCode('8615'),
        classes: "keyboard-submit-button",
        onClick: this.props.hideKeyboard
      }) : null)));
    }
  }]);
  return Keyboard;
}(_react.PureComponent);

exports["default"] = Keyboard;
(0, _defineProperty2["default"])(Keyboard, "propTypes", {
  inputNode: _propTypes["default"].any.isRequired,
  onClick: _propTypes["default"].func,
  isFirstLetterUppercase: _propTypes["default"].bool,
  uppercaseAfterSpace: _propTypes["default"].bool,
  defaultKeyboard: _propTypes["default"].any,
  secondaryKeyboard: _propTypes["default"].string,
  hideKeyboard: _propTypes["default"].func,
  opacity: _propTypes["default"].number,
  isDraggable: _propTypes["default"].bool,
  dataset: _propTypes["default"].any,
  keyboardClassName: _propTypes["default"].any,
  showNumericRow: _propTypes["default"].bool,
  showShift: _propTypes["default"].bool,
  showSymbols: _propTypes["default"].bool,
  showSpacebar: _propTypes["default"].bool,
  showSubmit: _propTypes["default"].bool
});
(0, _defineProperty2["default"])(Keyboard, "defaultProps", {
  rightButtons: [],
  isFirstLetterUppercase: true,
  uppercaseAfterSpace: false,
  isDraggable: true,
  defaultKeyboard: 'us',
  dataset: {
    type: 'input'
  },
  showNumericRow: true,
  showShift: true,
  showSymbols: true,
  showSpacebar: true,
  showSubmit: true
});
//# sourceMappingURL=Keyboard.js.map