@lyra/components/lib/tags/TextField.js

Basic UX components

'use strict';

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

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _textfieldStyle = require('part:@lyra/components/tags/textfield-style');

var _textfieldStyle2 = _interopRequireDefault(_textfieldStyle);

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function removeAt(array, index) {
  const copy = array ? array.slice() : [];
  copy.splice(index, 1);
  return copy;
}

class TagsTextField extends _react2.default.Component {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), this.state = {
      inputValue: ''
    }, this.handleRemoveTagClick = event => {
      this.removeTag(Number(event.currentTarget.getAttribute('data-index')));
    }, this.handleKeyDown = event => {
      const value = this.props.value;
      const inputValue = this.state.inputValue;


      if (event.key === 'Backspace' && inputValue === '') {
        this.removeTag(value.length - 1);
      }
    }, this.handleKeyPress = event => {
      const inputValue = this.state.inputValue;


      if (inputValue && event.key === 'Enter') {
        this.addAndClearInput(inputValue);
      }
    }, this.handleBlur = event => {
      const inputValue = this.state.inputValue;

      if (inputValue) {
        this.addAndClearInput(inputValue);
      }
      this.props.onBlur(event);
    }, this.handleInputChange = event => {
      this.setState({ inputValue: event.currentTarget.value });
    }, this.setInput = el => {
      this._input = el;
    }, _temp;
  }

  addTag(tagValue) {
    var _props = this.props;
    const value = _props.value,
          onChange = _props.onChange;

    onChange((value || []).concat(tagValue));
  }

  removeTag(index) {
    var _props2 = this.props;
    const value = _props2.value,
          onChange = _props2.onChange;

    onChange(removeAt(value, index));
  }

  addAndClearInput(tagValue) {
    this.addTag(tagValue);
    // clear input value
    this.setState({
      inputValue: ''
    });
  }

  focus() {
    if (this._input) {
      this._input.focus();
    }
  }

  render() {
    const inputValue = this.state.inputValue;
    var _props3 = this.props;

    const onChange = _props3.onChange,
          value = _props3.value,
          readOnly = _props3.readOnly,
          markers = _props3.markers,
          rest = _objectWithoutProperties(_props3, ['onChange', 'value', 'readOnly', 'markers']);

    return _react2.default.createElement(
      'div',
      { className: readOnly ? _textfieldStyle2.default.rootReadOnly : _textfieldStyle2.default.root },
      _react2.default.createElement(
        'div',
        { className: _textfieldStyle2.default.inner },
        _react2.default.createElement(
          'div',
          { className: _textfieldStyle2.default.content },
          _react2.default.createElement(
            'ul',
            { className: _textfieldStyle2.default.tags },
            value.map((tag, i) => {
              return _react2.default.createElement(
                'li',
                {
                  key: i,
                  className: readOnly ? _textfieldStyle2.default.tag : _textfieldStyle2.default.tagWithClear
                },
                tag,
                !readOnly && _react2.default.createElement(
                  'a',
                  {
                    onClick: this.handleRemoveTagClick,
                    'data-index': i,
                    className: _textfieldStyle2.default.clearTag
                  },
                  '\xD7'
                )
              );
            })
          ),
          _react2.default.createElement('input', _extends({}, rest, {
            readOnly: readOnly,
            value: inputValue,
            className: _textfieldStyle2.default.input,
            onKeyDown: this.handleKeyDown,
            onKeyPress: this.handleKeyPress,
            onChange: this.handleInputChange,
            style: { width: `${Math.max(3, inputValue.length) * 0.8}em` },
            onBlur: this.handleBlur,
            ref: this.setInput,
            autoComplete: 'off'
          }))
        ),
        _react2.default.createElement('div', { className: _textfieldStyle2.default.focusHelper })
      )
    );
  }
}
exports.default = TagsTextField;
TagsTextField.propTypes = {
  onChange: _propTypes2.default.func.isRequired,
  onBlur: _propTypes2.default.func,
  readOnly: _propTypes2.default.bool,
  markers: _propTypes2.default.array,
  readOnly: _propTypes2.default.bool,
  value: _propTypes2.default.arrayOf(_propTypes2.default.string)
};
TagsTextField.defaultProps = {
  value: [],
  readOnly: false,
  onBlur: () => {}
};