@webiny/ui 0.0.0-mt-1

package/AutoComplete/AutoComplete.js

@@ -0,0 +1,299 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+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 _isEqual from "lodash/isEqual";
+var _excluded = ["className", "options", "onChange", "value", "valueProp", "textProp", "onInput", "validation", "placement"],
+    _excluded2 = ["getInputProps", "openMenu"];
+import * as React from "react";
+import Downshift from "downshift";
+import { Input } from "../Input";
+import classNames from "classnames";
+import { Elevation } from "../Elevation";
+import { Typography } from "../Typography";
+import keycode from "keycode";
+import { autoCompleteStyle, suggestionList } from "./styles";
+import { getOptionValue, getOptionText, findInAliases } from "./utils";
+import MaterialSpinner from "react-spinner-material";
+import { css } from "emotion";
+var menuStyles = /*#__PURE__*/css({
+  top: "unset !important",
+  bottom: 75
+}, "label:menuStyles;");
+var listStyles = /*#__PURE__*/css({
+  "&.autocomplete__options-list": {
+    listStyle: "none",
+    paddingLeft: 0,
+    "& li": {
+      margin: 0
+    }
+  }
+}, "label:listStyles;");
+export var Placement;
+
+(function (Placement) {
+  Placement["top"] = "top";
+  Placement["bottom"] = "bottom";
+})(Placement || (Placement = {}));
+
+function Spinner() {
+  return /*#__PURE__*/React.createElement(MaterialSpinner, {
+    size: 24,
+    spinnerColor: "#fa5723",
+    spinnerWidth: 2,
+    visible: true
+  });
+}
+
+var AutoComplete = /*#__PURE__*/function (_React$Component) {
+  _inherits(AutoComplete, _React$Component);
+
+  var _super = _createSuper(AutoComplete);
+
+  function AutoComplete() {
+    var _this;
+
+    _classCallCheck(this, AutoComplete);
+
+    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: ""
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "downshift", /*#__PURE__*/React.createRef());
+
+    return _this;
+  }
+
+  _createClass(AutoComplete, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(previousProps) {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          value = _this$props.value,
+          options = _this$props.options;
+      var previousValue = previousProps.value;
+
+      if (!_isEqual(value, previousValue)) {
+        var item = null;
+
+        if (value) {
+          if (typeof value === "object") {
+            item = value;
+          } else {
+            item = options.find(function (option) {
+              return value === getOptionValue(option, _this2.props);
+            }) || null;
+          }
+        }
+
+        var downshift = this.downshift.current;
+        downshift && downshift.selectItem(item);
+      }
+    }
+    /**
+     * Renders options - based on user's input. It will try to match input text with available options.
+     */
+
+  }, {
+    key: "renderOptions",
+    value: function renderOptions(_ref) {
+      var _this3 = this;
+
+      var options = _ref.options,
+          isOpen = _ref.isOpen,
+          highlightedIndex = _ref.highlightedIndex,
+          selectedItem = _ref.selectedItem,
+          getMenuProps = _ref.getMenuProps,
+          getItemProps = _ref.getItemProps,
+          placement = _ref.placement;
+
+      if (!isOpen) {
+        return null;
+      }
+
+      var renderItem = this.props.renderItem;
+      var filtered = options.filter(function (item) {
+        // 2) At the end, we want to show only options that are matched by typed text.
+        if (!_this3.state.inputValue) {
+          return true;
+        }
+
+        if (item.aliases) {
+          return findInAliases(item, _this3.state.inputValue);
+        }
+
+        return getOptionText(item, _this3.props).toLowerCase().includes(_this3.state.inputValue.toLowerCase());
+      });
+
+      if (!filtered.length) {
+        return /*#__PURE__*/React.createElement(Elevation, {
+          z: 1,
+          className: classNames(_defineProperty({}, menuStyles, placement === Placement.top))
+        }, /*#__PURE__*/React.createElement("ul", Object.assign({
+          className: classNames("autocomplete__options-list", listStyles)
+        }, getMenuProps()), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Typography, {
+          use: "body2"
+        }, "No results."))));
+      }
+
+      return /*#__PURE__*/React.createElement(Elevation, {
+        z: 1,
+        className: classNames(_defineProperty({}, menuStyles, placement === Placement.top))
+      }, /*#__PURE__*/React.createElement("ul", Object.assign({
+        className: classNames("autocomplete__options-list", listStyles)
+      }, getMenuProps()), filtered.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); // Add "selected" class if the item is selected.
+
+        if (selectedItem && getOptionValue(selectedItem, _this3.props) === itemValue) {
+          itemClassNames.selected = true;
+        } // Render the item.
+
+
+        return /*#__PURE__*/React.createElement("li", Object.assign({
+          key: itemValue
+        }, getItemProps({
+          index: index,
+          item: item,
+          className: classNames(itemClassNames)
+        })), renderItem.call(_this3, item, index));
+      })));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this4 = this;
+
+      var _this$props2 = this.props,
+          className = _this$props2.className,
+          options = _this$props2.options,
+          _onChange = _this$props2.onChange,
+          value = _this$props2.value,
+          valueProp = _this$props2.valueProp,
+          textProp = _this$props2.textProp,
+          onInput = _this$props2.onInput,
+          _this$props2$validati = _this$props2.validation,
+          validation = _this$props2$validati === void 0 ? {
+        isValid: null
+      } : _this$props2$validati,
+          placement = _this$props2.placement,
+          otherInputProps = _objectWithoutProperties(_this$props2, _excluded); // Downshift related props.
+
+
+      var downshiftProps = {
+        className: autoCompleteStyle,
+        itemToString: function itemToString(item) {
+          return getOptionText(item, _this4.props);
+        },
+        defaultSelectedItem: value,
+        onChange: function onChange(selection) {
+          if (!selection || !_onChange) {
+            return;
+          }
+
+          _onChange(getOptionValue(selection, _this4.props), selection);
+
+          _this4.setState(function (state) {
+            return _objectSpread(_objectSpread({}, state), {}, {
+              inputValue: ""
+            });
+          });
+        }
+      };
+      return /*#__PURE__*/React.createElement("div", {
+        className: classNames(autoCompleteStyle, className)
+      }, /*#__PURE__*/React.createElement(Downshift, Object.assign({}, downshiftProps, {
+        ref: this.downshift
+      }), 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({
+          // This prop is above `otherInputProps` since it can be overridden by the user.
+          trailingIcon: _this4.props.loading && /*#__PURE__*/React.createElement(Spinner, null)
+        }, otherInputProps), {}, {
+          // @ts-ignore
+          validation: validation,
+          rawOnChange: true,
+          onChange: function onChange(ev) {
+            return ev;
+          },
+          onBlur: function onBlur(ev) {
+            return ev;
+          },
+          onFocus: function onFocus(ev) {
+            openMenu();
+            otherInputProps.onFocus && otherInputProps.onFocus(ev);
+          },
+          onKeyDown: function onKeyDown(ev) {
+            var keyCode = keycode(ev);
+
+            if (keyCode === "backspace") {
+              _onChange(null);
+
+              setTimeout(function () {
+                return openMenu();
+              }, 50);
+            }
+          },
+          onKeyUp: function onKeyUp(ev) {
+            var keyCode = keycode(ev);
+            var target = ev.currentTarget;
+            var inputValue = target.value || ""; // If user pressed 'esc', 'enter' or similar...
+
+            if (keyCode && keyCode.length > 1 && keyCode !== "backspace") {
+              return;
+            } // If values are the same, exit, do not update current search term.
+
+
+            if (inputValue === _this4.state.inputValue) {
+              return;
+            }
+
+            _this4.setState(function (state) {
+              return _objectSpread(_objectSpread({}, state), {}, {
+                inputValue: inputValue
+              });
+            }, function () {
+              onInput && onInput(inputValue);
+            });
+          }
+        }))), !otherInputProps.disabled && !otherInputProps.readOnly && _this4.renderOptions(_objectSpread(_objectSpread({}, rest), {}, {
+          options: options,
+          placement: placement
+        })));
+      }));
+    }
+  }]);
+
+  return AutoComplete;
+}(React.Component);
+
+_defineProperty(AutoComplete, "defaultProps", {
+  valueProp: "id",
+  textProp: "name",
+  options: [],
+  placement: Placement.bottom,
+  renderItem: function renderItem(item) {
+    return /*#__PURE__*/React.createElement(Typography, {
+      use: "body2"
+    }, getOptionText(item, this.props));
+  }
+});
+
+export { AutoComplete };

