Function Carousel

examples/app/SimplePattern/pattern.tsx:50–120

(props)

const getInitialState = (numItems: number): CarouselState => ({ pos: numItems - 1, sliding: false, dir: NEXT });

const Carousel: FunctionComponent<{children: ReactNode}> = (props) => {
  const numItems = React.Children.count(props.children);
  const [state, dispatch] = React.useReducer(reducer, getInitialState(numItems));

  const slide = (dir: Direction) => {
    dispatch({ type: dir, numItems });
    setTimeout(() => {
      dispatch({ type: 'stopSliding' });
    }, 50);
  };

  const [pIdx, setPIdx] = React.useState(0);

  const handleSwiped = (eventData: SwipeEventData) => {
    if (eventData.dir === pattern[pIdx]) {
      // user successfully got to the end of the pattern!
      if (pIdx + 1 === pattern.length) {
        setPIdx(pattern.length);
        slide(NEXT);
        setTimeout(() => {
          setPIdx(0);
        }, 50);
      } else {
        // user is cont. with the pattern
        setPIdx((i) => (i += 1));
      }
    } else {
      // user got the next pattern step wrong, reset pattern
      setPIdx(0);
    }
  };

  const handlers = useSwipeable({
    onSwiped: handleSwiped,
    onTouchStartOrOnMouseDown: (({ event }) => event.preventDefault()),
    touchEventOptions: { passive: false },
    preventScrollOnSwipe: true,
    trackMouse: true
  });

  return (
    <>
      <PatternBox {...handlers}>
      Within this text area container, swipe the pattern seen below to make
      the carousel navigate to the next slide.
        {`\n`}
        <p style={{textAlign: 'center', paddingTop: '15px'}}>
          Swipe:
          <D><UpArrow active={pIdx > 0} /></D>
          <D><DownArrow active={pIdx > 1} /></D>
          <D><UpArrow active={pIdx > 2} /></D>
          <D><DownArrow active={pIdx > 3} /></D>
        </p>
      </PatternBox>
      <div style={{paddingBottom: '15px'}}>
        <Wrapper>
          <CarouselContainer dir={state.dir} sliding={state.sliding}>
            {React.Children.map(props.children, (child, index) => (