Feature/pass through drag callbacks (#161)

* renamed onDragStart and onDragEnd

These names were misleading.  They are not related in any way to React’s event types.

* allow event propagation

Not sure why we are stopping event propagation in the slider tray.  We should allow events to bubble up to maximize configurability for Pure React Carousel consumers.  Commenting out for now, will remove completely if no bugs arise from this change.

* Created Example 11

Created a new example carousel to demonstrait how to pass events to the Slider tray element.

* fix incorrect value for preserveAspectRatio

* removing commented-out code

* added “missing” prop types

* forgot to update tests with fakeOnDragMove, End

* rename onDragStart to fakeOnDragStart

Author: mrbinky3000

src/App/App.jsx

@@ -10,14 +10,10 @@ import {
   Example8,
   Example9,
   Example10,
+  Example11,
 } from './examples';
 import s from './style.scss';
 
-
-// function demoClick(ev) {
-//   console.log('ev', Object.assign({}, ev));
-// }
-
 class DevelopmentApp extends React.Component {
   constructor() {
     super();
@@ -43,32 +39,40 @@ class DevelopmentApp extends React.Component {
             <div className={s.firstSlideCenterHoriz}>
               <h1 className={s.heroHeadline}>Pure React Carousel</h1>
               <p className={s.heroText}>
-                Pure React Carousel is a suite of unopinionated React components that a
-                developer can use to create robust carousels with almost no limits on DOM structure
-                or styling.
+                Pure React Carousel is a suite of unopinionated React components that a developer
+                can use to create robust carousels with almost no limits on DOM structure or
+                styling.
               </p>
               <p className={s.heroText}>
                 If you&apos;re tired of fighting some other developer&apos;s CSS and DOM structure,
                 this carousel is for you.
               </p>
               <ul className={s.heroList}>
-                <li><a href="#un">What is &quot;unopinionated?&quot;</a></li>
-                <li><a href="#rw">Real World Example</a></li>
-                <li><a href="#de">Demo Examples</a></li>
+                <li>
+                  <a href="#un">What is &quot;unopinionated?&quot;</a>
+                </li>
+                <li>
+                  <a href="#rw">Real World Example</a>
+                </li>
+                <li>
+                  <a href="#de">Demo Examples</a>
+                </li>
                 <li>
                   <a href="https://github.com/express-labs/pure-react-carousel">
                     Documentation
                     <svg
                       className={s.externalLink}
                       xmlns="http://www.w3.org/2000/svg"
                       viewBox="0 0 24 24"
-                      preserveAspectRatio="xMidyMid meet"
+                      preserveAspectRatio="xMidYMid meet"
                     >
                       <path d="M5 3c-1.093 0-2 .907-2 2v14c0 1.093.907 2 2 2h14c1.093 0 2-.907 2-2v-7h-2v7H5V5h7V3H5zm9 0v2h3.586l-9.293 9.293 1.414 1.414L19 6.414V10h2V3h-7z" />
                     </svg>
                   </a>
                 </li>
-                <li><a href="#el">Express Labs</a></li>
+                <li>
+                  <a href="#el">Express Labs</a>
+                </li>
               </ul>
             </div>
           </div>
@@ -82,36 +86,48 @@ class DevelopmentApp extends React.Component {
           </p>
           <p>
             The components in Pure React Carousel provide the bare-minimum of styling and javascript
-            required to function correctly as a carousel. Just like using table HTML tags
-            will give you a bare-bones table that you will need to style, Pure React Carousel
-            requires that you provide additional styles and optional javascript in order to meet
-            your project&apos;s specific functionality and branding requirements.
+            required to function correctly as a carousel. Just like using table HTML tags will give
+            you a bare-bones table that you will need to style, Pure React Carousel requires that
+            you provide additional styles and optional javascript in order to meet your
+            project&apos;s specific functionality and branding requirements.
           </p>
           <p>
-            The benefit of Pure React Carousel is that our components are focused on one task:
-            being an WCAG accessible carousel.  Besides that, our goal is to get out of your way.
+            The benefit of Pure React Carousel is that our components are focused on one task: being
+            an WCAG accessible carousel. Besides that, our goal is to get out of your way.
           </p>
         </div>
         <div id="rw" className={s.examples}>
           <div className={s.examplesInnerCenter}>
             <h2 className={s.headline}>Real World Example</h2>
             <p>
-              Here are two examples of what can be acheived with Pure React Carousel. This is how
-              we use the suite of components on the Express.com website.
+              Here are two examples of what can be acheived with Pure React Carousel. This is how we
+              use the suite of components on the Express.com website.
+            </p>
+            <p>
+              <img
+                className={s.responsiveImg}
+                src="./media/pdp-women.gif"
+                alt="example of pure react carousel on the product detail page for a dress on Express.com"
+              />
+            </p>
+            <p>
+              <img
+                className={s.responsiveImg}
+                src="./media/pdp-men.gif"
+                alt="example of pure react carousel on the product detail page for a shirt on Express.com"
+              />
             </p>
-            <p><img className={s.responsiveImg} src="./media/pdp-women.gif" alt="example of pure react carousel on the product detail page for a dress on Express.com" /></p>
-            <p><img className={s.responsiveImg} src="./media/pdp-men.gif" alt="example of pure react carousel on the product detail page for a shirt on Express.com" /></p>
           </div>
         </div>
         <div id="de" className={s.examplesDemo}>
           <div className={s.examplesInner}>
             <h2 className={s.headline}>Default Carousel Examples</h2>
             <h3 className={s.headline}>Why are these examples so... ugly?</h3>
             <p>
-              These examples are completely un-styled.  Pure React Carousel does not come with
-              styles that must be defeated in order to match your organization&apos;s branding.  So,
-              to distract you from the seeming lack of finess, most of our examples
-              involve pictures of cats!
+              These examples are completely un-styled. Pure React Carousel does not come with styles
+              that must be defeated in order to match your organization&apos;s branding. So, to
+              distract you from the seeming lack of finess, most of our examples involve pictures of
+              cats!
             </p>
             <p>
               <label>
@@ -125,83 +141,93 @@ class DevelopmentApp extends React.Component {
                   <option value="5">Horizontal Carousel (With Master Loading Spinner)</option>
                   <option value="6">Simple Carousel with vertically alligned nav buttons</option>
                   <option value="7">Simple Carousel with react-redux</option>
-                  <option value="8">Horizontal Carousel (With lockOnWindowScroll set to TRUE)</option>
+                  <option value="8">
+                    Horizontal Carousel (With lockOnWindowScroll set to TRUE)
+                  </option>
                   <option value="9">Horizontal Carousel Auto Play</option>
+                  <option value="10">Carousel with custom spinner component.</option>
+                  <option value="11">Simple carousel with event callbacks on Slider.</option>
                 </select>
               </label>
             </p>
 
             <div className={s.example}>
-              { (value === '0' || value === '1') && (
+              {(value === '0' || value === '1') && (
                 <section id="example--1">
                   <hr />
                   <Example1 />
                 </section>
               )}
 
-              { (value === '0' || value === '2') && (
+              {(value === '0' || value === '2') && (
                 <section id="example--2">
                   <hr />
                   <Example2 />
                 </section>
               )}
 
-              { (value === '0' || value === '3') && (
+              {(value === '0' || value === '3') && (
                 <section id="example--3">
                   <hr />
                   <Example3 />
                 </section>
               )}
 
-              { (value === '0' || value === '4') && (
+              {(value === '0' || value === '4') && (
                 <section id="example--4">
                   <hr />
                   <Example4 />
                 </section>
               )}
 
-              { (value === '0' || value === '5') && (
+              {(value === '0' || value === '5') && (
                 <section id="example--5">
                   <hr />
                   <Example5 />
                 </section>
               )}
 
-              { (value === '0' || value === '6') && (
+              {(value === '0' || value === '6') && (
                 <section id="example--6">
                   <hr />
                   <Example6 />
                 </section>
               )}
 
-              { (value === '0' || value === '7') && (
+              {(value === '0' || value === '7') && (
                 <section id="example--7">
                   <hr />
                   <Example7 />
                 </section>
               )}
 
-              { (value === '0' || value === '8') && (
+              {(value === '0' || value === '8') && (
                 <section id="example--8">
                   <hr />
                   <Example8 />
                 </section>
               )}
 
-              { (value === '0' || value === '9') && (
+              {(value === '0' || value === '9') && (
                 <section id="example--9">
                   <hr />
                   <Example9 />
                 </section>
               )}
 
-              { (value === '0' || value === '10') && (
+              {(value === '0' || value === '10') && (
                 <section id="example--10">
                   <hr />
                   <Example10 />
                 </section>
               )}
 
+              {(value === '0' || value === '11') && (
+                <section id="example--11">
+                  <hr />
+                  <Example11 />
+                </section>
+              )}
             </div>
           </div>
         </div>

src/App/examples/Example11/Example11.jsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import {
+  ButtonBack,
+  ButtonFirst,
+  ButtonLast,
+  ButtonNext,
+  CarouselProvider,
+  DotGroup,
+  Image,
+  Slide,
+  Slider,
+} from '../../..';
+
+import s from '../../style.scss';
+
+function eventLogger(ev) {
+  // eslint-disable-next-line no-console
+  console.log(ev.type, ev.target);
+}
+
+export default () => (
+  <CarouselProvider
+    visibleSlides={2}
+    totalSlides={6}
+    naturalSlideWidth={400}
+    naturalSlideHeight={500}
+  >
+    <h2 className={s.headline}>Carousel with custom event handlers.</h2>
+    <p>
+      Simple carousel with custom event handlers attachet to the
+      {' '}
+      <code>&lt;Slider /&gt;</code>
+      {' '}
+      component&apos;s
+      {' '}
+      <code>trayProps</code>
+      {' '}
+property. Open your browser devloper tools and look at
+      the console log, then manipulate the carousel.
+    </p>
+    <Slider
+      className={s.slider}
+      trayProps={{
+        // clipboard events? Sure why not.
+        onCopy: eventLogger,
+        onCut: eventLogger,
+        onPaste: eventLogger,
+
+        // composition events
+        onCompositionEnd: eventLogger,
+        onCompositionStart: eventLogger,
+        onCompositionUpdate: eventLogger,
+
+        // keyboard events
+        onKeyDown: eventLogger,
+        onKeyPress: eventLogger,
+        onKeyUp: eventLogger,
+
+        // focus events,
+        onFocus: eventLogger,
+        onBlur: eventLogger,
+
+        // form events,
+        onChange: eventLogger,
+        onInput: eventLogger,
+        onInvalid: eventLogger,
+        onSubmit: eventLogger,
+
+        // mouse events
+        onClick: eventLogger,
+        onContextMenu: eventLogger,
+        onDoubleClick: eventLogger,
+        onDrag: eventLogger,
+        onDragEnd: eventLogger,
+        onDragEnter: eventLogger,
+        onDragExit: eventLogger,
+        onDragLeave: eventLogger,
+        onDragOver: eventLogger,
+        onDragStart: eventLogger,
+        onDrop: eventLogger,
+        onMouseDown: eventLogger,
+        onMouseEnter: eventLogger,
+        onMouseLeave: eventLogger,
+        // onMouseMove: eventLogger,
+        onMouseOut: eventLogger,
+        onMouseOver: eventLogger,
+        onMouseUp: eventLogger,
+
+        // touch events
+        onTouchCancel: eventLogger,
+        onTouchEnd: eventLogger,
+        // onTouchMove: eventLogger,
+        onTouchStart: eventLogger,
+
+        // pointer events
+        onPointerDown: eventLogger,
+        // onPointerMove: eventLogger,
+        onPointerUp: eventLogger,
+        onPointerCancel: eventLogger,
+        onGotPointerCapture: eventLogger,
+        onLostPointerCapture: eventLogger,
+        onPointerEnter: eventLogger,
+        onPointerLeave: eventLogger,
+        onPointerOver: eventLogger,
+        onPointerOut: eventLogger,
+
+        draggable: true,
+      }}
+    >
+      <Slide tag="a" index={0}>
+        <Image src="./media/img01.jpeg" />
+      </Slide>
+      <Slide tag="a" index={1}>
+        <Image src="./media/img02.jpeg" />
+      </Slide>
+      <Slide tag="a" index={2}>
+        <Image src="./media/img03.jpeg" />
+      </Slide>
+      <Slide tag="a" index={3}>
+        <Image src="./media/img04.jpeg" />
+      </Slide>
+      <Slide tag="a" index={4}>
+        <Image src="./media/img05.jpeg" />
+      </Slide>
+      <Slide tag="a" index={5}>
+        <Image src="./media/img06.jpeg" />
+      </Slide>
+    </Slider>
+    <ButtonFirst>First</ButtonFirst>
+    <ButtonBack>Back</ButtonBack>
+    <ButtonNext>Next</ButtonNext>
+    <ButtonLast>Last</ButtonLast>
+    <DotGroup dotNumbers />
+  </CarouselProvider>
+);

src/App/examples/Example11/index.js

@@ -0,0 +1,3 @@
+import Example11 from './Example11';
+
+export default Example11;

src/App/examples/index.js

@@ -8,3 +8,4 @@ export { default as Example7 } from './Example7';
 export { default as Example8 } from './Example8';
 export { default as Example9 } from './Example9';
 export { default as Example10 } from './Example10';
+export { default as Example11 } from './Example11';