@webiny/app-website-builder 0.0.0-unstable.e6f0dc8ca7 → 0.0.0-unstable.eb81deee7e

package/ecommerce/components/ResourcesList.js

@@ -1,140 +1,127 @@
-import React, { useEffect } from "react";
+import react, { useEffect } from "react";
 import { action, runInAction } from "mobx";
 import { observer, useLocalObservable } from "mobx-react-lite";
 import capitalize from "lodash/capitalize.js";
 import pluralize from "pluralize";
-import { ResourcePreviewCell, ResourcePicker } from "./ResourcesPicker.js";
+import { ResourcePicker, ResourcePreviewCell } from "./ResourcesPicker.js";
 import { useDialogs } from "@webiny/app-admin";
-import { Loader, Button, Text, List } from "@webiny/admin-ui";
-import { ReactComponent as Delete } from "@webiny/icons/delete.svg";
-const ResourcePreviewById = observer(props => {
-  // oxlint-disable-next-line typescript/no-unused-vars
-  const {
-    id,
-    ...rest
-  } = props;
-  const store = useLocalObservable(() => ({
-    loading: false,
-    resourceInfo: null,
-    async getResource() {
-      runInAction(() => {
-        this.loading = true;
-      });
-      try {
-        const value = await props.api[props.resourceName].findById(props.id);
-        runInAction(() => {
-          this.resourceInfo = value;
-        });
-      } catch (e) {
-        console.error(e);
-      }
-      runInAction(() => {
-        this.loading = false;
-      });
-    }
-  }));
-  useEffect(() => {
-    store.getResource();
-  }, []);
-  if (store.loading) {
-    return /*#__PURE__*/React.createElement(Loader, {
-      size: "md"
+import { Button, List, Loader, Text } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/delete.svg";
+const ResourcePreviewById = observer((props)=>{
+    const { id, ...rest } = props;
+    const store = useLocalObservable(()=>({
+            loading: false,
+            resourceInfo: null,
+            async getResource () {
+                runInAction(()=>{
+                    this.loading = true;
+                });
+                try {
+                    const value = await props.api[props.resourceName].findById(props.id);
+                    runInAction(()=>{
+                        this.resourceInfo = value;
+                    });
+                } catch (e) {
+                    console.error(e);
+                }
+                runInAction(()=>{
+                    this.loading = false;
+                });
+            }
+        }));
+    useEffect(()=>{
+        store.getResource();
+    }, []);
+    if (store.loading) return /*#__PURE__*/ react.createElement(Loader, {
+        size: "md"
     });
-  }
-  return store.resourceInfo && /*#__PURE__*/React.createElement(ResourcePreviewCell, Object.assign({
-    resource: store.resourceInfo
-  }, rest)) || /*#__PURE__*/React.createElement(React.Fragment, null);
-});
-const NoResourcesSelected = ({
-  resourceName
-}) => {
-  return /*#__PURE__*/React.createElement("div", {
-    className: "w-full"
-  }, /*#__PURE__*/React.createElement(Text, null, "There are no ", pluralize(resourceName), " in this list."));
-};
-export const PickResourceList = observer(props => {
-  const dialog = useDialogs();
-  const store = useLocalObservable(() => ({
-    value: props.value || []
-  }));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(List, null, store.value?.map((item, index) => /*#__PURE__*/React.createElement(ResourcePreviewById, {
-    resourceName: props.resourceName,
-    key: `${item}:${index}`,
-    id: item,
-    api: props.api,
-    actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(List.Item.Action, {
-      icon: /*#__PURE__*/React.createElement(Delete, null),
-      onClick: action(() => {
-        const res = [...store.value.slice(0, store.value.indexOf(item)), ...store.value.slice(store.value.indexOf(item) + 1)];
-        store.value = res;
-        props.onChange(res);
-      })
-    }))
-  }))), (store.value || []).length === 0 ? /*#__PURE__*/React.createElement(NoResourcesSelected, {
-    resourceName: props.resourceName
-  }) : null, /*#__PURE__*/React.createElement("div", {
-    className: "align-center my-lg"
-  }, /*#__PURE__*/React.createElement(Button, {
-    text: `+ Select ${capitalize(pluralize(props.resourceName))}`,
-    variant: "secondary",
-    onClick: () => {
-      // oxlint-disable-next-line typescript/no-unused-vars
-      const {
-        value,
-        resourcePicker,
+    return store.resourceInfo && /*#__PURE__*/ react.createElement(ResourcePreviewCell, {
+        resource: store.resourceInfo,
         ...rest
-      } = props;
-      const PickerComponent = resourcePicker || ResourcePicker;
-      const closeDialog = dialog.showDialog({
-        title: `Select ${pluralize(props.resourceName)}`,
-        acceptLabel: null,
-        cancelLabel: null,
-        content: /*#__PURE__*/React.createElement("div", {
-          className: "h-[500px] overflow-scroll"
-        }, /*#__PURE__*/React.createElement(PickerComponent, Object.assign({}, rest, {
-          omitIds: store.value,
-          onChange: action(resource => {
-            if (resource) {
-              if (!Array.isArray(store.value)) {
-                store.value = [];
-              }
-              store.value.push(String(resource.id));
-              props.onChange(store.value);
-            }
-            closeDialog();
-          })
-        })))
-      });
-    }
-  })));
+    }) || /*#__PURE__*/ react.createElement(react.Fragment, null);
+});
+const NoResourcesSelected = ({ resourceName })=>/*#__PURE__*/ react.createElement("div", {
+        className: "w-full"
+    }, /*#__PURE__*/ react.createElement(Text, null, "There are no ", pluralize(resourceName), " in this list."));
+const PickResourceList = observer((props)=>{
+    const dialog = useDialogs();
+    const store = useLocalObservable(()=>({
+            value: props.value || []
+        }));
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(List, null, store.value?.map((item, index)=>/*#__PURE__*/ react.createElement(ResourcePreviewById, {
+            resourceName: props.resourceName,
+            key: `${item}:${index}`,
+            id: item,
+            api: props.api,
+            actions: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(List.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                onClick: action(()=>{
+                    const res = [
+                        ...store.value.slice(0, store.value.indexOf(item)),
+                        ...store.value.slice(store.value.indexOf(item) + 1)
+                    ];
+                    store.value = res;
+                    props.onChange(res);
+                })
+            }))
+        }))), 0 === (store.value || []).length ? /*#__PURE__*/ react.createElement(NoResourcesSelected, {
+        resourceName: props.resourceName
+    }) : null, /*#__PURE__*/ react.createElement("div", {
+        className: "align-center my-lg"
+    }, /*#__PURE__*/ react.createElement(Button, {
+        text: `+ Select ${capitalize(pluralize(props.resourceName))}`,
+        variant: "secondary",
+        onClick: ()=>{
+            const { value, resourcePicker, ...rest } = props;
+            const PickerComponent = resourcePicker || ResourcePicker;
+            const closeDialog = dialog.showDialog({
+                title: `Select ${pluralize(props.resourceName)}`,
+                acceptLabel: null,
+                cancelLabel: null,
+                content: /*#__PURE__*/ react.createElement("div", {
+                    className: "h-[500px] overflow-scroll"
+                }, /*#__PURE__*/ react.createElement(PickerComponent, {
+                    ...rest,
+                    omitIds: store.value,
+                    onChange: action((resource)=>{
+                        if (resource) {
+                            if (!Array.isArray(store.value)) store.value = [];
+                            store.value.push(String(resource.id));
+                            props.onChange(store.value);
+                        }
+                        closeDialog();
+                    })
+                }))
+            });
+        }
+    })));
 });
