@symply.io/basic-components 1.3.11-alpha.2 → 1.3.11-alpha.4

package/ToastPrompt/Prompt.d.ts

@@ -0,0 +1,3 @@
+import { PromptProps } from "./types";
+declare function Prompt(props: PromptProps): JSX.Element;
+export default Prompt;

package/ToastPrompt/{Presentation.js → Prompt.js}

@@ -9,34 +9,27 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Typography from "@mui/material/Typography";
-import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
 import Slide from "@mui/material/Slide";
-import SnackbarContent from "@mui/material/SnackbarContent";
 import Snackbar from "@mui/material/Snackbar";
+import Typography from "@mui/material/Typography";
+import SnackbarContent from "@mui/material/SnackbarContent";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import InfoIcon from "@mui/icons-material/Info";
 import ErrorIcon from "@mui/icons-material/Error";
 import WarningIcon from "@mui/icons-material/Warning";
 import SuccessIcon from "@mui/icons-material/CheckCircle";
 import { green, amber, red, blue } from "@mui/material/colors";
 import useCustomTheme from "../useCustomTheme";
-var ToastPrompt = function (props) {
+var Transition = function (args) {
+    return _jsx(Slide, __assign({}, args, { direction: "up" }));
+};
+function Prompt(props) {
     var _a;
-    var _b = props.open, open = _b === void 0 ? false : _b, _c = props.vertical, vertical = _c === void 0 ? "bottom" : _c, _d = props.horizontal, horizontal = _d === void 0 ? "left" : _d, _e = props.timeout, timeout = _e === void 0 ? 3000 : _e, onClose = props.onClose, _f = props.transitionDirection, transitionDirection = _f === void 0 ? "up" : _f, _g = props.message, message = _g === void 0 ? "Unknown message" : _g, _h = props.icon, icon = _h === void 0 ? _jsx(_Fragment, {}) : _h, _j = props.variant, variant = _j === void 0 ? "info" : _j, other = __rest(props, ["open", "vertical", "horizontal", "timeout", "onClose", "transitionDirection", "message", "icon", "variant"]);
+    var open = props.open, icon = props.icon, variant = props.variant, message = props.message, timeout = props.timeout, onClose = props.onClose;
     var theme = useCustomTheme();
-    var styles = {
+    var styles = useMemo(function () { return ({
         success: {
             backgroundColor: green[500]
         },
@@ -49,21 +42,18 @@ var ToastPrompt = function (props) {
         warning: {
             backgroundColor: amber["A700"]
         }
-    };
-    var Transition = function (args) {
-        return _jsx(Slide, __assign({}, args, { direction: transitionDirection }));
-    };
-    var VariantIcon = {
+    }); }, []);
+    var VariantIcon = useMemo(function () { return ({
         success: SuccessIcon,
         warning: WarningIcon,
         error: ErrorIcon,
         info: InfoIcon
-    };
-    var Icon = VariantIcon[variant];
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Snackbar, __assign({ anchorOrigin: { vertical: vertical, horizontal: horizontal }, open: open, onClose: onClose, autoHideDuration: timeout, TransitionComponent: Transition, sx: {
+    }); }, []);
+    var Icon = useMemo(function () { return VariantIcon[variant]; }, []);
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Snackbar, __assign({ anchorOrigin: { vertical: "bottom", horizontal: "left" }, open: open, onClose: onClose, autoHideDuration: timeout, TransitionComponent: Transition, sx: {
                 zIndex: 99999,
                 marginTop: "3vh"
-            } }, { children: _jsx(SnackbarContent, __assign({ sx: __assign(__assign({}, styles[variant]), { root: (_a = {},
+            } }, { children: _jsx(SnackbarContent, { sx: __assign(__assign({}, styles[variant]), { root: (_a = {},
                         _a[theme.breakpoints.down("sm")] = {
                             maxWidth: "320px",
                             borderRadius: "4px"
@@ -73,10 +63,10 @@ var ToastPrompt = function (props) {
                         fontWeight: 700,
                         display: "flex",
                         alignItems: "center"
-                    } }, { children: [variant ? (_jsx(Icon, { sx: {
+                    } }, { children: [!icon ? (_jsx(Icon, { sx: {
                                 fontSize: 20,
                                 opacity: 0.9,
                                 marginRight: theme.spacing(1)
-                            } })) : (_jsx(_Fragment, { children: icon })), message] })) }, other)) }), "".concat(Date.now() * Math.round(Math.random()))) })));
-};
-export default ToastPrompt;
+                            } })) : (_jsx(_Fragment, { children: icon })), message] })) }) }), "".concat(Date.now() * Math.round(Math.random()))) })));
+}
+export default Prompt;

