@webiny/ui 0.0.0-mt-3 → 0.0.0-unstable.2af142b57e

package/AutoComplete/AutoComplete.stories.js

@@ -1,10 +1,13 @@
-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);
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@storybook/react");
+var _Story = require("@webiny/storybook-utils/Story");
+var _AutoCompleteReadme = _interopRequireDefault(require("./AutoCompleteReadme.md"));
+var _form = require("@webiny/form");
+var _AutoComplete = require("./AutoComplete");
+var story = (0, _react2.storiesOf)("Components/AutoComplete", module);
 var options = [{
   name: "France",
   id: "france"
@@ -34,9 +37,9 @@ var options = [{
   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, {
+  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _AutoCompleteReadme.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, {
     title: "Single value"
-  }, /*#__PURE__*/React.createElement(Form, {
+  }, /*#__PURE__*/_react.default.createElement(_form.Form, {
     data: {
       country: {
         id: "italy",
@@ -45,32 +48,32 @@ story.add("AutoComplete", function () {
     }
   }, function (_ref) {
     var Bind = _ref.Bind;
-    return /*#__PURE__*/React.createElement(Bind, {
+    return /*#__PURE__*/_react.default.createElement(Bind, {
       name: "country"
-    }, /*#__PURE__*/React.createElement(AutoComplete, {
+    }, /*#__PURE__*/_react.default.createElement(_AutoComplete.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, {
+  })), /*#__PURE__*/_react.default.createElement(_Story.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.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, {
     title: "Single value - use simple strings"
-  }, /*#__PURE__*/React.createElement(Form, {
+  }, /*#__PURE__*/_react.default.createElement(_form.Form, {
     data: {
       country: "Germany"
     }
   }, function (_ref2) {
     var Bind = _ref2.Bind;
-    return /*#__PURE__*/React.createElement(Bind, {
+    return /*#__PURE__*/_react.default.createElement(Bind, {
       name: "country"
-    }, /*#__PURE__*/React.createElement(AutoComplete, {
+    }, /*#__PURE__*/_react.default.createElement(_AutoComplete.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                    ")));
+  })), /*#__PURE__*/_react.default.createElement(_Story.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]
+    propTables: [_AutoComplete.AutoComplete]
   }
 });

package/AutoComplete/AutoComplete.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","options","name","id","add","readme","country","Bind","JSON","stringify","info","propTables","AutoComplete"],"sources":["AutoComplete.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./AutoCompleteReadme.md\";\n\nimport { Form } from \"@webiny/form\";\nimport { AutoComplete } from \"./AutoComplete\";\n\nconst story = storiesOf(\"Components/AutoComplete\", module);\n\nconst options = [\n    { name: \"France\", id: \"france\" },\n    { name: \"Germany\", id: \"germany\" },\n    { name: \"Italy\", id: \"italy\" },\n    { name: \"Spain\", id: \"spain\" },\n    { name: \"UK\", id: \"uk\" },\n    { name: \"US\", id: \"us\" },\n    { name: \"Norway\", id: \"norway\" },\n    { name: \"Finland\", id: \"finland\" },\n    { name: \"Czech Republic\", id: \"czech-republic\" }\n];\n\nstory.add(\n    \"AutoComplete\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Single value\"}>\n                        <Form data={{ country: { id: \"italy\", name: \"Italy\" } }}>\n                            {({ Bind }) => (\n                                <Bind name=\"country\">\n                                    <AutoComplete\n                                        options={options}\n                                        label=\"Country\"\n                                        description=\"Choose your country\"\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                    <Form>\n                        {({ Bind }) => (\n                             <Bind name=\"country\">\n                                <AutoComplete\n                                    options={${JSON.stringify(options)}}\n                                    label=\"Country\"\n                                    description=\"Choose your country.\"\n                                />\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n\n                <StorySandbox>\n                    <StorySandboxExample title={\"Single value - use simple strings\"}>\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                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\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                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [AutoComplete] } }\n);\n"],"mappings":";;;AAAA;AACA;AACA;AAOA;AAEA;AACA;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,yBAAyB,EAAEC,MAAM,CAAC;AAE1D,IAAMC,OAAO,GAAG,CACZ;EAAEC,IAAI,EAAE,QAAQ;EAAEC,EAAE,EAAE;AAAS,CAAC,EAChC;EAAED,IAAI,EAAE,SAAS;EAAEC,EAAE,EAAE;AAAU,CAAC,EAClC;EAAED,IAAI,EAAE,OAAO;EAAEC,EAAE,EAAE;AAAQ,CAAC,EAC9B;EAAED,IAAI,EAAE,OAAO;EAAEC,EAAE,EAAE;AAAQ,CAAC,EAC9B;EAAED,IAAI,EAAE,IAAI;EAAEC,EAAE,EAAE;AAAK,CAAC,EACxB;EAAED,IAAI,EAAE,IAAI;EAAEC,EAAE,EAAE;AAAK,CAAC,EACxB;EAAED,IAAI,EAAE,QAAQ;EAAEC,EAAE,EAAE;AAAS,CAAC,EAChC;EAAED,IAAI,EAAE,SAAS;EAAEC,EAAE,EAAE;AAAU,CAAC,EAClC;EAAED,IAAI,EAAE,gBAAgB;EAAEC,EAAE,EAAE;AAAiB,CAAC,CACnD;AAEDL,KAAK,CAACM,GAAG,CACL,cAAc,EACd,YAAM;EACF,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,2BAAM,CAAe,eACnC,6BAAC,mBAAY,qBACT,6BAAC,0BAAmB;IAAC,KAAK,EAAE;EAAe,gBACvC,6BAAC,UAAI;IAAC,IAAI,EAAE;MAAEC,OAAO,EAAE;QAAEH,EAAE,EAAE,OAAO;QAAED,IAAI,EAAE;MAAQ;IAAE;EAAE,GACnD;IAAA,IAAGK,IAAI,QAAJA,IAAI;IAAA,oBACJ,6BAAC,IAAI;MAAC,IAAI,EAAC;IAAS,gBAChB,6BAAC,0BAAY;MACT,OAAO,EAAEN,OAAQ;MACjB,KAAK,EAAC,SAAS;MACf,WAAW,EAAC;IAAqB,EACnC,CACC;EAAA,CACV,CACE,CACW,eACtB,6BAAC,uBAAgB,4OAMUO,IAAI,CAACC,SAAS,CAACR,OAAO,CAAC,gSAQ/B,CACR,eAEf,6BAAC,mBAAY,qBACT,6BAAC,0BAAmB;IAAC,KAAK,EAAE;EAAoC,gBAC5D,6BAAC,UAAI;IAAC,IAAI,EAAE;MAAEK,OAAO,EAAE;IAAU;EAAE,GAC9B;IAAA,IAAGC,IAAI,SAAJA,IAAI;IAAA,oBACJ,6BAAC,IAAI;MAAC,IAAI,EAAC;IAAS,gBAChB,6BAAC,0BAAY;MACT,eAAe;MACf,OAAO,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,CAAE;MACjD,KAAK,EAAC,SAAS;MACf,WAAW,EAAC;IAAqB,EACnC,CACC;EAAA,CACV,CACE,CACW,eACtB,6BAAC,uBAAgB,ioBAeE,CACR,CACX;AAEhB,CAAC,EACD;EAAEG,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,0BAAY;EAAE;AAAE,CAAC,CAC3C"}

package/AutoComplete/MultiAutoComplete.d.ts

@@ -1,6 +1,10 @@
-import * as React from "react";
+import React from "react";
 import { AutoCompleteBaseProps } from "./types";
-export declare type MultiAutoCompleteProps = AutoCompleteBaseProps & {
+interface SelectionItem {
+    name: string;
+}
+declare type MultiAutoCompletePropsValue = SelectionItem[] | string[];
+export interface MultiAutoCompleteProps extends Omit<AutoCompleteBaseProps, "value"> {
     /**
      * Prevents adding the same item to the list twice.
      */
@@ -21,60 +25,60 @@ export declare type MultiAutoCompleteProps = AutoCompleteBaseProps & {
      * Render list item when `useMultipleSelectionList` is used.
      */
     renderListItemLabel?: Function;
-};
-declare type State = {
+    /**
+     * Render in meta wrapper
+     */
+    renderListItemOptions?: (item: any) => React.ReactNode | null;
+    noResultFound?: React.ReactNode;
+    /**
+     * Value is an array of strings. But can be undefined.
+     */
+    value?: MultiAutoCompletePropsValue;
+}
+interface MultiAutoCompleteState {
     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;
-    };
+}
+export declare class MultiAutoComplete extends React.Component<MultiAutoCompleteProps, MultiAutoCompleteState> {
+    static defaultProps: Partial<MultiAutoCompleteProps>;
+    state: MultiAutoCompleteState;
     /**
      * 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;
+    private downshift;
+    private assignedValueAfterClearing;
+    setMultipleSelectionPage: (multipleSelectionPage: number) => void;
+    setMultipleSelectionSearch: (multipleSelectionSearch: string) => 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;
+    private renderOptions;
+    paginateMultipleSelection(): {
+        data: {
+            option: string | SelectionItem;
+            index: number;
+        }[];
+        meta: {
+            hasData: boolean;
+            totalCount: number;
+            from: number;
+            to: number;
+            page: number;
+            lastPage: number;
+            limit: number;
+            hasPrevious: boolean;
+            hasNext: boolean;
+        };
+    };
     /**
      * 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;
+    renderMultipleSelection(): JSX.Element | null;
     render(): JSX.Element;
 }
 export {};