-export const PickResourcesListButton = observer(props => {
-  const dialogs = useDialogs();
-  useEffect(() => {
-    if (typeof props.value === "undefined") {
-      try {
-        props.onChange([]);
-      } catch (e) {
-        console.warn("Could not set default value", e);
-      }
-    }
-  }, []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-    text: `${props.value?.length || 0} ${pluralize(props.resourceName, props.value?.length || 0)}`,
-    variant: "secondary",
-    onClick: () => {
-      dialogs.showDialog({
-        title: `Selected ${pluralize(props.resourceName)}`,
-        acceptLabel: null,
-        cancelLabel: null,
-        content: /*#__PURE__*/React.createElement(PickResourceList, props)
-      });
-    },
-    style: {
-      color: "#999",
-      whiteSpace: "nowrap"
-    }
-  }));
+const PickResourcesListButton = observer((props)=>{
+    const dialogs = useDialogs();
+    useEffect(()=>{
+        if (void 0 === props.value) try {
+            props.onChange([]);
+        } catch (e) {
+            console.warn("Could not set default value", e);
+        }
+    }, []);
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Button, {
+        text: `${props.value?.length || 0} ${pluralize(props.resourceName, props.value?.length || 0)}`,
+        variant: "secondary",
+        onClick: ()=>{
+            dialogs.showDialog({
+                title: `Selected ${pluralize(props.resourceName)}`,
+                acceptLabel: null,
+                cancelLabel: null,
+                content: /*#__PURE__*/ react.createElement(PickResourceList, props)
+            });
+        },
+        style: {
+            color: "#999",
+            whiteSpace: "nowrap"
+        }
+    }));
 });
