react-lacona/lib/option.js

React Component to provide a friendly interface for lacona

'use strict';

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

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _lodash = require('lodash');

var _lodash2 = _interopRequireDefault(_lodash);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _preview = require('./preview');

var _preview2 = _interopRequireDefault(_preview);

var _reactDom = require('react-dom');

var _colorizeLaconaArgument = require('colorize-lacona-argument');

var _colorizeLaconaArgument2 = _interopRequireDefault(_colorizeLaconaArgument);

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

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

function getCategories(categories, wordIndex) {
  return _lodash2.default.chain(categories).filter(function (category) {
    return category.start <= wordIndex && category.end > wordIndex;
  }).map(function (category) {
    return 'category-' + category.value;
  }).filter().value();
}

function getAnnotations(annotations, wordIndex) {
  return _lodash2.default.chain(annotations).filter(function (annotation) {
    return annotation.start === wordIndex;
  }).map(function (annotation, aIndex) {
    var identifier = void 0;
    switch (annotation.value.type) {
      case 'icon':
        identifier = annotation.value.value || annotation.value.path;
        return _react2.default.createElement('div', {
          className: 'annotation icon-annotation',
          key: aIndex,
          style: { backgroundImage: 'url(lacona-icon:' + encodeURI(identifier) + ')' } });
      case 'contact':
        identifier = annotation.value.value || annotation.value.id;
        return _react2.default.createElement('div', {
          className: 'annotation contact-icon-annotation',
          key: aIndex,
          style: { backgroundImage: 'url(lacona-contact-icon:' + encodeURI(identifier) + ')' } });
      case 'image':
        identifier = annotation.value.value || annotation.value.path;
        return _react2.default.createElement('div', {
          className: 'annotation image-annotation',
          key: aIndex,
          style: { backgroundImage: 'url(lacona-image:' + encodeURI(identifier) + ')' } });
      case 'url':
        identifier = annotation.value.value || annotation.value.path;
        return _react2.default.createElement('div', {
          className: 'annotation url-annotation',
          key: aIndex,
          style: { backgroundImage: 'url(' + encodeURI(identifier) + ')' } });
      case 'text':
        return _react2.default.createElement(
          'div',
          { className: 'annotation text-annotation', key: aIndex },
          annotation.value.value
        );
    }
  }).filter().value();
}

function getQualifiers(qualifiers, wordIndex) {
  return _lodash2.default.chain(qualifiers).filter(function (qualifier) {
    return qualifier.end - 1 === wordIndex;
  }).map(function (qualifier, qIndex) {
    return _react2.default.createElement(
      'div',
      { className: 'qualifier', key: qIndex },
      qualifier.value
    );
  }).value();
}

var Placeholder = function (_React$Component) {
  _inherits(Placeholder, _React$Component);

  function Placeholder() {
    _classCallCheck(this, Placeholder);

    return _possibleConstructorReturn(this, (Placeholder.__proto__ || Object.getPrototypeOf(Placeholder)).apply(this, arguments));
  }

  _createClass(Placeholder, [{
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        'div',
        { className: 'placeholder' },
        _lodash2.default.chain(this.props.word.placeholderTexts).map(function (desc, index) {
          var className = 'placeholder-component category-argument' + (0, _colorizeLaconaArgument2.default)(desc);
          return [_react2.default.createElement(
            'div',
            { className: 'placeholder-component category-conjunction', key: index + ',' },
            ', '
          ), _react2.default.createElement(
            'div',
            { className: className, key: index },
            desc
          )];
        }).flatten().tail().value()
      );
    }
  }]);

  return Placeholder;
}(_react2.default.Component);