package/ToastPrompt/index.d.ts

@@ -1,14 +1,3 @@
-import { ReactNode } from "react";
-export interface PromptProviderProps {
-    children: ReactNode;
-}
-export interface ShowPromptProps {
-    type: "success" | "warning" | "error" | "info";
-    message: string | 400;
-    timeout?: number;
-}
+import { PromptProviderProps, PromptContextProps } from "./types";
 export declare function PromptProvider(props: PromptProviderProps): JSX.Element;
-export declare function usePrompt(): {
-    showPrompt: (props: ShowPromptProps) => void;
-};
-export default PromptProvider;
+export declare function usePrompt(): PromptContextProps;

package/ToastPrompt/index.js

@@ -10,21 +10,17 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useRef, useContext } from "react";
-import Logics from "./Logics";
-import ToastPrompt from "./Presentation";
-var PromptContext = createContext({});
+import { createContext, useContext } from "react";
+import Prompt from "./Prompt";
+import useInteractions from "./useInteractions";
+var PromptContext = createContext({
+    showPrompt: function () { }
+});
 export function PromptProvider(props) {
     var children = props.children;
-    var toastRef = useRef(null);
-    function showPrompt(props) {
-        var type = props.type, message = props.message, timeout = props.timeout;
-        var _a = ((toastRef === null || toastRef === void 0 ? void 0 : toastRef.current) || {}).show, show = _a === void 0 ? function () { } : _a;
-        show(type, message, timeout);
-    }
-    return (_jsx(PromptContext.Provider, __assign({ value: { showPrompt: showPrompt } }, { children: _jsxs(_Fragment, { children: [children, _jsx(Logics, __assign({ ref: toastRef }, { children: _jsx(ToastPrompt, {}) }))] }) })));
+    var _a = useInteractions(), promptArgs = _a.promptArgs, onShow = _a.onShow, onHide = _a.onHide;
+    return (_jsx(PromptContext.Provider, __assign({ value: { showPrompt: onShow } }, { children: _jsxs(_Fragment, { children: [children, _jsx(Prompt, __assign({}, promptArgs, { onClose: onHide }))] }) })));
 }
 export function usePrompt() {
     return useContext(PromptContext);
 }
-export default PromptProvider;

package/ToastPrompt/types.d.ts

@@ -0,0 +1,35 @@
+import { CSSProperties, ReactNode } from "react";
+import { SnackbarCloseReason } from "@mui/material/Snackbar";
+import { SvgIconComponent } from "@mui/icons-material";
+export declare type Variant = "success" | "warning" | "info" | "error";
+export declare type PromptStyles = Record<Variant, {
+    backgroundColor: CSSProperties["color"];
+}>;
+export declare type PromptIcons = Record<Variant, SvgIconComponent>;
+declare type PromptArgs = {
+    message: string;
+    variant: Variant;
+    timeout: number;
+};
+export interface InterfaceStates {
+    promptArgs: PromptArgs & Record<"open", boolean>;
+    onHide: (_: any, reason: SnackbarCloseReason) => void;
+    onShow: (args: PromptArgs) => void;
+}
+export interface PromptProps extends PromptArgs {
+    open: boolean;
+    icon?: SvgIconComponent;
+    onClose: InterfaceStates["onHide"];
+}
+export interface PromptStates {
+    styles: PromptStyles;
+    icons: PromptIcons;
+    icon: SvgIconComponent;
+}
+export interface PromptProviderProps {
+    children: ReactNode;
+}
+export interface PromptContextProps {
+    showPrompt: InterfaceStates["onShow"];
+}
+export {};

