Aug7 cleanup

src/arrows.js

@@ -4,100 +4,93 @@ import React from "react";
 import classnames from "classnames";
 import { canGoNext } from "./utils/innerSliderUtils";
 
-export class PrevArrow extends React.PureComponent {
-  clickHandler(options, e) {
+export function PrevArrow(props) {
+  let prevClasses = { "slick-arrow": true, "slick-prev": true };
+  function prevHandler(e) {
     if (e) {
       e.preventDefault();
     }
-    this.props.clickHandler(options, e);
+    props.clickHandler({ message: "previous" }, e);
   }
-  render() {
-    let prevClasses = { "slick-arrow": true, "slick-prev": true };
-    let prevHandler = this.clickHandler.bind(this, { message: "previous" });
 
-    if (
-      !this.props.infinite &&
-      (this.props.currentSlide === 0 ||
-        this.props.slideCount <= this.props.slidesToShow)
-    ) {
-      prevClasses["slick-disabled"] = true;
-      prevHandler = null;
-    }
+  if (
+    !props.infinite &&
+    (props.currentSlide === 0 || props.slideCount <= props.slidesToShow)
+  ) {
+    prevClasses["slick-disabled"] = true;
+    prevHandler = null;
+  }
 
-    let prevArrowProps = {
-      key: "0",
-      "data-role": "none",
-      className: classnames(prevClasses),
-      style: { display: "block" },
-      onClick: prevHandler
-    };
-    let customProps = {
-      currentSlide: this.props.currentSlide,
-      slideCount: this.props.slideCount
-    };
-    let prevArrow;
+  let prevArrowProps = {
+    key: "0",
+    "data-role": "none",
+    className: classnames(prevClasses),
+    style: { display: "block" },
+    onClick: prevHandler
+  };
+  let customProps = {
+    currentSlide: props.currentSlide,
+    slideCount: props.slideCount
+  };
+  let prevArrow;
 
-    if (this.props.prevArrow) {
-      prevArrow = React.cloneElement(this.props.prevArrow, {
-        ...prevArrowProps,
-        ...customProps
-      });
-    } else {
-      prevArrow = (
-        <button key="0" type="button" {...prevArrowProps}>
-          {" "}
-          Previous
-        </button>
-      );
-    }
-
-    return prevArrow;
+  if (props.prevArrow) {
+    prevArrow = React.cloneElement(props.prevArrow, {
+      ...prevArrowProps,
+      ...customProps
+    });
+  } else {
+    prevArrow = (
+      <button key="0" type="button" {...prevArrowProps}>
+        {" "}
+        Previous
+      </button>
+    );
   }
+
+  return prevArrow;
 }
 
-export class NextArrow extends React.PureComponent {
-  clickHandler(options, e) {
+export function NextArrow(props) {
+  let nextClasses = { "slick-arrow": true, "slick-next": true };
+  function nextHandler(e) {
     if (e) {
       e.preventDefault();
     }
-    this.props.clickHandler(options, e);
+    props.clickHandler({ message: "next" }, e);
   }
-  render() {
-    let nextClasses = { "slick-arrow": true, "slick-next": true };
-    let nextHandler = this.clickHandler.bind(this, { message: "next" });
 
-    if (!canGoNext(this.props)) {
-      nextClasses["slick-disabled"] = true;
-      nextHandler = null;
-    }
+  if (!canGoNext(props)) {
+    nextClasses["slick-disabled"] = true;
+    nextHandler = null;
+  }
 
-    let nextArrowProps = {
-      key: "1",
-      "data-role": "none",
-      className: classnames(nextClasses),
-      style: { display: "block" },
-      onClick: nextHandler
-    };
-    let customProps = {
-      currentSlide: this.props.currentSlide,
-      slideCount: this.props.slideCount
-    };
-    let nextArrow;
+  let nextArrowProps = {
+    key: "1",
+    "data-role": "none",
+    className: classnames(nextClasses),
+    style: { display: "block" },
+    onClick: nextHandler
+  };
+  let customProps = {
+    currentSlide: props.currentSlide,
+    slideCount: props.slideCount
+  };
+  let nextArrow;
 
-    if (this.props.nextArrow) {
-      nextArrow = React.cloneElement(this.props.nextArrow, {
-        ...nextArrowProps,
-        ...customProps
-      });
-    } else {
-      nextArrow = (
-        <button key="1" type="button" {...nextArrowProps}>
-          {" "}
-          Next
-        </button>
-      );
-    }
-
-    return nextArrow;
+  if (props.nextArrow) {
+    nextArrow = React.cloneElement(props.nextArrow, {
+      ...nextArrowProps,
+      ...customProps
+    });
+  } else {
+    nextArrow = (
+      <button key="1" type="button" {...nextArrowProps}>
+        {" "}
+        Next
+      </button>
+    );
   }
+
+  return nextArrow;
 }

src/dots.js

@@ -18,67 +18,64 @@ const getDotCount = spec => {
   return dots;
 };
 
-export class Dots extends React.PureComponent {
-  clickHandler(options, e) {
-    // In Autoplay the focus stays on clicked button even after transition
-    // to next slide. That only goes away by click somewhere outside
-    e.preventDefault();
-    this.props.clickHandler(options);
-  }
-  render() {
-    const {
-      onMouseEnter,
-      onMouseOver,
-      onMouseLeave,
-      infinite,
-      slidesToScroll,
-      slidesToShow,
-      slideCount,
-      currentSlide
-    } = this.props;
-    let dotCount = getDotCount({
-      slideCount,
-      slidesToScroll,
-      slidesToShow,
-      infinite
-    });
+export function Dots(props) {
+  const {
+    onMouseEnter,
+    onMouseOver,
+    onMouseLeave,
+    infinite,
+    slidesToScroll,
+    slidesToShow,
+    slideCount,
+    currentSlide
+  } = props;
+  let dotCount = getDotCount({
+    slideCount,
+    slidesToScroll,
+    slidesToShow,
+    infinite
+  });
 
-    const mouseEvents = { onMouseEnter, onMouseOver, onMouseLeave };
-    let dots = [];
-    for (let i = 0; i < dotCount; i++) {
-      let _rightBound = (i + 1) * slidesToScroll - 1;
-      let rightBound = infinite
-        ? _rightBound
-        : clamp(_rightBound, 0, slideCount - 1);
-      let _leftBound = rightBound - (slidesToScroll - 1);
-      let leftBound = infinite
-        ? _leftBound
-        : clamp(_leftBound, 0, slideCount - 1);
+  const mouseEvents = { onMouseEnter, onMouseOver, onMouseLeave };
+  let dots = [];
+  for (let i = 0; i < dotCount; i++) {
+    let _rightBound = (i + 1) * slidesToScroll - 1;
+    let rightBound = infinite
+      ? _rightBound
+      : clamp(_rightBound, 0, slideCount - 1);
+    let _leftBound = rightBound - (slidesToScroll - 1);
+    let leftBound = infinite
+      ? _leftBound
+      : clamp(_leftBound, 0, slideCount - 1);
 
-      let className = classnames({
-        "slick-active": infinite
-          ? currentSlide >= leftBound && currentSlide <= rightBound
-          : currentSlide === leftBound
-      });
+    let className = classnames({
+      "slick-active": infinite
+        ? currentSlide >= leftBound && currentSlide <= rightBound
+        : currentSlide === leftBound
+    });
 
-      let dotOptions = {
-        message: "dots",
-        index: i,
-        slidesToScroll,
-        currentSlide
-      };
+    let dotOptions = {
+      message: "dots",
+      index: i,
+      slidesToScroll,
+      currentSlide
+    };
 
-      let onClick = this.clickHandler.bind(this, dotOptions);
-      dots = dots.concat(
-        <li key={i} className={className}>
-          {React.cloneElement(this.props.customPaging(i), { onClick })}
-        </li>
-      );
+    function onClick(e) {
+      // In Autoplay the focus stays on clicked button even after transition
+      // to next slide. That only goes away by click somewhere outside
+      e.preventDefault();
+      props.clickHandler(dotOptions);
     }
-
-    return React.cloneElement(this.props.appendDots(dots), {
-      className: this.props.dotsClass,
-      ...mouseEvents
-    });
+    dots = dots.concat(
+      <li key={i} className={className}>
+        {React.cloneElement(props.customPaging(i), { onClick })}
+      </li>
+    );
   }
+
+  return React.cloneElement(props.appendDots(dots), {
+    className: props.dotsClass,
+    ...mouseEvents
+  });
 }