@webiny/ui 5.34.4 → 5.34.5-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/Accordion/Accordion.stories.js.map +1 -1
  2. package/Alert/Alert.stories.js.map +1 -1
  3. package/AutoComplete/AutoComplete.js.map +1 -1
  4. package/AutoComplete/MultiAutoComplete.js.map +1 -1
  5. package/Button/CopyButton/CopyButton.stories.js.map +1 -1
  6. package/Button/IconButton/IconButton.stories.js.map +1 -1
  7. package/Chips/Chips.stories.js.map +1 -1
  8. package/ConfirmationDialog/ConfirmationDialog.js.map +1 -1
  9. package/ConfirmationDialog/ConfirmationDialog.stories.js.map +1 -1
  10. package/Dialog/Dialog.stories.js.map +1 -1
  11. package/Drawer/Drawer.stories.js.map +1 -1
  12. package/Elevation/Elevation.stories.js.map +1 -1
  13. package/Grid/Grid.stories.js.map +1 -1
  14. package/Icon/Icon.stories.js.map +1 -1
  15. package/ImageEditor/ImageEditor.js.map +1 -1
  16. package/ImageEditor/toolbar/crop.js.map +1 -1
  17. package/ImageEditor/toolbar/filter.js.map +1 -1
  18. package/ImageEditor/toolbar/flip.js.map +1 -1
  19. package/ImageUpload/ImageEditorDialog.js.map +1 -1
  20. package/ImageUpload/MultiImageUpload.js.map +1 -1
  21. package/List/DataList/DataList.stories.js.map +1 -1
  22. package/List/DataList/NoData.js.map +1 -1
  23. package/List/List.stories.js.map +1 -1
  24. package/Menu/Menu.stories.js.map +1 -1
  25. package/Ripple/Ripple.stories.js.map +1 -1
  26. package/Scrollbar/Scrollbar.stories.js.map +1 -1
  27. package/Section/Section.stories.js.map +1 -1
  28. package/Select/Select.stories.js.map +1 -1
  29. package/Snackbar/Snackbar.stories.js.map +1 -1
  30. package/Tabs/Tabs.stories.js.map +1 -1
  31. package/Tooltip/Tooltip.stories.js.map +1 -1
  32. package/TopProgressBar/TopProgressBar.stories.js.map +1 -1
  33. package/Typography/Typography.stories.js.map +1 -1
  34. package/package.json +7 -7
