@rolster/react-components 19.6.4 → 19.6.7

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2022 Rolster Technology
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2022 Rolster Technology
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/cjs/index.cjs

@@ -1573,9 +1573,9 @@ function RlsFieldArea(props) {
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsAreaText, { ...props }) }) }), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
-function RlsFieldFile({ accept, children, disabled: disabledProp, formControl, identifier, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value }) {
+function RlsFieldFile({ accept, children, disabled: _disabled, formControl, identifier, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value }) {
     const inputRef = require$$0.useRef(null);
-    const disabled = require$$0.useMemo(() => formControl?.disabled || disabledProp, [formControl?.disabled, disabledProp]);
+    const disabled = require$$0.useMemo(() => formControl?.disabled || _disabled, [formControl?.disabled, _disabled]);
     const className = require$$0.useMemo(() => renderClassStatus('rls-field-box', {
         disabled,
         error: formControl?.wrong,
@@ -1607,7 +1607,7 @@ function RlsFieldFile({ accept, children, disabled: disabledProp, formControl, i
     const onClickControl = require$$0.useCallback(() => {
         !readOnly && !disabled && inputRef.current?.click();
     }, [readOnly, disabled]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", onClick: onClickControl, children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-input__component", readOnly: true, type: "text", value: displayValue, placeholder: placeholder }), jsxRuntimeExports.jsx("input", { ref: inputRef, className: "rls-field-file__input", type: "file", accept: accept, disabled: disabled || readOnly, onChange: onChangeInput }), jsxRuntimeExports.jsx(RlsButtonAction, { icon: currentFile ? 'close' : 'attach-2', disabled: disabled, onClick: onClickAction })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", onClick: onClickControl, children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-input__component", readOnly: true, type: "text", value: displayValue, placeholder: placeholder }), jsxRuntimeExports.jsx("input", { ref: inputRef, className: "rls-field-file__input", type: "file", accept: accept, disabled: disabled || readOnly, onChange: onChangeInput }), jsxRuntimeExports.jsx(RlsButtonAction, { icon: currentFile ? 'close' : 'attach', disabled: disabled, onClick: onClickAction })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
 const reactI18n = i18n.i18n({
@@ -2595,7 +2595,7 @@ function useListController(props) {
     };
 }
 
-const DURATION_ANIMATION$1 = 240;
+const DURATION_ANIMATION$2 = 240;
 const MAX_ELEMENTS = 6;
 function useFieldAutocomplete(props) {
     const controller = useListController(props);
@@ -2652,7 +2652,7 @@ function useFieldAutocomplete(props) {
             clearTimeout(focusTimeoutId.current);
             focusTimeoutId.current = setTimeout(() => {
                 controller.refInput?.current?.focus();
-            }, DURATION_ANIMATION$1);
+            }, DURATION_ANIMATION$2);
         }
     }, [controller.setState, props.readOnly]);
     require$$0.useEffect(() => {
@@ -4302,6 +4302,60 @@ function RlsModalSheet({ autoclose, children, className, controller, onAutoClose
     return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: classNameModal, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-modal-sheet__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-modal-sheet__backdrop", onClick: onClickBackdrop })] }), document.body);
 }
 
+const DURATION_ANIMATION$1 = 240;
+const DURATION_DEFAULT = 4000;
+let _id = 0;
+function generateId() {
+    return `rls-notification-${++_id}`;
+}
+function RlsNotification({ content, icon, onClose, rlsTheme, title, visible }) {
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-notification', { visible });
+    }, [visible]);
+    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [icon && (jsxRuntimeExports.jsx("div", { className: "rls-notification__avatar", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) })), jsxRuntimeExports.jsxs("div", { className: "rls-notification__component", children: [jsxRuntimeExports.jsxs("div", { className: "rls-notification__header", children: [jsxRuntimeExports.jsx("div", { className: "rls-notification__title", children: title }), jsxRuntimeExports.jsx("button", { onClick: onClose, children: jsxRuntimeExports.jsx(RlsIcon, { value: "close" }) })] }), jsxRuntimeExports.jsx("div", { className: "rls-notification__content", children: content })] })] }));
+}
+function useNotifications() {
+    const [notifications, setNotifications] = require$$0.useState([]);
+    const timersRef = require$$0.useRef(new Map());
+    require$$0.useEffect(() => {
+        const timers = timersRef.current;
+        return () => {
+            timers.forEach((timer) => clearTimeout(timer));
+            timers.clear();
+        };
+    }, []);
+    const remove = require$$0.useCallback((id) => {
+        const timer = timersRef.current.get(id);
+        if (timer) {
+            clearTimeout(timer);
+            timersRef.current.delete(id);
+        }
+        setNotifications((notifications) => notifications.map((notification) => notification.id === id
+            ? { ...notification, visible: false }
+            : notification));
+        setTimeout(() => {
+            setNotifications((notifications) => notifications.filter((notification) => notification.id !== id));
+        }, DURATION_ANIMATION$1);
+    }, []);
+    const notify = require$$0.useCallback((config) => {
+        const id = generateId();
+        const duration = config.duration ?? DURATION_DEFAULT;
+        setNotifications((notifications) => [
+            ...notifications,
+            { id, config, visible: true }
+        ]);
+        const timer = setTimeout(() => {
+            remove(id);
+        }, duration);
+        timersRef.current.set(id, timer);
+    }, [remove]);
+    const RlsNotifications = ReactDOM.createPortal(jsxRuntimeExports.jsx("div", { className: "rls-notifications", children: notifications.map((notification) => (jsxRuntimeExports.jsx(RlsNotification, { ...notification.config, visible: notification.visible, onClose: () => remove(notification.id) }, notification.id))) }), document.body);
+    return {
+        RlsNotifications,
+        notify
+    };
+}
+
 const DURATION_ANIMATION = 240;
 const DURATION_CHAR = 75;
 const DURATION_MAX = 9000;
