@panneau/field-autosuggest/lib/AutosuggestField.js

Autosuggest fields for Panneau

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _react = _interopRequireWildcard(require("react"));

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

var _classnames = _interopRequireDefault(require("classnames"));

var _get = _interopRequireDefault(require("lodash/get"));

var _isObject = _interopRequireDefault(require("lodash/isObject"));

var _reactAutosuggest = _interopRequireDefault(require("react-autosuggest"));

var _reactIntl = require("react-intl");

var _field = require("@panneau/field");

var _core = require("@panneau/core");

var _excluded = ["label", "name", "value"];

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

var styles = {
  "autosuggest": "panneau-field-autosuggest-autosuggest",
  "input": "panneau-field-autosuggest-input",
  "suggestionsContainer": "panneau-field-autosuggest-suggestionsContainer",
  "open": "panneau-field-autosuggest-open",
  "suggestions": "panneau-field-autosuggest-suggestions",
  "suggestion": "panneau-field-autosuggest-suggestion",
  "thumbnail": "panneau-field-autosuggest-thumbnail",
  "cols": "panneau-field-autosuggest-cols",
  "col": "panneau-field-autosuggest-col",
  "expand": "panneau-field-autosuggest-expand",
  "title": "panneau-field-autosuggest-title",
  "description": "panneau-field-autosuggest-description",
  "highlighted": "panneau-field-autosuggest-highlighted"
};
var propTypes = {
  intl: _core.PropTypes.intl.isRequired,
  name: _propTypes["default"].string,
  label: _core.PropTypes.label,
  value: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].array, _propTypes["default"].string]),
  placeholder: _core.PropTypes.message,
  suggestions: _propTypes["default"].array,
  // eslint-disable-line react/forbid-prop-types
  suggestionsEndpoint: _propTypes["default"].string,
  suggestionValuePath: _propTypes["default"].string,
  suggestionTitlePath: _propTypes["default"].string,
  suggestionDescriptionPath: _propTypes["default"].string,
  suggestionThumbnailPath: _propTypes["default"].string,
  getSuggestionValue: _propTypes["default"].func,
  getSuggestionTitle: _propTypes["default"].func,
  getSuggestionDescription: _propTypes["default"].func,
  getSuggestionThumbnail: _propTypes["default"].func,
  onChange: _propTypes["default"].func,
  onSelect: _propTypes["default"].func
};
var defaultProps = {
  name: null,
  label: null,
  value: null,
  placeholder: null,
  suggestions: [],
  suggestionsEndpoint: null,
  suggestionValuePath: 'name',
  suggestionTitlePath: 'name',
  suggestionDescriptionPath: 'description',
  suggestionThumbnailPath: 'thumbnail',
  getSuggestionValue: null,
  getSuggestionTitle: null,
  getSuggestionDescription: null,
  getSuggestionThumbnail: null,
  onChange: null,
  onSelect: null
};
/**
 * Autosuggest field
 * @extends Component
 */

