@geoinsight/react-components 0.3.1 → 0.3.3

package/dist/cjs/index.css

@@ -281,3 +281,57 @@
   background: var(--color-primary-700);
   color: var(--color-neutral-100);
 }
+
+.modal {
+  color: var(--color-neutral-900);
+}
+
+.modal__overlay {
+  background: rgba(0, 0, 0, 0.3);
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+}
+
+.modal__body {
+  background: white;
+  border-radius: var(--spacing-8);
+  border: 1px solid var(--color-neutral-600);
+  left: 50%;
+  padding: var(--spacing-4) var(--spacing-4);
+  position: absolute;
+  right: var(--spacing-16);
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 5;
+}
+
+.modal__close {
+  position: absolute;
+  right: calc(var(--spacing-16) * -1);
+  top: calc(var(--spacing-16) * -1);
+  z-index: 5;
+}
+
+.modal__content {
+  border: 1px solid var(--color-neutral-100);
+  border-radius: var(--spacing-8);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+  padding: 0 var(--spacing-16);
+}
+
+.modal__footer {
+  padding-bottom: var(--spacing-16);
+}
+.loading {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;;
+  position: relative;
+}

package/dist/cjs/index.js

@@ -4,6 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var react = require('react');
 var tb = require('react-icons/tb');
+var io5 = require('react-icons/io5');
 
 const Anchor = ({ Custom, children, ...rest }) => Custom ? jsxRuntime.jsx(Custom, { ...rest, children: children }) : jsxRuntime.jsx("a", { ...rest, children: children });
 function Button({ children = "Click me", className = "", icon = undefined, isNewWindow = false, mode = "primary", size = "medium", as = "button", CustomAnchor, ...rest }) {
@@ -33,6 +34,14 @@ function TextArea({ className = "", disabled = true, hasToggleButton = true, hid
                 }, placeholder: placeholder, disabled: disabled, ...rest }), hasToggleButton && (jsxRuntime.jsx("button", { className: clsx("textarea__button", isShow && "textarea__button--show"), onClick: handleClickToggle, disabled: disabled, children: jsxRuntime.jsx(tb.TbArrowsDiagonal2, { size: "1.5rem" }) }))] }));
 }
 
