@webiny/ui 0.0.0-ee-vpcs.549378cf03

package/Image/Image.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="web" />
+import React from "react";
+interface Props extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
+    [key: string]: any;
+}
+declare const Image: React.FC<Props>;
+export { Image };

package/Image/Image.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Image = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var Image = function Image(_ref) {
+  var rest = Object.assign({}, ((0, _objectDestructuringEmpty2.default)(_ref), _ref));
+  var finalProps = (0, _objectSpread2.default)({}, rest);
+  var srcSet = finalProps.srcSet;
+
+  if (srcSet && typeof srcSet === "object") {
+    finalProps.srcSet = Object.keys(srcSet).map(function (key) {
+      return "".concat(srcSet[key], " ").concat(key);
+    }).join(", ");
+  }
+
+  return /*#__PURE__*/_react.default.createElement("img", finalProps);
+};
+
+exports.Image = Image;

package/Image/Image.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Image","rest","finalProps","srcSet","Object","keys","map","key","join"],"sources":["Image.tsx"],"sourcesContent":["import React from \"react\";\n\n// Accepts all props that a normal <img> element would accept.\ninterface Props\n    extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {\n    [key: string]: any;\n}\n\nconst Image: React.FC<Props> = ({ ...rest }) => {\n    const finalProps = { ...rest };\n    const srcSet = finalProps.srcSet;\n    if (srcSet && typeof srcSet === \"object\") {\n        finalProps.srcSet = Object.keys(srcSet)\n            .map(key => `${srcSet[key]} ${key}`)\n            .join(\", \");\n    }\n\n    return <img {...finalProps} />;\n};\n\nexport { Image };\n"],"mappings":";;;;;;;;;;;;;AAAA;;AAQA,IAAMA,KAAsB,GAAG,SAAzBA,KAAyB,OAAiB;EAAA,IAAXC,IAAW;EAC5C,IAAMC,UAAU,mCAAQD,IAAR,CAAhB;EACA,IAAME,MAAM,GAAGD,UAAU,CAACC,MAA1B;;EACA,IAAIA,MAAM,IAAI,OAAOA,MAAP,KAAkB,QAAhC,EAA0C;IACtCD,UAAU,CAACC,MAAX,GAAoBC,MAAM,CAACC,IAAP,CAAYF,MAAZ,EACfG,GADe,CACX,UAAAC,GAAG;MAAA,iBAAOJ,MAAM,CAACI,GAAD,CAAb,cAAsBA,GAAtB;IAAA,CADQ,EAEfC,IAFe,CAEV,IAFU,CAApB;EAGH;;EAED,oBAAO,oCAASN,UAAT,CAAP;AACH,CAVD"}

package/Image/Image.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/Image/Image.stories.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _Story = require("@webiny/storybook-utils/Story");
+
+var _README = _interopRequireDefault(require("./../Image/README.md"));
+
+var _addonKnobs = require("@storybook/addon-knobs");
+
+var _Image = require("./Image");
+
+var story = (0, _react2.storiesOf)("Components/Image", module);
+story.addDecorator(_addonKnobs.withKnobs);
+story.add("usage", function () {
+  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, null, /*#__PURE__*/_react.default.createElement(_Image.Image, {
+    src: "http://i.pravatar.cc/150?img=49",
+    alt: "Nice image."
+  })), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, /*#__PURE__*/_react.default.createElement(_Image.Image, {
+    src: "http://i.pravatar.cc/150?img=49",
+    alt: "Nice image."
+  }))));
+}, {
+  info: {
+    propTables: [_Image.Image]
+  }
+});

package/Image/Image.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","readme","info","propTables","Image"],"sources":["Image.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\";\n\nimport readme from \"./../Image/README.md\";\nimport { withKnobs } from \"@storybook/addon-knobs\";\n\nimport { Image } from \"./Image\";\n\nconst story = storiesOf(\"Components/Image\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample>\n                        <Image src=\"http://i.pravatar.cc/150?img=49\" alt=\"Nice image.\" />\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        <Image src=\"http://i.pravatar.cc/150?img=49\" alt=\"Nice image.\" />\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Image] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAQA;;AACA;;AAEA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,kBAAV,EAA8BC,MAA9B,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEAJ,KAAK,CAACK,GAAN,CACI,OADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD,qBACI,6BAAC,YAAD;IAAO,GAAG,EAAC,iCAAX;IAA6C,GAAG,EAAC;EAAjD,EADJ,CADJ,eAII,6BAAC,uBAAD,qBACI,6BAAC,YAAD;IAAO,GAAG,EAAC,iCAAX;IAA6C,GAAG,EAAC;EAAjD,EADJ,CAJJ,CAFJ,CADJ;AAaH,CAhBL,EAiBI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,YAAD;EAAd;AAAR,CAjBJ"}

package/Image/README.md

@@ -0,0 +1,12 @@
+# Image
+
+### Description
+
+Use `Image` component instead of plain `<img>` element to display images more efficiently. Internally it uses
+`react-image` component.
+
+### Import
+
+```js
+import { Image } from "@webiny/ui/Image";
+```

