@webiny/ui 0.0.0-mt-2 → 0.0.0-unstable.06b2ede40f

package/AutoComplete/AutoComplete.js

@@ -1,299 +1,72 @@
-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) {
+import React, { useCallback, useMemo } from "react";
+import { AutoComplete as AdminAutoComplete } from "@webiny/admin-ui";
+export let Placement = /*#__PURE__*/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];
+  return Placement;
+}({});
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `AutoComplete` component from the `@webiny/admin-ui` package instead.
+ */
+export const AutoComplete = ({
+  size,
+  onChange,
+  valueProp = "id",
+  textProp = "name",
+  renderItem,
+  noResultFound,
+  useSimpleValues,
+  onInput,
+  ...props
+}) => {
+  const inputSize = useMemo(() => {
+    if (size === "medium") {
+      return "md";
     }
-
-    _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);
+    return "lg";
+  }, [size]);
+  const options = useMemo(() => {
+    return props.options.map(option => {
+      if (useSimpleValues) {
+        return {
+          label: option,
+          value: option
+        };
       }
+      return {
+        label: option[textProp],
+        value: option[valueProp],
+        disabled: option.disabled,
+        item: option
+      };
+    });
+  }, [props.options, textProp, valueProp, useSimpleValues]);
+  const value = useMemo(() => {
+    if (!props.value) {
+      return undefined;
     }
-    /**
-     * 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));
-      })));
+    if (useSimpleValues && typeof props.value === "string") {
+      return props.value;
     }
-  }, {
-    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 props.value[valueProp];
+  }, [props.value, valueProp]);
+  const onValueChange = useCallback(value => {
+    const option = options.find(option => option.value === value);
+    if (!option) {
+      return;
     }
-  }]);
-
-  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 };
+    onChange?.(value, option.item);
+  }, [onChange, options]);
+  return /*#__PURE__*/React.createElement(AdminAutoComplete, Object.assign({}, props, {
+    value: value,
+    options: options,
+    onValueChange: onValueChange,
+    onValueSearch: onInput,
+    size: inputSize,
+    optionRenderer: renderItem,
+    emptyMessage: noResultFound
+  }));
+};
+
+//# sourceMappingURL=AutoComplete.js.map

package/AutoComplete/AutoComplete.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useMemo","AutoComplete","AdminAutoComplete","Placement","size","onChange","valueProp","textProp","renderItem","noResultFound","useSimpleValues","onInput","props","inputSize","options","map","option","label","value","disabled","item","undefined","onValueChange","find","createElement","Object","assign","onValueSearch","optionRenderer","emptyMessage"],"sources":["AutoComplete.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport type { AutoCompleteBaseProps } from \"./types\";\nimport { AutoComplete as AdminAutoComplete } from \"@webiny/admin-ui\";\n\nexport enum Placement {\n    top = \"top\",\n    bottom = \"bottom\"\n}\n\nexport interface AutoCompleteProps extends Omit<AutoCompleteBaseProps, \"onChange\"> {\n    /* Placement position of dropdown menu, can be either `top` or `bottom`. */\n    placement?: Placement;\n\n    /* A callback that is executed each time a value is changed. */\n    onChange?: (value: any, selection?: any) => void;\n\n    /* If true, will show a loading spinner on the right side of the input. */\n    loading?: boolean;\n\n    /* A component that renders supporting UI in case of no result found. */\n    noResultFound?: React.ReactNode;\n\n    // Size - small, medium or large\n    size?: \"small\" | \"medium\" | \"large\";\n\n    // Indicates if the reset action should be displayed.\n    displayResetAction?: boolean;\n}\n\n/**\n * @deprecated This component is deprecated and will be removed in future releases.\n * Please use the `AutoComplete` component from the `@webiny/admin-ui` package instead.\n */\nexport const AutoComplete = ({\n    size,\n    onChange,\n    valueProp = \"id\",\n    textProp = \"name\",\n    renderItem,\n    noResultFound,\n    useSimpleValues,\n    onInput,\n    ...props\n}: AutoCompleteProps) => {\n    const inputSize = useMemo(() => {\n        if (size === \"medium\") {\n            return \"md\";\n        }\n\n        return \"lg\";\n    }, [size]);\n\n    const options = useMemo(() => {\n        return props.options.map(option => {\n            if (useSimpleValues) {\n                return {\n                    label: option,\n                    value: option\n                };\n            }\n\n            return {\n                label: option[textProp],\n                value: option[valueProp],\n                disabled: option.disabled,\n                item: option\n            };\n        });\n    }, [props.options, textProp, valueProp, useSimpleValues]);\n\n    const value = useMemo(() => {\n        if (!props.value) {\n            return undefined;\n        }\n\n        if (useSimpleValues && typeof props.value === \"string\") {\n            return props.value;\n        }\n\n        return props.value[valueProp as keyof AutoCompleteProps[\"value\"]] as string;\n    }, [props.value, valueProp]);\n\n    const onValueChange = useCallback(\n        (value: any) => {\n            const option = options.find(option => option.value === value);\n\n            if (!option) {\n                return;\n            }\n\n            onChange?.(value, option.item);\n        },\n        [onChange, options]\n    );\n\n    return (\n        <AdminAutoComplete\n            {...props}\n            value={value}\n            options={options}\n            onValueChange={onValueChange}\n            onValueSearch={onInput}\n            size={inputSize}\n            optionRenderer={renderItem}\n            emptyMessage={noResultFound}\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAEnD,SAASC,YAAY,IAAIC,iBAAiB,QAAQ,kBAAkB;AAEpE,WAAYC,SAAS,0BAATA,SAAS;EAATA,SAAS;EAATA,SAAS;EAAA,OAATA,SAAS;AAAA;AAyBrB;AACA;AACA;AACA;AACA,OAAO,MAAMF,YAAY,GAAGA,CAAC;EACzBG,IAAI;EACJC,QAAQ;EACRC,SAAS,GAAG,IAAI;EAChBC,QAAQ,GAAG,MAAM;EACjBC,UAAU;EACVC,aAAa;EACbC,eAAe;EACfC,OAAO;EACP,GAAGC;AACY,CAAC,KAAK;EACrB,MAAMC,SAAS,GAAGb,OAAO,CAAC,MAAM;IAC5B,IAAII,IAAI,KAAK,QAAQ,EAAE;MACnB,OAAO,IAAI;IACf;IAEA,OAAO,IAAI;EACf,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAEV,MAAMU,OAAO,GAAGd,OAAO,CAAC,MAAM;IAC1B,OAAOY,KAAK,CAACE,OAAO,CAACC,GAAG,CAACC,MAAM,IAAI;MAC/B,IAAIN,eAAe,EAAE;QACjB,OAAO;UACHO,KAAK,EAAED,MAAM;UACbE,KAAK,EAAEF;QACX,CAAC;MACL;MAEA,OAAO;QACHC,KAAK,EAAED,MAAM,CAACT,QAAQ,CAAC;QACvBW,KAAK,EAAEF,MAAM,CAACV,SAAS,CAAC;QACxBa,QAAQ,EAAEH,MAAM,CAACG,QAAQ;QACzBC,IAAI,EAAEJ;MACV,CAAC;IACL,CAAC,CAAC;EACN,CAAC,EAAE,CAACJ,KAAK,CAACE,OAAO,EAAEP,QAAQ,EAAED,SAAS,EAAEI,eAAe,CAAC,CAAC;EAEzD,MAAMQ,KAAK,GAAGlB,OAAO,CAAC,MAAM;IACxB,IAAI,CAACY,KAAK,CAACM,KAAK,EAAE;MACd,OAAOG,SAAS;IACpB;IAEA,IAAIX,eAAe,IAAI,OAAOE,KAAK,CAACM,KAAK,KAAK,QAAQ,EAAE;MACpD,OAAON,KAAK,CAACM,KAAK;IACtB;IAEA,OAAON,KAAK,CAACM,KAAK,CAACZ,SAAS,CAAqC;EACrE,CAAC,EAAE,CAACM,KAAK,CAACM,KAAK,EAAEZ,SAAS,CAAC,CAAC;EAE5B,MAAMgB,aAAa,GAAGvB,WAAW,CAC5BmB,KAAU,IAAK;IACZ,MAAMF,MAAM,GAAGF,OAAO,CAACS,IAAI,CAACP,MAAM,IAAIA,MAAM,CAACE,KAAK,KAAKA,KAAK,CAAC;IAE7D,IAAI,CAACF,MAAM,EAAE;MACT;IACJ;IAEAX,QAAQ,GAAGa,KAAK,EAAEF,MAAM,CAACI,IAAI,CAAC;EAClC,CAAC,EACD,CAACf,QAAQ,EAAES,OAAO,CACtB,CAAC;EAED,oBACIhB,KAAA,CAAA0B,aAAA,CAACtB,iBAAiB,EAAAuB,MAAA,CAAAC,MAAA,KACVd,KAAK;IACTM,KAAK,EAAEA,KAAM;IACbJ,OAAO,EAAEA,OAAQ;IACjBQ,aAAa,EAAEA,aAAc;IAC7BK,aAAa,EAAEhB,OAAQ;IACvBP,IAAI,EAAES,SAAU;IAChBe,cAAc,EAAEpB,UAAW;IAC3BqB,YAAY,EAAEpB;EAAc,EAC/B,CAAC;AAEV,CAAC","ignoreList":[]}

