trepur_components 2.3.2 → 2.3.4

package/archive/Carousel/index.tsx

@@ -0,0 +1,388 @@
+import React, { useState } from 'react';
+
+import ComponentWrapper from '@components/ComponentWrapper';
+import Icon from '@components/Icon';
+import { type Colours } from '@utils/controls';
+import classNames from 'classnames';
+import 'keen-slider/keen-slider.min.css';
+import {
+  useKeenSlider,
+  type KeenSliderInstance,
+  type KeenSliderHooks,
+  type KeenSliderOptions,
+} from 'keen-slider/react';
+
+
+
+interface ArrowProps {
+  visible?: boolean;
+  left?: boolean;
+  right?: boolean;
+  disabled?: boolean;
+  onClick?: any;
+  colour?: Colours;
+  bgColour?: Colours;
+  hoverColour?: Colours;
+  hoverBgColour?: Colours;
+}
+
+interface DotProps {
+  id?: string;
+  isActive?: boolean;
+  visible?: boolean;
+  onClick?: any;
+  colour?: Colours;
+  bgColour?: Colours;
+  hoverColour?: Colours;
+  hoverBgColour?: Colours;
+
+  wrapperBgColour: Colours;
+}
+
+export interface Props {
+  id?: string;
+  className?: string;
+  slideWrapperClassName?: string;
+  title?: string;
+  description?: string;
+  bgColour?: Colours;
+  breakpoints?: Record<
+    string,
+    Omit<KeenSliderOptions<{}, {}, KeenSliderHooks>, 'breakpoints'>
+  >;
+  defaultAnimation?: { duration?: number; easing?: (t: number) => number };
+  disabled: boolean;
+  drag?: boolean;
+  dragSpeed?: number;
+  initial?: number;
+  loop?: boolean;
+  mode?: 'snap' | 'free' | 'free-snap';
+  range?: { align?: boolean; min?: number; max?: number };
+  renderMode?: 'precision' | 'performance' | 'custom';
+  rtl?: boolean;
+  rubberband?: boolean;
+  slides?: any[];
+  vertical?: boolean;
+  animationStarted?: (
+    slider: KeenSliderInstance<{}, {}, KeenSliderHooks>,
+  ) => void;
+  animationStopped?: (
+    slider: KeenSliderInstance<{}, {}, KeenSliderHooks>,
+  ) => void;
+  animationEnded?: (
+    slider: KeenSliderInstance<{}, {}, KeenSliderHooks>,
+  ) => void;
+  created?: (slider: KeenSliderInstance<{}, {}, KeenSliderHooks>) => void;
+  destroyed?: (slider: KeenSliderInstance<{}, {}, KeenSliderHooks>) => void;
+  detailsChanged?: (
+    slider: KeenSliderInstance<{}, {}, KeenSliderHooks>,
+  ) => void;
+  dragged?: (slider: KeenSliderInstance<{}, {}, KeenSliderHooks>) => void;
+  dragStarted?: (slider: KeenSliderInstance<{}, {}, KeenSliderHooks>) => void;
+  dragChecked?: (slider: KeenSliderInstance<{}, {}, KeenSliderHooks>) => void;
+  dragEnded?: (slider: KeenSliderInstance<{}, {}, KeenSliderHooks>) => void;
+  beforeOptionsChanged?: (
+    slider: KeenSliderInstance<{}, {}, KeenSliderHooks>,
+  ) => void;
+  optionsChanged?: (
+    slider: KeenSliderInstance<{}, {}, KeenSliderHooks>,
+  ) => void;
+  slideChanged?: boolean;
+  updated?: (slider: KeenSliderInstance<{}, {}, KeenSliderHooks>) => void;
+  perView?: number;
+  spacing?: number;
+  number?: number;
+  origin?: number | 'auto' | 'center';
+  arrows?: ArrowProps;
+  dots?: DotProps;
+}
+
+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 = classNames(className, 'theme-local');
+  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 [sliderRef, instanceRef] = useKeenSlider<HTMLDivElement>(
+    {
+      initial,
+      breakpoints,
+      defaultAnimation,
+      disabled,
+      drag,
+      dragSpeed,
+      loop,
+      mode,
+      range,
+      renderMode,
+      rtl,
+      rubberband,
+      vertical,
+      slideChanged(slider) {
+        setCurrentSlide(slider.track.details.rel);
+      },
+      // slideChanged: slideChanged,
+      created() {
+        setLoaded(true);
+      },
+      // created: created,
+      animationStarted,
+      animationStopped,
+      animationEnded,
+      destroyed,
+      detailsChanged,
+      dragged,
+      dragStarted,
+      dragChecked,
+      dragEnded,
+      beforeOptionsChanged,
+      optionsChanged,
+      updated,
+      slides: {
+        perView,
+        spacing,
+        origin,
+        number,
+      },
+    },
+    [WheelControls],
+  );
+
+  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 && style.visibleArrows,
+          style.classList,
+          'navigation-wrapper',
+        )}
+      >
+        {arrows?.visible === true &&
+          loaded &&
+          instanceRef.current !== undefined && (
+            <div className={style.arrowWrapper}>
+              <Arrow
+                left
+                onClick={(e: any) => {
+                  e.stopPropagation() !== undefined ||
+                    instanceRef.current?.prev();
+                }}
+                disabled={currentSlide === 0}
+                {...arrows}
+              />
+            </div>
+          )}
+        <div
+          ref={sliderRef}
+          className={classNames(
+            style.slideWrapper,
+            slideWrapperClassName,
+            'keen-slider',
+          )}
+        >
+          {slides != null && slides}
+        </div>
+        {arrows?.visible === true &&
+          loaded &&
+          instanceRef.current !== undefined && (
+            <div className={style.arrowWrapper}>
+              <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={style.dotWrapper}>
+          {[
+            ...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'}
+              />
+            );
+          })}
+        </div>
+      )}
+    </ComponentWrapper>
+  );
+};
+
+function Arrow(props: ArrowProps): JSX.Element {
+  return (
+    <div className={style.arrowWrapper}>
+      <a onClick={props?.onClick}>
+        <Icon
+          type={props?.left ? 'chevron-left' : 'chevron-right'}
+          className={style.arrowIconClassList}
+          size={3}
+          rounded
+          bgColour={props?.bgColour}
+          colour={props?.colour}
+          hoverBgColour={props?.hoverBgColour}
+          hoverColour={props?.hoverColour}
+        />
+      </a>
+    </div>
+  );
+}
+
+function Dot(props: DotProps): JSX.Element {
+  const bg = props?.wrapperBgColour ?? 'white';
+  return (
+    <button
+      className={classNames(style.dotButtonClassList, style[bg])}
+      type="button"
+      onClick={props?.onClick}
+      aria-label={`carousel-button${props.id ? `-${props.id}` : ''}`}
+    >
+      <Icon
+        type="circle"
+        className={style.dotIconClassList}
+        size={2}
+        rounded
+        bgColour={props?.isActive ? props.hoverBgColour : props.bgColour}
+        colour={props?.isActive ? props.hoverColour : props.colour}
+        hoverBgColour={props?.hoverBgColour}
+        hoverColour={props?.hoverColour}
+      />
+    </button>
+  );
+}
+
+export default Carousel;