package/Image/index.d.ts

@@ -0,0 +1 @@
+export * from "./Image";

package/Image/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Image = require("./Image");
+
+Object.keys(_Image).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Image[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Image[key];
+    }
+  });
+});

package/Image/index.js.map

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

package/ImageEditor/ImageEditor.d.ts

@@ -0,0 +1,46 @@
+/// <reference types="web" />
+import React from "react";
+import { ImageEditorTool, ToolbarTool } from "./toolbar/types";
+interface RenderPropArgs {
+    render: Function;
+    getCanvasDataUrl: () => string;
+    activeTool: ImageEditorTool | null;
+    applyActiveTool: () => Promise<void>;
+    cancelActiveTool: () => Promise<void>;
+}
+interface ImageEditorPropsPropsOptions {
+    autoEnable: boolean;
+}
+interface ImageEditorProps {
+    src: string;
+    tools: ToolbarTool[];
+    options?: {
+        flip: ImageEditorPropsPropsOptions;
+        filter: ImageEditorPropsPropsOptions;
+        crop: ImageEditorPropsPropsOptions;
+        rotate: ImageEditorPropsPropsOptions;
+    };
+    onToolActivate?: Function;
+    onToolDeactivate?: Function;
+    children?: (props: RenderPropArgs) => React.ReactNode;
+}
+interface ImageEditorState {
+    tool: ImageEditorTool | null;
+    src: string;
+}
+declare class ImageEditor extends React.Component<ImageEditorProps, ImageEditorState> {
+    static defaultProps: Partial<ImageEditorProps>;
+    state: ImageEditorState;
+    canvas: React.RefObject<HTMLCanvasElement>;
+    image?: HTMLImageElement;
+    componentDidMount(): void;
+    private readonly updateCanvas;
+    private readonly activateTool;
+    private readonly deactivateTool;
+    readonly getCanvasDataUrl: () => string;
+    private readonly applyActiveTool;
+    private readonly cancelActiveTool;
+    private readonly getToolOptions;
+    render(): React.ReactNode;
+}
+export { ImageEditor };

package/ImageEditor/ImageEditor.js

