@webiny/ui 5.24.0 → 5.25.0-beta.0

package/ImageEditor/ImageEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ImageEditor.tsx"],"names":["React","flip","filter","crop","rotate","styled","classNames","ButtonSecondary","ButtonPrimary","loadScript","toolbar","Toolbar","display","justifyContent","alignItems","backgroundColor","margin","padding","position","width","boxSizing","zIndex","opacity","pointerEvents","ToolOptions","borderTop","ApplyCancelActions","textAlign","initScripts","Promise","resolve","window","Caman","ImageEditor","tool","src","createRef","props","image","Image","canvas","current","onload","height","ctx","getContext","drawImage","setState","tt","onActivate","options","getToolOptions","startsWith","toDataURL","state","apply","deactivateTool","cancel","name","then","updateCanvas","setTimeout","key","option","autoEnable","activateTool","tools","children","editor","map","disabled","icon","renderForm","cancelActiveTool","applyActiveTool","maxWidth","render","getCanvasDataUrl","activeTool","Component"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport { flip, filter, crop, rotate } from \"./toolbar\";\nimport { ImageEditorTool, ToolbarTool } from \"./toolbar/types\";\nimport styled from \"@emotion/styled\";\nimport classNames from \"classnames\";\nimport { ButtonSecondary, ButtonPrimary } from \"../Button\";\n/**\n * Package load-script does not have types.\n */\n// @ts-ignore\nimport loadScript from \"load-script\";\n\nconst toolbar = {\n    flip,\n    filter,\n    crop,\n    rotate\n};\n\nconst Toolbar = styled(\"div\")({\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    backgroundColor: \"var(--mdc-theme-secondary)\",\n    margin: \"-24px -24px 0px -24px\",\n    padding: 2,\n    position: \"absolute\",\n    width: \"100%\",\n    boxSizing: \"border-box\",\n    zIndex: 10,\n    \"> div.disabled\": {\n        opacity: 0.5,\n        pointerEvents: \"none\"\n    }\n});\n\nconst ToolOptions = styled(\"div\")({\n    margin: \"50px -24px 10px -24px\",\n    boxSizing: \"border-box\",\n    padding: 10,\n    backgroundColor: \"var(--mdc-theme-background)\",\n    borderTop: \"1px solid var(--mdc-theme-on-background)\"\n});\n\nconst ApplyCancelActions = styled(\"div\")({\n    textAlign: \"center\"\n});\n\nconst initScripts = (): Promise<string> => {\n    return new Promise((resolve: any) => {\n        // @ts-ignore\n        if (window.Caman) {\n            return resolve();\n        }\n        return loadScript(\n            \"https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js\",\n            resolve\n        );\n    });\n};\n\ninterface RenderPropArgs {\n    render: Function;\n    getCanvasDataUrl: () => string;\n    activeTool: ImageEditorTool | null;\n    applyActiveTool: () => Promise<void>;\n    cancelActiveTool: () => Promise<void>;\n}\n\ninterface ImageEditorPropsPropsOptions {\n    autoEnable: boolean;\n}\n\ninterface ImageEditorProps {\n    src: string;\n    tools: ToolbarTool[];\n    options?: {\n        flip: ImageEditorPropsPropsOptions;\n        filter: ImageEditorPropsPropsOptions;\n        crop: ImageEditorPropsPropsOptions;\n        rotate: ImageEditorPropsPropsOptions;\n    };\n    onToolActivate?: Function;\n    onToolDeactivate?: Function;\n    children?: (props: RenderPropArgs) => React.ReactNode;\n}\n\ninterface ImageEditorState {\n    tool: ImageEditorTool | null;\n    src: string;\n}\n\nclass ImageEditor extends React.Component<ImageEditorProps, ImageEditorState> {\n    static defaultProps: Partial<ImageEditorProps> = {\n        tools: [\"crop\", \"flip\", \"rotate\", \"filter\"]\n    };\n\n    public override state: ImageEditorState = {\n        tool: null,\n        src: \"\"\n    };\n\n    public canvas = React.createRef<HTMLCanvasElement>();\n    public image?: HTMLImageElement;\n\n    public override componentDidMount() {\n        initScripts().then(() => {\n            this.updateCanvas();\n            setTimeout(() => {\n                const { options } = this.props;\n                if (!options || typeof options !== \"object\") {\n                    return;\n                }\n                for (const key in options) {\n                    const option = options[key as ToolbarTool];\n                    if (option.autoEnable === true) {\n                        const tool: ImageEditorTool | null = toolbar[key as ToolbarTool];\n                        tool && this.activateTool(tool);\n                        break;\n                    }\n                }\n            }, 250);\n        });\n    }\n\n    private readonly updateCanvas = (): void => {\n        const { src } = this.props;\n        this.image = new window.Image();\n        const canvas = this.canvas.current;\n        if (canvas) {\n            this.image.onload = () => {\n                if (this.image) {\n                    canvas.width = this.image.width;\n                    canvas.height = this.image.height;\n                    const ctx = canvas.getContext(\"2d\") as CanvasRenderingContext2D;\n                    ctx.drawImage(this.image, 0, 0);\n                }\n            };\n\n            this.image.src = src;\n        }\n    };\n\n    private readonly activateTool = (tool: ToolbarTool | ImageEditorTool): void => {\n        if (typeof tool === \"string\") {\n            tool = toolbar[tool];\n        }\n\n        this.setState({ tool }, () => {\n            const tt = tool as ImageEditorTool;\n            typeof tt.onActivate === \"function\" &&\n                tt.onActivate({ canvas: this.canvas, options: this.getToolOptions(tt) });\n        });\n    };\n\n    private readonly deactivateTool = (): void => {\n        this.setState({\n            tool: null\n        });\n    };\n\n    public readonly getCanvasDataUrl = (): string => {\n        const canvas = this.canvas.current as HTMLCanvasElement;\n        if (canvas) {\n            const { src } = this.props;\n            if (src.startsWith(\"data:image/jpeg;\")) {\n                return canvas.toDataURL(\"image/jpeg\", 1.0);\n            }\n\n            return canvas.toDataURL();\n        }\n\n        return \"\";\n    };\n\n    private readonly applyActiveTool = async (): Promise<void> => {\n        const { tool } = this.state;\n        if (!tool) {\n            return;\n        }\n\n        if (tool.apply) {\n            await tool.apply({\n                canvas: this.canvas\n            });\n        }\n        this.deactivateTool();\n    };\n\n    private readonly cancelActiveTool = async (): Promise<void> => {\n        const { tool } = this.state;\n        if (!tool) {\n            return;\n        }\n\n        if (tool.cancel) {\n            await tool.cancel({\n                canvas: this.canvas\n            });\n        }\n        this.deactivateTool();\n    };\n\n    private readonly getToolOptions = (\n        tool: ImageEditorTool\n    ): Partial<ImageEditorPropsPropsOptions> => {\n        const { options } = this.props;\n        if (!options || typeof options !== \"object\") {\n            return {};\n        }\n\n        return options[tool.name as ToolbarTool] || {};\n    };\n\n    public override render(): React.ReactNode {\n        const { src, tools, children } = this.props;\n        const { tool } = this.state;\n        const editor = (\n            <React.Fragment>\n                <Toolbar>\n                    {tools.map(key => {\n                        const tool: ImageEditorTool = toolbar[key];\n                        if (!tool) {\n                            return null;\n                        }\n\n                        return (\n                            <div key={key} className={classNames({ disabled: this.state.tool })}>\n                                {tool.icon({\n                                    activateTool: () => this.activateTool(tool)\n                                })}\n                            </div>\n                        );\n                    })}\n                </Toolbar>\n\n                <ToolOptions>\n                    {tool ? (\n                        <>\n                            {typeof tool.renderForm === \"function\" &&\n                                tool.renderForm({\n                                    options: this.getToolOptions(tool as ImageEditorTool),\n                                    image: this.image as HTMLImageElement,\n                                    canvas: this.canvas\n                                })}\n\n                            <ApplyCancelActions>\n                                <ButtonSecondary\n                                    onClick={() => {\n                                        this.cancelActiveTool();\n                                    }}\n                                >\n                                    Cancel\n                                </ButtonSecondary>\n                                &nbsp;\n                                <ButtonPrimary\n                                    onClick={() => {\n                                        this.applyActiveTool();\n                                    }}\n                                >\n                                    Apply\n                                </ButtonPrimary>\n                            </ApplyCancelActions>\n                        </>\n                    ) : (\n                        <div style={{ textAlign: \"center\" }}>\n                            Select a tool to start working on your image.\n                        </div>\n                    )}\n                </ToolOptions>\n\n                <div style={{ margin: \"0 auto\", textAlign: \"center\" }}>\n                    <canvas\n                        key={src}\n                        id={\"canvas\"}\n                        style={{ maxWidth: 700 }}\n                        ref={this.canvas as React.Ref<any>}\n                    />\n                </div>\n            </React.Fragment>\n        );\n\n        if (typeof children === \"function\") {\n            return children({\n                render: () => editor,\n                // canvas: this.canvas,\n                getCanvasDataUrl: this.getCanvasDataUrl,\n                activeTool: this.state.tool,\n                applyActiveTool: this.applyActiveTool,\n                cancelActiveTool: this.cancelActiveTool\n            });\n        }\n\n        return editor;\n    }\n}\n\nexport { ImageEditor };\n"]}

package/ImageEditor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA","sourcesContent":["export * from \"./ImageEditor\";\n"]}

package/ImageEditor/toolbar/crop.js

@@ -4,7 +4,7 @@ import { IconButton } from "../../Button";
 import { Tooltip } from "../../Tooltip";
 import Cropper from "cropperjs";
 import "cropperjs/dist/cropper.css";
-var cropper = null;
+var cropper = undefined;
 
 var renderForm = function renderForm() {
   return /*#__PURE__*/React.createElement("div", {
@@ -64,7 +64,7 @@ var tool = {
       }
 
       cropper.destroy();
-      cropper = null;
+      cropper = undefined;
     });
   }
 };

