shengnian-editor/lib/ui/InputDropdown/InputDropdown.js

Shengnian React Rich Text Editor

'use strict';

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

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _Selection = require('./Selection');

var _Selection2 = _interopRequireDefault(_Selection);

var _InputDropdown = require('./InputDropdown.css');

var _InputDropdown2 = _interopRequireDefault(_InputDropdown);

var _IconButton = require('../IconButton.css');

var _IconButton2 = _interopRequireDefault(_IconButton);

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

var InputDropdown = function (_React$Component) {
  (0, _inherits3.default)(InputDropdown, _React$Component);

  function InputDropdown(props) {
    (0, _classCallCheck3.default)(this, InputDropdown);

    var _this = (0, _possibleConstructorReturn3.default)(this, (InputDropdown.__proto__ || (0, _getPrototypeOf2.default)(InputDropdown)).call(this, props));

    _this.onItemClick = function (key) {
      var clickedItem = _this.props.items.find(function (item) {
        return item.value === key;
      });
      _this.selectItem(clickedItem);
    };

    _this.onFocus = function () {
      _this.setState({
        isActive: true,
        activeIndex: -1
      });
    };

    _this.onBlur = function () {
      if (_this.itemWasPressed) {
        // Blur event is triggered before click event, which means a click on a dropdown item wont be triggered if we hide the dropdown list here.
        _this.itemWasPressed = false;

        return;
      }

      _this.setState({ isActive: false });
    };

    _this.onKeyDown = function (event) {
      var nextIndex = _this.state.activeIndex;
      switch (event.keyCode) {
        case 13:
          // enter
          _this.selectCurrentActive();
          break;
        case 38:
          // up
          nextIndex = Math.max(_this.state.activeIndex - 1, 0);
          break;
        case 40:
          // down
          nextIndex = Math.min(_this.state.activeIndex + 1, _this.props.items.length - 1);
          break;
        default:
          break;
      }

      if (nextIndex !== _this.state.activeIndex) {
        _this.setState({ activeIndex: nextIndex });
      }
    };

    _this.onInputChange = function (event) {
      var value = event.currentTarget.value;
      _this.setState({ inputValue: value });

      if (_this.props.onInputChange) {
        _this.props.onInputChange(value);
      }
    };

    _this.onItemMouseDown = function () {
      _this.itemWasPressed = true;
    };

    _this.onItemMouseEnter = function (value) {
      var index = _this.props.items.findIndex(function (item) {
        return item.value === value;
      });
      _this.setState({ activeIndex: index });
    };

    _this.selectCurrentActive = function () {
      if (_this.state.activeIndex > -1) {
        _this.selectItem(_this.props.items[_this.state.activeIndex]);
      }
    };

    _this.selectItem = function (item) {
      _this.setState({
        inputValue: item.label,
        isActive: false
      });

      _this._inputDropdown.blur();

      if (_this.props.onItemSelected) {
        _this.props.onItemSelected(item);
      }
    };

    _this.state = {
      isOpen: false,
      isActive: false,
      inputValue: '',
      activeIndex: -1
    };
    _this.itemWasPressed = false;
    return _this;
  }

  (0, _createClass3.default)(InputDropdown, [{
    key: 'render',


    // componentWillReceiveProps(newProps) {
    // if(newProps.displayValue) {
    //   this.setState({
    //     inputValue: newProps.displayValue
    //   })
    // }
    // }

    value: function render() {
      var _cx,
          _this2 = this;

      var iconClassName = (0, _classnames2.default)((_cx = {}, (0, _defineProperty3.default)(_cx, _IconButton2.default.icon, true), (0, _defineProperty3.default)(_cx, _IconButton2.default.root, true), _cx));

      return _react2.default.createElement(
        'div',
        { className: _InputDropdown2.default.root },
        _react2.default.createElement('input', {
          type: 'text',
          name: this.props.name,
          value: this.state.inputValue,
          onChange: this.onInputChange,
          onFocus: this.onFocus,
          onBlur: this.onBlur,
          onKeyDown: this.onKeyDown,
          ref: function ref(dropdownInput) {
            return _this2._inputDropdown = dropdownInput;
          },
          placeholder: this.props.placeholder
        }),
        _react2.default.createElement(_Selection2.default, {
          visible: this.state.isActive,
          items: this.props.items,
          activeIndex: this.state.activeIndex,
          onItemClick: this.onItemClick,
          onItemMouseDown: this.onItemMouseDown,
          onItemMouseEnter: this.onItemMouseEnter
        })
      );
    }
  }]);
  return InputDropdown;
}(_react2.default.Component);

exports.default = InputDropdown;