@geoinsight/react-components 1.1.0 → 1.1.1

package/dist/cjs/index.css

@@ -842,3 +842,123 @@ h6 {
 .modal__footer {
   padding-bottom: var(--spacing-16);
 }
+
+.range {
+  align-items: center;
+  display: flex;
+  position: relative;
+  min-width: 20rem;
+  gap: var(--spacing-16);
+}
+
+.range__panel:hover {
+  border-radius: var(--spacing-8);
+  box-shadow: 2px 4px 6px 0 var(--color-primary-base);
+  transition: var(--transition-bg-cubic-bezier),
+    var(--transition-box-shadow-cubic-bezier);
+}
+
+.range__panel {
+  display: flex;
+  position: relative;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.range__track {
+  background-color: var(--color-primary-bright);
+  border-radius: 0 var(--spacing-4) var(--spacing-4) 0;
+  height: 100%;
+  position: absolute;
+  z-index: 0;
+}
+
+.range__content {
+  align-items: start;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+  width: var(--spacing-40);
+  z-index: 3;
+}
+
+.range__content:hover {
+  box-shadow: 5px 2px 6px 0 var(--color-main-color);
+  transition: var(--transition-box-shadow-cubic-bezier);
+}
+
+.range__content__period {
+  gap: 0;
+  width: var(--spacing-8);
+}
+
+.range__tick {
+  border-left: 2px solid
+    color-mix(in srgb, var(--color-primary-dark) 80%, transparent 10%);
+  width: 100%;
+}
+
+.range__tick__large {
+  height: 1rem;
+}
+
+.range__tick__small {
+  height: 0.5rem;
+}
+
+.range__value {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  width: calc(80%);
+}
+
+.range__value__period {
+  border-left: 2px solid
+    color-mix(in srgb, var(--color-primary-dark) 80%, transparent 10%);
+  width: calc(100% + var(--spacing-40));
+}
+
+.range__value--over {
+  background-color: var(--color-main-background) !important;
+  overflow: visible;
+  white-space: unset;
+  width: unset;
+  position: absolute;
+  top: calc(var(--spacing-40) * 1);
+}
+
+.range__thumb {
+  position: absolute;
+  top: -32px;
+  background-color: transparent;
+}
+
+.button__icon.range__play {
+  background-color: var(--color-main-background);
+  border: 1px solid var(--color-primary-dark);
+  border-radius: var(--spacing-32);
+  z-index: 5;
+}
+
+.button__icon.range__play:hover {
+  border: 1px solid var(--color-primary-dark);
+}
+
+@media (max-width: 699px) {
+  .range {
+    flex-direction: column;
+  }
+  .range__panel {
+    min-width: none;
+    max-width: 30rem;
+  }
+}
+
+@media (max-width: 500px) {
+  .range__panel {
+    min-width: none;
+    max-width: 20rem;
+  }
+}

package/dist/cjs/index.d.ts

@@ -10,6 +10,7 @@ export { Loading } from "./components/loading";
 export { Modal } from "./components/modal";
 export { Select } from "./components/select";
 export { TextArea } from "./components/text-area";
+export { Range } from "./components/range";
 export { LoadingContext, LoadingProvider, useLoading } from "./context/loading";
 export { ModalContext, ModalProvider, useModal } from "./context/modal";
 export { ThemeContext, ThemeProvider, useTheme } from "./context/theme";

package/dist/cjs/index.js

@@ -8,6 +8,7 @@ var bs = require('react-icons/bs');
 var reactHookForm = require('react-hook-form');
 var tb = require('react-icons/tb');
 var io5 = require('react-icons/io5');
+var ri = require('react-icons/ri');
 
 const generateId = () => {
     return `id-${Math.random().toString(36).slice(2, 11)}`;
@@ -292,6 +293,240 @@ function Modal({ className, modalref, children, title, subtitle, footer, hasOver
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasOverlay && jsxRuntime.jsx("div", { className: "modal-overlay" }), jsxRuntime.jsxs("div", { ref: modalref, className: clsx("modal", className), ...rest, children: [hasCloseButton && (jsxRuntime.jsx(Button, { mode: "secondary", className: "modal__close", size: "small", onClick: handleClose, children: jsxRuntime.jsx(io5.IoClose, {}) })), jsxRuntime.jsxs("div", { className: "modal__content", children: [title && (jsxRuntime.jsxs("div", { className: "modal__header", children: [jsxRuntime.jsx("h3", { children: title }), jsxRuntime.jsx("h6", { children: subtitle })] })), jsxRuntime.jsx("div", { className: "modal__children", children: children }), footer && jsxRuntime.jsx("div", { className: "modal__footer", children: footer })] })] })] }));
 }
 
