cm-page-builder - npm Package Compare versions

Comparing version 1.2.33 to 1.2.34

lib/components/AddComponent.js

@@ -119,8 +119,4 @@ 'use strict';
         'onFocus': this.handleFocus,
-        'onMouseEnter': function onMouseEnter() {
-          return _this2.setState({ showHandle: true });
-        },
-        'onMouseLeave': function onMouseLeave() {
-          return _this2.setState({ showHandle: false });
-        }
+        'onMouseEnter': this.handleMouseEnter,
+        'onMouseLeave': this.handleMouseLeave
       } : {};
@@ -186,2 +182,7 @@
               'div',
+              { 'data-type': 'File' },
+              _react2.default.createElement('i', { className: 'cm-icon-upload' })
+            ),
+            _react2.default.createElement(
+              'div',
               { 'data-type': 'Divider' },
@@ -354,2 +355,11 @@ _react2.default.createElement('i', { className: 'cm-icon-divider' })
 
+  this.handleMouseEnter = function () {
+    if (_this3.props.currentElem !== _this3.props.id) _this3.props.setCurrentElem(_this3.props.id);
+    _this3.setState({ showHandle: true });
+  };
+
+  this.handleMouseLeave = function () {
+    _this3.setState({ showHandle: false });
+  };
+
   this.handleInlineStyles = function (type) {
@@ -392,4 +402,9 @@ var styles = {
 };
+
+var mapStateToProps = function mapStateToProps(state) {
+  currentElem: state.currentElem;
+};
+
 exports.default = (0, _reactRedux.connect)(function (state) {
   return state;
 }, mapDispatchToProps)(AddComponent);

lib/components/DragHandle.js

@@ -49,3 +49,3 @@ 'use strict';
       e.preventDefault();
-      // this.setState({showMoreOptions: !this.state.showMoreOptions})
+      _this.setState({ showMoreOptions: !_this.state.showMoreOptions });
     };
@@ -52,0 +52,0 @@

lib/components/Upload.js

@@ -8,2 +8,4 @@ 'use strict';
 
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -15,2 +17,4 @@
 
+var _reactRouterDom = require('react-router-dom');
+
 require('../styles/components/Upload.css');
@@ -30,2 +34,10 @@
 
+var _reactCircularProgressbar = require('react-circular-progressbar');
+
+require('react-circular-progressbar/dist/styles.css');
+
+var _helpers = require('../utils/helpers');
+
+var _constant = require('../utils/constant');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -37,4 +49,8 @@
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } // Package for progress bar
+// Stylesheet for progress bar
 