+export { PickResourceList, PickResourcesListButton };
 
 //# sourceMappingURL=ResourcesList.js.map

package/ecommerce/components/ResourcesList.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","action","runInAction","observer","useLocalObservable","capitalize","pluralize","ResourcePreviewCell","ResourcePicker","useDialogs","Loader","Button","Text","List","ReactComponent","Delete","ResourcePreviewById","props","id","rest","store","loading","resourceInfo","getResource","value","api","resourceName","findById","e","console","error","createElement","size","Object","assign","resource","Fragment","NoResourcesSelected","className","PickResourceList","dialog","map","item","index","key","actions","Item","Action","icon","onClick","res","slice","indexOf","onChange","length","text","variant","resourcePicker","PickerComponent","closeDialog","showDialog","title","acceptLabel","cancelLabel","content","omitIds","Array","isArray","push","String","PickResourcesListButton","dialogs","warn","style","color","whiteSpace"],"sources":["ResourcesList.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { action, runInAction } from \"mobx\";\nimport { observer, useLocalObservable } from \"mobx-react-lite\";\nimport capitalize from \"lodash/capitalize.js\";\nimport pluralize from \"pluralize\";\nimport type { ResourcePreviewCellProps, ResourcePickerProps } from \"./ResourcesPicker.js\";\nimport { ResourcePreviewCell, ResourcePicker } from \"./ResourcesPicker.js\";\nimport { useDialogs } from \"@webiny/app-admin\";\nimport { Loader, Button, Text, List } from \"@webiny/admin-ui\";\nimport { ReactComponent as Delete } from \"@webiny/icons/delete.svg\";\nimport type { IEcommerceApi, Resource } from \"~/ecommerce/index.js\";\n\nexport type PickResourceListProps = {\n    api: IEcommerceApi;\n    value?: string[];\n    onChange(newValue: string[]): void;\n    resourcePicker?: React.FC<ResourcePickerProps>;\n    resourceName: string;\n    pluginName: string;\n};\n\nconst ResourcePreviewById = observer(\n    (\n        props: {\n            id: string;\n            api: IEcommerceApi;\n            resourceName: string;\n            actions?: React.ReactNode;\n        } & Partial<ResourcePreviewCellProps>\n    ) => {\n        // oxlint-disable-next-line typescript/no-unused-vars\n        const { id, ...rest } = props;\n        const store = useLocalObservable(() => ({\n            loading: false,\n            resourceInfo: null as Resource | null,\n            async getResource() {\n                runInAction(() => {\n                    this.loading = true;\n                });\n                try {\n                    const value = await props.api[props.resourceName].findById(props.id);\n                    runInAction(() => {\n                        this.resourceInfo = value;\n                    });\n                } catch (e) {\n                    console.error(e);\n                }\n                runInAction(() => {\n                    this.loading = false;\n                });\n            }\n        }));\n        useEffect(() => {\n            store.getResource();\n        }, []);\n\n        if (store.loading) {\n            return <Loader size={\"md\"} />;\n        }\n\n        return (\n            (store.resourceInfo && (\n                <ResourcePreviewCell resource={store.resourceInfo} {...rest} />\n            )) || <React.Fragment></React.Fragment>\n        );\n    }\n);\n\ninterface NoResourcesSelectedProps {\n    resourceName: string;\n}\n\nconst NoResourcesSelected = ({ resourceName }: NoResourcesSelectedProps) => {\n    return (\n        <div className={\"w-full\"}>\n            <Text>There are no {pluralize(resourceName)} in this list.</Text>\n        </div>\n    );\n};\n\nexport const PickResourceList = observer((props: PickResourceListProps) => {\n    const dialog = useDialogs();\n\n    const store = useLocalObservable(() => ({\n        value: props.value || []\n    }));\n\n    return (\n        <React.Fragment>\n            <List>\n                {store.value?.map((item, index) => (\n                    <ResourcePreviewById\n                        resourceName={props.resourceName}\n                        key={`${item}:${index}`}\n                        id={item}\n                        api={props.api}\n                        actions={\n                            <>\n                                <List.Item.Action\n                                    icon={<Delete />}\n                                    onClick={action(() => {\n                                        const res = [\n                                            ...store.value!.slice(0, store.value!.indexOf(item)),\n                                            ...store.value!.slice(store.value!.indexOf(item) + 1)\n                                        ];\n                                        store.value = res;\n                                        props.onChange(res);\n                                    })}\n                                />\n                            </>\n                        }\n                    />\n                ))}\n            </List>\n            {(store.value || []).length === 0 ? (\n                <NoResourcesSelected resourceName={props.resourceName} />\n            ) : null}\n            {/* On click - choose product */}\n            <div className={\"align-center my-lg\"}>\n                <Button\n                    text={`+ Select ${capitalize(pluralize(props.resourceName))}`}\n                    variant=\"secondary\"\n                    onClick={() => {\n                        // oxlint-disable-next-line typescript/no-unused-vars\n                        const { value, resourcePicker, ...rest } = props;\n                        const PickerComponent = resourcePicker || ResourcePicker;\n\n                        const closeDialog = dialog.showDialog({\n                            title: `Select ${pluralize(props.resourceName)}`,\n                            acceptLabel: null,\n                            cancelLabel: null,\n                            content: (\n                                <div className={\"h-[500px] overflow-scroll\"}>\n                                    <PickerComponent\n                                        {...rest}\n                                        omitIds={store.value}\n                                        onChange={action(resource => {\n                                            if (resource) {\n                                                if (!Array.isArray(store.value)) {\n                                                    store.value = [];\n                                                }\n                                                store.value.push(String(resource.id));\n                                                props.onChange(store.value);\n                                            }\n                                            closeDialog();\n                                        })}\n                                    />\n                                </div>\n                            )\n                        });\n                    }}\n                />\n            </div>\n        </React.Fragment>\n    );\n});\n\nexport const PickResourcesListButton = observer((props: Omit<PickResourceListProps, \"onDone\">) => {\n    const dialogs = useDialogs();\n\n    useEffect(() => {\n        if (typeof props.value === \"undefined\") {\n            try {\n                props.onChange([]);\n            } catch (e) {\n                console.warn(\"Could not set default value\", e);\n            }\n        }\n    }, []);\n\n    return (\n        <React.Fragment>\n            <Button\n                text={`${props.value?.length || 0} ${pluralize(\n                    props.resourceName,\n                    props.value?.length || 0\n                )}`}\n                variant={\"secondary\"}\n                onClick={() => {\n                    dialogs.showDialog({\n                        title: `Selected ${pluralize(props.resourceName)}`,\n                        acceptLabel: null,\n                        cancelLabel: null,\n                        content: <PickResourceList {...props} />\n                    });\n                }}\n                style={{ color: \"#999\", whiteSpace: \"nowrap\" }}\n            />\n        </React.Fragment>\n    );\n});\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ecommerce/components/ResourcesList.js","sources":["../../../src/ecommerce/components/ResourcesList.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { action, runInAction } from \"mobx\";\nimport { observer, useLocalObservable } from \"mobx-react-lite\";\nimport capitalize from \"lodash/capitalize.js\";\nimport pluralize from \"pluralize\";\nimport type { ResourcePreviewCellProps, ResourcePickerProps } from \"./ResourcesPicker.js\";\nimport { ResourcePreviewCell, ResourcePicker } from \"./ResourcesPicker.js\";\nimport { useDialogs } from \"@webiny/app-admin\";\nimport { Loader, Button, Text, List } from \"@webiny/admin-ui\";\nimport { ReactComponent as Delete } from \"@webiny/icons/delete.svg\";\nimport type { IEcommerceApi, Resource } from \"~/ecommerce/index.js\";\n\nexport type PickResourceListProps = {\n    api: IEcommerceApi;\n    value?: string[];\n    onChange(newValue: string[]): void;\n    resourcePicker?: React.FC<ResourcePickerProps>;\n    resourceName: string;\n    pluginName: string;\n};\n\nconst ResourcePreviewById = observer(\n    (\n        props: {\n            id: string;\n            api: IEcommerceApi;\n            resourceName: string;\n            actions?: React.ReactNode;\n        } & Partial<ResourcePreviewCellProps>\n    ) => {\n        // oxlint-disable-next-line typescript/no-unused-vars\n        const { id, ...rest } = props;\n        const store = useLocalObservable(() => ({\n            loading: false,\n            resourceInfo: null as Resource | null,\n            async getResource() {\n                runInAction(() => {\n                    this.loading = true;\n                });\n                try {\n                    const value = await props.api[props.resourceName].findById(props.id);\n                    runInAction(() => {\n                        this.resourceInfo = value;\n                    });\n                } catch (e) {\n                    console.error(e);\n                }\n                runInAction(() => {\n                    this.loading = false;\n                });\n            }\n        }));\n        useEffect(() => {\n            store.getResource();\n        }, []);\n\n        if (store.loading) {\n            return <Loader size={\"md\"} />;\n        }\n\n        return (\n            (store.resourceInfo && (\n                <ResourcePreviewCell resource={store.resourceInfo} {...rest} />\n            )) || <React.Fragment></React.Fragment>\n        );\n    }\n);\n\ninterface NoResourcesSelectedProps {\n    resourceName: string;\n}\n\nconst NoResourcesSelected = ({ resourceName }: NoResourcesSelectedProps) => {\n    return (\n        <div className={\"w-full\"}>\n            <Text>There are no {pluralize(resourceName)} in this list.</Text>\n        </div>\n    );\n};\n\nexport const PickResourceList = observer((props: PickResourceListProps) => {\n    const dialog = useDialogs();\n\n    const store = useLocalObservable(() => ({\n        value: props.value || []\n    }));\n\n    return (\n        <React.Fragment>\n            <List>\n                {store.value?.map((item, index) => (\n                    <ResourcePreviewById\n                        resourceName={props.resourceName}\n                        key={`${item}:${index}`}\n                        id={item}\n                        api={props.api}\n                        actions={\n                            <>\n                                <List.Item.Action\n                                    icon={<Delete />}\n                                    onClick={action(() => {\n                                        const res = [\n                                            ...store.value!.slice(0, store.value!.indexOf(item)),\n                                            ...store.value!.slice(store.value!.indexOf(item) + 1)\n                                        ];\n                                        store.value = res;\n                                        props.onChange(res);\n                                    })}\n                                />\n                            </>\n                        }\n                    />\n                ))}\n            </List>\n            {(store.value || []).length === 0 ? (\n                <NoResourcesSelected resourceName={props.resourceName} />\n            ) : null}\n            {/* On click - choose product */}\n            <div className={\"align-center my-lg\"}>\n                <Button\n                    text={`+ Select ${capitalize(pluralize(props.resourceName))}`}\n                    variant=\"secondary\"\n                    onClick={() => {\n                        // oxlint-disable-next-line typescript/no-unused-vars\n                        const { value, resourcePicker, ...rest } = props;\n                        const PickerComponent = resourcePicker || ResourcePicker;\n\n                        const closeDialog = dialog.showDialog({\n                            title: `Select ${pluralize(props.resourceName)}`,\n                            acceptLabel: null,\n                            cancelLabel: null,\n                            content: (\n                                <div className={\"h-[500px] overflow-scroll\"}>\n                                    <PickerComponent\n                                        {...rest}\n                                        omitIds={store.value}\n                                        onChange={action(resource => {\n                                            if (resource) {\n                                                if (!Array.isArray(store.value)) {\n                                                    store.value = [];\n                                                }\n                                                store.value.push(String(resource.id));\n                                                props.onChange(store.value);\n                                            }\n                                            closeDialog();\n                                        })}\n                                    />\n                                </div>\n                            )\n                        });\n                    }}\n                />\n            </div>\n        </React.Fragment>\n    );\n});\n\nexport const PickResourcesListButton = observer((props: Omit<PickResourceListProps, \"onDone\">) => {\n    const dialogs = useDialogs();\n\n    useEffect(() => {\n        if (typeof props.value === \"undefined\") {\n            try {\n                props.onChange([]);\n            } catch (e) {\n                console.warn(\"Could not set default value\", e);\n            }\n        }\n    }, []);\n\n    return (\n        <React.Fragment>\n            <Button\n                text={`${props.value?.length || 0} ${pluralize(\n                    props.resourceName,\n                    props.value?.length || 0\n                )}`}\n                variant={\"secondary\"}\n                onClick={() => {\n                    dialogs.showDialog({\n                        title: `Selected ${pluralize(props.resourceName)}`,\n                        acceptLabel: null,\n                        cancelLabel: null,\n                        content: <PickResourceList {...props} />\n                    });\n                }}\n                style={{ color: \"#999\", whiteSpace: \"nowrap\" }}\n            />\n        </React.Fragment>\n    );\n});\n"],"names":["ResourcePreviewById","observer","props","id","rest","store","useLocalObservable","runInAction","value","e","console","useEffect","Loader","ResourcePreviewCell","React","NoResourcesSelected","resourceName","Text","pluralize","PickResourceList","dialog","useDialogs","List","item","index","Delete","action","res","Button","capitalize","resourcePicker","PickerComponent","ResourcePicker","closeDialog","resource","Array","String","PickResourcesListButton","dialogs"],"mappings":"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"}

