@webiny/ui 5.34.8 → 5.35.0-beta.1

package/AutoComplete/MultiAutoComplete.js

@@ -1,72 +1,41 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MultiAutoComplete = void 0;
-
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 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 _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _downshift = _interopRequireDefault(require("downshift"));
-
 var _reactSpinnerMaterial = _interopRequireDefault(require("react-spinner-material"));
-
 var _Input = require("../Input");
-
 var _Chips = require("../Chips");
-
 var _utils = require("./utils");
-
 var _List = require("../List");
-
 var _Button = require("../Button");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _Elevation = require("../Elevation");
-
 var _Typography = require("../Typography");
-
 var _styles = require("./styles");
-
 var _FormElementMessage = require("../FormElementMessage");
-
 var _baselineClose24px = require("./icons/baseline-close-24px.svg");
-
 var _navigate_before24px = require("./icons/navigate_before-24px.svg");
-
 var _navigate_next24px = require("./icons/navigate_next-24px.svg");
-
 var _skip_previous24px = require("./icons/skip_previous-24px.svg");
-
 var _skip_next24px = require("./icons/skip_next-24px.svg");
-
 var _reorder_black_24dp = require("./icons/reorder_black_24dp.svg");
-
 var _emotion = require("emotion");
-
 var _excluded = ["unique", "value", "onChange", "onInput", "validation", "useMultipleSelectionList", "description"],
-    _excluded2 = ["getInputProps", "openMenu"];
+  _excluded2 = ["getInputProps", "openMenu"];
 var listItemMetaClassName = /*#__PURE__*/(0, _emotion.css)({
   display: "table"
 }, "label:listItemMetaClassName;");
@@ -110,7 +79,6 @@ var listStyles = /*#__PURE__*/(0, _emotion.css)({
     }
   }
 }, "label:listStyles;");
-
 var Spinner = function Spinner() {
   return /*#__PURE__*/_react.default.createElement(_reactSpinnerMaterial.default, {
     size: 24,
@@ -119,31 +87,24 @@ var Spinner = function Spinner() {
     visible: true
   });
 };
-
 var OptionsList = function OptionsList(_ref) {
   var getMenuProps = _ref.getMenuProps,
-      children = _ref.children;
+    children = _ref.children;
   return /*#__PURE__*/_react.default.createElement(_Elevation.Elevation, {
     z: 1
   }, /*#__PURE__*/_react.default.createElement("ul", Object.assign({
     className: (0, _classnames.default)("multi-autocomplete__options-list", listStyles)
   }, getMenuProps()), children));
 };
-
 var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(MultiAutoComplete, _React$Component);
-
   var _super = (0, _createSuper2.default)(MultiAutoComplete);
-
   function MultiAutoComplete() {
     var _this;
-
     (0, _classCallCheck2.default)(this, MultiAutoComplete);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       inputValue: "",
@@ -169,25 +130,23 @@ var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
     });
     return _this;
   }
-
   (0, _createClass2.default)(MultiAutoComplete, [{
     key: "getOptions",
     value: function getOptions() {
       var _this2 = this;
-
       var _this$props = this.props,
-          unique = _this$props.unique,
-          value = _this$props.value,
-          allowFreeInput = _this$props.allowFreeInput,
-          useSimpleValues = _this$props.useSimpleValues,
-          options = _this$props.options;
+        unique = _this$props.unique,
+        value = _this$props.value,
+        allowFreeInput = _this$props.allowFreeInput,
+        useSimpleValues = _this$props.useSimpleValues,
+        options = _this$props.options;
       var values = Array.isArray(value) ? (0, _toConsumableArray2.default)(value) : [];
-      var filtered = (0, _toConsumableArray2.default)(options); // If free input is allowed, prepend typed value to the list.
+      var filtered = (0, _toConsumableArray2.default)(options);
 
+      // If free input is allowed, prepend typed value to the list.
       if (allowFreeInput && this.state.inputValue) {
         if (useSimpleValues) {
           var existingValue = filtered.includes(this.state.inputValue);
-
           if (!existingValue) {
             filtered.unshift(this.state.inputValue);
           }
@@ -195,13 +154,11 @@ var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
           var _existingValue = filtered.find(function (item) {
             return _this2.state.inputValue === (0, _utils.getOptionText)(item, _this2.props);
           });
-
           if (!_existingValue) {
             filtered.unshift((0, _defineProperty2.default)({}, this.props.textProp, this.state.inputValue));
           }
         }
       }
-
       return filtered.filter(function (item) {
         // We need to filter received options.
         // 1) If "unique" prop was passed, we don't want to show already picked options again.
@@ -213,43 +170,38 @@ var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
               return false;
             }
           }
-        } // 2) At the end, we want to show only options that are matched by typed text.
-
+        }
 
+        // 2) At the end, we want to show only options that are matched by typed text.
         if (!_this2.state.inputValue) {
           return true;
         }
-
         if (item.aliases) {
           return (0, _utils.findInAliases)(item, _this2.state.inputValue);
         }
-
         return (0, _utils.getOptionText)(item, _this2.props).toLowerCase().includes(_this2.state.inputValue.toLowerCase());
       });
     }
