@plusscommunities/pluss-core-web 1.6.12-beta.1 → 1.6.13-beta.0

package/dist/index.cjs.js

@@ -28,7 +28,7 @@ var Dropzone = require('react-dropzone');
 var reactRouter = require('react-router');
 var reactBootstrap = require('react-bootstrap');
 var reactFontawesome = require('@fortawesome/react-fontawesome');
-var reactLottie = require('@crello/react-lottie');
+var Lottie = require('react-lottie');
 var reactCsv = require('react-csv');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var reactColor = require('react-color');
@@ -59,6 +59,7 @@ var Textarea__default = /*#__PURE__*/_interopDefaultLegacy(Textarea);
 var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
 var _typeof__default = /*#__PURE__*/_interopDefaultLegacy(_typeof);
 var Dropzone__default = /*#__PURE__*/_interopDefaultLegacy(Dropzone);
+var Lottie__default = /*#__PURE__*/_interopDefaultLegacy(Lottie);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 var tinycolor__default = /*#__PURE__*/_interopDefaultLegacy(tinycolor);
 
@@ -10366,6 +10367,7 @@ var MakerPopup = /*#__PURE__*/function (_Component) {
       Key: 'jpg',
       Title: 'JPEG'
     }];
+    _this.lottieAnimationUrl = 'https://pluss-prd-media.s3-ap-southeast-2.amazonaws.com/assets/lottie-layout.json';
     _this.state = _objectSpread$2(_objectSpread$2({}, _this.props.initialData), {}, {
       logo: null,
       colour: null,
@@ -10375,8 +10377,8 @@ var MakerPopup = /*#__PURE__*/function (_Component) {
       selectedSize: 'A4',
       selectedFormat: 'pdf',
       lottieConfig: {
-        path: 'https://pluss-prd-media.s3-ap-southeast-2.amazonaws.com/assets/lottie-layout.json',
         loop: true,
+        autoplay: true,
         name: 'lottie-layout'
       }
     });
@@ -10413,11 +10415,10 @@ var MakerPopup = /*#__PURE__*/function (_Component) {
 
       unauthedFunction({
         method: 'GET',
-        url: this.state.lottieConfig.path
+        url: this.lottieAnimationUrl
       }).then(function (res) {
         _this3.setState({
           lottieConfig: _objectSpread$2(_objectSpread$2({}, _this3.state.lottieConfig), {}, {
-            path: undefined,
             animationData: res.data
           })
         });
@@ -10493,11 +10494,12 @@ var MakerPopup = /*#__PURE__*/function (_Component) {
       if (this.state.submitting) {
         return /*#__PURE__*/React__default['default'].createElement("div", {
           className: "flex flex-column flex-center"
-        }, /*#__PURE__*/React__default['default'].createElement(reactLottie.Lottie, {
+        }, this.state.lottieConfig.animationData && /*#__PURE__*/React__default['default'].createElement(Lottie__default['default'], {
           key: "lottie-layout",
-          height: "260px",
-          width: "260px",
-          config: this.state.lottieConfig
+          height: 260,
+          width: 260,
+          options: this.state.lottieConfig,
+          isClickToPauseDisabled: true
         }), /*#__PURE__*/React__default['default'].createElement(Text, {
           type: "h3",
           className: "marginTop-16"

package/dist/index.esm.js

@@ -24,7 +24,7 @@ import Dropzone from 'react-dropzone';
 import { withRouter } from 'react-router';
 import { MenuItem, DropdownButton, FormGroup, ControlLabel, FormControl, HelpBlock } from 'react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Lottie } from '@crello/react-lottie';
+import Lottie from 'react-lottie';
 import { CSVLink } from 'react-csv';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { ChromePicker } from 'react-color';
@@ -10336,6 +10336,7 @@ var MakerPopup = /*#__PURE__*/function (_Component) {
       Key: 'jpg',
       Title: 'JPEG'
     }];
+    _this.lottieAnimationUrl = 'https://pluss-prd-media.s3-ap-southeast-2.amazonaws.com/assets/lottie-layout.json';
     _this.state = _objectSpread$2(_objectSpread$2({}, _this.props.initialData), {}, {
       logo: null,
       colour: null,
@@ -10345,8 +10346,8 @@ var MakerPopup = /*#__PURE__*/function (_Component) {
       selectedSize: 'A4',
       selectedFormat: 'pdf',
       lottieConfig: {
-        path: 'https://pluss-prd-media.s3-ap-southeast-2.amazonaws.com/assets/lottie-layout.json',
         loop: true,
+        autoplay: true,
         name: 'lottie-layout'
       }
     });
@@ -10383,11 +10384,10 @@ var MakerPopup = /*#__PURE__*/function (_Component) {
 
       unauthedFunction({
         method: 'GET',
-        url: this.state.lottieConfig.path
+        url: this.lottieAnimationUrl
       }).then(function (res) {
         _this3.setState({
           lottieConfig: _objectSpread$2(_objectSpread$2({}, _this3.state.lottieConfig), {}, {
-            path: undefined,
             animationData: res.data
           })
         });
@@ -10463,11 +10463,12 @@ var MakerPopup = /*#__PURE__*/function (_Component) {
       if (this.state.submitting) {
         return /*#__PURE__*/React.createElement("div", {
           className: "flex flex-column flex-center"
-        }, /*#__PURE__*/React.createElement(Lottie, {
+        }, this.state.lottieConfig.animationData && /*#__PURE__*/React.createElement(Lottie, {
           key: "lottie-layout",
-          height: "260px",
-          width: "260px",
-          config: this.state.lottieConfig
+          height: 260,
+          width: 260,
+          options: this.state.lottieConfig,
+          isClickToPauseDisabled: true
         }), /*#__PURE__*/React.createElement(Text, {
           type: "h3",
           className: "marginTop-16"

package/dist/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@babel/runtime/helpers/asyncToGenerator'), require('@babel/runtime/regenerator'), require('lodash'), require('axios'), require('aws-amplify'), require('@babel/runtime/helpers/defineProperty'), require('moment'), require('react'), require('jquery'), require('js-cookie'), require('@babel/runtime/helpers/classCallCheck'), require('@babel/runtime/helpers/createClass'), require('@babel/runtime/helpers/inherits'), require('@babel/runtime/helpers/possibleConstructorReturn'), require('@babel/runtime/helpers/getPrototypeOf'), require('react-fontawesome'), require('@babel/runtime/helpers/extends'), require('@babel/runtime/helpers/assertThisInitialized'), require('react-redux'), require('react-textarea-autosize'), require('@babel/runtime/helpers/toConsumableArray'), require('@babel/runtime/helpers/typeof'), require('react-dropzone'), require('react-router'), require('react-bootstrap'), require('@fortawesome/react-fontawesome'), require('@crello/react-lottie'), require('react-csv'), require('@babel/runtime/helpers/objectWithoutProperties'), require('react-color'), require('tinycolor2'), require('react-router-dom'), require('@fortawesome/free-solid-svg-icons')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@babel/runtime/helpers/asyncToGenerator', '@babel/runtime/regenerator', 'lodash', 'axios', 'aws-amplify', '@babel/runtime/helpers/defineProperty', 'moment', 'react', 'jquery', 'js-cookie', '@babel/runtime/helpers/classCallCheck', '@babel/runtime/helpers/createClass', '@babel/runtime/helpers/inherits', '@babel/runtime/helpers/possibleConstructorReturn', '@babel/runtime/helpers/getPrototypeOf', 'react-fontawesome', '@babel/runtime/helpers/extends', '@babel/runtime/helpers/assertThisInitialized', 'react-redux', 'react-textarea-autosize', '@babel/runtime/helpers/toConsumableArray', '@babel/runtime/helpers/typeof', 'react-dropzone', 'react-router', 'react-bootstrap', '@fortawesome/react-fontawesome', '@crello/react-lottie', 'react-csv', '@babel/runtime/helpers/objectWithoutProperties', 'react-color', 'tinycolor2', 'react-router-dom', '@fortawesome/free-solid-svg-icons'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['@plusscommunities/pluss-core-web'] = {}, global._asyncToGenerator, global._regeneratorRuntime, global._, global.axios, global.awsAmplify, global._defineProperty, global.moment, global.React, global.$, global.Cookies, global._classCallCheck, global._createClass, global._inherits, global._possibleConstructorReturn, global._getPrototypeOf, global.FontAwesome, global._extends, global._assertThisInitialized, global.reactRedux, global.Textarea, global._toConsumableArray, global._typeof, global.Dropzone, global.reactRouter, global.reactBootstrap, global.reactFontawesome, global.reactLottie, global.reactCsv, global._objectWithoutProperties, global.reactColor, global.tinycolor, global.reactRouterDom, global.freeSolidSvgIcons));
-}(this, (function (exports, _asyncToGenerator, _regeneratorRuntime, _, axios, awsAmplify, _defineProperty, moment, React, $, Cookies, _classCallCheck, _createClass, _inherits, _possibleConstructorReturn, _getPrototypeOf, FontAwesome, _extends, _assertThisInitialized, reactRedux, Textarea, _toConsumableArray, _typeof, Dropzone, reactRouter, reactBootstrap, reactFontawesome, reactLottie, reactCsv, _objectWithoutProperties, reactColor, tinycolor, reactRouterDom, freeSolidSvgIcons) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@babel/runtime/helpers/asyncToGenerator'), require('@babel/runtime/regenerator'), require('lodash'), require('axios'), require('aws-amplify'), require('@babel/runtime/helpers/defineProperty'), require('moment'), require('react'), require('jquery'), require('js-cookie'), require('@babel/runtime/helpers/classCallCheck'), require('@babel/runtime/helpers/createClass'), require('@babel/runtime/helpers/inherits'), require('@babel/runtime/helpers/possibleConstructorReturn'), require('@babel/runtime/helpers/getPrototypeOf'), require('react-fontawesome'), require('@babel/runtime/helpers/extends'), require('@babel/runtime/helpers/assertThisInitialized'), require('react-redux'), require('react-textarea-autosize'), require('@babel/runtime/helpers/toConsumableArray'), require('@babel/runtime/helpers/typeof'), require('react-dropzone'), require('react-router'), require('react-bootstrap'), require('@fortawesome/react-fontawesome'), require('react-lottie'), require('react-csv'), require('@babel/runtime/helpers/objectWithoutProperties'), require('react-color'), require('tinycolor2'), require('react-router-dom'), require('@fortawesome/free-solid-svg-icons')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@babel/runtime/helpers/asyncToGenerator', '@babel/runtime/regenerator', 'lodash', 'axios', 'aws-amplify', '@babel/runtime/helpers/defineProperty', 'moment', 'react', 'jquery', 'js-cookie', '@babel/runtime/helpers/classCallCheck', '@babel/runtime/helpers/createClass', '@babel/runtime/helpers/inherits', '@babel/runtime/helpers/possibleConstructorReturn', '@babel/runtime/helpers/getPrototypeOf', 'react-fontawesome', '@babel/runtime/helpers/extends', '@babel/runtime/helpers/assertThisInitialized', 'react-redux', 'react-textarea-autosize', '@babel/runtime/helpers/toConsumableArray', '@babel/runtime/helpers/typeof', 'react-dropzone', 'react-router', 'react-bootstrap', '@fortawesome/react-fontawesome', 'react-lottie', 'react-csv', '@babel/runtime/helpers/objectWithoutProperties', 'react-color', 'tinycolor2', 'react-router-dom', '@fortawesome/free-solid-svg-icons'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['@plusscommunities/pluss-core-web'] = {}, global._asyncToGenerator, global._regeneratorRuntime, global._, global.axios, global.awsAmplify, global._defineProperty, global.moment, global.React, global.$, global.Cookies, global._classCallCheck, global._createClass, global._inherits, global._possibleConstructorReturn, global._getPrototypeOf, global.FontAwesome, global._extends, global._assertThisInitialized, global.reactRedux, global.Textarea, global._toConsumableArray, global._typeof, global.Dropzone, global.reactRouter, global.reactBootstrap, global.reactFontawesome, global.Lottie, global.reactCsv, global._objectWithoutProperties, global.reactColor, global.tinycolor, global.reactRouterDom, global.freeSolidSvgIcons));
+}(this, (function (exports, _asyncToGenerator, _regeneratorRuntime, _, axios, awsAmplify, _defineProperty, moment, React, $, Cookies, _classCallCheck, _createClass, _inherits, _possibleConstructorReturn, _getPrototypeOf, FontAwesome, _extends, _assertThisInitialized, reactRedux, Textarea, _toConsumableArray, _typeof, Dropzone, reactRouter, reactBootstrap, reactFontawesome, Lottie, reactCsv, _objectWithoutProperties, reactColor, tinycolor, reactRouterDom, freeSolidSvgIcons) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -27,6 +27,7 @@
   var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
   var _typeof__default = /*#__PURE__*/_interopDefaultLegacy(_typeof);
   var Dropzone__default = /*#__PURE__*/_interopDefaultLegacy(Dropzone);
+  var Lottie__default = /*#__PURE__*/_interopDefaultLegacy(Lottie);
   var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
   var tinycolor__default = /*#__PURE__*/_interopDefaultLegacy(tinycolor);
 
@@ -10334,6 +10335,7 @@
         Key: 'jpg',
         Title: 'JPEG'
       }];
+      _this.lottieAnimationUrl = 'https://pluss-prd-media.s3-ap-southeast-2.amazonaws.com/assets/lottie-layout.json';
       _this.state = _objectSpread$2(_objectSpread$2({}, _this.props.initialData), {}, {
         logo: null,
         colour: null,
@@ -10343,8 +10345,8 @@
         selectedSize: 'A4',
         selectedFormat: 'pdf',
         lottieConfig: {
-          path: 'https://pluss-prd-media.s3-ap-southeast-2.amazonaws.com/assets/lottie-layout.json',
           loop: true,
+          autoplay: true,
           name: 'lottie-layout'
         }
       });
@@ -10381,11 +10383,10 @@
 
         unauthedFunction({
           method: 'GET',
-          url: this.state.lottieConfig.path
+          url: this.lottieAnimationUrl
         }).then(function (res) {
           _this3.setState({
             lottieConfig: _objectSpread$2(_objectSpread$2({}, _this3.state.lottieConfig), {}, {
-              path: undefined,
               animationData: res.data
             })
           });
@@ -10461,11 +10462,12 @@
         if (this.state.submitting) {
           return /*#__PURE__*/React__default['default'].createElement("div", {
             className: "flex flex-column flex-center"
-          }, /*#__PURE__*/React__default['default'].createElement(reactLottie.Lottie, {
+          }, this.state.lottieConfig.animationData && /*#__PURE__*/React__default['default'].createElement(Lottie__default['default'], {
             key: "lottie-layout",
-            height: "260px",
-            width: "260px",
-            config: this.state.lottieConfig
+            height: 260,
+            width: 260,
+            options: this.state.lottieConfig,
+            isClickToPauseDisabled: true
           }), /*#__PURE__*/React__default['default'].createElement(Text, {
             type: "h3",
             className: "marginTop-16"

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@plusscommunities/pluss-core-web",
-	"version": "1.6.12-beta.1",
+	"version": "1.6.13-beta.0",
 	"description": "Core extension package for Pluss Communities platform",
 	"main": "dist/index.cjs.js",
 	"scripts": {
@@ -23,6 +23,7 @@
 		"@rollup/plugin-babel": "^5.3.0",
 		"@rollup/plugin-json": "^4.1.0",
 		"autoprefixer": "^10.2.6",
+		"react-lottie": "^1.2.10",
 		"rollup": "^2.50.1",
 		"rollup-plugin-local-resolve": "^1.0.7",
 		"rollup-plugin-styles": "^3.14.1"
@@ -41,6 +42,7 @@
 		"react": "^16.14.0",
 		"react-dropzone": "^14.2.3",
 		"react-fontawesome": "^1.6.1",
+		"react-lottie": "^1.2.10",
 		"react-redux": "^7.2.8",
 		"react-router-dom": "^4.2.2",
 		"react-textarea-autosize": "^7.1.0-1"

package/src/components/MakerPopup.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { Lottie } from '@crello/react-lottie';
+import Lottie from 'react-lottie';
 import _ from 'lodash';
 import { unauthedFunction } from '../session';
 import { Popup } from './Popup';
@@ -28,6 +28,9 @@ class MakerPopup extends Component {
       { Key: 'jpg', Title: 'JPEG' },
     ];
 
+    this.lottieAnimationUrl =
+      'https://pluss-prd-media.s3-ap-southeast-2.amazonaws.com/assets/lottie-layout.json';
+
     this.state = {
       ...this.props.initialData,
       logo: null,
@@ -38,8 +41,8 @@ class MakerPopup extends Component {
       selectedSize: 'A4',
       selectedFormat: 'pdf',
       lottieConfig: {
-        path: 'https://pluss-prd-media.s3-ap-southeast-2.amazonaws.com/assets/lottie-layout.json',
         loop: true,
+        autoplay: true,
         name: 'lottie-layout',
       },
     };
@@ -66,12 +69,11 @@ class MakerPopup extends Component {
   getLottieConfig() {
     unauthedFunction({
       method: 'GET',
-      url: this.state.lottieConfig.path,
+      url: this.lottieAnimationUrl,
     }).then((res) => {
       this.setState({
         lottieConfig: {
           ...this.state.lottieConfig,
-          path: undefined,
           animationData: res.data,
         },
       });
@@ -227,7 +229,15 @@ class MakerPopup extends Component {
     if (this.state.submitting) {
       return (
         <div className="flex flex-column flex-center">
-          <Lottie key="lottie-layout" height="260px" width="260px" config={this.state.lottieConfig} />
+          {this.state.lottieConfig.animationData && (
+            <Lottie
+              key="lottie-layout"
+              height={260}
+              width={260}
+              options={this.state.lottieConfig}
+              isClickToPauseDisabled
+            />
+          )}
           <Text type="h3" className="marginTop-16">
             Generating
           </Text>