@symply.io/basic-components 1.4.0 → 1.4.1-alpha.1

package/BasicModal/index.js

@@ -9,6 +9,42 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 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)
@@ -20,32 +56,61 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, forwardRef, cloneElement, useRef } from "react";
 import Grid from "@mui/material/Grid";
+import Button from "@mui/material/Button";
 import Dialog from "@mui/material/Dialog";
+import IconButton from "@mui/material/IconButton";
+import DialogTitle from "@mui/material/DialogTitle";
 import Slide from "@mui/material/Slide";
 import useMediaQuery from "@mui/material/useMediaQuery";
+import DialogContent from "@mui/material/DialogContent";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContentText from "@mui/material/DialogContentText";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
-import Content from "./Content";
+import CloseIcon from "@mui/icons-material/Close";
 import useCustomTheme from "../useCustomTheme";
 var Transition = forwardRef(function Transition(props, ref) {
     return _jsx(Slide, __assign({ direction: "up" }, props, { ref: ref }));
 });
 function BasicModal(props) {
-    var onClose = props.onClose, onSubmit = props.onSubmit, _a = props.maxWidth, maxWidth = _a === void 0 ? "sm" : _a, _b = props.open, open = _b === void 0 ? false : _b, _c = props.noForm, noForm = _c === void 0 ? false : _c, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["onClose", "onSubmit", "maxWidth", "open", "noForm", "primaryColor", "secondaryColor"]);
+    var _this = this;
+    var desc = props.desc, title = props.title, loading = props.loading, buttons = props.buttons, _a = props.open, open = _a === void 0 ? false : _a, _b = props.noForm, noForm = _b === void 0 ? false : _b, children = props.children, disabled = props.disabled, _c = props.maxWidth, maxWidth = _c === void 0 ? "sm" : _c, _d = props.color, color = _d === void 0 ? "primary" : _d, _e = props.submitText, submitText = _e === void 0 ? "Save" : _e, _f = props.cancelText, cancelText = _f === void 0 ? "Cancel" : _f, _g = props.hideBottomButtons, hideBottomButtons = _g === void 0 ? false : _g, _h = props.showTopRightCloseButton, showTopRightCloseButton = _h === void 0 ? false : _h, onClose = props.onClose, onSubmit = props.onSubmit, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["desc", "title", "loading", "buttons", "open", "noForm", "children", "disabled", "maxWidth", "color", "submitText", "cancelText", "hideBottomButtons", "showTopRightCloseButton", "onClose", "onSubmit", "primaryColor", "secondaryColor"]);
+    var formRef = useRef(null);
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Dialog, __assign({ disableEnforceFocus: true, open: open, onClose: function (_, reason) {
+    var onFormSubmit = useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
+        var allValid;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!formRef.current) return [3, 3];
+                    allValid = formRef.current.checkValidity();
+                    if (!!allValid) return [3, 1];
+                    formRef.current.reportValidity();
+                    return [3, 3];
+                case 1: return [4, onSubmit()];
+                case 2:
+                    _a.sent();
+                    _a.label = 3;
+                case 3: return [2];
+            }
+        });
+    }); }, []);
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(Dialog, __assign({ disableEnforceFocus: true, open: open, onClose: function (_, reason) {
                 if (reason !== "backdropClick") {
                     onClose();
                 }
-            }, maxWidth: maxWidth, fullWidth: true, TransitionComponent: Transition, "aria-labelledby": "form-dialog-title", fullScreen: fullScreen, disableEscapeKeyDown: true }, { children: _jsx(Grid, __assign({ component: noForm ? "div" : "form", onSubmit: noForm
-                    ? undefined
-                    : function (e) {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        onSubmit();
-                    } }, { children: _jsx(Content, __assign({}, rest, { noForm: noForm, onClose: onClose, onSubmit: onSubmit })) })) })) })));
+            }, maxWidth: maxWidth, fullWidth: true, TransitionComponent: Transition, "aria-labelledby": "form-dialog-title", fullScreen: fullScreen, disableEscapeKeyDown: true }, rest, { children: [_jsxs(DialogTitle, __assign({ sx: {
+                        "& > span": {
+                            fontWeight: "700!important"
+                        }
+                    } }, { children: [_jsx("span", { children: title }), showTopRightCloseButton ? (_jsx(IconButton, __assign({ "aria-label": "close", onClick: onClose, sx: {
+                                position: "absolute",
+                                right: 8,
+                                top: 8,
+                                color: theme.palette.grey[500]
+                            } }, { children: _jsx(CloseIcon, {}) }))) : (_jsx(_Fragment, {}))] })), _jsx(DialogContent, __assign({ sx: { paddingTop: theme.spacing(1.25) } }, { children: _jsxs(Grid, __assign({ component: noForm ? "div" : "form", ref: noForm ? undefined : formRef }, { children: [desc && _jsx(DialogContentText, { children: desc }), Boolean(children) && cloneElement(children)] })) })), !hideBottomButtons && (_jsx(DialogActions, __assign({ sx: { padding: theme.spacing(1.25) } }, { children: _jsx(Grid, __assign({ container: true, spacing: 2, justifyContent: "flex-end", alignItems: "center", sx: { margin: 0 } }, { children: buttons || (_jsxs(_Fragment, { children: [_jsx(Grid, __assign({ item: true, xs: 12, md: 3, xl: 2 }, { children: _jsx(Button, __assign({ onClick: onClose, variant: "outlined", color: color, disabled: loading, fullWidth: true }, { children: cancelText })) })), _jsx(Grid, __assign({ item: true, xs: 12, md: 3, xl: 2 }, { children: _jsx(Button, __assign({ type: noForm ? "button" : "submit", onClick: noForm ? onSubmit : onFormSubmit, variant: "contained", color: color, disabled: loading || disabled, fullWidth: true }, { children: submitText })) }))] })) })) })))] })) })));
 }
 export default BasicModal;

