instantjob-recruiter-client/dist/components/non_exclusive_field.es6.js

a set of tools for creating an instantjob recruiter react client

'use strict';

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

var _promise = require('babel-runtime/core-js/promise');

var _promise2 = _interopRequireDefault(_promise);

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

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 _bind = require('classnames/bind');

var _bind2 = _interopRequireDefault(_bind);

var _md = require('react-icons/lib/md');

var _constants = require('../common/constants');

var _utilities = require('../common/utilities');

var _auto_bind = require('../common/auto_bind');

var _auto_bind2 = _interopRequireDefault(_auto_bind);

var _button = require('components/utils/button');

var _button2 = _interopRequireDefault(_button);

var _search_bar = require('./search_bar');

var _search_bar2 = _interopRequireDefault(_search_bar);

var _hover = require('components/utils/hover');

var _hover2 = _interopRequireDefault(_hover);

var _field = require('./field');

var _field2 = _interopRequireDefault(_field);

var _fields = require('../common/fields');

var _store = require('../common/store');

var _store2 = _interopRequireDefault(_store);

var _display = require('../actions/display');

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

var cx = _bind2.default.bind(require('../styles/field.scss'));

var NonExclusiveField = function (_Component) {
  (0, _inherits3.default)(NonExclusiveField, _Component);

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

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

    _this.state = {
      comment: props.comment,
      active: false,
      query: "",
      results: []
    };
    (0, _auto_bind2.default)(_this);
    return _this;
  }

  (0, _createClass3.default)(NonExclusiveField, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.mounted = true;
      if (this.should_set_state) {
        this.setState(this.should_set_state);
        this.should_set_state = false;
      }
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      this.mounted = false;
    }
  }, {
    key: 'on_query_change',
    value: function on_query_change(query, results) {
      if (this.mounted) {
        this.setState({ query: query, results: results });
      } else {
        this.should_set_state = { query: query, results: results };
      }
    }
  }, {
    key: 'create_value',
    value: function create_value() {
      var _this2 = this;

      this.search_bar.set_query("");
      this.props.create_value(this.state.query).then(function (id) {
        _this2.props.on_select_value(id);
      }, function () {});
    }
  }, {
    key: 'get_default_results',
    value: function get_default_results() {
      return this.props.values.sort(function (a, b) {
        return a.name.localeCompare(b.name);
      }).map(function (value) {
        return value.id;
      });
    }
  }, {
    key: 'deactivate',
    value: function deactivate() {
      this.setState({ active: false });
    }
  }, {
    key: 'activate',
    value: function activate() {
      this.setState({ active: true });
      this.focus_search_bar();
    }
  }, {
    key: 'focus_search_bar',
    value: function focus_search_bar() {
      var _this3 = this;

      setTimeout(function () {
        if (_this3.mounted && _this3.search_bar) {
          _this3.search_bar.focus();
        }
      });
    }
  }, {
    key: 'toggle_selected',
    value: function toggle_selected(selected, value_id) {
      var _this4 = this;

      return function () {
        _this4.should_blur = false;
        _this4.focus_search_bar();
        if (selected) {
          _this4.props.on_deselect_value(value_id);
        } else {
          _this4.props.on_select_value(value_id);
        }
      };
    }
  }, {
    key: 'render_hoverable',
    value: function render_hoverable(hover) {
      var _this5 = this;

      var editing = this.state.active && this.props.editable;
      var use_ellipsis = !hover && !editing;
      var selected_values = this.props.selected_values;

      if (this.props.ellipsis && use_ellipsis) {
        selected_values = selected_values.slice(0, this.props.ellipsis);
      }
      var values_hash = (0, _utilities.hash_with_key)(this.props.values);
      var displayed_value_ids = this.props.searchable ? this.state.results : this.get_default_results();
      return _react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(
          'div',
          {
            tabIndex: 0,
            onFocus: this.activate,
            className: cx('field__display', { 'field__display_empty': this.props.selected_values.length == 0, 'field__display_magnify': hover || editing })
          },
          this.props.selected_values.length == 0 ? _react2.default.createElement(
            'div',
            { className: cx('field__label', { 'field__label_ellipsis': this.props.field_ellipsis }), style: this.props.field_ellipsis ? { maxWidth: this.props.field_ellipsis } : {} },
            this.props.placeholder || _react2.default.createElement(
              'span',
              null,
              '\u2026'
            )
          ) : selected_values.sort(function (a, b) {
            return a.name.localeCompare(b.name);
          }).map(function (value) {
            return _react2.default.createElement(SelectedValue, {
              key: value.id,
              name: value.name,
              ellipsis: use_ellipsis && _this5.props.value_ellipsis
            });
          }),
          this.props.ellipsis && selected_values.length < this.props.selected_values.length ? _react2.default.createElement(
            'div',
            { style: (0, _extends3.default)({}, styles.pill, { color: (0, _constants.color)('primary', 'light') }) },
            '\u2026'
          ) : null
        ),
        this.props.editable ? _react2.default.createElement(
          'div',
          { className: cx('field__selection-values'), onMouseLeave: this.deactivate },
          this.props.searchable ? _react2.default.createElement(_search_bar2.default, {
            ref: function ref(search_bar) {
              return _this5.search_bar = search_bar;
            },
            key: 'search_bar',
            className: cx('field__search-bar'),
            make_fuse: _fields.new_values_fuse,
            items: this.props.values,
            default_results: this.get_default_results(),
            on_query_change: this.on_query_change,
            placeholder: ''
          }) : null,
          _react2.default.createElement(
            'div',
            { className: cx('field__selection-values-container') },
            displayed_value_ids.length == 0 ? this.props.allow_creating_values && this.state.query.length > 0 ? _react2.default.createElement(
              'div',
              { style: { padding: 5, display: 'flex', justifyContent: 'center', alignItems: 'center' } },
              _react2.default.createElement(
                _button2.default,
                { onClick: this.create_value },
                'Ajouter'
              )
            ) : _react2.default.createElement(
              'div',
              { style: { padding: 10, color: (0, _constants.color)('black', 'bright'), textAlign: 'center', fontStyle: 'italic', backgroundColor: (0, _constants.color)('black', 'pale') } },
              'Aucune valeur'
            ) : displayed_value_ids.map(function (id) {
              return values_hash[id];
            }).filter(Boolean).map(function (value) {
              var selected = (0, _utilities.array_contains)(_this5.props.selected_values, value);
              return _react2.default.createElement(SelectionValue, {
                key: value.id,
                name: value.name,
                selected: selected,
                on_click: _this5.toggle_selected(selected, value.id)
              });
            })
          )
        ) : null
      );
    }
  }, {
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        _field2.default,
        (0, _extends3.default)({}, this.props, {
          category: 'non-exclusive',
          className: cx({
            'field_selected-values_empty': this.props.selected_values.length == 0,
            'field_active': this.state.active && this.props.editable
          })
        }),
        _react2.default.createElement(
          _hover2.default,
          null,
          this.render_hoverable
        )
      );
    }
  }]);
  return NonExclusiveField;
}(_react.Component);

