@ohos-ports/sprucelabs-react-heartwood-components 9.1.0-beta.0

package/lib/components/ImageCropper/ImageCropper-story.js

@@ -0,0 +1,219 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _react3 = require("@storybook/addon-knobs/react");
+
+var _ImageCropper = _interopRequireDefault(require("./ImageCropper"));
+
+var AvatarIcon = function AvatarIcon(props) {
+  return _react["default"].createElement("svg", props, _react["default"].createElement("path", {
+    clipRule: "evenodd",
+    d: "M26.833 27.833a1 1 0 0 1 1-1h26a1 1 0 0 1 1 1v26a1 1 0 0 1-1 1h-26a1 1 0 0 1-1-1v-26z",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), _react["default"].createElement("path", {
+    clipRule: "evenodd",
+    d: "M36.458 39.667a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), _react["default"].createElement("path", {
+    d: "M54.833 49.584l-5.579-8.37a1.75 1.75 0 0 0-2.89-.033l-4.667 6.653-2.884-2.308a1.752 1.752 0 0 0-2.55.397l-5.93 8.91",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), _react["default"].createElement("path", {
+    clipRule: "evenodd",
+    d: "M17.5 21c5.477 0 9.917-4.44 9.917-9.917 0-5.476-4.44-9.916-9.917-9.916-5.477 0-9.917 4.44-9.917 9.916C7.583 16.56 12.023 21 17.5 21z",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), _react["default"].createElement("path", {
+    d: "M19.833 24.666A16.345 16.345 0 0 0 1.167 40.833h18.666",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};
+
+AvatarIcon.defaultProps = {
+  width: "56",
+  height: "56",
+  viewBox: "0 0 56 56",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+var ShopIcon = function ShopIcon(props) {
+  return _react["default"].createElement("svg", props, _react["default"].createElement("path", {
+    clipRule: "evenodd",
+    d: "M8.608 4.667c-.968 0-1.835.598-2.18 1.502L2.74 15.848a4.667 4.667 0 0 0-.032 3.232 6.42 6.42 0 0 0 12.46-2.163 6.417 6.417 0 1 0 12.833 0 6.417 6.417 0 1 0 12.833 0 6.419 6.419 0 0 0 12.46 2.163 4.652 4.652 0 0 0-.035-3.232l-3.686-9.679a2.333 2.333 0 0 0-2.18-1.502H8.608zM11.566 30.833a.5.5 0 0 1 .5-.5H27.4a.5.5 0 0 1 .5.5v13a.5.5 0 0 1-.5.5H12.066a.5.5 0 0 1-.5-.5v-13z",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), _react["default"].createElement("path", {
+    d: "M32.566 51.333V31.5c0-.644.523-1.167 1.167-1.167h9.333c.645 0 1.167.523 1.167 1.167v19.833",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), _react["default"].createElement("path", {
+    d: "M48.9 23.118V49a2.333 2.333 0 0 1-2.334 2.333H9.233A2.333 2.333 0 0 1 6.9 49V23.062",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};
+
+ShopIcon.defaultProps = {
+  width: "56",
+  height: "56",
+  viewBox: "0 0 56 56",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var stories = (0, _react2.storiesOf)('ImageCropper', module);
+
+var ImageCropperExample =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(ImageCropperExample, _Component);
+
+  function ImageCropperExample() {
+    var _getPrototypeOf2;
+
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, ImageCropperExample);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = (0, _possibleConstructorReturn2["default"])(this, (_getPrototypeOf2 = (0, _getPrototypeOf3["default"])(ImageCropperExample)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+      image: ''
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleDrop", function (files) {
+      files.forEach(function (file) {
+        var reader = new FileReader();
+
+        reader.onload = function () {
+          var fileAsDataURL = reader.result;
+
+          _this.setState({
+            image: fileAsDataURL
+          });
+        };
+
+        reader.readAsDataURL(file);
+      });
+    });
+    return _this;
+  }
+
+  (0, _createClass2["default"])(ImageCropperExample, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          isCircular = _this$props.isCircular,
+          width = _this$props.width,
+          height = _this$props.height;
+      return _react["default"].createElement(_ImageCropper["default"], {
+        image: (0, _react3.text)('image', 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5d43ec18ec2cf6ff854513b9e8395c1e&auto=format&fit=crop&w=320&h=320&q=80'),
+        width: width,
+        height: height,
+        isCircular: isCircular,
+        dropzoneProps: {
+          id: 'dropzone',
+          onDrop: function onDrop() {
+            return console.log('onDrop');
+          },
+          onDragEnter: function onDragEnter() {
+            return console.log('onDragEnter');
+          },
+          onDragStart: function onDragStart() {
+            return console.log('onDragStart');
+          },
+          onDragOver: function onDragOver() {
+            return console.log('onDragOver');
+          },
+          onDragLeave: function onDragLeave() {
+            return console.log('onDragLeave');
+          },
+          onDropAccepted: this.handleDrop,
+          buttonText: 'Add Image',
+          isSmall: true,
+          isCircular: isCircular,
+          error: 'Upload an image',
+          defaultIcon: isCircular ? _react["default"].createElement(AvatarIcon, {
+            className: "dropzone__icon"
+          }) : _react["default"].createElement(ShopIcon, {
+            className: "dropzone__icon"
+          })
+        },
+        color: [249, 250, 252, 1]
+      });
+    }
+  }]);
+  return ImageCropperExample;
+}(_react.Component);
+
+stories.addDecorator(_react3.withKnobs);
+stories.add('Static', function () {
+  return _react["default"].createElement(_ImageCropper["default"], {
+    image: (0, _react3.text)('image', 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5d43ec18ec2cf6ff854513b9e8395c1e&auto=format&fit=crop&w=320&h=320&q=80'),
+    width: (0, _react3.number)('width', 160),
+    height: (0, _react3.number)('height', 160),
+    isCircular: (0, _react3["boolean"])('isCircular', true),
+    dropzoneProps: {
+      id: 'dropzone',
+      onDrop: function onDrop() {
+        return console.log('onDrop');
+      },
+      onDragEnter: function onDragEnter() {
+        return console.log('onDragEnter');
+      },
+      onDragStart: function onDragStart() {
+        return console.log('onDragStart');
+      },
+      onDragOver: function onDragOver() {
+        return console.log('onDragOver');
+      },
+      onDragLeave: function onDragLeave() {
+        return console.log('onDragLeave');
+      },
+      onDropAccepted: function onDropAccepted() {
+        return console.log('onDropAccepted');
+      },
+      buttonText: 'Add Image',
+      isSmall: true,
+      isCircular: (0, _react3["boolean"])('isCircular', true),
+      error: 'Upload an image',
+      defaultIcon: (0, _react3["boolean"])('isCircular', true) ? _react["default"].createElement(AvatarIcon, {
+        className: "dropzone__icon"
+      }) : _react["default"].createElement(ShopIcon, {
+        className: "dropzone__icon"
+      })
+    },
+    color: [249, 250, 252, 1]
+  });
+}).add('Dynamic', function () {
+  return _react["default"].createElement(ImageCropperExample, {
+    width: (0, _react3.number)('width', 160),
+    height: (0, _react3.number)('height', 160),
+    isCircular: (0, _react3["boolean"])('isCircular', true)
+  });
+});
+//# sourceMappingURL=ImageCropper-story.js.map

package/lib/components/ImageCropper/ImageCropper-story.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ImageCropper/ImageCropper-story.js"],"names":["AvatarIcon","ShopIcon","stories","module","ImageCropperExample","image","files","forEach","file","reader","FileReader","onload","fileAsDataURL","result","setState","readAsDataURL","props","isCircular","width","height","id","onDrop","console","log","onDragEnter","onDragStart","onDragOver","onDragLeave","onDropAccepted","handleDrop","buttonText","isSmall","error","defaultIcon","Component","addDecorator","withKnobs","add"],"mappings":"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","sourcesContent":["// @flow\nimport React, { Component } from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withKnobs, text, boolean, number } from '@storybook/addon-knobs/react'\nimport ImageCropper from './ImageCropper'\nimport AvatarIcon from '../../../static/assets/icons/Users/Geometric-Close-Up-Single-User-Actions-Neutral/single-neutral-actions-image--56w.svg'\nimport ShopIcon from '../../../static/assets/icons/Shopping-E-Commerce/Shops/shop-1--56w.svg'\n\nconst stories = storiesOf('ImageCropper', module)\n\ntype Props = {\n\tisCircular: boolean,\n\twidth: number,\n\theight: number\n}\ntype State = {\n\timage: string\n}\n\nclass ImageCropperExample extends Component<Props, State> {\n\tstate = {\n\t\timage: ''\n\t}\n\n\thandleDrop = (files: any) => {\n\t\tfiles.forEach(file => {\n\t\t\tconst reader = new FileReader()\n\t\t\treader.onload = () => {\n\t\t\t\tconst fileAsDataURL = reader.result\n\t\t\t\tthis.setState({\n\t\t\t\t\timage: fileAsDataURL\n\t\t\t\t})\n\t\t\t}\n\t\t\treader.readAsDataURL(file)\n\t\t})\n\t}\n\n\trender() {\n\t\tconst { isCircular, width, height } = this.props\n\n\t\treturn (\n\t\t\t<ImageCropper\n\t\t\t\timage={text(\n\t\t\t\t\t'image',\n\t\t\t\t\t'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5d43ec18ec2cf6ff854513b9e8395c1e&auto=format&fit=crop&w=320&h=320&q=80'\n\t\t\t\t)}\n\t\t\t\twidth={width}\n\t\t\t\theight={height}\n\t\t\t\tisCircular={isCircular}\n\t\t\t\tdropzoneProps={{\n\t\t\t\t\tid: 'dropzone',\n\t\t\t\t\tonDrop: () => console.log('onDrop'),\n\t\t\t\t\tonDragEnter: () => console.log('onDragEnter'),\n\t\t\t\t\tonDragStart: () => console.log('onDragStart'),\n\t\t\t\t\tonDragOver: () => console.log('onDragOver'),\n\t\t\t\t\tonDragLeave: () => console.log('onDragLeave'),\n\t\t\t\t\tonDropAccepted: this.handleDrop,\n\t\t\t\t\tbuttonText: 'Add Image',\n\t\t\t\t\tisSmall: true,\n\t\t\t\t\tisCircular,\n\t\t\t\t\terror: 'Upload an image',\n\t\t\t\t\tdefaultIcon: isCircular ? (\n\t\t\t\t\t\t<AvatarIcon className=\"dropzone__icon\" />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<ShopIcon className=\"dropzone__icon\" />\n\t\t\t\t\t)\n\t\t\t\t}}\n\t\t\t\tcolor={[249, 250, 252, 1]}\n\t\t\t/>\n\t\t)\n\t}\n}\n\nstories.addDecorator(withKnobs)\n\nstories\n\t.add('Static', () => (\n\t\t<ImageCropper\n\t\t\timage={text(\n\t\t\t\t'image',\n\t\t\t\t'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5d43ec18ec2cf6ff854513b9e8395c1e&auto=format&fit=crop&w=320&h=320&q=80'\n\t\t\t)}\n\t\t\twidth={number('width', 160)}\n\t\t\theight={number('height', 160)}\n\t\t\tisCircular={boolean('isCircular', true)}\n\t\t\tdropzoneProps={{\n\t\t\t\tid: 'dropzone',\n\t\t\t\tonDrop: () => console.log('onDrop'),\n\t\t\t\tonDragEnter: () => console.log('onDragEnter'),\n\t\t\t\tonDragStart: () => console.log('onDragStart'),\n\t\t\t\tonDragOver: () => console.log('onDragOver'),\n\t\t\t\tonDragLeave: () => console.log('onDragLeave'),\n\t\t\t\tonDropAccepted: () => console.log('onDropAccepted'),\n\t\t\t\tbuttonText: 'Add Image',\n\t\t\t\tisSmall: true,\n\t\t\t\tisCircular: boolean('isCircular', true),\n\t\t\t\terror: 'Upload an image',\n\t\t\t\tdefaultIcon: boolean('isCircular', true) ? (\n\t\t\t\t\t<AvatarIcon className=\"dropzone__icon\" />\n\t\t\t\t) : (\n\t\t\t\t\t<ShopIcon className=\"dropzone__icon\" />\n\t\t\t\t)\n\t\t\t}}\n\t\t\tcolor={[249, 250, 252, 1]}\n\t\t/>\n\t))\n\t.add('Dynamic', () => (\n\t\t<ImageCropperExample\n\t\t\twidth={number('width', 160)}\n\t\t\theight={number('height', 160)}\n\t\t\tisCircular={boolean('isCircular', true)}\n\t\t/>\n\t))\n"],"file":"ImageCropper-story.js"}

package/lib/components/ImageCropper/ImageCropper.js

@@ -0,0 +1,256 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+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 _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactAvatarEditor = _interopRequireDefault(require("react-avatar-editor"));
+
+var _Button = _interopRequireDefault(require("../Button/Button"));
+
+var _Dropzone = _interopRequireDefault(require("../Dropzone/Dropzone"));
+
+var _Forms = require("../Forms");
+
+// NOTE: Relies on https://github.com/mosch/react-avatar-editor
+var RotateLeftIcon = function RotateLeftIcon(props) {
+  return _react["default"].createElement("svg", props, _react["default"].createElement("path", {
+    d: "M3.434 10.537a8.78 8.78 0 0 1 .523-1.274M3.069 14.425a9.006 9.006 0 0 1-.028-1.983M4.389 18.111a9 9 0 0 1-.843-1.711M7.163 20.9a9.033 9.033 0 0 1-1.506-1.2M10.98 22.248a8.974 8.974 0 0 1-1.909-.431M10 4.25h2a9.029 9.029 0 0 1 .995 18",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), _react["default"].createElement("path", {
+    d: "M13.5 1.75L10 4.25l3.5 2.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};
+
+RotateLeftIcon.defaultProps = {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+var RotateRightIcon = function RotateRightIcon(props) {
+  return _react["default"].createElement("svg", props, _react["default"].createElement("path", {
+    d: "M20.566 10.537a8.782 8.782 0 0 0-.523-1.274M20.931 14.425a8.998 8.998 0 0 0 .028-1.983M19.611 18.111c.341-.54.624-1.114.843-1.713M16.837 20.9a9.03 9.03 0 0 0 1.506-1.2M13.02 22.248a8.972 8.972 0 0 0 1.909-.431M14 4.25h-2a9.029 9.029 0 0 0-.995 18",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), _react["default"].createElement("path", {
+    d: "M10.5 1.75l3.5 2.5-3.5 2.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};
+
+RotateRightIcon.defaultProps = {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+var ImageCropper =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(ImageCropper, _Component);
+
+  function ImageCropper() {
+    var _getPrototypeOf2;
+
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, ImageCropper);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = (0, _possibleConstructorReturn2["default"])(this, (_getPrototypeOf2 = (0, _getPrototypeOf3["default"])(ImageCropper)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+      scale: 1,
+      sliderValue: 0,
+      rotate: 0,
+      isSubmitting: false
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleScale", function (e) {
+      var newVal = e.currentTarget.value;
+
+      _this.setState({
+        scale: newVal / 100 + 1,
+        sliderValue: newVal
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleRotate", function (dir) {
+      _this.setState(function (prevState) {
+        var newRotate = dir === 'left' ? prevState.rotate - 90 : prevState.rotate + 90;
+        return {
+          rotate: newRotate
+        };
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleSubmit",
+    /*#__PURE__*/
+    (0, _asyncToGenerator2["default"])(
+    /*#__PURE__*/
+    _regenerator["default"].mark(function _callee() {
+      var canvasImg;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              canvasImg = _this.avatarEditor.getImageScaledToCanvas();
+
+              if (!_this.props.onSubmit) {
+                _context.next = 6;
+                break;
+              }
+
+              _this.setState({
+                isSubmitting: true
+              });
+
+              _context.next = 5;
+              return _this.props.onSubmit(canvasImg);
+
+            case 5:
+              _this.setState({
+                isSubmitting: false
+              });
+
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    })));
+    return _this;
+  }
+
+  (0, _createClass2["default"])(ImageCropper, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          image = _this$props.image,
+          width = _this$props.width,
+          height = _this$props.height,
+          isCircular = _this$props.isCircular,
+          dropzoneProps = _this$props.dropzoneProps,
+          onUploadNewImage = _this$props.onUploadNewImage,
+          rest = (0, _objectWithoutProperties2["default"])(_this$props, ["image", "width", "height", "isCircular", "dropzoneProps", "onUploadNewImage"]);
+      var _this$state = this.state,
+          scale = _this$state.scale,
+          rotate = _this$state.rotate,
+          isSubmitting = _this$state.isSubmitting,
+          sliderValue = _this$state.sliderValue;
+      return _react["default"].createElement("div", {
+        className: "image-cropper"
+      }, _react["default"].createElement("div", {
+        className: "image-cropper__dropzone-wrapper"
+      }, image ? _react["default"].createElement(_reactAvatarEditor["default"], (0, _extends2["default"])({
+        image: image,
+        width: width,
+        height: height,
+        scale: scale,
+        rotate: rotate,
+        border: 0,
+        borderRadius: isCircular ? 100 : 0,
+        color: [255, 255, 255, 1]
+      }, rest, {
+        ref: function ref(editor) {
+          _this2.avatarEditor = editor;
+        }
+      })) : _react["default"].createElement(_Dropzone["default"], dropzoneProps)), _react["default"].createElement("div", {
+        className: "image-cropper__controls-row"
+      }, _react["default"].createElement(_Button["default"], {
+        kind: "secondary",
+        className: "image-cropper__rotate-btn",
+        text: "Rotate Left",
+        icon: {
+          customIcon: RotateLeftIcon,
+          isLineIcon: true
+        },
+        disabled: !image || isSubmitting,
+        onClick: function onClick() {
+          return _this2.handleRotate('left');
+        }
+      }), _react["default"].createElement(_Button["default"], {
+        kind: "secondary",
+        className: "image-cropper__rotate-btn",
+        text: "Rotate Right",
+        icon: {
+          customIcon: RotateRightIcon,
+          isLineIcon: true
+        },
+        disabled: !image || isSubmitting,
+        onClick: function onClick() {
+          return _this2.handleRotate('right');
+        }
+      })), _react["default"].createElement("div", {
+        className: "image-cropper__controls-row"
+      }, _react["default"].createElement(_Forms.Slider, {
+        label: "Scale",
+        id: "scale",
+        min: 0,
+        max: 100,
+        value: sliderValue,
+        postLabel: "".concat(Math.round(scale * 100), "%"),
+        disabled: !image || isSubmitting,
+        onChange: this.handleScale
+      })), _react["default"].createElement("div", {
+        className: "image-cropper__controls-row"
+      }, image && _react["default"].createElement(_Button["default"], {
+        kind: "simple",
+        text: "Upload another image",
+        disabled: isSubmitting,
+        onClick: onUploadNewImage
+      }), _react["default"].createElement(_Button["default"], {
+        kind: "primary",
+        isFullWidth: image ? false : true,
+        text: "Save Image",
+        disabled: !image || isSubmitting,
+        isLoading: isSubmitting,
+        onClick: function onClick() {
+          return _this2.handleSubmit();
+        }
+      })));
+    }
+  }]);
+  return ImageCropper;
+}(_react.Component);
+
+exports["default"] = ImageCropper;
+//# sourceMappingURL=ImageCropper.js.map

package/lib/components/ImageCropper/ImageCropper.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ImageCropper/ImageCropper.js"],"names":["RotateLeftIcon","RotateRightIcon","ImageCropper","scale","sliderValue","rotate","isSubmitting","e","newVal","currentTarget","value","setState","dir","prevState","newRotate","canvasImg","avatarEditor","getImageScaledToCanvas","props","onSubmit","image","width","height","isCircular","dropzoneProps","onUploadNewImage","rest","state","editor","customIcon","isLineIcon","handleRotate","Math","round","handleScale","handleSubmit","Component"],"mappings":"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","sourcesContent":["// @flow\n// NOTE: Relies on https://github.com/mosch/react-avatar-editor\nimport React, { Component } from 'react'\nimport AvatarEditor from 'react-avatar-editor'\nimport Button from '../Button/Button'\nimport Dropzone from '../Dropzone/Dropzone'\nimport type { Props as DropzoneProps } from '../Dropzone/Dropzone'\nimport { Slider } from '../Forms'\nimport RotateLeftIcon from '../../../static/assets/icons/Design/Rotate/rotate-back.svg'\nimport RotateRightIcon from '../../../static/assets/icons/Design/Rotate/rotate-forward.svg'\n\ntype Props = {\n\t/** The image. If null, this will render a Dropzone. */\n\timage?: string,\n\n\t/** Width of the image */\n\twidth: number,\n\n\t/** Height of the image */\n\theight: number,\n\n\t/** Properties for the Dropzone */\n\tdropzoneProps: DropzoneProps,\n\n\t/** Set true for ciruclar image */\n\tisCircular?: boolean,\n\n\t/** Callback when save button is clicked */\n\tonSubmit?: Function,\n\n\t/** Callback when upload new button is clicked */\n\tonUploadNewImage?: Function\n}\ntype State = {\n\tscale: number,\n\trotate: number,\n\tisSubmitting: boolean\n}\n\nexport default class ImageCropper extends Component<Props, State> {\n\tstate = {\n\t\tscale: 1,\n\t\tsliderValue: 0,\n\t\trotate: 0,\n\t\tisSubmitting: false\n\t}\n\n\thandleScale = (e: any) => {\n\t\tconst newVal = e.currentTarget.value\n\n\t\tthis.setState({\n\t\t\tscale: newVal / 100 + 1,\n\t\t\tsliderValue: newVal\n\t\t})\n\t}\n\n\thandleRotate = (dir: 'left' | 'right') => {\n\t\tthis.setState(prevState => {\n\t\t\tconst newRotate =\n\t\t\t\tdir === 'left' ? prevState.rotate - 90 : prevState.rotate + 90\n\t\t\treturn {\n\t\t\t\trotate: newRotate\n\t\t\t}\n\t\t})\n\t}\n\n\thandleSubmit = async () => {\n\t\tconst canvasImg = this.avatarEditor.getImageScaledToCanvas()\n\n\t\tif (this.props.onSubmit) {\n\t\t\tthis.setState({ isSubmitting: true })\n\t\t\tawait this.props.onSubmit(canvasImg)\n\t\t\tthis.setState({ isSubmitting: false })\n\t\t}\n\t}\n\n\trender() {\n\t\tconst {\n\t\t\timage,\n\t\t\twidth,\n\t\t\theight,\n\t\t\tisCircular,\n\t\t\tdropzoneProps,\n\t\t\tonUploadNewImage,\n\t\t\t...rest\n\t\t} = this.props\n\t\tconst { scale, rotate, isSubmitting, sliderValue } = this.state\n\t\treturn (\n\t\t\t<div className=\"image-cropper\">\n\t\t\t\t<div className=\"image-cropper__dropzone-wrapper\">\n\t\t\t\t\t{image ? (\n\t\t\t\t\t\t<AvatarEditor\n\t\t\t\t\t\t\timage={image}\n\t\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\t\theight={height}\n\t\t\t\t\t\t\tscale={scale}\n\t\t\t\t\t\t\trotate={rotate}\n\t\t\t\t\t\t\tborder={0}\n\t\t\t\t\t\t\tborderRadius={isCircular ? 100 : 0}\n\t\t\t\t\t\t\tcolor={[255, 255, 255, 1]}\n\t\t\t\t\t\t\t{...rest}\n\t\t\t\t\t\t\tref={editor => {\n\t\t\t\t\t\t\t\tthis.avatarEditor = editor\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<Dropzone {...dropzoneProps} />\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<div className=\"image-cropper__controls-row\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tkind=\"secondary\"\n\t\t\t\t\t\tclassName=\"image-cropper__rotate-btn\"\n\t\t\t\t\t\ttext=\"Rotate Left\"\n\t\t\t\t\t\ticon={{\n\t\t\t\t\t\t\tcustomIcon: RotateLeftIcon,\n\t\t\t\t\t\t\tisLineIcon: true\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tdisabled={!image || isSubmitting}\n\t\t\t\t\t\tonClick={() => this.handleRotate('left')}\n\t\t\t\t\t/>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tkind=\"secondary\"\n\t\t\t\t\t\tclassName=\"image-cropper__rotate-btn\"\n\t\t\t\t\t\ttext=\"Rotate Right\"\n\t\t\t\t\t\ticon={{\n\t\t\t\t\t\t\tcustomIcon: RotateRightIcon,\n\t\t\t\t\t\t\tisLineIcon: true\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tdisabled={!image || isSubmitting}\n\t\t\t\t\t\tonClick={() => this.handleRotate('right')}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"image-cropper__controls-row\">\n\t\t\t\t\t<Slider\n\t\t\t\t\t\tlabel=\"Scale\"\n\t\t\t\t\t\tid=\"scale\"\n\t\t\t\t\t\tmin={0}\n\t\t\t\t\t\tmax={100}\n\t\t\t\t\t\tvalue={sliderValue}\n\t\t\t\t\t\tpostLabel={`${Math.round(scale * 100)}%`}\n\t\t\t\t\t\tdisabled={!image || isSubmitting}\n\t\t\t\t\t\tonChange={this.handleScale}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"image-cropper__controls-row\">\n\t\t\t\t\t{image && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tkind=\"simple\"\n\t\t\t\t\t\t\ttext=\"Upload another image\"\n\t\t\t\t\t\t\tdisabled={isSubmitting}\n\t\t\t\t\t\t\tonClick={onUploadNewImage}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t<Button\n\t\t\t\t\t\tkind=\"primary\"\n\t\t\t\t\t\tisFullWidth={image ? false : true}\n\t\t\t\t\t\ttext=\"Save Image\"\n\t\t\t\t\t\tdisabled={!image || isSubmitting}\n\t\t\t\t\t\tisLoading={isSubmitting}\n\t\t\t\t\t\tonClick={() => this.handleSubmit()}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t)\n\t}\n}\n"],"file":"ImageCropper.js"}

package/lib/components/ImageSSR/ImageSSR.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+// This component returns a wrapped img element that will handle image sources that fail to load.
+// Regular JSX <img /> tag onError event does not work correclty with SSR so
+// this component is used as a workaround.
+var ImageSSR = function ImageSSR(props) {
+  var className = props.className,
+      alt = props.alt,
+      src = props.src,
+      width = props.width,
+      height = props.height,
+      id = props.id;
+  return _react["default"].createElement("div", {
+    className: "image-wrapper",
+    dangerouslySetInnerHTML: {
+      __html: "\n\t\t\t\t\t<img class=".concat(className, " alt=").concat(alt, " id=").concat(id, " src=\"").concat(src, "\"\n\t\t\t\t\tonerror=\"this.onerror=null;this.classList.add('error');\"\n\t\t\t\t\twidth=").concat(width, "\n\t\t\t\t\theight=").concat(height, " \n\t\t\t\t\t/>\n\t\t\t\t")
+    }
+  });
+};
+
+var _default = ImageSSR;
+exports["default"] = _default;
+//# sourceMappingURL=ImageSSR.js.map

package/lib/components/ImageSSR/ImageSSR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ImageSSR/ImageSSR.js"],"names":["ImageSSR","props","className","alt","src","width","height","id","__html"],"mappings":";;;;;;;;;AAEA;;AAUA;AACA;AACA;AAEA,IAAMA,QAAQ,GAAG,SAAXA,QAAW,CAACC,KAAD,EAAkB;AAAA,MAC1BC,SAD0B,GACiBD,KADjB,CAC1BC,SAD0B;AAAA,MACfC,GADe,GACiBF,KADjB,CACfE,GADe;AAAA,MACVC,GADU,GACiBH,KADjB,CACVG,GADU;AAAA,MACLC,KADK,GACiBJ,KADjB,CACLI,KADK;AAAA,MACEC,MADF,GACiBL,KADjB,CACEK,MADF;AAAA,MACUC,EADV,GACiBN,KADjB,CACUM,EADV;AAElC,SACC;AACC,IAAA,SAAS,EAAC,eADX;AAEC,IAAA,uBAAuB,EAAE;AACxBC,MAAAA,MAAM,mCACQN,SADR,kBACyBC,GADzB,iBACmCI,EADnC,oBAC8CH,GAD9C,uGAGGC,KAHH,gCAIIC,MAJJ;AADkB;AAF1B,IADD;AAcA,CAhBD;;eAkBeN,Q","sourcesContent":["// @flow\n\nimport React from 'react'\n\ntype Props = {\n\tsrc: string,\n\talt: string,\n\tclassName: string,\n\twidth: string,\n\theight: string\n}\n\n// This component returns a wrapped img element that will handle image sources that fail to load.\n// Regular JSX <img /> tag onError event does not work correclty with SSR so\n// this component is used as a workaround.\n\nconst ImageSSR = (props: Props) => {\n\tconst { className, alt, src, width, height, id } = props\n\treturn (\n\t\t<div\n\t\t\tclassName=\"image-wrapper\"\n\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t__html: `\n\t\t\t\t\t<img class=${className} alt=${alt} id=${id} src=\"${src}\"\n\t\t\t\t\tonerror=\"this.onerror=null;this.classList.add('error');\"\n\t\t\t\t\twidth=${width}\n\t\t\t\t\theight=${height} \n\t\t\t\t\t/>\n\t\t\t\t`\n\t\t\t}}\n\t\t/>\n\t)\n}\n\nexport default ImageSSR\n"],"file":"ImageSSR.js"}