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

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

@@ -11,6 +11,8 @@ 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"));
@@ -43,8 +45,6 @@ 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,11 +214,14 @@ var Optiondetail = /*#__PURE__*/function (_React$Component) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "swiped", function (e) {
-      if (e.dir === _Swipeable.LEFT) {
-        _this.next();
-      } else if (e.dir === _Swipeable.RIGHT) {
-        _this.prev();
+    _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();
+        }
       }
     });
 
@@ -425,12 +428,12 @@ var Optiondetail = /*#__PURE__*/function (_React$Component) {
         }
       }, /*#__PURE__*/_react["default"].createElement(LoadingComponent, {
         show: loading
-      })) : /*#__PURE__*/_react["default"].createElement(_Swipeable.Swipeable, {
-        options: {
-          trackMouse: true,
-          onSwiped: showNav && this.swiped,
-          delta: Optiondetail.swipeDelta
-        },
+      })) : /*#__PURE__*/_react["default"].createElement(_reactSwipeable.Swipeable, {
+        disabled: !showNav,
+        trackMouse: true,
+        onSwiped: this.swiped,
+        delta: Optiondetail.swipeDelta
+      }, /*#__PURE__*/_react["default"].createElement("div", {
         ref: this.setDetailsContainerRef,
         className: showNav ? classes.detailContainerWithNav : classes.detailContainer
       }, showNav && /*#__PURE__*/_react["default"].createElement("div", {
@@ -450,7 +453,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.detailImage);
+    return !!(option["abstract"] || option.description || option.detailImageExists === true);
   });
 }

package/App/Shared/Components/AmountPrice/index.js

@@ -431,7 +431,7 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
           clientTexts = _this$props3.clientTexts;
       var dataPrivacyLink = clientTexts.dataPrivacyLink;
       var dataPrivacyApproved = _this.state.dataPrivacyAccepted.value;
-      return showReceiveOfferForm && dataPrivacyApproved && dataPrivacyLink;
+      return !dataPrivacyLink || !showReceiveOfferForm || dataPrivacyApproved;
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleTouchMove", function (evt) {

package/App/configuration.js

@@ -28,8 +28,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 var DEVELOPMENT_HOST_INT = 'http://int.configuratorware.local'; // eslint-disable-next-line no-unused-vars
 
-var DEVELOPMENT_HOST_LOCAL = DEVELOPMENT_HOST_INT; //'http://localhost:10030';
-
+var DEVELOPMENT_HOST_LOCAL = 'http://localhost:10030';
 var hostsByNodeEnv = {
   production: '',
   development: DEVELOPMENT_HOST_LOCAL,

package/Framework/Components/Carousel/index.js

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

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@configuratorware/configurator-frontendgui",
-  "version": "1.32.1-beta.2",
+  "version": "1.32.3",
   "license": "UNLICENSED",
   "private": false,
   "main": "./index.js",
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
-    "@configuratorware/scripts": "1.32.1-beta.2",
-    "@hot-loader/react-dom": "^17.0.2",
+    "@configuratorware/scripts": "1.32.3",
+    "@hot-loader/react-dom": "^17.0.1",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.60",
@@ -26,9 +26,9 @@
     "path-browserify": "^1.0.1",
     "prop-types": "^15.7.2",
     "qs": "^6.10.1",
-    "react": "^17.0.2",
+    "react": "^16.14.0",
     "react-custom-scrollbars": "^4.2.1",
-    "react-dom": "^17.0.2",
+    "react-dom": "^16.14.0",
     "react-file-drop": "^0.2.8",
     "react-hot-loader": "^4.13.0",
     "react-hyphen": "^1.4.0",
@@ -37,10 +37,10 @@
     "react-redux-i18n": "^1.9.3",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-swipeable": "^6.2.2",
+    "react-swipeable": "^5.5.1",
     "react-zoom-pan-pinch": "^2.1.3",
-    "redhotmagma-graphics-editor": "1.32.1-beta.2",
-    "redhotmagma-visualization": "1.32.1-beta.2",
+    "redhotmagma-graphics-editor": "1.32.3",
+    "redhotmagma-visualization": "1.32.3",
     "redux": "^4.1.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",
@@ -52,22 +52,30 @@
     "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",
-    "css-loader": "^5.2.7",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "css-loader": "^5.2.0",
     "file-loader": "^6.2.0",
-    "mini-css-extract-plugin": "^2.1.0",
-    "resolve-url-loader": "^3.1.4",
-    "sass": "^1.53.0",
-    "sass-loader": "^13.0.2",
+    "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",
     "style-loader": "^2.0.0",
-    "terser-webpack-plugin": "^5.1.4",
     "url-loader": "^4.1.1",
-    "webpack": "^5.46.0",
-    "webpack-cli": "^4.7.2",
+    "webpack": "^5.28.0",
+    "webpack-cli": "^4.6.0",
     "webpack-dev-server": "^3.11.2"
   },
   "scripts": {
     "copy-public": "node ./scripts/cpPublic.js",
     "install": "npm run copy-public"
-  }
+  },
+  "readme": "# configurator-frontendgui\n\n## Setup for Development\n1. Follow the \"preparation\", \"install\" and \"start development\" steps in frontend/README.md\n1. Open the core app in the browser: http://localhost:3001/identifier:softshell_designer_2d\n1. 'hostsByNodeEnv.development' in src/App/configuration.js is configurable  \n    thus allowing to use e.g. your local api\n\n## Ready to build the artifacts\n- run `pnpm build` from project scope (does not build workspace dependencies automatically)\n- or run `pnpm build` from workspace root\n\n## Start storybook in project \n1. `pnpm run storybook`\n1. `storybook starts on http://localhost:9001/` \n\n## [Guidelines for automated testing](docs/TestingGuidelines.md)\n"
 }

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