var SelectedValue = function (_Component2) {
  (0, _inherits3.default)(SelectedValue, _Component2);

  function SelectedValue() {
    (0, _classCallCheck3.default)(this, SelectedValue);
    return (0, _possibleConstructorReturn3.default)(this, (SelectedValue.__proto__ || (0, _getPrototypeOf2.default)(SelectedValue)).apply(this, arguments));
  }

  (0, _createClass3.default)(SelectedValue, [{
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        'div',
        { className: cx('field__selected-value', { 'field__selected-value_ellipsis': this.props.ellipsis }), style: this.props.ellipsis ? { maxWidth: this.props.ellipsis } : {} },
        this.props.name == "" ? _react2.default.createElement(
          'span',
          { style: { opacity: 0.54, fontStyle: 'italic' } },
          'Valeur sans nom'
        ) : _react2.default.createElement(
          'span',
          null,
          this.props.name
        )
      );
    }
  }]);
  return SelectedValue;
}(_react.Component);

var SelectionValue = function (_Component3) {
  (0, _inherits3.default)(SelectionValue, _Component3);

  function SelectionValue() {
    (0, _classCallCheck3.default)(this, SelectionValue);
    return (0, _possibleConstructorReturn3.default)(this, (SelectionValue.__proto__ || (0, _getPrototypeOf2.default)(SelectionValue)).apply(this, arguments));
  }

  (0, _createClass3.default)(SelectionValue, [{
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        'div',
        { onClick: this.props.on_click, className: cx('field__selection-value', { 'field__selection-value_selected': this.props.selected }) },
        this.props.name == "" ? _react2.default.createElement(
          'span',
          { style: { opacity: 0.54, fontStyle: 'italic' } },
          'Valeur sans nom'
        ) : _react2.default.createElement(
          'span',
          null,
          this.props.name
        ),
        _react2.default.createElement(
          'span',
          { style: { width: 30, textAlign: 'center' } },
          this.props.selected ? _react2.default.createElement(_md.MdCheck, null) : null
        )
      );
    }
  }]);
  return SelectionValue;
}(_react.Component);

var styles = {
  pill: {
    borderRadius: 5, paddingLeft: 14, paddingTop: 1, paddingRight: 14, paddingBottom: 1
  },
  truncate: {
    whiteSpace: "nowrap",
    overflow: "hidden",
    textOverflow: "ellipsis"
  }
};

NonExclusiveField.defaultProps = {
  name: "",
  show_label: true,
  selected_values: [],
  values: [],
  on_select_value: function on_select_value(id) {},
  on_deselect_value: function on_deselect_value(id) {},
  ellipsis: false,
  placeholder: "",
  value_ellipsis: false,
  field_ellipsis: false,
  edit_mode: 'hover',
  editable: true,
  searchable: true,
  allow_creating_values: true,
  create_value: function create_value(value) {
    return new _promise2.default(function (resolve, reject) {
      return reject();
    });
  }
};

exports.default = NonExclusiveField;