package/BasicModal/types.d.ts

@@ -1,24 +1,20 @@
 import type { ReactNode, CSSProperties } from "react";
 import type { ButtonProps } from "@mui/material/Button";
-export interface BasicModalContentProps {
+import type { DialogProps } from "@mui/material/Dialog";
+export interface BasicModalProps extends DialogProps {
     children: ReactNode;
     color?: ButtonProps["color"];
-    title: string;
     desc?: string;
     loading?: boolean;
     disabled?: boolean;
     buttons?: ReactNode;
     submitText?: string;
     cancelText?: string;
-    showTopRightCloseButton?: boolean;
     hideBottomButtons?: boolean;
     noForm?: boolean;
-    onClose: () => void;
-    onSubmit: () => void;
-}
-export interface BasicModalProps extends BasicModalContentProps {
-    open?: boolean;
-    maxWidth?: "xs" | "sm" | "md" | "lg" | "xl";
+    onClose: () => unknown | Promise<unknown>;
+    onSubmit: () => unknown | Promise<unknown>;
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];
+    showTopRightCloseButton?: boolean;
 }

package/README.md

@@ -176,6 +176,8 @@ import AutocompleteWithFilter from '@symply.io/basic-components/AutocompleteWith
 
 Reusable modal component.
 
+It is extended from `@mui/material/Dialog`, so it includes all properties of `@mui/material/Dialog`.
+
 <h5>Import</h5>
 
 ```typescript
@@ -200,6 +202,7 @@ import BasicModal from '@symply.io/basic-components/BasicModal';
 | onClose                 | func                                                         |           | true     | Callback fired when the cancel button requests to be clicked.<br />**Signature:**<br/>`function() => void` |
 | onSubmit                | func                                                         |           | true     | Callback fired when the submit button requests to be clicked.<br />**Signature:**<br/>`function() => void` |
 | open                    | bool                                                         | false     | true     | If `true`, the component is shown.                           |
+| scroll                  | 'body' \| 'paper'                                            | 'paper'   | false    | Determine the container for scrolling the dialog.            |
 | showTopRightCloseButton | bool                                                         | false     | false    | If `true`, show a close icon button at the top right of the modal. |
 | submitText              | string                                                       | ‘Save’    | false    | The text of the submit button.                               |
 | title                   | string                                                       |           | true     | The title of the component, to show at the top left.         |

package/package.json

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

package/BasicModal/Content.d.ts

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

package/BasicModal/Content.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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { cloneElement } from "react";
-import useTheme from "@mui/material/styles/useTheme";
-import DialogTitle from "@mui/material/DialogTitle";
-import DialogContent from "@mui/material/DialogContent";
-import DialogActions from "@mui/material/DialogActions";
-import DialogContentText from "@mui/material/DialogContentText";
-import Button from "@mui/material/Button";
-import IconButton from "@mui/material/IconButton";
-import CloseIcon from "@mui/icons-material/Close";
-import Grid from "@mui/material/Grid";
-function Content(props) {
-    var children = props.children, title = props.title, desc = props.desc, _a = props.color, color = _a === void 0 ? "primary" : _a, loading = props.loading, disabled = props.disabled, buttons = props.buttons, _b = props.submitText, submitText = _b === void 0 ? "Save" : _b, _c = props.cancelText, cancelText = _c === void 0 ? "Cancel" : _c, _d = props.showTopRightCloseButton, showTopRightCloseButton = _d === void 0 ? false : _d, _e = props.hideBottomButtons, hideBottomButtons = _e === void 0 ? false : _e, _f = props.noForm, noForm = _f === void 0 ? false : _f, onClose = props.onClose, onSubmit = props.onSubmit;
-    var theme = useTheme();
-    return (_jsxs(_Fragment, { children: [_jsxs(DialogTitle, __assign({ sx: {
-                    "& > span": {
-                        fontWeight: "700!important"
-                    }
-                } }, { children: [_jsx("span", { children: title }), showTopRightCloseButton ? (_jsx(IconButton, __assign({ "aria-label": "close", onClick: onClose, sx: {
-                            position: "absolute",
-                            right: 8,
-                            top: 8,
-                            color: theme.palette.grey[500]
-                        } }, { children: _jsx(CloseIcon, {}) }))) : null] })), _jsxs(DialogContent, __assign({ sx: { paddingTop: theme.spacing(1.25) } }, { children: [desc && _jsx(DialogContentText, { children: desc }), Boolean(children) && cloneElement(children)] })), !hideBottomButtons && (_jsx(DialogActions, __assign({ sx: { padding: theme.spacing(1.25) } }, { children: _jsx(Grid, __assign({ container: true, spacing: 2, justifyContent: "flex-end", alignItems: "center", sx: { margin: 0 } }, { children: buttons || (_jsxs(_Fragment, { children: [_jsx(Grid, __assign({ item: true, xs: 12, md: 3, xl: 2 }, { children: _jsx(Button, __assign({ onClick: onClose, variant: "outlined", color: color, disabled: loading, fullWidth: true }, { children: cancelText })) })), _jsx(Grid, __assign({ item: true, xs: 12, md: 3, xl: 2 }, { children: _jsx(Button, __assign({ type: noForm ? "button" : "submit", onClick: noForm ? onSubmit : undefined, variant: "contained", color: color, disabled: loading || disabled, fullWidth: true }, { children: submitText })) }))] })) })) })))] }));
-}
-export default Content;