Merge branch 'master' of github.com:midudev/react-slidy

midudev · Jan 17, 2020 · fb031c6 · fb031c6 · vercel · Jan 17, 2020
2 parents 1f10f39 + 71df656
commit fb031c6
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 31 deletions.
diff --git a/.npmignore b/.npmignore
@@ -15,4 +15,11 @@ npm-debug.log
 webpack.config.js
 webpack.doc.config.js
 .cache
-.docz
+.docz
+.next
+pages
+doc-components
+public
+next.config.js
+README.md
+LICENSE
diff --git a/doc-components/GitHub.js b/doc-components/GitHub.js
@@ -0,0 +1,42 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+export default function GitHubBadge({
+  slug,
+  width = 36,
+  height = 36,
+  fill = 'black'
+}) {
+  return (
+    <>
+      <a
+        href="https://github.com/midudev/react-slidy"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <svg viewBox="0 0 64 64" width={height} height={width}>
+          <path
+            strokeWidth="0"
+            fill={fill}
+            d="M32 0 C14 0 0 14 0 32 0 53 19 62 22 62 24 62 24 61 24 60 L24 55 C17 57 14 53 13 50 13 50 13 49 11 47 10 46 6 44 10 44 13 44 15 48 15 48 18 52 22 51 24 50 24 48 26 46 26 46 18 45 12 42 12 31 12 27 13 24 15 22 15 22 13 18 15 13 15 13 20 13 24 17 27 15 37 15 40 17 44 13 49 13 49 13 51 20 49 22 49 22 51 24 52 27 52 31 52 42 45 45 38 46 39 47 40 49 40 52 L40 60 C40 61 40 62 42 62 45 62 64 53 64 32 64 14 50 0 32 0 Z"
+          />
+        </svg>
+      </a>
+      <style jsx>{`
+        a {
+          position: fixed;
+          top: 1rem;
+          right: 1rem;
+          zindex: 9999;
+        }
+      `}</style>
+    </>
+  )
+}
+
+GitHubBadge.propTypes = {
+  slug: PropTypes.string.isRequired,
+  width: PropTypes.number,
+  height: PropTypes.number,
+  fill: PropTypes.string
+}
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-slidy",
-  "version": "4.0.16",
+  "version": "4.0.21",
   "main": "lib/",
   "keywords": [
     "slider",
@@ -25,6 +25,7 @@
     "lint:js": "sui-lint js",
     "lint:sass": "sui-lint sass",
     "prelib": "npm run clean:lib -s",
+    "release": "np",
     "prepublish": "npm run lib"
   },
   "license": "MIT",
@@ -42,17 +43,18 @@
     "@mdx-js/loader": "1.5.3",
     "@next/mdx": "9.1.7",
     "@s-ui/lint": "3",
-    "@zeit/next-sass": "^1.0.1",
+    "@zeit/next-sass": "1.0.1",
     "babel-preset-sui": "3",
     "copyfiles": "2.1.1",
     "next": "9.1.7",
-    "node-sass": "^4.13.0",
-    "prism-react-renderer": "^1.0.2",
+    "node-sass": "4.13.0",
+    "np": "5.2.1",
+    "prism-react-renderer": "1.0.2",
     "prop-types": "15",
     "react": ">= 16.8.0 < 17",
     "react-dom": ">= 16.8.0 < 17",
     "rimraf": "3.0.0",