+
     /**
      * Renders options - based on user's input. It will try to match input text with available options.
      */
-
   }, {
     key: "renderOptions",
     value: function renderOptions(params) {
       var _this3 = this;
-
       var options = params.options,
-          isOpen = params.isOpen,
-          highlightedIndex = params.highlightedIndex,
-          getMenuProps = params.getMenuProps,
-          getItemProps = params.getItemProps;
-
+        isOpen = params.isOpen,
+        highlightedIndex = params.highlightedIndex,
+        getMenuProps = params.getMenuProps,
+        getItemProps = params.getItemProps;
       if (!isOpen) {
         return null;
       }
+
       /**
        * Suggest user to start typing when there are no options available to choose from.
        */
-
-
       if (!this.state.inputValue && !options.length) {
         return /*#__PURE__*/_react.default.createElement(OptionsList, {
           getMenuProps: getMenuProps
@@ -257,7 +209,6 @@ var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
           use: "body2"
         }, "Start typing to find entry")));
       }
-
       if (!options.length) {
         return /*#__PURE__*/_react.default.createElement(_Elevation.Elevation, {
           z: 1
@@ -267,7 +218,6 @@ var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
           use: "body2"
         }, "No results."), this.props.noResultFound)));
       }
-
       var renderItem = this.props.renderItem;
       return /*#__PURE__*/_react.default.createElement(_Elevation.Elevation, {
         z: 1
@@ -275,11 +225,12 @@ var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
         className: (0, _classnames.default)("multi-autocomplete__options-list", listStyles)
       }, getMenuProps()), options.map(function (item, index) {
         var _itemClassNames;
+        var itemValue = (0, _utils.getOptionValue)(item, _this3.props);
 
-        var itemValue = (0, _utils.getOptionValue)(item, _this3.props); // Base classes.
-
-        var itemClassNames = (_itemClassNames = {}, (0, _defineProperty2.default)(_itemClassNames, _styles.suggestionList, true), (0, _defineProperty2.default)(_itemClassNames, "highlighted", highlightedIndex === index), (0, _defineProperty2.default)(_itemClassNames, "selected", false), _itemClassNames); // Render the item.
+        // Base classes.
+        var itemClassNames = (_itemClassNames = {}, (0, _defineProperty2.default)(_itemClassNames, _styles.suggestionList, true), (0, _defineProperty2.default)(_itemClassNames, "highlighted", highlightedIndex === index), (0, _defineProperty2.default)(_itemClassNames, "selected", false), _itemClassNames);
 
+        // Render the item.
         return /*#__PURE__*/_react.default.createElement("li", Object.assign({
           key: itemValue + index
         }, getItemProps({
@@ -293,37 +244,33 @@ var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
     key: "paginateMultipleSelection",
     value: function paginateMultipleSelection() {
       var _this4 = this;
-
       var value = this.props.value;
       var limit = 10;
       var page = this.state.multipleSelectionPage;
-      var search = this.state.multipleSelectionSearch; // Assign a real index, so that later when we press delete, we know what is the actual index we're deleting.
+      var search = this.state.multipleSelectionSearch;
 
+      // Assign a real index, so that later when we press delete, we know what is the actual index we're deleting.
       var data = Array.isArray(value) ? value.map(function (option, index) {
         return {
           option: option,
           index: index
         };
       }) : [];
-
       if (search) {
         data = data.filter(function (item) {
           return (0, _utils.getOptionText)(item.option, _this4.props).toLowerCase().includes(search.toLowerCase());
         });
       }
-
       var lastPage = Math.ceil(data.length / limit);
       var totalCount = data.length;
       page = page || lastPage;
       data = data.slice((page - 1) * limit, page * limit);
       var from = 0;
       var to = 0;
-
       if (data.length) {
         from = (page - 1) * limit + 1;
         to = from + (data.length - 1);
       }
-
       var meta = {
         hasData: data.length > 0,
         totalCount: totalCount,
@@ -340,30 +287,27 @@ var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
         meta: meta
       };
     }
+
     /**
      * Once added, items can also be removed by clicking on the ✕ icon. This is the method that is responsible for
      * rendering selected items (we are using already existing "Chips" component).
      */
-
   }, {
     key: "renderMultipleSelection",
     value: function renderMultipleSelection() {
       var _this5 = this;
-
       var _this$props2 = this.props,
-          value = _this$props2.value,
-          onChange = _this$props2.onChange,
-          disabled = _this$props2.disabled,
-          useMultipleSelectionList = _this$props2.useMultipleSelectionList,
-          description = _this$props2.description,
-          renderListItemLabel = _this$props2.renderListItemLabel,
-          renderListItemOptions = _this$props2.renderListItemOptions;
-
+        value = _this$props2.value,
+        onChange = _this$props2.onChange,
+        disabled = _this$props2.disabled,
+        useMultipleSelectionList = _this$props2.useMultipleSelectionList,
+        description = _this$props2.description,
+        renderListItemLabel = _this$props2.renderListItemLabel,
+        renderListItemOptions = _this$props2.renderListItemOptions;
       if (useMultipleSelectionList) {
         var _this$paginateMultipl = this.paginateMultipleSelection(),
-            data = _this$paginateMultipl.data,
-            meta = _this$paginateMultipl.meta;
-
+          data = _this$paginateMultipl.data,
+          meta = _this$paginateMultipl.meta;
         return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
           className: style.pagination.bar
         }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Input.Input, {
@@ -373,7 +317,6 @@ var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
           "data-testid": "pb.pagination.search",
           onChange: function onChange(value) {
             _this5.setMultipleSelectionSearch(value);
-
             _this5.setMultipleSelectionPage(value ? 1 : 0);
           }
         })), /*#__PURE__*/_react.default.createElement("div", {
@@ -408,7 +351,6 @@ var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
           className: style.pagination.list
         }, meta.hasData ? data.map(function (item, index) {
           var key = "".concat((0, _utils.getOptionValue)(item.option, _this5.props), "-").concat(index);
-
           if (_this5.state.reorderFormVisible === key) {
             return /*#__PURE__*/_react.default.createElement(_List.ListItem, {
               key: key
@@ -420,21 +362,17 @@ var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
               "data-testid": "pb.pagination.input",
               onKeyDown: function onKeyDown(e) {
                 var key = e.key;
-
                 if (key !== "Escape" && key !== "Enter") {
                   return;
                 }
-
                 if (key === "Enter") {
                   // Reorder the item.
                   var newValue = (0, _toConsumableArray2.default)(value);
                   newValue.splice(e.target.value - 1, 0, newValue.splice(item.index, 1)[0]);
-
                   if (onChange) {
                     onChange(newValue);
                   }
                 }
-
                 _this5.setState({
                   reorderFormVisible: "",
                   reorderFormValue: ""
@@ -454,7 +392,6 @@ var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
               disabled: true
             })));
           }
-
           return /*#__PURE__*/_react.default.createElement(_List.ListItem, {
             key: key
           }, /*#__PURE__*/_react.default.createElement(_List.ListItemGraphic, null, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
@@ -479,7 +416,6 @@ var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
               if (!onChange) {
                 return;
               }
-
               onChange([].concat((0, _toConsumableArray2.default)(value.slice(0, item.index)), (0, _toConsumableArray2.default)(value.slice(item.index + 1))));
             }
           })));
@@ -487,13 +423,10 @@ var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
           className: style.pagination.secondaryText
         }, "Nothing to show."))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description)));
       }