+function Modal({ modalref, children, title, subtitle, footer, hasCloseButton = true, handleClose, }) {
+    return (jsxRuntime.jsxs("div", { className: "modal", children: [jsxRuntime.jsx("div", { className: "modal__overlay" }), jsxRuntime.jsxs("div", { ref: modalref, className: "modal__body", 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 Loading({ img, children }) {
+    return (jsxRuntime.jsxs("div", { className: "loading", children: [jsxRuntime.jsx("img", { src: img ? img : "../../stories/assets/loading.gif" }), children] }));
+}
+
 const ThemeContext = react.createContext(undefined);
 function ThemeProvider({ children }) {
     const [dataTheme, setDataTheme] = react.useState();
@@ -81,9 +90,138 @@ function useTheme({ dataTheme = undefined, paletteTheme = "water", } = {}) {
     return context;
 }
 
+const LoadingContext = react.createContext(undefined);
+function loadingReducer(state, action) {
+    switch (action.type) {
+        case "set_ref": {
+            return { ...state, ref: action.ref };
+        }
+        case "start_loading": {
+            return { ...state, isLoading: true };
+        }
+        case "stop_loading": {
+            return { ...state, isLoading: false };
+        }
+        case "set_message": {
+            return { ...state, message: action.message };
+        }
+        default: {
+            throw new Error(`Unhandled action type: ${action.type}`);
+        }
+    }
+}
+function LoadingProvider({ children }) {
+    const [{ isLoading, message, ref }, dispatch] = react.useReducer(loadingReducer, {
+        isLoading: false,
+        message: "Loading",
+        ref: undefined,
+    });
+    const setRef = (ref) => {
+        dispatch({ type: "set_ref", ref });
+    };
+    const setMessage = (message) => {
+        dispatch({ type: "set_message", message });
+    };
+    const startLoading = () => {
+        dispatch({ type: "start_loading" });
+    };
+    const stopLoading = () => {
+        dispatch({ type: "stop_loading" });
+    };
+    return (jsxRuntime.jsxs(LoadingContext.Provider, { value: {
+            state: { ref, message, isLoading },
+            setMessage,
+            setRef,
+            startLoading,
+            stopLoading,
+        }, children: [!ref && jsxRuntime.jsx(Loading, { children: message }), children] }));
+}
+function useLoading({ ref, message } = {}) {
+    const context = react.useContext(LoadingContext);
+    // only happens if there is an initial mode value.
+    react.useEffect(() => {
+        ref && context?.setRef(ref);
+        message && context?.setMessage(message);
+    }, []);
+    if (context === undefined) {
+        throw new Error("useLoading must be used within a LoadingProvider");
+    }
+    return context;
+}
+
+const ModalContext = react.createContext(undefined);
+function modalReducer(state, action) {
+    switch (action.type) {
+        case "open_modal": {
+            return { ...state, ...action.modal, isModal: true };
+        }
+        case "close_modal": {
+            return { ...state, isModal: false };
+        }
+        default: {
+            throw new Error(`Unhandled action type: ${action.type}`);
+        }
+    }
+}
+const defaultState = {
+    subtitle: undefined,
+    title: undefined,
+    content: undefined,
+    hasCloseButton: true,
+    footer: undefined,
+};
+function ModalProvider({ children }) {
+    const ref = react.useRef(null);
+    const [state, dispatch] = react.useReducer(modalReducer, {
+        isModal: false,
+        ...defaultState,
+    });
+    const openModal = (modal) => {
+        dispatch({ type: "open_modal", modal });
+    };
+    const closeModal = () => {
+        dispatch({ type: "close_modal" });
+    };
+    react.useEffect(() => {
+        if (state.isModal) {
+            const listener = (e) => {
+                if (state.isModal &&
+                    ref.current &&
+                    !ref.current.contains(e.target)) {
+                    closeModal();
+                }
+            };
+            document.addEventListener("mousedown", listener);
+            return () => {
+                document.removeEventListener("mousedown", listener);
+            };
+        }
+    }, [closeModal]);
+    return (jsxRuntime.jsxs(ModalContext.Provider, { value: {
+            state,
+            openModal,
+            closeModal,
+        }, children: [children, state.isModal && (jsxRuntime.jsx(Modal, { modalref: ref, title: state.title, footer: state.footer, handleClose: closeModal, subtitle: state.subtitle, children: state.content }))] }));
+}
+function useModal({} = {}) {
+    const context = react.useContext(ModalContext);
+    if (context === undefined) {
+        throw new Error("useModal must be used within a ModalProvider");
+    }
+    return context;
+}
+
 exports.Button = Button;
 exports.Input = Input;
+exports.Loading = Loading;
+exports.LoadingContext = LoadingContext;
+exports.LoadingProvider = LoadingProvider;
+exports.Modal = Modal;
+exports.ModalContext = ModalContext;
+exports.ModalProvider = ModalProvider;
 exports.TextArea = TextArea;
 exports.ThemeContext = ThemeContext;
 exports.ThemeProvider = ThemeProvider;
+exports.useLoading = useLoading;
+exports.useModal = useModal;
 exports.useTheme = useTheme;

package/dist/esm/index.css

@@ -281,3 +281,57 @@
   background: var(--color-primary-700);
   color: var(--color-neutral-100);
 }
+
+.modal {
+  color: var(--color-neutral-900);
+}
+
+.modal__overlay {
+  background: rgba(0, 0, 0, 0.3);
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+}
+
+.modal__body {
+  background: white;
+  border-radius: var(--spacing-8);
+  border: 1px solid var(--color-neutral-600);
+  left: 50%;
+  padding: var(--spacing-4) var(--spacing-4);
+  position: absolute;
+  right: var(--spacing-16);
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 5;
+}
+
+.modal__close {
+  position: absolute;
+  right: calc(var(--spacing-16) * -1);
+  top: calc(var(--spacing-16) * -1);
+  z-index: 5;
+}
+
+.modal__content {
+  border: 1px solid var(--color-neutral-100);
+  border-radius: var(--spacing-8);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+  padding: 0 var(--spacing-16);
+}
+
+.modal__footer {
+  padding-bottom: var(--spacing-16);
+}
+.loading {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;;
+  position: relative;
+}

package/dist/esm/index.js

@@ -1,7 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useRef, useState, createContext, useEffect, useContext } from 'react';
+import { useRef, useState, createContext, useEffect, useContext, useReducer } from 'react';
 import { TbArrowsDiagonal2 } from 'react-icons/tb';
+import { IoClose } from 'react-icons/io5';
 
 const Anchor = ({ Custom, children, ...rest }) => Custom ? jsx(Custom, { ...rest, children: children }) : jsx("a", { ...rest, children: children });
 function Button({ children = "Click me", className = "", icon = undefined, isNewWindow = false, mode = "primary", size = "medium", as = "button", CustomAnchor, ...rest }) {
@@ -31,6 +32,14 @@ function TextArea({ className = "", disabled = true, hasToggleButton = true, hid
                 }, placeholder: placeholder, disabled: disabled, ...rest }), hasToggleButton && (jsx("button", { className: clsx("textarea__button", isShow && "textarea__button--show"), onClick: handleClickToggle, disabled: disabled, children: jsx(TbArrowsDiagonal2, { size: "1.5rem" }) }))] }));
 }
 
+function Modal({ modalref, children, title, subtitle, footer, hasCloseButton = true, handleClose, }) {
+    return (jsxs("div", { className: "modal", children: [jsx("div", { className: "modal__overlay" }), jsxs("div", { ref: modalref, className: "modal__body", 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 Loading({ img, children }) {
+    return (jsxs("div", { className: "loading", children: [jsx("img", { src: img ? img : "../../stories/assets/loading.gif" }), children] }));
+}
+
 const ThemeContext = createContext(undefined);
 function ThemeProvider({ children }) {
     const [dataTheme, setDataTheme] = useState();
@@ -79,4 +88,125 @@ function useTheme({ dataTheme = undefined, paletteTheme = "water", } = {}) {
     return context;
 }
 
-export { Button, Input, TextArea, ThemeContext, ThemeProvider, useTheme };
+const LoadingContext = createContext(undefined);
+function loadingReducer(state, action) {
+    switch (action.type) {
+        case "set_ref": {
+            return { ...state, ref: action.ref };
+        }
+        case "start_loading": {
+            return { ...state, isLoading: true };
+        }
+        case "stop_loading": {
+            return { ...state, isLoading: false };
+        }
+        case "set_message": {
+            return { ...state, message: action.message };
+        }
+        default: {
+            throw new Error(`Unhandled action type: ${action.type}`);
+        }
+    }
+}
+function LoadingProvider({ children }) {
+    const [{ isLoading, message, ref }, dispatch] = useReducer(loadingReducer, {
+        isLoading: false,
+        message: "Loading",
+        ref: undefined,
+    });
+    const setRef = (ref) => {
+        dispatch({ type: "set_ref", ref });
+    };
+    const setMessage = (message) => {
+        dispatch({ type: "set_message", message });
+    };
+    const startLoading = () => {
+        dispatch({ type: "start_loading" });
+    };
+    const stopLoading = () => {
+        dispatch({ type: "stop_loading" });
+    };
+    return (jsxs(LoadingContext.Provider, { value: {
+            state: { ref, message, isLoading },
+            setMessage,
+            setRef,
+            startLoading,
+            stopLoading,
+        }, children: [!ref && jsx(Loading, { children: message }), children] }));
+}
+function useLoading({ ref, message } = {}) {
+    const context = useContext(LoadingContext);
+    // only happens if there is an initial mode value.
+    useEffect(() => {
+        ref && context?.setRef(ref);
+        message && context?.setMessage(message);
+    }, []);
+    if (context === undefined) {
+        throw new Error("useLoading must be used within a LoadingProvider");
+    }
+    return context;
+}
+
+const ModalContext = createContext(undefined);
+function modalReducer(state, action) {
+    switch (action.type) {
+        case "open_modal": {
+            return { ...state, ...action.modal, isModal: true };
+        }
+        case "close_modal": {
+            return { ...state, isModal: false };
+        }
+        default: {
+            throw new Error(`Unhandled action type: ${action.type}`);
+        }
+    }
+}
+const defaultState = {
+    subtitle: undefined,
+    title: undefined,
+    content: undefined,
+    hasCloseButton: true,
+    footer: undefined,
+};
+function ModalProvider({ children }) {
+    const ref = useRef(null);
+    const [state, dispatch] = useReducer(modalReducer, {
+        isModal: false,
+        ...defaultState,
+    });
+    const openModal = (modal) => {
+        dispatch({ type: "open_modal", modal });
+    };
+    const closeModal = () => {
+        dispatch({ type: "close_modal" });
+    };
+    useEffect(() => {
+        if (state.isModal) {
+            const listener = (e) => {
+                if (state.isModal &&
+                    ref.current &&
+                    !ref.current.contains(e.target)) {
+                    closeModal();
+                }
+            };
+            document.addEventListener("mousedown", listener);
+            return () => {
+                document.removeEventListener("mousedown", listener);
+            };
+        }
+    }, [closeModal]);
+    return (jsxs(ModalContext.Provider, { value: {
+            state,
+            openModal,
+            closeModal,
+        }, children: [children, state.isModal && (jsx(Modal, { modalref: ref, title: state.title, footer: state.footer, handleClose: closeModal, subtitle: state.subtitle, children: state.content }))] }));
+}
+function useModal({} = {}) {
+    const context = useContext(ModalContext);
+    if (context === undefined) {
+        throw new Error("useModal must be used within a ModalProvider");
+    }
+    return context;
+}
+
+export { Button, Input, Loading, LoadingContext, LoadingProvider, Modal, ModalContext, ModalProvider, TextArea, ThemeContext, ThemeProvider, useLoading, useModal, useTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoinsight/react-components",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "This library is the main UI component library for geoinsight",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",