@symply.io/basic-components 1.3.11-alpha.5 → 1.3.11-alpha.6

package/ToastPrompt/Prompt.js

@@ -1,14 +1,3 @@
-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 { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import Slide from "@mui/material/Slide";
@@ -22,14 +11,13 @@ 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 Transition = function (args) {
-    return _jsx(Slide, __assign({}, args, { direction: "up" }));
+const Transition = (args) => {
+    return _jsx(Slide, { ...args, direction: "up" });
 };
-function Prompt(props) {
-    var _a;
-    var open = props.open, icon = props.icon, variant = props.variant, message = props.message, timeout = props.timeout, onClose = props.onClose;
-    var theme = useCustomTheme();
-    var styles = useMemo(function () { return ({
+export function Prompt(props) {
+    const { open, icon, variant, message, timeout, onClose } = props;
+    const theme = useCustomTheme();
+    const styles = useMemo(() => ({
         success: {
             backgroundColor: green[500]
         },
@@ -42,31 +30,34 @@ function Prompt(props) {
         warning: {
             backgroundColor: amber["A700"]
         }
-    }); }, []);
-    var VariantIcon = useMemo(function () { return ({
+    }), []);
+    const VariantIcon = useMemo(() => ({
         success: SuccessIcon,
         warning: WarningIcon,
         error: ErrorIcon,
         info: InfoIcon
-    }); }, []);
-    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: {
+    }), []);
+    const Icon = useMemo(() => VariantIcon[variant], []);
+    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(Snackbar, { anchorOrigin: { vertical: "bottom", horizontal: "left" }, open: open, onClose: onClose, autoHideDuration: timeout, TransitionComponent: Transition, sx: {
                 zIndex: 99999,
                 marginTop: "3vh"
-            } }, { children: _jsx(SnackbarContent, { sx: __assign(__assign({}, styles[variant]), { root: (_a = {},
-                        _a[theme.breakpoints.down("sm")] = {
+            }, children: _jsx(SnackbarContent, { sx: {
+                    ...styles[variant],
+                    root: {
+                        [theme.breakpoints.down("sm")]: {
                             maxWidth: "320px",
                             borderRadius: "4px"
-                        },
-                        _a) }), "aria-describedby": "Toast", message: _jsxs(Typography, __assign({ id: "Toast", component: "span", sx: {
+                        }
+                    }
+                }, "aria-describedby": "Toast", message: _jsxs(Typography, { id: "Toast", component: "span", sx: {
                         fontSize: 14,
                         fontWeight: 700,
                         display: "flex",
                         alignItems: "center"
-                    } }, { children: [!icon ? (_jsx(Icon, { sx: {
+                    }, children: [!icon ? (_jsx(Icon, { sx: {
                                 fontSize: 20,
                                 opacity: 0.9,
                                 marginRight: theme.spacing(1)
-                            } })) : (_jsx(_Fragment, { children: icon })), message] })) }) }), "".concat(Date.now() * Math.round(Math.random()))) })));
+                            } })) : (_jsx(_Fragment, { children: icon })), message] }) }) }, `${Date.now() * Math.round(Math.random())}`) }));
 }
 export default Prompt;

package/ToastPrompt/index.d.ts

@@ -1,4 +1,4 @@
-import Prompt from "./Prompt";
+import { Prompt } from "./Prompt";
 import { PromptProviderProps, PromptContextProps } from "./types";
 export declare function PromptProvider(props: PromptProviderProps): JSX.Element;
 export declare function usePrompt(): PromptContextProps;

package/ToastPrompt/index.js

