Merge pull request #464 from bunysae/master

Fixes #181
brainhubeu · May 7, 2020 · 6c6d436 · 6c6d436
2 parents b551588 + 8abcbf4
commit 6c6d436
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 6 deletions.
diff --git a/docs/examples/clickToChange.md b/docs/examples/clickToChange.md
@@ -11,8 +11,3 @@ By default, clicking the slides does nothing. You can change that behavior with
  <img src={imageThree} />
 </Carousel>
 ```
-
-### Apple iOS
-The carousel items should not be associated with the CSS
-property `justify-content: center;`. This property causes
-wrong justification on iOS.
diff --git a/src/components/CarouselItem.js b/src/components/CarouselItem.js
@@ -17,6 +17,26 @@ class CarouselItem extends PureComponent {
     isDraggingEnabled: PropTypes.bool,
   };
 
+  constructor(props) {
+    super(props);
+    this.childrenRef = React.createRef();
+  }
+
+  /* ========== Resize, if necessary. Workaround for iOS safari ========== */
+  componentDidUpdate() {
+    this.childrenRef.current.style = null;
+    if (this.childrenRef.current.offsetWidth > this.props.width) {
+      this.childrenRef.current.style.width = `${this.props.width}px`;
+    }
+  }
+
+  getChildren() {
+    return React.cloneElement(
+      this.props.children,
+      { ref: this.childrenRef },
+    );
+  }
+
   onMouseDown = event => {
     this.props.onMouseDown(event, this.props.index);
   };
@@ -46,7 +66,7 @@ class CarouselItem extends PureComponent {
         onMouseDown={this.props.isDraggingEnabled ? this.onMouseDown : null}
         onTouchStart={this.props.isDraggingEnabled ? this.onTouchStart : null}
       >
-        {this.props.children}
+        {this.getChildren()}
       </li>
     );
   }

diff --git a/src/styles/CarouselItem.scss b/src/styles/CarouselItem.scss
@@ -1,5 +1,6 @@
 .BrainhubCarouselItem {
   display: flex;
+  justify-content: center;
   align-items: center;
   position: relative;
   &.BrainhubCarouselItem--clickable {