package/ecommerce/components/ResourcesPicker.d.ts

@@ -24,8 +24,8 @@ export interface ResourcePreviewCellProps {
     onClick?: () => void;
     style?: Partial<CSSStyleDeclaration>;
 }
-export declare const ResourcePreviewCell: ((props: ResourcePreviewCellProps) => React.JSX.Element) & {
-    displayName: string;
+export declare const ResourcePreviewCell: ((props: ResourcePreviewCellProps) => React.JSX.Element) & React.NamedExoticComponent<ResourcePreviewCellProps> & {
+    readonly type: (props: ResourcePreviewCellProps) => React.JSX.Element;
 };
 export type ResourcePickerProps = CustomResourcePickerProps<Resource> & {
     api: CommerceAPIOperations;
@@ -33,7 +33,12 @@ export type ResourcePickerProps = CustomResourcePickerProps<Resource> & {
     omitIds?: string[];
     title?: string;
 };
-export declare const ResourcePicker: ((props: ResourcePickerProps) => React.JSX.Element) & {
-    displayName: string;
+export declare const ResourcePicker: ((props: ResourcePickerProps) => React.JSX.Element) & React.NamedExoticComponent<CustomResourcePickerProps<Resource> & {
+    api: CommerceAPIOperations;
+    resourceName: string;
+    omitIds?: string[];
+    title?: string;
+}> & {
+    readonly type: (props: ResourcePickerProps) => React.JSX.Element;
 };
 export declare const ResourcesPickerButton: React.FC<ResourcesPickerButtonProps>;