package/ImageEditor/toolbar/crop.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["crop.tsx"],"names":["React","ReactComponent","CropIcon","IconButton","Tooltip","Cropper","cropper","undefined","renderForm","textAlign","tool","name","icon","activateTool","onActivate","canvas","options","current","cancel","destroy","apply","Promise","resolve","src","getCroppedCanvas","toDataURL","image","window","Image","ctx","getContext","onload","drawImage","width","height"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,cAAc,IAAIC,QAA3B;AACA,SAASC,UAAT;AACA,SAASC,OAAT;AACA,OAAOC,OAAP,MAAoB,WAApB;AACA,OAAO,4BAAP;AAEA,IAAIC,OAA4B,GAAGC,SAAnC;;AAEA,IAAMC,UAAU,GAAG,SAAbA,UAAa,GAAM;AACrB,sBACI;AAAK,IAAA,KAAK,EAAE;AAAEC,MAAAA,SAAS,EAAE;AAAb;AAAZ,0FADJ;AAKH,CAND;;AAQA,IAAMC,IAAqB,GAAG;AAC1BC,EAAAA,IAAI,EAAE,MADoB;AAE1BC,EAAAA,IAF0B,sBAEH;AAAA,QAAhBC,YAAgB,QAAhBA,YAAgB;AACnB,wBACI,oBAAC,OAAD;AAAS,MAAA,SAAS,EAAE,QAApB;AAA8B,MAAA,OAAO,EAAE;AAAvC,oBACI,oBAAC,UAAD;AAAY,MAAA,IAAI,eAAE,oBAAC,QAAD,OAAlB;AAAgC,MAAA,OAAO,EAAE;AAAA,eAAMA,YAAY,CAAC,MAAD,CAAlB;AAAA;AAAzC,MADJ,CADJ;AAKH,GARyB;AAS1BL,EAAAA,UAAU,EAAVA,UAT0B;AAU1BM,EAAAA,UAAU,EAAE,2BAAyB;AAAA,QAAtBC,MAAsB,SAAtBA,MAAsB;AAAA,QAAdC,OAAc,SAAdA,OAAc;AACjCV,IAAAA,OAAO,GAAG,IAAID,OAAJ,CAAYU,MAAM,CAACE,OAAnB,EAAiDD,OAAjD,CAAV;AACH,GAZyB;AAa1BE,EAAAA,MAAM,EAAE;AAAA,WAAMZ,OAAO,IAAIA,OAAO,CAACa,OAAR,EAAjB;AAAA,GAbkB;AAc1BC,EAAAA,KAAK,EAAE,sBAAgB;AAAA,QAAbL,MAAa,SAAbA,MAAa;AACnB,WAAO,IAAIM,OAAJ,CAAY,UAACC,OAAD,EAAkB;AACjC,UAAI,CAAChB,OAAL,EAAc;AACVgB,QAAAA,OAAO;AACP;AACH;;AAED,UAAML,OAAO,GAAGF,MAAM,CAACE,OAAvB;AACA,UAAMM,GAAG,GAAGjB,OAAO,CAACkB,gBAAR,GAA2BC,SAA3B,EAAZ;;AACA,UAAIR,OAAJ,EAAa;AACT,YAAMS,KAAK,GAAG,IAAIC,MAAM,CAACC,KAAX,EAAd;AACA,YAAMC,GAAG,GAAGZ,OAAO,CAACa,UAAR,CAAmB,IAAnB,CAAZ;;AACAJ,QAAAA,KAAK,CAACK,MAAN,GAAe,YAAM;AACjBF,UAAAA,GAAG,CAACG,SAAJ,CAAcN,KAAd,EAAqB,CAArB,EAAwB,CAAxB;AACAT,UAAAA,OAAO,CAACgB,KAAR,GAAgBP,KAAK,CAACO,KAAtB;AACAhB,UAAAA,OAAO,CAACiB,MAAR,GAAiBR,KAAK,CAACQ,MAAvB;AAEAL,UAAAA,GAAG,CAACG,SAAJ,CAAcN,KAAd,EAAqB,CAArB,EAAwB,CAAxB;AACAJ,UAAAA,OAAO;AACV,SAPD;;AAQAI,QAAAA,KAAK,CAACH,GAAN,GAAYA,GAAZ;AACH;;AAEDjB,MAAAA,OAAO,CAACa,OAAR;AACAb,MAAAA,OAAO,GAAGC,SAAV;AACH,KAxBM,CAAP;AAyBH;AAxCyB,CAA9B;AA2CA,eAAeG,IAAf","sourcesContent":["import React from \"react\";\nimport { ImageEditorTool } from \"./types\";\nimport { ReactComponent as CropIcon } from \"./icons/crop.svg\";\nimport { IconButton } from \"~/Button\";\nimport { Tooltip } from \"~/Tooltip\";\nimport Cropper from \"cropperjs\";\nimport \"cropperjs/dist/cropper.css\";\n\nlet cropper: Cropper | undefined = undefined;\n\nconst renderForm = () => {\n    return (\n        <div style={{ textAlign: \"center\" }}>\n            Click and drag to crop a portion of the image. Hold Shift to persist aspect ratio.\n        </div>\n    );\n};\n\nconst tool: ImageEditorTool = {\n    name: \"crop\",\n    icon({ activateTool }) {\n        return (\n            <Tooltip placement={\"bottom\"} content={\"Crop\"}>\n                <IconButton icon={<CropIcon />} onClick={() => activateTool(\"crop\")} />\n            </Tooltip>\n        );\n    },\n    renderForm,\n    onActivate: ({ canvas, options }) => {\n        cropper = new Cropper(canvas.current as HTMLCanvasElement, options);\n    },\n    cancel: () => cropper && cropper.destroy(),\n    apply: ({ canvas }) => {\n        return new Promise((resolve: any) => {\n            if (!cropper) {\n                resolve();\n                return;\n            }\n\n            const current = canvas.current;\n            const src = cropper.getCroppedCanvas().toDataURL();\n            if (current) {\n                const image = new window.Image();\n                const ctx = current.getContext(\"2d\") as CanvasRenderingContext2D;\n                image.onload = () => {\n                    ctx.drawImage(image, 0, 0);\n                    current.width = image.width;\n                    current.height = image.height;\n\n                    ctx.drawImage(image, 0, 0);\n                    resolve();\n                };\n                image.src = src;\n            }\n\n            cropper.destroy();\n            cropper = undefined;\n        });\n    }\n};\n\nexport default tool;\n"]}