@@ -4365,17 +4419,17 @@ function useSnackbar() {
     };
 }
 
-const RlsContext = require$$0.createContext({
-    confirmation: () => {
-        return Promise.resolve(ConfirmationResult.approved());
-    },
-    snackbar: () => { },
-    setIsMobile: () => { },
-    setNavbarInApp: () => { },
-    setNavbarIsCondense: () => { }
-});
+const RlsContext = require$$0.createContext(null);
+function useRlsContext() {
+    const state = require$$0.useContext(RlsContext);
+    if (!state) {
+        throw new Error('RlsApplication not wrapped in Project');
+    }
+    return state;
+}
 function RlsApplication({ children }) {
     const { RlsConfirmation, confirmation } = useConfirmation();
+    const { RlsNotifications, notify } = useNotifications();
     const { RlsSnackbar, snackbar } = useSnackbar();
     const [navbarInApp, setNavbarInApp] = require$$0.useState(false);
     const [navbarIsCondense, setNavbarIsCondense] = require$$0.useState(false);
@@ -4389,11 +4443,12 @@ function RlsApplication({ children }) {
     }, [appIsMobile, navbarInApp, navbarIsCondense]);
     return (jsxRuntimeExports.jsxs(RlsContext, { value: {
             confirmation,
+            notify,
             snackbar,
             setIsMobile,
             setNavbarInApp,
             setNavbarIsCondense
-        }, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children, RlsSnackbar] }), RlsConfirmation] }));
+        }, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children, RlsSnackbar] }), RlsNotifications, RlsConfirmation] }));
 }
 
 const DEFAULT_DESIGN_SYSTEM = 'bordered';
@@ -4654,8 +4709,10 @@ exports.useFormSingleSelectionController = useFormSingleSelectionController;
 exports.useFormToggleController = useFormToggleController;
 exports.useImageEditorController = useImageEditorController;
 exports.useListController = useListController;
+exports.useNotifications = useNotifications;
 exports.usePortalController = usePortalController;
 exports.useRelocationOnComponent = useRelocationOnComponent;
 exports.useResize = useResize;
+exports.useRlsContext = useRlsContext;
 exports.useSnackbar = useSnackbar;
 //# sourceMappingURL=index.cjs.map