@@ -0,0 +1,362 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageEditor = void 0;
+
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _toolbar = require("./toolbar");
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Button = require("../Button");
+
+var _loadScript = _interopRequireDefault(require("load-script"));
+
+/**
+ * Package load-script does not have types.
+ */
+// @ts-ignore
+var toolbar = {
+  flip: _toolbar.flip,
+  filter: _toolbar.filter,
+  crop: _toolbar.crop,
+  rotate: _toolbar.rotate
+};
+var Toolbar = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "eq22gs70",
+  label: "Toolbar"
+})({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  backgroundColor: "var(--mdc-theme-secondary)",
+  margin: "-24px -24px 0px -24px",
+  padding: 2,
+  position: "absolute",
+  width: "100%",
+  boxSizing: "border-box",
+  zIndex: 10,
+  "> div.disabled": {
+    opacity: 0.5,
+    pointerEvents: "none"
+  }
+});
+var ToolOptions = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "eq22gs71",
+  label: "ToolOptions"
+})({
+  margin: "50px -24px 10px -24px",
+  boxSizing: "border-box",
+  padding: 10,
+  backgroundColor: "var(--mdc-theme-background)",
+  borderTop: "1px solid var(--mdc-theme-on-background)"
+});
+var ApplyCancelActions = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "eq22gs72",
+  label: "ApplyCancelActions"
+})({
+  textAlign: "center"
+});
+
+var initScripts = function initScripts() {
+  return new Promise(function (resolve) {
+    // @ts-ignore
+    if (window.Caman) {
+      return resolve();
+    }
+
+    return (0, _loadScript.default)("https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js", resolve);
+  });
+};
+
+var ImageEditor = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(ImageEditor, _React$Component);
+
+  var _super = (0, _createSuper2.default)(ImageEditor);
+
+  function ImageEditor() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, ImageEditor);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
+      tool: null,
+      src: ""
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "canvas", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "image", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateCanvas", function () {
+      var src = _this.props.src;
+      _this.image = new window.Image();
+      var canvas = _this.canvas.current;
+
+      if (canvas) {
+        _this.image.onload = function () {
+          if (_this.image) {
+            canvas.width = _this.image.width;
+            canvas.height = _this.image.height;
+            var ctx = canvas.getContext("2d");
+            ctx.drawImage(_this.image, 0, 0);
+          }
+        };
+
+        _this.image.src = src;
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "activateTool", function (tool) {
+      if (typeof tool === "string") {
+        tool = toolbar[tool];
+      }
+
+      _this.setState({
+        tool: tool
+      }, function () {
+        var tt = tool;
+        typeof tt.onActivate === "function" && tt.onActivate({
+          canvas: _this.canvas,
+          options: _this.getToolOptions(tt)
+        });
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "deactivateTool", function () {
+      _this.setState({
+        tool: null
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getCanvasDataUrl", function () {
+      var canvas = _this.canvas.current;
+
+      if (canvas) {
+        var src = _this.props.src;
+
+        if (src.startsWith("data:image/jpeg;")) {
+          return canvas.toDataURL("image/jpeg", 1.0);
+        }
+
+        return canvas.toDataURL();
+      }
+
+      return "";
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "applyActiveTool", /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
+      var tool;
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              tool = _this.state.tool;
+
+              if (tool) {
+                _context.next = 3;
+                break;
+              }
+
+              return _context.abrupt("return");
+
+            case 3:
+              if (!tool.apply) {
+                _context.next = 6;
+                break;
+              }
+
+              _context.next = 6;
+              return tool.apply({
+                canvas: _this.canvas
+              });
+
+            case 6:
+              _this.deactivateTool();
+
+            case 7:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    })));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "cancelActiveTool", /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2() {
+      var tool;
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              tool = _this.state.tool;
+
+              if (tool) {
+                _context2.next = 3;
+                break;
+              }
+
+              return _context2.abrupt("return");
+
+            case 3:
+              if (!tool.cancel) {
+                _context2.next = 6;
+                break;
+              }
+
+              _context2.next = 6;
+              return tool.cancel({
+                canvas: _this.canvas
+              });
+
+            case 6:
+              _this.deactivateTool();
+
+            case 7:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    })));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getToolOptions", function (tool) {
+      var options = _this.props.options;
+
+      if (!options || typeof options !== "object") {
+        return {};
+      }
+
+      return options[tool.name] || {};
+    });
+    return _this;
+  }
+
+  (0, _createClass2.default)(ImageEditor, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      initScripts().then(function () {
+        _this2.updateCanvas();
+
+        setTimeout(function () {
+          var options = _this2.props.options;
+
+          if (!options || typeof options !== "object") {
+            return;
+          }
+
+          for (var key in options) {
+            var option = options[key];
+
+            if (option.autoEnable === true) {
+              var tool = toolbar[key];
+              tool && _this2.activateTool(tool);
+              break;
+            }
+          }
+        }, 250);
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this3 = this;
+
+      var _this$props = this.props,
+          src = _this$props.src,
+          tools = _this$props.tools,
+          children = _this$props.children;
+      var tool = this.state.tool;
+
+      var editor = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Toolbar, null, tools.map(function (key) {
+        var tool = toolbar[key];
+
+        if (!tool) {
+          return null;
+        }
+
+        return /*#__PURE__*/_react.default.createElement("div", {
+          key: key,
+          className: (0, _classnames.default)({
+            disabled: _this3.state.tool
+          })
+        }, tool.icon({
+          activateTool: function activateTool() {
+            return _this3.activateTool(tool);
+          }
+        }));
+      })), /*#__PURE__*/_react.default.createElement(ToolOptions, null, tool ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, typeof tool.renderForm === "function" && tool.renderForm({
+        options: this.getToolOptions(tool),
+        image: this.image,
+        canvas: this.canvas
+      }), /*#__PURE__*/_react.default.createElement(ApplyCancelActions, null, /*#__PURE__*/_react.default.createElement(_Button.ButtonSecondary, {
+        "data-testid": "button-cancel",
+        onClick: function onClick() {
+          _this3.cancelActiveTool();
+        }
+      }, "Cancel"), "\xA0", /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
+        "data-testid": "button-apply",
+        onClick: function onClick() {
+          _this3.applyActiveTool();
+        }
+      }, "Apply"))) : /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          textAlign: "center"
+        }
+      }, "Select a tool to start working on your image.")), /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          margin: "0 auto",
+          textAlign: "center"
+        }
+      }, /*#__PURE__*/_react.default.createElement("canvas", {
+        key: src,
+        id: "canvas",
+        style: {
+          maxWidth: 700
+        },
+        ref: this.canvas
+      })));
+
+      if (typeof children === "function") {
+        return children({
+          render: function render() {
+            return editor;
+          },
+          // canvas: this.canvas,
+          getCanvasDataUrl: this.getCanvasDataUrl,
+          activeTool: this.state.tool,
+          applyActiveTool: this.applyActiveTool,
+          cancelActiveTool: this.cancelActiveTool
+        });
+      }
+
+      return editor;
+    }
+  }]);
+  return ImageEditor;
+}(_react.default.Component);
+
+exports.ImageEditor = ImageEditor;
+(0, _defineProperty2.default)(ImageEditor, "defaultProps", {
+  tools: ["crop", "flip", "rotate", "filter"]
+});

package/ImageEditor/ImageEditor.js.map

@@ -0,0 +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/index.d.ts

@@ -0,0 +1 @@
+export * from "./ImageEditor";

package/ImageEditor/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _ImageEditor = require("./ImageEditor");
+
+Object.keys(_ImageEditor).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ImageEditor[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ImageEditor[key];
+    }
+  });
+});

package/ImageEditor/index.js.map

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

package/ImageEditor/toolbar/crop.d.ts

@@ -0,0 +1,4 @@
+import { ImageEditorTool } from "./types";
+import "cropperjs/dist/cropper.css";
+declare const tool: ImageEditorTool;
+export default tool;