From 791c4c2fcc42baad4765b3df61dd5147b531bbca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juli=C3=A1n=20Benegas?= Date: Thu, 22 Oct 2020 19:10:09 -0300 Subject: [PATCH] add keen slider and apply to product slider --- assets/global.css | 4 + .../ProductSlider/ProductSlider.module.css | 52 +++++++++--- .../product/ProductSlider/ProductSlider.tsx | 79 ++++++++++++------- .../ProductView/ProductView.module.css | 31 ++------ package.json | 1 + pages/_app.tsx | 1 + tailwind.config.js | 2 + yarn.lock | 5 ++ 8 files changed, 109 insertions(+), 66 deletions(-) diff --git a/assets/global.css b/assets/global.css index 4d3d23402..bbe9e2ac4 100644 --- a/assets/global.css +++ b/assets/global.css @@ -13,6 +13,8 @@ --text-secondary: white; --hover: rgba(0, 0, 0, 0.075); + --hover-1: rgba(0, 0, 0, 0.15); + --hover-2: rgba(0, 0, 0, 0.25); --cyan: #50e3c2; --green: #37b679; @@ -40,6 +42,8 @@ --secondary: white; --secondary-2: #f1f3f5; --hover: rgba(255, 255, 255, 0.075); + --hover-1: rgba(255, 255, 255, 0.15); + --hover-2: rgba(255, 255, 255, 0.25); --selection: var(--purple); --text-base: white; diff --git a/components/product/ProductSlider/ProductSlider.module.css b/components/product/ProductSlider/ProductSlider.module.css index 5f076af16..a294a5f5c 100644 --- a/components/product/ProductSlider/ProductSlider.module.css +++ b/components/product/ProductSlider/ProductSlider.module.css @@ -1,22 +1,48 @@ .root { - @apply relative w-full h-full; + @apply relative w-full h-full relative; overflow-y: hidden; +} - & > div { - overflow: visible !important; +.leftControl, +.rightControl { + @apply text-white absolute top-1/2 -translate-x-1/2 z-20 w-16 h-16 flex items-center justify-center bg-hover-1 rounded focus:outline-none focus:shadow-outline-blue hover:bg-hover-2; +} + +.leftControl { + @apply left-6; +} + +.rightControl { + @apply right-6 rotate-180 transform; +} + +.control { + @apply opacity-0 transition-all duration-150; +} + +.root:hover .control { + @apply opacity-100; +} + +.positionIndicatorsContainer { + @apply hidden; + @screen sm { + @apply block absolute bottom-6 left-1/2 -translate-x-1/2 transform; } } -.rootPanel { - @apply absolute flex flex-row inset-0 z-20 m-20; +.positionIndicator { + @apply bg-hover-1 hover:bg-hover-2 transition-colors w-3 h-3 rounded-full mx-2 focus:outline-none; } -.leftPanel { - @apply flex-1; - cursor: url('/cursor-left.png'), auto; -} - -.rightPanel { - @apply flex-1; - cursor: url('/cursor-right.png'), auto; +.positionIndicatorActive { + @apply bg-white hover:bg-white; } +/* sx={{ + width: '10px', + height: '10px', + bg: currentSlide === idx ? 'primary' : 'gray', + borderRadius: 'full', + mx: 2, + '&:focus': { outline: 'none' }, +}} */ diff --git a/components/product/ProductSlider/ProductSlider.tsx b/components/product/ProductSlider/ProductSlider.tsx index 77610e8c1..9f36961af 100644 --- a/components/product/ProductSlider/ProductSlider.tsx +++ b/components/product/ProductSlider/ProductSlider.tsx @@ -1,36 +1,61 @@ -import React, { FC, useState } from 'react' -import SwipeableViews from 'react-swipeable-views' +import { ArrowLeft } from '@components/icon' +import { useKeenSlider } from 'keen-slider/react' +import React, { Children, FC, isValidElement, useState } from 'react' +import cn from 'classnames' + import s from './ProductSlider.module.css' -interface Props { - children?: any -} -const ProductSlider: FC = ({ children }) => { - const [idx, setIdx] = useState(0) - const count = React.Children.count(children) - - const goBack = () => { - idx !== 0 ? setIdx(idx - 1) : setIdx(count - 1) - } - - const goNext = () => { - idx + 1 === count ? setIdx(0) : setIdx(idx + 1) - } +const ProductSlider: FC = ({ children }) => { + const [currentSlide, setCurrentSlide] = useState(0) + const [ref, slider] = useKeenSlider({ + slideChanged(s) { + setCurrentSlide(s.details().relativeSlide) + }, + loop: true, + }) return (
- - {children} - -
-
-
+ + +
+ {Children.map(children, (child) => { + // Add the keen-slider__slide className to children + if (isValidElement(child)) { + return { + ...child, + props: { + ...child.props, + className: `${ + child.props.className ? `${child.props.className} ` : '' + }keen-slider__slide`, + }, + } + } + return child + })}
+ {slider && ( +
+ {[...Array(slider.details().size).keys()].map((idx) => { + return ( +
+ )}
) } diff --git a/components/product/ProductView/ProductView.module.css b/components/product/ProductView/ProductView.module.css index c17ad9565..f47933868 100644 --- a/components/product/ProductView/ProductView.module.css +++ b/components/product/ProductView/ProductView.module.css @@ -2,7 +2,7 @@ @apply relative grid items-start gap-8 grid-cols-1; @screen lg { - @apply grid-cols-12 pt-10; + @apply grid-cols-12; } } @@ -24,17 +24,11 @@ } .squareBg { - @apply absolute inset-0 bg-violet z-0; - max-height: 250px; - - @screen md { - @apply inset-20; - max-height: 500px; - } + @apply absolute inset-0 bg-violet z-0 h-full; } .nameBox { - @apply absolute top-6 left-0 z-10; + @apply absolute top-6 left-6 z-20; & .name { @apply px-6 py-2 bg-primary text-primary font-bold; @@ -49,7 +43,7 @@ @screen md { & .name, & .price { - @apply bg-violet text-white; + @apply bg-hover-1 text-white; } } } @@ -67,22 +61,7 @@ } .img { - @apply w-full h-full object-cover; - - @screen md { - height: 100%; - margin-top: -2.75rem; - } - - @screen lg { - height: 150%; - margin-top: -10%; - } - - @screen xl { - height: 170%; - margin-top: -19%; - } + @apply w-full h-auto max-h-full object-cover; } .button { diff --git a/package.json b/package.json index 9365500a3..da708321c 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "classnames": "^2.2.6", "cookie": "^0.4.1", "js-cookie": "^2.2.1", + "keen-slider": "^5.2.4", "lodash.debounce": "^4.0.8", "lodash.random": "^3.2.0", "next": "^9.5.6-canary.9", diff --git a/pages/_app.tsx b/pages/_app.tsx index f6c1ffcd8..2f80a4258 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,6 +1,7 @@ import '@assets/global.css' import '@assets/tailwind.css' import '@assets/utils.css' +import 'keen-slider/keen-slider.min.css' // To be removed import 'animate.css' diff --git a/tailwind.config.js b/tailwind.config.js index adff9a7f6..2f842de51 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -15,6 +15,8 @@ module.exports = { secondary: 'var(--secondary)', 'secondary-2': 'var(--secondary-2)', hover: 'var(--hover)', + 'hover-1': 'var(--hover-1)', + 'hover-2': 'var(--hover-2)', 'accents-0': 'var(--accents-0)', 'accents-1': 'var(--accents-1)', 'accents-2': 'var(--accents-2)', diff --git a/yarn.lock b/yarn.lock index 023467d2b..d07b3dac1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5399,6 +5399,11 @@ jws@^3.2.2: jwa "^1.4.1" safe-buffer "^5.0.1" +keen-slider@^5.2.4: + version "5.2.4" + resolved "https://registry.yarnpkg.com/keen-slider/-/keen-slider-5.2.4.tgz#9e2a889c63c02a651c81caa438f3691e9a3bc0a8" + integrity sha512-z39afyASW63B+1FzWGzBkvXAnzJl3gAD8M+32TmhJAPJqjckCaKYm7YBjpSba04AoVMQw8y9U1LVcUucVVIQkQ== + keycode@^2.1.7: version "2.2.0" resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.2.0.tgz#3d0af56dc7b8b8e5cba8d0a97f107204eec22b04"