-    "sass-loader": "8.0.0",
+    "sass-loader": "8.0.2",
     "webpack": "4.41.5"
   },
   "dependencies": {

diff --git a/pages/index.js b/pages/index.js
@@ -4,6 +4,7 @@ import {MDXProvider} from '@mdx-js/react'
 
 import IndexMDX from './index.mdx'
 import CodeBlock from '../doc-components/CodeBlock'
+import GitHubBagdge from '../doc-components/GitHub'
 
 const components = {
   pre: props => <div {...props} />,
@@ -22,6 +23,7 @@ export default () => (
       />
       <link rel="canonical" href="https://react-slidy.midu.dev/" />
     </Head>
+    <GitHubBagdge />
     <IndexMDX />
     <style jsx global>
       {`

diff --git a/pages/index.mdx b/pages/index.mdx
@@ -56,7 +56,7 @@ you could also load the CSS directly from HTML:
 If you're using SASS, you could modify the next variables:
 
 ```sass
-$react-slidy-c-background: #dcdcdc !default;
+$react-slidy-c-background: transparent !default;
 $react-slidy-c-nav-background: rgba(255, 255, 255, .8) !default;
 $react-slidy-c-nav-color: #aaaaaa !default;
 $react-slidy-c-transparent: rgba(0, 0, 0, 0) !default;
@@ -282,6 +282,24 @@ export default () => {
 }
 ```
 
+### Avoid slides to use the full width
+
+By default, slides uses the full width of the container. So, if you're using an image, it uses all the width available. You could avoid this by using the prop `useFullWidth`.
+
+<ReactSlidy fullHeight imageObjectFit="contains" useFullWidth={false}>
+  <img src="https://a.ccdn.es/nuevos/400/bmw/series3/2020/4sa_225.jpg" />
+  <img src="https://a.ccdn.es/nuevos/400/bmw/series3/2020/4sa_225.jpg" />
+  <img src="https://a.ccdn.es/nuevos/400/bmw/series3/2020/4sa_225.jpg" />
+</ReactSlidy>
+
+```js showButton
+<ReactSlidy fullHeight imageObjectFit="contains" useFullWidth={false}>
+  <img src="https://a.ccdn.es/nuevos/400/bmw/series3/2020/4sa_225.jpg" />
+  <img src="https://a.ccdn.es/nuevos/400/bmw/series3/2020/4sa_225.jpg" />
+  <img src="https://a.ccdn.es/nuevos/400/bmw/series3/2020/4sa_225.jpg" />
+</ReactSlidy>
+```
+
 ## API 📖
 
 <Api />

diff --git a/src/index.js b/src/index.js
@@ -7,7 +7,8 @@ function noop() {}
 const CLASSNAMES = {
   contain: 'react-Slidy--contain',
   cover: 'react-Slidy--cover',
-  fullHeight: 'react-Slidy--fullHeight'
+  fullHeight: 'react-Slidy--fullHeight',
+  fullWidth: 'react-Slidy--fullWidth'
 }
 
 const ReactSlidy = props => {
@@ -52,18 +53,20 @@ const ReactSlidy = props => {
     classNameBase,
     imageObjectFit,
     numOfSlides,
+    sanitize,
     useFullHeight,
-    sanitize
+    useFullWidth
   } = props
+
   const numOfSlidesSanitzed = Math.min(
     numOfSlides,
     React.Children.count(children)
   )
 
-  const classNameToAttach = useFullHeight ? CLASSNAMES.fullHeight : undefined
   const rootClassName = [
     classNameBase,
-    classNameToAttach,
+    useFullHeight && CLASSNAMES.fullHeight,
+    useFullWidth && CLASSNAMES.fullWidth,
     imageObjectFit && CLASSNAMES[imageObjectFit]
   ]
     .filter(Boolean)
@@ -75,7 +78,6 @@ const ReactSlidy = props => {
         <ReactSlidySlider
           parentRef={nodeEl}
           {...props}
-          classNameToAttach={classNameToAttach}
           numOfSlides={sanitize ? numOfSlidesSanitzed : numOfSlides}
         >
           {props.children}
@@ -127,6 +129,8 @@ ReactSlidy.propTypes = {
   showArrows: PropTypes.bool,
   /** Determine the speed of the sliding animation */
   slideSpeed: PropTypes.number,
+  /** Use the full width of the container for the image */
+  useFullWidth: PropTypes.bool,
   /** Use the full height of the container adding some styles to the elements */
   useFullHeight: PropTypes.bool
 }
@@ -150,7 +154,8 @@ ReactSlidy.defaultProps = {
   slide: 0,
   slideSpeed: 500,
   showArrows: true,
-  useFullHeight: false
+  useFullHeight: false,
+  useFullWidth: true
 }
 
 export default ReactSlidy
diff --git a/src/index.scss b/src/index.scss
@@ -1,5 +1,5 @@
-$react-slidy-c-background: #dcdcdc !default;
-$react-slidy-c-nav-background: rgba(255, 255, 255, .8) !default;
+$react-slidy-c-background: transparent !default;
+$react-slidy-c-nav-background: rgba(255, 255, 255, 0.8) !default;
 $react-slidy-c-nav-color: #aaaaaa !default;
 $react-slidy-c-transparent: rgba(0, 0, 0, 0) !default;
 $react-slidy-h-image: auto !default;
@@ -44,7 +44,7 @@ $react-slidy-mh: 50px !default;
     opacity: 0;
     position: absolute;
     top: 0;
-    transition: opacity .3s ease;
+    transition: opacity 0.3s ease;
     width: 40px;
     z-index: 1;
 
@@ -71,13 +71,15 @@ $react-slidy-mh: 50px !default;
     }
   }
 
-  &.react-Slidy--fullHeight,
   &--fullHeight {
     height: 100%;
+    & > div li img {
+      height: 100%;
+    }
   }
 
-  &.react-Slidy--fullHeight > div li img {
-    height: 100%;
+  &--fullWidth > div li img {
+    width: 100%;
   }
 
   &--contain li img {
@@ -93,7 +95,7 @@ $react-slidy-mh: 50px !default;
   }
 
   &:hover > span[disabled] {
-    opacity: .2;
+    opacity: 0.2;
   }
 
   > div {
@@ -124,13 +126,14 @@ $react-slidy-mh: 50px !default;
     img {
       -webkit-backface-visibility: hidden;
       -webkit-perspective: 1000;
-  
+
       display: block;
       height: $react-slidy-h-image;
+      margin: 0 auto;
+      max-width: 100%;
       pointer-events: none;
       touch-action: none;
       user-select: none;
-      width: 100%;
     }
   }
 }
diff --git a/src/react-slidy-slider.js b/src/react-slidy-slider.js
@@ -30,18 +30,17 @@ function destroySlider(slidyInstance, doAfterDestroy) {
   doAfterDestroy()
 }
 
-const renderItem = (numOfSlides, classNameToAttach) => (item, index) => {
+const renderItem = numOfSlides => (item, index) => {
   const inlineStyle = numOfSlides !== 1 ? {width: `${100 / numOfSlides}%`} : {}
   return (
-    <li className={classNameToAttach} key={index} style={inlineStyle}>
+    <li key={index} style={inlineStyle}>
       {item}
     </li>
   )
 }
 
 export default function ReactSlidySlider({
   children,
-  classNameToAttach,
   classNameBase,
   doAfterDestroy,
   doAfterInit,
@@ -132,26 +131,27 @@ export default function ReactSlidySlider({
     numOfSlides
   })
 
+  const handlePrev = e => slidyInstance.prev(e)
+  const handleNext = e => items.length > numOfSlides && slidyInstance.next(e)
+
   return (
     <>
       {showArrows && (
         <>
           <span
             className={`${classNameBase}-prev`}
             disabled={index === 0}
-            onClick={slidyInstance.prev}
+            onClick={handlePrev}
           />
           <span
             className={`${classNameBase}-next`}
             disabled={items.length <= numOfSlides || index === items.length - 1}
-            onClick={items.length > numOfSlides && slidyInstance.next}
+            onClick={handleNext}
           />
         </>
       )}
-      <div className={classNameToAttach} ref={sliderContainerDOMEl}>
-        <ul className={classNameToAttach} ref={slidesDOMEl}>
-          {itemsToRender.map(renderItem(numOfSlides, classNameToAttach))}
-        </ul>
+      <div ref={sliderContainerDOMEl}>
+        <ul ref={slidesDOMEl}>{itemsToRender.map(renderItem(numOfSlides))}</ul>
       </div>
     </>
   )