react-hook-modal
Version:
A custom modal, with a custom hook for modal handling in React App
265 lines (231 loc) • 7.31 kB
JavaScript
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var React__default = _interopDefault(React);
function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
var initialState = {
show: false,
component: null,
footer: null,
title: '',
dataProps: null,
width: null,
height: null,
closeOnBackgroundOrEsc: true,
resizable: false,
fullScreen: false,
animation: false,
darkMode: false
};
var ModalDataContext = React.createContext({
modalState: initialState,
setModalState: function setModalState(_state) {}
});
var ModalDataContextProvider = function ModalDataContextProvider(_ref) {
var children = _ref.children;
var _useState = React.useState(initialState),
modalState = _useState[0],
setModalState = _useState[1];
return React__default.createElement(ModalDataContext.Provider, {
value: {
modalState: modalState,
setModalState: setModalState
}
}, children);
};
var classes = {"Modal":"_3Dl45","backdrop":"_2LNQS","modal-container":"_2S9Jb","modal-up":"_1YXGy","header":"_20Bo6","close-btn":"_3QJal","body":"_3JTUa","footer":"_3775X","elipsis-text":"_21zHL"};
function Modal(_ref) {
var _styles$header;
var classContainer = _ref.classContainer,
_ref$styles = _ref.styles,
styles = _ref$styles === void 0 ? {
container: {
width: '40rem'
},
header: {},
body: {},
footer: {}
} : _ref$styles;
var modalRef = React.useRef();
var _useModal = useModal(),
modalState = _useModal.modalState,
closeModal = _useModal.closeModal;
var styleContainer = _extends({}, styles === null || styles === void 0 ? void 0 : styles.container);
if (modalState.width) {
styleContainer.width = modalState.width;
}
if (modalState.height) {
styleContainer.minHeight = modalState.height;
}
if (modalState.resizable) {
styleContainer.width = 'auto';
styleContainer.resize = 'both';
} else {
styleContainer.resize = 'unset';
}
if (modalState.fullScreen) {
styleContainer.width = '100vw';
styleContainer.height = '100vh';
styleContainer.maxHeight = '100vh';
styleContainer.maxWidth = '100vw';
styles.body = _extends({}, styles.body);
styles.body.maxHeight = '100vh';
}
if (!modalState.animation) {
styleContainer.animation = 'unset';
}
if (modalState.darkMode) {
styleContainer.backgroundColor = '#323232';
styleContainer.color = '#fff';
styles.header = _extends({}, styles.header, {
backgroundColor: '#1e1e1e',
color: '#fff'
});
}
var classToContainerModal = classes['modal-container'];
if (classContainer) {
classToContainerModal = classContainer;
styleContainer = {};
}
function onClickBackground() {
if (modalState.closeOnBackgroundOrEsc) {
closeModal();
}
}
function detectKey(e) {
if (e.key === 'Escape') {
onClickBackground();
}
}
React.useEffect(function () {
if (modalState.show) {
document.addEventListener('keydown', detectKey);
} else {
document.removeEventListener('keydown', detectKey);
}
return function () {
document.removeEventListener('keydown', detectKey);
};
}, [modalState.show]);
return React__default.createElement("div", {
id: 'modal-full-component',
ref: modalRef,
className: classes['Modal']
}, modalState.show && React__default.createElement("div", null, React__default.createElement("div", {
onClick: onClickBackground,
className: classes['backdrop']
}), React__default.createElement("div", {
className: classToContainerModal,
style: styleContainer
}, React__default.createElement("div", {
className: classes['header'],
style: styles === null || styles === void 0 ? void 0 : styles.header
}, React__default.createElement("div", {
style: {
maxWidth: '92%'
},
className: classes['elipsis-text']
}, modalState.title), React__default.createElement("div", {
className: classes['close-btn']
}, React__default.createElement("button", {
onClick: function onClick() {
return closeModal();
}
}, React__default.createElement("svg", {
style: {
fill: (styles === null || styles === void 0 ? void 0 : (_styles$header = styles.header) === null || _styles$header === void 0 ? void 0 : _styles$header.color) || 'inherit'
},
x: '0px',
y: '0px',
width: '16px',
height: '16px',
viewBox: '0 0 357 357'
}, React__default.createElement("g", null, React__default.createElement("g", {
id: 'clear'
}, React__default.createElement("polygon", {
points: '357,35.7 321.3,0 178.5,142.8 35.7,0 0,35.7 142.8,178.5 0,321.3 35.7,357 178.5,214.2 321.3,357 357,321.3\n214.2,178.5 \t\t'
}))))))), React__default.createElement("div", {
className: classes['body'],
style: styles === null || styles === void 0 ? void 0 : styles.body
}, modalState.component), modalState.footer && React__default.createElement("div", null, React__default.createElement("div", {
style: {
height: '64px'
}
}), React__default.createElement("div", {
className: classes['footer'],
style: styles === null || styles === void 0 ? void 0 : styles.footer
}, modalState.footer)))));
}
var initialModalState = {
show: false,
component: null,
title: '',
dataProps: null,
height: null,
width: null,
closeOnBackgroundOrEsc: false,
footer: null,
resizable: false,
fullScreen: false,
animation: false,
darkMode: false
};
var useModal = function useModal(closeCb) {
var _useContext = React.useContext(ModalDataContext),
modalState = _useContext.modalState,
setModalState = _useContext.setModalState;
var initRef = React.useRef(true);
React.useEffect(function () {
if (initRef.current) {
initRef.current = false;
return;
}
if (modalState.show === false && closeCb) {
closeCb(modalState.dataProps);
}
}, [modalState.show]);
function setComponentToRender(element, options) {
setModalState(_extends({}, modalState, {
show: true,
component: element
}, options));
}
var closeModal = function closeModal(data) {
setModalState(_extends({}, modalState, initialModalState, {
dataProps: data
}));
};
var setOptions = function setOptions(options) {
setModalState(_extends({}, modalState, options));
};
var setFooter = function setFooter(footer) {
setModalState(_extends({}, modalState, {
footer: footer
}));
};
return {
dataToProps: modalState.dataProps,
modalState: modalState,
setComponentToRender: setComponentToRender,
closeModal: closeModal,
setOptions: setOptions,
setFooter: setFooter
};
};
exports.Modal = Modal;
exports.ModalDataContext = ModalDataContext;
exports.ModalDataContextProvider = ModalDataContextProvider;
exports.useModal = useModal;
//# sourceMappingURL=index.js.map