-
       var hasItems = Array.isArray(value) && value.length;
-
       if (!hasItems) {
         return null;
       }
-
       return /*#__PURE__*/_react.default.createElement(_Chips.Chips, {
         disabled: disabled
       }, value.map(function (item, index) {
@@ -505,7 +438,6 @@ var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
             if (!onChange) {
               return;
             }
-
             onChange([].concat((0, _toConsumableArray2.default)(value.slice(0, index)), (0, _toConsumableArray2.default)(value.slice(index + 1))));
           }
         });
@@ -515,26 +447,26 @@ var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this6 = this;
-
       var props = this.props,
-          _this$props3 = this.props,
-          unique = _this$props3.unique,
-          value = _this$props3.value,
-          _onChange = _this$props3.onChange,
-          onInput = _this$props3.onInput,
-          _this$props3$validati = _this$props3.validation,
-          validation = _this$props3$validati === void 0 ? {
-        isValid: null,
-        message: null
-      } : _this$props3$validati,
-          useMultipleSelectionList = _this$props3.useMultipleSelectionList,
-          description = _this$props3.description,
-          otherInputProps = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
+        _this$props3 = this.props,
+        unique = _this$props3.unique,
+        value = _this$props3.value,
+        _onChange = _this$props3.onChange,
+        onInput = _this$props3.onInput,
+        _this$props3$validati = _this$props3.validation,
+        validation = _this$props3$validati === void 0 ? {
+          isValid: null,
+          message: null
+        } : _this$props3$validati,
+        useMultipleSelectionList = _this$props3.useMultipleSelectionList,
+        description = _this$props3.description,
+        otherInputProps = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
       var options = this.getOptions();
       return /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)(_styles.autoCompleteStyle, props.className)
       }, /*#__PURE__*/_react.default.createElement(_downshift.default, {
-        defaultSelectedItem: null // @ts-ignore there is no className on Downshift
+        defaultSelectedItem: null
+        // @ts-ignore there is no className on Downshift
         ,
         className: _styles.autoCompleteStyle,
         itemToString: function itemToString(item) {
@@ -547,21 +479,15 @@ var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
               set: true,
               selection: selection
             };
-
             _this6.downshift.current.clearSelection();
-
             _this6.setMultipleSelectionPage(0);
-
             return;
           }
-
           if (_this6.assignedValueAfterClearing.set) {
             _this6.setState({
               inputValue: ""
             });
-
             _this6.assignedValueAfterClearing.set = false;
-
             if (Array.isArray(value)) {
               _onChange && _onChange([].concat((0, _toConsumableArray2.default)(value), [_this6.assignedValueAfterClearing.selection]));
             } else {
@@ -571,8 +497,8 @@ var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
         }
       }, function (_ref2) {
         var getInputProps = _ref2.getInputProps,
-            openMenu = _ref2.openMenu,
-            rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+          openMenu = _ref2.openMenu,
+          rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
         return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Input.Input, getInputProps((0, _objectSpread2.default)((0, _objectSpread2.default)({}, otherInputProps), {}, {
           // @ts-ignore
           validation: validation,
@@ -587,8 +513,9 @@ var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
             return e;
           },
           onKeyUp: function onKeyUp(e) {
-            var inputValue = e.target.value || ""; // Set current input value into state and trigger onInput if different.
+            var inputValue = e.target.value || "";
 
+            // Set current input value into state and trigger onInput if different.
             if (inputValue !== _this6.state.inputValue) {
               _this6.setState({
                 inputValue: inputValue
@@ -610,7 +537,6 @@ var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
   }]);
   return MultiAutoComplete;
 }(_react.default.Component);
-
 exports.MultiAutoComplete = MultiAutoComplete;
 (0, _defineProperty2.default)(MultiAutoComplete, "defaultProps", {
   valueProp: "id",
@@ -619,7 +545,6 @@ exports.MultiAutoComplete = MultiAutoComplete;
   options: [],
   useSimpleValues: false,
   useMultipleSelectionList: false,
-
   /**
    * We cast this as MultiAutoComplete because renderItem() is executed via .call() where this is MultiAutoComplete instance.
    */
@@ -628,7 +553,6 @@ exports.MultiAutoComplete = MultiAutoComplete;
       use: "body2"
     }, (0, _utils.getOptionText)(item, this.props));
   },
-
   /**
    * We cast this as MultiAutoComplete because renderListItemLabel() is executed via .call() where this is MultiAutoComplete instance.
    */