autodisol/components/AsyncSelect.js

"use strict";

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

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

var _CircularProgress = _interopRequireDefault(require("@material-ui/core/CircularProgress"));

var _ClickAwayListener = _interopRequireDefault(require("@material-ui/core/ClickAwayListener"));

var _Chip = _interopRequireDefault(require("@material-ui/core/Chip"));

var _Fade = _interopRequireDefault(require("@material-ui/core/Fade"));

var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));

var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));

var _Popper = _interopRequireDefault(require("@material-ui/core/Popper"));

var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));

var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));

var _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withStyles"));

var _compose = _interopRequireDefault(require("recompose/compose"));

var _i18n = require("../i18n");

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

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

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

function _extends() { _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; }; return _extends.apply(this, arguments); }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(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"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

var translations = {
  'no suggestions': {
    fr: 'Pas de suggestions',
    en: 'No suggestions',
    es: 'No hay sugerencias'
  }
};
var language = (0, _i18n.getLanguage)();

var AsyncSelectJSX = function AsyncSelectJSX(props) {
  var css = props.classes,
      _props$chipsColor = props.chipsColor,
      chipsColor = _props$chipsColor === void 0 ? 'default' : _props$chipsColor,
      _props$chipsVariant = props.chipsVariant,
      chipsVariant = _props$chipsVariant === void 0 ? 'default' : _props$chipsVariant,
      _props$inputMargin = props.inputMargin,
      inputMargin = _props$inputMargin === void 0 ? 'none' : _props$inputMargin,
      _props$inputVariant = props.inputVariant,
      inputVariant = _props$inputVariant === void 0 ? 'standard' : _props$inputVariant,
      isLoading = props.isLoading,
      label = props.label,
      _onDelete = props.onDelete,
      onSelect = props.onSelect,
      onSearch = props.onSearch,
      suggestions = props.suggestions,
      selected = props.selected;

  var _useState = (0, _react.useState)(null),
      _useState2 = _slicedToArray(_useState, 2),
      inputRef = _useState2[0],
      setInputRef = _useState2[1];

  var _useState3 = (0, _react.useState)(''),
      _useState4 = _slicedToArray(_useState3, 2),
      inputValue = _useState4[0],
      setInputValue = _useState4[1];

  var _useState5 = (0, _react.useState)(false),
      _useState6 = _slicedToArray(_useState5, 2),
      isOpen = _useState6[0],
      setIsOpen = _useState6[1];

  var _useState7 = (0, _react.useState)(null),
      _useState8 = _slicedToArray(_useState7, 2),
      popperAnchor = _useState8[0],
      setPopperAnchor = _useState8[1];

  return _react["default"].createElement("div", {
    className: css.container
  }, _react["default"].createElement(_TextField["default"], {
    variant: inputVariant,
    margin: inputMargin,
    label: label,
    value: inputValue,
    onChange: function onChange(e) {
      setInputValue(e.target.value);
      setIsOpen(e.target.value.length > 2);
      onSearch(e);
    },
    fullWidth: true,
    inputRef: function inputRef(node) {
      setInputRef(node);
      setPopperAnchor(node && node.parentElement);
    },
    onKeyDown: function onKeyDown(e) {
      if (selected.length && !inputValue.length && e.key === 'Backspace') {
        _onDelete(selected[selected.length - 1]);
      }
    },
    InputProps: {
      classes: {
        root: css.inputRoot,
        input: css.inputInput
      },
      startAdornment: selected.map(function (s) {
        return _react["default"].createElement(_Chip["default"], {
          color: chipsColor,
          variant: chipsVariant,
          key: s.value,
          label: s.label,
          onDelete: function onDelete() {
            return _onDelete(s);
          },
          className: css.chip
        });
      })
    }
  }), _react["default"].createElement(_Popper["default"], {
    anchorEl: popperAnchor,
    open: isOpen,
    transition: true
  }, function (_ref) {
    var TransitionProps = _ref.TransitionProps;
    return _react["default"].createElement(_Fade["default"], _extends({}, TransitionProps, {
      timeout: 200
    }), _react["default"].createElement(_Paper["default"], {
      square: true,
      style: {
        width: popperAnchor ? popperAnchor.clientWidth : null
      }
    }, isLoading ? _react["default"].createElement("div", {
      className: css.loading
    }, _react["default"].createElement(_CircularProgress["default"], {
      thickness: 4,
      size: 60
    })) : _react["default"].createElement(_ClickAwayListener["default"], {
      onClickAway: function onClickAway() {
        setIsOpen(false);
      }
    }, suggestions.length > 0 ? _react["default"].createElement("div", null, suggestions.map(function (r) {
      return _react["default"].createElement(_MenuItem["default"], {
        key: r.value,
        value: r.value,
        onClick: function onClick(e) {
          setInputValue('');
          setIsOpen(false);
          onSelect(e, r);
          inputRef && inputRef.focus();
        },
        className: css.suggestion
      }, r.label);
    })) : _react["default"].createElement("div", {
      className: css.loading
    }, _react["default"].createElement(_Typography["default"], {
      variant: "h6"
    }, (0, _i18n.getTranslation)(translations, language, 'no suggestions'))))));
  }));
};

AsyncSelectJSX.propTypes = {
  classes: _propTypes["default"].object.isRequired,
  chipsColor: _propTypes["default"].oneOf(["default", "primary", "secondary"]),
  chipsVariant: _propTypes["default"].oneOf(["default", "outlined"]),
  inputMargin: _propTypes["default"].oneOf(["none", "dense", "normal"]),
  inputVariant: _propTypes["default"].oneOf(["standard", "outlined", "filled"]),
  isLoading: _propTypes["default"].bool,
  label: _propTypes["default"].string.isRequired,
  onDelete: _propTypes["default"].func.isRequired,
  onSelect: _propTypes["default"].func.isRequired,
  onSearch: _propTypes["default"].func.isRequired,
  suggestions: _propTypes["default"].arrayOf(_propTypes["default"].object.isRequired).isRequired,
  selected: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].object.isRequired), _propTypes["default"].object]).isRequired
};
var AsyncSelectCmp = (0, _withStyles["default"])(function (theme) {
  return {
    chip: {
      margin: theme.spacing.unit / 4,
      '&:last-of-type': {
        marginRight: theme.spacing.unit
      }
    },
    chipsContainer: {
      marginRight: theme.spacing.unit
    },
    container: {
      flexGrow: 1,
      position: 'relative'
    },
    inputInput: {
      width: 'auto',
      flexGrow: 1
    },
    inputRoot: {
      flexGrow: 1,
      flexWrap: 'wrap'
    },
    loading: {
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      height: 120
    },
    suggestion: {
      borderBottom: '1px solid lightgrey',
      '&:hover': {
        backgroundColor: '#00000024'
      }
    }
  };
})(AsyncSelectJSX);
var AsyncSelect = (0, _compose["default"])()(AsyncSelectCmp);
var _default = AsyncSelect;
exports["default"] = _default;