package/ImageEditor/toolbar/filter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["filter.tsx"],"names":["React","ReactComponent","FilterIcon","Slider","IconButton","ButtonDefault","Tooltip","styled","Wrapper","ul","textAlign","li","display","width","padding","sliders","key","label","min","RenderForm","processing","values","canvas","props","state","component","Caman","current","revert","Object","keys","forEach","render","setState","reduce","output","resetFiltersValues","map","value","applyFilters","Component","tool","name","icon","activateTool","renderForm","cancel"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;AACA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,cAAc,IAAIC,UAA3B;AACA,SAASC,MAAT;AAEA,SAASC,UAAT,EAAqBC,aAArB;AACA,SAASC,OAAT;AAEA,OAAOC,MAAP,MAAmB,iBAAnB;AAYA,IAAMC,OAAO,gBAAGD,MAAH,CAAU,KAAV;AAAA;AAAA;AAAA,GAAiB;AAC1BE,EAAAA,EAAE,EAAE;AACAC,IAAAA,SAAS,EAAE,QADX;AAEAC,IAAAA,EAAE,EAAE;AACAC,MAAAA,OAAO,EAAE,cADT;AAEAC,MAAAA,KAAK,EAAE,GAFP;AAGAC,MAAAA,OAAO,EAAE;AAHT;AAFJ,GADsB;AAS1B,cAAY;AACRJ,IAAAA,SAAS,EAAE;AADH;AATc,CAAjB,CAAb;AAcA,IAAMK,OAAO,GAAG,CACZ;AACIC,EAAAA,GAAG,EAAE,YADT;AAEIC,EAAAA,KAAK,EAAE,YAFX;AAGIC,EAAAA,GAAG,EAAE,CAAC;AAHV,CADY,EAMZ;AACIF,EAAAA,GAAG,EAAE,UADT;AAEIC,EAAAA,KAAK,EAAE,UAFX;AAGIC,EAAAA,GAAG,EAAE,CAAC;AAHV,CANY,EAWZ;AACIF,EAAAA,GAAG,EAAE,KADT;AAEIC,EAAAA,KAAK,EAAE,KAFX;AAGIC,EAAAA,GAAG,EAAE,CAAC;AAHV,CAXY,EAgBZ;AACIF,EAAAA,GAAG,EAAE,OADT;AAEIC,EAAAA,KAAK,EAAE;AAFX,CAhBY,EAoBZ;AACID,EAAAA,GAAG,EAAE,MADT;AAEIC,EAAAA,KAAK,EAAE;AAFX,CApBY,EAwBZ;AACID,EAAAA,GAAG,EAAE,WADT;AAEIC,EAAAA,KAAK,EAAE;AAFX,CAxBY,EA4BZ;AACID,EAAAA,GAAG,EAAE,UADT;AAEIC,EAAAA,KAAK,EAAE,UAFX;AAGIC,EAAAA,GAAG,EAAE,CAAC;AAHV,CA5BY,EAiCZ;AACIF,EAAAA,GAAG,EAAE,YADT;AAEIC,EAAAA,KAAK,EAAE,YAFX;AAGIC,EAAAA,GAAG,EAAE,CAAC;AAHV,CAjCY,EAsCZ;AACIF,EAAAA,GAAG,EAAE,UADT;AAEIC,EAAAA,KAAK,EAAE,UAFX;AAGIC,EAAAA,GAAG,EAAE,CAAC;AAHV,CAtCY,EA2CZ;AACIF,EAAAA,GAAG,EAAE,OADT;AAEIC,EAAAA,KAAK,EAAE;AAFX,CA3CY,EA+CZ;AACID,EAAAA,GAAG,EAAE,OADT;AAEIC,EAAAA,KAAK,EAAE;AAFX,CA/CY,EAmDZ;AACID,EAAAA,GAAG,EAAE,SADT;AAEIC,EAAAA,KAAK,EAAE;AAFX,CAnDY,CAAhB;;IAyDME,U;;;;;;;;;;;;;;;;4DACuC;AACrCC,MAAAA,UAAU,EAAE,KADyB;AAErCC,MAAAA,MAAM,EAAE;AAF6B,K;;mEAST,UAAS,YAAM;AAC3C,UAAQC,MAAR,GAAmB,MAAKC,KAAxB,CAAQD,MAAR;AACA,UAAQD,MAAR,GAAmB,MAAKG,KAAxB,CAAQH,MAAR,CAF2C,CAG3C;;AACA,UAAMI,SAAS,gCAAf,CAJ2C,CAM3C;;;AACAC,MAAAA,KAAK,CAACJ,MAAM,CAACK,OAAR,EAAiB,YAAY;AAAA;;AAC9B;AACA,aAAKC,MAAL,CAAY,KAAZ;AACAC,QAAAA,MAAM,CAACC,IAAP,CAAYT,MAAZ,EAAoBU,OAApB,EACI;AACA,kBAAAf,GAAG;AAAA,iBAAIK,MAAM,CAACL,GAAD,CAAN,KAAgB,CAAhB,IAAqB,MAAI,CAACA,GAAD,CAAzB,IAAkC,MAAI,CAACA,GAAD,CAAJ,CAAUK,MAAM,CAACL,GAAD,CAAhB,CAAtC;AAAA,SAFP,EAH8B,CAO9B;;AACA,aAAKgB,MAAL;AACAP,QAAAA,SAAS,CAACQ,QAAV,CAAmB;AAAEb,UAAAA,UAAU,EAAE;AAAd,SAAnB;AACH,OAVI,CAAL;AAWH,KAlB+B,EAkB7B,GAlB6B,C;;yEAoBM,YAAM;AACxC,YAAKa,QAAL,CAAc,UAAAT,KAAK,EAAI;AACnBT,QAAAA,OAAO,CAACmB,MAAR,CAAe,UAACC,MAAD,EAASR,OAAT,EAAqB;AAChCH,UAAAA,KAAK,CAACH,MAAN,CAAaM,OAAO,CAACX,GAArB,IAA4B,CAA5B;AACA,iBAAOmB,MAAP;AACH,SAHD,EAGG,EAHH;AAKA,eAAOX,KAAP;AACH,OAPD;AAQH,K;;;;;;;WAjCD,6BAAoC;AAChC,WAAKY,kBAAL;AACH;;;WAiCD,kBAAyB;AAAA;;AACrB,0BACI,oBAAC,OAAD,qBACI,gCACKrB,OAAO,CAACsB,GAAR,CAAY,UAAAd,KAAK;AAAA,4BACd;AAAI,UAAA,GAAG,EAAEA,KAAK,CAACP;AAAf,wBACI,oBAAC,MAAD;AACI,UAAA,KAAK,EAAE,MAAI,CAACQ,KAAL,CAAWH,MAAX,CAAkBE,KAAK,CAACP,GAAxB,CADX;AAEI,UAAA,GAAG,EAAE,CAFT;AAGI,UAAA,GAAG,EAAE,GAHT;AAII,UAAA,QAAQ,EAAE,MAAI,CAACQ,KAAL,CAAWJ,UAJzB;AAKI,UAAA,OAAO,EAAE,iBAACkB,KAAD,EAAmB;AACxB,YAAA,MAAI,CAACL,QAAL,CAAc,UAAAT,KAAK,EAAI;AACnB,kBAAMH,MAAM,qBAAQG,KAAK,CAACH,MAAd,CAAZ;;AACAA,cAAAA,MAAM,CAACE,KAAK,CAACP,GAAP,CAAN,GAAoBsB,KAApB;AAEA,qDAAYd,KAAZ;AAAmBJ,gBAAAA,UAAU,EAAE,IAA/B;AAAqCC,gBAAAA,MAAM,EAANA;AAArC;AACH,aALD,EAKG,MAAI,CAACkB,YALR;AAMH;AAZL,WAaQhB,KAbR,EADJ,CADc;AAAA,OAAjB,CADL,CADJ,eAuBI;AAAK,QAAA,KAAK,EAAE;AAAEb,UAAAA,SAAS,EAAE;AAAb;AAAZ,sBACI,oBAAC,aAAD;AACI,QAAA,OAAO,EAAE,mBAAM;AACX,UAAA,MAAI,CAACuB,QAAL,CAAc;AAAEb,YAAAA,UAAU,EAAE;AAAd,WAAd,EAAoC,YAAM;AACtC,YAAA,MAAI,CAACgB,kBAAL;;AACA,YAAA,MAAI,CAACG,YAAL;;AACA,YAAA,MAAI,CAACN,QAAL,CAAc;AAAEb,cAAAA,UAAU,EAAE;AAAd,aAAd;AACH,WAJD;AAKH;AAPL,yBADJ,CAvBJ,CADJ;AAuCH;;;;EAjFoBpB,KAAK,CAACwC,S;;AAoF/B,IAAMC,IAAqB,GAAG;AAC1BC,EAAAA,IAAI,EAAE,QADoB;AAE1BC,EAAAA,IAF0B,sBAEH;AAAA,QAAhBC,YAAgB,QAAhBA,YAAgB;AACnB,wBACI,oBAAC,OAAD;AAAS,MAAA,SAAS,EAAE,QAApB;AAA8B,MAAA,OAAO,EAAE;AAAvC,oBACI,oBAAC,UAAD;AAAY,MAAA,IAAI,eAAE,oBAAC,UAAD,OAAlB;AAAkC,MAAA,OAAO,EAAE;AAAA,eAAMA,YAAY,CAAC,QAAD,CAAlB;AAAA;AAA3C,MADJ,CADJ;AAKH,GARyB;AAS1BC,EAAAA,UAT0B,sBASftB,KATe,EASR;AACd,wBAAO,oBAAC,UAAD,EAAgBA,KAAhB,CAAP;AACH,GAXyB;AAY1BuB,EAAAA,MAAM,EAAE,uBAAgB;AAAA,QAAbxB,MAAa,SAAbA,MAAa;AACpB;AACAI,IAAAA,KAAK,CAACJ,MAAM,CAACK,OAAR,EAAiB,YAAY;AAC9B;AACA,WAAKC,MAAL,CAAY,KAAZ,EAF8B,CAG9B;;AACA,WAAKI,MAAL;AACH,KALI,CAAL;AAMH;AApByB,CAA9B;AAuBA,eAAeS,IAAf","sourcesContent":["/**\n * When using Caman, we added @ts-ignore because it does not exist in packages, but it is loaded in packages/ui/src/ImageEditor/ImageEditor.tsx:38.\n * TODO: use some other library to edit images\n */\nimport React from \"react\";\nimport { ReactComponent as FilterIcon } from \"./icons/filter.svg\";\nimport { Slider } from \"~/Slider\";\nimport { ImageEditorTool } from \"./types\";\nimport { IconButton, ButtonDefault } from \"~/Button\";\nimport { Tooltip } from \"~/Tooltip\";\nimport { debounce } from \"lodash\";\nimport styled from \"@emotion/styled\";\n\ninterface RenderFormState {\n    values: Record<string, any>;\n    processing: boolean;\n}\n\ninterface RenderFormProps {\n    canvas: any;\n    renderApplyCancel?: Function;\n}\n\nconst Wrapper = styled(\"div\")({\n    ul: {\n        textAlign: \"center\",\n        li: {\n            display: \"inline-block\",\n            width: 180,\n            padding: 10\n        }\n    },\n    \".buttons\": {\n        textAlign: \"center\"\n    }\n});\n\nconst sliders = [\n    {\n        key: \"brightness\",\n        label: \"Brightness\",\n        min: -100\n    },\n    {\n        key: \"vibrance\",\n        label: \"Vibrance\",\n        min: -100\n    },\n    {\n        key: \"hue\",\n        label: \"Hue\",\n        min: -100\n    },\n    {\n        key: \"gamma\",\n        label: \"Gamma\"\n    },\n    {\n        key: \"clip\",\n        label: \"Clip\"\n    },\n    {\n        key: \"stackBlur\",\n        label: \"Blur\"\n    },\n    {\n        key: \"contrast\",\n        label: \"Contrast\",\n        min: -100\n    },\n    {\n        key: \"saturation\",\n        label: \"Saturation\",\n        min: -100\n    },\n    {\n        key: \"exposure\",\n        label: \"Exposure\",\n        min: -100\n    },\n    {\n        key: \"sepia\",\n        label: \"Sepia\"\n    },\n    {\n        key: \"noise\",\n        label: \"Noise\"\n    },\n    {\n        key: \"sharpen\",\n        label: \"Sharpen\"\n    }\n];\n\nclass RenderForm extends React.Component<RenderFormProps, RenderFormState> {\n    public override state: RenderFormState = {\n        processing: false,\n        values: {}\n    };\n\n    public override componentDidMount() {\n        this.resetFiltersValues();\n    }\n\n    private readonly applyFilters = debounce(() => {\n        const { canvas } = this.props;\n        const { values } = this.state;\n        // eslint-disable-next-line @typescript-eslint/no-this-alias\n        const component = this;\n\n        // @ts-ignore\n        Caman(canvas.current, function () {\n            // @ts-ignore\n            this.revert(false);\n            Object.keys(values).forEach(\n                // @ts-ignore\n                key => values[key] !== 0 && this[key] && this[key](values[key])\n            );\n            // @ts-ignore\n            this.render();\n            component.setState({ processing: false });\n        });\n    }, 200);\n\n    private readonly resetFiltersValues = () => {\n        this.setState(state => {\n            sliders.reduce((output, current) => {\n                state.values[current.key] = 0;\n                return output;\n            }, {});\n\n            return state;\n        });\n    };\n\n    public override render() {\n        return (\n            <Wrapper>\n                <ul>\n                    {sliders.map(props => (\n                        <li key={props.key}>\n                            <Slider\n                                value={this.state.values[props.key]}\n                                min={0}\n                                max={100}\n                                disabled={this.state.processing}\n                                onInput={(value: string) => {\n                                    this.setState(state => {\n                                        const values = { ...state.values };\n                                        values[props.key] = value;\n\n                                        return { ...state, processing: true, values };\n                                    }, this.applyFilters);\n                                }}\n                                {...props}\n                            />\n                        </li>\n                    ))}\n                </ul>\n\n                <div style={{ textAlign: \"center\" }}>\n                    <ButtonDefault\n                        onClick={() => {\n                            this.setState({ processing: true }, () => {\n                                this.resetFiltersValues();\n                                this.applyFilters();\n                                this.setState({ processing: false });\n                            });\n                        }}\n                    >\n                        Reset filters\n                    </ButtonDefault>\n                </div>\n            </Wrapper>\n        );\n    }\n}\n\nconst tool: ImageEditorTool = {\n    name: \"filter\",\n    icon({ activateTool }) {\n        return (\n            <Tooltip placement={\"bottom\"} content={\"Filter\"}>\n                <IconButton icon={<FilterIcon />} onClick={() => activateTool(\"filter\")} />\n            </Tooltip>\n        );\n    },\n    renderForm(props) {\n        return <RenderForm {...props} />;\n    },\n    cancel: ({ canvas }) => {\n        // @ts-ignore\n        Caman(canvas.current, function () {\n            // @ts-ignore\n            this.revert(false);\n            // @ts-ignore\n            this.render();\n        });\n    }\n};\n\nexport default tool;\n"]}