package/AutoComplete/AutoComplete.stories.d.ts

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

package/AutoComplete/AutoComplete.stories.js

@@ -0,0 +1,76 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
+import readme from "./AutoCompleteReadme.md";
+import { Form } from "@webiny/form";
+import { AutoComplete } from "./AutoComplete";
+var story = storiesOf("Components/AutoComplete", module);
+var options = [{
+  name: "France",
+  id: "france"
+}, {
+  name: "Germany",
+  id: "germany"
+}, {
+  name: "Italy",
+  id: "italy"
+}, {
+  name: "Spain",
+  id: "spain"
+}, {
+  name: "UK",
+  id: "uk"
+}, {
+  name: "US",
+  id: "us"
+}, {
+  name: "Norway",
+  id: "norway"
+}, {
+  name: "Finland",
+  id: "finland"
+}, {
+  name: "Czech Republic",
+  id: "czech-republic"
+}];
+story.add("AutoComplete", function () {
+  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, {
+    title: "Single value"
+  }, /*#__PURE__*/React.createElement(Form, {
+    data: {
+      country: {
+        id: "italy",
+        name: "Italy"
+      }
+    }
+  }, function (_ref) {
+    var Bind = _ref.Bind;
+    return /*#__PURE__*/React.createElement(Bind, {
+      name: "country"
+    }, /*#__PURE__*/React.createElement(AutoComplete, {
+      options: options,
+      label: "Country",
+      description: "Choose your country"
+    }));
+  })), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                    <Form>\n                        {({ Bind }) => (\n                             <Bind name=\"country\">\n                                <AutoComplete\n                                    options={".concat(JSON.stringify(options), "}\n                                    label=\"Country\"\n                                    description=\"Choose your country.\"\n                                />\n                            </Bind>\n                        )}\n                    </Form>\n                    "))), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, {
+    title: "Single value - use simple strings"
+  }, /*#__PURE__*/React.createElement(Form, {
+    data: {
+      country: "Germany"
+    }
+  }, function (_ref2) {
+    var Bind = _ref2.Bind;
+    return /*#__PURE__*/React.createElement(Bind, {
+      name: "country"
+    }, /*#__PURE__*/React.createElement(AutoComplete, {
+      useSimpleValues: true,
+      options: ["France", "Germany", "Italy", "Spain"],
+      label: "Country",
+      description: "Choose your country"
+    }));
+  })), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                    <Form data={{ country: \"Germany\" }}>\n                        {({ Bind }) => (\n                            <Bind name=\"country\">\n                                <AutoComplete\n                                    useSimpleValues\n                                    options={[\"France\", \"Germany\", \"Italy\", \"Spain\"]}\n                                    label=\"Country\"\n                                    description=\"Choose your country\"\n                                />\n                            </Bind>\n                        )}\n                    </Form>\n                    ")));
+}, {
+  info: {
+    propTables: [AutoComplete]
+  }
+});

