@configuratorware/configurator-frontendgui 1.32.1-beta.1 → 1.32.1-beta.2

package/App/Modules/Creator/Components/Optiondetail/index.js

@@ -11,8 +11,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _lodash = _interopRequireDefault(require("lodash"));
 
-var _reactSwipeable = require("react-swipeable");
-
 var _clsx2 = _interopRequireDefault(require("clsx"));
 
 var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
@@ -45,6 +43,8 @@ var _Markdown = _interopRequireDefault(require("../../../../../Framework/Compone
 
 var _ZoomImage = _interopRequireDefault(require("./ZoomImage"));
 
+var _Swipeable = require("../../../../../Shared/Components/Swipeable");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 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; }
@@ -214,14 +214,11 @@ var Optiondetail = /*#__PURE__*/function (_React$Component) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "swiped", function (e, deltaX, deltaY) {
-      // use only horizontal swiping
-      if (Math.abs(deltaX) >= Math.abs(deltaY)) {
-        if (deltaX > 0) {
-          _this.next();
-        } else {
-          _this.prev();
-        }
+    _defineProperty(_assertThisInitialized(_this), "swiped", function (e) {
+      if (e.dir === _Swipeable.LEFT) {
+        _this.next();
+      } else if (e.dir === _Swipeable.RIGHT) {
+        _this.prev();
       }
     });
 
@@ -428,12 +425,12 @@ var Optiondetail = /*#__PURE__*/function (_React$Component) {
         }
       }, /*#__PURE__*/_react["default"].createElement(LoadingComponent, {
         show: loading
-      })) : /*#__PURE__*/_react["default"].createElement(_reactSwipeable.Swipeable, {
-        disabled: !showNav,
-        trackMouse: true,
-        onSwiped: this.swiped,
-        delta: Optiondetail.swipeDelta
-      }, /*#__PURE__*/_react["default"].createElement("div", {
+      })) : /*#__PURE__*/_react["default"].createElement(_Swipeable.Swipeable, {
+        options: {
+          trackMouse: true,
+          onSwiped: showNav && this.swiped,
+          delta: Optiondetail.swipeDelta
+        },
         ref: this.setDetailsContainerRef,
         className: showNav ? classes.detailContainerWithNav : classes.detailContainer
       }, showNav && /*#__PURE__*/_react["default"].createElement("div", {
@@ -453,7 +450,7 @@ var Optiondetail = /*#__PURE__*/function (_React$Component) {
       })), detailsContent) : detailsContent, showNav && /*#__PURE__*/_react["default"].createElement("div", {
         className: (0, _clsx2["default"])(classes.detailNav, 'next'),
         onClick: this.next
-      })))), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], null, /*#__PURE__*/_react["default"].createElement("div", {
+      }))), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], null, /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.detailFooter
       }, this.renderControls())), /*#__PURE__*/_react["default"].createElement(_ZoomImage["default"], {
         onClose: this.toggleZoomImage,

package/App/Reducers/Configurator/Reducer.js

@@ -634,6 +634,6 @@ function configuratorReducer() {
 
 function filterOptionsWithDetails(options) {
   return _lodash["default"].filter(options, function (option) {
-    return !!(option["abstract"] || option.description || option.detailImageExists === true);
+    return !!(option["abstract"] || option.description || option.detailImage);
   });
 }

package/Framework/Components/Carousel/index.js

@@ -9,8 +9,6 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactSwipeable = require("react-swipeable");
-
 var _lodash = _interopRequireDefault(require("lodash"));
 
 require("./Styles.scss");
@@ -21,6 +19,8 @@ var _clsx = _interopRequireDefault(require("clsx"));
 
 var _styles = require("@material-ui/core/styles");
 
+var _Swipeable = require("../../../Shared/Components/Swipeable");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 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; }
@@ -186,18 +186,16 @@ var Carousel = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "swiped", function (e) {
-      // if it's vertical deltaY should be the bigger
-      if (_this.props.vertical && Math.abs(e.deltaY) >= Math.abs(e.deltaX)) {
-        if (e.deltaY > 0) {
+      if (_this.props.vertical) {
+        if (e.dir === _Swipeable.UP) {
           _this.next();
-        } else {
+        } else if (e.dir === _Swipeable.DOWN) {
           _this.prev();
         }
-      } // if it's not vertical deltaX should be the bigger
-      else if (!_this.props.vertical && Math.abs(e.deltaX) >= Math.abs(e.deltaY)) {
-        if (e.deltaX > 0) {
+      } else {
+        if (e.dir === _Swipeable.LEFT) {
           _this.next();
-        } else {
+        } else if (e.dir === _Swipeable.RIGHT) {
           _this.prev();
         }
       }
@@ -231,10 +229,13 @@ var Carousel = /*#__PURE__*/function (_React$Component) {
   _createClass(Carousel, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      this.init();
       var carousel = this.refs.carousel;
-      var wheelEventName = 'onwheel' in carousel ? 'wheel' : 'mousewheel';
-      carousel.addEventListener(wheelEventName, this.scrolled);
+
+      if (carousel) {
+        this.init();
+        var wheelEventName = 'onwheel' in carousel ? 'wheel' : 'mousewheel';
+        carousel.addEventListener(wheelEventName, this.scrolled);
+      }
     }
   }, {
     key: "componentDidUpdate",
@@ -278,11 +279,13 @@ var Carousel = /*#__PURE__*/function (_React$Component) {
         className: (0, _clsx["default"])(classes.carousel, prevClassName),
         ref: "prev",
         onClick: this.prev
-      }), /*#__PURE__*/_react["default"].createElement(_reactSwipeable.Swipeable, {
+      }), /*#__PURE__*/_react["default"].createElement(_Swipeable.Swipeable, {
         className: 'carousel-frame',
-        trackMouse: true,
-        onSwiping: this.swiping,
-        onSwiped: this.swiped
+        options: {
+          trackMouse: true,
+          onSwiping: this.swiping,
+          onSwiped: this.swiped
+        }
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "carousel-slider",
         style: {

package/Shared/Components/Swipeable.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "UP", {
+  enumerable: true,
+  get: function get() {
+    return _reactSwipeable.UP;
+  }
+});
+Object.defineProperty(exports, "DOWN", {
+  enumerable: true,
+  get: function get() {
+    return _reactSwipeable.DOWN;
+  }
+});
+Object.defineProperty(exports, "LEFT", {
+  enumerable: true,
+  get: function get() {
+    return _reactSwipeable.LEFT;
+  }
+});
+Object.defineProperty(exports, "RIGHT", {
+  enumerable: true,
+  get: function get() {
+    return _reactSwipeable.RIGHT;
+  }
+});
+exports.Swipeable = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactSwipeable = require("react-swipeable");
+
+var _excluded = ["options"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var Swipeable = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
+  var options = _ref.options,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var handlers = (0, _reactSwipeable.useSwipeable)(options);
+  return /*#__PURE__*/_react["default"].createElement("div", _extends({}, handlers, props, {
+    ref: ref
+  }));
+});
+
+exports.Swipeable = Swipeable;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@configuratorware/configurator-frontendgui",
-  "version": "1.32.1-beta.1",
+  "version": "1.32.1-beta.2",
   "license": "UNLICENSED",
   "private": false,
   "main": "./index.js",
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
-    "@configuratorware/scripts": "1.32.1-beta.1",
-    "@hot-loader/react-dom": "^17.0.1",
+    "@configuratorware/scripts": "1.32.1-beta.2",
+    "@hot-loader/react-dom": "^17.0.2",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.60",
@@ -37,10 +37,10 @@
     "react-redux-i18n": "^1.9.3",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-swipeable": "^5.5.1",
+    "react-swipeable": "^6.2.2",
     "react-zoom-pan-pinch": "^2.1.3",
-    "redhotmagma-graphics-editor": "1.32.1-beta.1",
-    "redhotmagma-visualization": "1.32.1-beta.1",
+    "redhotmagma-graphics-editor": "1.32.1-beta.2",
+    "redhotmagma-visualization": "1.32.1-beta.2",
     "redux": "^4.1.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",
@@ -52,25 +52,18 @@
     "uuid": "^3.4.0"
   },
   "peerDependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/plugin-proposal-decorators": "^7.13.5",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/preset-env": "^7.13.12",
-    "@babel/preset-react": "^7.13.13",
-    "@babel/preset-typescript": "^7.13.0",
     "babel-loader": "^8.2.2",
-    "babel-plugin-module-resolver": "^4.1.0",
-    "css-loader": "^5.2.0",
+    "css-loader": "^5.2.7",
     "file-loader": "^6.2.0",
-    "mini-css-extract-plugin": "^1.4.0",
-    "node-sass": "^5.0.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.4",
-    "resolve-url-loader": "^3.1.2",
-    "sass-loader": "^11.0.1",
+    "mini-css-extract-plugin": "^2.1.0",
+    "resolve-url-loader": "^3.1.4",
+    "sass": "^1.53.0",
+    "sass-loader": "^13.0.2",
     "style-loader": "^2.0.0",
+    "terser-webpack-plugin": "^5.1.4",
     "url-loader": "^4.1.1",
-    "webpack": "^5.28.0",
-    "webpack-cli": "^4.6.0",
+    "webpack": "^5.46.0",
+    "webpack-cli": "^4.7.2",
     "webpack-dev-server": "^3.11.2"
   },
   "scripts": {

package/src/App/Modules/Creator/Components/Optiondetail/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import _ from 'lodash';
-import { Swipeable } from 'react-swipeable';
 import clsx from 'clsx';
 import Button from '@material-ui/core/Button';
 import DialogContent from '@material-ui/core/DialogContent';
@@ -17,6 +16,7 @@ import OptionlistitemAmount from '../OptionAmount';
 import getImageUrl from '../../../../Utils/getImageUrl';
 import Markdown from '../../../../../Framework/Components/Markdown';
 import ZoomImage from './ZoomImage';
+import { LEFT, RIGHT, Swipeable } from '../../../../../Shared/Components/Swipeable';
 
 const styles = theme => ({
     detailNav: {
@@ -189,14 +189,11 @@ class Optiondetail extends React.Component {
         }
     };
 
-    swiped = (e, deltaX, deltaY) => {
-        // use only horizontal swiping
-        if (Math.abs(deltaX) >= Math.abs(deltaY)) {
-            if (deltaX > 0) {
-                this.next();
-            } else {
-                this.prev();
-            }
+    swiped = (e) => {
+        if (e.dir === LEFT) {
+            this.next();
+        } else if (e.dir === RIGHT) {
+            this.prev();
         }
     };
 
@@ -351,15 +348,14 @@ class Optiondetail extends React.Component {
                         </div>
                     ) : (
                         <Swipeable
-                            disabled={!showNav}
-                            trackMouse={true}
-                            onSwiped={this.swiped}
-                            delta={Optiondetail.swipeDelta}
+                            options={{
+                                trackMouse: true,
+                                onSwiped: showNav && this.swiped,
+                                delta: Optiondetail.swipeDelta,
+                            }}
+                            ref={this.setDetailsContainerRef}
+                            className={showNav ? classes.detailContainerWithNav : classes.detailContainer}
                         >
-                            <div
-                                ref={this.setDetailsContainerRef}
-                                className={showNav ? classes.detailContainerWithNav : classes.detailContainer}
-                            >
                                 {showNav && (
                                     <div className={clsx(classes.detailNav, 'prev')} onClick={this.prev} />
                                 )}
@@ -399,7 +395,6 @@ class Optiondetail extends React.Component {
                                 {showNav && (
                                     <div className={clsx(classes.detailNav, 'next')} onClick={this.next} />
                                 )}
-                            </div>
                         </Swipeable>
                     )}
                 </DialogContent>

package/src/App/Reducers/Configurator/Reducer.js

@@ -599,6 +599,6 @@ export default function configuratorReducer(prevState = initialState, action = {
 function filterOptionsWithDetails(options) {
     return _.filter(
         options,
-        option => !!(option.abstract || option.description || option.detailImageExists === true)
+        option => !!(option.abstract || option.description || option.detailImage)
     );
 }

package/src/Framework/Components/Carousel/index.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { Swipeable } from 'react-swipeable';
 import _ from 'lodash';
 
 import './Styles.scss';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
+import { DOWN, LEFT, RIGHT, Swipeable, UP } from '../../../Shared/Components/Swipeable';
 
 const styles = theme => ({
     carousel: {
@@ -37,10 +37,12 @@ class Carousel extends React.Component {
     }
 
     componentDidMount() {
-        this.init();
         const { carousel } = this.refs;
-        const wheelEventName = 'onwheel' in carousel ? 'wheel' : 'mousewheel';
-        carousel.addEventListener(wheelEventName, this.scrolled);
+        if (carousel) {
+            this.init();
+            const wheelEventName = 'onwheel' in carousel ? 'wheel' : 'mousewheel';
+            carousel.addEventListener(wheelEventName, this.scrolled);
+        }
     }
 
     componentDidUpdate() {
@@ -140,19 +142,16 @@ class Carousel extends React.Component {
     };
 
     swiped = e => {
-        // if it's vertical deltaY should be the bigger
-        if (this.props.vertical && Math.abs(e.deltaY) >= Math.abs(e.deltaX)) {
-            if (e.deltaY > 0) {
+        if (this.props.vertical) {
+            if (e.dir === UP) {
                 this.next();
-            } else {
+            } else if (e.dir === DOWN) {
                 this.prev();
             }
-        }
-        // if it's not vertical deltaX should be the bigger
-        else if (!this.props.vertical && Math.abs(e.deltaX) >= Math.abs(e.deltaY)) {
-            if (e.deltaX > 0) {
+        } else {
+            if (e.dir === LEFT) {
                 this.next();
-            } else {
+            } else if (e.dir === RIGHT) {
                 this.prev();
             }
         }
@@ -199,9 +198,11 @@ class Carousel extends React.Component {
                     )}
                     <Swipeable
                         className={'carousel-frame'}
-                        trackMouse={true}
-                        onSwiping={this.swiping}
-                        onSwiped={this.swiped}
+                        options={{
+                            trackMouse: true,
+                            onSwiping: this.swiping,
+                            onSwiped: this.swiped,
+                        }}
                     >
                         <div
                             className="carousel-slider"

package/src/Shared/Components/Swipeable.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { useSwipeable, UP, DOWN, LEFT, RIGHT } from 'react-swipeable';
+
+export { UP, DOWN, LEFT, RIGHT };
+
+export const Swipeable = React.forwardRef(({ options, ...props }, ref) => {
+  const handlers = useSwipeable(options);
+  return <div {...handlers} {...props} ref={ref} />;
+});