package/ImageEditor/toolbar/flip.js

@@ -4,7 +4,7 @@ import Cropper from "cropperjs";
 import "cropperjs/dist/cropper.css";
 import { IconButton, ButtonDefault } from "../../Button";
 import { Tooltip } from "../../Tooltip";
-var cropper = null;
+var cropper;
 var flipped = {
   x: 1,
   y: 1

package/ImageEditor/toolbar/flip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["flip.tsx"],"names":["React","ReactComponent","FlipIcon","Cropper","IconButton","ButtonDefault","Tooltip","cropper","flipped","x","y","renderForm","textAlign","scaleX","scaleY","tool","name","icon","activateTool","cancel","destroy","onActivate","canvas","current","background","modal","guides","dragMode","highlight","autoCrop","apply","Promise","resolve","src","getCroppedCanvas","toDataURL","image","window","Image","ctx","getContext","onload","drawImage","width","height"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport { ImageEditorTool } from \"./types\";\nimport { ReactComponent as FlipIcon } from \"./icons/flip.svg\";\nimport Cropper from \"cropperjs\";\nimport \"cropperjs/dist/cropper.css\";\n\nimport { IconButton, ButtonDefault } from \"../../Button\";\nimport { Tooltip } from \"~/Tooltip\";\n\nlet cropper: Cropper;\n\nconst flipped = { x: 1, y: 1 };\n\nconst renderForm = () => {\n    return (\n        <div style={{ textAlign: \"center\" }}>\n            <ButtonDefault\n                onClick={() => {\n                    if (!cropper) {\n                        return;\n                    }\n\n                    flipped.x = flipped.x === 1 ? -1 : 1;\n                    cropper.scaleX(flipped.x);\n                }}\n            >\n                FlipX\n            </ButtonDefault>\n            <ButtonDefault\n                onClick={() => {\n                    if (!cropper) {\n                        return;\n                    }\n\n                    flipped.y = flipped.y === 1 ? -1 : 1;\n                    cropper.scaleY(flipped.y);\n                }}\n            >\n                FlipY\n            </ButtonDefault>\n        </div>\n    );\n};\n\nconst tool: ImageEditorTool = {\n    name: \"flip\",\n    icon({ activateTool }) {\n        return (\n            <Tooltip placement={\"bottom\"} content={\"Flip\"}>\n                <IconButton icon={<FlipIcon />} onClick={() => activateTool(\"flip\")} />\n            </Tooltip>\n        );\n    },\n    renderForm,\n    cancel: () => cropper && cropper.destroy(),\n    onActivate: ({ canvas }) => {\n        cropper = new Cropper(canvas.current as HTMLCanvasElement, {\n            background: false,\n            modal: false,\n            guides: false,\n            dragMode: \"none\",\n            highlight: false,\n            autoCrop: false\n        });\n    },\n    apply: ({ canvas }) => {\n        return new Promise((resolve: any) => {\n            if (!cropper) {\n                resolve();\n                return;\n            }\n\n            const current = canvas.current;\n            const src = cropper.getCroppedCanvas().toDataURL();\n            if (current) {\n                const image = new window.Image();\n                const ctx = current.getContext(\"2d\") as CanvasRenderingContext2D;\n                image.onload = () => {\n                    ctx.drawImage(image, 0, 0);\n                    current.width = image.width;\n                    current.height = image.height;\n\n                    ctx.drawImage(image, 0, 0);\n                    resolve();\n                };\n                image.src = src;\n            }\n\n            cropper.destroy();\n        });\n    }\n};\n\nexport default tool;\n"]}

package/ImageEditor/toolbar/icons/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":["ReactComponent","CropIcon","DrawIcon","FilterIcon","FlipIcon","RedoIcon","RotateLeftIcon","RotateRightIcon","UndoIcon"],"mappings":"AAAA,SAASA,cAAc,IAAIC,QAA3B;AACA,SAASD,cAAc,IAAIE,QAA3B;AACA,SAASF,cAAc,IAAIG,UAA3B;AACA,SAASH,cAAc,IAAII,QAA3B;AACA,SAASJ,cAAc,IAAIK,QAA3B;AACA,SAASL,cAAc,IAAIM,cAA3B;AACA,SAASN,cAAc,IAAIO,eAA3B;AACA,SAASP,cAAc,IAAIQ,QAA3B","sourcesContent":["export { ReactComponent as CropIcon } from \"./crop.svg\";\nexport { ReactComponent as DrawIcon } from \"./draw.svg\";\nexport { ReactComponent as FilterIcon } from \"./filter.svg\";\nexport { ReactComponent as FlipIcon } from \"./flip.svg\";\nexport { ReactComponent as RedoIcon } from \"./redo.svg\";\nexport { ReactComponent as RotateLeftIcon } from \"./rotateLeft.svg\";\nexport { ReactComponent as RotateRightIcon } from \"./rotateRight.svg\";\nexport { ReactComponent as UndoIcon } from \"./undo.svg\";\n"]}

package/ImageEditor/toolbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":["default","crop","flip","filter","rotate"],"mappings":"AAAA,SAASA,OAAO,IAAIC,IAApB;AACA,SAASD,OAAO,IAAIE,IAApB;AACA,SAASF,OAAO,IAAIG,MAApB;AACA,SAASH,OAAO,IAAII,MAApB","sourcesContent":["export { default as crop } from \"./crop\";\nexport { default as flip } from \"./flip\";\nexport { default as filter } from \"./filter\";\nexport { default as rotate } from \"./rotate\";\n"]}

package/ImageEditor/toolbar/rotate.js

@@ -13,7 +13,7 @@ import { Tooltip } from "../../Tooltip";
 import { IconButton } from "../../Button";
 import Cropper from "cropperjs";
 import "cropperjs/dist/cropper.css";
