oneframe-react
Version:
Oneframe React ## Components, Hooks, Helper Functions & State Management
78 lines (77 loc) • 4.73 kB
JavaScript
;
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result["default"] = mod;
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const core_1 = require("@material-ui/core");
const Form_1 = __importDefault(require("../Form"));
const lodash_1 = require("lodash");
const prop_types_1 = __importDefault(require("prop-types"));
const ModalComponent = (props) => {
const { fullWidth, fullScreen, maxWidth, disableBackdropClick, disableEscapeKeyDown, onBackdropClick, onEscapeKeyDown, onEnter, onEntered, onEntering, onExit, onExited, onExiting, onClose, scroll, formSubmit, title, show, footer, children, } = props;
const initialState = {
open: false,
};
const [state, setState] = react_1.useState(initialState);
const handleClose = () => {
setState((prevState) => (Object.assign(Object.assign({}, prevState), { open: false })));
onClose && onClose();
};
react_1.useEffect(() => {
setState((prevState) => (Object.assign(Object.assign({}, prevState), { open: show })));
}, [show, setState]);
const renderDialogContent = () => {
return (react_1.default.createElement(react_1.default.Fragment, null,
title && (react_1.default.createElement(core_1.DialogTitle, { id: "max-width-dialog-title", className: `oneframe-modal-title` },
title,
react_1.default.createElement("div", { style: {
position: 'absolute',
right: 20,
top: 10,
cursor: 'pointer',
}, onClick: () => handleClose() },
react_1.default.createElement("i", { className: "fal fa-times" })))),
react_1.default.createElement(core_1.DialogContent, { className: `oneframe-modal-body` }, children),
footer && react_1.default.createElement(core_1.DialogActions, { className: `oneframe-modal-footer` }, footer)));
};
const renderDialog = () => {
if (formSubmit) {
return react_1.default.createElement(Form_1.default, { onSubmit: formSubmit }, renderDialogContent());
}
return renderDialogContent();
};
return (react_1.default.createElement(core_1.Dialog, { fullWidth: maxWidth ? true : fullWidth || false, fullScreen: fullScreen, maxWidth: maxWidth || false, open: state.open, scroll: scroll, onClose: handleClose, "aria-labelledby": "max-width-dialog-title", keepMounted: true, disableBackdropClick: disableBackdropClick || undefined, disableEscapeKeyDown: disableEscapeKeyDown || undefined, onBackdropClick: () => (onBackdropClick ? onBackdropClick() : {}), onEscapeKeyDown: () => (onEscapeKeyDown ? onEscapeKeyDown() : {}), onEnter: () => (onEnter ? onEnter() : {}), onEntered: () => (onEntered ? onEntered() : {}), onEntering: () => (onEntering ? onEntering() : {}), onExit: () => (onExit ? onExit() : {}), onExited: () => (onExited ? onExited() : {}), onExiting: () => (onExiting ? onExiting() : {}), className: `oneframe-modal` }, renderDialog()));
};
ModalComponent.propTypes = {
show: prop_types_1.default.bool.isRequired,
disableBackdropClick: prop_types_1.default.bool,
disableEscapeKeyDown: prop_types_1.default.bool,
fullWidth: prop_types_1.default.bool,
fullScreen: prop_types_1.default.bool,
children: prop_types_1.default.any.isRequired,
keepMounted: prop_types_1.default.any,
formSubmit: prop_types_1.default.any,
scroll: prop_types_1.default.oneOf(['body', 'paper', undefined]),
maxWidth: prop_types_1.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false, undefined]),
title: prop_types_1.default.oneOfType([prop_types_1.default.node, prop_types_1.default.string]),
footer: prop_types_1.default.oneOfType([prop_types_1.default.node, prop_types_1.default.string]),
onClose: prop_types_1.default.func,
onBackdropClick: prop_types_1.default.func,
onEnter: prop_types_1.default.func,
onEntered: prop_types_1.default.func,
onEntering: prop_types_1.default.func,
onExit: prop_types_1.default.func,
onExited: prop_types_1.default.func,
onExiting: prop_types_1.default.func,
onEscapeKeyDown: prop_types_1.default.func,
};
exports.ModalTmp = ModalComponent;
exports.default = react_1.default.memo(ModalComponent, (p, n) => lodash_1.isEqual(p, n));