@geoinsight/react-components 1.1.0 → 1.1.2

package/dist/esm/index.js

@@ -5,7 +5,8 @@ import { TfiAngleDown, TfiAngleUp } from 'react-icons/tfi';
 import { BsCheckCircleFill, BsXCircleFill } from 'react-icons/bs';
 import { useForm, FormProvider, useFormContext, Controller } from 'react-hook-form';
 import { TbArrowsDiagonal2 } from 'react-icons/tb';
-import { IoClose } from 'react-icons/io5';
+import { IoClose, IoPause, IoPlay, IoStop } from 'react-icons/io5';
+import { RiMapPinTimeFill, RiMapPinTimeLine } from 'react-icons/ri';
 
 const generateId = () => {
     return `id-${Math.random().toString(36).slice(2, 11)}`;
@@ -290,6 +291,241 @@ function Modal({ className, modalref, children, title, subtitle, footer, hasOver
     return (jsxs(Fragment, { children: [hasOverlay && jsx("div", { className: "modal-overlay" }), jsxs("div", { ref: modalref, className: clsx("modal", className), ...rest, children: [hasCloseButton && (jsx(Button, { mode: "secondary", className: "modal__close", size: "small", onClick: handleClose, children: jsx(IoClose, {}) })), jsxs("div", { className: "modal__content", children: [title && (jsxs("div", { className: "modal__header", children: [jsx("h3", { children: title }), jsx("h6", { children: subtitle })] })), jsx("div", { className: "modal__children", children: children }), footer && jsx("div", { className: "modal__footer", children: footer })] })] })] }));
 }
 
+function usePositions(panelRef, initial) {
+    const [allPositions, setAllPositions] = useState(undefined);
+    const [pixelPosition, setPixelPosition] = useState(undefined);
+    const [thumbPosition, setThumbPosition] = useState(undefined);
+    // find positions of all values
+    useEffect(() => {
+        if (panelRef?.current) {
+            const current = panelRef.current;
+            if (current) {
+                const valuesRef = Array.from(current.getElementsByClassName("range__content"));
+                const parentBounds = current.getBoundingClientRect();
+                setAllPositions(valuesRef.map((values) => {
+                    const childBounds = values.getBoundingClientRect();
+                    return childBounds.right - parentBounds.x;
+                }));
+            }
+        }
+    }, []);
+    // initial position
+    useEffect(() => {
+        if (allPositions) {
+            setPixelPosition(`${allPositions[initial]}px`);
+            setThumbPosition(`${allPositions[initial] -
+                (allPositions[0] / 2 + getThumbBounds().width / 2)}px`);
+        }
+    }, [allPositions]);
+    return {
+        panelRef,
+        allPositions,
+        setAllPositions,
+        pixelPosition,
+        setPixelPosition,
+        thumbPosition,
+        setThumbPosition,
+    };
+}
+function getThumbBounds() {
+    const thumb = document.getElementsByClassName("range__thumb")[0];
+    return thumb.getBoundingClientRect();
+}
+function useTimer({ allPositions, indexPosition, handlePosition, handleOverContent, values, }) {
+    const timeoutRef = useRef(null);
+    const [isPlay, setIsPlay] = useState(false);
+    // timer
+    useEffect(() => {
+        resetTimeout();
+        if (isPlay) {
+            if (allPositions) {
+                timeoutRef.current = setTimeout(() => {
+                    const newThumbPosition = allPositions[indexPosition] +
+                        allPositions[0] / 2 -
+                        getThumbBounds().width / 2;
+                    handlePosition(allPositions[indexPosition + 1], newThumbPosition, indexPosition + 1, true);
+                    handleOverContent(values[indexPosition + 1]);
+                }, 500);
+                if (indexPosition === allPositions.length - 1) {
+                    setIsPlay(false);
+                }
+            }
+        }
+        return () => {
+            resetTimeout();
+        };
+    }, [isPlay, indexPosition]);
+    const resetTimeout = () => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+    };
+    const handlePlay = () => {
+        setIsPlay(!isPlay);
+    };
+    const handleStop = () => {
+        if (allPositions) {
+            handlePosition(allPositions[0], allPositions[0] / 2 - getThumbBounds().width / 2, 0, false);
+            setIsPlay(false);
+        }
+    };
+    return { isPlay, setIsPlay, handlePlay, handleStop };
+}
+function useThumb({ allPositions, panelRef, handlePosition, handleOverContent, values, }) {
+    // Add drag
+    const startDragging = (event) => {
+        if (allPositions && panelRef?.current) {
+            const current = panelRef.current;
+            const panelBounds = current?.getBoundingClientRect();
+            const x = event.pageX - panelBounds.left;
+            const absX = Math.abs(x);
+            if (x >= 0 && x <= allPositions[allPositions.length - 1]) {
+                const desiredPosition = allPositions.reduce((prev, curr) => Math.abs(prev - absX) < Math.abs(curr - absX) ? prev : curr);
+                const index = allPositions.indexOf(desiredPosition);
+                const newThumbPosition = index === 0
+                    ? allPositions[index] -
+                        allPositions[0] / 2 -
+                        getThumbBounds().width / 2
+                    : allPositions[index - 1] +
+                        allPositions[0] / 2 -
+                        getThumbBounds().width / 2;
+                handlePosition(desiredPosition, newThumbPosition, index, true);
+                handleOverContent(values[index]);
+            }
+        }
+    };
+    const stopDragging = () => {
+        window.removeEventListener("mousemove", startDragging, false);
+        window.removeEventListener("mouseup", stopDragging, false);
+    };
+    const handleDownThumb = () => {
+        window.addEventListener("mousemove", startDragging, false);
+        window.addEventListener("mouseup", stopDragging, false);
+    };
+    return { handleDownThumb };
+}
+
+const ThemeContext = createContext(undefined);
+function ThemeProvider({ children, dataTheme: dataThemeProp, dataPalette: dataPaletteProp = "water", }) {
+    const [dataTheme, setDataTheme] = useState();
+    const [dataPalette, setDataPalette] = useState();
+    useEffect(() => {
+        if (dataPaletteProp) {
+            switchDataPalette(dataPaletteProp);
+        }
+    }, [dataPaletteProp]);
+    useEffect(() => {
+        if (dataThemeProp) {
+            switchDataTheme(dataThemeProp);
+        }
+    }, [dataThemeProp]);
+    useEffect(() => {
+        if (window.matchMedia) {
+            if (localStorage.getItem("data-theme")) {
+                document.documentElement.setAttribute("data-theme", localStorage.getItem("data-theme"));
+                setDataTheme(localStorage.getItem("data-theme"));
+            }
+            else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+                document.documentElement.setAttribute("data-theme", "dark");
+                setDataTheme("dark");
+            }
+        }
+    }, []);
+    const switchDataTheme = (mode) => {
+        document.documentElement.setAttribute("data-theme", mode);
+        setDataTheme(mode);
+        localStorage.setItem("data-theme", mode);
+    };
+    const switchDataPalette = (mode) => {
+        document.documentElement.setAttribute("data-palette", mode);
+        setDataPalette(mode);
+        localStorage.setItem("palette-theme", mode);
+    };
+    return (jsx(ThemeContext.Provider, { value: { dataTheme, switchDataTheme, dataPalette, switchDataPalette }, children: children }));
+}
+function useTheme() {
+    const context = useContext(ThemeContext);
+    if (context === undefined) {
+        throw new Error("useTheme must be used within a ThemeProvider");
+    }
+    return context;
+}
+
+function RangeThumb({ thumbPosition, handleOverContent, handleDownThumb }) {
+    const { dataTheme } = useTheme();
+    return (jsx(Button, { mode: "icon", className: "range__thumb", size: "small", style: {
+            left: `${thumbPosition}`,
+        }, onMouseOver: () => handleOverContent(thumbPosition), onMouseDown: handleDownThumb, children: dataTheme === "dark" ? (jsx(RiMapPinTimeFill, { size: "1.5rem" })) : (jsx(RiMapPinTimeLine, { size: "1.5rem" })) }));
+}
+
+function RangeContent({ period, values, allPositions, handlePosition, handleOverContent, handleOutContent, over, }) {
+    const handleClickRange = (index) => {
+        if (allPositions) {
+            const newThumbPosition = index === 0
+                ? allPositions[index] -
+                    allPositions[0] / 2 -
+                    getThumbBounds().width / 2
+                : allPositions[index - 1] +
+                    allPositions[0] / 2 -
+                    getThumbBounds().width / 2;
+            handlePosition(allPositions[index], newThumbPosition, index, true);
+        }
+    };
+    return period
+        ? values.map((value, index) => (jsx("div", { className: "range__content range__content__period", onClick: () => handleClickRange(index), onMouseOver: () => handleOverContent(value), onMouseOut: () => handleOutContent(), children: index % period === 0 ? (jsxs(Fragment, { children: [jsx("div", { className: "range__tick range__tick__large" }), jsx("div", { className: clsx("range__value", "range__value__period", {
+                            "range__value--over": value === over,
+                        }), children: value })] })) : (jsxs(Fragment, { children: [jsx("div", { className: "range__tick range__tick__small" }), value === over && (jsx("div", { className: clsx("range__value", "range__value__period", {
+                            "range__value--over": value === over,
+                        }), children: value }))] })) })))
+        : values.map((value, index) => (jsxs("div", { className: "range__content", onClick: () => handleClickRange(index), children: [jsx("div", { className: "range__tick range__tick__large" }), jsx("div", { className: "range__value", children: value })] })));
+}
+
+function RangeControls({ indexPosition, isPlay, handlePlay, handleStop, }) {
+    return (jsxs(Fragment, { children: [jsx(Button, { mode: "icon", size: "small", className: "range__play", onClick: handlePlay, children: isPlay ? (jsx(IoPause, { color: "var(--color-primary-base)", size: "2rem" })) : (jsx(IoPlay, { color: "var(--color-primary-base)", size: "2rem" })) }), jsx(Button, { mode: "icon", size: "small", className: "range__play", disabled: !isPlay && indexPosition === 0, onClick: handleStop, children: jsx(IoStop, { color: "var(--color-primary-base)", size: "2rem" }) })] }));
+}
+
+function Range({ initial = 0, period, values, handleSelected }) {
+    const panelRef = useRef(null);
+    const [indexPosition, setIndexPosition] = useState(initial);
+    const [over, setOver] = useState(undefined);
+    const { allPositions, pixelPosition, setPixelPosition, thumbPosition, setThumbPosition, } = usePositions(panelRef, initial);
+    const handlePosition = (pixelPosition, thumbPosition, index, isHandleSelected = false) => {
+        setPixelPosition(`${pixelPosition}px`);
+        setThumbPosition(`${thumbPosition}px`);
+        setIndexPosition(index);
+        if (isHandleSelected && handleSelected) {
+            handleSelected({
+                value: values[index],
+                index,
+                position: pixelPosition,
+            });
+        }
+    };
+    const handleOverContent = (value) => {
+        setOver(value);
+    };
+    const handleOutContent = () => {
+        setOver(undefined);
+    };
+    const { isPlay, handlePlay, handleStop } = useTimer({
+        allPositions,
+        indexPosition,
+        handlePosition,
+        handleOverContent,
+        values,
+    });
+    const { handleDownThumb } = useThumb({
+        allPositions,
+        panelRef,
+        handlePosition,
+        handleOverContent,
+        values,
+    });
+    return (jsxs("div", { className: "range", children: [jsxs("div", { ref: panelRef, className: "range__panel", children: [jsx(RangeContent, { period: period, values: values, allPositions: allPositions, handlePosition: handlePosition, handleOverContent: handleOverContent, handleOutContent: handleOutContent, over: over }), jsx("div", { className: "range__track", style: {
+                            width: `${pixelPosition}`,
+                        } }), jsx(RangeThumb, { thumbPosition: thumbPosition, handleOverContent: handleOverContent, handleDownThumb: handleDownThumb })] }), jsx(RangeControls, { indexPosition: indexPosition, isPlay: isPlay, handlePlay: handlePlay, handleStop: handleStop })] }));
+}
+
 const LoadingContext = createContext(undefined);
 function loadingReducer(state, action) {
     switch (action.type) {
@@ -421,51 +657,5 @@ function useModal({} = {}) {
     return context;
 }
 
-const ThemeContext = createContext(undefined);
-function ThemeProvider({ children, dataTheme: dataThemeProp, dataPalette: dataPaletteProp = "water", }) {
-    const [dataTheme, setDataTheme] = useState();
-    const [dataPalette, setDataPalette] = useState();
-    useEffect(() => {
-        if (dataPaletteProp) {
-            switchDataPalette(dataPaletteProp);
-        }
-    }, [dataPaletteProp]);
-    useEffect(() => {
-        if (dataThemeProp) {
-            switchDataTheme(dataThemeProp);
-        }
-    }, [dataThemeProp]);
-    useEffect(() => {
-        if (window.matchMedia) {
-            if (localStorage.getItem("data-theme")) {
-                document.documentElement.setAttribute("data-theme", localStorage.getItem("data-theme"));
-                setDataTheme(localStorage.getItem("data-theme"));
-            }
-            else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-                document.documentElement.setAttribute("data-theme", "dark");
-                setDataTheme("dark");
-            }
-        }
-    }, []);
-    const switchDataTheme = (mode) => {
-        document.documentElement.setAttribute("data-theme", mode);
-        setDataTheme(mode);
-        localStorage.setItem("data-theme", mode);
-    };
-    const switchDataPalette = (mode) => {
-        document.documentElement.setAttribute("data-palette", mode);
-        setDataPalette(mode);
-        localStorage.setItem("palette-theme", mode);
-    };
-    return (jsx(ThemeContext.Provider, { value: { dataTheme, switchDataTheme, dataPalette, switchDataPalette }, children: children }));
-}
-function useTheme() {
-    const context = useContext(ThemeContext);
-    if (context === undefined) {
-        throw new Error("useTheme must be used within a ThemeProvider");
-    }
-    return context;
-}
-
-export { Button, Form, FormInput, FormSelect, FormTextArea, Input, Loading, LoadingContext, LoadingProvider, Menu, Modal, ModalContext, ModalProvider, Select, TextArea, ThemeContext, ThemeProvider, useLoading, useModal, useTheme };
+export { Button, Form, FormInput, FormSelect, FormTextArea, Input, Loading, LoadingContext, LoadingProvider, Menu, Modal, ModalContext, ModalProvider, Range, Select, TextArea, ThemeContext, ThemeProvider, useLoading, useModal, useTheme };
 //# sourceMappingURL=index.js.map