-var cropper = null;
+var cropper;
 
 var RenderForm = /*#__PURE__*/function (_React$Component) {
   _inherits(RenderForm, _React$Component);
@@ -102,6 +102,10 @@ var tool = {
   },
   onActivate: function onActivate(_ref3) {
     var canvas = _ref3.canvas;
+
+    /**
+     * We can safely cast canvas.current as HTMLCanvasElement
+     */
     cropper = new Cropper(canvas.current, {
       background: false,
       modal: false,

package/ImageEditor/toolbar/rotate.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["rotate.tsx"],"names":["React","ReactComponent","RotateRight","Slider","Tooltip","IconButton","Cropper","cropper","RenderForm","rangeInput","width","margin","state","value","setState","rotateTo","parseInt","Component","tool","name","icon","activateTool","renderForm","props","onActivate","canvas","current","background","modal","guides","dragMode","highlight","autoCrop","cancel","destroy","apply","Promise","resolve","src","getCroppedCanvas","toDataURL","image","window","Image","ctx","getContext","onload","drawImage","height"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport { ReactComponent as RotateRight } from \"./icons/rotateRight.svg\";\nimport { ImageEditorTool } from \"./types\";\nimport { Slider } from \"../../Slider\";\nimport { Tooltip } from \"~/Tooltip\";\nimport { IconButton } from \"~/Button\";\n\nimport Cropper from \"cropperjs\";\nimport \"cropperjs/dist/cropper.css\";\n\nlet cropper: Cropper;\n\nclass RenderForm extends React.Component<any, any> {\n    public override state = {\n        rangeInput: 0\n    };\n\n    public override render() {\n        return (\n            <div style={{ width: \"500px\", margin: \"0 auto\" }}>\n                <Slider\n                    label={\"Range Input\"}\n                    value={this.state.rangeInput}\n                    min={0}\n                    max={360}\n                    step={10}\n                    discrete={true}\n                    displayMarkers={true}\n                    onInput={(value: string) => {\n                        this.setState({ rangeInput: value }, async () => {\n                            if (cropper) {\n                                cropper.rotateTo(parseInt(value, 10));\n                            }\n                        });\n                    }}\n                />\n            </div>\n        );\n    }\n}\n\nconst tool: ImageEditorTool = {\n    name: \"rotate\",\n    icon({ activateTool }) {\n        return (\n            <Tooltip placement={\"bottom\"} content={\"Rotate\"}>\n                <IconButton icon={<RotateRight />} onClick={() => activateTool(\"rotate\")} />\n            </Tooltip>\n        );\n    },\n    renderForm(props) {\n        return <RenderForm {...props} />;\n    },\n    onActivate: ({ canvas }) => {\n        /**\n         * We can safely cast canvas.current as HTMLCanvasElement\n         */\n        cropper = new Cropper(canvas.current as HTMLCanvasElement, {\n            background: false,\n            modal: false,\n            guides: false,\n            dragMode: \"none\",\n            highlight: false,\n            autoCrop: false\n        });\n    },\n    cancel: () => cropper && cropper.destroy(),\n    apply: ({ canvas }) => {\n        return new Promise((resolve: any) => {\n            if (!cropper) {\n                resolve();\n                return;\n            }\n\n            const current = canvas.current;\n            const src = cropper.getCroppedCanvas().toDataURL();\n            if (current) {\n                const image = new window.Image();\n                const ctx = current.getContext(\"2d\") as CanvasRenderingContext2D;\n                image.onload = () => {\n                    ctx.drawImage(image, 0, 0);\n                    current.width = image.width;\n                    current.height = image.height;\n\n                    ctx.drawImage(image, 0, 0);\n                };\n                image.src = src;\n                resolve();\n            }\n\n            cropper.destroy();\n        });\n    }\n};\n\nexport default tool;\n"]}

package/ImageEditor/toolbar/types.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 export declare type ToolbarTool = "crop" | "flip" | "rotate" | "filter";
 interface RenderFormParams {
     canvas: React.RefObject<HTMLCanvasElement>;

package/ImageEditor/toolbar/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/ImageUpload/Image.d.ts

@@ -1,7 +1,7 @@
-import * as React from "react";
-declare type Props = {
-    uploadImage: Function;
-    removeImage?: Function;
+import React from "react";
+interface ImageProps {
+    uploadImage: () => void;
+    removeImage?: (value: string | null) => void;
     editImage?: Function;
     value?: any;
     disabled?: boolean;
@@ -11,8 +11,8 @@ declare type Props = {
     renderImagePreview?: (props: any) => React.ReactElement<any>;
     round?: boolean;
     containerStyle?: React.CSSProperties;
-};
-declare class Image extends React.Component<Props> {
+}
+declare class Image extends React.Component<ImageProps> {
     static defaultProps: {
         placeholder: string;
         containerStyle: {

package/ImageUpload/Image.js

@@ -3,7 +3,7 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _createSuper from "@babel/runtime/helpers/createSuper";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import * as React from "react";
+import React from "react";
 import classNames from "classnames";
 import { ReactComponent as AddImageIcon } from "./icons/round-add_photo_alternate-24px.svg";
 import { ReactComponent as RemoveImageIcon } from "./icons/round-close-24px.svg";

package/ImageUpload/Image.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Image.tsx"],"names":["React","classNames","ReactComponent","AddImageIcon","RemoveImageIcon","EditImageIcon","Typography","CircularProgress","AddImageIconWrapper","AddImageWrapper","AddImageWrapperRound","EditImage","ImagePreviewWrapper","RemoveImage","Image","props","uploadImage","round","ImageWrapper","placeholder","removeImage","editImage","value","renderImagePreview","imagePreviewProps","src","style","onClick","width","height","imagePreview","disabled","containerStyle","loading","renderImg","renderBlank","Component"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport classNames from \"classnames\";\nimport { ReactComponent as AddImageIcon } from \"./icons/round-add_photo_alternate-24px.svg\";\nimport { ReactComponent as RemoveImageIcon } from \"./icons/round-close-24px.svg\";\nimport { ReactComponent as EditImageIcon } from \"./icons/round-edit-24px.svg\";\nimport { Typography } from \"../Typography\";\nimport { CircularProgress } from \"../Progress\";\nimport {\n    AddImageIconWrapper,\n    AddImageWrapper,\n    AddImageWrapperRound,\n    EditImage,\n    ImagePreviewWrapper,\n    RemoveImage\n} from \"./styled\";\n\ninterface ImageProps {\n    uploadImage: () => void;\n    removeImage?: (value: string | null) => void;\n    editImage?: Function;\n    value?: any;\n    disabled?: boolean;\n    loading?: boolean;\n    placeholder: string;\n    style?: React.CSSProperties;\n    renderImagePreview?: (props: any) => React.ReactElement<any>;\n    round?: boolean;\n    containerStyle?: React.CSSProperties;\n}\n\nclass Image extends React.Component<ImageProps> {\n    static defaultProps = {\n        placeholder: \"Select an image\",\n        containerStyle: { height: \"100%\" }\n    };\n\n    renderBlank() {\n        const { uploadImage, round } = this.props;\n\n        const ImageWrapper = round ? AddImageWrapperRound : AddImageWrapper;\n\n        return (\n            <ImageWrapper\n                data-role={\"select-image\"}\n                onClick={() => {\n                    uploadImage();\n                }}\n            >\n                <AddImageIconWrapper>\n                    <AddImageIcon />\n                    <Typography use={\"caption\"}>{this.props.placeholder}</Typography>\n                </AddImageIconWrapper>\n            </ImageWrapper>\n        );\n    }\n\n    renderImg() {\n        const { removeImage, editImage, uploadImage, value, renderImagePreview } = this.props;\n\n        const imagePreviewProps: any = {\n            src: value ? value.src : null,\n            style: this.props.style ? this.props.style : null,\n            onClick: () => uploadImage()\n        };\n\n        if (!imagePreviewProps.style) {\n            imagePreviewProps.style = {};\n        }\n\n        if (!imagePreviewProps.style.width && !imagePreviewProps.style.height) {\n            imagePreviewProps.style.width = \"100%\";\n            imagePreviewProps.style.height = \"100%\";\n        }\n\n        let imagePreview = null;\n        if (typeof renderImagePreview === \"function\") {\n            imagePreview = renderImagePreview(imagePreviewProps);\n        } else {\n            imagePreview = <img {...imagePreviewProps} />;\n        }\n\n        return (\n            <ImagePreviewWrapper>\n                {imagePreview}\n\n                {typeof removeImage === \"function\" && (\n                    <RemoveImage onClick={() => removeImage(null)}>\n                        <RemoveImageIcon />\n                    </RemoveImage>\n                )}\n\n                {typeof editImage === \"function\" && (\n                    <EditImage onClick={() => editImage(value)}>\n                        <EditImageIcon />\n                    </EditImage>\n                )}\n\n                <AddImageWrapper\n                    data-role={\"select-image\"}\n                    onClick={() => {\n                        uploadImage();\n                    }}\n                >\n                    <AddImageIconWrapper>\n                        <AddImageIcon />\n                        <Typography use={\"caption\"}>{this.props.placeholder}</Typography>\n                    </AddImageIconWrapper>\n                </AddImageWrapper>\n            </ImagePreviewWrapper>\n        );\n    }\n\n    public override render() {\n        const { value, disabled, containerStyle } = this.props;\n        return (\n            <div className={classNames({ disabled })} style={containerStyle}>\n                {this.props.loading && <CircularProgress />}\n                {value && value.src ? this.renderImg() : this.renderBlank()}\n            </div>\n        );\n    }\n}\n\nexport default Image;\n"]}

package/ImageUpload/ImageEditorDialog.d.ts

@@ -1,7 +1,7 @@
-import * as React from "react";
+import React from "react";
 import { ImageEditor } from "../ImageEditor";
 import { DialogOnClose } from "../Dialog";
-interface Props {
+interface ImageEditorDialogProps {
     dialogZIndex?: number;
     onClose?: DialogOnClose;
     open?: boolean;
@@ -14,9 +14,10 @@ interface Props {
     onAccept: (src: string) => void;
     "data-testid"?: string;
 }
-declare class ImageEditorDialog extends React.Component<Props, {
+interface ImageEditorDialogState {
     imageProcessing: boolean;
-}> {
+}
+declare class ImageEditorDialog extends React.Component<ImageEditorDialogProps, ImageEditorDialogState> {
     imageEditor: React.RefObject<ImageEditor>;
     render(): JSX.Element;
 }

package/ImageUpload/ImageEditorDialog.js

@@ -6,7 +6,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _createSuper from "@babel/runtime/helpers/createSuper";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["src", "options", "onAccept", "open", "dialogZIndex"];
-import * as React from "react";
+import React from "react";
 import { ImageEditor } from "../ImageEditor";
 import { Tooltip } from "../Tooltip";
 import { css } from "emotion";
@@ -81,7 +81,12 @@ var ImageEditorDialog = /*#__PURE__*/function (_React$Component) {
           disabled: true
         }, "Save")) : /*#__PURE__*/React.createElement(DialogAccept, {
           onClick: function onClick() {
-            return onAccept(_this2.imageEditor.current.getCanvasDataUrl());
+            var url = _this2.imageEditor.current ? _this2.imageEditor.current.getCanvasDataUrl() : "";
+            /**
+             * We are certain that ref exists.
+             */
+
+            onAccept(url);
           }
         }, "Save")));
       }));

package/ImageUpload/ImageEditorDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ImageEditorDialog.tsx"],"names":["React","ImageEditor","Tooltip","css","Dialog","DialogAccept","DialogCancel","DialogActions","DialogContent","imageEditorDialog","width","height","maxWidth","maxHeight","paddingTop","ImageEditorDialog","createRef","props","src","options","onAccept","open","dialogZIndex","dialogProps","zIndex","imageEditor","render","activeTool","url","current","getCanvasDataUrl","Component"],"mappings":";;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,WAAT;AACA,SAASC,OAAT;AACA,SAASC,GAAT,QAAoB,SAApB;AACA,SACIC,MADJ,EAEIC,YAFJ,EAGIC,YAHJ,EAIIC,aAJJ,EAKIC,aALJ;AA6BA,IAAMC,iBAAiB,gBAAGN,GAAG,CAAC;AAC1BO,EAAAA,KAAK,EAAE,OADmB;AAE1BC,EAAAA,MAAM,EAAE,OAFkB;AAG1B,0BAAwB;AACpBC,IAAAA,QAAQ,EAAE,iBADU;AAEpBC,IAAAA,SAAS,EAAE,iBAFS;AAGpB,kCAA8B;AAC1BD,MAAAA,QAAQ,EAAE,iBADgB;AAE1BC,MAAAA,SAAS,EAAE,iBAFe;AAG1BH,MAAAA,KAAK,EAAE,OAHmB;AAI1BC,MAAAA,MAAM,EAAE,OAJkB;AAK1BG,MAAAA,UAAU,EAAE;AALc;AAHV;AAHE,CAAD,6BAA7B;;IAgBMC,iB;;;;;;;;;;;;;;;;+EACmBf,KAAK,CAACgB,SAAN,E;;;;;;;WAErB,kBAAyB;AAAA;;AACrB,wBAAuE,KAAKC,KAA5E;AAAA,UAAQC,GAAR,eAAQA,GAAR;AAAA,UAAaC,OAAb,eAAaA,OAAb;AAAA,UAAsBC,QAAtB,eAAsBA,QAAtB;AAAA,UAAgCC,IAAhC,eAAgCA,IAAhC;AAAA,UAAsCC,YAAtC,eAAsCA,YAAtC;AAAA,UAAuDC,WAAvD;;AAEA,0BACI,oBAAC,MAAD;AACI,QAAA,SAAS,EAAEd,iBADf;AAEI,QAAA,KAAK,EAAE;AAAEe,UAAAA,MAAM,EAAEF;AAAV,SAFX;AAGI,QAAA,IAAI,EAAED;AAHV,SAIQE,WAJR,GAMKF,IAAI,iBACD,oBAAC,WAAD;AAAa,QAAA,GAAG,EAAE,KAAKI,WAAvB;AAAoC,QAAA,GAAG,EAAEP,GAAzC;AAA8C,QAAA,OAAO,EAAEC;AAAvD,SACK;AAAA,YAAGO,MAAH,QAAGA,MAAH;AAAA,YAAWC,UAAX,QAAWA,UAAX;AAAA,4BACG,uDACI,oBAAC,aAAD,QAAgBD,MAAM,EAAtB,CADJ,eAEI,oBAAC,aAAD,qBACI,oBAAC,YAAD,iBADJ,EAEKC,UAAU,gBACP,oBAAC,OAAD;AACI,UAAA,OAAO,EAAE,qCADb;AAEI,UAAA,SAAS,EAAE;AAFf,wBAII,oBAAC,YAAD;AAAc,UAAA,QAAQ;AAAtB,kBAJJ,CADO,gBAQP,oBAAC,YAAD;AACI,UAAA,OAAO,EAAE,mBAAM;AACX,gBAAMC,GAAG,GAAG,MAAI,CAACH,WAAL,CAAiBI,OAAjB,GACN,MAAI,CAACJ,WAAL,CAAiBI,OAAjB,CAAyBC,gBAAzB,EADM,GAEN,EAFN;AAGA;AAChD;AACA;;AACgDV,YAAAA,QAAQ,CAACQ,GAAD,CAAR;AACH;AATL,kBAVR,CAFJ,CADH;AAAA,OADL,CAPR,CADJ;AA2CH;;;;EAjD2B5B,KAAK,CAAC+B,S;;AAmDtC,eAAehB,iBAAf","sourcesContent":["import React from \"react\";\nimport { ImageEditor } from \"~/ImageEditor\";\nimport { Tooltip } from \"~/Tooltip\";\nimport { css } from \"emotion\";\nimport {\n    Dialog,\n    DialogAccept,\n    DialogCancel,\n    DialogActions,\n    DialogContent,\n    DialogOnClose\n} from \"../Dialog\";\n\ninterface ImageEditorDialogProps {\n    dialogZIndex?: number;\n    onClose?: DialogOnClose;\n    open?: boolean;\n    /**\n     * We would need to drill down a lot to give correct options.\n     * TODO: figure out some other way.\n     */\n    options?: any;\n    src?: string;\n    onAccept: (src: string) => void;\n\n    // For testing purposes.\n    \"data-testid\"?: string;\n}\n\ninterface ImageEditorDialogState {\n    imageProcessing: boolean;\n}\n\nconst imageEditorDialog = css({\n    width: \"100vw\",\n    height: \"100vh\",\n    \".mdc-dialog__surface\": {\n        maxWidth: \"100% !important\",\n        maxHeight: \"100% !important\",\n        \".webiny-ui-dialog__content\": {\n            maxWidth: \"100% !important\",\n            maxHeight: \"100% !important\",\n            width: \"100vw\",\n            height: \"100vh\",\n            paddingTop: \"0 !important\"\n        }\n    }\n});\n\nclass ImageEditorDialog extends React.Component<ImageEditorDialogProps, ImageEditorDialogState> {\n    public imageEditor = React.createRef<ImageEditor>();\n\n    public override render() {\n        const { src, options, onAccept, open, dialogZIndex, ...dialogProps } = this.props;\n\n        return (\n            <Dialog\n                className={imageEditorDialog}\n                style={{ zIndex: dialogZIndex }}\n                open={open}\n                {...dialogProps}\n            >\n                {open && (\n                    <ImageEditor ref={this.imageEditor} src={src} options={options}>\n                        {({ render, activeTool }) => (\n                            <>\n                                <DialogContent>{render()}</DialogContent>\n                                <DialogActions>\n                                    <DialogCancel>Cancel</DialogCancel>\n                                    {activeTool ? (\n                                        <Tooltip\n                                            content={\"Please close currently active tool.\"}\n                                            placement={\"top\"}\n                                        >\n                                            <DialogAccept disabled>Save</DialogAccept>\n                                        </Tooltip>\n                                    ) : (\n                                        <DialogAccept\n                                            onClick={() => {\n                                                const url = this.imageEditor.current\n                                                    ? this.imageEditor.current.getCanvasDataUrl()\n                                                    : \"\";\n                                                /**\n                                                 * We are certain that ref exists.\n                                                 */\n                                                onAccept(url);\n                                            }}\n                                        >\n                                            Save\n                                        </DialogAccept>\n                                    )}\n                                </DialogActions>\n                            </>\n                        )}\n                    </ImageEditor>\n                )}\n            </Dialog>\n        );\n    }\n}\nexport default ImageEditorDialog;\n"]}

package/ImageUpload/MultiImageUpload.d.ts

@@ -1,7 +1,7 @@
-import * as React from "react";
+import React from "react";
 import { SelectedFile, FileError } from "react-butterfiles";
 import { FormComponentProps } from "../types";
-interface Props extends FormComponentProps {
+interface MultiImageUploadProps extends FormComponentProps {
     label?: string;
     disabled?: boolean;
     description?: string;
@@ -23,13 +23,13 @@ interface State {
     selectedImages: Record<string, any>;
     loading: boolean;
     imageEditor: {
-        image?: SelectedFile;
+        image: SelectedFile | null;
         open: boolean;
         index?: number;
     };
 }
-declare class MultiImageUpload extends React.Component<Props, State> {
-    static defaultProps: Partial<Props>;
+declare class MultiImageUpload extends React.Component<MultiImageUploadProps, State> {
+    static defaultProps: Partial<MultiImageUploadProps>;
     state: State;
     onChange: (value: any) => Promise<void>;
     handleSelectedImages: (images: Array<SelectedFile>, selectedIndex?: number) => Promise<void>;

package/ImageUpload/MultiImageUpload.js

@@ -8,7 +8,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _createSuper from "@babel/runtime/helpers/createSuper";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import * as React from "react";
+import React from "react";
 import BrowseFiles from "react-butterfiles";
 import { css } from "emotion";
 import classNames from "classnames";
@@ -55,13 +55,13 @@ var MultiImageUpload = /*#__PURE__*/function (_React$Component) {
     _this = _super.call.apply(_super, [this].concat(args));
 
     _defineProperty(_assertThisInitialized(_this), "state", {
-      errors: null,
+      errors: undefined,
       selectedImages: {},
       loading: false,
       imageEditor: {
         open: false,
         image: null,
-        index: null
+        index: undefined
       }
     });
 
@@ -119,7 +119,7 @@ var MultiImageUpload = /*#__PURE__*/function (_React$Component) {
                 selectedIndex = _args4.length > 1 && _args4[1] !== undefined ? _args4[1] : 0;
 
                 _this.setState({
-                  errors: null,
+                  errors: undefined,
                   loading: true
                 }, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
                   var selectedImages, i, image;
@@ -245,6 +245,14 @@ var MultiImageUpload = /*#__PURE__*/function (_React$Component) {
         console.log(this.state.imageEditor.image.src);
       }
 
+      var _ref5 = validation || {},
+          validationIsValid = _ref5.isValid,
+          validationMessage = _ref5.message;
+      /**
+       * accept can safely be cast because we have default value
+       */
+
+
       return /*#__PURE__*/React.createElement("div", {
         className: classNames(imagesStyle, className)
       }, label && /*#__PURE__*/React.createElement("div", {
@@ -282,7 +290,7 @@ var MultiImageUpload = /*#__PURE__*/function (_React$Component) {
                         imageEditor: {
                           image: null,
                           open: false,
-                          index: null
+                          index: undefined
                         }
                       });
 
@@ -306,9 +314,9 @@ var MultiImageUpload = /*#__PURE__*/function (_React$Component) {
         onError: function onError(errors) {
           return _this2.handleErrors(errors);
         }
-      }, function (_ref6) {
-        var browseFiles = _ref6.browseFiles,
-            getDropZoneProps = _ref6.getDropZoneProps;
+      }, function (_ref7) {
+        var browseFiles = _ref7.browseFiles,
+            getDropZoneProps = _ref7.getDropZoneProps;
         var images = Array.isArray(value) ? _toConsumableArray(value) : [];
         return /*#__PURE__*/React.createElement("div", getDropZoneProps({
           className: classNames({
@@ -358,9 +366,9 @@ var MultiImageUpload = /*#__PURE__*/function (_React$Component) {
             });
           }
         }))));
-      }), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+      }), validationIsValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
         error: true
-      }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description), Array.isArray(this.state.errors) && /*#__PURE__*/React.createElement(FormElementMessage, {
+      }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description), Array.isArray(this.state.errors) && /*#__PURE__*/React.createElement(FormElementMessage, {
         error: true
       }, "Your selection of images failed because of the following images:", /*#__PURE__*/React.createElement("ul", null, this.state.errors.map(function (error, index) {
         /**
@@ -368,9 +376,10 @@ var MultiImageUpload = /*#__PURE__*/function (_React$Component) {
          */
         var errorType = error.type;
         var message = _this2.props.errorMessages[errorType];
+        var errorFileName = error.file ? error.file.name : "";
         return /*#__PURE__*/React.createElement("li", {
-          key: error.file.name + index
-        }, index + 1, ". ", /*#__PURE__*/React.createElement("strong", null, error.file.name), " -\xA0", message || _this2.props.errorMessages.default);
+          key: errorFileName + index
+        }, index + 1, ". ", /*#__PURE__*/React.createElement("strong", null, errorFileName), " -\xA0", message || _this2.props.errorMessages.default);
       }))));
     }
   }]);