+function usePositions(panelRef) {
+    const [allPositions, setAllPositions] = react.useState(undefined);
+    const [pixelPosition, setPixelPosition] = react.useState(undefined);
+    const [thumbPosition, setThumbPosition] = react.useState(undefined);
+    // find positions of all values
+    react.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
+    react.useEffect(() => {
+        if (allPositions) {
+            setPixelPosition(`${allPositions[0]}px`);
+            setThumbPosition(`${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 = react.useRef(null);
+    const [isPlay, setIsPlay] = react.useState(false);
+    // timer
+    react.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 = react.createContext(undefined);
+function ThemeProvider({ children, dataTheme: dataThemeProp, dataPalette: dataPaletteProp = "water", }) {
+    const [dataTheme, setDataTheme] = react.useState();
+    const [dataPalette, setDataPalette] = react.useState();
+    react.useEffect(() => {
+        if (dataPaletteProp) {
+            switchDataPalette(dataPaletteProp);
+        }
+    }, [dataPaletteProp]);
+    react.useEffect(() => {
+        if (dataThemeProp) {
+            switchDataTheme(dataThemeProp);
+        }
+    }, [dataThemeProp]);
+    react.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 (jsxRuntime.jsx(ThemeContext.Provider, { value: { dataTheme, switchDataTheme, dataPalette, switchDataPalette }, children: children }));
+}
+function useTheme() {
+    const context = react.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 (jsxRuntime.jsx(Button, { mode: "icon", className: "range__thumb", size: "small", style: {
+            left: `${thumbPosition}`,
+        }, onMouseOver: () => handleOverContent(thumbPosition), onMouseDown: handleDownThumb, children: dataTheme === "dark" ? (jsxRuntime.jsx(ri.RiMapPinTimeFill, { size: "1.5rem" })) : (jsxRuntime.jsx(ri.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) => (jsxRuntime.jsx("div", { className: "range__content range__content__period", onClick: () => handleClickRange(index), onMouseOver: () => handleOverContent(value), onMouseOut: () => handleOutContent(), children: index % period === 0 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "range__tick range__tick__large" }), jsxRuntime.jsx("div", { className: clsx("range__value", "range__value__period", {
+                            "range__value--over": value === over,
+                        }), children: value })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "range__tick range__tick__small" }), value === over && (jsxRuntime.jsx("div", { className: clsx("range__value", "range__value__period", {
+                            "range__value--over": value === over,
+                        }), children: value }))] })) })))
+        : values.map((value, index) => (jsxRuntime.jsxs("div", { className: "range__content", onClick: () => handleClickRange(index), children: [jsxRuntime.jsx("div", { className: "range__tick range__tick__large" }), jsxRuntime.jsx("div", { className: "range__value", children: value })] })));
+}
+
+function RangeControls({ indexPosition, isPlay, handlePlay, handleStop, }) {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Button, { mode: "icon", size: "small", className: "range__play", onClick: handlePlay, children: isPlay ? (jsxRuntime.jsx(io5.IoPause, { color: "var(--color-primary-base)", size: "2rem" })) : (jsxRuntime.jsx(io5.IoPlay, { color: "var(--color-primary-base)", size: "2rem" })) }), jsxRuntime.jsx(Button, { mode: "icon", size: "small", className: "range__play", disabled: !isPlay && indexPosition === 0, onClick: handleStop, children: jsxRuntime.jsx(io5.IoStop, { color: "var(--color-primary-base)", size: "2rem" }) })] }));
+}
+
+function Range({ period, values, handleSelected }) {
+    const panelRef = react.useRef(null);
+    const [indexPosition, setIndexPosition] = react.useState(0);
+    const [over, setOver] = react.useState(undefined);
+    const { allPositions, pixelPosition, setPixelPosition, thumbPosition, setThumbPosition, } = usePositions(panelRef);
+    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 (jsxRuntime.jsxs("div", { className: "range", children: [jsxRuntime.jsxs("div", { ref: panelRef, className: "range__panel", children: [jsxRuntime.jsx(RangeContent, { period: period, values: values, allPositions: allPositions, handlePosition: handlePosition, handleOverContent: handleOverContent, handleOutContent: handleOutContent, over: over }), jsxRuntime.jsx("div", { className: "range__track", style: {
+                            width: `${pixelPosition}`,
+                        } }), jsxRuntime.jsx(RangeThumb, { thumbPosition: thumbPosition, handleOverContent: handleOverContent, handleDownThumb: handleDownThumb })] }), jsxRuntime.jsx(RangeControls, { indexPosition: indexPosition, isPlay: isPlay, handlePlay: handlePlay, handleStop: handleStop })] }));
+}
+
 const LoadingContext = react.createContext(undefined);
 function loadingReducer(state, action) {
     switch (action.type) {
@@ -423,52 +658,6 @@ function useModal({} = {}) {
     return context;
 }
 
-const ThemeContext = react.createContext(undefined);
-function ThemeProvider({ children, dataTheme: dataThemeProp, dataPalette: dataPaletteProp = "water", }) {
-    const [dataTheme, setDataTheme] = react.useState();
-    const [dataPalette, setDataPalette] = react.useState();
-    react.useEffect(() => {
-        if (dataPaletteProp) {
-            switchDataPalette(dataPaletteProp);
-        }
-    }, [dataPaletteProp]);
-    react.useEffect(() => {
-        if (dataThemeProp) {
-            switchDataTheme(dataThemeProp);
-        }
-    }, [dataThemeProp]);
-    react.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 (jsxRuntime.jsx(ThemeContext.Provider, { value: { dataTheme, switchDataTheme, dataPalette, switchDataPalette }, children: children }));
-}
-function useTheme() {
-    const context = react.useContext(ThemeContext);
-    if (context === undefined) {
-        throw new Error("useTheme must be used within a ThemeProvider");
-    }
-    return context;
-}
-
 exports.Button = Button;
 exports.Form = Form;
 exports.FormInput = FormInput;
@@ -482,6 +671,7 @@ exports.Menu = Menu;
 exports.Modal = Modal;
 exports.ModalContext = ModalContext;
 exports.ModalProvider = ModalProvider;
+exports.Range = Range;
 exports.Select = Select;
 exports.TextArea = TextArea;
 exports.ThemeContext = ThemeContext;