+
+//const acceptedExtensions = [ 'pdf', 'xls', 'docx', 'doc', 'csv', 'zip' ]
+
 var WrappedUpload = function (_React$Component) {
@@ -48,2 +64,16 @@ _inherits(WrappedUpload, _React$Component);
 
+    _this.componentWillReceiveProps = function (nextProps) {
+      var progressInfo = nextProps.progressInfo;
+
+      if (progressInfo && progressInfo.progress && progressInfo.progress.operation === 'UpdatePageComponentMutation' && progressInfo.progress.percent < 100 && _this.state.uploading) {
+        _this.setState({ uploadProgress: progressInfo.progress.percent });
+      } else if (_this.state.uploadProgress < 100 && progressInfo.progress.percent === 100) {
+        setTimeout(function () {
+          _this.setState({ uploadProgress: 100, uploading: false });
+        }, 2000);
+      }
+      // else if (this.state.uploading && progressInfo.progress.percent === 100 && this.state.uploadProgress === 1)
+      //   this.setState({ uploading: false })
+    };
+
     _this.getImageUploader = function () {
@@ -53,9 +83,16 @@ return _this.props.useDirectStorageUpload ? _this._directStorageUpload : _this._uploadImage;
 
-    _this._uploadImage = function (e, context) {
+    _this._uploadImage = function (e, context, isFile) {
       var content = '';
-      if (e.target.files && e.target.files[0]) {
-        var file = e.target.files[0];
+      if (isFile || e.target.files && e.target.files[0]) {
+        var file = isFile ? e : e.target.files[0];
+        var extension = file.name.split('.').pop().toLowerCase();
         var reader = new FileReader();
+        var fileInfo = { name: file.name.split('.')[0], ext: extension, size: (0, _helpers.bytesToSize)(file.size) };
+        _this.setState({ fileInfo: fileInfo });
+        reader.onloadstart = function (e) {
+          _this.setState({ uploading: true });
+        };
         reader.onload = function (e) {
           content = e.target.result;
+          _this.setState({ uploaded: true });
           _this.props.updateComponent({ id: _this.props.id, newState: { component_attachment: { filename: file.name, content: content }, initial: false } });
@@ -89,3 +126,22 @@ };
 
-    _this.state = {};
+    _this.getFileIcon = function (ext) {
+      switch (ext) {
+        case 'pdf':
+          return _constant.S3_BASE_URL + '/icons/pdf.svg';
+        case 'doc':
+        case 'docx':
+          return _constant.S3_BASE_URL + '/icons/document.svg';
+        case 'xls':
+          return _constant.S3_BASE_URL + '/icons/spreadsheet.svg';
+        case 'zip':
+          return _constant.S3_BASE_URL + '/icons/zip.svg';
+        default:
+          return _constant.S3_BASE_URL + '/icons/document.svg';
+      }
+    };
+
+    _this.state = {
+      uploaded: false,
+      file: props.componentType === 'File'
+    };
     WrappedUpload.contextType = _permissionContext.PermissionContext;
@@ -96,2 +152,27 @@ return _this;
   _createClass(WrappedUpload, [{
+    key: 'componentWillMount',
+    value: function componentWillMount() {
+      var _props = this.props,
+          component_attachment = _props.component_attachment,
+          content = _props.content,
+          componentType = _props.componentType;
+
+      if ((typeof content === 'undefined' ? 'undefined' : _typeof(content)) === 'object') this.getImageUploader()(this.props.content, null, true);
+      if (component_attachment && componentType === 'File') {
+        var name = component_attachment.filename.split('.')[0];
+        var ext = component_attachment.filename.split('.')[1].toLowerCase();
+        var fileInfo = { name: name, ext: ext, size: (0, _helpers.bytesToSize)(component_attachment.filesize) };
+        this.setState({ fileInfo: fileInfo });
+      }
+    }
+
+    // Method to get file size from base 64 string
+    // getFileSize = (base64String) => {
+    //   var stringLength = base64String.length - 'data:image/png;base64,'.length;
+
+    //   var sizeInBytes = 4 * Math.ceil((stringLength / 3))*0.5624896334383812;
+    //   var sizeInKb=sizeInBytes/1000;
+    // }
+
+  }, {
     key: 'render',
@@ -102,2 +183,8 @@ value: function render() {
       var component_attachment = this.props.component_attachment;
+      var _state = this.state,
+          uploadProgress = _state.uploadProgress,
+          fileInfo = _state.fileInfo,
+          uploaded = _state.uploaded,
+          file = _state.file,
+          uploading = _state.uploading;
       var context = this.context;
@@ -114,3 +201,61 @@
         },
-        component_attachment ? _react2.default.createElement('img', { src: component_attachment.url || component_attachment.content, width: '100%', alt: component_attachment.filename }) : isEdit && _react2.default.createElement(
+        // UI to show for file uploads
+        fileInfo && file && _react2.default.createElement(
+          'a',
+          { href: component_attachment && component_attachment.url, style: { textDecoration: 'none' }, target: '_blank' },
+          _react2.default.createElement(
+            'div',
+            { className: 'file-data-section' },
+            _react2.default.createElement(
+              'div',
+              { className: 'file-data-icon' },
+              _react2.default.createElement('img', { src: this.getFileIcon(fileInfo.ext), alt: 'Alt image', className: 'file-data-icon-img' })
+            ),
+            _react2.default.createElement(
+              'div',
+              { className: 'file-data-information' },
+              _react2.default.createElement(
+                'div',
+                { className: 'file-data-name' },
+                fileInfo.name
+              ),
+              _react2.default.createElement(
+                'div',
+                { className: 'file-data-extension' },
+                fileInfo.ext.toUpperCase() + ' file (' + fileInfo.size + ')',
+                uploadProgress && uploadProgress < 100 && _react2.default.createElement(
+                  'div',
+                  { className: 'file-data-loader' },
+                  _react2.default.createElement(_reactCircularProgressbar.CircularProgressbar, { value: uploadProgress }),
+                  _react2.default.createElement(
+                    'div',
+                    { className: 'file-data-loader-percent' },
+                    ' ' + uploadProgress + '%'
+                  )
+                )
+              )
+            )
+          )
+        ),
+        // UI to show for image upload
+        component_attachment && !file && _react2.default.createElement(
+          'div',
+          { className: 'image-upload' },
+          _react2.default.createElement('img', { src: component_attachment.url || component_attachment.content, width: '100%', alt: component_attachment.filename }),
+          _react2.default.createElement(
+            'div',
+            { className: 'file-data-loader-section' },
+            uploadProgress && uploadProgress < 100 && _react2.default.createElement(
+              'div',
+              { className: 'file-data-loader' },
+              _react2.default.createElement(_reactCircularProgressbar.CircularProgressbar, { value: uploadProgress }),
+              _react2.default.createElement(
+                'div',
+                { className: 'file-data-loader-percent' },
+                ' ' + uploadProgress + '%'
+              )
+            )
+          )
+        ),
+        isEdit && !uploading && !component_attachment && _react2.default.createElement(
           _react2.default.Fragment,
@@ -124,7 +269,13 @@ null,
           'Click to upload file',
-          _react2.default.createElement('input', { ref: function ref(node) {
+          !uploaded && _react2.default.createElement('input', {
+            ref: function ref(node) {
               return _this2.fileInputElem = node;
-            }, type: 'file', accept: 'image/*', hidden: true, onChange: function onChange(e) {
+            },
+            type: 'file',
+            accept: !file ? 'image/*' : '*',
+            hidden: true,
+            onChange: function onChange(e) {
               return _this2.getImageUploader()(e, context);
-            } })
+            }
+          })
         )
@@ -131,0 +282,0 @@ );

lib/page/PageContainer.js

@@ -49,2 +49,8 @@ 'use strict';
 
+var _os = require('os');
+
+var _reactDropzone = require('react-dropzone');
+
+var _reactDropzone2 = _interopRequireDefault(_reactDropzone);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -117,2 +123,5 @@
 			if (typeName) {
+				var customProp = typeName === 'File' ? { file: true } : {}; // Send custom props to Upload component if the component type is File
+				if (typeName === 'Upload' || typeName === 'File') customProp = _extends({}, customProp, { progressInfo: _this.props.progressInfo });
+				typeName = typeName === 'File' ? 'Upload' : typeName;
 				var Component = require('../components/' + typeName)[typeName];
@@ -122,7 +131,7 @@ return _react2.default.createElement(
 					{ key: dataId, id: dataId, data: data },
-					_react2.default.createElement(Component, {
+					_react2.default.createElement(Component, _extends({
 						handleUpdate: _this.emitUpdate,
 						order: data.componentType === 'Olist' && _this._getCurrentOrder(index),
 						useDirectStorageUpload: _this.props.useDirectStorageUpload
-					})
+					}, customProp))
 				);
@@ -254,2 +263,22 @@ }
 
+		_this.handleFileDrop = function (acceptedFiles, rejectedFiles, event) {
+			var _this$props2 = _this.props,
+			    appData = _this$props2.appData,
+			    currentElem = _this$props2.currentElem;
+
+			var id = null;
+			var lastPosition = appData.componentData.length;
+			var lastElem = appData.componentData[appData.componentData.length - 1];
+			id = lastElem && lastElem.id;
+			acceptedFiles.forEach(function (file) {
+				_this.props.addNewComponent({ id: id, componentType: file.type === 'image/jpeg' ? 'Upload' : 'File', content: file });
+			});
+			var pageElem = document.getElementById('page-builder');
+			window.scroll({ //Smooth scroll to bottom of page after file is added
+				top: pageElem.scrollHeight,
+				left: 0,
+				behavior: 'smooth'
+			});
+		};
+
 		_this.state = {
@@ -355,3 +384,16 @@ meta: props.meta,
 		key: 'render',
+
+
+		// handleFileDragEnter = (event) => {
+		// 	let target = event.target
+		// 	target.setAttribute('id', 'drag-element')
+		// }
+
+		// handleFileDragLeave = (event) => {
+		// 	event.target.removeAttribute('id')
+		// }
+
 		value: function render() {
+			var _this3 = this;
+
 			var _state = this.state,
@@ -366,71 +408,88 @@ meta = _state.meta,
 			return _react2.default.createElement(
-				'div',
+				_reactDropzone2.default,
 				{
-					className: 'cm-page-builder',
-					id: 'page-builder',
-					style: this.props.newPage ? { marginTop: '50px' } : {},
-					onMouseUp: isEdit ? this.handleMouseUp : undefined,
-					onSelect: isEdit ? this.handleSelection : undefined,
-					onKeyDown: isEdit ? this.handleKeyDown : undefined
+					noClick: true,
+					noKeyboard: true
+					// onDragEnter={this.handleFileDragEnter}
+					// onDragLeave={this.handleFileDragLeave}
+					, onDrop: this.handleFileDrop
 				},
-				_react2.default.createElement(
-					_reactHelmet2.default,
-					null,
-					_react2.default.createElement('link', { rel: 'stylesheet', href: 'https://d1azc1qln24ryf.cloudfront.net/120939/PageBuilder/style-cf.css?fcnavv' })
-				),
-				_react2.default.createElement(
-					_permissionContext.PermissionContext.Provider,
-					{ value: { status: this.props.status, emitUpdate: this.emitUpdate } },
-					_react2.default.createElement(_PageDetails.PageDetails, {
-						pageComponents: appData.componentData,
-						emitUpdate: this.emitUpdate,
-						meta: meta,
-						getPageComponent: this.getPageComponent,
-						requestHandler: this.props.requestHandler,
-						pageCategories: this.props.pageCategories,
-						currentOffices: this.props.currentOffices,
-						isEditMode: isEdit,
-						onMouseUp: isEdit ? this.handleMouseUp : undefined,
-						showTitle: this.props.showTitle,
-						showEmoji: this.props.showEmoji,
-						showPageInfo: this.props.showPageInfo
-					})
-				),
-				_react2.default.createElement(
-					_reactTransitionGroup.CSSTransition,
-					{
-						'in': actionDomRect && actionDomRect.top && isEdit && currentType !== "Title of the page",
-						timeout: 400,
-						classNames: 'dropdown-fade',
-						onEnter: this.showTooltip,
-						onExited: this.hideTooltip,
-						unmountOnExit: true
-					},
-					_react2.default.createElement(
+				function (_ref) {
+					var getRootProps = _ref.getRootProps,
+					    getInputProps = _ref.getInputProps,
+					    isDragActive = _ref.isDragActive;
+					return _react2.default.createElement(
 						'div',
-						{ className: 'text-selection-tool', id: 'cm-text-edit-tooltip', style: actionDomRect ? { top: actionDomRect.top, left: actionDomRect.left } : { display: 'none' } },
+						_extends({
+							className: 'cm-page-builder',
+							style: isDragActive ? { pointerEvents: 'none' } : {},
+							id: 'page-builder'
+						}, getRootProps(), {
+							style: _this3.props.newPage ? { marginTop: '50px' } : {},
+							onMouseUp: isEdit ? _this3.handleMouseUp : undefined,
+							onSelect: isEdit ? _this3.handleSelection : undefined,
+							onKeyDown: isEdit ? _this3.handleKeyDown : undefined
+						}),
 						_react2.default.createElement(
-							'div',
-							{ className: activeFormatting.includes('bold') ? "bold-tool-btn-active" : "bold-tool-btn", onMouseDown: !['Heading', 'Subheading'].includes(currentType) ? this.editText : function (e) {
-									e.preventDefault();
-								}, 'data-action': 'bold' },
-							'B'
+							_reactHelmet2.default,
+							null,
+							_react2.default.createElement('link', { rel: 'stylesheet', href: 'https://d1azc1qln24ryf.cloudfront.net/120939/PageBuilder/style-cf.css?fcnavv' })
 						),
 						_react2.default.createElement(
-							'div',
-							{ className: activeFormatting.includes('italic') ? "tool-btn-active" : "tool-btn", onMouseDown: this.editText, 'data-action': 'italic' },
-							_react2.default.createElement('i', { className: 'cm-icon-italic' })
+							_permissionContext.PermissionContext.Provider,
+							{ value: { status: _this3.props.status, emitUpdate: _this3.emitUpdate } },
+							_react2.default.createElement(_PageDetails.PageDetails, {
+								pageComponents: appData.componentData,
+								emitUpdate: _this3.emitUpdate,
+								meta: meta,
+								getPageComponent: _this3.getPageComponent,
+								requestHandler: _this3.props.requestHandler,
+								pageCategories: _this3.props.pageCategories,
+								currentOffices: _this3.props.currentOffices,
+								isEditMode: isEdit,
+								onMouseUp: isEdit ? _this3.handleMouseUp : undefined,
+								showTitle: _this3.props.showTitle,
+								showEmoji: _this3.props.showEmoji,
+								showPageInfo: _this3.props.showPageInfo
+							})
 						),
 						_react2.default.createElement(
-							'div',
-							{ className: activeFormatting.includes('strikeThrough') ? "tool-btn-active" : "tool-btn", onMouseDown: this.editText, 'data-action': 'strikeThrough' },
-							_react2.default.createElement('i', { className: 'cm-icon-strikethrough' })
-						),
-						_react2.default.createElement(
-							'div',
-							{ className: activeFormatting.includes('createLink') ? "tool-btn-active" : "tool-btn", onMouseDown: this.editText, 'data-action': 'createLink' },
-							_react2.default.createElement('i', { className: 'cm-icon-link' })
+							_reactTransitionGroup.CSSTransition,
+							{
+								'in': actionDomRect && actionDomRect.top && isEdit && currentType !== "Title of the page",
+								timeout: 400,
+								classNames: 'dropdown-fade',
+								onEnter: _this3.showTooltip,
+								onExited: _this3.hideTooltip,
+								unmountOnExit: true
+							},
+							_react2.default.createElement(
+								'div',
+								{ className: 'text-selection-tool', id: 'cm-text-edit-tooltip', style: actionDomRect ? { top: actionDomRect.top, left: actionDomRect.left } : { display: 'none' } },
+								_react2.default.createElement(
+									'div',
+									{ className: activeFormatting.includes('bold') ? "bold-tool-btn-active" : "bold-tool-btn", onMouseDown: !['Heading', 'Subheading'].includes(currentType) ? _this3.editText : function (e) {
+											e.preventDefault();
+										}, 'data-action': 'bold' },
+									'B'
+								),
+								_react2.default.createElement(
+									'div',
+									{ className: activeFormatting.includes('italic') ? "tool-btn-active" : "tool-btn", onMouseDown: _this3.editText, 'data-action': 'italic' },
+									_react2.default.createElement('i', { className: 'cm-icon-italic' })
+								),
+								_react2.default.createElement(
+									'div',
+									{ className: activeFormatting.includes('strikeThrough') ? "tool-btn-active" : "tool-btn", onMouseDown: _this3.editText, 'data-action': 'strikeThrough' },
+									_react2.default.createElement('i', { className: 'cm-icon-strikethrough' })
+								),
+								_react2.default.createElement(
+									'div',
+									{ className: activeFormatting.includes('createLink') ? "tool-btn-active" : "tool-btn", onMouseDown: _this3.editText, 'data-action': 'createLink' },
+									_react2.default.createElement('i', { className: 'cm-icon-link' })
+								)
+							)
 						)
-					)
-				)
+					);
+				}
 			);
@@ -437,0 +496,0 @@ }

lib/page/PageDetails.js

@@ -82,3 +82,3 @@ 'use strict';
 						{ className: 'current-user-detail' },
-						_react2.default.createElement('img', { src: meta.creator.profile_photo }),
+						_react2.default.createElement('img', { src: meta.creator && meta.creator.profile_photo }),
 						_react2.default.createElement(
@@ -85,0 +85,0 @@ 'p',

lib/redux/reducers/appDataReducers.js

@@ -103,3 +103,3 @@ 'use strict';
       temp.push(_extends({}, componentData[i], { position: position }));
-      newCom = { content: '', position: position + 1, componentType: componentType, id: data.newId };
+      newCom = { content: data.content ? data.content : '', position: position + 1, componentType: componentType, id: data.newId };
       temp.push(newCom);
@@ -116,3 +116,5 @@ position += 2;
   }
-  emitUpdate(newCom, 'add');
+  var tempCom = _extends({}, newCom);
+  tempCom.content = "";
+  emitUpdate(tempCom, 'add');
   return { componentData: temp };
@@ -119,0 +121,0 @@ }

lib/utils/constant.js

@@ -6,2 +6,4 @@ 'use strict';
 });
-var TEXT_INPUT_COMPONENT = exports.TEXT_INPUT_COMPONENT = ['Text', 'Title', 'Header1', 'Header2', 'Ulist', 'Olist'];
+var TEXT_INPUT_COMPONENT = exports.TEXT_INPUT_COMPONENT = ['Text', 'Title', 'Header1', 'Header2', 'Ulist', 'Olist'];
+
+var S3_BASE_URL = exports.S3_BASE_URL = "https://cdn-expa.aiesec.org";

lib/utils/helpers.js

@@ -85,2 +85,10 @@ 'use strict';
   return data;
-}
+}
+
+// Function to convert file sizes in bytes to KB, MB, GB, TB
+var bytesToSize = exports.bytesToSize = function bytesToSize(bytes) {
+  var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+  if (bytes == 0) return '0 Byte';
+  var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
+  return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
+};

package.json

 {
   "name": "cm-page-builder",
-  "version": "1.2.33",
+  "version": "1.2.34",
   "description": "Awesome react starter kit",
@@ -71,2 +71,4 @@ "main": "lib/page/index.js",
     "prop-types": "^15.7.2",
+    "react-circular-progressbar": "^2.0.2",
+    "react-dropzone": "^10.1.9",
     "react-helmet": "^5.2.1",
@@ -73,0 +75,0 @@ "react-redux": "^7.1.0",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

150536

increased by8.33%

Lines of code

3517

increased by8.08%

Worsened metrics

Dependency count

22

increased by10%

Dependency changes

• + Addedreact-circular-progressbar@^2.0.2

• + Addedreact-dropzone@^10.1.9

• + Addedattr-accept@2.2.5(transitive)

• + Addedfile-selector@0.1.19(transitive)

• + Addedreact-circular-progressbar@2.1.0(transitive)

• + Addedreact-dropzone@10.2.2(transitive)

• + Addedtslib@2.8.1(transitive)