@@ -379,10 +388,6 @@ var MultiImageUpload = /*#__PURE__*/function (_React$Component) {
 }(React.Component);
 
 _defineProperty(MultiImageUpload, "defaultProps", {
-  validation: {
-    isValid: null,
-    message: null
-  },
   accept: ["image/jpeg", "image/png", "image/gif", "image/svg+xml"],
   maxSize: "5mb",
   imageEditor: {},

package/ImageUpload/MultiImageUpload.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["MultiImageUpload.tsx"],"names":["React","BrowseFiles","css","classNames","FormElementMessage","Image","ImageEditorDialog","imagesStyle","opacity","pointerEvents","listStyle","li","verticalAlign","margin","display","width","height","border","cursor","textAlign","MultiImageUpload","errors","undefined","selectedImages","loading","imageEditor","open","image","index","value","props","onChange","validate","images","selectedIndex","setState","i","length","newValue","Array","isArray","convertedImages","push","src","base64","name","size","type","splice","indexOf","validation","label","description","disabled","accept","maxSize","className","imageEditorImageSrc","state","console","warn","log","validationIsValid","isValid","validationMessage","message","setTimeout","imageEditorImageIndex","files","handleSelectedImages","handleErrors","browseFiles","getDropZoneProps","map","file","removeImage","onSuccess","onError","error","errorType","errorMessages","errorFileName","default","Component","maxSizeExceeded","unsupportedFileType"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport BrowseFiles, { SelectedFile, FileError } from \"react-butterfiles\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\nimport { FormElementMessage } from \"../FormElementMessage\";\nimport Image from \"./Image\";\nimport ImageEditorDialog from \"./ImageEditorDialog\";\nimport { FormComponentProps } from \"../types\";\n\nconst imagesStyle = css({\n    \".disabled\": {\n        opacity: 0.75,\n        pointerEvents: \"none\"\n    },\n    \"ul.images\": {\n        listStyle: \"none\",\n        li: {\n            verticalAlign: \"top\",\n            margin: 2,\n            display: \"inline-block\",\n            width: 150,\n            height: 150,\n            \"&:last-child\": {\n                border: \"1px solid lightgray\",\n                cursor: \"pointer\",\n                textAlign: \"center\"\n            }\n        }\n    }\n});\n\n// Do not apply editping for following image types.\n// const noImageEditorTypes = [\"image/svg+xml\", \"image/gif\"];\n\ninterface MultiImageUploadProps extends FormComponentProps {\n    // Component label.\n    label?: string;\n\n    // Is component disabled?\n    disabled?: boolean;\n\n    // Description beneath the image.\n    description?: string;\n\n    // A className for the root element.\n    className?: string;\n\n    // Define a list of accepted image types.\n    accept?: Array<string>;\n\n    // Define file's max allowed size (default is \"5mb\").\n    // Uses \"bytes\" (https://www.npmjs.com/package/bytes) library to convert string notation to actual number.\n    maxSize: string;\n\n    // Image editor options.\n    // Please check the docs of ImageEditor component for the list of all available options.\n    imageEditor?: Object;\n\n    // Use these to customize error messages (eg. if i18n supported is needed).\n    errorMessages: {\n        maxSizeExceeded: string;\n        unsupportedFileType: string;\n        default: string;\n    };\n\n    // Cropper options\n    cropper?: { [key: string]: any };\n}\n\ninterface State {\n    errors?: FileError[];\n    selectedImages: Record<string, any>;\n    loading: boolean;\n    imageEditor: {\n        image: SelectedFile | null;\n        open: boolean;\n        index?: number;\n    };\n}\n\nclass MultiImageUpload extends React.Component<MultiImageUploadProps, State> {\n    static defaultProps: Partial<MultiImageUploadProps> = {\n        accept: [\"image/jpeg\", \"image/png\", \"image/gif\", \"image/svg+xml\"],\n        maxSize: \"5mb\",\n        imageEditor: {},\n        errorMessages: {\n            maxSizeExceeded: \"Max size exceeded.\",\n            unsupportedFileType: \"Unsupported file type.\",\n            default: \"An error occurred.\"\n        }\n    };\n\n    public override state: State = {\n        errors: undefined,\n        selectedImages: {},\n        loading: false,\n        imageEditor: {\n            open: false,\n            image: null,\n            index: undefined\n        }\n    };\n\n    onChange = async (value: any) => {\n        const { onChange, validate } = this.props;\n        onChange && (await onChange(value));\n        validate && (await validate());\n    };\n\n    handleSelectedImages = async (images: Array<SelectedFile>, selectedIndex = 0) => {\n        this.setState(\n            {\n                errors: undefined,\n                loading: true\n            },\n            async () => {\n                const selectedImages: Record<number, any> = {};\n                for (let i = 0; i < images.length; i++) {\n                    const image = images[i];\n                    selectedImages[selectedIndex + i] = { ...image };\n                }\n\n                this.setState({ selectedImages }, async () => {\n                    const newValue = Array.isArray(this.props.value) ? [...this.props.value] : [];\n\n                    const convertedImages = [];\n                    for (let i = 0; i < images.length; i++) {\n                        const image = images[i];\n                        convertedImages.push({\n                            src: image.src.base64,\n                            name: image.name,\n                            size: image.size,\n                            type: image.type\n                        });\n                    }\n\n                    newValue.splice(selectedIndex, 0, ...convertedImages);\n                    await this.onChange(newValue);\n                    this.setState({ loading: false });\n                });\n            }\n        );\n    };\n\n    handleErrors = (errors: Array<FileError>) => {\n        this.setState({ errors });\n    };\n\n    removeImage = (image: SelectedFile) => {\n        const { value, onChange } = this.props;\n        if (!onChange) {\n            return;\n        }\n\n        const images = Array.isArray(value) ? [...value] : [];\n        images.splice(images.indexOf(image), 1);\n        onChange(images);\n    };\n\n    public override render() {\n        const {\n            value,\n            validation,\n            label,\n            description,\n            disabled,\n            imageEditor,\n            accept,\n            maxSize,\n            className\n        } = this.props;\n        /**\n         * TODO: figure out the correct type\n         */\n        let imageEditorImageSrc = \"\";\n        if (this.state.imageEditor.image) {\n            // @ts-ignore\n            imageEditorImageSrc = this.state.imageEditor.image.src;\n            console.warn(\"Figure out correct type if this.state.imageEditor.image.src\");\n            console.log(this.state.imageEditor.image.src);\n        }\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n        /**\n         * accept can safely be cast because we have default value\n         */\n        return (\n            <div className={classNames(imagesStyle, className)}>\n                {label && (\n                    <div className=\"mdc-floating-label mdc-floating-label--float-above\">\n                        {label}\n                    </div>\n                )}\n\n                <ImageEditorDialog\n                    options={imageEditor}\n                    open={this.state.imageEditor.open}\n                    src={imageEditorImageSrc}\n                    onClose={() => {\n                        this.setState(state => {\n                            state.imageEditor.open = false;\n                            return state;\n                        });\n                    }}\n                    onAccept={src => {\n                        // We wrapped everything into setTimeout - prevents dialog freeze when larger image is selected.\n                        setTimeout(() => {\n                            this.setState({ loading: true }, async () => {\n                                const newValue = Array.isArray(this.props.value)\n                                    ? [...this.props.value]\n                                    : [];\n\n                                const imageEditorImageIndex = this.state.imageEditor\n                                    .index as number;\n                                newValue[imageEditorImageIndex].src = src;\n\n                                await this.onChange(newValue);\n                                this.setState({\n                                    loading: false,\n                                    imageEditor: {\n                                        image: null,\n                                        open: false,\n                                        index: undefined\n                                    }\n                                });\n                            });\n                        });\n                    }}\n                />\n\n                <BrowseFiles\n                    accept={accept as string[]}\n                    maxSize={maxSize}\n                    multiple\n                    convertToBase64\n                    onSuccess={files => {\n                        this.handleSelectedImages(files, Array.isArray(value) ? value.length : 0);\n                    }}\n                    onError={errors => this.handleErrors(errors)}\n                >\n                    {({ browseFiles, getDropZoneProps }) => {\n                        const images = Array.isArray(value) ? [...value] : [];\n\n                        return (\n                            <div {...getDropZoneProps({ className: classNames({ disabled }) })}>\n                                <ul className=\"images\">\n                                    {images.map((image, index) => (\n                                        <li key={index}>\n                                            <Image\n                                                loading={\n                                                    this.state.selectedImages[index] &&\n                                                    this.state.loading\n                                                }\n                                                value={image.file || image}\n                                                removeImage={() =>\n                                                    this.removeImage(image.file || image)\n                                                }\n                                                editImage={\n                                                    this.state.selectedImages[index] &&\n                                                    (() => {\n                                                        this.setState({\n                                                            imageEditor: {\n                                                                index,\n                                                                open: true,\n                                                                image: this.state.selectedImages[\n                                                                    index\n                                                                ]\n                                                            }\n                                                        });\n                                                    })\n                                                }\n                                                uploadImage={() => {\n                                                    browseFiles({\n                                                        onSuccess: files => {\n                                                            this.handleSelectedImages(\n                                                                files,\n                                                                index + 1\n                                                            );\n                                                        },\n                                                        onError: errors => this.handleErrors(errors)\n                                                    });\n                                                }}\n                                            />\n                                        </li>\n                                    ))}\n                                    <li>\n                                        <Image\n                                            disabled={this.state.loading}\n                                            uploadImage={() => {\n                                                browseFiles({\n                                                    onSuccess: files => {\n                                                        this.handleSelectedImages(\n                                                            files,\n                                                            Array.isArray(value) ? value.length : 0\n                                                        );\n                                                    },\n                                                    onError: errors => this.handleErrors(errors)\n                                                });\n                                            }}\n                                        />\n                                    </li>\n                                </ul>\n                            </div>\n                        );\n                    }}\n                </BrowseFiles>\n\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n\n                {Array.isArray(this.state.errors) && (\n                    <FormElementMessage error>\n                        Your selection of images failed because of the following images:\n                        <ul>\n                            {this.state.errors.map((error: FileError, index) => {\n                                /**\n                                 * We need to cast as existing keys in errorMessages, otherwise TS throws an error\n                                 */\n                                const errorType = error.type as\n                                    | \"maxSizeExceeded\"\n                                    | \"unsupportedFileType\"\n                                    | \"default\";\n                                const message = this.props.errorMessages[errorType];\n\n                                const errorFileName = error.file ? error.file.name : \"\";\n\n                                return (\n                                    <li key={errorFileName + index}>\n                                        {index + 1}. <strong>{errorFileName}</strong> -&nbsp;\n                                        {message || this.props.errorMessages.default}\n                                    </li>\n                                );\n                            })}\n                        </ul>\n                    </FormElementMessage>\n                )}\n            </div>\n        );\n    }\n}\n\nexport { MultiImageUpload };\n"]}

package/ImageUpload/MultiImageUpload.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["MultiImageUpload.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandboxCode","StorySandbox","StorySandboxExample","withKnobs","boolean","readme","Form","MultiImageUpload","story","module","addDecorator","images","id","name","src","type","size","add","disabled","Bind","aspectRatio","JSON","stringify","info","propTables"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,QAA0B,kBAA1B;AACA,SACIC,KADJ,EAEIC,WAFJ,EAGIC,gBAHJ,EAIIC,YAJJ,EAKIC,mBALJ,QAMO,+BANP;AAOA,SAASC,SAAT,EAAoBC,OAApB,QAAmC,wBAAnC;AACA,OAAOC,MAAP;AAEA,SAASC,IAAT,QAAqB,cAArB;AACA,SAASC,gBAAT;AAEA,IAAMC,KAAK,GAAGX,SAAS,CAAC,wBAAD,EAA2BY,MAA3B,CAAvB;AACAD,KAAK,CAACE,YAAN,CAAmBP,SAAnB;AAEA,IAAMQ,MAAM,GAAG,CACX;AACIC,EAAAA,EAAE,EAAE,CADR;AAEIC,EAAAA,IAAI,EAAE,eAFV;AAGIC,EAAAA,GAAG,EAAE,iCAHT;AAIIC,EAAAA,IAAI,EAAE,YAJV;AAKIC,EAAAA,IAAI,EAAE;AALV,CADW,EAQX;AACIJ,EAAAA,EAAE,EAAE,CADR;AAEIC,EAAAA,IAAI,EAAE,eAFV;AAGIC,EAAAA,GAAG,EAAE,iCAHT;AAIIC,EAAAA,IAAI,EAAE,YAJV;AAKIC,EAAAA,IAAI,EAAE;AALV,CARW,EAeX;AACIJ,EAAAA,EAAE,EAAE,CADR;AAEIC,EAAAA,IAAI,EAAE,eAFV;AAGIC,EAAAA,GAAG,EAAE,iCAHT;AAIIC,EAAAA,IAAI,EAAE,YAJV;AAKIC,EAAAA,IAAI,EAAE;AALV,CAfW,EAsBX;AACIJ,EAAAA,EAAE,EAAE,CADR;AAEIC,EAAAA,IAAI,EAAE,eAFV;AAGIC,EAAAA,GAAG,EAAE,iCAHT;AAIIC,EAAAA,IAAI,EAAE,YAJV;AAKIC,EAAAA,IAAI,EAAE;AALV,CAtBW,EA6BX;AACIJ,EAAAA,EAAE,EAAE,CADR;AAEIC,EAAAA,IAAI,EAAE,eAFV;AAGIC,EAAAA,GAAG,EAAE,iCAHT;AAIIC,EAAAA,IAAI,EAAE,YAJV;AAKIC,EAAAA,IAAI,EAAE;AALV,CA7BW,CAAf;AAsCAR,KAAK,CAACS,GAAN,CACI,oBADJ,EAEI,YAAM;AACF,MAAMC,QAAQ,GAAGd,OAAO,CAAC,UAAD,EAAa,KAAb,CAAxB;AAEA,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcC,MAAd,CADJ,eAEI,oBAAC,YAAD,qBACI,oBAAC,mBAAD,qBACI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAE;AAAEM,MAAAA,MAAM,EAANA;AAAF;AAAZ,KACK;AAAA,QAAGQ,IAAH,QAAGA,IAAH;AAAA,wBACG,oBAAC,IAAD;AAAM,MAAA,IAAI,EAAC;AAAX,oBACI,oBAAC,gBAAD;AACI,MAAA,KAAK,EAAC,kCADV;AAEI,MAAA,QAAQ,EAAED,QAFd;AAGI,MAAA,WAAW,EAAC,6CAHhB;AAII,MAAA,OAAO,EAAE;AACLE,QAAAA,WAAW,EAAE;AADR;AAJb,MADJ,CADH;AAAA,GADL,CADJ,CADJ,eAiBI,oBAAC,gBAAD,wDAEkBC,IAAI,CAACC,SAAL,CAAe;AAAEX,IAAAA,MAAM,EAAEA;AAAV,GAAf,CAFlB,okBAjBJ,CAFJ,CADJ;AAsCH,CA3CL,EA4CI;AAAEY,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACjB,gBAAD;AAAd;AAAR,CA5CJ","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 { withKnobs, boolean } from \"@storybook/addon-knobs\";\nimport readme from \"./README.md\";\n\nimport { Form } from \"@webiny/form\";\nimport { MultiImageUpload } from \"./MultiImageUpload\";\n\nconst story = storiesOf(\"Components/ImageUpload\", module);\nstory.addDecorator(withKnobs);\n\nconst images = [\n    {\n        id: 1,\n        name: \"1st_image.jpg\",\n        src: \"http://i.pravatar.cc/150?img=49\",\n        type: \"image/jpeg\",\n        size: 901611\n    },\n    {\n        id: 2,\n        name: \"2nd_image.jpg\",\n        src: \"http://i.pravatar.cc/150?img=63\",\n        type: \"image/jpeg\",\n        size: 902612\n    },\n    {\n        id: 3,\n        name: \"3rd_image.jpg\",\n        src: \"http://i.pravatar.cc/150?img=24\",\n        type: \"image/jpeg\",\n        size: 903613\n    },\n    {\n        id: 4,\n        name: \"4th_image.jpg\",\n        src: \"http://i.pravatar.cc/150?img=57\",\n        type: \"image/jpeg\",\n        size: 904614\n    },\n    {\n        id: 5,\n        name: \"5th_image.jpg\",\n        src: \"http://i.pravatar.cc/150?img=31\",\n        type: \"image/jpeg\",\n        size: 905615\n    }\n];\n\nstory.add(\n    \"Multi Image Upload\",\n    () => {\n        const disabled = boolean(\"Disabled\", false);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample>\n                        <Form data={{ images }}>\n                            {({ Bind }) => (\n                                <Bind name=\"images\">\n                                    <MultiImageUpload\n                                        label=\"Your previously uploaded images:\"\n                                        disabled={disabled}\n                                        description=\"This list will not be shown to other users.\"\n                                        cropper={{\n                                            aspectRatio: 1\n                                        }}\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                        <Form data={${JSON.stringify({ images: images })}}>\n                            {({ Bind }) => (\n                                <Bind name=\"images\">\n                                     <MultiImageUpload\n                                        label=\"Your previously uploaded images:\"\n                                        disabled={disabled}\n                                        description=\"This list will not be shown to other users.\"\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [MultiImageUpload] } }\n);\n"]}

