From 23c8c85cf366d9d6036a37f502edee7c2cd8e267 Mon Sep 17 00:00:00 2001 From: Aleksandar Ristic Date: Thu, 4 Apr 2024 17:12:55 +0200 Subject: [PATCH] chore: remove old slider component --- src/core/SliderOld/Slider.stories.tsx | 45 ----------- src/core/SliderOld/component.css | 6 -- src/core/SliderOld/component.js | 107 ------------------------ src/core/SliderOld/component.tsx | 112 -------------------------- 4 files changed, 270 deletions(-) delete mode 100644 src/core/SliderOld/Slider.stories.tsx delete mode 100644 src/core/SliderOld/component.css delete mode 100644 src/core/SliderOld/component.js delete mode 100644 src/core/SliderOld/component.tsx diff --git a/src/core/SliderOld/Slider.stories.tsx b/src/core/SliderOld/Slider.stories.tsx deleted file mode 100644 index fd7d1967d..000000000 --- a/src/core/SliderOld/Slider.stories.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React, { ReactNode } from "react"; -import Slider from "./component.tsx"; - -export default { - title: "Components/Slider-Old", - component: Slider, - parameters: { - layout: "fullscreen", - }, - tags: ["autodocs"], -}; - -const Slide = ({ children }: { children: ReactNode }) => ( -
-

{children}

-
-); - -const slides = [ - - Powers live chat, updates, analytics, and composition for millions of users. - , - - Powers virtual venues for millions of event attendees around the world. - , - - Provides 5 million daily users with live financial commentary and stock - tickers. - , - Monitors live car performance data across the USA., -]; - -export const SliderOnAllBreakpoints = { - args: { - slides, - }, -}; - -export const SliderOnSmallBreakpointOnly = { - args: { - slides, - classes: `sm:grid-cols-${slides.length / 2} md:grid-cols-${slides.length}`, - mqEnableThreshold: () => !window.matchMedia("(min-width: 48rem)").matches, - }, -}; diff --git a/src/core/SliderOld/component.css b/src/core/SliderOld/component.css deleted file mode 100644 index 48ea9f486..000000000 --- a/src/core/SliderOld/component.css +++ /dev/null @@ -1,6 +0,0 @@ -.ui-slider-marker { - font-size: 0.5rem; - top: -1px; - - @apply leading-none px-4 relative; -} diff --git a/src/core/SliderOld/component.js b/src/core/SliderOld/component.js deleted file mode 100644 index 473eb5f28..000000000 --- a/src/core/SliderOld/component.js +++ /dev/null @@ -1,107 +0,0 @@ -import "./component.css"; - -import throttle from "lodash.throttle"; - -import { queryId, queryIdAll } from "../dom-query"; - -const mdBreakpoint = () => window.matchMedia("(min-width: 48rem)").matches; -const DRAG_BUFFER = 20; - -const init = (slidesContainer) => { - const transformContainer = queryId("slider-strip", slidesContainer); - const slides = Array.from(queryIdAll("slider-slide", slidesContainer)); - const slideLeftChevron = queryId("slider-previous", slidesContainer); - const slideRightChevron = queryId("slider-next", slidesContainer); - const slideMarkers = Array.from(queryIdAll("slider-marker", slidesContainer)); - const sliderControls = queryId("slider-controls", slidesContainer); - - sliderControls.classList.replace("hidden", "flex"); - const slidesLength = slides.length; - - const slidesWidth = slidesContainer.getBoundingClientRect().width; - const { width: slideWidth, left: slideLeftDistance } = - slides[0].getBoundingClientRect(); - const { left: slideLeftDistanceSecond } = slides[1].getBoundingClientRect(); - const slideGap = slideLeftDistanceSecond - slideLeftDistance - slideWidth; - const adjustment = (slidesWidth - slideWidth) / 2; - - let currentIndex = 0; - let touchStartX = 0; - - const calculateTransform = (index) => - index * -slideWidth + adjustment + index * -slideGap; - - const updateSlide = (index) => - (transformContainer.style.transform = `translateX(${calculateTransform( - index - )}px)`); - - const updateMarkers = (index) => { - slideMarkers.forEach((marker) => - marker.classList.remove("text-active-orange") - ); - slideMarkers[index].classList.remove("text-cool-black"); - slideMarkers[index].classList.add("text-active-orange"); - }; - - const slideLeft = () => { - currentIndex = currentIndex - 1 <= 0 ? 0 : currentIndex - 1; - updateSlide(currentIndex); - updateMarkers(currentIndex); - }; - - const slideRight = () => { - currentIndex = - currentIndex + 1 >= slidesLength ? currentIndex : currentIndex + 1; - updateSlide(currentIndex); - updateMarkers(currentIndex); - }; - - updateSlide(0); - updateMarkers(0); - - slideLeftChevron.addEventListener("click", slideLeft); - - transformContainer.addEventListener("touchstart", (e) => { - touchStartX = e.touches[0]?.clientX; - }); - - transformContainer.addEventListener("touchend", (e) => { - const distance = e.changedTouches[0]?.clientX - touchStartX; - - // Prevent sliding on clicks - if (Math.abs(distance) < DRAG_BUFFER) return; - - const direction = distance > 0 ? slideLeft : slideRight; - direction(); - }); - - slideRightChevron.addEventListener("click", slideRight); - - return () => { - transformContainer.style.transform = null; - sliderControls.classList.replace("flex", "hidden"); - }; -}; - -const Slider = ({ container, mqEnableThreshold }) => { - if (!container) return; - - const breakpointCheck = mqEnableThreshold || (() => !mdBreakpoint()); - - let unmount = () => {}; - if (breakpointCheck()) unmount = init(container); - - window.addEventListener( - "resize", - throttle(() => { - if (breakpointCheck()) { - unmount = init(container); - } else { - unmount(); - } - }, 100) - ); -}; - -export default Slider; diff --git a/src/core/SliderOld/component.tsx b/src/core/SliderOld/component.tsx deleted file mode 100644 index b03dc864b..000000000 --- a/src/core/SliderOld/component.tsx +++ /dev/null @@ -1,112 +0,0 @@ -import React, { CSSProperties, ReactNode, useEffect, useRef } from "react"; - -import Icon from "../Icon/component.tsx"; -import SliderScripts from "./component.js"; -import "./component.css"; - -type SliderProps = { - slides?: ReactNode[]; - classes?: string; - slideClasses?: string; - slideMinWidth?: string; - slideMaxWidth?: string; - mqEnableThreshold?: () => boolean; - - container?: HTMLDivElement | null; -}; - -const Slider = ({ - slides = [], - classes = "", - slideClasses = "", - slideMinWidth = "16.875rem", - slideMaxWidth = "1fr", - mqEnableThreshold = () => true, - ...props -}: SliderProps) => { - const containerRef = useRef(null); - - useEffect(() => { - SliderScripts({ - container: containerRef.current, - mqEnableThreshold, - }); - }, []); - - if (slides.length === 0) return; - - return ( -
-
    - {slides.map((slide, i) => ( -
  1. - {slide} -
    2. - ))} -
- -
- - -
    - {slides.map((_, i) => ( -
  • - - ⬤ - {" "} - {/* ⬤ */} -
    • - ))} -
- - -
-
- ); -}; - -export default Slider;