Merge pull request #24 from desko27/feature/accept-arrow-renders

Feature/accept arrow renders

Author: midudev

doc-components/CustomArrows.js

@@ -0,0 +1,30 @@
+/* eslint-disable react/prop-types */
+import React from 'react'
+
+const buttonStyle = {
+  background: 'transparent',
+  border: 0,
+  cursor: 'pointer',
+  fontSize: 72,
+  height: '30%',
+  margin: 'auto 10px',
+  padding: 15
+}
+
+function CustomArrow({emoji, ...props}) {
+  return (
+    <button {...props} style={buttonStyle}>
+      <span role="img" aria-label="Arrow">
+        {emoji}
+      </span>
+    </button>
+  )
+}
+
+export function CustomArrowLeft(props) {
+  return <CustomArrow {...props} emoji="👈" />
+}
+
+export function CustomArrowRight(props) {
+  return <CustomArrow {...props} emoji="👉" />
+}

pages/index.mdx

@@ -6,6 +6,7 @@ import Api from '../doc-components/Api'
 import DynamicContent from '../doc-components/DynamicContent'
 import Dots from '../doc-components/Dots'
 import Number from '../doc-components/Number'
+import {CustomArrowLeft, CustomArrowRight} from '../doc-components/CustomArrows'
 import '../src/index.scss'
 
 <ReactSlidy>
@@ -53,7 +54,7 @@ you could also load the CSS directly from HTML:
 ```
 
 ## Customization 👩‍🎨
-If you're using SASS, you could modify the next variables:
+If you're using SASS, you could modify the following variables:
 
 ```sass
 $react-slidy-c-background: transparent !default;
@@ -306,8 +307,8 @@ If you have slides with different heights you need to specify the maxHeight to b
 
 <div>
   <ReactSlidy imageObjectFit="contain">
-    <img style={{maxHeight: '300px'}}src="https://d.fotocasa.es/promotion/2017/03/23/19298958/1873819.jpg" />
-    <img style={{maxHeight: '300px'}}src="https://d.fotocasa.es/promotion/2018/02/12/19402331/2108283.jpg" />
+    <img style={{maxHeight: '300px'}} src="https://d.fotocasa.es/promotion/2017/03/23/19298958/1873819.jpg" />
+    <img style={{maxHeight: '300px'}} src="https://d.fotocasa.es/promotion/2018/02/12/19402331/2108283.jpg" />
     <img style={{maxHeight: '300px'}} src="https://d.fotocasa.es/promotion/2018/03/26/19414824/2152752.jpg" />
     <img style={{maxHeight: '300px'}} src="https://d.fotocasa.es/promotion/2017/03/23/19298958/1982123.jpg" />
   </ReactSlidy>
@@ -316,14 +317,60 @@ If you have slides with different heights you need to specify the maxHeight to b
 ```js showButton
 <div>
   <ReactSlidy imageObjectFit="contain">
-    <img style={{maxHeight: '300px'}}src="https://d.fotocasa.es/promotion/2017/03/23/19298958/1873819.jpg" />
-    <img style={{maxHeight: '300px'}}src="https://d.fotocasa.es/promotion/2018/02/12/19402331/2108283.jpg" />
-    <img style={{maxHeight: '300px'}}src="https://d.fotocasa.es/promotion/2018/03/26/19414824/2152752.jpg" />
+    <img style={{maxHeight: '300px'}} src="https://d.fotocasa.es/promotion/2017/03/23/19298958/1873819.jpg" />
+    <img style={{maxHeight: '300px'}} src="https://d.fotocasa.es/promotion/2018/02/12/19402331/2108283.jpg" />
+    <img style={{maxHeight: '300px'}} src="https://d.fotocasa.es/promotion/2018/03/26/19414824/2152752.jpg" />
     <img style={{maxHeight: '300px'}} src="https://d.fotocasa.es/promotion/2017/03/23/19298958/1982123.jpg" />
   </ReactSlidy>
 </div>
 ```
 
+#### Using custom arrows
+
+<ReactSlidy ArrowLeft={CustomArrowLeft} ArrowRight={CustomArrowRight}>
+  <img src="/1.jpg" />
+  <img src="/2.jpg" />
+  <img src="/3.jpg" />
+  <img src="/4.jpg" />
+</ReactSlidy>
+
+```js showButton
+const buttonStyle = {
+  background: 'transparent',
+  border: 0,
+  cursor: 'pointer',
+  fontSize: 72,
+  height: '30%',
+  margin: 'auto 10px',
+  padding: 15
+}
+
+function CustomArrow({emoji, ...props}) {
+  return (
+    <button {...props} style={buttonStyle}>
+      <span role="img" aria-label="Arrow">
+        {emoji}
+      </span>
+    </button>
+  )
+}
+
+function CustomArrowLeft(props) {
+  return <CustomArrow {...props} emoji="👈" />
+}
+
+function CustomArrowRight(props) {
+  return <CustomArrow {...props} emoji="👉" />
+}
+
+<ReactSlidy ArrowLeft={CustomArrowLeft} ArrowRight={CustomArrowRight}>
+  <img src="/1.jpg" />
+  <img src="/2.jpg" />
+  <img src="/3.jpg" />
+  <img src="/4.jpg" />
+</ReactSlidy>
+```
+
 ## API 📖
 
 <Api />

