trepur_components 2.3.8 → 2.3.9

package/src/components/Carousel/index.tsx

@@ -1,55 +1,48 @@
-import React, { useState } from 'react';
+import {
+  createContext,
+  forwardRef,
+  HTMLAttributes,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
 
-import { ComponentWrapper } from '@components/ComponentWrapper';
 import { Icon } from '@components/Icon';
 import {
   faChevronLeft,
   faChevronRight,
   faCircle,
 } from '@fortawesome/fontawesome-free-solid';
-import { type IconProp } from '@fortawesome/fontawesome-svg-core';
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
+import { Colours } from '@utils/controls';
+import clsx from 'clsx';
 import 'keen-slider/keen-slider.min.css';
 import {
   useKeenSlider,
-  type KeenSliderInstance,
-  type KeenSliderHooks,
-  type KeenSliderOptions,
+  KeenSliderInstance,
+  KeenSliderHooks,
+  KeenSliderOptions,
 } from 'keen-slider/react';
 
-interface ArrowProps {
+import { WheelControls } from './utils';
+
+export interface ArrowProps {
+  rightArrow?: boolean;
   visible?: boolean;
-  left?: boolean;
-  right?: boolean;
   disabled?: boolean;
   onClick?: any;
-  colour?: Colours;
-  bgColour?: Colours;
-  hoverColour?: Colours;
-  hoverBgColour?: Colours;
 }
 
-interface DotProps {
-  id?: string;
+export interface DotProps {
   isActive?: boolean;
   visible?: boolean;
   onClick?: any;
-  colour?: Colours;
-  bgColour?: Colours;
-  hoverColour?: Colours;
-  hoverBgColour?: Colours;
-
-  wrapperBgColour: Colours;
 }
 
-export interface Props {
-  id?: string;
-  className?: string;
+export interface CarouselContextProps {
+  sliderRef?: any;
+  instanceRef?: any;
+  currentSlide?: number;
   slideWrapperClassName?: string;
-  title?: string;
-  description?: string;
-  bgColour?: Colours;
   breakpoints?: Record<
     string,
     Omit<KeenSliderOptions<{}, {}, KeenSliderHooks>, 'breakpoints'>
@@ -101,282 +94,208 @@ export interface Props {
   dots?: DotProps;
 }
 
-export const Carousel: React.FC<Props> = ({
-  id,
-  className,
-  slideWrapperClassName,
-  title,
-  description,
-  bgColour,
-  breakpoints,
-  defaultAnimation,
-  disabled,
-  drag,
-  dragSpeed,
-  initial,
-  loop = true,
-  mode = 'snap',
-  range,
-  renderMode,
-  rtl,
-  rubberband,
-  slides,
-  vertical,
-  animationStarted,
-  animationStopped,
-  animationEnded,
-  created,
-  destroyed,
-  detailsChanged,
-  dragged,
-  dragStarted,
-  dragChecked,
-  dragEnded,
-  beforeOptionsChanged,
-  optionsChanged,
-  slideChanged,
-  updated,
-  perView = 1,
-  spacing,
-  number,
-  origin,
-  arrows,
-  dots,
-}) => {
-  const classList = className;
-  const [currentSlide, setCurrentSlide] = useState(0);
-  const [loaded, setLoaded] = useState(false);
-
-  function WheelControls(slider: any): void {
-    let touchTimeout: any;
-    let position: any;
-    let wheelActive: boolean;
-
-    function dispatch(e: any, name: string): void {
-      position.x -= e.deltaX;
-      position.y -= e.deltaY;
-      slider.container.dispatchEvent(
-        new CustomEvent(name, {
-          detail: {
-            x: position.x,
-            y: position.y,
-          }
-        }),
-      )
-    }
-
-    function wheelStart(e: any): void {
-      position = {
-        x: e.pageX,
-        y: e.pageY,
-      }
-      dispatch(e, 'ksDragStart');
-    }
-
-    function wheel(e: any): void {
-      dispatch(e, 'ksDrag');
-    }
-
-    function wheelEnd(e: any): void {
-      dispatch(e, 'ksDragEnd');
-    }
-
-    function eventWheel(e: any): void {
-      if (!wheelActive) {
-        wheelStart(e);
-        wheelActive = true;
-      }
-      wheel(e);
-      clearTimeout(touchTimeout);
-      touchTimeout = setTimeout(() => {
-        wheelActive = false;
-        wheelEnd(e);
-      }, 50);
-    }
-
-    slider.on('created', () => {
-      slider.container.addEventListener('wheel', eventWheel, {
-        passive: true,
-      })
-    });
-  }
+const CarouselContext = createContext<CarouselContextProps | null>(null);
 
-  const [sliderRef, instanceRef] = useKeenSlider<HTMLDivElement>(
+const CarouselComponent = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement> & CarouselContextProps
+>(
+  (
     {
-      initial,
       breakpoints,
-      defaultAnimation,
-      disabled,
-      drag,
-      dragSpeed,
+      children,
+      className,
       loop,
-      mode,
-      range,
-      renderMode,
-      rtl,
+      perView,
       rubberband,
-      vertical,
-      slideChanged(slider) {
-        setCurrentSlide(slider.track.details.rel);
-      },
-      // slideChanged: slideChanged,
-      created() {
-        setLoaded(true);
+      spacing,
+      ...props
+    },
+    ref,
+  ) => {
+    const [currentSlide, setCurrentSlide] = useState(1);
+    const [loaded, setLoaded] = useState(false);
+    const [sliderRef, instanceRef] = useKeenSlider<HTMLDivElement>(
+      {
+        breakpoints,
+        loop,
+        rubberband,
+        slideChanged(slider) {
+          setCurrentSlide(slider.track.details.rel);
+        },
+        created() {
+          setLoaded(true);
+        },
+        slides: {
+          spacing,
+          perView,
+        },
       },
-      // created: created,
-      animationStarted,
-      animationStopped,
-      animationEnded,
-      destroyed,
-      detailsChanged,
-      dragged,
-      dragStarted,
-      dragChecked,
-      dragEnded,
-      beforeOptionsChanged,
-      optionsChanged,
-      updated,
-      slides: {
+      [WheelControls],
+    );
+
+    const state = useMemo(
+      () => ({
+        sliderRef,
+        instanceRef,
+        currentSlide,
+        setCurrentSlide,
         perView,
-        spacing,
-        origin,
-        number,
-      }
-    },
-    [WheelControls],
-  )
+        ...props,
+      }),
+      [
+        props,
+        sliderRef,
+        instanceRef.current,
+        currentSlide,
+        setCurrentSlide,
+        perView,
+        loaded,
+      ],
+    );
 
-  const onKeyDown = (e: any): void => {
-    if (e.key === 'Tab') {
-      instanceRef.current?.next();
-    }
-  };
+    const onKeyDown = (e: any): void => {
+      if (e.key === 'Tab') {
+        instanceRef.current?.next();
+      }
+    };
 
-  return (
-    <ComponentWrapper
-      id={id}
-      className={classList}
-      title={title}
-      description={description}
-      bgColour={bgColour}
-    >
-      <div
-        onKeyDown={onKeyDown}
-        className={classNames(
-          classList,
-          arrows?.visible === true && 'flex justify-between',
-          'navigation-wrapper w-full',
-        )}
-      >
-        {arrows?.visible === true &&
-          loaded &&
-          instanceRef.current !== undefined && (
-            <div className="my-auto">
-              <Arrow
-                left
-                onClick={(e: any) => {
-                  e.stopPropagation() !== undefined ||
-                    instanceRef.current?.prev();
-                }}
-                disabled={currentSlide === 0}
-                {...arrows}
-              />
-            </div>
-          )}
+    return (
+      <CarouselContext.Provider value={state}>
         <div
-          ref={sliderRef}
-          className={classNames(
-            slideWrapperClassName,
-            'keen-slider w-full pb-12 pt-4',
-          )}
+          onKeyDown={onKeyDown}
+          className={clsx('navigation-wrapper w-full', className)}
+          ref={ref}
+          {...props}
         >
-          {slides != null && slides}
-        </div>
-        {arrows?.visible === true &&
-          loaded &&
-          instanceRef.current !== undefined && (
-            <div className="my-auto">
-              <Arrow
-                right
-                onClick={(e: any) => {
-                  e.stopPropagation() !== undefined ||
-                    instanceRef.current?.next();
-                }}
-                disabled={
-                  currentSlide ===
-                  instanceRef?.current?.track?.details?.slides?.length
-                }
-                {...arrows}
-              />
-            </div>
-          )}
-      </div>
-      {dots?.visible === true && loaded && instanceRef.current != null && (
-        <div className="my-2 flex justify-center">
-          {[
-            ...Array(
-              instanceRef?.current?.track?.details?.slides?.length,
-            ).keys(),
-          ].map((idx, i) => {
-            const numberOfSlides =
-              instanceRef?.current?.track?.details?.slides?.length ?? 1;
-            return (
-              <Dot
-                key={`dot_${i}`}
-                isActive={
-                  !loop
-                    ? currentSlide === idx
-                    : currentSlide + perView <= numberOfSlides
-                      ? idx >= currentSlide && idx < currentSlide + perView
-                      : idx >= currentSlide ||
-                        currentSlide + perView - numberOfSlides - 1 >= idx
-                }
-                onClick={() => {
-                  instanceRef.current?.moveToIdx(idx);
-                }}
-                {...dots}
-                wrapperBgColour={bgColour ?? 'white'}
-              />
-            );
-          })}
+          {children}
         </div>
+      </CarouselContext.Provider>
+    );
+  },
+);
+
+const CarouselContent = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ children, className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={clsx(
+        'navigation-wrapper flex w-full justify-between gap-4',
+        className,
       )}
-    </ComponentWrapper>
+      {...props}
+    >
+      {children}
+    </div>
   );
-}
+});
 
-function Arrow(props: ArrowProps) {
+const CarouselSlides = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement> & { rightArrow?: boolean }
+>(({ className, children, rightArrow = false, ...props }) => {
+  const { sliderRef } = useContext(CarouselContext) || {};
   return (
-    <div className="my-auto">
-      <a onClick={props?.onClick}>
-        <Icon
-          icon={
-            props?.left
-              ? (faChevronLeft as IconProp)
-              : (faChevronRight as IconProp)
-          }
-          size="3x"
-          colour={props?.colour}
-        />
-      </a>
+    <div
+      ref={sliderRef}
+      className={clsx('keen-slider w-full pb-4', className)}
+      {...props}
+    >
+      {children}
     </div>
   );
-}
+});
 
-function Dot(props: DotProps) {
-  const bg = props?.wrapperBgColour ?? 'white';
+const CarouselArrow = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement> & ArrowProps
+>(({ className, children, rightArrow = false, ...props }, ref) => {
+  const { instanceRef } = useContext(CarouselContext) || {};
   return (
-    <button
-      className={classNames('border-transparent py-2')}
-      type="button"
-      onClick={props?.onClick}
-      aria-label={`carousel-button${props.id ? `-${props.id}` : ''}`}
+    <div
+      ref={ref}
+      className={clsx(
+        'my-auto text-carousel-arrow-default hover:cursor-pointer hover:text-carousel-arrow-hover',
+        className,
+      )}
+      onClick={(e: any) => {
+        rightArrow
+          ? e.stopPropagation() !== undefined || instanceRef.current?.next()
+          : e.stopPropagation() !== undefined || instanceRef.current?.prev();
+      }}
+      {...props}
     >
-      <Icon
-        icon={faCircle as IconProp}
-        size="2x"
-        colour={props?.isActive ? props.hoverColour : props.colour}
-      />
-    </button>
+      <a>
+        <Icon icon={rightArrow ? faChevronRight : faChevronLeft} size="3x" />
+      </a>
+    </div>
   );
-}
+});
+
+const CarouselDots = forwardRef<
+  HTMLButtonElement,
+  HTMLAttributes<HTMLButtonElement> & DotProps
+>(({ className, children, onClick, ...props }, ref) => {
+  const {
+    instanceRef,
+    loop,
+    currentSlide = 1,
+    perView = 1,
+  } = useContext(CarouselContext) || {};
+  const length = instanceRef?.current?.track?.details?.slides?.length;
+  return (
+    <div className="flex justify-center">
+      {[...Array(length).keys()].map((idx) => {
+        const numberOfSlides =
+          instanceRef?.current?.track?.details?.slides?.length ?? 1;
+
+        const isActive = !loop
+          ? currentSlide === idx
+          : currentSlide + perView <= numberOfSlides
+            ? idx >= currentSlide && idx < currentSlide + perView
+            : idx >= currentSlide ||
+              currentSlide + perView - numberOfSlides - 1 >= idx;
+
+        return (
+          <button
+            ref={ref}
+            type="button"
+            onClick={() => {
+              instanceRef.current?.moveToIdx(idx);
+            }}
+            aria-label={`carousel-button${props.id ? `-${props.id}` : ''}`}
+          >
+            <Icon
+              className={clsx(
+                'hover:text-carousel-dots-hover',
+                isActive
+                  ? 'text-carousel-dots-active'
+                  : 'text-carousel-dots-default',
+              )}
+              icon={faCircle}
+              size="2x"
+            />
+          </button>
+        );
+      })}
+    </div>
+  );
+});
+
+CarouselComponent.displayName = 'Carousel';
+CarouselContent.displayName = 'Carousel.Content';
+CarouselArrow.displayName = 'Carousel.Arrow';
+CarouselDots.displayName = 'Carousel.Dots';
+CarouselSlides.displayName = 'Carousel.Slides';
+
+const Carousel = Object.assign(CarouselComponent, {
+  Content: CarouselContent,
+  Arrow: CarouselArrow,
+  Dots: CarouselDots,
+  Slides: CarouselSlides,
+});
+
+export { Carousel };

package/src/components/Carousel/utils.ts

@@ -0,0 +1,53 @@
+export function WheelControls(slider: any): void {
+  let touchTimeout: any;
+  let position: any;
+  let wheelActive: boolean;
+
+  function dispatch(e: any, name: string): void {
+    position.x -= e.deltaX;
+    position.y -= e.deltaY;
+    slider.container.dispatchEvent(
+      new CustomEvent(name, {
+        detail: {
+          x: position.x,
+          y: position.y,
+        },
+      }),
+    );
+  }
+
+  function wheelStart(e: any): void {
+    position = {
+      x: e.pageX,
+      y: e.pageY,
+    };
+    dispatch(e, 'ksDragStart');
+  }
+
+  function wheel(e: any): void {
+    dispatch(e, 'ksDrag');
+  }
+
+  function wheelEnd(e: any): void {
+    dispatch(e, 'ksDragEnd');
+  }
+
+  function eventWheel(e: any): void {
+    if (!wheelActive) {
+      wheelStart(e);
+      wheelActive = true;
+    }
+    wheel(e);
+    clearTimeout(touchTimeout);
+    touchTimeout = setTimeout(() => {
+      wheelActive = false;
+      wheelEnd(e);
+    }, 50);
+  }
+
+  slider.on('created', () => {
+    slider.container.addEventListener('wheel', eventWheel, {
+      passive: true,
+    });
+  });
+}