var Option = exports.Option = function (_React$Component2) {
  _inherits(Option, _React$Component2);

  function Option() {
    _classCallCheck(this, Option);

    var _this2 = _possibleConstructorReturn(this, (Option.__proto__ || Object.getPrototypeOf(Option)).call(this));

    _this2.updateCount = 0;
    return _this2;
  }

  _createClass(Option, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.componentDidUpdate();
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate() {
      var nextProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

      var words = (0, _reactDom.findDOMNode)(this.refs.words);
      var descs = (0, _reactDom.findDOMNode)(this.refs.descriptors);
      var wordsRect = words.getBoundingClientRect();

      var all = _lodash2.default.zip(_lodash2.default.toArray(words.children), _lodash2.default.toArray(descs.children));

      _lodash2.default.forEach(all, function (_ref) {
        var _ref2 = _slicedToArray(_ref, 2),
            word = _ref2[0],
            desc = _ref2[1];

        var rects = word.getClientRects();
        var rect = rects[0]; //use _.last for RTL
        var lines = _lodash2.default.groupBy(rects, 'top');
        var keys = Object.keys(lines);
        if (keys.length > 1) {
          var firstLineRects = lines[keys[0]];
          var secondLineRects = lines[keys[1]];
          if (_lodash2.default.last(firstLineRects).right - firstLineRects[0].left < 50 && _lodash2.default.last(secondLineRects).right - secondLineRects[0].left >= 50) {
            rect = secondLineRects[0];
          }
        }

        desc.style.left = rect.left - wordsRect.left + 'px';
        // // RTL
        // desc.style.right = `${wordsRect.right - rect.right}px`
        // 9 for Lacona, 6 for Lacona.io
        desc.style.top = rect.top - wordsRect.top + 9 + 'px';
      });
    }
  }, {
    key: 'handleMouseMove',
    value: function handleMouseMove(e) {
      if (!this.props.selected) {
        this.props.select();
      }
      // const coords = [e.pageX, e.pageY]
      // if (this.props.mouseMoved(coords)) {
      // }
    }
  }, {
    key: 'render',
    value: function render() {
      var _this3 = this;

      var argumentGroups = _lodash2.default.map(this.props.option.arguments, function (argument) {
        return {
          argument: argument,
          words: _this3.props.option.words.slice(argument.start, argument.end)
        };
      });

      var descriptors = _lodash2.default.chain(argumentGroups).map(function (_ref3, index) {
        var argument = _ref3.argument;

        var className = 'descriptor category-argument' + (0, _colorizeLaconaArgument2.default)(argument.value);
        return _react2.default.createElement(
          'div',
          { className: className, key: index },
          argument.value
        );
      }).flatten().value();

      var words = _lodash2.default.map(argumentGroups, function (_ref4, index) {
        var words = _ref4.words,
            argument = _ref4.argument;

        var className = 'word category-argument' + (0, _colorizeLaconaArgument2.default)(argument.value);

        return _react2.default.createElement(
          'div',
          { className: className, key: index },
          _lodash2.default.map(words, function (word, index) {
            var thisWordOutput = [];
            var trueIndex = argument.start + index;
            var annotations = getAnnotations(_this3.props.option.annotations, trueIndex);
            var qualifiers = getQualifiers(_this3.props.option.qualifiers, trueIndex);
            var categories = getCategories(_this3.props.option.categories, trueIndex);

            if (annotations.length) {
              thisWordOutput.push(_react2.default.createElement(
                'div',
                { className: 'annotations' },
                annotations
              ));
            }

            if (word.placeholder) {
              thisWordOutput.push(_react2.default.createElement(Placeholder, { word: word, key: index }));
            } else {
              var _className = 'word-component' + (word.input ? ' highlighted' : '') + ' ' + categories + ' ' + (word.fallthrough ? 'fallthrough' : '') + ' ' + (word.decorator ? 'decorator' : '');
              thisWordOutput.push(_react2.default.createElement(
                'div',
                { className: _className, key: index },
                word.text
              ));
            }

            if (qualifiers.length) {
              thisWordOutput.push(_react2.default.createElement(
                'div',
                { className: 'qualifiers' },
                qualifiers
              ));
            }

            return thisWordOutput;
          })
        );
      });

      var className = 'option' + (this.props.selected ? ' selected' : '');

      var qualifiers = this.props.option.qualifiers;
      return _react2.default.createElement(
        'div',
        {
          className: className,
          onMouseEnter: this.handleMouseMove.bind(this),
          onClick: this.props.execute,
          onMouseDown: this.props.onMouseDown,
          onMouseUp: this.props.onMouseUp },
        _react2.default.createElement(
          'div',
          { className: 'option-text' },
          this.props.selected && this.props.option.preview ? _react2.default.createElement(_preview2.default, { object: this.props.option.preview }) : null,
          _react2.default.createElement(
            'div',
            { className: 'descriptors', ref: 'descriptors' },
            descriptors
          ),
          _react2.default.createElement(
            'div',
            { className: 'words', ref: 'words' },
            words
          )
        ),
        _react2.default.createElement(
          'div',
          { className: 'hint' },
          this.props.hint
        )
      );
    }
  }]);

  return Option;
}(_react2.default.Component);