package/ToastPrompt/types.js

@@ -0,0 +1 @@
+export {};

package/ToastPrompt/useInteractions.d.ts

@@ -0,0 +1,14 @@
+declare function useInteractions(): {
+    promptArgs: {
+        message: string;
+        variant: import("./types").Variant;
+        timeout: number;
+    } & Record<"open", boolean>;
+    onShow: (args: {
+        message: string;
+        variant: import("./types").Variant;
+        timeout: number;
+    }) => void;
+    onHide: (_: any, reason: import("@mui/material").SnackbarCloseReason) => void;
+};
+export default useInteractions;

package/ToastPrompt/useInteractions.js

@@ -0,0 +1,33 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { useState, useCallback } from "react";
+function useInteractions() {
+    var ERROR_MESSAGE = "Internal Server Error";
+    var _a = useState({
+        open: false,
+        message: "Saved",
+        variant: "success",
+        timeout: 3500
+    }), promptArgs = _a[0], setPromptArgs = _a[1];
+    var onHide = useCallback(function (_, reason) {
+        if (reason === "clickaway") {
+            return;
+        }
+        setPromptArgs(function (args) { return (__assign(__assign({}, args), { open: false })); });
+    }, []);
+    var onShow = useCallback(function (args) {
+        var _a = args.message, message = _a === void 0 ? "Unknown message" : _a, _b = args.variant, variant = _b === void 0 ? "info" : _b, _c = args.timeout, timeout = _c === void 0 ? 3500 : _c;
+        setPromptArgs({ open: true, message: message, variant: variant, timeout: timeout });
+    }, []);
+    return { promptArgs: promptArgs, onShow: onShow, onHide: onHide };
+}
+export default useInteractions;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.3.11-alpha.2",
+  "version": "1.3.11-alpha.4",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",

package/ToastPrompt/Logics.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-interface LogicsProps {
-    children: React.ReactNode | undefined;
-}
-export interface PromptPropsType {
-    open: boolean;
-    message: string | number;
-    variant: "success" | "warning" | "error" | "info" | undefined;
-    timeout: number;
-}
-declare const Logics: import("react").ForwardRefExoticComponent<LogicsProps & import("react").RefAttributes<unknown>>;
-export default Logics;

package/ToastPrompt/Logics.js

@@ -1,37 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { useState, cloneElement, forwardRef, useImperativeHandle } from "react";
-var ERROR_MESSAGE = "Internal Server Error";
-var Logics = forwardRef(function (props, ref) {
-    var children = props.children;
-    var _a = useState({
-        open: false,
-        message: "Saved",
-        variant: "success",
-        timeout: 3500
-    }), promptProps = _a[0], setPromptProps = _a[1];
-    function hide(_, reason) {
-        if (reason === "clickaway") {
-            return;
-        }
-        setPromptProps(__assign(__assign({}, promptProps), { open: false }));
-    }
-    function show(type, message, timeout) {
-        if (timeout === void 0) { timeout = 3500; }
-        setPromptProps(__assign(__assign({}, promptProps), { open: true, variant: type, message: message === 400 ? ERROR_MESSAGE : message, timeout: timeout }));
-    }
-    useImperativeHandle(ref, function () { return ({
-        show: show
-    }); });
-    return cloneElement(children, __assign(__assign({}, promptProps), { onClose: hide }));
-});
-export default Logics;

package/ToastPrompt/Presentation.d.ts

@@ -1,16 +0,0 @@
-import { ElementType } from "react";
-import { SlideProps } from "@mui/material/Slide";
-import { SnackbarOrigin } from "@mui/material/Snackbar";
-interface ToastPromptProps {
-    open?: boolean;
-    vertical?: SnackbarOrigin["vertical"];
-    horizontal?: SnackbarOrigin["horizontal"];
-    timeout?: number;
-    onClose?: () => void;
-    transitionDirection?: SlideProps["direction"];
-    message?: string;
-    icon?: ElementType;
-    variant?: "success" | "warning" | "info" | "error";
-}
-declare const ToastPrompt: (props: ToastPromptProps) => JSX.Element;
-export default ToastPrompt;