@@ -1,25 +1,14 @@
-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 { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
-import Prompt from "./Prompt";
+import { Prompt } from "./Prompt";
 import useInteractions from "./useInteractions";
-var PromptContext = createContext({
-    showPrompt: function () { }
+const PromptContext = createContext({
+    showPrompt: () => { }
 });
 export function PromptProvider(props) {
-    var children = props.children;
-    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 }))] }) })));
+    const { children } = props;
+    const { promptArgs, onShow, onHide } = useInteractions();
+    return (_jsx(PromptContext.Provider, { value: { showPrompt: onShow }, children: _jsxs(_Fragment, { children: [children, _jsx(Prompt, { ...promptArgs, onClose: onHide })] }) }));
 }
 export function usePrompt() {
     return useContext(PromptContext);

package/ToastPrompt/useInteractions.js

@@ -1,33 +1,22 @@
-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({
+    const ERROR_MESSAGE = "Internal Server Error";
+    const [promptArgs, setPromptArgs] = useState({
         open: false,
         message: "Saved",
         variant: "success",
         timeout: 3500
-    }), promptArgs = _a[0], setPromptArgs = _a[1];
-    var onHide = useCallback(function (_, reason) {
+    });
+    const onHide = useCallback((_, reason) => {
         if (reason === "clickaway") {
             return;
         }
-        setPromptArgs(function (args) { return (__assign(__assign({}, args), { open: false })); });
+        setPromptArgs(args => ({ ...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 });
+    const onShow = useCallback(args => {
+        const { message = "Unknown message", variant = "info", timeout = 3500 } = args;
+        setPromptArgs({ open: true, message, variant, timeout });
     }, []);
-    return { promptArgs: promptArgs, onShow: onShow, onHide: onHide };
+    return { promptArgs, onShow, onHide };
 }
 export default useInteractions;

package/VideoPlayerModal/index.js

@@ -1,25 +1,3 @@
-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);
-};
-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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ReactPlayer from "react-player";
 import Grid from "@mui/material/Grid";
@@ -32,12 +10,12 @@ import useMediaQuery from "@mui/material/useMediaQuery";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useCustomTheme from "../useCustomTheme";
 function VideoPlayerModal(props) {
-    var url = props.url, _a = props.pip, pip = _a === void 0 ? false : _a, _b = props.open, open = _b === void 0 ? false : _b, title = props.title, onClose = props.onClose, _c = props.extraButtons, extraButtons = _c === void 0 ? [] : _c, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, playerProps = __rest(props, ["url", "pip", "open", "title", "onClose", "extraButtons", "primaryColor", "secondaryColor"]);
-    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
-    var fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(Dialog, __assign({ open: open, fullScreen: fullScreen, onClose: onClose, fullWidth: true, maxWidth: "lg", "aria-labelledby": "react-video-dialog" }, { children: [title && _jsx(DialogTitle, { children: title }), _jsx(DialogContent, { children: _jsx(ReactPlayer, __assign({ controls: true, url: url, style: { minHeight: "480px" }, width: "100%", config: {
+    const { url, pip = false, open = false, title, onClose, extraButtons = [], primaryColor, secondaryColor, ...playerProps } = props;
+    const theme = useCustomTheme({ primaryColor, secondaryColor });
+    const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
+    return (_jsx(ThemeProvider, { theme: theme, children: _jsxs(Dialog, { open: open, fullScreen: fullScreen, onClose: onClose, fullWidth: true, maxWidth: "lg", "aria-labelledby": "react-video-dialog", children: [title && _jsx(DialogTitle, { children: title }), _jsx(DialogContent, { children: _jsx(ReactPlayer, { controls: true, url: url, style: { minHeight: "480px" }, width: "100%", config: {
                             file: { attributes: { disablePictureInPicture: !pip } }
-                        } }, playerProps)) }), _jsx(DialogActions, { children: _jsxs(Grid, __assign({ container: true, direction: "row", justifyContent: "flex-end", alignItems: "center", spacing: 1 }, { children: [extraButtons.map(function (buttonProps, index) { return (_jsx(Grid, __assign({ item: true, xs: 12, md: 3, lg: 2 }, { children: _jsx(Button, __assign({}, buttonProps)) }), "extraButton_".concat(index))); }), _jsx(Grid, __assign({ item: true, xs: 12, md: 2, lg: 1 }, { children: _jsx(Button, __assign({ variant: "outlined", fullWidth: true, color: "secondary", onClick: onClose }, { children: "Close" })) }))] })) })] })) })));
+                        }, ...playerProps }) }), _jsx(DialogActions, { children: _jsxs(Grid, { container: true, direction: "row", justifyContent: "flex-end", alignItems: "center", spacing: 1, children: [extraButtons.map((buttonProps, index) => (_jsx(Grid, { item: true, xs: 12, md: 3, lg: 2, children: _jsx(Button, { ...buttonProps }) }, `extraButton_${index}`))), _jsx(Grid, { item: true, xs: 12, md: 2, lg: 1, children: _jsx(Button, { variant: "outlined", fullWidth: true, color: "secondary", onClick: onClose, children: "Close" }) })] }) })] }) }));
 }
 export default VideoPlayerModal;
 export * from "./types";

package/package.json

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

package/useCustomTheme.js

@@ -1,18 +1,7 @@
-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 { createTheme } from "@mui/material/styles";
 function useCustomTheme(props) {
-    var _a = props || {}, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor;
-    var themeOptions = {
+    const { primaryColor, secondaryColor } = props || {};
+    const themeOptions = {
         components: {
             MuiButton: {
                 styleOverrides: {
@@ -34,13 +23,19 @@ function useCustomTheme(props) {
     };
     if (!!primaryColor || !!secondaryColor) {
         if (!!primaryColor) {
-            themeOptions.palette = __assign(__assign({}, themeOptions.palette), { primary: { main: primaryColor } });
+            themeOptions.palette = {
+                ...themeOptions.palette,
+                primary: { main: primaryColor }
+            };
         }
         if (!!secondaryColor) {
-            themeOptions.palette = __assign(__assign({}, themeOptions.palette), { secondary: { main: secondaryColor } });
+            themeOptions.palette = {
+                ...themeOptions.palette,
+                secondary: { main: secondaryColor }
+            };
         }
     }
-    var theme = createTheme(themeOptions);
+    const theme = createTheme(themeOptions);
     return theme;
 }
 export default useCustomTheme;

package/utils/uuid.js

@@ -1,5 +1,4 @@
-function generateUUID(length) {
-    if (length === void 0) { length = 32; }
+function generateUUID(length = 32) {
     if (length < 16)
         throw new Error("Length should be equal or greater than 16");
     function UUID() {
@@ -24,28 +23,28 @@ function generateUUID(length) {
         this.rand = "";
     }
     UUID.prototype = {
-        getRandomUInt: function () {
-            var s = "";
-            this.chars.sort(function () {
+        getRandomUInt() {
+            let s = "";
+            this.chars.sort(() => {
                 return Date.now() % (Math.random() * length * 23) >
                     Math.random() * 7 * length
                     ? -1
                     : 1;
             });
-            for (var i = 0; i < this.chars.length; i += 1) {
+            for (let i = 0; i < this.chars.length; i += 1) {
                 s = s.concat(this.chars[i]);
             }
             return s;
         },
-        getRandomChars: function () {
+        getRandomChars() {
             this.rand = Date.now().toString(16).concat(this.getRandomUInt());
             return this.rand;
         },
-        generate: function () {
-            var id = Date.now().toString();
-            var idLen = id.length;
+        generate() {
+            let id = Date.now().toString();
+            const idLen = id.length;
             this.getRandomChars();
-            for (var i = 0; i < length - idLen; i += 1) {
+            for (let i = 0; i < length - idLen; i += 1) {
                 id = id.concat(this.rand.charAt(Math.floor(Math.random() * this.rand.length)));
             }
             return id.toString();