package/AutoComplete/MultiAutoComplete.d.ts

@@ -1,10 +1,14 @@
-import * as React from "react";
-import { AutoCompleteBaseProps } from "./types";
-export declare type MultiAutoCompleteProps = AutoCompleteBaseProps & {
+import React from "react";
+import type { AutoCompleteBaseProps } from "./types";
+interface SelectionItem {
+    name: string;
+}
+type MultiAutoCompletePropsValue = SelectionItem[] | string[];
+export interface MultiAutoCompleteProps extends Omit<AutoCompleteBaseProps, "value"> {
     /**
      * Prevents adding the same item to the list twice.
      */
-    unique: boolean;
+    unique?: boolean;
     /**
      * Set if custom values (not from list of suggestions) are allowed.
      */
@@ -13,6 +17,10 @@ export declare type MultiAutoCompleteProps = AutoCompleteBaseProps & {
      *  If true, will show a loading spinner on the right side of the input.
      */
     loading?: boolean;
+    /**
+     * Use custom renderer for selected items.
+     */
+    renderMultipleSelection?: ((items: any, index: number) => React.ReactNode | null) | null;
     /**
      * Use data list instead of default Chips component. Useful when expecting a lot of data.
      */
@@ -20,61 +28,27 @@ export declare type MultiAutoCompleteProps = AutoCompleteBaseProps & {
     /**
      * 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;
-    };
+    renderListItemLabel?: (item: any) => React.ReactNode;
+    /**
+     * Render in meta wrapper
+     */
+    renderListItemOptions?: (item: any) => React.ReactNode | null;
     /**
-     * Helps us trigger some of the downshift's methods (eg. clearSelection) and helps us to avoid adding state.
+     *  A component that renders supporting UI in case of no result found.
      */
-    downshift: any;
-    assignedValueAfterClearing: {
-        set: boolean;
-        selection: any;
-    };
-    setMultipleSelectionPage: (multipleSelectionPage: any) => void;
-    setMultipleSelectionSearch: (multipleSelectionSearch: any) => void;
-    getOptions(): any[];
+    noResultFound?: React.ReactNode;
     /**
-     * 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 {*}
+     * Value is an array of strings. But can be undefined.
      */
-    renderOptions({ options, isOpen, highlightedIndex, getMenuProps, getItemProps }: any): JSX.Element;
+    value?: MultiAutoCompletePropsValue;
     /**
-     * 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 {*}
+     * Indicates if the reset action should be displayed.
      */
-    renderMultipleSelection(): JSX.Element;
-    render(): JSX.Element;
+    displayResetAction?: boolean;
 }
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `MultiAutoComplete` component from the `@webiny/admin-ui` package instead.
+ */
+export declare const MultiAutoComplete: ({ onChange, value, valueProp, textProp, renderItem, noResultFound, useSimpleValues, loading, allowFreeInput, unique, renderMultipleSelection, onInput, ...props }: MultiAutoCompleteProps) => React.JSX.Element;
 export {};