trepur_components 2.3.6 → 2.3.8

package/lib/components/Carousel/index.d.ts

@@ -0,0 +1,77 @@
+import { KeenSliderInstance, KeenSliderHooks, KeenSliderOptions } from 'keen-slider/react';
+import { Colours } from '../../utils/controls';
+import { default as React } from '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;
+}
+export declare const Carousel: React.FC<Props>;
+export {};

package/lib/components/Carousel/index.js

@@ -0,0 +1,248 @@
+import { jsxs as K, jsx as c } from "react/jsx-runtime";
+import { useState as W } from "react";
+import { ComponentWrapper as ke } from "../ComponentWrapper/index.js";
+import { Icon as z } from "../Icon/index.js";
+import { faChevronLeft as ye, faChevronRight as ge, faCircle as be } from "@fortawesome/fontawesome-free-solid";
+import k from "classnames";
+import "../../node_modules/keen-slider/keen-slider.min.css.js";
+import { useKeenSlider as xe } from "../../node_modules/keen-slider/react.js";
+const Be = ({
+  id: e,
+  className: B,
+  slideWrapperClassName: I,
+  title: P,
+  description: X,
+  bgColour: y,
+  breakpoints: Y,
+  defaultAnimation: O,
+  disabled: _,
+  drag: q,
+  dragSpeed: F,
+  initial: G,
+  loop: g = !0,
+  mode: H = "snap",
+  range: J,
+  renderMode: M,
+  rtl: Q,
+  rubberband: U,
+  slides: b,
+  vertical: Z,
+  animationStarted: w,
+  animationStopped: R,
+  animationEnded: V,
+  created: Se,
+  destroyed: p,
+  detailsChanged: ee,
+  dragged: te,
+  dragStarted: ne,
+  dragChecked: ie,
+  dragEnded: le,
+  beforeOptionsChanged: ce,
+  optionsChanged: ae,
+  slideChanged: De,
+  updated: ue,
+  perView: m = 1,
+  spacing: re,
+  number: de,
+  origin: oe,
+  arrows: a,
+  dots: h
+}) => {
+  var N, S, D, A, E, T, j, L;
+  const x = B, [u, me] = W(0), [C, he] = W(!1);
+  function fe(t) {
+    let l, r, d;
+    function o(i, Ce) {
+      r.x -= i.deltaX, r.y -= i.deltaY, t.container.dispatchEvent(
+        new CustomEvent(Ce, {
+          detail: {
+            x: r.x,
+            y: r.y
+          }
+        })
+      );
+    }
+    function f(i) {
+      r = {
+        x: i.pageX,
+        y: i.pageY
+      }, o(i, "ksDragStart");
+    }
+    function v(i) {
+      o(i, "ksDrag");
+    }
+    function s(i) {
+      o(i, "ksDragEnd");
+    }
+    function se(i) {
+      d || (f(i), d = !0), v(i), clearTimeout(l), l = setTimeout(() => {
+        d = !1, s(i);
+      }, 50);
+    }
+    t.on("created", () => {
+      t.container.addEventListener("wheel", se, {
+        passive: !0
+      });
+    });
+  }
+  const [ve, n] = xe(
+    {
+      initial: G,
+      breakpoints: Y,
+      defaultAnimation: O,
+      disabled: _,
+      drag: q,
+      dragSpeed: F,
+      loop: g,
+      mode: H,
+      range: J,
+      renderMode: M,
+      rtl: Q,
+      rubberband: U,
+      vertical: Z,
+      slideChanged(t) {
+        me(t.track.details.rel);
+      },
+      // slideChanged: slideChanged,
+      created() {
+        he(!0);
+      },
+      // created: created,
+      animationStarted: w,
+      animationStopped: R,
+      animationEnded: V,
+      destroyed: p,
+      detailsChanged: ee,
+      dragged: te,
+      dragStarted: ne,
+      dragChecked: ie,
+      dragEnded: le,
+      beforeOptionsChanged: ce,
+      optionsChanged: ae,
+      updated: ue,
+      slides: {
+        perView: m,
+        spacing: re,
+        origin: oe,
+        number: de
+      }
+    },
+    [fe]
+  );
+  return /* @__PURE__ */ K(
+    ke,
+    {
+      id: e,
+      className: x,
+      title: P,
+      description: X,
+      bgColour: y,
+      children: [
+        /* @__PURE__ */ K(
+          "div",
+          {
+            onKeyDown: (t) => {
+              var l;
+              t.key === "Tab" && ((l = n.current) == null || l.next());
+            },
+            className: k(
+              x,
+              (a == null ? void 0 : a.visible) === !0 && "flex justify-between",
+              "navigation-wrapper w-full"
+            ),
+            children: [
+              (a == null ? void 0 : a.visible) === !0 && C && n.current !== void 0 && /* @__PURE__ */ c("div", { className: "my-auto", children: /* @__PURE__ */ c(
+                $,
+                {
+                  left: !0,
+                  onClick: (t) => {
+                    var l;
+                    t.stopPropagation() !== void 0 || ((l = n.current) == null || l.prev());
+                  },
+                  disabled: u === 0,
+                  ...a
+                }
+              ) }),
+              /* @__PURE__ */ c(
+                "div",
+                {
+                  ref: ve,
+                  className: k(
+                    I,
+                    "keen-slider w-full pb-12 pt-4"
+                  ),
+                  children: b != null && b
+                }
+              ),
+              (a == null ? void 0 : a.visible) === !0 && C && n.current !== void 0 && /* @__PURE__ */ c("div", { className: "my-auto", children: /* @__PURE__ */ c(
+                $,
+                {
+                  right: !0,
+                  onClick: (t) => {
+                    var l;
+                    t.stopPropagation() !== void 0 || ((l = n.current) == null || l.next());
+                  },
+                  disabled: u === ((A = (D = (S = (N = n == null ? void 0 : n.current) == null ? void 0 : N.track) == null ? void 0 : S.details) == null ? void 0 : D.slides) == null ? void 0 : A.length),
+                  ...a
+                }
+              ) })
+            ]
+          }
+        ),
+        (h == null ? void 0 : h.visible) === !0 && C && n.current != null && /* @__PURE__ */ c("div", { className: "my-2 flex justify-center", children: [
+          ...Array(
+            (L = (j = (T = (E = n == null ? void 0 : n.current) == null ? void 0 : E.track) == null ? void 0 : T.details) == null ? void 0 : j.slides) == null ? void 0 : L.length
+          ).keys()
+        ].map((t, l) => {
+          var d, o, f, v;
+          const r = ((v = (f = (o = (d = n == null ? void 0 : n.current) == null ? void 0 : d.track) == null ? void 0 : o.details) == null ? void 0 : f.slides) == null ? void 0 : v.length) ?? 1;
+          return /* @__PURE__ */ c(
+            Ne,
+            {
+              isActive: g ? u + m <= r ? t >= u && t < u + m : t >= u || u + m - r - 1 >= t : u === t,
+              onClick: () => {
+                var s;
+                (s = n.current) == null || s.moveToIdx(t);
+              },
+              ...h,
+              wrapperBgColour: y ?? "white"
+            },
+            `dot_${l}`
+          );
+        }) })
+      ]
+    }
+  );
+};
+function $(e) {
+  return /* @__PURE__ */ c("div", { className: "my-auto", children: /* @__PURE__ */ c("a", { onClick: e == null ? void 0 : e.onClick, children: /* @__PURE__ */ c(
+    z,
+    {
+      icon: e != null && e.left ? ye : ge,
+      size: "3x",
+      colour: e == null ? void 0 : e.colour
+    }
+  ) }) });
+}
+function Ne(e) {
+  return e == null || e.wrapperBgColour, /* @__PURE__ */ c(
+    "button",
+    {
+      className: k("border-transparent py-2"),
+      type: "button",
+      onClick: e == null ? void 0 : e.onClick,
+      "aria-label": `carousel-button${e.id ? `-${e.id}` : ""}`,
+      children: /* @__PURE__ */ c(
+        z,
+        {
+          icon: be,
+          size: "2x",
+          colour: e != null && e.isActive ? e.hoverColour : e.colour
+        }
+      )
+    }
+  );
+}
+export {
+  Be as Carousel
+};