package/ImageUpload/SingleImageUpload.d.ts

@@ -1,7 +1,7 @@
-import * as React from "react";
+import React from "react";
 import { FormComponentProps } from "../types";
 import { SelectedFile, FileError } from "react-butterfiles";
-interface Props extends FormComponentProps {
+interface SingleImageUploadProps extends FormComponentProps {
     label?: string;
     disabled?: boolean;
     description?: string;
@@ -19,21 +19,22 @@ interface Props extends FormComponentProps {
         multipleMaxSizeExceeded: string;
     };
 }
-declare type State = {
+interface StateImage {
+    name: string;
+    type: string;
+    size: number;
+    src?: string;
+}
+interface State {
     loading: boolean;
-    error?: FileError;
+    error: FileError | null;
     imageEditor: {
-        image?: {
-            name: string;
-            type: string;
-            size: number;
-            src?: string;
-        };
+        image: StateImage | null;
         open: boolean;
     };
-};
-export declare class SingleImageUpload extends React.Component<Props, State> {
-    static defaultProps: Partial<Props>;
+}
+export declare class SingleImageUpload extends React.Component<SingleImageUploadProps, State> {
+    static defaultProps: Partial<SingleImageUploadProps>;
     state: State;
     handleFiles: (images: SelectedFile[]) => void;
     handleErrors: (errors: FileError[]) => void;