@webiny/ui 0.0.0-mt-1

package/ImageEditor/ImageEditor.js

@@ -0,0 +1,335 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import * as React from "react";
+import * as toolbar from "./toolbar";
+import styled from "@emotion/styled";
+import classNames from "classnames";
+import { ButtonSecondary, ButtonPrimary } from "../Button";
+import loadScript from "load-script";
+var Toolbar = /*#__PURE__*/styled("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__*/styled("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__*/styled("div", {
+  target: "eq22gs72",
+  label: "ApplyCancelActions"
+})({
+  textAlign: "center"
+});
+
+var initScripts = function initScripts() {
+  return new Promise(function (resolve) {
+    // @ts-ignore
+    if (window.Caman) {
+      return resolve();
+    }
+
+    return loadScript("https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js", resolve);
+  });
+};
+
+var ImageEditor = /*#__PURE__*/function (_React$Component) {
+  _inherits(ImageEditor, _React$Component);
+
+  var _super = _createSuper(ImageEditor);
+
+  function ImageEditor() {
+    var _this;
+
+    _classCallCheck(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));
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      tool: null,
+      src: ""
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "canvas", /*#__PURE__*/React.createRef());
+
+    _defineProperty(_assertThisInitialized(_this), "image", null);
+
+    _defineProperty(_assertThisInitialized(_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;
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_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)
+        });
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "deactivateTool", function () {
+      _this.setState({
+        tool: null
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_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 "";
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "applyActiveTool", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var tool;
+      return _regeneratorRuntime.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:
+              _context.t0 = tool.apply;
+
+              if (!_context.t0) {
+                _context.next = 7;
+                break;
+              }
+
+              _context.next = 7;
+              return tool.apply({
+                canvas: _this.canvas
+              });
+
+            case 7:
+              _this.deactivateTool();
+
+            case 8:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    })));
+
+    _defineProperty(_assertThisInitialized(_this), "cancelActiveTool", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      var tool;
+      return _regeneratorRuntime.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:
+              _context2.t0 = tool.cancel;
+
+              if (!_context2.t0) {
+                _context2.next = 7;
+                break;
+              }
+
+              _context2.next = 7;
+              return tool.cancel({
+                canvas: _this.canvas
+              });
+
+            case 7:
+              _this.deactivateTool();
+
+            case 8:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    })));
+
+    _defineProperty(_assertThisInitialized(_this), "getToolOptions", function (tool) {
+      var options = _this.props.options;
+
+      if (!options || typeof options !== "object") {
+        return {};
+      }
+
+      return options[tool.name] || {};
+    });
+
+    return _this;
+  }
+
+  _createClass(ImageEditor, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      initScripts().then(function () {
+        _this2.updateCanvas();
+
+        setTimeout(function () {
+          var options = _this2.props.options;
+
+          if (typeof options === "object" && options) {
+            for (var _key2 in options) {
+              if (options[_key2].autoEnable === true) {
+                var tool = toolbar[_key2];
+                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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Toolbar, null, tools.map(function (key) {
+        var tool = toolbar[key];
+
+        if (!tool) {
+          return null;
+        }
+
+        return /*#__PURE__*/React.createElement("div", {
+          key: key,
+          className: classNames({
+            disabled: _this3.state.tool
+          })
+        }, tool.icon({
+          activateTool: function activateTool() {
+            return _this3.activateTool(tool);
+          }
+        }));
+      })), /*#__PURE__*/React.createElement(ToolOptions, null, tool ? /*#__PURE__*/React.createElement(React.Fragment, null, typeof tool.renderForm === "function" && tool.renderForm({
+        options: this.getToolOptions(tool),
+        image: this.image,
+        canvas: this.canvas
+      }), /*#__PURE__*/React.createElement(ApplyCancelActions, null, /*#__PURE__*/React.createElement(ButtonSecondary, {
+        onClick: this.cancelActiveTool
+      }, "Cancel"), "\xA0", /*#__PURE__*/React.createElement(ButtonPrimary, {
+        onClick: this.applyActiveTool
+      }, "Apply"))) : /*#__PURE__*/React.createElement("div", {
+        style: {
+          textAlign: "center"
+        }
+      }, "Select a tool to start working on your image.")), /*#__PURE__*/React.createElement("div", {
+        style: {
+          margin: "0 auto",
+          textAlign: "center"
+        }
+      }, /*#__PURE__*/React.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.Component);
+
+_defineProperty(ImageEditor, "defaultProps", {
+  tools: ["crop", "flip", "rotate", "filter"]
+});
+
+export { ImageEditor };

package/ImageEditor/index.d.ts

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

package/ImageEditor/index.js

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

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;

package/ImageEditor/toolbar/crop.js

@@ -0,0 +1,69 @@
+import React from "react";
+import { ReactComponent as CropIcon } from "@svgr/webpack!./icons/crop.svg";
+import { IconButton } from "../../Button";
+import { Tooltip } from "../../Tooltip";
+import Cropper from "cropperjs";
+import "cropperjs/dist/cropper.css";
+var cropper = null;
+
+var renderForm = function renderForm() {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      textAlign: "center"
+    }
+  }, "Click and drag to crop a portion of the image. Hold Shift to persist aspect ratio.");
+};
+
+var tool = {
+  name: "crop",
+  icon: function icon(_ref) {
+    var activateTool = _ref.activateTool;
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      placement: "bottom",
+      content: "Crop"
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      icon: /*#__PURE__*/React.createElement(CropIcon, null),
+      onClick: activateTool
+    }));
+  },
+  renderForm: renderForm,
+  onActivate: function onActivate(_ref2) {
+    var canvas = _ref2.canvas,
+        options = _ref2.options;
+    cropper = new Cropper(canvas.current, options);
+  },
+  cancel: function cancel() {
+    return cropper && cropper.destroy();
+  },
+  apply: function apply(_ref3) {
+    var canvas = _ref3.canvas;
+    return new Promise(function (resolve) {
+      if (!cropper) {
+        resolve();
+        return;
+      }
+
+      var current = canvas.current;
+      var src = cropper.getCroppedCanvas().toDataURL();
+
+      if (current) {
+        var image = new window.Image();
+        var ctx = current.getContext("2d");
+
+        image.onload = function () {
+          ctx.drawImage(image, 0, 0);
+          current.width = image.width;
+          current.height = image.height;
+          ctx.drawImage(image, 0, 0);
+          resolve();
+        };
+
+        image.src = src;
+      }
+
+      cropper.destroy();
+      cropper = null;
+    });
+  }
+};
+export default tool;

package/ImageEditor/toolbar/filter.d.ts

@@ -0,0 +1,3 @@
+import { ImageEditorTool } from "./types";
+declare const tool: ImageEditorTool;
+export default tool;

package/ImageEditor/toolbar/filter.js

@@ -0,0 +1,209 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _debounce from "lodash/debounce";
+import React from "react";
+import { ReactComponent as FilterIcon } from "@svgr/webpack!./icons/filter.svg";
+import { Slider } from "../../Slider";
+import { IconButton, ButtonDefault } from "../../Button";
+import { Tooltip } from "../../Tooltip";
+import styled from "@emotion/styled";
+var Wrapper = /*#__PURE__*/styled("div", {
+  target: "e1cnct9n0",
+  label: "Wrapper"
+})({
+  ul: {
+    textAlign: "center",
+    li: {
+      display: "inline-block",
+      width: 180,
+      padding: 10
+    }
+  },
+  ".buttons": {
+    textAlign: "center"
+  }
+});
+var sliders = [{
+  key: "brightness",
+  label: "Brightness",
+  min: -100
+}, {
+  key: "vibrance",
+  label: "Vibrance",
+  min: -100
+}, {
+  key: "hue",
+  label: "Hue",
+  min: -100
+}, {
+  key: "gamma",
+  label: "Gamma"
+}, {
+  key: "clip",
+  label: "Clip"
+}, {
+  key: "stackBlur",
+  label: "Blur"
+}, {
+  key: "contrast",
+  label: "Contrast",
+  min: -100
+}, {
+  key: "saturation",
+  label: "Saturation",
+  min: -100
+}, {
+  key: "exposure",
+  label: "Exposure",
+  min: -100
+}, {
+  key: "sepia",
+  label: "Sepia"
+}, {
+  key: "noise",
+  label: "Noise"
+}, {
+  key: "sharpen",
+  label: "Sharpen"
+}];
+
+var RenderForm = /*#__PURE__*/function (_React$Component) {
+  _inherits(RenderForm, _React$Component);
+
+  var _super = _createSuper(RenderForm);
+
+  function RenderForm() {
+    var _this;
+
+    _classCallCheck(this, RenderForm);
+
+    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));
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      processing: false,
+      values: {}
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "applyFilters", _debounce(function () {
+      var canvas = _this.props.canvas;
+      var values = _this.state.values; // eslint-disable-next-line @typescript-eslint/no-this-alias
+
+      var component = _assertThisInitialized(_this); // @ts-ignore
+
+
+      Caman(canvas.current, function () {
+        var _this2 = this;
+
+        this.revert(false);
+        Object.keys(values).forEach(function (key) {
+          return values[key] !== 0 && _this2[key] && _this2[key](values[key]);
+        });
+        this.render();
+        component.setState({
+          processing: false
+        });
+      });
+    }, 200));
+
+    _defineProperty(_assertThisInitialized(_this), "resetFiltersValues", function () {
+      _this.setState(function (state) {
+        sliders.reduce(function (output, current) {
+          state.values[current.key] = 0;
+          return output;
+        }, {});
+        return state;
+      });
+    });
+
+    return _this;
+  }
+
+  _createClass(RenderForm, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.resetFiltersValues();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this3 = this;
+
+      return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement("ul", null, sliders.map(function (props) {
+        return /*#__PURE__*/React.createElement("li", {
+          key: props.key
+        }, /*#__PURE__*/React.createElement(Slider, Object.assign({
+          value: _this3.state.values[props.key],
+          min: 0,
+          max: 100,
+          disabled: _this3.state.processing,
+          onInput: function onInput(value) {
+            _this3.setState(function (state) {
+              var values = _objectSpread({}, state.values);
+
+              values[props.key] = value;
+              return _objectSpread(_objectSpread({}, state), {}, {
+                processing: true,
+                values: values
+              });
+            }, _this3.applyFilters);
+          }
+        }, props)));
+      })), /*#__PURE__*/React.createElement("div", {
+        style: {
+          textAlign: "center"
+        }
+      }, /*#__PURE__*/React.createElement(ButtonDefault, {
+        onClick: function onClick() {
+          _this3.setState({
+            processing: true
+          }, function () {
+            _this3.resetFiltersValues();
+
+            _this3.applyFilters();
+
+            _this3.setState({
+              processing: false
+            });
+          });
+        }
+      }, "Reset filters")));
+    }
+  }]);
+
+  return RenderForm;
+}(React.Component);
+
+var tool = {
+  name: "filter",
+  icon: function icon(_ref) {
+    var activateTool = _ref.activateTool;
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      placement: "bottom",
+      content: "Filter"
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      icon: /*#__PURE__*/React.createElement(FilterIcon, null),
+      onClick: activateTool
+    }));
+  },
+  renderForm: function renderForm(props) {
+    return /*#__PURE__*/React.createElement(RenderForm, props);
+  },
+  cancel: function cancel(_ref2) {
+    var canvas = _ref2.canvas;
+    // @ts-ignore
+    Caman(canvas.current, function () {
+      this.revert(false);
+      this.render();
+    });
+  }
+};
+export default tool;

package/ImageEditor/toolbar/flip.d.ts

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