From 122409279040da01f8851ad381dfc745a1828f5d Mon Sep 17 00:00:00 2001
From: Rishi Kumar Chawda <rishichawda@users.noreply.github.com>
Date: Wed, 14 Nov 2018 00:54:55 +0530
Subject: [PATCH 1/2] feat(snippets): Add carousel component

---
 snippets/Carousel.md | 90 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 90 insertions(+)
 create mode 100644 snippets/Carousel.md

diff --git a/snippets/Carousel.md b/snippets/Carousel.md
new file mode 100644
index 000000000..472a60d7d
--- /dev/null
+++ b/snippets/Carousel.md
@@ -0,0 +1,90 @@
+### Carousel
+
+Renders a carousel component.
+
+The `active` property on the component state is set to `0`th index as default.
+
+Use an object, `style`, to hold the styles for the individual components.
+
+Create a method, `setActiveItem`, which uses `this.setState` to change the state's `active` property to the index of the next item.
+Create another method `changeItem`, which is called by `setActiveItem` after updating the state each time and also when the component
+first renders (on `ComponentDidMount`).
+  
+In the `render()` method, destructure `state`, `style` and `props`, compute if visibility style should be set to `visible` or not for each carousel
+item while mapping over and apply the combined style to the carousel item component accordingly.
+  
+Render the carousel items using [React.cloneElement](https://reactjs.org/docs/react-api.html#cloneelement) and pass down rest
+props along with the computed styles.
+
+```jsx
+
+class Carousel extends React.Component {
+   constructor(props) {
+    super(props);
+    this.state = {
+      active: 0
+    };
+    this.scrollInterval = null;
+    this.style = {
+      carousel: {
+        position: "relative"
+      },
+      carouselItem: {
+        position: "absolute",
+        visibility: "hidden"
+      },
+      visible: {
+        visibility: "visible"
+      }
+    };
+  }
+  
+ componentDidMount() {
+    this.changeItem();
+ }
+
+ setActiveItem = () => {
+   const { carouselItems } = this.props;
+   this.setState(prevState => ({
+    active: (prevState.active + 1) % carouselItems.length
+    }),
+     this.changeItem
+   );
+ };
+
+ changeItem = () => {
+   this.scrollInterval = setTimeout(
+    this.setActiveItem, 2000);
+ };
+
+  render() {
+    const { carouselItems, ...rest } = this.props;
+    const { active } = this.state;
+    const { visible, carousel, carouselItem } = this.style;
+    return (
+      <div style={carousel}>
+        {carouselItems.map((item, index) => {
+          const activeStyle = active === index ? visible : {};
+          return React.cloneElement(item, {
+            ...rest,
+            style: {
+              ...carouselItem,
+              ...activeStyle
+            }
+          });
+        })}
+      </div>
+    );
+  }
+}
+
+```
+
+```jsx
+
+ ReactDOM.render(<Carousel carouselItems = {[
+    <div>carousel item 1</div>,
+    <div>carousel item 2</div>,
+    <div>carousel item 3</div>]} />, document.getElementById('root'));
+    
+ ```

From 07ff51629fba25d762cd08aa31594f9b682db922 Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Mon, 28 Jan 2019 19:50:38 +0200
Subject: [PATCH 2/2] Update Carousel.md

---
 snippets/Carousel.md | 67 ++++++++++++++++++++------------------------
 1 file changed, 30 insertions(+), 37 deletions(-)

diff --git a/snippets/Carousel.md b/snippets/Carousel.md
index 472a60d7d..7a7a344eb 100644
--- a/snippets/Carousel.md
+++ b/snippets/Carousel.md
@@ -2,24 +2,18 @@
 
 Renders a carousel component.
 
-The `active` property on the component state is set to `0`th index as default.
-
+Initially set `state.active` to `0` (index of the first item).
 Use an object, `style`, to hold the styles for the individual components.
-
-Create a method, `setActiveItem`, which uses `this.setState` to change the state's `active` property to the index of the next item.
-Create another method `changeItem`, which is called by `setActiveItem` after updating the state each time and also when the component
+Define a method, `setActiveItem`, which uses `this.setState` to change the state's `active` property to the index of the next item.
+Define another method, `changeItem`, which is called by `setActiveItem` after updating the state each time and also when the component
 first renders (on `ComponentDidMount`).
-  
-In the `render()` method, destructure `state`, `style` and `props`, compute if visibility style should be set to `visible` or not for each carousel
-item while mapping over and apply the combined style to the carousel item component accordingly.
-  
+In the `render()` method, destructure `state`, `style` and `props`, compute if visibility style should be set to `visible` or not for each carousel item while mapping over and applying the combined style to the carousel item component accordingly.
 Render the carousel items using [React.cloneElement](https://reactjs.org/docs/react-api.html#cloneelement) and pass down rest
-props along with the computed styles.
+`props` along with the computed styles.
 
 ```jsx
-
 class Carousel extends React.Component {
-   constructor(props) {
+  constructor(props) {
     super(props);
     this.state = {
       active: 0
@@ -38,25 +32,21 @@ class Carousel extends React.Component {
       }
     };
   }
-  
- componentDidMount() {
+  componentDidMount() {
     this.changeItem();
- }
-
- setActiveItem = () => {
-   const { carouselItems } = this.props;
-   this.setState(prevState => ({
-    active: (prevState.active + 1) % carouselItems.length
-    }),
-     this.changeItem
-   );
- };
-
- changeItem = () => {
-   this.scrollInterval = setTimeout(
-    this.setActiveItem, 2000);
- };
-
+  }
+  setActiveItem = () => {
+    const { carouselItems } = this.props;
+    this.setState(
+      prevState => ({
+        active: (prevState.active + 1) % carouselItems.length
+      }),
+      this.changeItem
+    );
+  };
+  changeItem = () => {
+    this.scrollInterval = setTimeout(this.setActiveItem, 2000);
+  };
   render() {
     const { carouselItems, ...rest } = this.props;
     const { active } = this.state;
@@ -77,14 +67,17 @@ class Carousel extends React.Component {
     );
   }
 }
-
 ```
 
 ```jsx
-
- ReactDOM.render(<Carousel carouselItems = {[
-    <div>carousel item 1</div>,
-    <div>carousel item 2</div>,
-    <div>carousel item 3</div>]} />, document.getElementById('root'));
-    
+ReactDOM.render(
+  <Carousel
+    carouselItems={[
+      <div>carousel item 1</div>,
+      <div>carousel item 2</div>,
+      <div>carousel item 3</div>
+    ]}
+  />,
+  document.getElementById("app")
+);
  ```