@webiny/ui 0.0.0-mt-1

package/AutoComplete/MultiAutoComplete.js

@@ -0,0 +1,569 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+var _excluded = ["options", "allowFreeInput", "useSimpleValues", "unique", "value", "onChange", "valueProp", "textProp", "onInput", "validation", "useMultipleSelectionList", "description"],
+    _excluded2 = ["getInputProps", "openMenu"];
+import * as React from "react";
+import Downshift from "downshift";
+import MaterialSpinner from "react-spinner-material";
+import { Input } from "../Input";
+import { Chips, Chip } from "../Chips";
+import { getOptionValue, getOptionText, findInAliases } from "./utils";
+import { List, ListItem, ListItemMeta } from "../List";
+import { IconButton } from "../Button";
+import classNames from "classnames";
+import { Elevation } from "../Elevation";
+import { Typography } from "../Typography";
+import { autoCompleteStyle, suggestionList } from "./styles";
+import { FormElementMessage } from "../FormElementMessage";
+import { ReactComponent as BaselineCloseIcon } from "@svgr/webpack!./icons/baseline-close-24px.svg";
+import { ReactComponent as PrevIcon } from "@svgr/webpack!./icons/navigate_before-24px.svg";
+import { ReactComponent as NextIcon } from "@svgr/webpack!./icons/navigate_next-24px.svg";
+import { ReactComponent as PrevAllIcon } from "@svgr/webpack!./icons/skip_previous-24px.svg";
+import { ReactComponent as NextAllIcon } from "@svgr/webpack!./icons/skip_next-24px.svg";
+import { ReactComponent as DeleteIcon } from "@svgr/webpack!./icons/baseline-close-24px.svg";
+import { ReactComponent as ReorderIcon } from "@svgr/webpack!./icons/reorder_black_24dp.svg";
+import { css } from "emotion";
+import { ListItemGraphic } from "../List";
+var style = {
+  pagination: {
+    bar: /*#__PURE__*/css({
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      borderBottom: "2px solid #fa5723",
+      padding: "6px 0"
+    }, "label:bar;"),
+    pages: /*#__PURE__*/css({
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center"
+    }, "label:pages;"),
+    searchInput: /*#__PURE__*/css({
+      height: "42px !important"
+    }, "label:searchInput;"),
+    list: /*#__PURE__*/css({
+      padding: "0 0 5px 0 !important",
+      ".mdc-list-item": {
+        borderBottom: "1px solid var(--mdc-theme-on-background)"
+      }
+    }, "label:list;"),
+    secondaryText: /*#__PURE__*/css({
+      color: "var(--mdc-theme-text-secondary-on-background)"
+    }, "label:secondaryText;")
+  }
+};
+var listStyles = /*#__PURE__*/css({
+  "&.multi-autocomplete__options-list": {
+    listStyle: "none",
+    paddingLeft: 0,
+    "& li": {
+      margin: 0
+    }
+  }
+}, "label:listStyles;");
+
+function Spinner() {
+  return /*#__PURE__*/React.createElement(MaterialSpinner, {
+    size: 24,
+    spinnerColor: "#fa5723",
+    spinnerWidth: 2,
+    visible: true
+  });
+}
+
+var DEFAULT_PER_PAGE = 10;
+
+function paginateMultipleSelection(multipleSelection, limit, page, search) {
+  // 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(multipleSelection) ? multipleSelection.map(function (item, index) {
+    return _objectSpread(_objectSpread({}, item), {}, {
+      index: index
+    });
+  }) : [];
+
+  if (typeof search === "string" && search) {
+    data = data.filter(function (item) {
+      return typeof item.name === "string" && item.name.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,
+    from: from,
+    to: to,
+    page: page,
+    lastPage: lastPage,
+    limit: limit,
+    hasPrevious: page > 1,
+    hasNext: page < lastPage
+  };
+  return {
+    data: data,
+    meta: meta
+  };
+}
+
+export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
+  _inherits(MultiAutoComplete, _React$Component);
+
+  var _super = _createSuper(MultiAutoComplete);
+
+  function MultiAutoComplete() {
+    var _this;
+
+    _classCallCheck(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));
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      inputValue: "",
+      multipleSelectionPage: 0,
+      multipleSelectionSearch: "",
+      reorderFormVisible: "",
+      reorderFormValue: ""
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "downshift", /*#__PURE__*/React.createRef());
+
+    _defineProperty(_assertThisInitialized(_this), "assignedValueAfterClearing", {
+      set: false,
+      selection: null
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "setMultipleSelectionPage", function (multipleSelectionPage) {
+      _this.setState({
+        multipleSelectionPage: multipleSelectionPage
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "setMultipleSelectionSearch", function (multipleSelectionSearch) {
+      _this.setState({
+        multipleSelectionSearch: multipleSelectionSearch
+      });
+    });
+
+    return _this;
+  }
+
+  _createClass(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;
+      var filtered = options.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.
+        if (unique) {
+          var values = value;
+
+          if (Array.isArray(values)) {
+            if (values.find(function (value) {
+              return getOptionValue(value, _this2.props) === getOptionValue(item, _this2.props);
+            })) {
+              return false;
+            }
+          }
+        } // 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 findInAliases(item, _this2.state.inputValue);
+        }
+
+        return getOptionText(item, _this2.props).toLowerCase().includes(_this2.state.inputValue.toLowerCase());
+      }); // 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);
+          }
+        } else {
+          var _existingValue = filtered.find(function (item) {
+            return _this2.state.inputValue === getOptionText(item, _this2.props);
+          });
+
+          if (!_existingValue) {
+            filtered.unshift(_defineProperty({}, this.props.textProp, this.state.inputValue));
+          }
+        }
+      }
+
+      return filtered;
+    }
+    /**
+     * Renders options - based on user's input. It will try to match input text with available options.
+     * @param options
+     * @param isOpen
+     * @param highlightedIndex
+     * @param selectedItem
+     * @param getMenuProps
+     * @param getItemProps
+     * @returns {*}
+     */
+
+  }, {
+    key: "renderOptions",
+    value: function renderOptions(_ref) {
+      var _this3 = this;
+
+      var options = _ref.options,
+          isOpen = _ref.isOpen,
+          highlightedIndex = _ref.highlightedIndex,
+          getMenuProps = _ref.getMenuProps,
+          getItemProps = _ref.getItemProps;
+
+      if (!isOpen) {
+        return null;
+      }
+
+      if (!options.length) {
+        return /*#__PURE__*/React.createElement(Elevation, {
+          z: 1
+        }, /*#__PURE__*/React.createElement("ul", Object.assign({
+          className: classNames("multi-autocomplete__options-list", listStyles)
+        }, getMenuProps()), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Typography, {
+          use: "body2"
+        }, "No results."))));
+      }
+
+      var renderItem = this.props.renderItem;
+      return /*#__PURE__*/React.createElement(Elevation, {
+        z: 1
+      }, /*#__PURE__*/React.createElement("ul", Object.assign({
+        className: classNames("multi-autocomplete__options-list", listStyles)
+      }, getMenuProps()), options.map(function (item, index) {
+        var _itemClassNames;
+
+        var itemValue = getOptionValue(item, _this3.props); // Base classes.
+
+        var itemClassNames = (_itemClassNames = {}, _defineProperty(_itemClassNames, suggestionList, true), _defineProperty(_itemClassNames, "highlighted", highlightedIndex === index), _defineProperty(_itemClassNames, "selected", false), _itemClassNames); // Render the item.
+
+        return /*#__PURE__*/React.createElement("li", Object.assign({
+          key: itemValue + index
+        }, getItemProps({
+          index: index,
+          item: item,
+          className: classNames(itemClassNames)
+        })), renderItem.call(_this3, item, index));
+      })));
+    }
+    /**
+     * 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).
+     * @returns {*}
+     */
+
+  }, {
+    key: "renderMultipleSelection",
+    value: function renderMultipleSelection() {
+      var _this4 = 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;
+
+      if (useMultipleSelectionList) {
+        var _paginateMultipleSele = paginateMultipleSelection(value, DEFAULT_PER_PAGE, this.state.multipleSelectionPage, this.state.multipleSelectionSearch),
+            data = _paginateMultipleSele.data,
+            meta = _paginateMultipleSele.meta;
+
+        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+          className: style.pagination.bar
+        }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Input, {
+          className: style.pagination.searchInput,
+          placeholder: "Search selected...",
+          value: this.state.multipleSelectionSearch,
+          onChange: function onChange(value) {
+            _this4.setMultipleSelectionSearch(value);
+
+            _this4.setMultipleSelectionPage(value ? 1 : 0);
+          }
+        })), /*#__PURE__*/React.createElement("div", {
+          className: style.pagination.pages
+        }, /*#__PURE__*/React.createElement("div", {
+          className: meta.hasData ? "" : style.pagination.secondaryText
+        }, meta.from, " - ", meta.to, " of ", meta.totalCount), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(IconButton, {
+          icon: /*#__PURE__*/React.createElement(PrevAllIcon, null),
+          disabled: !meta.hasData || meta.page === 1,
+          onClick: function onClick() {
+            return _this4.setMultipleSelectionPage(1);
+          }
+        }), /*#__PURE__*/React.createElement(IconButton, {
+          icon: /*#__PURE__*/React.createElement(PrevIcon, null),
+          disabled: !meta.hasData || !meta.hasPrevious,
+          onClick: function onClick() {
+            return _this4.setMultipleSelectionPage(meta.page - 1);
+          }
+        }), /*#__PURE__*/React.createElement(IconButton, {
+          icon: /*#__PURE__*/React.createElement(NextIcon, null),
+          disabled: !meta.hasData || !meta.hasNext,
+          onClick: function onClick() {
+            return _this4.setMultipleSelectionPage(meta.page + 1);
+          }
+        }), /*#__PURE__*/React.createElement(IconButton, {
+          icon: /*#__PURE__*/React.createElement(NextAllIcon, null),
+          disabled: !meta.hasData || meta.page === meta.lastPage,
+          onClick: function onClick() {
+            return _this4.setMultipleSelectionPage(meta.lastPage);
+          }
+        })))), /*#__PURE__*/React.createElement(List, {
+          className: style.pagination.list
+        }, meta.hasData ? data.map(function (item, index) {
+          var key = "".concat(getOptionValue(item, _this4.props), "-").concat(index);
+
+          if (_this4.state.reorderFormVisible === key) {
+            return /*#__PURE__*/React.createElement(ListItem, {
+              key: key
+            }, /*#__PURE__*/React.createElement(ListItemGraphic, null, /*#__PURE__*/React.createElement(IconButton, {
+              disabled: true,
+              icon: /*#__PURE__*/React.createElement(ReorderIcon, null)
+            })), /*#__PURE__*/React.createElement(Input, {
+              value: _this4.state.reorderFormValue,
+              onKeyDown: function onKeyDown(e) {
+                var key = e.key;
+
+                if (key !== "Escape" && key !== "Enter") {
+                  return;
+                }
+
+                if (key === "Enter") {
+                  // Reorder the item.
+                  var newValue = _toConsumableArray(value);
+
+                  newValue.splice(e.target.value - 1, 0, newValue.splice(item.index, 1)[0]);
+                  onChange(newValue);
+                }
+
+                _this4.setState({
+                  reorderFormVisible: "",
+                  reorderFormValue: ""
+                });
+              },
+              onChange: function onChange(value) {
+                return _this4.setState({
+                  reorderFormValue: value
+                });
+              },
+              type: "number",
+              autoFocus: true,
+              className: style.pagination.searchInput,
+              placeholder: "Type a new order number and press Enter, or press Esc to cancel."
+            }), /*#__PURE__*/React.createElement(ListItemMeta, null, /*#__PURE__*/React.createElement(IconButton, {
+              icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
+              disabled: true
+            })));
+          }
+
+          return /*#__PURE__*/React.createElement(ListItem, {
+            key: key
+          }, /*#__PURE__*/React.createElement(ListItemGraphic, null, /*#__PURE__*/React.createElement(IconButton, {
+            icon: /*#__PURE__*/React.createElement(ReorderIcon, null),
+            onClick: function onClick() {
+              _this4.setState({
+                reorderFormVisible: key
+              });
+            }
+          })), /*#__PURE__*/React.createElement("div", {
+            style: {
+              color: "var(--mdc-theme-text-secondary-on-background)",
+              marginRight: 8,
+              minWidth: 32
+            }
+          }, item.index + 1, "."), " ", renderListItemLabel.call(_this4, item), /*#__PURE__*/React.createElement(ListItemMeta, null, /*#__PURE__*/React.createElement(IconButton, {
+            icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
+            onClick: function onClick() {
+              if (onChange) {
+                onChange([].concat(_toConsumableArray(value.slice(0, item.index)), _toConsumableArray(value.slice(item.index + 1))));
+              }
+            }
+          })));
+        }) : /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement("span", {
+          className: style.pagination.secondaryText
+        }, "Nothing to show."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FormElementMessage, null, description)));
+      }
+
+      var hasItems = Array.isArray(value) && value.length;
+
+      if (!hasItems) {
+        return null;
+      }
+
+      return /*#__PURE__*/React.createElement(Chips, {
+        disabled: disabled
+      }, value.map(function (item, index) {
+        return /*#__PURE__*/React.createElement(Chip, {
+          label: getOptionText(item, _this4.props),
+          key: "".concat(getOptionValue(item, _this4.props), "-").concat(index),
+          trailingIcon: /*#__PURE__*/React.createElement(BaselineCloseIcon, null),
+          onRemove: function onRemove() {
+            if (onChange) {
+              onChange([].concat(_toConsumableArray(value.slice(0, index)), _toConsumableArray(value.slice(index + 1))));
+            }
+          }
+        });
+      }));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this5 = this;
+
+      var props = this.props,
+          _this$props3 = this.props,
+          rawOptions = _this$props3.options,
+          allowFreeInput = _this$props3.allowFreeInput,
+          useSimpleValues = _this$props3.useSimpleValues,
+          unique = _this$props3.unique,
+          value = _this$props3.value,
+          _onChange = _this$props3.onChange,
+          valueProp = _this$props3.valueProp,
+          textProp = _this$props3.textProp,
+          onInput = _this$props3.onInput,
+          _this$props3$validati = _this$props3.validation,
+          validation = _this$props3$validati === void 0 ? {
+        isValid: null
+      } : _this$props3$validati,
+          useMultipleSelectionList = _this$props3.useMultipleSelectionList,
+          description = _this$props3.description,
+          otherInputProps = _objectWithoutProperties(_this$props3, _excluded);
+
+      var options = this.getOptions();
+      return /*#__PURE__*/React.createElement("div", {
+        className: classNames(autoCompleteStyle, props.className)
+      }, /*#__PURE__*/React.createElement(Downshift, {
+        defaultSelectedItem: null // @ts-ignore
+        ,
+        className: autoCompleteStyle,
+        itemToString: function itemToString(item) {
+          return item && getOptionText(item, props);
+        },
+        ref: this.downshift,
+        onChange: function onChange(selection) {
+          if (!_this5.assignedValueAfterClearing.set) {
+            _this5.assignedValueAfterClearing = {
+              set: true,
+              selection: selection
+            };
+
+            _this5.downshift.current.clearSelection();
+
+            _this5.setMultipleSelectionPage(0);
+
+            return;
+          }
+
+          if (_this5.assignedValueAfterClearing.set) {
+            _this5.setState({
+              inputValue: ""
+            });
+
+            _this5.assignedValueAfterClearing.set = false;
+
+            if (Array.isArray(value)) {
+              _onChange && _onChange([].concat(_toConsumableArray(value), [_this5.assignedValueAfterClearing.selection]));
+            } else {
+              _onChange && _onChange([_this5.assignedValueAfterClearing.selection]);
+            }
+          }
+        }
+      }, function (_ref2) {
+        var getInputProps = _ref2.getInputProps,
+            openMenu = _ref2.openMenu,
+            rest = _objectWithoutProperties(_ref2, _excluded2);
+
+        return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Input, getInputProps(_objectSpread(_objectSpread({}, otherInputProps), {}, {
+          // @ts-ignore
+          validation: validation,
+          // Only pass description if not using "useMultipleSelectionList".
+          description: useMultipleSelectionList ? null : description,
+          rawOnChange: true,
+          trailingIcon: _this5.props.loading && /*#__PURE__*/React.createElement(Spinner, null),
+          onChange: function onChange(e) {
+            return e;
+          },
+          onBlur: function onBlur(e) {
+            return e;
+          },
+          onKeyUp: function onKeyUp(e) {
+            var inputValue = e.target.value || ""; // Set current input value into state and trigger onInput if different.
+
+            if (inputValue !== _this5.state.inputValue) {
+              _this5.setState({
+                inputValue: inputValue
+              }, function () {
+                onInput && onInput(inputValue);
+              });
+            }
+          },
+          onFocus: function onFocus(e) {
+            openMenu();
+            otherInputProps.onFocus && otherInputProps.onFocus(e);
+          }
+        }))), _this5.renderOptions(_objectSpread(_objectSpread({}, rest), {}, {
+          unique: unique,
+          options: options
+        })), _this5.renderMultipleSelection());
+      }));
+    }
+  }]);
+
+  return MultiAutoComplete;
+}(React.Component);
+
+_defineProperty(MultiAutoComplete, "defaultProps", {
+  valueProp: "id",
+  textProp: "name",
+  unique: true,
+  options: [],
+  useSimpleValues: false,
+  useMultipleSelectionList: false,
+  renderItem: function renderItem(item) {
+    return /*#__PURE__*/React.createElement(Typography, {
+      use: "body2"
+    }, getOptionText(item, this.props));
+  },
+  renderListItemLabel: function renderListItemLabel(item) {
+    return getOptionText(item, this.props);
+  }
+});

package/AutoComplete/MultiAutoComplete.stories.d.ts

@@ -0,0 +1 @@
+export {};