package/archive/Carousel/style.module.css

@@ -0,0 +1,99 @@
+.classList {
+  @apply w-full;
+}
+
+.visibleArrows {
+  @apply flex justify-between;
+}
+
+.slideWrapper {
+  @apply w-full pb-12 pt-4;
+}
+
+.dotWrapper {
+  @apply my-2 flex justify-center;
+}
+
+.dotButtonClassList {
+  @apply border-transparent py-2;
+}
+
+.dotButtonClassList:focus {
+  @apply border border-2;
+}
+
+.dotIconClassList {
+  @apply mx-1;
+}
+
+.dotIconClassList:hover {
+  @apply cursor-pointer;
+}
+
+.arrowWrapper {
+  @apply my-auto;
+}
+
+.arrowIconClassList {
+  @apply mx-auto;
+}
+
+.arrowIconClassList:hover {
+  @apply cursor-pointer;
+}
+
+.primary {
+  @apply border-white;
+}
+
+.white {
+  @apply border-primary;
+}
+
+.grey {
+  @apply border-primary;
+}
+
+.gold {
+  @apply border-primary;
+}
+
+.facebook {
+  @apply border-white;
+}
+
+.linkedin {
+  @apply border-white;
+}
+
+.email {
+  @apply border-white;
+}
+
+.instagram {
+  @apply border-primary;
+}
+
+.github {
+  @apply border-white;
+}
+
+.interactive-facebook {
+  @apply border-primary;
+}
+
+.interactive-email {
+  @apply border-primary;
+}
+
+.interactive-linkedin {
+  @apply border-primary;
+}
+
+.interactive-instagram {
+  @apply border-primary;
+}
+
+.interactive-github {
+  @apply border-primary;
+}