var AutosuggestField = /*#__PURE__*/function (_Component) {
  (0, _inherits2["default"])(AutosuggestField, _Component);

  var _super = _createSuper(AutosuggestField);

  function AutosuggestField(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, AutosuggestField);
    _this = _super.call(this, props);
    _this.onInputChange = _this.onInputChange.bind((0, _assertThisInitialized2["default"])(_this));
    _this.onSuggestionSelected = _this.onSuggestionSelected.bind((0, _assertThisInitialized2["default"])(_this));
    _this.onSuggestionsFetchRequested = _this.onSuggestionsFetchRequested.bind((0, _assertThisInitialized2["default"])(_this));
    _this.onSuggestionsClearRequested = _this.onSuggestionsClearRequested.bind((0, _assertThisInitialized2["default"])(_this));
    _this.onSuggestionsFetched = _this.onSuggestionsFetched.bind((0, _assertThisInitialized2["default"])(_this));
    _this.onSuggestionsFetchError = _this.onSuggestionsFetchError.bind((0, _assertThisInitialized2["default"])(_this));
    _this.getSuggestionValue = _this.getSuggestionValue.bind((0, _assertThisInitialized2["default"])(_this));
    _this.renderSuggestion = _this.renderSuggestion.bind((0, _assertThisInitialized2["default"])(_this));
    _this.renderSuggestions = _this.renderSuggestions.bind((0, _assertThisInitialized2["default"])(_this));
    _this.state = {
      suggestions: props.suggestions || []
    };
    return _this;
  }

  (0, _createClass2["default"])(AutosuggestField, [{
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(_ref) {
      var nextSuggestions = _ref.suggestions;
      var suggestions = this.props.suggestions;
      var suggestionsChanged = nextSuggestions !== suggestions;

      if (suggestionsChanged) {
        this.setState({
          suggestions: nextSuggestions || []
        });
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(_ref2) {
      var prevSuggestionsEndpoint = _ref2.suggestionsEndpoint;
      var suggestionsEndpoint = this.props.suggestionsEndpoint;
      var suggestionsEndpointChanged = prevSuggestionsEndpoint !== suggestionsEndpoint;

      if (suggestionsEndpointChanged && suggestionsEndpoint !== null) {
        this.fetchSuggestions();
      }
    }
  }, {
    key: "onInputChange",
    value: function onInputChange(event, _ref3) {
      var newValue = _ref3.newValue;
      var onChange = this.props.onChange;

      if (onChange) {
        onChange(newValue);
      }
    }
  }, {
    key: "onSuggestionSelected",
    value: function onSuggestionSelected(event, _ref4) {
      var suggestion = _ref4.suggestion;
      var onSelect = this.props.onSelect;

      if (onSelect) {
        onSelect(suggestion);
      }
    }
  }, {
    key: "onSuggestionsFetchRequested",
    value: function onSuggestionsFetchRequested() {
      var _this$props = this.props,
          suggestionsEndpoint = _this$props.suggestionsEndpoint,
          suggestions = _this$props.suggestions;

      if (suggestionsEndpoint !== null) {
        this.fetchSuggestions();
      } else {
        this.setState({
          suggestions: suggestions
        });
      }
    }
  }, {
    key: "onSuggestionsClearRequested",
    value: function onSuggestionsClearRequested() {
      this.setState({
        suggestions: []
      });
    }
  }, {
    key: "onSuggestionsFetched",
    value: function onSuggestionsFetched(data) {
      this.setState({
        suggestions: data
      });
    }
  }, {
    key: "onSuggestionsFetchError",
    value: function onSuggestionsFetchError() {
      this.setState({
        suggestions: []
      });
    } // eslint-disable-next-line class-methods-use-this

  }, {
    key: "getSuggestionValue",
    value: function getSuggestionValue(suggestion) {
      var _this$props2 = this.props,
          getSuggestionValue = _this$props2.getSuggestionValue,
          suggestionValuePath = _this$props2.suggestionValuePath;
      return getSuggestionValue !== null ? getSuggestionValue(suggestion, this.props) : (0, _get["default"])(suggestion, suggestionValuePath, '');
    }
  }, {
    key: "fetchSuggestions",
    value: function fetchSuggestions() {
      var suggestionsEndpoint = this.props.suggestionsEndpoint;
      (0, _core.getJSON)(suggestionsEndpoint, {
        credentials: 'include'
      }).then(this.onSuggestionsFetched)["catch"](this.onSuggestionsFetchError);
    } // eslint-disable-next-line class-methods-use-this

  }, {
    key: "renderSuggestions",
    value: function renderSuggestions(_ref5) {
      var containerProps = _ref5.containerProps,
          children = _ref5.children;
      return /*#__PURE__*/_react["default"].createElement("div", containerProps, children);
    } // eslint-disable-next-line class-methods-use-this

  }, {
    key: "renderSuggestion",
    value: function renderSuggestion(suggestion) {
      var _classNames;

      var _this$props3 = this.props,
          getSuggestionTitle = _this$props3.getSuggestionTitle,
          getSuggestionDescription = _this$props3.getSuggestionDescription,
          getSuggestionThumbnail = _this$props3.getSuggestionThumbnail,
          suggestionTitlePath = _this$props3.suggestionTitlePath,
          suggestionDescriptionPath = _this$props3.suggestionDescriptionPath,
          suggestionThumbnailPath = _this$props3.suggestionThumbnailPath;
      var thumbnail = getSuggestionThumbnail !== null ? getSuggestionThumbnail(suggestion) : (0, _get["default"])(suggestion, suggestionThumbnailPath, null);
      var title = getSuggestionTitle !== null ? getSuggestionTitle(suggestion) : (0, _get["default"])(suggestion, suggestionTitlePath, null);
      var description = getSuggestionDescription !== null ? getSuggestionDescription(suggestion) : (0, _get["default"])(suggestion, suggestionDescriptionPath, null);
      var labelClassNames = (0, _classnames["default"])((_classNames = {}, (0, _defineProperty2["default"])(_classNames, styles.col, true), (0, _defineProperty2["default"])(_classNames, styles.expand, true), _classNames));
      var thumbnailStyle = thumbnail !== null ? {
        backgroundImage: "url(".concat(thumbnail, ")")
      } : null;
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: styles.inner
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: styles.cols
      }, thumbnail ? /*#__PURE__*/_react["default"].createElement("div", {
        className: styles.col
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: styles.thumbnail,
        style: thumbnailStyle
      })) : null, /*#__PURE__*/_react["default"].createElement("div", {
        className: labelClassNames
      }, title !== null ? /*#__PURE__*/_react["default"].createElement("div", {
        className: styles.title
      }, title) : null, description !== null ? /*#__PURE__*/_react["default"].createElement("div", {
        className: styles.description
      }, description) : null)));
    }
  }, {
    key: "renderInput",
    value: function renderInput() {
      var _this$props4 = this.props,
          value = _this$props4.value,
          placeholder = _this$props4.placeholder,
          intl = _this$props4.intl;
      var suggestions = this.state.suggestions;
      var inputPlaceholder = placeholder || '';
      var inputProps = {
        value: value || '',
        onChange: this.onInputChange,
        placeholder: (0, _isObject["default"])(inputPlaceholder) ? intl.formatMessage(inputPlaceholder) : inputPlaceholder
      };
      var theme = {
        container: (0, _classnames["default"])((0, _defineProperty2["default"])({}, styles.autosuggest, true)),
        containerOpen: (0, _classnames["default"])((0, _defineProperty2["default"])({}, styles.open, true)),
        input: (0, _classnames["default"])((0, _defineProperty2["default"])({
          'form-control': true
        }, styles.input, true)),
        suggestionsContainer: (0, _classnames["default"])((0, _defineProperty2["default"])({}, styles.suggestionsContainer, true)),
        suggestionsContainerOpen: (0, _classnames["default"])((0, _defineProperty2["default"])({}, styles.open, true)),
        suggestionsList: (0, _classnames["default"])((0, _defineProperty2["default"])({}, styles.suggestions, true)),
        suggestion: (0, _classnames["default"])((0, _defineProperty2["default"])({}, styles.suggestion, true)),
        suggestionHighlighted: (0, _classnames["default"])((0, _defineProperty2["default"])({}, styles.highlighted, true))
      };
      return /*#__PURE__*/_react["default"].createElement(_reactAutosuggest["default"], {
        suggestions: suggestions,
        inputProps: inputProps,
        theme: theme,
        getSuggestionValue: this.getSuggestionValue,
        renderSuggestion: this.renderSuggestion,
        onSuggestionsFetchRequested: this.onSuggestionsFetchRequested,
        onSuggestionsClearRequested: this.onSuggestionsClearRequested,
        onSuggestionSelected: this.onSuggestionSelected
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props5 = this.props,
          label = _this$props5.label,
          name = _this$props5.name,
          value = _this$props5.value,
          other = (0, _objectWithoutProperties2["default"])(_this$props5, _excluded);
      return /*#__PURE__*/_react["default"].createElement(_field.FormGroup, (0, _extends2["default"])({
        className: (0, _classnames["default"])((0, _defineProperty2["default"])({}, styles.container, true)),
        name: name,
        label: label
      }, other), this.renderInput());
    }
  }], [{
    key: "parse",
    value: function parse(value) {
      return value;
    }
  }]);
  return AutosuggestField;
}(_react.Component);

AutosuggestField.propTypes = propTypes;
AutosuggestField.defaultProps = defaultProps;

var _default = (0, _reactIntl.injectIntl)(AutosuggestField);

exports["default"] = _default;