package/AutoComplete/AutoCompleteReadme.md

@@ -0,0 +1,11 @@
+# AutoComplete
+
+### Description
+
+`AutoComplete` component lets users select a value from a list of suggestions (created based on their input).
+
+### Import
+
+```js
+import { AutoComplete } from "@webiny/ui/AutoComplete";
+```

package/AutoComplete/MultiAutoComplete.d.ts

@@ -0,0 +1,80 @@
+import * as React from "react";
+import { AutoCompleteBaseProps } from "./types";
+export declare type MultiAutoCompleteProps = AutoCompleteBaseProps & {
+    /**
+     * Prevents adding the same item to the list twice.
+     */
+    unique: boolean;
+    /**
+     * Set if custom values (not from list of suggestions) are allowed.
+     */
+    allowFreeInput?: boolean;
+    /**
+     *  If true, will show a loading spinner on the right side of the input.
+     */
+    loading?: boolean;
+    /**
+     * Use data list instead of default Chips component. Useful when expecting a lot of data.
+     */
+    useMultipleSelectionList?: boolean;
+    /**
+     * Render list item when `useMultipleSelectionList` is used.
+     */
+    renderListItemLabel?: Function;
+};
+declare type State = {
+    inputValue: string;
+    multipleSelectionPage: number;
+    multipleSelectionSearch: string;
+    reorderFormVisible: string;
+    reorderFormValue: string;
+};
+export declare class MultiAutoComplete extends React.Component<MultiAutoCompleteProps, State> {
+    static defaultProps: {
+        valueProp: string;
+        textProp: string;
+        unique: boolean;
+        options: any[];
+        useSimpleValues: boolean;
+        useMultipleSelectionList: boolean;
+        renderItem(item: any): JSX.Element;
+        renderListItemLabel(item: any): any;
+    };
+    state: {
+        inputValue: string;
+        multipleSelectionPage: number;
+        multipleSelectionSearch: string;
+        reorderFormVisible: string;
+        reorderFormValue: string;
+    };
+    /**
+     * Helps us trigger some of the downshift's methods (eg. clearSelection) and helps us to avoid adding state.
+     */
+    downshift: any;
+    assignedValueAfterClearing: {
+        set: boolean;
+        selection: any;
+    };
+    setMultipleSelectionPage: (multipleSelectionPage: any) => void;
+    setMultipleSelectionSearch: (multipleSelectionSearch: any) => void;
+    getOptions(): any[];
+    /**
+     * 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 {*}
+     */
+    renderOptions({ options, isOpen, highlightedIndex, getMenuProps, getItemProps }: any): JSX.Element;
+    /**
+     * 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 {*}
+     */
+    renderMultipleSelection(): JSX.Element;
+    render(): JSX.Element;
+}
+export {};