[UI] Added modals component

Author: Jovert Lota Palonpon

resources/js/ui/Modal.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Confirmation } from './Modals';
+
+const Modal = props => {
+    const { type, ...other } = props;
+
+    switch (type) {
+        case 'confirmation':
+            return <Confirmation {...props} />;
+            break;
+    }
+};
+
+Modal.propTypes = {
+    type: PropTypes.oneOf(['confirmation']),
+    title: PropTypes.string.isRequired,
+    body: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+};
+
+export default Modal;

resources/js/ui/Modals/Confirmation.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogContentText,
+    DialogTitle,
+} from '@material-ui/core';
+
+const Confirmation = props => {
+    const {
+        title,
+        body,
+        confirmText,
+        confirmed,
+        cancelText,
+        cancelled,
+    } = props;
+
+    return (
+        <Dialog
+            open
+            onClose={cancelled}
+            aria-labelledby="alert-dialog-title"
+            aria-describedby="alert-dialog-description"
+        >
+            <DialogTitle id="alert-dialog-title">{title}</DialogTitle>
+
+            <DialogContent>
+                <DialogContentText id="alert-dialog-description">
+                    {body}
+                </DialogContentText>
+            </DialogContent>
+
+            <DialogActions>
+                <Button onClick={cancelled} color="primary">
+                    {cancelText ? cancelText : Lang.get('resources.cancel')}
+                </Button>
+
+                <Button onClick={confirmed} color="secondary" autoFocus>
+                    {confirmText ? confirmText : Lang.get('resources.confirm')}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+};
+
+Confirmation.propTypes = {
+    title: PropTypes.string.isRequired,
+    body: PropTypes.string.isRequired,
+    confirmText: PropTypes.string,
+    confirmed: PropTypes.func,
+    cancelText: PropTypes.string,
+    cancelled: PropTypes.func,
+};
+
+export default Confirmation;

resources/js/ui/Modals/index.js

@@ -0,0 +1 @@
+export { default as Confirmation } from './Confirmation';

resources/js/ui/index.js

@@ -1,3 +1,4 @@
+export { default as Modal } from './Modal';
 export { default as Snackbar } from './Snackbar';
 export { default as Table } from './Table';
 export { default as TableToolbar } from './TableToolbar/TableToolbar';