@@ -1,5 +1,6 @@
 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';
@@ -16,7 +17,6 @@ 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,11 +189,14 @@ class Optiondetail extends React.Component {
         }
     };
 
-    swiped = (e) => {
-        if (e.dir === LEFT) {
-            this.next();
-        } else if (e.dir === RIGHT) {
-            this.prev();
+    swiped = (e, deltaX, deltaY) => {
+        // use only horizontal swiping
+        if (Math.abs(deltaX) >= Math.abs(deltaY)) {
+            if (deltaX > 0) {
+                this.next();
+            } else {
+                this.prev();
+            }
         }
     };
 
@@ -348,14 +351,15 @@ class Optiondetail extends React.Component {
                         </div>
                     ) : (
                         <Swipeable
-                            options={{
-                                trackMouse: true,
-                                onSwiped: showNav && this.swiped,
-                                delta: Optiondetail.swipeDelta,
-                            }}
-                            ref={this.setDetailsContainerRef}
-                            className={showNav ? classes.detailContainerWithNav : classes.detailContainer}
+                            disabled={!showNav}
+                            trackMouse={true}
+                            onSwiped={this.swiped}
+                            delta={Optiondetail.swipeDelta}
                         >
+                            <div
+                                ref={this.setDetailsContainerRef}
+                                className={showNav ? classes.detailContainerWithNav : classes.detailContainer}
+                            >
                                 {showNav && (
                                     <div className={clsx(classes.detailNav, 'prev')} onClick={this.prev} />
                                 )}
@@ -395,6 +399,7 @@ 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.detailImage)
+        option => !!(option.abstract || option.description || option.detailImageExists === true)
     );
 }

package/src/App/Shared/Components/AmountPrice/index.js

@@ -402,7 +402,7 @@ class AmountPrice extends React.Component {
         const { showReceiveOfferForm, clientTexts } = this.props;
         const { dataPrivacyLink } = clientTexts;
         const dataPrivacyApproved = this.state.dataPrivacyAccepted.value;
-        return showReceiveOfferForm && dataPrivacyApproved && dataPrivacyLink;
+        return !dataPrivacyLink || !showReceiveOfferForm || dataPrivacyApproved;
     };
 
     handleTouchMove = (evt => {

package/src/App/configuration.js

@@ -9,7 +9,7 @@ import { setStateChangeReducers, setSubReducers } from './Reducers/Configurator/
 const DEVELOPMENT_HOST_INT = 'http://int.configuratorware.local';
 
 // eslint-disable-next-line no-unused-vars
-const DEVELOPMENT_HOST_LOCAL = DEVELOPMENT_HOST_INT; //'http://localhost:10030';
+const DEVELOPMENT_HOST_LOCAL = 'http://localhost:10030';
 
 const hostsByNodeEnv = {
     production: '',

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,12 +37,10 @@ class Carousel extends React.Component {
     }
 
     componentDidMount() {
+        this.init();
         const { carousel } = this.refs;
-        if (carousel) {
-            this.init();
-            const wheelEventName = 'onwheel' in carousel ? 'wheel' : 'mousewheel';
-            carousel.addEventListener(wheelEventName, this.scrolled);
-        }
+        const wheelEventName = 'onwheel' in carousel ? 'wheel' : 'mousewheel';
+        carousel.addEventListener(wheelEventName, this.scrolled);
     }
 
     componentDidUpdate() {
@@ -142,16 +140,19 @@ class Carousel extends React.Component {
     };
 
     swiped = e => {
-        if (this.props.vertical) {
-            if (e.dir === UP) {
+        // 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) {
                 this.next();
-            } else if (e.dir === DOWN) {
+            } else {
                 this.prev();
             }
-        } else {
-            if (e.dir === LEFT) {
+        }
+        // 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) {
                 this.next();
-            } else if (e.dir === RIGHT) {
+            } else {
                 this.prev();
             }
         }
@@ -198,11 +199,9 @@ class Carousel extends React.Component {
                     )}
                     <Swipeable
                         className={'carousel-frame'}
-                        options={{
-                            trackMouse: true,
-                            onSwiping: this.swiping,
-                            onSwiped: this.swiped,
-                        }}
+                        trackMouse={true}
+                        onSwiping={this.swiping}
+                        onSwiped={this.swiped}
                     >
                         <div
                             className="carousel-slider"

package/Shared/Components/Swipeable.js

@@ -1,56 +0,0 @@
-"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/src/Shared/Components/Swipeable.js

@@ -1,9 +0,0 @@
-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} />;
-});