src/index.js

@@ -12,6 +12,8 @@ const CLASSNAMES = {
 }
 
 const ReactSlidy = ({
+  ArrowLeft,
+  ArrowRight,
   children,
   classNameBase = 'react-Slidy',
   doAfterDestroy = noop,
@@ -86,6 +88,8 @@ const ReactSlidy = ({
     .join(' ')
 
   const reactSlidySliderProps = {
+    ArrowLeft,
+    ArrowRight,
     children,
     classNameBase,
     doAfterDestroy,
@@ -117,6 +121,10 @@ const ReactSlidy = ({
 }
 
 ReactSlidy.propTypes = {
+  /** Component to be used as the left arrow for the slider */
+  ArrowLeft: PropTypes.elementType,
+  /** Component to be used as the right arrow for the slider */
+  ArrowRight: PropTypes.elementType,
   /** Children to be used as slides for the slider */
   children: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired,
   /** Class base to create all clases for elements. Styles might break if you modify it. */

src/index.scss

@@ -30,32 +30,43 @@ $react-slidy-mh: 50px !default;
   position: relative;
   user-select: none;
 
-  &-prev,
-  &-next {
+  &-arrow {
     align-items: center;
-    background: $react-slidy-c-nav-background;
     bottom: 0;
-    cursor: pointer;
     display: flex;
-    height: 20%;
-    justify-content: center;
     margin: auto 0;
-    min-height: 56px;
     opacity: 0;
     position: absolute;
     top: 0;
     transition: opacity 0.3s ease;
-    width: 40px;
+    width: auto;
     z-index: 1;
 
+    &Left {
+      left: 0;
+    }
+
+    &Right {
+      right: 0;
+    }
+
     @media screen and (max-width: 850px) {
       display: none;
     }
   }
 
+  &-prev,
+  &-next {
+    background: $react-slidy-c-nav-background;
+    cursor: pointer;
+    height: 20%;
+    justify-content: center;
+    min-height: 56px;
+    width: 40px;
+  }
+
   &-next {
     border-radius: 10px 0 0 10px;
-    right: 0;
 
     &::after {
       @include arrow('right');
@@ -64,7 +75,6 @@ $react-slidy-mh: 50px !default;
 
   &-prev {
     border-radius: 0 10px 10px 0;
-    left: 0;
 
     &::after {
       @include arrow('left');
@@ -90,11 +100,11 @@ $react-slidy-mh: 50px !default;
     object-fit: cover;
   }
 
-  &:hover > span {
+  &:hover > &-arrow {
     opacity: 1;
   }
 
-  &:hover > span[disabled] {
+  &:hover > &-arrow[disabled] {
     opacity: 0.2;
   }
 

src/react-slidy-slider.js

@@ -40,6 +40,8 @@ const renderItem = numOfSlides => (item, index) => {
 }
 
 export default function ReactSlidySlider({
+  ArrowLeft,
+  ArrowRight,
   children,
   classNameBase,
   doAfterDestroy,
@@ -134,24 +136,44 @@ export default function ReactSlidySlider({
   const handlePrev = e => slidyInstance.prev(e)
   const handleNext = e => items.length > numOfSlides && slidyInstance.next(e)
 
+  const renderLeftArrow = () => {
+    const disabled = index === 0
+    const props = {disabled, onClick: handlePrev}
+    const leftArrowClasses = `${classNameBase}-arrow ${classNameBase}-arrowLeft`
+    if (ArrowLeft) return <ArrowLeft {...props} className={leftArrowClasses} />
+
+    return (
+      <span
+        arial-label="Previous"
+        className={`${leftArrowClasses} ${classNameBase}-prev`}
+        role="button"
+        {...props}
+      />
+    )
+  }
+  const renderRightArrow = () => {
+    const disabled = items.length <= numOfSlides || index === items.length - 1
+    const props = {disabled, onClick: handleNext}
+    const rightArrowClasses = `${classNameBase}-arrow ${classNameBase}-arrowRight`
+    if (ArrowRight)
+      return <ArrowRight {...props} className={rightArrowClasses} />
+
+    return (
+      <span
+        arial-label="Next"
+        className={`${rightArrowClasses} ${classNameBase}-next`}
+        role="button"
+        {...props}
+      />
+    )
+  }
+
   return (
     <>
       {showArrows && (
         <>
-          <span
-            arial-label="Previous"
-            className={`${classNameBase}-prev`}
-            role="button"
-            disabled={index === 0}
-            onClick={handlePrev}
-          />
-          <span
-            arial-label="Next"
-            className={`${classNameBase}-next`}
-            disabled={items.length <= numOfSlides || index === items.length - 1}
-            role="button"
-            onClick={handleNext}
-          />
+          {renderLeftArrow()}
+          {renderRightArrow()}
         </>
       )}
       <div ref={sliderContainerDOMEl}>