use controls

RyotaSugawara · Sep 4, 2017 · 8e29321 · 8e29321
1 parent 67bb577
commit 8e29321
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 13 deletions.
diff --git a/docs/index.js b/docs/index.js
diff --git a/docs/index.tsx b/docs/index.tsx
@@ -51,6 +51,7 @@ class App extends React.Component {
           ref={(instance) => { this.carousel = instance; }}
           autoSlideInterval={3000}
           useDots={true}
+          useControl={true}
         >
           {this.state.count.map((c) => {
             return (

diff --git a/index.d.ts b/index.d.ts
@@ -14,8 +14,7 @@ export interface CarouselProps {
     duration?: number;
     autoSlideInterval?: number;
     style?: React.CSSProperties;
-    nextComponent?: JSX.Element;
-    prevComponent?: JSX.Element;
+    useControl?: boolean;
 }
 export interface CarouselState {
     animate: boolean;
@@ -28,6 +27,7 @@ export interface CarouselState {
     showIndex: number;
 }
 export default class Carousel extends React.Component<CarouselProps, CarouselState> {
+    id: number;
     container: Element;
     swiping: boolean;
     moving: boolean;
@@ -45,6 +45,8 @@ export default class Carousel extends React.Component<CarouselProps, CarouselSta
     renderInitialRect(): JSX.Element;
     renderCarouselChild(): JSX.Element | JSX.Element[];
     renderControls(): JSX.Element;
+    renderNextButton(action: any): JSX.Element;
+    renderPrevButton(action: any): JSX.Element;
     autoSlide(): void;
     resetAutoSlide(): void;
     addEvents(): void;

diff --git a/src/index.tsx b/src/index.tsx
@@ -15,8 +15,7 @@ export interface CarouselProps {
   duration?: number;
   autoSlideInterval?: number;
   style?: React.CSSProperties;
-  nextComponent?: JSX.Element;
-  prevComponent?: JSX.Element;
+  useControl?: boolean;
 }
 
 export interface CarouselState {
@@ -30,8 +29,16 @@ export interface CarouselState {
   showIndex: number;
 }
 
+const CONTROLS_STYLE = {
+  display: 'inline-block',
+  listStyle: 'none'
+};
+
+let id = 0;
+
 export default class Carousel extends React.Component<CarouselProps, CarouselState> {
 
+  id: number;
   container: Element;
   swiping: boolean;
   moving: boolean;
@@ -56,12 +63,14 @@ export default class Carousel extends React.Component<CarouselProps, CarouselSta
       useDots: false,
       dotStyle: {},
       duration: 500, // ms
-      autoSlideInterval: 0, // ms
+      autoSlideInterval: 0, // ms,
+      useControl: false
     };
   }
 
   constructor() {
     super();
+    this.id = id++;
     this.next = this.next.bind(this);
     this.prev = this.prev.bind(this);
     this.onResize = this.onResize.bind(this);
@@ -118,7 +127,7 @@ export default class Carousel extends React.Component<CarouselProps, CarouselSta
   renderInitialRect() {
     const firstChild = React.Children.toArray(this.props.children)[0];
     return (
-      <li style={{width: '100%'}}>
+      <li style={{ width: '100%' }}>
         {firstChild}
       </li>
     );
@@ -151,16 +160,16 @@ export default class Carousel extends React.Component<CarouselProps, CarouselSta
           textAlign: 'center'
         }}
       >
+        {this.props.useControl ? (
+          <li style={CONTROLS_STYLE}>{this.renderPrevButton(this.prev)}</li>
+        ) : null}
         {React.Children.map(this.props.children, (child: any, index) => {
           const isActive = this.state.currentIndex === index;
           return (
             <li
               className="Carousel_Dot"
-              key={`dot-${child.key}`}
-              style={{
-                display: 'inline-block',
-                listStyleType: 'none'
-              }}
+              key={`dot-${this.id}-${index}`}
+              style={CONTROLS_STYLE}
             >
               <button
                 onClick={() => this.move(index)}
@@ -181,10 +190,29 @@ export default class Carousel extends React.Component<CarouselProps, CarouselSta
             </li>
           );
         })}
+        {this.props.useControl ? (
+          <li style={CONTROLS_STYLE}>{this.renderNextButton(this.next)}</li>
+        ) : null}
       </ul>
     );
   }
 
+  renderNextButton(action) {
+    return (
+      <button onClick={action} aria-label={`Move ${this.props.label} carousel current index to next.`}>
+        &gt;
+      </button>
+    );
+  }
+
+  renderPrevButton(action) {
+    return (
+      <button onClick={action} aria-label={`Move ${this.props.label} carousel current index to prev.`}>
+        &lt;
+      </button>
+    );
+  }
+
   /* other methods */
   autoSlide() {
     if (this.props.autoSlideInterval <= 0 || this.timer) {