SHARE
TWEET

Untitled

a guest Sep 20th, 2019 106 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import * as React from "react"
  2. import Ripples from 'react-ripples'
  3. import styled from "styled-components"
  4. import { variant } from "styled-system"
  5. import { MdChevronLeft, MdChevronRight } from "react-icons/md"
  6. import { useTransition, animated } from 'react-spring'
  7. import { Box } from "./Box"
  8. import { Text } from "./Text"
  9.  
  10. const Wrapper = styled(Box)`
  11.   height: 400px;
  12.   position: relative;
  13.   width: 100%;
  14.   display: grid;
  15.   grid-template-columns: [left-chevron] 1fr [content] 8fr [right-chevron] 1fr;
  16. `
  17.  
  18. const ContentWrapper = styled(Box)({
  19.   gridColumn: 'content',
  20.   position: 'relative',
  21.   '& > div': {
  22.     willChange: 'transform, opacity',
  23.     position: 'absolute',
  24.     width: '100%',
  25.     height: '100%',
  26.   },
  27. })
  28.  
  29. const SlideControlWrapper = styled(Ripples)({
  30.   display: 'flex',
  31.   alignItems: 'center',
  32.   justifyContent: 'center',
  33.   cursor: 'pointer',
  34. }, variant({
  35.   variants: {
  36.     disabled: { opacity: 0.6, pointerEvents: 'none' }
  37.   }
  38. }))
  39.  
  40. const SlideControl = ({ children, ...props }) =>
  41.   <SlideControlWrapper {...props}>
  42.     {children}
  43.   </SlideControlWrapper>
  44.  
  45. const initialState = {
  46.   currentIndex: 0,
  47.   animation: {
  48.     enter: { opacity: 1, transform: "translate3d(0%, 0, 0)" },
  49.     leave: { opacity: 0, transform: "translate3d(100%, 0 ,0)" },
  50.     from: { opacity: 0, transform: "translate3d(-50%, 0, 0)" },
  51.   },
  52. }
  53.  
  54. const CarouselContext = React.createContext({
  55.   previous: () => {},
  56.   next: () => {},
  57.   carouselState: initialState,
  58. })
  59.  
  60. export const useCarousel = () => React.useContext(CarouselContext)
  61. export const Provider = ({ children }) => {
  62.   const [carouselState, setCarouselState] = React.useState(initialState)
  63.  
  64.   const previous = () => {
  65.     setCarouselState({
  66.       currentIndex: carouselState.currentIndex - 1,
  67.       animation: {
  68.         enter: { opacity: 1, transform: "translate3d(0%, 0, 0)" },
  69.         leave: { opacity: 0, transform: "translate3d(100%, 0 ,0)" },
  70.         from: { opacity: 0, transform: "translate3d(-50%, 0, 0)" },
  71.       },
  72.     })
  73.   }
  74.   const next = () => {
  75.     setCarouselState({
  76.       currentIndex: carouselState.currentIndex + 1,
  77.       animation: {
  78.         from: { opacity: 0, transform: "translate3d(100%, 0 ,0)" },
  79.         enter: { opacity: 1, transform: "translate3d(0%, 0, 0)" },
  80.         leave: { opacity: 0, transform: "translate3d(-50%, 0, 0)" },
  81.       },
  82.     })
  83.   }
  84.  
  85.   return (
  86.     <CarouselContext.Provider value={{ previous, next, carouselState }}>
  87.       {children}
  88.     </CarouselContext.Provider>
  89.   )
  90. }
  91.  
  92. export const Carousel = ({ items }) => {
  93.   const { previous, carouselState, next } = useCarousel()
  94.   const transitions = useTransition([carouselState.currentIndex], item => item, {
  95.     reset: true,
  96.     unique: true,
  97.     ...carouselState.animation,
  98.   })
  99.  
  100.   return (
  101.     <Wrapper>
  102.       <SlideControl
  103.         gridColumn="left-chevron"
  104.         onClick={previous}
  105.         variant={carouselState.currentIndex == 0 ? "disabled" : "normal"}
  106.       >
  107.         <Text color="black" fontSize="48px">
  108.           <MdChevronLeft />
  109.         </Text>
  110.       </SlideControl>
  111.       <ContentWrapper height="400px">
  112.         {transitions.map(({ item, props, key }) => <animated.div key={key} style={props}>{items[item]()}</animated.div>)}
  113.       </ContentWrapper>
  114.       <SlideControl
  115.         gridColumn="right-chevron"
  116.         onClick={next}
  117.         variant={
  118.           carouselState.currentIndex == items.length - 1 ? "disabled" : "normal"
  119.         }
  120.       >
  121.         <Text color="black" fontSize="48px">
  122.           <MdChevronRight />
  123.         </Text>
  124.       </SlideControl>
  125.     </Wrapper>
  126.   )
  127. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top