autodisol/components/Multiselect.js

"use strict";

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

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

var _reactSelect = require("react-select");

var _async = _interopRequireDefault(require("react-select/async"));

var _cond = _interopRequireDefault(require("sharyn/util/cond"));

var _core = require("@material-ui/core");

var _styles = require("./styles");

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

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

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 _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { if (i % 2) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } else { Object.defineProperties(target, Object.getOwnPropertyDescriptors(arguments[i])); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

var CustomMenu = function CustomMenu(_ref) {
  var menuProps = _ref.menuProps,
      creationAllowed = _ref.creationAllowed,
      createOptionLabel = _ref.createOptionLabel;
  // eslint-disable-next-line
  var children = menuProps.children;
  return _react["default"].createElement(_reactSelect.components.Menu, menuProps, children, creationAllowed && createOptionLabel);
};

CustomMenu.propTypes = {
  menuProps: _propTypes["default"].object.isRequired,
  creationAllowed: _propTypes["default"].bool,
  createOptionLabel: _propTypes["default"].any
};

var MultiSelectJSX = function MultiSelectJSX(_ref2) {
  var searchBy = _ref2.searchBy,
      input = _ref2.input,
      defaultOptions = _ref2.defaultOptions,
      multiValues = _ref2.multiValues,
      handleChange = _ref2.handleChange,
      handleInputChange = _ref2.handleInputChange,
      getData = _ref2.getData,
      disabled = _ref2.disabled,
      label = _ref2.label,
      isLoading = _ref2.isLoading,
      _noOptionsMessage = _ref2.noOptionsMessage,
      loadingMessage = _ref2.loadingMessage,
      cancelToken = _ref2.cancelToken,
      _ref2$withDebounce = _ref2.withDebounce,
      withDebounce = _ref2$withDebounce === void 0 ? true : _ref2$withDebounce,
      _ref2$debounceInterva = _ref2.debounceInterval,
      debounceInterval = _ref2$debounceInterva === void 0 ? 300 : _ref2$debounceInterva,
      theme = _ref2.theme,
      _ref2$creationAllowed = _ref2.creationAllowed,
      creationAllowed = _ref2$creationAllowed === void 0 ? false : _ref2$creationAllowed,
      createOptionLabel = _ref2.createOptionLabel,
      customComponents = _ref2.components,
      rest = _objectWithoutProperties(_ref2, ["searchBy", "input", "defaultOptions", "multiValues", "handleChange", "handleInputChange", "getData", "disabled", "label", "isLoading", "noOptionsMessage", "loadingMessage", "cancelToken", "withDebounce", "debounceInterval", "theme", "creationAllowed", "createOptionLabel", "components"]);

  var customStyles = {
    option: function option(provided, state) {
      return _objectSpread({}, provided, {
        color: theme.palette.secondary.dark,
        background: state.isSelected ? 'rgba(0, 0, 0, 0.14)' : 'none',
        height: 'auto',
        padding: '11px 16px',
        lineHeight: '1.5rem',
        fontSize: '1.14rem',
        fontWeight: 400,
        opacity: state.isDisabled ? 0.5 : 1
      });
    },
    control: function control(provided, state) {
      return _objectSpread({}, provided, {
        borderStyle: 'solid',
        borderWidth: '2px',
        borderRadius: 8,
        borderColor: (0, _cond["default"])([[state.isDisabled, 'transparent'], [state.isFocused, theme.palette.secondary.dark]], theme.palette.secondary.light),
        backgroundColor: state.isDisabled ? _styles.secondaryColorExtraLight : 'inherit',
        boxShadow: 'none',
        caretColor: theme.palette.primary.main,
        color: theme.palette.secondary.dark,
        '&:hover': {
          borderColor: theme.palette.secondary.dark
        }
      });
    },
    input: function input() {
      return {
        padding: 'calc(1.33rem - 2px) calc(1rem - 8px)',
        fontSize: '0.875rem',
        lineHeight: '1.25',
        fontWeight: 700,
        '& *': {
          fontSize: '0.875rem',
          lineHeight: '1.25',
          fontWeight: 700
        }
      };
    },
    placeholder: function placeholder() {
      return {
        padding: 'calc(1.33rem - 2px) calc(1rem - 8px)',
        fontSize: '0.875rem',
        lineHeight: '1.25',
        fontWeight: 700,
        color: theme.palette.secondary.main,
        position: 'absolute'
      };
    },
    singleValue: function singleValue(provided, state) {
      return _objectSpread({}, provided, {
        padding: '1.33rem 0 1.33rem calc(1rem - 8px)',
        fontSize: '0.875rem',
        lineHeight: '1.25',
        fontWeight: 700,
        color: state.isDisabled ? theme.palette.secondary.main : 'inherit'
      });
    },
    multiValue: function multiValue(provided, state) {
      return _objectSpread({}, provided, {
        fontSize: '0.875rem',
        lineHeight: '1.25',
        fontWeight: 700,
        color: state.isDisabled ? theme.palette.secondary.main : 'inherit'
      });
    },
    multiValueRemove: function multiValueRemove(provided, state) {
      return _objectSpread({}, provided, {
        display: state.isDisabled ? 'none' : 'flex'
      });
    },
    menuList: function menuList(provided) {
      return _objectSpread({}, provided, {
        background: 'white'
      });
    },
    menu: function menu(provided) {
      return _objectSpread({}, provided, {
        zIndex: 3
      });
    } // let lastCallTime = null

  };
  var delayedCall = null; // Et le debounce est activé (true par défaut) ,
  // on empêche l'émission de plus d'une requete toutes les 300ms (par défault, modifiable via debounceInterval)
  // Si un cancel token est renseigné, on annule la requête précédemment émise par le multiSelect

  var loadOptions = getData ? function (event) {
    var options = new Promise(function (resolve) {
      cancelToken && (cancelToken === null || cancelToken === void 0 ? void 0 : cancelToken.cancel) && cancelToken.cancel();

      if (withDebounce) {
        delayedCall && clearTimeout(delayedCall);
        delayedCall = setTimeout(function () {
          getData(event).then(function (data) {
            return resolve(data);
          });
        }, debounceInterval);
      } else {
        getData(event).then(function (data) {
          return resolve(data);
        });
      }
    });
    return options;
  } : null;
  return _react["default"].createElement(_react["default"].Fragment, null, label && _react["default"].createElement("div", {
    style: {
      position: 'relative'
    }
  }, _react["default"].createElement("span", {
    style: {
      zIndex: 2,
      position: 'absolute',
      padding: '0 0.25rem',
      fontSize: '0.875rem',
      fontWeight: 700,
      lineHeight: 1,
      background: disabled ? 'none' : '#FFFFFF',
      color: theme.palette.secondary.dark,
      transform: 'translate(0.9rem, -0.5rem)'
    }
  }, label)), _react["default"].createElement(_async["default"], _extends({
    key: searchBy,
    isDisabled: disabled,
    defaultValue: input
  }, {
    defaultOptions: defaultOptions,
    loadingMessage: loadingMessage,
    loadOptions: loadOptions
  }, {
    onChange: handleChange,
    cacheOptions: false,
    isMulti: multiValues,
    onInputChange: handleInputChange,
    styles: customStyles,
    noOptionsMessage: function noOptionsMessage() {
      return isLoading ? loadingMessage && loadingMessage() : _noOptionsMessage && _noOptionsMessage();
    },
    components: _objectSpread({}, customComponents, {
      Menu: function Menu(menuProps) {
        return _react["default"].createElement(CustomMenu, {
          menuProps: menuProps,
          creationAllowed: creationAllowed,
          createOptionLabel: createOptionLabel
        });
      }
    })
  }, rest)));
};

MultiSelectJSX.propTypes = {
  searchBy: _propTypes["default"].string,
  input: _propTypes["default"].arrayOf(_propTypes["default"].object.isRequired),
  defaultOptions: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].arrayOf(_propTypes["default"].object.isRequired)]).isRequired,
  multiValues: _propTypes["default"].bool,
  handleChange: _propTypes["default"].func,
  handleInputChange: _propTypes["default"].func,
  getData: _propTypes["default"].func,
  disabled: _propTypes["default"].bool,
  label: _propTypes["default"].string,
  isLoading: _propTypes["default"].bool,
  noOptionsMessage: _propTypes["default"].func,
  loadingMessage: _propTypes["default"].func,
  cancelToken: _propTypes["default"].any,
  withDebounce: _propTypes["default"].bool,
  debounceInterval: _propTypes["default"].number,
  theme: _propTypes["default"].object.isRequired,
  creationAllowed: _propTypes["default"].bool,
  createOptionLabel: _propTypes["default"].any,
  components: _propTypes["default"].object
};

var _default = (0, _core.withTheme)()(MultiSelectJSX);

exports["default"] = _default;