package/Icon/Icon.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","Icon"],"sources":["Icon.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../Icon/README.md\";\n\nimport { ReactComponent as AutoRenewIcon } from \"./svg/baseline-autorenew-24px.svg\";\nimport { ReactComponent as CloudDoneIcon } from \"./svg/baseline-cloud_done-24px.svg\";\nimport { ReactComponent as BaselineDeleteIcon } from \"./svg/baseline-delete-24px.svg\";\nimport { ReactComponent as BaselineDoneIcon } from \"./svg/baseline-done-24px.svg\";\nimport { Icon } from \"./Icon\";\n\nconst story = storiesOf(\"Components/Icon\", module);\n\nstory.add(\n \"usage\",\n () => {\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n <StorySandbox title={\"A simple icon\"}>\n <div>\n <Icon icon={<AutoRenewIcon />} />\n &nbsp;\n <Icon icon={<CloudDoneIcon />} />\n &nbsp;\n <Icon icon={<BaselineDeleteIcon />} />\n &nbsp;\n <Icon icon={<BaselineDoneIcon />} />\n &nbsp;\n </div>\n </StorySandbox>\n </Story>\n );\n },\n { info: { propTables: [Icon] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,iBAAV,EAA6BC,MAA7B,CAAd;AAEAF,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,uDACI,6BAAC,UAAD;IAAM,IAAI,eAAE,6BAAC,qCAAD;EAAZ,EADJ,uBAGI,6BAAC,UAAD;IAAM,IAAI,eAAE,6BAAC,sCAAD;EAAZ,EAHJ,uBAKI,6BAAC,UAAD;IAAM,IAAI,eAAE,6BAAC,kCAAD;EAAZ,EALJ,uBAOI,6BAAC,UAAD;IAAM,IAAI,eAAE,6BAAC,gCAAD;EAAZ,EAPJ,SADJ,CAFJ,CADJ;AAiBH,CApBL,EAqBI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,UAAD;EAAd;AAAR,CArBJ"}
1
+ {"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","Icon"],"sources":["Icon.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../Icon/README.md\";\n\nimport { ReactComponent as AutoRenewIcon } from \"./svg/baseline-autorenew-24px.svg\";\nimport { ReactComponent as CloudDoneIcon } from \"./svg/baseline-cloud_done-24px.svg\";\nimport { ReactComponent as BaselineDeleteIcon } from \"./svg/baseline-delete-24px.svg\";\nimport { ReactComponent as BaselineDoneIcon } from \"./svg/baseline-done-24px.svg\";\nimport { Icon } from \"./Icon\";\n\nconst story = storiesOf(\"Components/Icon\", module);\n\nstory.add(\n \"usage\",\n () => {\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n <StorySandbox title={\"A simple icon\"}>\n <div>\n <Icon icon={<AutoRenewIcon />} />\n &nbsp;\n <Icon icon={<CloudDoneIcon />} />\n &nbsp;\n <Icon icon={<BaselineDeleteIcon />} />\n &nbsp;\n <Icon icon={<BaselineDoneIcon />} />\n &nbsp;\n </div>\n </StorySandbox>\n </Story>\n );\n },\n { info: { propTables: [Icon] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,iBAAV,EAA6BC,MAA7B,CAAd;AAEAF,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,uDACI,6BAAC,UAAD;IAAM,IAAI,eAAE,6BAAC,qCAAD;EAAZ,EADJ,EACqC,MADrC,eAGI,6BAAC,UAAD;IAAM,IAAI,eAAE,6BAAC,sCAAD;EAAZ,EAHJ,EAGqC,MAHrC,eAKI,6BAAC,UAAD;IAAM,IAAI,eAAE,6BAAC,kCAAD;EAAZ,EALJ,EAK0C,MAL1C,eAOI,6BAAC,UAAD;IAAM,IAAI,eAAE,6BAAC,gCAAD;EAAZ,EAPJ,EAOwC,MAPxC,CADJ,CAFJ,CADJ;AAiBH,CApBL,EAqBI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,UAAD;EAAd;AAAR,CArBJ"}
package/ImageEditor/ImageEditor.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["toolbar","flip","filter","crop","rotate","Toolbar","styled","display","justifyContent","alignItems","backgroundColor","margin","padding","position","width","boxSizing","zIndex","opacity","pointerEvents","ToolOptions","borderTop","ApplyCancelActions","textAlign","initScripts","Promise","resolve","window","Caman","loadScript","ImageEditor","tool","src","React","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","classNames","disabled","icon","renderForm","cancelActiveTool","applyActiveTool","maxWidth","render","getCanvasDataUrl","activeTool","Component"],"sources":["ImageEditor.tsx"],"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 data-testid=\"button-cancel\"\n onClick={() => {\n this.cancelActiveTool();\n }}\n >\n Cancel\n </ButtonSecondary>\n &nbsp;\n <ButtonPrimary\n data-testid=\"button-apply\"\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AAKA;;AAJA;AACA;AACA;AACA;AAGA,IAAMA,OAAO,GAAG;EACZC,IAAI,EAAJA,aADY;EAEZC,MAAM,EAANA,eAFY;EAGZC,IAAI,EAAJA,aAHY;EAIZC,MAAM,EAANA;AAJY,CAAhB;AAOA,IAAMC,OAAO,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EAC1BC,OAAO,EAAE,MADiB;EAE1BC,cAAc,EAAE,QAFU;EAG1BC,UAAU,EAAE,QAHc;EAI1BC,eAAe,EAAE,4BAJS;EAK1BC,MAAM,EAAE,uBALkB;EAM1BC,OAAO,EAAE,CANiB;EAO1BC,QAAQ,EAAE,UAPgB;EAQ1BC,KAAK,EAAE,MARmB;EAS1BC,SAAS,EAAE,YATe;EAU1BC,MAAM,EAAE,EAVkB;EAW1B,kBAAkB;IACdC,OAAO,EAAE,GADK;IAEdC,aAAa,EAAE;EAFD;AAXQ,CAAjB,CAAb;AAiBA,IAAMC,WAAW,oBAAGb,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EAC9BK,MAAM,EAAE,uBADsB;EAE9BI,SAAS,EAAE,YAFmB;EAG9BH,OAAO,EAAE,EAHqB;EAI9BF,eAAe,EAAE,6BAJa;EAK9BU,SAAS,EAAE;AALmB,CAAjB,CAAjB;AAQA,IAAMC,kBAAkB,oBAAGf,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACrCgB,SAAS,EAAE;AAD0B,CAAjB,CAAxB;;AAIA,IAAMC,WAAW,GAAG,SAAdA,WAAc,GAAuB;EACvC,OAAO,IAAIC,OAAJ,CAAY,UAACC,OAAD,EAAkB;IACjC;IACA,IAAIC,MAAM,CAACC,KAAX,EAAkB;MACd,OAAOF,OAAO,EAAd;IACH;;IACD,OAAO,IAAAG,mBAAA,EACH,wEADG,EAEHH,OAFG,CAAP;EAIH,CATM,CAAP;AAUH,CAXD;;IA4CMI,W;;;;;;;;;;;;;;;wFAKwC;MACtCC,IAAI,EAAE,IADgC;MAEtCC,GAAG,EAAE;IAFiC,C;sGAK1BC,cAAA,CAAMC,SAAN,E;;+FAuBgB,YAAY;MACxC,IAAQF,GAAR,GAAgB,MAAKG,KAArB,CAAQH,GAAR;MACA,MAAKI,KAAL,GAAa,IAAIT,MAAM,CAACU,KAAX,EAAb;MACA,IAAMC,MAAM,GAAG,MAAKA,MAAL,CAAYC,OAA3B;;MACA,IAAID,MAAJ,EAAY;QACR,MAAKF,KAAL,CAAWI,MAAX,GAAoB,YAAM;UACtB,IAAI,MAAKJ,KAAT,EAAgB;YACZE,MAAM,CAACvB,KAAP,GAAe,MAAKqB,KAAL,CAAWrB,KAA1B;YACAuB,MAAM,CAACG,MAAP,GAAgB,MAAKL,KAAL,CAAWK,MAA3B;YACA,IAAMC,GAAG,GAAGJ,MAAM,CAACK,UAAP,CAAkB,IAAlB,CAAZ;YACAD,GAAG,CAACE,SAAJ,CAAc,MAAKR,KAAnB,EAA0B,CAA1B,EAA6B,CAA7B;UACH;QACJ,CAPD;;QASA,MAAKA,KAAL,CAAWJ,GAAX,GAAiBA,GAAjB;MACH;IACJ,C;+FAE+B,UAACD,IAAD,EAA+C;MAC3E,IAAI,OAAOA,IAAP,KAAgB,QAApB,EAA8B;QAC1BA,IAAI,GAAG9B,OAAO,CAAC8B,IAAD,CAAd;MACH;;MAED,MAAKc,QAAL,CAAc;QAAEd,IAAI,EAAJA;MAAF,CAAd,EAAwB,YAAM;QAC1B,IAAMe,EAAE,GAAGf,IAAX;QACA,OAAOe,EAAE,CAACC,UAAV,KAAyB,UAAzB,IACID,EAAE,CAACC,UAAH,CAAc;UAAET,MAAM,EAAE,MAAKA,MAAf;UAAuBU,OAAO,EAAE,MAAKC,cAAL,CAAoBH,EAApB;QAAhC,CAAd,CADJ;MAEH,CAJD;IAKH,C;iGAEiC,YAAY;MAC1C,MAAKD,QAAL,CAAc;QACVd,IAAI,EAAE;MADI,CAAd;IAGH,C;mGAEkC,YAAc;MAC7C,IAAMO,MAAM,GAAG,MAAKA,MAAL,CAAYC,OAA3B;;MACA,IAAID,MAAJ,EAAY;QACR,IAAQN,GAAR,GAAgB,MAAKG,KAArB,CAAQH,GAAR;;QACA,IAAIA,GAAG,CAACkB,UAAJ,CAAe,kBAAf,CAAJ,EAAwC;UACpC,OAAOZ,MAAM,CAACa,SAAP,CAAiB,YAAjB,EAA+B,GAA/B,CAAP;QACH;;QAED,OAAOb,MAAM,CAACa,SAAP,EAAP;MACH;;MAED,OAAO,EAAP;IACH,C;sMAEkC;MAAA;MAAA;QAAA;UAAA;YAAA;cACvBpB,IADuB,GACd,MAAKqB,KADS,CACvBrB,IADuB;;cAAA,IAE1BA,IAF0B;gBAAA;gBAAA;cAAA;;cAAA;;YAAA;cAAA,KAM3BA,IAAI,CAACsB,KANsB;gBAAA;gBAAA;cAAA;;cAAA;cAAA,OAOrBtB,IAAI,CAACsB,KAAL,CAAW;gBACbf,MAAM,EAAE,MAAKA;cADA,CAAX,CAPqB;;YAAA;cAW/B,MAAKgB,cAAL;;YAX+B;YAAA;cAAA;UAAA;QAAA;MAAA;IAAA,C;uMAcC;MAAA;MAAA;QAAA;UAAA;YAAA;cACxBvB,IADwB,GACf,MAAKqB,KADU,CACxBrB,IADwB;;cAAA,IAE3BA,IAF2B;gBAAA;gBAAA;cAAA;;cAAA;;YAAA;cAAA,KAM5BA,IAAI,CAACwB,MANuB;gBAAA;gBAAA;cAAA;;cAAA;cAAA,OAOtBxB,IAAI,CAACwB,MAAL,CAAY;gBACdjB,MAAM,EAAE,MAAKA;cADC,CAAZ,CAPsB;;YAAA;cAWhC,MAAKgB,cAAL;;YAXgC;YAAA;cAAA;UAAA;QAAA;MAAA;IAAA,C;iGAcF,UAC9BvB,IAD8B,EAEU;MACxC,IAAQiB,OAAR,GAAoB,MAAKb,KAAzB,CAAQa,OAAR;;MACA,IAAI,CAACA,OAAD,IAAY,OAAOA,OAAP,KAAmB,QAAnC,EAA6C;QACzC,OAAO,EAAP;MACH;;MAED,OAAOA,OAAO,CAACjB,IAAI,CAACyB,IAAN,CAAP,IAAqC,EAA5C;IACH,C;;;;;;WA3GD,6BAAoC;MAAA;;MAChChC,WAAW,GAAGiC,IAAd,CAAmB,YAAM;QACrB,MAAI,CAACC,YAAL;;QACAC,UAAU,CAAC,YAAM;UACb,IAAQX,OAAR,GAAoB,MAAI,CAACb,KAAzB,CAAQa,OAAR;;UACA,IAAI,CAACA,OAAD,IAAY,OAAOA,OAAP,KAAmB,QAAnC,EAA6C;YACzC;UACH;;UACD,KAAK,IAAMY,GAAX,IAAkBZ,OAAlB,EAA2B;YACvB,IAAMa,MAAM,GAAGb,OAAO,CAACY,GAAD,CAAtB;;YACA,IAAIC,MAAM,CAACC,UAAP,KAAsB,IAA1B,EAAgC;cAC5B,IAAM/B,IAA4B,GAAG9B,OAAO,CAAC2D,GAAD,CAA5C;cACA7B,IAAI,IAAI,MAAI,CAACgC,YAAL,CAAkBhC,IAAlB,CAAR;cACA;YACH;UACJ;QACJ,CAbS,EAaP,GAbO,CAAV;MAcH,CAhBD;IAiBH;;;WA2FD,kBAA0C;MAAA;;MACtC,kBAAiC,KAAKI,KAAtC;MAAA,IAAQH,GAAR,eAAQA,GAAR;MAAA,IAAagC,KAAb,eAAaA,KAAb;MAAA,IAAoBC,QAApB,eAAoBA,QAApB;MACA,IAAQlC,IAAR,GAAiB,KAAKqB,KAAtB,CAAQrB,IAAR;;MACA,IAAMmC,MAAM,gBACR,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,OAAD,QACKF,KAAK,CAACG,GAAN,CAAU,UAAAP,GAAG,EAAI;QACd,IAAM7B,IAAqB,GAAG9B,OAAO,CAAC2D,GAAD,CAArC;;QACA,IAAI,CAAC7B,IAAL,EAAW;UACP,OAAO,IAAP;QACH;;QAED,oBACI;UAAK,GAAG,EAAE6B,GAAV;UAAe,SAAS,EAAE,IAAAQ,mBAAA,EAAW;YAAEC,QAAQ,EAAE,MAAI,CAACjB,KAAL,CAAWrB;UAAvB,CAAX;QAA1B,GACKA,IAAI,CAACuC,IAAL,CAAU;UACPP,YAAY,EAAE;YAAA,OAAM,MAAI,CAACA,YAAL,CAAkBhC,IAAlB,CAAN;UAAA;QADP,CAAV,CADL,CADJ;MAOH,CAbA,CADL,CADJ,eAkBI,6BAAC,WAAD,QACKA,IAAI,gBACD,4DACK,OAAOA,IAAI,CAACwC,UAAZ,KAA2B,UAA3B,IACGxC,IAAI,CAACwC,UAAL,CAAgB;QACZvB,OAAO,EAAE,KAAKC,cAAL,CAAoBlB,IAApB,CADG;QAEZK,KAAK,EAAE,KAAKA,KAFA;QAGZE,MAAM,EAAE,KAAKA;MAHD,CAAhB,CAFR,eAQI,6BAAC,kBAAD,qBACI,6BAAC,uBAAD;QACI,eAAY,eADhB;QAEI,OAAO,EAAE,mBAAM;UACX,MAAI,CAACkC,gBAAL;QACH;MAJL,YADJ,uBAUI,6BAAC,qBAAD;QACI,eAAY,cADhB;QAEI,OAAO,EAAE,mBAAM;UACX,MAAI,CAACC,eAAL;QACH;MAJL,WAVJ,CARJ,CADC,gBA8BD;QAAK,KAAK,EAAE;UAAElD,SAAS,EAAE;QAAb;MAAZ,mDA/BR,CAlBJ,eAuDI;QAAK,KAAK,EAAE;UAAEX,MAAM,EAAE,QAAV;UAAoBW,SAAS,EAAE;QAA/B;MAAZ,gBACI;QACI,GAAG,EAAES,GADT;QAEI,EAAE,EAAE,QAFR;QAGI,KAAK,EAAE;UAAE0C,QAAQ,EAAE;QAAZ,CAHX;QAII,GAAG,EAAE,KAAKpC;MAJd,EADJ,CAvDJ,CADJ;;MAmEA,IAAI,OAAO2B,QAAP,KAAoB,UAAxB,EAAoC;QAChC,OAAOA,QAAQ,CAAC;UACZU,MAAM,EAAE;YAAA,OAAMT,MAAN;UAAA,CADI;UAEZ;UACAU,gBAAgB,EAAE,KAAKA,gBAHX;UAIZC,UAAU,EAAE,KAAKzB,KAAL,CAAWrB,IAJX;UAKZ0C,eAAe,EAAE,KAAKA,eALV;UAMZD,gBAAgB,EAAE,KAAKA;QANX,CAAD,CAAf;MAQH;;MAED,OAAON,MAAP;IACH;;;EA5MqBjC,cAAA,CAAM6C,S;;;8BAA1BhD,W,kBAC+C;EAC7CkC,KAAK,EAAE,CAAC,MAAD,EAAS,MAAT,EAAiB,QAAjB,EAA2B,QAA3B;AADsC,C"}
1
+ {"version":3,"names":["toolbar","flip","filter","crop","rotate","Toolbar","styled","display","justifyContent","alignItems","backgroundColor","margin","padding","position","width","boxSizing","zIndex","opacity","pointerEvents","ToolOptions","borderTop","ApplyCancelActions","textAlign","initScripts","Promise","resolve","window","Caman","loadScript","ImageEditor","tool","src","React","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","classNames","disabled","icon","renderForm","cancelActiveTool","applyActiveTool","maxWidth","render","getCanvasDataUrl","activeTool","Component"],"sources":["ImageEditor.tsx"],"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 data-testid=\"button-cancel\"\n onClick={() => {\n this.cancelActiveTool();\n }}\n >\n Cancel\n </ButtonSecondary>\n &nbsp;\n <ButtonPrimary\n data-testid=\"button-apply\"\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"],"mappings":"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"}
package/ImageEditor/toolbar/crop.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["cropper","undefined","renderForm","textAlign","tool","name","icon","activateTool","onActivate","canvas","options","Cropper","current","cancel","destroy","apply","Promise","resolve","src","getCroppedCanvas","toDataURL","image","window","Image","ctx","getContext","onload","drawImage","width","height"],"sources":["crop.tsx"],"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\n icon={<CropIcon />}\n onClick={() => activateTool(\"crop\")}\n data-testid={\"crop-item\"}\n />\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"],"mappings":";;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAIA,OAA4B,GAAGC,SAAnC;;AAEA,IAAMC,UAAU,GAAG,SAAbA,UAAa,GAAM;EACrB,oBACI;IAAK,KAAK,EAAE;MAAEC,SAAS,EAAE;IAAb;EAAZ,wFADJ;AAKH,CAND;;AAQA,IAAMC,IAAqB,GAAG;EAC1BC,IAAI,EAAE,MADoB;EAE1BC,IAF0B,sBAEH;IAAA,IAAhBC,YAAgB,QAAhBA,YAAgB;IACnB,oBACI,6BAAC,gBAAD;MAAS,SAAS,EAAE,QAApB;MAA8B,OAAO,EAAE;IAAvC,gBACI,6BAAC,kBAAD;MACI,IAAI,eAAE,6BAAC,oBAAD,OADV;MAEI,OAAO,EAAE;QAAA,OAAMA,YAAY,CAAC,MAAD,CAAlB;MAAA,CAFb;MAGI,eAAa;IAHjB,EADJ,CADJ;EASH,CAZyB;EAa1BL,UAAU,EAAVA,UAb0B;EAc1BM,UAAU,EAAE,2BAAyB;IAAA,IAAtBC,MAAsB,SAAtBA,MAAsB;IAAA,IAAdC,OAAc,SAAdA,OAAc;IACjCV,OAAO,GAAG,IAAIW,kBAAJ,CAAYF,MAAM,CAACG,OAAnB,EAAiDF,OAAjD,CAAV;EACH,CAhByB;EAiB1BG,MAAM,EAAE;IAAA,OAAMb,OAAO,IAAIA,OAAO,CAACc,OAAR,EAAjB;EAAA,CAjBkB;EAkB1BC,KAAK,EAAE,sBAAgB;IAAA,IAAbN,MAAa,SAAbA,MAAa;IACnB,OAAO,IAAIO,OAAJ,CAAY,UAACC,OAAD,EAAkB;MACjC,IAAI,CAACjB,OAAL,EAAc;QACViB,OAAO;QACP;MACH;;MAED,IAAML,OAAO,GAAGH,MAAM,CAACG,OAAvB;MACA,IAAMM,GAAG,GAAGlB,OAAO,CAACmB,gBAAR,GAA2BC,SAA3B,EAAZ;;MACA,IAAIR,OAAJ,EAAa;QACT,IAAMS,KAAK,GAAG,IAAIC,MAAM,CAACC,KAAX,EAAd;QACA,IAAMC,GAAG,GAAGZ,OAAO,CAACa,UAAR,CAAmB,IAAnB,CAAZ;;QACAJ,KAAK,CAACK,MAAN,GAAe,YAAM;UACjBF,GAAG,CAACG,SAAJ,CAAcN,KAAd,EAAqB,CAArB,EAAwB,CAAxB;UACAT,OAAO,CAACgB,KAAR,GAAgBP,KAAK,CAACO,KAAtB;UACAhB,OAAO,CAACiB,MAAR,GAAiBR,KAAK,CAACQ,MAAvB;UAEAL,GAAG,CAACG,SAAJ,CAAcN,KAAd,EAAqB,CAArB,EAAwB,CAAxB;UACAJ,OAAO;QACV,CAPD;;QAQAI,KAAK,CAACH,GAAN,GAAYA,GAAZ;MACH;;MAEDlB,OAAO,CAACc,OAAR;MACAd,OAAO,GAAGC,SAAV;IACH,CAxBM,CAAP;EAyBH;AA5CyB,CAA9B;eA+CeG,I"}
1
+ {"version":3,"names":["cropper","undefined","renderForm","textAlign","tool","name","icon","activateTool","onActivate","canvas","options","Cropper","current","cancel","destroy","apply","Promise","resolve","src","getCroppedCanvas","toDataURL","image","window","Image","ctx","getContext","onload","drawImage","width","height"],"sources":["crop.tsx"],"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\n icon={<CropIcon />}\n onClick={() => activateTool(\"crop\")}\n data-testid={\"crop-item\"}\n />\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"],"mappings":";;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAIA,OAA4B,GAAGC,SAAnC;;AAEA,IAAMC,UAAU,GAAG,SAAbA,UAAa,GAAM;EACrB,oBACI;IAAK,KAAK,EAAE;MAAEC,SAAS,EAAE;IAAb;EAAZ,GAAqC,oFAArC,CADJ;AAKH,CAND;;AAQA,IAAMC,IAAqB,GAAG;EAC1BC,IAAI,EAAE,MADoB;EAE1BC,IAF0B,sBAEH;IAAA,IAAhBC,YAAgB,QAAhBA,YAAgB;IACnB,oBACI,6BAAC,gBAAD;MAAS,SAAS,EAAE,QAApB;MAA8B,OAAO,EAAE;IAAvC,gBACI,6BAAC,kBAAD;MACI,IAAI,eAAE,6BAAC,oBAAD,OADV;MAEI,OAAO,EAAE;QAAA,OAAMA,YAAY,CAAC,MAAD,CAAlB;MAAA,CAFb;MAGI,eAAa;IAHjB,EADJ,CADJ;EASH,CAZyB;EAa1BL,UAAU,EAAVA,UAb0B;EAc1BM,UAAU,EAAE,2BAAyB;IAAA,IAAtBC,MAAsB,SAAtBA,MAAsB;IAAA,IAAdC,OAAc,SAAdA,OAAc;IACjCV,OAAO,GAAG,IAAIW,kBAAJ,CAAYF,MAAM,CAACG,OAAnB,EAAiDF,OAAjD,CAAV;EACH,CAhByB;EAiB1BG,MAAM,EAAE;IAAA,OAAMb,OAAO,IAAIA,OAAO,CAACc,OAAR,EAAjB;EAAA,CAjBkB;EAkB1BC,KAAK,EAAE,sBAAgB;IAAA,IAAbN,MAAa,SAAbA,MAAa;IACnB,OAAO,IAAIO,OAAJ,CAAY,UAACC,OAAD,EAAkB;MACjC,IAAI,CAACjB,OAAL,EAAc;QACViB,OAAO;QACP;MACH;;MAED,IAAML,OAAO,GAAGH,MAAM,CAACG,OAAvB;MACA,IAAMM,GAAG,GAAGlB,OAAO,CAACmB,gBAAR,GAA2BC,SAA3B,EAAZ;;MACA,IAAIR,OAAJ,EAAa;QACT,IAAMS,KAAK,GAAG,IAAIC,MAAM,CAACC,KAAX,EAAd;QACA,IAAMC,GAAG,GAAGZ,OAAO,CAACa,UAAR,CAAmB,IAAnB,CAAZ;;QACAJ,KAAK,CAACK,MAAN,GAAe,YAAM;UACjBF,GAAG,CAACG,SAAJ,CAAcN,KAAd,EAAqB,CAArB,EAAwB,CAAxB;UACAT,OAAO,CAACgB,KAAR,GAAgBP,KAAK,CAACO,KAAtB;UACAhB,OAAO,CAACiB,MAAR,GAAiBR,KAAK,CAACQ,MAAvB;UAEAL,GAAG,CAACG,SAAJ,CAAcN,KAAd,EAAqB,CAArB,EAAwB,CAAxB;UACAJ,OAAO;QACV,CAPD;;QAQAI,KAAK,CAACH,GAAN,GAAYA,GAAZ;MACH;;MAEDlB,OAAO,CAACc,OAAR;MACAd,OAAO,GAAGC,SAAV;IACH,CAxBM,CAAP;EAyBH;AA5CyB,CAA9B;eA+CeG,I"}
package/ImageEditor/toolbar/filter.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["Wrapper","styled","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","React","Component","tool","name","icon","activateTool","renderForm","cancel"],"sources":["filter.tsx"],"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\n icon={<FilterIcon />}\n onClick={() => activateTool(\"filter\")}\n data-testid={\"filter-item\"}\n />\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"],"mappings":"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"}
1
+ {"version":3,"names":["Wrapper","styled","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","React","Component","tool","name","icon","activateTool","renderForm","cancel"],"sources":["filter.tsx"],"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\n icon={<FilterIcon />}\n onClick={() => activateTool(\"filter\")}\n data-testid={\"filter-item\"}\n />\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"],"mappings":"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"}
package/ImageEditor/toolbar/flip.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["cropper","flipped","x","y","renderForm","textAlign","scaleX","scaleY","tool","name","icon","activateTool","cancel","destroy","onActivate","canvas","Cropper","current","background","modal","guides","dragMode","highlight","autoCrop","apply","Promise","resolve","src","getCroppedCanvas","toDataURL","image","window","Image","ctx","getContext","onload","drawImage","width","height"],"sources":["flip.tsx"],"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\n icon={<FlipIcon />}\n onClick={() => activateTool(\"flip\")}\n data-testid={\"flip-item\"}\n />\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"],"mappings":"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"}
1
+ {"version":3,"names":["cropper","flipped","x","y","renderForm","textAlign","scaleX","scaleY","tool","name","icon","activateTool","cancel","destroy","onActivate","canvas","Cropper","current","background","modal","guides","dragMode","highlight","autoCrop","apply","Promise","resolve","src","getCroppedCanvas","toDataURL","image","window","Image","ctx","getContext","onload","drawImage","width","height"],"sources":["flip.tsx"],"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\n icon={<FlipIcon />}\n onClick={() => activateTool(\"flip\")}\n data-testid={\"flip-item\"}\n />\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"],"mappings":"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"}
package/ImageUpload/ImageEditorDialog.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["imageEditorDialog","css","width","height","maxWidth","maxHeight","paddingTop","ImageEditorDialog","React","createRef","props","src","options","onAccept","open","dialogZIndex","dialogProps","zIndex","imageEditor","render","activeTool","url","current","getCanvasDataUrl","Component"],"sources":["ImageEditorDialog.tsx"],"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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;AA6BA,IAAMA,iBAAiB,gBAAG,IAAAC,YAAA,EAAI;EAC1BC,KAAK,EAAE,OADmB;EAE1BC,MAAM,EAAE,OAFkB;EAG1B,wBAAwB;IACpBC,QAAQ,EAAE,iBADU;IAEpBC,SAAS,EAAE,iBAFS;IAGpB,8BAA8B;MAC1BD,QAAQ,EAAE,iBADgB;MAE1BC,SAAS,EAAE,iBAFe;MAG1BH,KAAK,EAAE,OAHmB;MAI1BC,MAAM,EAAE,OAJkB;MAK1BG,UAAU,EAAE;IALc;EAHV;AAHE,CAAJ,6BAA1B;;IAgBMC,iB;;;;;;;;;;;;;;;2GACmBC,cAAA,CAAMC,SAAN,E;;;;;;WAErB,kBAAyB;MAAA;;MACrB,kBAAuE,KAAKC,KAA5E;MAAA,IAAQC,GAAR,eAAQA,GAAR;MAAA,IAAaC,OAAb,eAAaA,OAAb;MAAA,IAAsBC,QAAtB,eAAsBA,QAAtB;MAAA,IAAgCC,IAAhC,eAAgCA,IAAhC;MAAA,IAAsCC,YAAtC,eAAsCA,YAAtC;MAAA,IAAuDC,WAAvD;MAEA,oBACI,6BAAC,cAAD;QACI,SAAS,EAAEhB,iBADf;QAEI,KAAK,EAAE;UAAEiB,MAAM,EAAEF;QAAV,CAFX;QAGI,IAAI,EAAED;MAHV,GAIQE,WAJR,GAMKF,IAAI,iBACD,6BAAC,wBAAD;QAAa,GAAG,EAAE,KAAKI,WAAvB;QAAoC,GAAG,EAAEP,GAAzC;QAA8C,OAAO,EAAEC;MAAvD,GACK;QAAA,IAAGO,MAAH,QAAGA,MAAH;QAAA,IAAWC,UAAX,QAAWA,UAAX;QAAA,oBACG,yEACI,6BAAC,qBAAD,QAAgBD,MAAM,EAAtB,CADJ,eAEI,6BAAC,qBAAD,qBACI,6BAAC,oBAAD,iBADJ,EAEKC,UAAU,gBACP,6BAAC,gBAAD;UACI,OAAO,EAAE,qCADb;UAEI,SAAS,EAAE;QAFf,gBAII,6BAAC,oBAAD;UAAc,QAAQ;QAAtB,UAJJ,CADO,gBAQP,6BAAC,oBAAD;UACI,OAAO,EAAE,mBAAM;YACX,IAAMC,GAAG,GAAG,MAAI,CAACH,WAAL,CAAiBI,OAAjB,GACN,MAAI,CAACJ,WAAL,CAAiBI,OAAjB,CAAyBC,gBAAzB,EADM,GAEN,EAFN;YAGA;AAChD;AACA;;YACgDV,QAAQ,CAACQ,GAAD,CAAR;UACH;QATL,UAVR,CAFJ,CADH;MAAA,CADL,CAPR,CADJ;IA2CH;;;EAjD2Bb,cAAA,CAAMgB,S;;eAmDvBjB,iB"}
1
+ {"version":3,"names":["imageEditorDialog","css","width","height","maxWidth","maxHeight","paddingTop","ImageEditorDialog","React","createRef","props","src","options","onAccept","open","dialogZIndex","dialogProps","zIndex","imageEditor","render","activeTool","url","current","getCanvasDataUrl","Component"],"sources":["ImageEditorDialog.tsx"],"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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;AA6BA,IAAMA,iBAAiB,gBAAG,IAAAC,YAAA,EAAI;EAC1BC,KAAK,EAAE,OADmB;EAE1BC,MAAM,EAAE,OAFkB;EAG1B,wBAAwB;IACpBC,QAAQ,EAAE,iBADU;IAEpBC,SAAS,EAAE,iBAFS;IAGpB,8BAA8B;MAC1BD,QAAQ,EAAE,iBADgB;MAE1BC,SAAS,EAAE,iBAFe;MAG1BH,KAAK,EAAE,OAHmB;MAI1BC,MAAM,EAAE,OAJkB;MAK1BG,UAAU,EAAE;IALc;EAHV;AAHE,CAAJ,6BAA1B;;IAgBMC,iB;;;;;;;;;;;;;;;2GACmBC,cAAA,CAAMC,SAAN,E;;;;;;WAErB,kBAAyB;MAAA;;MACrB,kBAAuE,KAAKC,KAA5E;MAAA,IAAQC,GAAR,eAAQA,GAAR;MAAA,IAAaC,OAAb,eAAaA,OAAb;MAAA,IAAsBC,QAAtB,eAAsBA,QAAtB;MAAA,IAAgCC,IAAhC,eAAgCA,IAAhC;MAAA,IAAsCC,YAAtC,eAAsCA,YAAtC;MAAA,IAAuDC,WAAvD;MAEA,oBACI,6BAAC,cAAD;QACI,SAAS,EAAEhB,iBADf;QAEI,KAAK,EAAE;UAAEiB,MAAM,EAAEF;QAAV,CAFX;QAGI,IAAI,EAAED;MAHV,GAIQE,WAJR,GAMKF,IAAI,iBACD,6BAAC,wBAAD;QAAa,GAAG,EAAE,KAAKI,WAAvB;QAAoC,GAAG,EAAEP,GAAzC;QAA8C,OAAO,EAAEC;MAAvD,GACK;QAAA,IAAGO,MAAH,QAAGA,MAAH;QAAA,IAAWC,UAAX,QAAWA,UAAX;QAAA,oBACG,yEACI,6BAAC,qBAAD,QAAgBD,MAAM,EAAtB,CADJ,eAEI,6BAAC,qBAAD,qBACI,6BAAC,oBAAD,QAAc,QAAd,CADJ,EAEKC,UAAU,gBACP,6BAAC,gBAAD;UACI,OAAO,EAAE,qCADb;UAEI,SAAS,EAAE;QAFf,gBAII,6BAAC,oBAAD;UAAc,QAAQ;QAAtB,GAAuB,MAAvB,CAJJ,CADO,gBAQP,6BAAC,oBAAD;UACI,OAAO,EAAE,mBAAM;YACX,IAAMC,GAAG,GAAG,MAAI,CAACH,WAAL,CAAiBI,OAAjB,GACN,MAAI,CAACJ,WAAL,CAAiBI,OAAjB,CAAyBC,gBAAzB,EADM,GAEN,EAFN;YAGA;AAChD;AACA;;YACgDV,QAAQ,CAACQ,GAAD,CAAR;UACH;QATL,GAUC,MAVD,CAVR,CAFJ,CADH;MAAA,CADL,CAPR,CADJ;IA2CH;;;EAjD2Bb,cAAA,CAAMgB,S;;eAmDvBjB,iB"}
package/ImageUpload/MultiImageUpload.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["imagesStyle","css","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","classNames","setTimeout","imageEditorImageIndex","files","handleSelectedImages","handleErrors","browseFiles","getDropZoneProps","map","file","removeImage","onSuccess","onError","error","errorType","errorMessages","errorFileName","default","React","Component","maxSizeExceeded","unsupportedFileType"],"sources":["MultiImageUpload.tsx"],"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"],"mappings":"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"}
1
+ {"version":3,"names":["imagesStyle","css","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","classNames","setTimeout","imageEditorImageIndex","files","handleSelectedImages","handleErrors","browseFiles","getDropZoneProps","map","file","removeImage","onSuccess","onError","error","errorType","errorMessages","errorFileName","default","React","Component","maxSizeExceeded","unsupportedFileType"],"sources":["MultiImageUpload.tsx"],"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"],"mappings":"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"}
package/List/DataList/DataList.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","generalOptionsAndCallbacks","refresh","console","log","loading","boolean","title","text","multiActions","setNextPage","cursor","setPreviousPage","perPageOptions","array","setPerPage","perPage","setSorters","sorter","JSON","stringify","dataProp","object","id","firstName","lastName","email","metaProp","totalPages","totalCount","from","to","previousPage","nextPage","sortersProp","list","label","sorters","createdOn","name","readme","data","map","item","info","propTables","List","ListItem","ListItemText","ListItemTextSecondary","ListItemMeta","ListItemGraphic"],"sources":["DataList.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n Story,\n StoryReadme,\n StorySandboxCode,\n StorySandbox,\n StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../DataList/README.md\";\nimport { withKnobs, boolean, text, object, array } from \"@storybook/addon-knobs\";\n\nimport { DataList } from \"./DataList\";\n\nimport { DeleteIcon, EditIcon } from \"./icons\";\nimport {\n List,\n ListItem,\n ListItemText,\n ListItemTextSecondary,\n ListItemMeta,\n ListItemGraphic\n} from \"./../List\";\n\nconst story = storiesOf(\"Components/List\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n \"data list\",\n () => {\n const generalOptionsAndCallbacks = {\n refresh: () => {\n console.log(`Implement \"refresh\" method.`);\n },\n loading: boolean(\"Loading\", false, \"Basic\"),\n title: text(\"Title\", \"A list of all users\", \"Basic\"),\n multiActions: boolean(\"Multi actions\", false, \"Basic\"),\n\n setNextPage: (cursor: string) => {\n console.log(`Implement setNextPage method (selected ${cursor}).`);\n },\n setPreviousPage: (cursor: string) => {\n console.log(`Implement setPreviousPage method (selected ${cursor}).`);\n },\n perPageOptions: array(\n \"perPageOptions\",\n [\"10\", \"25\", \"50\"],\n \",\",\n \"Basic\"\n ) as unknown as number[],\n setPerPage: (perPage: string) => {\n console.log(`Implement setPerPage method (selected ${perPage}).`);\n },\n setSorters: (sorter: any) => {\n console.log(`Implement setSorters method (selected ${JSON.stringify(sorter)}).`);\n }\n };\n\n const dataProp = object(\n \"Data\",\n [\n {\n id: \"A\",\n firstName: \"John\",\n lastName: \"Doe\",\n email: \"john.doe@webiny.com\"\n },\n {\n id: \"B\",\n firstName: \"Jane\",\n lastName: \"Doe\",\n email: \"jane.doe@webiny.com\"\n },\n {\n id: \"C\",\n firstName: \"Foo\",\n lastName: \"Bar\",\n email: \"foo.bar@webiny.com\"\n }\n ],\n \"Data\"\n );\n\n const metaProp = object(\n \"Meta\",\n {\n totalPages: 1,\n totalCount: 3,\n from: 1,\n to: 3,\n previousPage: null,\n nextPage: null\n },\n \"Meta\"\n );\n\n const sortersProp = {\n list: object(\n \"Sorters\",\n [\n {\n label: \"Newest to oldest\",\n sorters: { createdOn: -1 }\n },\n {\n label: \"Oldest to newest\",\n sorters: { createdOn: 1 }\n },\n {\n label: \"Name A-Z\",\n sorters: { name: 1 }\n },\n {\n label: \"Name Z-A\",\n sorters: { name: -1 }\n }\n ],\n \"Sorters\"\n )\n };\n\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n\n <StorySandbox>\n <StorySandboxExample>\n <DataList\n {...generalOptionsAndCallbacks}\n data={dataProp}\n meta={metaProp}\n // @ts-ignore\n sorters={sortersProp.list}\n >\n {({ data }: { data: any[] }) => (\n <List>\n {data.map(item => (\n <ListItem key={item.id}>\n <ListItemGraphic>\n <img\n src={\"http://i.pravatar.cc/100?id=\" + item.id}\n />\n </ListItemGraphic>\n <ListItemText>\n {item.firstName} {item.lastName}\n <ListItemTextSecondary>\n {item.email}\n </ListItemTextSecondary>\n </ListItemText>\n <ListItemMeta>\n <DeleteIcon\n onClick={() => {\n console.log(\"Redirect user to form.\");\n }}\n />\n <EditIcon\n onClick={() => {\n console.log(\"Show confirmation dialog.\");\n }}\n />\n </ListItemMeta>\n </ListItem>\n ))}\n </List>\n )}\n </DataList>\n </StorySandboxExample>\n <StorySandboxCode>\n {`\n <DataList\n {...generalOptionsAndCallbacks}\n data={${JSON.stringify(dataProp, null, 2)}}\n meta={${JSON.stringify(metaProp, null, 2)}}\n sorters={${JSON.stringify(sortersProp.list, null, 2)}}\n >\n {({ data }) => (\n <List>\n {data.map(item => (\n <ListItem key={item.id}>\n <ListItemGraphic>\n <img\n src={\n \"//www.gravatar.com/avatar/\" +\n item.gravatar +\n \"?s=48\"\n }\n />\n </ListItemGraphic>\n <ListItemText>\n {item.firstName} {item.lastName}\n <ListItemTextSecondary>\n {item.email}\n </ListItemTextSecondary>\n </ListItemText>\n <ListItemMeta>\n <DeleteIcon\n onClick={() => {\n console.log(\"Redirect user to form.\");\n }}\n />\n <EditIcon\n onClick={() => {\n console.log(\"Show confirmation dialog.\");\n }}\n />\n </ListItemMeta>\n </ListItem>\n ))}\n </List>\n )}\n </DataList>\n `}\n </StorySandboxCode>\n </StorySandbox>\n </Story>\n );\n },\n {\n info: {\n propTables: [\n List,\n ListItem,\n ListItemText,\n ListItemTextSecondary,\n ListItemMeta,\n ListItemGraphic\n ]\n }\n }\n);\n"],"mappings":"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"}
1
+ {"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","generalOptionsAndCallbacks","refresh","console","log","loading","boolean","title","text","multiActions","setNextPage","cursor","setPreviousPage","perPageOptions","array","setPerPage","perPage","setSorters","sorter","JSON","stringify","dataProp","object","id","firstName","lastName","email","metaProp","totalPages","totalCount","from","to","previousPage","nextPage","sortersProp","list","label","sorters","createdOn","name","readme","data","map","item","info","propTables","List","ListItem","ListItemText","ListItemTextSecondary","ListItemMeta","ListItemGraphic"],"sources":["DataList.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n Story,\n StoryReadme,\n StorySandboxCode,\n StorySandbox,\n StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../DataList/README.md\";\nimport { withKnobs, boolean, text, object, array } from \"@storybook/addon-knobs\";\n\nimport { DataList } from \"./DataList\";\n\nimport { DeleteIcon, EditIcon } from \"./icons\";\nimport {\n List,\n ListItem,\n ListItemText,\n ListItemTextSecondary,\n ListItemMeta,\n ListItemGraphic\n} from \"./../List\";\n\nconst story = storiesOf(\"Components/List\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n \"data list\",\n () => {\n const generalOptionsAndCallbacks = {\n refresh: () => {\n console.log(`Implement \"refresh\" method.`);\n },\n loading: boolean(\"Loading\", false, \"Basic\"),\n title: text(\"Title\", \"A list of all users\", \"Basic\"),\n multiActions: boolean(\"Multi actions\", false, \"Basic\"),\n\n setNextPage: (cursor: string) => {\n console.log(`Implement setNextPage method (selected ${cursor}).`);\n },\n setPreviousPage: (cursor: string) => {\n console.log(`Implement setPreviousPage method (selected ${cursor}).`);\n },\n perPageOptions: array(\n \"perPageOptions\",\n [\"10\", \"25\", \"50\"],\n \",\",\n \"Basic\"\n ) as unknown as number[],\n setPerPage: (perPage: string) => {\n console.log(`Implement setPerPage method (selected ${perPage}).`);\n },\n setSorters: (sorter: any) => {\n console.log(`Implement setSorters method (selected ${JSON.stringify(sorter)}).`);\n }\n };\n\n const dataProp = object(\n \"Data\",\n [\n {\n id: \"A\",\n firstName: \"John\",\n lastName: \"Doe\",\n email: \"john.doe@webiny.com\"\n },\n {\n id: \"B\",\n firstName: \"Jane\",\n lastName: \"Doe\",\n email: \"jane.doe@webiny.com\"\n },\n {\n id: \"C\",\n firstName: \"Foo\",\n lastName: \"Bar\",\n email: \"foo.bar@webiny.com\"\n }\n ],\n \"Data\"\n );\n\n const metaProp = object(\n \"Meta\",\n {\n totalPages: 1,\n totalCount: 3,\n from: 1,\n to: 3,\n previousPage: null,\n nextPage: null\n },\n \"Meta\"\n );\n\n const sortersProp = {\n list: object(\n \"Sorters\",\n [\n {\n label: \"Newest to oldest\",\n sorters: { createdOn: -1 }\n },\n {\n label: \"Oldest to newest\",\n sorters: { createdOn: 1 }\n },\n {\n label: \"Name A-Z\",\n sorters: { name: 1 }\n },\n {\n label: \"Name Z-A\",\n sorters: { name: -1 }\n }\n ],\n \"Sorters\"\n )\n };\n\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n\n <StorySandbox>\n <StorySandboxExample>\n <DataList\n {...generalOptionsAndCallbacks}\n data={dataProp}\n meta={metaProp}\n // @ts-ignore\n sorters={sortersProp.list}\n >\n {({ data }: { data: any[] }) => (\n <List>\n {data.map(item => (\n <ListItem key={item.id}>\n <ListItemGraphic>\n <img\n src={\"http://i.pravatar.cc/100?id=\" + item.id}\n />\n </ListItemGraphic>\n <ListItemText>\n {item.firstName} {item.lastName}\n <ListItemTextSecondary>\n {item.email}\n </ListItemTextSecondary>\n </ListItemText>\n <ListItemMeta>\n <DeleteIcon\n onClick={() => {\n console.log(\"Redirect user to form.\");\n }}\n />\n <EditIcon\n onClick={() => {\n console.log(\"Show confirmation dialog.\");\n }}\n />\n </ListItemMeta>\n </ListItem>\n ))}\n </List>\n )}\n </DataList>\n </StorySandboxExample>\n <StorySandboxCode>\n {`\n <DataList\n {...generalOptionsAndCallbacks}\n data={${JSON.stringify(dataProp, null, 2)}}\n meta={${JSON.stringify(metaProp, null, 2)}}\n sorters={${JSON.stringify(sortersProp.list, null, 2)}}\n >\n {({ data }) => (\n <List>\n {data.map(item => (\n <ListItem key={item.id}>\n <ListItemGraphic>\n <img\n src={\n \"//www.gravatar.com/avatar/\" +\n item.gravatar +\n \"?s=48\"\n }\n />\n </ListItemGraphic>\n <ListItemText>\n {item.firstName} {item.lastName}\n <ListItemTextSecondary>\n {item.email}\n </ListItemTextSecondary>\n </ListItemText>\n <ListItemMeta>\n <DeleteIcon\n onClick={() => {\n console.log(\"Redirect user to form.\");\n }}\n />\n <EditIcon\n onClick={() => {\n console.log(\"Show confirmation dialog.\");\n }}\n />\n </ListItemMeta>\n </ListItem>\n ))}\n </List>\n )}\n </DataList>\n `}\n </StorySandboxCode>\n </StorySandbox>\n </Story>\n );\n },\n {\n info: {\n propTables: [\n List,\n ListItem,\n ListItemText,\n ListItemTextSecondary,\n ListItemMeta,\n ListItemGraphic\n ]\n }\n }\n);\n"],"mappings":"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"}
package/List/DataList/NoData.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["NoDataWrapper","styled","textAlign","padding","color","NoData"],"sources":["NoData.tsx"],"sourcesContent":["import React from \"react\";\nimport { Typography } from \"../../Typography\";\nimport styled from \"@emotion/styled\";\n\nconst NoDataWrapper = styled(\"div\")({\n textAlign: \"center\",\n padding: 100,\n color: \"var(--mdc-theme-on-surface)\"\n});\n\nconst NoData: React.FC = () => (\n <NoDataWrapper>\n <Typography use=\"overline\">No records found.</Typography>\n </NoDataWrapper>\n);\n\nexport default NoData;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA,IAAMA,aAAa,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EAChCC,SAAS,EAAE,QADqB;EAEhCC,OAAO,EAAE,GAFuB;EAGhCC,KAAK,EAAE;AAHyB,CAAjB,CAAnB;;AAMA,IAAMC,MAAgB,GAAG,SAAnBA,MAAmB;EAAA,oBACrB,6BAAC,aAAD,qBACI,6BAAC,sBAAD;IAAY,GAAG,EAAC;EAAhB,uBADJ,CADqB;AAAA,CAAzB;;eAMeA,M"}
1
+ {"version":3,"names":["NoDataWrapper","styled","textAlign","padding","color","NoData"],"sources":["NoData.tsx"],"sourcesContent":["import React from \"react\";\nimport { Typography } from \"../../Typography\";\nimport styled from \"@emotion/styled\";\n\nconst NoDataWrapper = styled(\"div\")({\n textAlign: \"center\",\n padding: 100,\n color: \"var(--mdc-theme-on-surface)\"\n});\n\nconst NoData: React.FC = () => (\n <NoDataWrapper>\n <Typography use=\"overline\">No records found.</Typography>\n </NoDataWrapper>\n);\n\nexport default NoData;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA,IAAMA,aAAa,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EAChCC,SAAS,EAAE,QADqB;EAEhCC,OAAO,EAAE,GAFuB;EAGhCC,KAAK,EAAE;AAHyB,CAAjB,CAAnB;;AAMA,IAAMC,MAAgB,GAAG,SAAnBA,MAAmB;EAAA,oBACrB,6BAAC,aAAD,qBACI,6BAAC,sBAAD;IAAY,GAAG,EAAC;EAAhB,GAA2B,mBAA3B,CADJ,CADqB;AAAA,CAAzB;;eAMeA,M"}
package/List/List.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","List","ListItem","ListItemText","ListItemTextSecondary","ListItemMeta","ListItemGraphic","ListItemTextPrimary"],"sources":["List.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n Story,\n StoryReadme,\n StorySandboxCode,\n StorySandbox,\n StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../List/README.md\";\n\nimport { Icon } from \"./../Icon\";\nimport { ButtonPrimary } from \"./../Button\";\n\nimport { ReactComponent as AutoRenewIcon } from \"./icons/baseline-autorenew-24px.svg\";\nimport { ReactComponent as CloudDoneIcon } from \"./icons/baseline-cloud_done-24px.svg\";\nimport { ReactComponent as BaselineDeleteIcon } from \"./icons/baseline-delete-24px.svg\";\nimport { ReactComponent as BaselineDoneIcon } from \"./icons/baseline-done-24px.svg\";\n\nimport {\n List,\n ListItem,\n ListItemText,\n ListItemTextSecondary,\n ListItemMeta,\n ListItemGraphic,\n ListItemTextPrimary\n} from \"./List\";\n\nconst story = storiesOf(\"Components/List\", module);\n\nstory.add(\n \"simple list\",\n () => {\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n <StorySandbox>\n <StorySandboxExample title={\"Basic list\"}>\n <List>\n <ListItem>Item 1</ListItem>\n <ListItem>\n <ListItemGraphic>\n <Icon icon={<BaselineDeleteIcon />} />\n </ListItemGraphic>\n Item 2 - with icon on left side\n </ListItem>\n <ListItem>\n Item 3 - with icon on right side\n <ListItemMeta>\n <Icon icon={<BaselineDoneIcon />} />\n </ListItemMeta>\n </ListItem>\n <ListItem>\n <ListItemGraphic>\n <Icon icon={<BaselineDeleteIcon />} />\n </ListItemGraphic>\n Item 4 - icons on both sides\n <ListItemMeta>\n <Icon icon={<BaselineDoneIcon />} />\n </ListItemMeta>\n </ListItem>\n </List>\n </StorySandboxExample>\n <StorySandboxCode>\n {`\n <List>\n <ListItem>\n Item 1\n </ListItem>\n\n <ListItem>\n <ListItemGraphic>\n <Icon icon={<BaselineDeleteIcon />} />\n </ListItemGraphic>\n Item 2 - with icon on left side\n </ListItem>\n <ListItem>\n Item 3 - with icon on right side\n <ListItemMeta>\n <Icon icon={<BaselineDoneIcon />} />\n </ListItemMeta>\n </ListItem>\n <ListItem>\n <ListItemGraphic>\n <Icon icon={<BaselineDeleteIcon />} />\n </ListItemGraphic>\n Item 4 - icons on both sides\n <ListItemMeta>\n <Icon icon={<BaselineDoneIcon />} />\n </ListItemMeta>\n </ListItem>\n </List>\n `}\n </StorySandboxCode>\n </StorySandbox>\n\n <StorySandbox>\n <StorySandboxExample title={\"List with 2 lines\"}>\n <List twoLine>\n <ListItem>\n <ListItemText>\n <ListItemTextPrimary>Primary text</ListItemTextPrimary>\n <ListItemTextSecondary>Secondary text</ListItemTextSecondary>\n </ListItemText>\n </ListItem>\n <ListItem>\n <ListItemText>\n <ListItemTextPrimary>Primary text</ListItemTextPrimary>\n <ListItemTextSecondary>Secondary text</ListItemTextSecondary>\n </ListItemText>\n </ListItem>\n <ListItem>\n <ListItemText>\n <ListItemTextPrimary>Primary text</ListItemTextPrimary>\n <ListItemTextSecondary>Secondary text</ListItemTextSecondary>\n </ListItemText>\n </ListItem>\n </List>\n </StorySandboxExample>\n <StorySandboxCode>\n {`\n <List twoLine>\n <ListItem>\n <ListItemText>\n <ListItemTextPrimary>\n Primary text\n </ListItemTextPrimary>\n <ListItemTextSecondary>\n Secondary text\n </ListItemTextSecondary>\n </ListItemText>\n </ListItem>\n <ListItem>\n <ListItemText>\n <ListItemTextPrimary>\n Primary text\n </ListItemTextPrimary>\n <ListItemTextSecondary>\n Secondary text\n </ListItemTextSecondary>\n </ListItemText>\n </ListItem>\n <ListItem>\n <ListItemText>\n <ListItemTextPrimary>\n Primary text\n </ListItemTextPrimary>\n <ListItemTextSecondary>\n Secondary text\n </ListItemTextSecondary>\n </ListItemText>\n </ListItem>\n </List>\n `}\n </StorySandboxCode>\n </StorySandbox>\n\n <StorySandbox>\n <StorySandboxExample title={\"A list with all possible options\"}>\n <List twoLine>\n <ListItem>\n <ListItemGraphic>\n <Icon icon={<AutoRenewIcon />} />\n </ListItemGraphic>\n <ListItemText>\n <ListItemTextPrimary>Rocket</ListItemTextPrimary>\n <ListItemTextSecondary>\n This could be a really cool rocket.\n </ListItemTextSecondary>\n </ListItemText>\n <ListItemMeta>\n <Icon icon={<CloudDoneIcon />} />\n </ListItemMeta>\n </ListItem>\n\n <ListItem>\n <ListItemGraphic>\n <Icon icon={<BaselineDeleteIcon />} />\n </ListItemGraphic>\n <ListItemText>\n <ListItemTextPrimary>Coffee</ListItemTextPrimary>\n <ListItemTextSecondary>\n A nice cup of coffee.\n </ListItemTextSecondary>\n </ListItemText>\n <ListItemMeta>\n <Icon icon={<BaselineDoneIcon />} />\n </ListItemMeta>\n </ListItem>\n <ListItem>\n <ListItemGraphic>\n <Icon icon={<AutoRenewIcon />} />\n </ListItemGraphic>\n <ListItemText>\n <ListItemTextPrimary>E-mail</ListItemTextPrimary>\n <ListItemTextSecondary>\n Send an e-mail to your best friend.\n </ListItemTextSecondary>\n </ListItemText>\n <ListItemMeta>\n <ButtonPrimary>Send</ButtonPrimary>\n </ListItemMeta>\n </ListItem>\n </List>\n </StorySandboxExample>\n <StorySandboxCode>\n {`\n <List twoLine>\n <ListItem>\n <ListItemGraphic>\n <Icon icon={<AutoRenewIcon />} />\n </ListItemGraphic>\n <ListItemText>\n <ListItemTextPrimary>Rocket</ListItemTextPrimary>\n <ListItemTextSecondary>\n This could be a really cool rocket.\n </ListItemTextSecondary>\n </ListItemText>\n <ListItemMeta>\n <Icon icon={<CloudDoneIcon />} />\n </ListItemMeta>\n </ListItem>\n\n <ListItem>\n <ListItemGraphic>\n <Icon icon={<BaselineDeleteIcon />} />\n </ListItemGraphic>\n <ListItemText>\n <ListItemTextPrimary>Coffee</ListItemTextPrimary>\n <ListItemTextSecondary>A nice cup of coffee.</ListItemTextSecondary>\n </ListItemText>\n <ListItemMeta>\n <Icon icon={<BaselineDoneIcon />} />\n </ListItemMeta>\n </ListItem>\n <ListItem>\n <ListItemGraphic>\n <Icon icon={<AutoRenewIcon />} />\n </ListItemGraphic>\n <ListItemText>\n <ListItemTextPrimary>E-mail</ListItemTextPrimary>\n <ListItemTextSecondary>\n Send an e-mail to your best friend.\n </ListItemTextSecondary>\n </ListItemText>\n <ListItemMeta>\n <ButtonPrimary>Send</ButtonPrimary>\n </ListItemMeta>\n </ListItem>\n </List>\n `}\n </StorySandboxCode>\n </StorySandbox>\n </Story>\n );\n },\n {\n info: {\n propTables: [\n List,\n ListItem,\n ListItemText,\n ListItemTextSecondary,\n ListItemMeta,\n ListItemGraphic,\n ListItemTextPrimary\n ]\n }\n }\n);\n"],"mappings":"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"}
1
+ {"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","List","ListItem","ListItemText","ListItemTextSecondary","ListItemMeta","ListItemGraphic","ListItemTextPrimary"],"sources":["List.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n Story,\n StoryReadme,\n StorySandboxCode,\n StorySandbox,\n StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../List/README.md\";\n\nimport { Icon } from \"./../Icon\";\nimport { ButtonPrimary } from \"./../Button\";\n\nimport { ReactComponent as AutoRenewIcon } from \"./icons/baseline-autorenew-24px.svg\";\nimport { ReactComponent as CloudDoneIcon } from \"./icons/baseline-cloud_done-24px.svg\";\nimport { ReactComponent as BaselineDeleteIcon } from \"./icons/baseline-delete-24px.svg\";\nimport { ReactComponent as BaselineDoneIcon } from \"./icons/baseline-done-24px.svg\";\n\nimport {\n List,\n ListItem,\n ListItemText,\n ListItemTextSecondary,\n ListItemMeta,\n ListItemGraphic,\n ListItemTextPrimary\n} from \"./List\";\n\nconst story = storiesOf(\"Components/List\", module);\n\nstory.add(\n \"simple list\",\n () => {\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n <StorySandbox>\n <StorySandboxExample title={\"Basic list\"}>\n <List>\n <ListItem>Item 1</ListItem>\n <ListItem>\n <ListItemGraphic>\n <Icon icon={<BaselineDeleteIcon />} />\n </ListItemGraphic>\n Item 2 - with icon on left side\n </ListItem>\n <ListItem>\n Item 3 - with icon on right side\n <ListItemMeta>\n <Icon icon={<BaselineDoneIcon />} />\n </ListItemMeta>\n </ListItem>\n <ListItem>\n <ListItemGraphic>\n <Icon icon={<BaselineDeleteIcon />} />\n </ListItemGraphic>\n Item 4 - icons on both sides\n <ListItemMeta>\n <Icon icon={<BaselineDoneIcon />} />\n </ListItemMeta>\n </ListItem>\n </List>\n </StorySandboxExample>\n <StorySandboxCode>\n {`\n <List>\n <ListItem>\n Item 1\n </ListItem>\n\n <ListItem>\n <ListItemGraphic>\n <Icon icon={<BaselineDeleteIcon />} />\n </ListItemGraphic>\n Item 2 - with icon on left side\n </ListItem>\n <ListItem>\n Item 3 - with icon on right side\n <ListItemMeta>\n <Icon icon={<BaselineDoneIcon />} />\n </ListItemMeta>\n </ListItem>\n <ListItem>\n <ListItemGraphic>\n <Icon icon={<BaselineDeleteIcon />} />\n </ListItemGraphic>\n Item 4 - icons on both sides\n <ListItemMeta>\n <Icon icon={<BaselineDoneIcon />} />\n </ListItemMeta>\n </ListItem>\n </List>\n `}\n </StorySandboxCode>\n </StorySandbox>\n\n <StorySandbox>\n <StorySandboxExample title={\"List with 2 lines\"}>\n <List twoLine>\n <ListItem>\n <ListItemText>\n <ListItemTextPrimary>Primary text</ListItemTextPrimary>\n <ListItemTextSecondary>Secondary text</ListItemTextSecondary>\n </ListItemText>\n </ListItem>\n <ListItem>\n <ListItemText>\n <ListItemTextPrimary>Primary text</ListItemTextPrimary>\n <ListItemTextSecondary>Secondary text</ListItemTextSecondary>\n </ListItemText>\n </ListItem>\n <ListItem>\n <ListItemText>\n <ListItemTextPrimary>Primary text</ListItemTextPrimary>\n <ListItemTextSecondary>Secondary text</ListItemTextSecondary>\n </ListItemText>\n </ListItem>\n </List>\n </StorySandboxExample>\n <StorySandboxCode>\n {`\n <List twoLine>\n <ListItem>\n <ListItemText>\n <ListItemTextPrimary>\n Primary text\n </ListItemTextPrimary>\n <ListItemTextSecondary>\n Secondary text\n </ListItemTextSecondary>\n </ListItemText>\n </ListItem>\n <ListItem>\n <ListItemText>\n <ListItemTextPrimary>\n Primary text\n </ListItemTextPrimary>\n <ListItemTextSecondary>\n Secondary text\n </ListItemTextSecondary>\n </ListItemText>\n </ListItem>\n <ListItem>\n <ListItemText>\n <ListItemTextPrimary>\n Primary text\n </ListItemTextPrimary>\n <ListItemTextSecondary>\n Secondary text\n </ListItemTextSecondary>\n </ListItemText>\n </ListItem>\n </List>\n `}\n </StorySandboxCode>\n </StorySandbox>\n\n <StorySandbox>\n <StorySandboxExample title={\"A list with all possible options\"}>\n <List twoLine>\n <ListItem>\n <ListItemGraphic>\n <Icon icon={<AutoRenewIcon />} />\n </ListItemGraphic>\n <ListItemText>\n <ListItemTextPrimary>Rocket</ListItemTextPrimary>\n <ListItemTextSecondary>\n This could be a really cool rocket.\n </ListItemTextSecondary>\n </ListItemText>\n <ListItemMeta>\n <Icon icon={<CloudDoneIcon />} />\n </ListItemMeta>\n </ListItem>\n\n <ListItem>\n <ListItemGraphic>\n <Icon icon={<BaselineDeleteIcon />} />\n </ListItemGraphic>\n <ListItemText>\n <ListItemTextPrimary>Coffee</ListItemTextPrimary>\n <ListItemTextSecondary>\n A nice cup of coffee.\n </ListItemTextSecondary>\n </ListItemText>\n <ListItemMeta>\n <Icon icon={<BaselineDoneIcon />} />\n </ListItemMeta>\n </ListItem>\n <ListItem>\n <ListItemGraphic>\n <Icon icon={<AutoRenewIcon />} />\n </ListItemGraphic>\n <ListItemText>\n <ListItemTextPrimary>E-mail</ListItemTextPrimary>\n <ListItemTextSecondary>\n Send an e-mail to your best friend.\n </ListItemTextSecondary>\n </ListItemText>\n <ListItemMeta>\n <ButtonPrimary>Send</ButtonPrimary>\n </ListItemMeta>\n </ListItem>\n </List>\n </StorySandboxExample>\n <StorySandboxCode>\n {`\n <List twoLine>\n <ListItem>\n <ListItemGraphic>\n <Icon icon={<AutoRenewIcon />} />\n </ListItemGraphic>\n <ListItemText>\n <ListItemTextPrimary>Rocket</ListItemTextPrimary>\n <ListItemTextSecondary>\n This could be a really cool rocket.\n </ListItemTextSecondary>\n </ListItemText>\n <ListItemMeta>\n <Icon icon={<CloudDoneIcon />} />\n </ListItemMeta>\n </ListItem>\n\n <ListItem>\n <ListItemGraphic>\n <Icon icon={<BaselineDeleteIcon />} />\n </ListItemGraphic>\n <ListItemText>\n <ListItemTextPrimary>Coffee</ListItemTextPrimary>\n <ListItemTextSecondary>A nice cup of coffee.</ListItemTextSecondary>\n </ListItemText>\n <ListItemMeta>\n <Icon icon={<BaselineDoneIcon />} />\n </ListItemMeta>\n </ListItem>\n <ListItem>\n <ListItemGraphic>\n <Icon icon={<AutoRenewIcon />} />\n </ListItemGraphic>\n <ListItemText>\n <ListItemTextPrimary>E-mail</ListItemTextPrimary>\n <ListItemTextSecondary>\n Send an e-mail to your best friend.\n </ListItemTextSecondary>\n </ListItemText>\n <ListItemMeta>\n <ButtonPrimary>Send</ButtonPrimary>\n </ListItemMeta>\n </ListItem>\n </List>\n `}\n </StorySandboxCode>\n </StorySandbox>\n </Story>\n );\n },\n {\n info: {\n propTables: [\n List,\n ListItem,\n ListItemText,\n ListItemTextSecondary,\n ListItemMeta,\n ListItemGraphic,\n ListItemTextPrimary\n ]\n }\n }\n);\n"],"mappings":"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"}
package/Menu/Menu.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["story","storiesOf","module","style","position","width","margin","add","readme","console","log","info","propTables","Menu","MenuItem","MenuDivider"],"sources":["Menu.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n Story,\n StoryReadme,\n StorySandbox,\n StorySandboxExample,\n StorySandboxCode\n} from \"@webiny/storybook-utils/Story\";\nimport { ButtonPrimary } from \"~/Button\";\nimport readme from \"./../Menu/README.md\";\nimport { Menu, MenuItem, MenuDivider } from \"./Menu\";\n\nconst story = storiesOf(\"Components/Menu\", module);\n\nconst style: React.CSSProperties = {\n position: \"relative\",\n width: 200,\n margin: \"0 auto\"\n};\n\nstory.add(\n \"usage\",\n () => {\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n <StorySandbox>\n <StorySandboxExample title={\"A simple menu, triggered with a button\"}>\n <div style={style}>\n <Menu handle={<ButtonPrimary>Open menu</ButtonPrimary>}>\n <MenuItem\n onClick={() => {\n console.log(\"Apple selected!\");\n }}\n >\n Apple\n </MenuItem>\n <MenuItem>Banana</MenuItem>\n <MenuItem>Watermelon</MenuItem>\n </Menu>\n </div>\n </StorySandboxExample>\n <StorySandboxCode>\n {`\n <Menu handle={<ButtonPrimary>Open menu</ButtonPrimary>}>\n <MenuItem\n onClick={() => {\n console.log(\"Apple selected!\");\n }}\n >\n Apple\n </MenuItem>\n <MenuItem>Banana</MenuItem>\n <MenuItem>Watermelon</MenuItem>\n </Menu>\n `}\n </StorySandboxCode>\n </StorySandbox>\n </Story>\n );\n },\n { info: { propTables: [Menu, MenuItem, MenuDivider] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,iBAAV,EAA6BC,MAA7B,CAAd;AAEA,IAAMC,KAA0B,GAAG;EAC/BC,QAAQ,EAAE,UADqB;EAE/BC,KAAK,EAAE,GAFwB;EAG/BC,MAAM,EAAE;AAHuB,CAAnC;AAMAN,KAAK,CAACO,GAAN,CACI,OADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD;IAAqB,KAAK,EAAE;EAA5B,gBACI;IAAK,KAAK,EAAEL;EAAZ,gBACI,6BAAC,UAAD;IAAM,MAAM,eAAE,6BAAC,qBAAD;EAAd,gBACI,6BAAC,cAAD;IACI,OAAO,EAAE,mBAAM;MACXM,OAAO,CAACC,GAAR,CAAY,iBAAZ;IACH;EAHL,WADJ,eAQI,6BAAC,cAAD,iBARJ,eASI,6BAAC,cAAD,qBATJ,CADJ,CADJ,CADJ,eAgBI,6BAAC,uBAAD,ghBAhBJ,CAFJ,CADJ;AAqCH,CAxCL,EAyCI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,UAAD,EAAOC,cAAP,EAAiBC,iBAAjB;EAAd;AAAR,CAzCJ"}
1
+ {"version":3,"names":["story","storiesOf","module","style","position","width","margin","add","readme","console","log","info","propTables","Menu","MenuItem","MenuDivider"],"sources":["Menu.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n Story,\n StoryReadme,\n StorySandbox,\n StorySandboxExample,\n StorySandboxCode\n} from \"@webiny/storybook-utils/Story\";\nimport { ButtonPrimary } from \"~/Button\";\nimport readme from \"./../Menu/README.md\";\nimport { Menu, MenuItem, MenuDivider } from \"./Menu\";\n\nconst story = storiesOf(\"Components/Menu\", module);\n\nconst style: React.CSSProperties = {\n position: \"relative\",\n width: 200,\n margin: \"0 auto\"\n};\n\nstory.add(\n \"usage\",\n () => {\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n <StorySandbox>\n <StorySandboxExample title={\"A simple menu, triggered with a button\"}>\n <div style={style}>\n <Menu handle={<ButtonPrimary>Open menu</ButtonPrimary>}>\n <MenuItem\n onClick={() => {\n console.log(\"Apple selected!\");\n }}\n >\n Apple\n </MenuItem>\n <MenuItem>Banana</MenuItem>\n <MenuItem>Watermelon</MenuItem>\n </Menu>\n </div>\n </StorySandboxExample>\n <StorySandboxCode>\n {`\n <Menu handle={<ButtonPrimary>Open menu</ButtonPrimary>}>\n <MenuItem\n onClick={() => {\n console.log(\"Apple selected!\");\n }}\n >\n Apple\n </MenuItem>\n <MenuItem>Banana</MenuItem>\n <MenuItem>Watermelon</MenuItem>\n </Menu>\n `}\n </StorySandboxCode>\n </StorySandbox>\n </Story>\n );\n },\n { info: { propTables: [Menu, MenuItem, MenuDivider] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,iBAAV,EAA6BC,MAA7B,CAAd;AAEA,IAAMC,KAA0B,GAAG;EAC/BC,QAAQ,EAAE,UADqB;EAE/BC,KAAK,EAAE,GAFwB;EAG/BC,MAAM,EAAE;AAHuB,CAAnC;AAMAN,KAAK,CAACO,GAAN,CACI,OADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD;IAAqB,KAAK,EAAE;EAA5B,gBACI;IAAK,KAAK,EAAEL;EAAZ,gBACI,6BAAC,UAAD;IAAM,MAAM,eAAE,6BAAC,qBAAD,QAAe,WAAf;EAAd,gBACI,6BAAC,cAAD;IACI,OAAO,EAAE,mBAAM;MACXM,OAAO,CAACC,GAAR,CAAY,iBAAZ;IACH;EAHL,GAIC,OAJD,CADJ,eAQI,6BAAC,cAAD,QAAU,QAAV,CARJ,eASI,6BAAC,cAAD,QAAU,YAAV,CATJ,CADJ,CADJ,CADJ,eAgBI,6BAAC,uBAAD,ghBAhBJ,CAFJ,CADJ;AAqCH,CAxCL,EAyCI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,UAAD,EAAOC,cAAP,EAAiBC,iBAAjB;EAAd;AAAR,CAzCJ"}
package/Ripple/Ripple.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","disabled","boolean","style","padding","width","height","display","readme","info","propTables","Ripple"],"sources":["Ripple.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n Story,\n StoryReadme,\n StorySandboxCode,\n StorySandbox,\n StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../Ripple/README.md\";\nimport { Icon } from \"~/Icon\";\nimport { withKnobs, boolean } from \"@storybook/addon-knobs\";\n\nimport { ReactComponent as AutoRenewIcon } from \"./svg/baseline-autorenew-24px.svg\";\nimport { ReactComponent as CloudDoneIcon } from \"./svg/baseline-cloud_done-24px.svg\";\nimport { ReactComponent as BaselineDeleteIcon } from \"./svg/baseline-delete-24px.svg\";\nimport { ReactComponent as BaselineDoneIcon } from \"./svg/baseline-done-24px.svg\";\n\nimport { Ripple } from \"./Ripple\";\n\nconst story = storiesOf(\"Components/Ripple\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n \"usage\",\n () => {\n const disabled = boolean(\"Disabled\", false);\n\n const style = { padding: 20, width: 20, height: 20, display: \"inline-block\" };\n\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n <StorySandbox title={\"Icon with and without ripple\"}>\n <StorySandboxExample>\n <div>\n <div>No effect</div>\n <div style={style}>\n <Icon icon={<AutoRenewIcon />} />\n </div>\n\n <div>\n <code>unbounded</code>\n </div>\n <Ripple type=\"unbounded\" disabled={disabled}>\n <div style={style}>\n <Icon icon={<CloudDoneIcon />} />\n </div>\n </Ripple>\n\n <div>\n <code>primary</code>\n </div>\n <Ripple type=\"primary\" disabled={disabled}>\n <div style={style}>\n <Icon icon={<BaselineDeleteIcon />} />\n </div>\n </Ripple>\n\n <div>\n <code>accent</code>\n </div>\n <Ripple type=\"accent\" disabled={disabled}>\n <div style={style}>\n <Icon icon={<BaselineDoneIcon />} />\n </div>\n </Ripple>\n </div>\n </StorySandboxExample>\n <StorySandboxCode>\n <div>\n <div>\n <Icon icon={<AutoRenewIcon />} />\n </div>\n\n <Ripple type=\"unbounded\" disabled={disabled}>\n <div>\n <Icon icon={<CloudDoneIcon />} />\n </div>\n </Ripple>\n\n <Ripple type=\"primary\" disabled={disabled}>\n <div>\n <Icon icon={<BaselineDeleteIcon />} />\n </div>\n </Ripple>\n\n <Ripple type=\"accent\" disabled={disabled}>\n <div>\n <Icon icon={<BaselineDoneIcon />} />\n </div>\n </Ripple>\n </div>\n </StorySandboxCode>\n </StorySandbox>\n </Story>\n );\n },\n { info: { propTables: [Ripple] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AAEA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,mBAAV,EAA+BC,MAA/B,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEAJ,KAAK,CAACK,GAAN,CACI,OADJ,EAEI,YAAM;EACF,IAAMC,QAAQ,GAAG,IAAAC,mBAAA,EAAQ,UAAR,EAAoB,KAApB,CAAjB;EAEA,IAAMC,KAAK,GAAG;IAAEC,OAAO,EAAE,EAAX;IAAeC,KAAK,EAAE,EAAtB;IAA0BC,MAAM,EAAE,EAAlC;IAAsCC,OAAO,EAAE;EAA/C,CAAd;EAEA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,0BAAD,qBACI,uDACI,sDADJ,eAEI;IAAK,KAAK,EAAEL;EAAZ,gBACI,6BAAC,UAAD;IAAM,IAAI,eAAE,6BAAC,qCAAD;EAAZ,EADJ,CAFJ,eAMI,uDACI,uDADJ,CANJ,eASI,6BAAC,cAAD;IAAQ,IAAI,EAAC,WAAb;IAAyB,QAAQ,EAAEF;EAAnC,gBACI;IAAK,KAAK,EAAEE;EAAZ,gBACI,6BAAC,UAAD;IAAM,IAAI,eAAE,6BAAC,sCAAD;EAAZ,EADJ,CADJ,CATJ,eAeI,uDACI,qDADJ,CAfJ,eAkBI,6BAAC,cAAD;IAAQ,IAAI,EAAC,SAAb;IAAuB,QAAQ,EAAEF;EAAjC,gBACI;IAAK,KAAK,EAAEE;EAAZ,gBACI,6BAAC,UAAD;IAAM,IAAI,eAAE,6BAAC,kCAAD;EAAZ,EADJ,CADJ,CAlBJ,eAwBI,uDACI,oDADJ,CAxBJ,eA2BI,6BAAC,cAAD;IAAQ,IAAI,EAAC,QAAb;IAAsB,QAAQ,EAAEF;EAAhC,gBACI;IAAK,KAAK,EAAEE;EAAZ,gBACI,6BAAC,UAAD;IAAM,IAAI,eAAE,6BAAC,gCAAD;EAAZ,EADJ,CADJ,CA3BJ,CADJ,CADJ,eAoCI,6BAAC,uBAAD,qBACI,uDACI,uDACI,6BAAC,UAAD;IAAM,IAAI,eAAE,6BAAC,qCAAD;EAAZ,EADJ,CADJ,eAKI,6BAAC,cAAD;IAAQ,IAAI,EAAC,WAAb;IAAyB,QAAQ,EAAEF;EAAnC,gBACI,uDACI,6BAAC,UAAD;IAAM,IAAI,eAAE,6BAAC,sCAAD;EAAZ,EADJ,CADJ,CALJ,eAWI,6BAAC,cAAD;IAAQ,IAAI,EAAC,SAAb;IAAuB,QAAQ,EAAEA;EAAjC,gBACI,uDACI,6BAAC,UAAD;IAAM,IAAI,eAAE,6BAAC,kCAAD;EAAZ,EADJ,CADJ,CAXJ,eAiBI,6BAAC,cAAD;IAAQ,IAAI,EAAC,QAAb;IAAsB,QAAQ,EAAEA;EAAhC,gBACI,uDACI,6BAAC,UAAD;IAAM,IAAI,eAAE,6BAAC,gCAAD;EAAZ,EADJ,CADJ,CAjBJ,CADJ,CApCJ,CAFJ,CADJ;AAmEH,CA1EL,EA2EI;EAAEQ,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,cAAD;EAAd;AAAR,CA3EJ"}
1
+ {"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","disabled","boolean","style","padding","width","height","display","readme","info","propTables","Ripple"],"sources":["Ripple.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n Story,\n StoryReadme,\n StorySandboxCode,\n StorySandbox,\n StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../Ripple/README.md\";\nimport { Icon } from \"~/Icon\";\nimport { withKnobs, boolean } from \"@storybook/addon-knobs\";\n\nimport { ReactComponent as AutoRenewIcon } from \"./svg/baseline-autorenew-24px.svg\";\nimport { ReactComponent as CloudDoneIcon } from \"./svg/baseline-cloud_done-24px.svg\";\nimport { ReactComponent as BaselineDeleteIcon } from \"./svg/baseline-delete-24px.svg\";\nimport { ReactComponent as BaselineDoneIcon } from \"./svg/baseline-done-24px.svg\";\n\nimport { Ripple } from \"./Ripple\";\n\nconst story = storiesOf(\"Components/Ripple\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n \"usage\",\n () => {\n const disabled = boolean(\"Disabled\", false);\n\n const style = { padding: 20, width: 20, height: 20, display: \"inline-block\" };\n\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n <StorySandbox title={\"Icon with and without ripple\"}>\n <StorySandboxExample>\n <div>\n <div>No effect</div>\n <div style={style}>\n <Icon icon={<AutoRenewIcon />} />\n </div>\n\n <div>\n <code>unbounded</code>\n </div>\n <Ripple type=\"unbounded\" disabled={disabled}>\n <div style={style}>\n <Icon icon={<CloudDoneIcon />} />\n </div>\n </Ripple>\n\n <div>\n <code>primary</code>\n </div>\n <Ripple type=\"primary\" disabled={disabled}>\n <div style={style}>\n <Icon icon={<BaselineDeleteIcon />} />\n </div>\n </Ripple>\n\n <div>\n <code>accent</code>\n </div>\n <Ripple type=\"accent\" disabled={disabled}>\n <div style={style}>\n <Icon icon={<BaselineDoneIcon />} />\n </div>\n </Ripple>\n </div>\n </StorySandboxExample>\n <StorySandboxCode>\n <div>\n <div>\n <Icon icon={<AutoRenewIcon />} />\n </div>\n\n <Ripple type=\"unbounded\" disabled={disabled}>\n <div>\n <Icon icon={<CloudDoneIcon />} />\n </div>\n </Ripple>\n\n <Ripple type=\"primary\" disabled={disabled}>\n <div>\n <Icon icon={<BaselineDeleteIcon />} />\n </div>\n </Ripple>\n\n <Ripple type=\"accent\" disabled={disabled}>\n <div>\n <Icon icon={<BaselineDoneIcon />} />\n </div>\n </Ripple>\n </div>\n </StorySandboxCode>\n </StorySandbox>\n </Story>\n );\n },\n { info: { propTables: [Ripple] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AAEA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,mBAAV,EAA+BC,MAA/B,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEAJ,KAAK,CAACK,GAAN,CACI,OADJ,EAEI,YAAM;EACF,IAAMC,QAAQ,GAAG,IAAAC,mBAAA,EAAQ,UAAR,EAAoB,KAApB,CAAjB;EAEA,IAAMC,KAAK,GAAG;IAAEC,OAAO,EAAE,EAAX;IAAeC,KAAK,EAAE,EAAtB;IAA0BC,MAAM,EAAE,EAAlC;IAAsCC,OAAO,EAAE;EAA/C,CAAd;EAEA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,0BAAD,qBACI,uDACI,0CAAK,WAAL,CADJ,eAEI;IAAK,KAAK,EAAEL;EAAZ,gBACI,6BAAC,UAAD;IAAM,IAAI,eAAE,6BAAC,qCAAD;EAAZ,EADJ,CAFJ,eAMI,uDACI,2CAAM,WAAN,CADJ,CANJ,eASI,6BAAC,cAAD;IAAQ,IAAI,EAAC,WAAb;IAAyB,QAAQ,EAAEF;EAAnC,gBACI;IAAK,KAAK,EAAEE;EAAZ,gBACI,6BAAC,UAAD;IAAM,IAAI,eAAE,6BAAC,sCAAD;EAAZ,EADJ,CADJ,CATJ,eAeI,uDACI,2CAAM,SAAN,CADJ,CAfJ,eAkBI,6BAAC,cAAD;IAAQ,IAAI,EAAC,SAAb;IAAuB,QAAQ,EAAEF;EAAjC,gBACI;IAAK,KAAK,EAAEE;EAAZ,gBACI,6BAAC,UAAD;IAAM,IAAI,eAAE,6BAAC,kCAAD;EAAZ,EADJ,CADJ,CAlBJ,eAwBI,uDACI,2CAAM,QAAN,CADJ,CAxBJ,eA2BI,6BAAC,cAAD;IAAQ,IAAI,EAAC,QAAb;IAAsB,QAAQ,EAAEF;EAAhC,gBACI;IAAK,KAAK,EAAEE;EAAZ,gBACI,6BAAC,UAAD;IAAM,IAAI,eAAE,6BAAC,gCAAD;EAAZ,EADJ,CADJ,CA3BJ,CADJ,CADJ,eAoCI,6BAAC,uBAAD,qBACI,uDACI,uDACI,6BAAC,UAAD;IAAM,IAAI,eAAE,6BAAC,qCAAD;EAAZ,EADJ,CADJ,eAKI,6BAAC,cAAD;IAAQ,IAAI,EAAC,WAAb;IAAyB,QAAQ,EAAEF;EAAnC,gBACI,uDACI,6BAAC,UAAD;IAAM,IAAI,eAAE,6BAAC,sCAAD;EAAZ,EADJ,CADJ,CALJ,eAWI,6BAAC,cAAD;IAAQ,IAAI,EAAC,SAAb;IAAuB,QAAQ,EAAEA;EAAjC,gBACI,uDACI,6BAAC,UAAD;IAAM,IAAI,eAAE,6BAAC,kCAAD;EAAZ,EADJ,CADJ,CAXJ,eAiBI,6BAAC,cAAD;IAAQ,IAAI,EAAC,QAAb;IAAsB,QAAQ,EAAEA;EAAhC,gBACI,uDACI,6BAAC,UAAD;IAAM,IAAI,eAAE,6BAAC,gCAAD;EAAZ,EADJ,CADJ,CAjBJ,CADJ,CApCJ,CAFJ,CADJ;AAmEH,CA1EL,EA2EI;EAAEQ,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,cAAD;EAAd;AAAR,CA3EJ"}