react-upload-gallery - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

dist/Context.js

@@ -6,7 +6,7 @@ "use strict";
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
 var _react = require("react");
 
-var _default = (0, _react.createContext)({
+var _default = /*#__PURE__*/(0, _react.createContext)({
   images: [],
@@ -16,2 +16,2 @@ setSort: function setSort() {}
 
-exports.default = _default;
+exports["default"] = _default;

dist/DragArea.js

@@ -8,3 +8,3 @@ "use strict";
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
@@ -23,3 +23,3 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
   var children = _ref.children;
-  return _react.default.createElement("div", null, children);
+  return /*#__PURE__*/_react["default"].createElement("div", null, children);
 });
@@ -35,6 +35,6 @@ var SortableList = (0, _reactSortableHoc.SortableContainer)(function (_ref2) {
       style = props.style;
-  return _react.default.createElement(_Context.default.Consumer, null, function (_ref3) {
+  return /*#__PURE__*/_react["default"].createElement(_Context["default"].Consumer, null, function (_ref3) {
     var images = _ref3.images,
         setSort = _ref3.setSort;
-    return _react.default.createElement(SortableList, (0, _extends2.default)({}, props, {
+    return /*#__PURE__*/_react["default"].createElement(SortableList, (0, _extends2["default"])({}, props, {
       helperClass: "rug-dragging-item",
@@ -46,7 +46,7 @@ onSortEnd: function onSortEnd(_ref4) {
       }
-    }), _react.default.createElement("div", {
+    }), /*#__PURE__*/_react["default"].createElement("div", {
       className: className,
       style: style
     }, images.map(function (image, key) {
-      return _react.default.createElement(DragItem, {
+      return /*#__PURE__*/_react["default"].createElement(DragItem, {
         key: key,
@@ -67,2 +67,2 @@ index: key
 var _default = DragArea;
-exports.default = _default;
+exports["default"] = _default;

dist/DropArea.js

@@ -8,3 +8,3 @@ "use strict";
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
@@ -19,2 +19,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -24,6 +28,2 @@
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _react = _interopRequireDefault(require("react"));
@@ -37,16 +37,20 @@
 
-var DropArea =
-/*#__PURE__*/
-function (_React$Component) {
-  (0, _inherits2.default)(DropArea, _React$Component);
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+
+var DropArea = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(DropArea, _React$Component);
+
+  var _super = _createSuper(DropArea);
+
   function DropArea() {
     var _this;
 
-    (0, _classCallCheck2.default)(this, DropArea);
-    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(DropArea).call(this));
-    _this.onDrop = _this.onDrop.bind((0, _assertThisInitialized2.default)(_this));
-    _this.onDragOver = _this.onDragOver.bind((0, _assertThisInitialized2.default)(_this));
-    _this.onDragEnter = _this.onDragEnter.bind((0, _assertThisInitialized2.default)(_this));
-    _this.onDragLeave = _this.onDragLeave.bind((0, _assertThisInitialized2.default)(_this));
+    (0, _classCallCheck2["default"])(this, DropArea);
+    _this = _super.call(this);
+    _this.onDrop = _this.onDrop.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.onDragOver = _this.onDragOver.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.onDragEnter = _this.onDragEnter.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.onDragLeave = _this.onDragLeave.bind((0, _assertThisInitialized2["default"])(_this));
     _this.state = {
@@ -60,3 +64,3 @@ isDrag: false,
 
-  (0, _createClass2.default)(DropArea, [{
+  (0, _createClass2["default"])(DropArea, [{
     key: "onDrop",
@@ -70,3 +74,3 @@ value: function onDrop(event) {
       event.stopPropagation();
-      var files = (0, _toConsumableArray2.default)((0, _Utils.getEventFiles)(event));
+      var files = (0, _toConsumableArray2["default"])((0, _Utils.getEventFiles)(event));
       this.setState({
@@ -88,3 +92,3 @@ isDrag: false
     value: function onDragEnter(event) {
-      var items = (0, _toConsumableArray2.default)(event.dataTransfer.items);
+      var items = (0, _toConsumableArray2["default"])(event.dataTransfer.items);
       this.setState({
@@ -116,3 +120,3 @@ isDrag: items.length > 0
           isDrag = this.state.isDrag;
-      return _react.default.createElement("div", {
+      return /*#__PURE__*/_react["default"].createElement("div", {
         onDrop: this.onDrop,
@@ -126,3 +130,3 @@ onDragOver: this.onDragOver,
   return DropArea;
-}(_react.default.Component);
+}(_react["default"].Component);
 
@@ -138,14 +142,14 @@ var func = function func() {};
 DropArea.propTypes = {
-  onDrop: _propTypes.default.func,
-  onDragOver: _propTypes.default.func,
-  onDragEnter: _propTypes.default.func,
-  onDragLeave: _propTypes.default.func
+  onDrop: _propTypes["default"].func,
+  onDragOver: _propTypes["default"].func,
+  onDragEnter: _propTypes["default"].func,
+  onDragLeave: _propTypes["default"].func
 };
 
 var _default = function _default(props) {
-  return _react.default.createElement(_Context.default.Consumer, null, function (values) {
-    return _react.default.createElement(DropArea, (0, _extends2.default)({}, props, values));
+  return /*#__PURE__*/_react["default"].createElement(_Context["default"].Consumer, null, function (values) {
+    return /*#__PURE__*/_react["default"].createElement(DropArea, (0, _extends2["default"])({}, props, values));
   });
 };
 
-exports.default = _default;
+exports["default"] = _default;

dist/Handle.js

@@ -8,3 +8,3 @@ "use strict";
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
@@ -17,14 +17,14 @@ var _react = _interopRequireDefault(require("react"));
   var handle = _ref.handle;
-  return _react.default.createElement(_DropArea.default, null, function (isDrag) {
-    return _react.default.createElement("div", {
+  return /*#__PURE__*/_react["default"].createElement(_DropArea["default"], null, function (isDrag) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
       className: "rug-handle ".concat(isDrag ? "__dragging" : "")
-    }, _react.default.createElement("svg", {
+    }, /*#__PURE__*/_react["default"].createElement("svg", {
       viewBox: "0 -5 32 52",
       className: "rug-handle-icon"
-    }, _react.default.createElement("g", null, _react.default.createElement("polyline", {
+    }, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("polyline", {
       points: "1 19 1 31 31 31 31 19"
-    }), _react.default.createElement("polyline", {
+    }), /*#__PURE__*/_react["default"].createElement("polyline", {
       className: "__arrow",
       points: "8 9 16 1 24 9"
-    }), _react.default.createElement("line", {
+    }), /*#__PURE__*/_react["default"].createElement("line", {
       className: "__arrow",
@@ -35,7 +35,7 @@ x1: "16",
       y2: "25"
-    }))), _react.default.createElement("div", {
+    }))), /*#__PURE__*/_react["default"].createElement("div", {
       className: "rug-handle-info"
-    }, typeof handle === "function" ? handle(options) : _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("div", {
+    }, typeof handle === "function" ? handle(options) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
       className: "rug-handle-drop-text"
-    }, "Drag and drop Images Here to Upload"), _react.default.createElement("span", null, "Or"), _react.default.createElement("div", {
+    }, "Drag and drop Images Here to Upload"), /*#__PURE__*/_react["default"].createElement("span", null, "Or"), /*#__PURE__*/_react["default"].createElement("div", {
       onClick: options.openDialogue,
@@ -47,2 +47,2 @@ className: "rug-handle-button"
 
-exports.default = _default;
+exports["default"] = _default;

dist/index.js

@@ -11,3 +11,3 @@ "use strict";
   get: function get() {
-    return _DragArea.default;
+    return _DragArea["default"];
   }
@@ -18,3 +18,3 @@ });
   get: function get() {
-    return _DropArea.default;
+    return _DropArea["default"];
   }
@@ -25,3 +25,3 @@ });
   get: function get() {
-    return _Card.default;
+    return _Card["default"];
   }
@@ -32,3 +32,3 @@ });
   get: function get() {
-    return _List.default;
+    return _List["default"];
   }
@@ -39,3 +39,3 @@ });
   get: function get() {
-    return _RUG.default;
+    return _RUG["default"];
   }
@@ -42,0 +42,0 @@ });

dist/PropTypes.js

@@ -17,2 +17,3 @@ "use strict";
   className: "",
+  inOrder: false,
   ssrSupport: false,
@@ -45,38 +46,39 @@ autoUpload: true,
 var propTypes = {
-  action: _propTypes.default.string,
-  className: _propTypes.default.string,
-  ssrSupport: _propTypes.default.bool,
-  autoUpload: _propTypes.default.bool,
-  send: _propTypes.default.object,
-  headers: _propTypes.default.object,
-  style: _propTypes.default.object,
-  initialState: _propTypes.default.arrayOf(_propTypes.default.object),
-  type: _propTypes.default.oneOf(["card", "list"]),
-  sorting: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.object]),
-  header: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.object, _propTypes.default.func]),
-  footer: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.object, _propTypes.default.func]),
-  rules: _propTypes.default.shape({
-    size: _propTypes.default.number,
-    limit: _propTypes.default.number,
-    width: _propTypes.default.shape({
-      min: _propTypes.default.number,
-      max: _propTypes.default.number
+  action: _propTypes["default"].string,
+  className: _propTypes["default"].string,
+  inOrder: _propTypes["default"].bool,
+  ssrSupport: _propTypes["default"].bool,
+  autoUpload: _propTypes["default"].bool,
+  send: _propTypes["default"].object,
+  headers: _propTypes["default"].object,
+  style: _propTypes["default"].object,
+  initialState: _propTypes["default"].arrayOf(_propTypes["default"].object),
+  type: _propTypes["default"].oneOf(["card", "list"]),
+  sorting: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].object]),
+  header: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].object, _propTypes["default"].func]),
+  footer: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].object, _propTypes["default"].func]),
+  rules: _propTypes["default"].shape({
+    size: _propTypes["default"].number,
+    limit: _propTypes["default"].number,
+    width: _propTypes["default"].shape({
+      min: _propTypes["default"].number,
+      max: _propTypes["default"].number
     }),
-    height: _propTypes.default.shape({
-      min: _propTypes.default.number,
-      max: _propTypes.default.number
+    height: _propTypes["default"].shape({
+      min: _propTypes["default"].number,
+      max: _propTypes["default"].number
     })
   }),
-  customRequest: _propTypes.default.func,
-  source: _propTypes.default.func,
-  onSuccess: _propTypes.default.func,
-  onWarning: _propTypes.default.func,
-  onDeleted: _propTypes.default.func,
-  onChange: _propTypes.default.func,
-  onError: _propTypes.default.func,
-  onClick: _propTypes.default.func,
-  onConfirmDelete: _propTypes.default.func,
-  acceptType: _propTypes.default.string,
-  accept: _propTypes.default.array
+  customRequest: _propTypes["default"].func,
+  source: _propTypes["default"].func,
+  onSuccess: _propTypes["default"].func,
+  onWarning: _propTypes["default"].func,
+  onDeleted: _propTypes["default"].func,
+  onChange: _propTypes["default"].func,
+  onError: _propTypes["default"].func,
+  onClick: _propTypes["default"].func,
+  onConfirmDelete: _propTypes["default"].func,
+  acceptType: _propTypes["default"].string,
+  accept: _propTypes["default"].array
 };
 exports.propTypes = propTypes;

dist/Request.js

@@ -8,3 +8,3 @@ "use strict";
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
@@ -98,3 +98,3 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
   Object.entries(send).map(function (_ref3) {
-    var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
+    var _ref4 = (0, _slicedToArray2["default"])(_ref3, 2),
         key = _ref4[0],
@@ -115,2 +115,2 @@ value = _ref4[1];
 var _default = Request;
-exports.default = _default;
+exports["default"] = _default;

dist/RUG.js

@@ -8,6 +8,8 @@ "use strict";
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
@@ -17,3 +19,3 @@
 
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -24,2 +26,6 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -29,6 +35,2 @@
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _react = _interopRequireDefault(require("react"));
@@ -48,7 +50,21 @@
 
-var RUG =
-/*#__PURE__*/
-function (_React$Component) {
-  (0, _inherits2.default)(RUG, _React$Component);
+function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+
+var RUG = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(RUG, _React$Component);
+
+  var _super = _createSuper(RUG);
+
   function RUG(_ref) {
@@ -59,12 +75,12 @@ var _this;
         ssrSupport = _ref.ssrSupport;
-    (0, _classCallCheck2.default)(this, RUG);
-    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(RUG).call(this));
-    _this.fileInput = _react.default.createRef();
-    _this.setSort = _this.setSort.bind((0, _assertThisInitialized2.default)(_this));
-    _this.uploadFiles = _this.uploadFiles.bind((0, _assertThisInitialized2.default)(_this));
-    _this.openDialogue = _this.openDialogue.bind((0, _assertThisInitialized2.default)(_this));
-    _this.onProgress = _this.onProgress.bind((0, _assertThisInitialized2.default)(_this));
-    _this.onSuccess = _this.onSuccess.bind((0, _assertThisInitialized2.default)(_this));
-    _this.onWarning = _this.onWarning.bind((0, _assertThisInitialized2.default)(_this));
-    _this.onError = _this.onError.bind((0, _assertThisInitialized2.default)(_this));
+    (0, _classCallCheck2["default"])(this, RUG);
+    _this = _super.call(this);
+    _this.fileInput = /*#__PURE__*/_react["default"].createRef();
+    _this.setSort = _this.setSort.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.uploadFiles = _this.uploadFiles.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.openDialogue = _this.openDialogue.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.onProgress = _this.onProgress.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.onSuccess = _this.onSuccess.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.onWarning = _this.onWarning.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.onError = _this.onError.bind((0, _assertThisInitialized2["default"])(_this));
     _this.requests = [];
@@ -74,3 +90,3 @@ _this.increment = 0;
       images: initialState.reverse().map(function (item) {
-        return _this.create((0, _objectSpread2.default)({
+        return _this.create(_objectSpread({
           done: true
@@ -84,3 +100,3 @@ }, item));
 
-  (0, _createClass2.default)(RUG, [{
+  (0, _createClass2["default"])(RUG, [{
     key: "componentDidMount",
@@ -106,3 +122,3 @@ value: function componentDidMount() {
       var uid = "rug-".concat(Date.now(), "-").concat(this.increment++);
-      item = (0, _objectSpread2.default)({
+      item = _objectSpread({
         uid: uid,
@@ -132,3 +148,3 @@ done: false,
     key: "refresh",
-    value: function refresh(uid, data) {
+    value: function refresh(uid) {
       var _this3 = this;
@@ -147,9 +163,7 @@
     value: function () {
-      var _tryUpload = (0, _asyncToGenerator2.default)(
-      /*#__PURE__*/
-      _regenerator.default.mark(function _callee(uid, file) {
+      var _tryUpload = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(uid, file) {
         var _this4 = this;
 
         var changes, source;
-        return _regenerator.default.wrap(function _callee$(_context) {
+        return _regenerator["default"].wrap(function _callee$(_context) {
           while (1) {
@@ -177,3 +191,3 @@ switch (_context.prev = _context.next) {
               case 7:
-                this.setImage(uid, (0, _objectSpread2.default)({}, changes, {
+                this.setImage(uid, _objectSpread(_objectSpread({}, changes), {}, {
                   error: false,
@@ -209,9 +223,7 @@ done: false,
     value: function () {
-      var _remove = (0, _asyncToGenerator2.default)(
-      /*#__PURE__*/
-      _regenerator.default.mark(function _callee2(uid) {
+      var _remove = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(uid) {
         var _this5 = this;
 
         var images, deletedImage, key, image;
-        return _regenerator.default.wrap(function _callee2$(_context2) {
+        return _regenerator["default"].wrap(function _callee2$(_context2) {
           while (1) {
@@ -221,3 +233,3 @@ switch (_context2.prev = _context2.next) {
                 images = this.state.images;
-                _context2.t0 = _regenerator.default.keys(images);
+                _context2.t0 = _regenerator["default"].keys(images);
 
@@ -298,3 +310,3 @@ case 2:
       source = typeof source === "function" ? source(response) : response.source;
-      this.setImage(uid, (0, _objectSpread2.default)({
+      this.setImage(uid, _objectSpread({
         source: source,
@@ -354,3 +366,3 @@ done: true,
         if (item.uid === uid) {
-          return image = (0, _objectSpread2.default)({}, item, append);
+          return image = _objectSpread(_objectSpread({}, item), append);
         }
@@ -391,10 +403,8 @@
     value: function () {
-      var _uploadFiles = (0, _asyncToGenerator2.default)(
-      /*#__PURE__*/
-      _regenerator.default.mark(function _callee3(files) {
+      var _uploadFiles = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3(files) {
         var _this10 = this;
 
-        var images, _iteratorNormalCompletion, _didIteratorError, _iteratorError, _iterator, _step, file, source, image;
+        var images, _iterator, _step, file, source, image;
 
-        return _regenerator.default.wrap(function _callee3$(_context3) {
+        return _regenerator["default"].wrap(function _callee3$(_context3) {
           while (1) {
@@ -404,11 +414,10 @@ switch (_context3.prev = _context3.next) {
                 images = [];
-                _iteratorNormalCompletion = true;
-                _didIteratorError = false;
-                _iteratorError = undefined;
-                _context3.prev = 4;
-                _iterator = files[Symbol.iterator]();
+                _iterator = _createForOfIteratorHelper(files);
+                _context3.prev = 2;
 
-              case 6:
-                if (_iteratorNormalCompletion = (_step = _iterator.next()).done) {
-                  _context3.next = 21;
+                _iterator.s();
+
+              case 4:
+                if ((_step = _iterator.n()).done) {
+                  _context3.next = 18;
                   break;
@@ -418,7 +427,7 @@ }
                 file = _step.value;
-                _context3.prev = 8;
-                _context3.next = 11;
+                _context3.prev = 6;
+                _context3.next = 9;
                 return this.getImageURLToBlob(file, images);
 
-              case 11:
+              case 9:
                 source = _context3.sent;
@@ -432,51 +441,33 @@ image = this.create({
                 images.push(image);
-                _context3.next = 18;
+                _context3.next = 16;
                 break;
 
+              case 14:
+                _context3.prev = 14;
+                _context3.t0 = _context3["catch"](6);
+
               case 16:
-                _context3.prev = 16;
-                _context3.t0 = _context3["catch"](8);
+                _context3.next = 4;
+                break;
 
               case 18:
-                _iteratorNormalCompletion = true;
-                _context3.next = 6;
+                _context3.next = 23;
                 break;
 
-              case 21:
-                _context3.next = 27;
-                break;
+              case 20:
+                _context3.prev = 20;
+                _context3.t1 = _context3["catch"](2);
 
+                _iterator.e(_context3.t1);
+
               case 23:
                 _context3.prev = 23;
-                _context3.t1 = _context3["catch"](4);
-                _didIteratorError = true;
-                _iteratorError = _context3.t1;
 
-              case 27:
-                _context3.prev = 27;
-                _context3.prev = 28;
+                _iterator.f();
 
-                if (!_iteratorNormalCompletion && _iterator.return != null) {
-                  _iterator.return();
-                }
+                return _context3.finish(23);
 
-              case 30:
-                _context3.prev = 30;
-
-                if (!_didIteratorError) {
-                  _context3.next = 33;
-                  break;
-                }
-
-                throw _iteratorError;
-
-              case 33:
-                return _context3.finish(30);
-
-              case 34:
-                return _context3.finish(27);
-
-              case 35:
+              case 26:
                 this.setState({
-                  images: images.concat(this.state.images)
+                  images: this.props.inOrder ? [].concat((0, _toConsumableArray2["default"])(this.state.images), images) : [].concat(images, (0, _toConsumableArray2["default"])(this.state.images))
                 }, function () {
@@ -492,3 +483,3 @@ if (_this10.props.autoUpload) {
 
-              case 36:
+              case 27:
               case "end":
@@ -498,3 +489,3 @@ return _context3.stop();
           }
-        }, _callee3, this, [[4, 23, 27, 35], [8, 16], [28,, 30, 34]]);
+        }, _callee3, this, [[2, 20, 23, 26], [6, 14]]);
       }));
@@ -511,5 +502,3 @@
     value: function () {
-      var _getImageURLToBlob = (0, _asyncToGenerator2.default)(
-      /*#__PURE__*/
-      _regenerator.default.mark(function _callee4(file) {
+      var _getImageURLToBlob = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4(file) {
         var _this11 = this;
@@ -531,3 +520,3 @@
 
-        return _regenerator.default.wrap(function _callee4$(_context4) {
+        return _regenerator["default"].wrap(function _callee4$(_context4) {
           while (1) {
@@ -545,3 +534,3 @@ switch (_context4.prev = _context4.next) {
                 warning = function warning(key) {
-                  _this11.onWarning(key, (0, _objectSpread2.default)({}, rules, {
+                  _this11.onWarning(key, _objectSpread(_objectSpread({}, rules), {}, {
                     accept: accept,
@@ -641,3 +630,3 @@ file: file
           customRequest = _this$props3.customRequest;
-      var request = customRequest || _Request.default;
+      var request = customRequest || _Request["default"];
 
@@ -682,3 +671,3 @@ var _request = request({
 
-      switch ((0, _typeof2.default)(children)) {
+      switch ((0, _typeof2["default"])(children)) {
         case "object":
@@ -691,3 +680,3 @@ return children;
         default:
-          return (0, _view.default)({
+          return (0, _view["default"])({
             type: type,
@@ -729,8 +718,8 @@ sorting: sorting
 
-      return _react.default.createElement(_Context.default.Provider, {
+      return /*#__PURE__*/_react["default"].createElement(_Context["default"].Provider, {
         value: contextValue
-      }, _react.default.createElement("div", {
+      }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "rug ".concat(className),
         style: style
-      }, header && (typeof header === "function" ? header(options) : (0, _Handle.default)(options, header)), this.showChildren(options), footer && (typeof footer === "function" ? footer(options) : (0, _Handle.default)(options, footer)), _react.default.createElement("input", {
+      }, header && (typeof header === "function" ? header(options) : (0, _Handle["default"])(options, header)), this.showChildren(options), footer && (typeof footer === "function" ? footer(options) : (0, _Handle["default"])(options, footer)), /*#__PURE__*/_react["default"].createElement("input", {
         multiple: true,
@@ -744,3 +733,5 @@ type: "file",
         onChange: function onChange(event) {
-          return _this13.uploadFiles(event.target.files);
+          _this13.uploadFiles(event.target.files);
+
+          event.target.value = "";
         }
@@ -751,3 +742,3 @@ })));
   return RUG;
-}(_react.default.Component);
+}(_react["default"].Component);
 
@@ -757,2 +748,2 @@ RUG.propTypes = _PropTypes.propTypes;
 var _default = RUG;
-exports.default = _default;
+exports["default"] = _default;

dist/view/Card.js

@@ -8,3 +8,3 @@ "use strict";
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
@@ -19,2 +19,4 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -24,4 +26,2 @@
 
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _react = _interopRequireDefault(require("react"));
@@ -31,12 +31,16 @@
 
-var Card =
-/*#__PURE__*/
-function (_React$Component) {
-  (0, _inherits2.default)(Card, _React$Component);
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+
+var Card = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Card, _React$Component);
+
+  var _super = _createSuper(Card);
+
   function Card() {
     var _this;
 
-    (0, _classCallCheck2.default)(this, Card);
-    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Card).call(this));
+    (0, _classCallCheck2["default"])(this, Card);
+    _this = _super.call(this);
     _this.state = {
@@ -48,3 +52,3 @@ spin: false
 
-  (0, _createClass2.default)(Card, [{
+  (0, _createClass2["default"])(Card, [{
     key: "render",
@@ -69,13 +73,13 @@ value: function render() {
           uploading = _this$props$image.uploading,
-          props = (0, _objectWithoutProperties2.default)(_this$props, ["image"]),
+          props = (0, _objectWithoutProperties2["default"])(_this$props, ["image"]),
           spin = this.state.spin;
-      return _react.default.createElement("div", (0, _extends2.default)({}, props, {
+      return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, props, {
         key: uid,
         className: "rug-card ".concat(error ? "__error" : "")
-      }), (name || size) && _react.default.createElement("div", {
+      }), (name || size) && /*#__PURE__*/_react["default"].createElement("div", {
         className: "rug-card-name",
         onClick: click
-      }, _react.default.createElement("div", null, name, _react.default.createElement("div", {
+      }, /*#__PURE__*/_react["default"].createElement("div", null, name, /*#__PURE__*/_react["default"].createElement("div", {
         className: "rug-card-size"
-      }, size))), _react.default.createElement("div", {
+      }, size))), /*#__PURE__*/_react["default"].createElement("div", {
         style: {
@@ -86,6 +90,6 @@ backgroundImage: "url(".concat(source, ")")
         className: "rug-card-image"
-      }), !done && !error && uploading && _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("svg", {
+      }), !done && !error && uploading && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("svg", {
         viewBox: "0 0 36 38",
         className: "rug-card-progress"
-      }, _react.default.createElement("path", {
+      }, /*#__PURE__*/_react["default"].createElement("path", {
         className: "__progress-cricle",
@@ -96,15 +100,15 @@ style: {
         d: "M18 2.5845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
-      })), _react.default.createElement("div", {
+      })), /*#__PURE__*/_react["default"].createElement("div", {
         className: "rug-card-progress-count"
-      }, progress)), !(done || error || uploading) && _react.default.createElement("div", {
+      }, progress)), !(done || error || uploading) && /*#__PURE__*/_react["default"].createElement("div", {
         onClick: upload,
         className: "rug-card-upload-button"
-      }, _react.default.createElement("svg", {
+      }, /*#__PURE__*/_react["default"].createElement("svg", {
         viewBox: "0 -5 32 52"
-      }, _react.default.createElement("g", null, _react.default.createElement("polyline", {
+      }, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("polyline", {
         points: "1 19 1 31 31 31 31 19"
-      }), _react.default.createElement("polyline", {
+      }), /*#__PURE__*/_react["default"].createElement("polyline", {
         className: "__arrow",
         points: "8 9 16 1 24 9"
-      }), _react.default.createElement("line", {
+      }), /*#__PURE__*/_react["default"].createElement("line", {
         className: "__arrow",
@@ -115,3 +119,3 @@ x1: "16",
         y2: "25"
-      })))), error && typeof refresh === "function" && _react.default.createElement("div", {
+      })))), error && typeof refresh === "function" && /*#__PURE__*/_react["default"].createElement("div", {
         onClick: function onClick() {
@@ -133,12 +137,12 @@ if (spin) return;
         className: "rug-card-refresh ".concat(spin ? "__spin" : "")
-      }, _react.default.createElement("div", {
+      }, /*#__PURE__*/_react["default"].createElement("div", {
         style: {
           padding: 7
         }
-      }, _react.default.createElement(_RefreshIcon.default, null))), _react.default.createElement("div", {
+      }, /*#__PURE__*/_react["default"].createElement(_RefreshIcon["default"], null))), /*#__PURE__*/_react["default"].createElement("div", {
         className: "rug-card-remove",
         onClick: remove
-      }, _react.default.createElement("svg", {
+      }, /*#__PURE__*/_react["default"].createElement("svg", {
         viewBox: "0 0 40 40"
-      }, _react.default.createElement("path", {
+      }, /*#__PURE__*/_react["default"].createElement("path", {
         stroke: "current",
@@ -152,4 +156,4 @@ strokeLinecap: "round",
   return Card;
-}(_react.default.Component);
+}(_react["default"].Component);
 
-exports.default = Card;
+exports["default"] = Card;

dist/view/index.js

@@ -11,3 +11,3 @@ "use strict";
   get: function get() {
-    return _List.default;
+    return _List["default"];
   }
@@ -18,6 +18,6 @@ });
   get: function get() {
-    return _Card.default;
+    return _Card["default"];
   }
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
@@ -39,3 +39,3 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
     case "card":
-      return _react.default.createElement(_Card.default, {
+      return /*#__PURE__*/_react["default"].createElement(_Card["default"], {
         image: image
@@ -45,3 +45,3 @@ });
     case "list":
-      return _react.default.createElement(_List.default, {
+      return /*#__PURE__*/_react["default"].createElement(_List["default"], {
         image: image
@@ -58,13 +58,13 @@ });
   var className = "rug-items __".concat(type, " ").concat(sorting ? "__sorting" : "");
-  var options = (0, _typeof2.default)(sorting) === "object" ? sorting : {};
-  return sorting ? _react.default.createElement(_DragArea.default, (0, _extends2.default)({}, options, {
+  var options = (0, _typeof2["default"])(sorting) === "object" ? sorting : {};
+  return sorting ? /*#__PURE__*/_react["default"].createElement(_DragArea["default"], (0, _extends2["default"])({}, options, {
     className: className
   }), function (image) {
-    return _react.default.createElement("div", {
+    return /*#__PURE__*/_react["default"].createElement("div", {
       className: "rug-item"
     }, Item(type, image));
-  }) : _react.default.createElement("div", {
+  }) : /*#__PURE__*/_react["default"].createElement("div", {
     className: className
   }, images.map(function (image, key) {
-    return _react.default.createElement("div", {
+    return /*#__PURE__*/_react["default"].createElement("div", {
       className: "rug-item",
@@ -76,2 +76,2 @@ key: key
 
-exports.default = _default;
+exports["default"] = _default;

dist/view/List.js

@@ -8,3 +8,3 @@ "use strict";
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
@@ -19,2 +19,4 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -24,4 +26,2 @@
 
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _react = _interopRequireDefault(require("react"));
@@ -33,12 +33,16 @@
 
-var List =
-/*#__PURE__*/
-function (_React$Component) {
-  (0, _inherits2.default)(List, _React$Component);
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+
+var List = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(List, _React$Component);
+
+  var _super = _createSuper(List);
+
   function List() {
     var _this;
 
-    (0, _classCallCheck2.default)(this, List);
-    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(List).call(this));
+    (0, _classCallCheck2["default"])(this, List);
+    _this = _super.call(this);
     _this.state = {
@@ -50,3 +54,3 @@ spin: false
 
-  (0, _createClass2.default)(List, [{
+  (0, _createClass2["default"])(List, [{
     key: "render",
@@ -71,9 +75,9 @@ value: function render() {
           uploading = _this$props$image.uploading,
-          props = (0, _objectWithoutProperties2.default)(_this$props, ["image"]),
+          props = (0, _objectWithoutProperties2["default"])(_this$props, ["image"]),
           spin = this.state.spin,
           showProgress = !done && !error ? "__active" : "";
-      return _react.default.createElement("div", (0, _extends2.default)({}, props, {
+      return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, props, {
         key: uid,
         className: "rug-list"
-      }), uploading && _react.default.createElement("div", {
+      }), uploading && /*#__PURE__*/_react["default"].createElement("div", {
         className: "rug-list-progress ".concat(showProgress),
@@ -83,8 +87,8 @@ style: {
         }
-      }), uploading && _react.default.createElement("span", {
+      }), uploading && /*#__PURE__*/_react["default"].createElement("span", {
         className: "rug-list-progress-count ".concat(showProgress)
-      }, progress || 0, "%"), !(done || error || uploading) && _react.default.createElement("div", {
+      }, progress || 0, "%"), !(done || error || uploading) && /*#__PURE__*/_react["default"].createElement("div", {
         onClick: upload,
         className: "rug-list-upload-button"
-      }, _react.default.createElement(_UploadIcon.default, null)), error && typeof refresh === "function" && _react.default.createElement("div", {
+      }, /*#__PURE__*/_react["default"].createElement(_UploadIcon["default"], null)), error && typeof refresh === "function" && /*#__PURE__*/_react["default"].createElement("div", {
         onClick: function onClick() {
@@ -106,25 +110,25 @@ if (spin) return;
         className: "rug-list-refresh ".concat(spin ? "__spin" : "")
-      }, _react.default.createElement("div", {
+      }, /*#__PURE__*/_react["default"].createElement("div", {
         style: {
           padding: 3
         }
-      }, _react.default.createElement(_RefreshIcon.default, null))), _react.default.createElement("div", {
+      }, /*#__PURE__*/_react["default"].createElement(_RefreshIcon["default"], null))), /*#__PURE__*/_react["default"].createElement("div", {
         className: "rug-list-image",
         onClick: click
-      }, _react.default.createElement("img", {
+      }, /*#__PURE__*/_react["default"].createElement("img", {
         src: source,
         alt: name
-      })), _react.default.createElement("div", {
+      })), /*#__PURE__*/_react["default"].createElement("div", {
         className: "rug-list-content",
         onClick: click
-      }, _react.default.createElement("div", {
+      }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "rug-list-name"
-      }, name), _react.default.createElement("div", {
+      }, name), /*#__PURE__*/_react["default"].createElement("div", {
         className: "rug-list-size"
-      }, size)), _react.default.createElement("div", {
+      }, size)), /*#__PURE__*/_react["default"].createElement("div", {
         className: "rug-list-remove",
         onClick: remove
-      }, _react.default.createElement("svg", {
+      }, /*#__PURE__*/_react["default"].createElement("svg", {
         viewBox: "0 0 40 40"
-      }, _react.default.createElement("path", {
+      }, /*#__PURE__*/_react["default"].createElement("path", {
         stroke: "current",
@@ -138,4 +142,4 @@ strokeLinecap: "round",
   return List;
-}(_react.default.Component);
+}(_react["default"].Component);
 
-exports.default = List;
+exports["default"] = List;

dist/view/RefreshIcon.js

@@ -8,3 +8,3 @@ "use strict";
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
@@ -14,8 +14,8 @@ var _react = _interopRequireDefault(require("react"));
 var _default = function _default() {
-  return _react.default.createElement("svg", {
+  return /*#__PURE__*/_react["default"].createElement("svg", {
     viewBox: "0 0 65 65",
     className: "__refresh-icon"
-  }, _react.default.createElement("g", null, _react.default.createElement("path", {
+  }, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("path", {
     d: "m32.5 4.999c-5.405 0-10.444 1.577-14.699 4.282l-5.75-5.75v16.11h16.11l-6.395-6.395c3.18-1.787 6.834-2.82 10.734-2.82 12.171 0 22.073 9.902 22.073 22.074 0 2.899-0.577 5.664-1.599 8.202l4.738 2.762c1.47-3.363 2.288-7.068 2.288-10.964 0-15.164-12.337-27.501-27.5-27.501z"
-  }), _react.default.createElement("path", {
+  }), /*#__PURE__*/_react["default"].createElement("path", {
     d: "m43.227 51.746c-3.179 1.786-6.826 2.827-10.726 2.827-12.171 0-22.073-9.902-22.073-22.073 0-2.739 0.524-5.35 1.439-7.771l-4.731-2.851c-1.375 3.271-2.136 6.858-2.136 10.622 0 15.164 12.336 27.5 27.5 27.5 5.406 0 10.434-1.584 14.691-4.289l5.758 5.759v-16.112h-16.111l6.389 6.388z"
@@ -25,2 +25,2 @@ })));
 
-exports.default = _default;
+exports["default"] = _default;

dist/view/UploadIcon.js

@@ -8,3 +8,3 @@ "use strict";
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
@@ -14,10 +14,10 @@ var _react = _interopRequireDefault(require("react"));
 var _default = function _default() {
-  return _react.default.createElement("svg", {
+  return /*#__PURE__*/_react["default"].createElement("svg", {
     viewBox: "0 -5 32 52"
-  }, _react.default.createElement("g", null, _react.default.createElement("polyline", {
+  }, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("polyline", {
     points: "1 19 1 31 31 31 31 19"
-  }), _react.default.createElement("polyline", {
+  }), /*#__PURE__*/_react["default"].createElement("polyline", {
     className: "__arrow",
     points: "8 9 16 1 24 9"
-  }), _react.default.createElement("line", {
+  }), /*#__PURE__*/_react["default"].createElement("line", {
     className: "__arrow",
@@ -31,2 +31,2 @@ x1: "16",
 
-exports.default = _default;
+exports["default"] = _default;

package.json

 {
   "name": "react-upload-gallery",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "license": "MIT",
@@ -46,4 +46,4 @@ "author": "Muhammet INAN",
     "onchange": "^6.0.0",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "sass-loader": "^7.1.0",
@@ -50,0 +50,0 @@ "style-loader": "^0.23.1",

README.md

@@ -20,2 +20,4 @@ # React Upload Gallery
 
+### Demo
+[CodeSandbox](https://codesandbox.io/s/2x2n3m17yp)
 
@@ -22,0 +24,0 @@ ### Usage

webpack.config.js

@@ -1,36 +0,33 @@
-var path = require('path');
+var path = require("path");
 
 module.exports = {
-    mode: 'production',
-    entry: {
-        index: './src/index.js',
-        style: './src/style.scss'
-    },
-    output: {
-        path: path.resolve(__dirname, 'dist'),
-        filename: '[name].js',
-        libraryTarget: 'commonjs2'
-    },
-    module: {
-        rules: [
-            {
-                test: /\.(js)$/,
-                exclude: /node_modules/,
-                use: {
-                    loader: "babel-loader"
-                }
-            },
-            {
-                test: /\.*scss$/,
-                use: [
-                    'style-loader',
-                    'css-loader',
-                    'sass-loader'
-                ]
-            }
-        ]
-    },
-    externals: {
-        'react': 'commonjs react' 
-    }
-};
+  mode: "production",
+  entry: {
+    index: "./src/index.js",
+    style: "./src/style.scss",
+  },
+  output: {
+    path: path.resolve(__dirname, "dist"),
+    filename: "[name].js",
+    libraryTarget: "commonjs2",
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader",
+        },
+      },
+      {
+        test: /\.*scss$/,
+        use: ["style-loader", "css-loader", "sass-loader"],
+      },
+    ],
+  },
+  externals: {
+    react: "commonjs react",
+  },
+};
+

No alert changes

Improved metrics

Total package byte prevSize

91974

increased by7.74%

Number of package files

23

increased by4.55%

Lines of code

1838

increased by0.11%

Number of lines in readme file

333

increased by0.6%

No dependency changes