@configuratorware/configurator-frontendgui 1.36.0-beta.0 → 1.36.0

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

@@ -339,6 +339,8 @@ class AmountPrice extends React.Component {
     receiveOfferFormComponentRef = React.createRef();
     dialogContentRef = React.createRef();
     priceListRef = React.createRef();
+    acceptDesignRef = React.createRef();
+    acceptDataPrivacyRef = React.createRef();
 
     handleChange = event => {
         this.setState({
@@ -349,10 +351,9 @@ class AmountPrice extends React.Component {
         });
     };
 
-    verifyRequestErrors = () => {
+    verifyRequestErrors = hasFormValidationErrors => {
         const { bulkNameErrors, displayAcceptDesign } = this.props;
         const designApproved = this.state.approval.value;
-
         if (bulkNameErrors && bulkNameErrors.length > 0) {
             this.setState({ showErrors: true });
             this.setState({ bulkNameErrors });
@@ -365,6 +366,9 @@ class AmountPrice extends React.Component {
                     error: true,
                 },
             });
+            !hasFormValidationErrors &&
+                this.acceptDesignRef.current &&
+                this.acceptDesignRef.current.scrollIntoView();
         }
         if (!this.dataPrivacyApproved()) {
             this.setState({
@@ -373,6 +377,9 @@ class AmountPrice extends React.Component {
                     error: true,
                 },
             });
+            !hasFormValidationErrors &&
+                this.acceptDataPrivacyRef.current &&
+                this.acceptDataPrivacyRef.current.scrollIntoView();
         }
     };
 
@@ -449,7 +456,7 @@ class AmountPrice extends React.Component {
                 this.setState({ hasErrorReceiveOfferForm: false });
             }
         } else {
-            this.verifyRequestErrors();
+            this.verifyRequestErrors(formValidation.hasError);
         }
     };
 
@@ -574,28 +581,32 @@ class AmountPrice extends React.Component {
                             amount={amount}
                             acceptDesignComponent={
                                 showCallToAction ? (
-                                    <AcceptDesignComponent
-                                        termsAndConditionsLink={termsAndConditionsLink}
-                                        displayAcceptDesign={displayAcceptDesign}
-                                        handleChangeCheckboxApproval={this.handleChange}
-                                        approval={approval}
-                                        closeProductOverviewDialog={this.handleClose}
-                                        notice={notice}
-                                        noteLabel={t('amountPrice.notice')}
-                                        handleChange={this.handleBasketNoticeChange}
-                                    />
+                                    <div ref={this.acceptDesignRef}>
+                                        <AcceptDesignComponent
+                                            termsAndConditionsLink={termsAndConditionsLink}
+                                            displayAcceptDesign={displayAcceptDesign}
+                                            handleChangeCheckboxApproval={this.handleChange}
+                                            approval={approval}
+                                            closeProductOverviewDialog={this.handleClose}
+                                            notice={notice}
+                                            noteLabel={t('amountPrice.notice')}
+                                            handleChange={this.handleBasketNoticeChange}
+                                        />
+                                    </div>
                                 ) : null
                             }
                             acceptDataPrivacyComponent={
                                 showReceiveOfferForm && dataPrivacyLink ? (
-                                    <AcceptPrivacyComponent
-                                        dataPrivacyLink={dataPrivacyLink}
-                                        displayAcceptDesign={true}
-                                        handleChangeCheckboxApproval={this.handleChange}
-                                        approval={dataPrivacyAccepted}
-                                        closeProductOverviewDialog={this.handleClose}
-                                        displayNote={false}
-                                    />
+                                    <div ref={this.acceptDataPrivacyRef}>
+                                        <AcceptPrivacyComponent
+                                            dataPrivacyLink={dataPrivacyLink}
+                                            displayAcceptDesign={true}
+                                            handleChangeCheckboxApproval={this.handleChange}
+                                            approval={dataPrivacyAccepted}
+                                            closeProductOverviewDialog={this.handleClose}
+                                            displayNote={false}
+                                        />
+                                    </div>
                                 ) : null
                             }
                             notificationComponent={mergedNotifications.map(

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,57 +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; }
-
-// eslint-disable-next-line react/prop-types,react/display-name
-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,10 +0,0 @@
-import React from 'react';
-import { useSwipeable, UP, DOWN, LEFT, RIGHT } from 'react-swipeable';
-
-export { UP, DOWN, LEFT, RIGHT };
-
-// eslint-disable-next-line react/prop-types,react/display-name
-export const Swipeable = React.forwardRef(({ options, ...props }, ref) => {
-    const handlers = useSwipeable(options);
-    return <div {...handlers} {...props} ref={ref} />;
-});