Merge pull request #520 from shopgate/PWA-1642-broken-images-on-start…

…page Fixed ImageSliderWidget update when the startpage was updated
shopgate · Feb 4, 2019 · b7882e4 · b7882e4
2 parents c367504 + 90374f4
commit b7882e4
Show file tree

Hide file tree

Showing 12 changed files with 819 additions and 736 deletions.
diff --git a/extensions/@shopgate-user-privacy/frontend/DeleteAccount/index.jsx b/extensions/@shopgate-user-privacy/frontend/DeleteAccount/index.jsx
@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { NavDrawer } from '@shopgate/pwa-ui-material';
 import SecurityIcon from '@shopgate/pwa-ui-shared/icons/SecurityIcon';
 import connect from './connector';
 
@@ -14,6 +13,7 @@ class DeleteAccount extends Component {
 
   static propTypes = {
     deleteAccount: PropTypes.func.isRequired,
+    Item: PropTypes.node.isRequired,
     isShown: PropTypes.bool,
   }
 
@@ -33,7 +33,6 @@ class DeleteAccount extends Component {
    */
   render() {
     const { Item, isShown } = this.props;
-    const { __ } = this.context.i18n();
 
     if (!isShown) {
       return null;

diff --git a/libraries/common/components/Slider/__snapshots__/spec.jsx.snap b/libraries/common/components/Slider/__snapshots__/spec.jsx.snap
@@ -83,7 +83,7 @@ exports[`<Slider /> renders with a fraction indicator 1`] = `
               <div
                 className="sg-swiper-slide css-1l9a57c "
                 data-test-id="Slider"
-                key=".$s0"
+                key=".$0_0"
               >
                 <SliderItem
                   key="0"
@@ -98,7 +98,7 @@ exports[`<Slider /> renders with a fraction indicator 1`] = `
               <div
                 className="sg-swiper-slide css-1l9a57c "
                 data-test-id="Slider"
-                key=".$s1"
+                key=".$1_1"
               >
                 <SliderItem
                   key="1"
@@ -113,7 +113,7 @@ exports[`<Slider /> renders with a fraction indicator 1`] = `
               <div
                 className="sg-swiper-slide css-1l9a57c "
                 data-test-id="Slider"
-                key=".$s2"
+                key=".$2_2"
               >
                 <SliderItem
                   key="2"
@@ -219,7 +219,7 @@ exports[`<Slider /> renders with bullet indicators 1`] = `
               <div
                 className="sg-swiper-slide css-1l9a57c "
                 data-test-id="Slider"
-                key=".$s0"
+                key=".$0_0"
               >
                 <SliderItem
                   key="0"
@@ -234,7 +234,7 @@ exports[`<Slider /> renders with bullet indicators 1`] = `
               <div
                 className="sg-swiper-slide css-1l9a57c "
                 data-test-id="Slider"
-                key=".$s1"
+                key=".$1_1"
               >
                 <SliderItem
                   key="1"
@@ -249,7 +249,7 @@ exports[`<Slider /> renders with bullet indicators 1`] = `
               <div
                 className="sg-swiper-slide css-1l9a57c "
                 data-test-id="Slider"
-                key=".$s2"
+                key=".$2_2"
               >
                 <SliderItem
                   key="2"
@@ -338,7 +338,7 @@ exports[`<Slider /> renders with children 1`] = `
               <div
                 className="sg-swiper-slide css-1l9a57c "
                 data-test-id="Slider"
-                key=".$s0"
+                key=".$0_0"
               >
                 <SliderItem
                   key="0"
@@ -353,7 +353,7 @@ exports[`<Slider /> renders with children 1`] = `
               <div
                 className="sg-swiper-slide css-1l9a57c "
                 data-test-id="Slider"
-                key=".$s1"
+                key=".$1_1"
               >
                 <SliderItem
                   key="1"
@@ -368,7 +368,7 @@ exports[`<Slider /> renders with children 1`] = `
               <div
                 className="sg-swiper-slide css-1l9a57c "
                 data-test-id="Slider"
-                key=".$s2"
+                key=".$2_2"
               >
                 <SliderItem
                   key="2"
@@ -456,7 +456,7 @@ exports[`<Slider /> renders with controls 1`] = `
               <div
                 className="sg-swiper-slide css-1l9a57c "
                 data-test-id="Slider"
-                key=".$s0"
+                key=".$0_0"
               >
                 <SliderItem
                   key="0"
@@ -471,7 +471,7 @@ exports[`<Slider /> renders with controls 1`] = `
               <div
                 className="sg-swiper-slide css-1l9a57c "
                 data-test-id="Slider"
-                key=".$s1"
+                key=".$1_1"
               >
                 <SliderItem
                   key="1"
@@ -486,7 +486,7 @@ exports[`<Slider /> renders with controls 1`] = `
               <div
                 className="sg-swiper-slide css-1l9a57c "
                 data-test-id="Slider"
-                key=".$s2"
+                key=".$2_2"
               >
                 <SliderItem
                   key="2"

diff --git a/libraries/common/components/Slider/index.jsx b/libraries/common/components/Slider/index.jsx
@@ -10,38 +10,6 @@ import connect from './connector';
  * The basic slider component.
  */
 class Slider extends Component {
-  /**
-   * Prevents multi-touch gestures on the slider.
-   * @param {string} type The event type, must be one of the touchXYZ events.
-   * @param {Object} slider The slider instance.
-   */
-  static fixTouchEvents(type, slider) {
-    // Get a reference to the dom element.
-    const domRef = slider.container[0];
-
-    let realHandler = null;
-
-    // Find the real handler attached to the container.
-    if (type === 'touchstart') {
-      realHandler = slider.onTouchStart;
-    } else if (type === 'touchmove') {
-      realHandler = slider.onTouchMove;
-    } else if (type === 'touchend') {
-      realHandler = slider.onTouchEnd;
-    }
-
-    // Remove it ...
-    domRef.removeEventListener(type, realHandler);
-
-    // ... and replace it with our custom wrapper.
-    domRef.addEventListener(type, (event) => {
-      if (event.touches.length <= 1) {
-        // Only fire this event if this is not a multi-touch gesture.
-        realHandler(event);
-      }
-    }, false);
-  }
-
   /**
    * Retriggers the creation of loop DOM elements once the start/end of the slider has been reached.
    * @param {Object} slider The Slider object.
@@ -246,10 +214,6 @@ class Slider extends Component {
   initSlider = (slider) => {
     this.slider = slider;
 
-    this.constructor.fixTouchEvents('touchstart', slider);
-    this.constructor.fixTouchEvents('touchmove', slider);
-    this.constructor.fixTouchEvents('touchend', slider);
-
     if (this.props.disabled) {
       slider.lockSwipes();
     } else {
@@ -279,7 +243,7 @@ class Slider extends Component {
     const hasMultipleChildren = children.length > 1;
 
     const wrappedChildren = this.props.children.map((child, index) => {
-      const key = `s${index}`;
+      const key = child.key ? `${child.key}_${index}` : index;
 
       return (
         <div className={styles.slideWrapper} key={key} data-test-id="Slider">

diff --git a/libraries/ui-shared/ImageSlider/__snapshots__/spec.jsx.snap b/libraries/ui-shared/ImageSlider/__snapshots__/spec.jsx.snap
@@ -83,7 +83,7 @@ exports[`<ImageSlider /> should wrap each image into a Slider.Item 1`] = `
   loop={false}
   maxIndicators={10}
   onSlideChange={null}
-  rebuildOnUpdate={false}
+  rebuildOnUpdate={true}
   slidesPerView={1}
   snapItems={true}
 >

diff --git a/libraries/ui-shared/ImageSlider/index.jsx b/libraries/ui-shared/ImageSlider/index.jsx
@@ -53,8 +53,10 @@ class ImageSlider extends Component {
     const imageSliderItems = [];
 
     React.Children.forEach(this.props.children, (child, index) => {
+      const key = child.key ? `${child.key}_${index}` : index;
+
       imageSliderItems.push((
-        <Slider.Item key={index}>
+        <Slider.Item key={key}>
           {child}
         </Slider.Item>
       ));
@@ -64,6 +66,7 @@ class ImageSlider extends Component {
       <Slider
         {...this.props}
         classNames={styles}
+        rebuildOnUpdate
         maxIndicators={10}
       >
         {imageSliderItems}