react-misc-toolbox
Version:
[ ] imageviewer | gradual scroll [ ] imageviewer | cancellable scroll
262 lines (229 loc) • 9.89 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _recompose = require('recompose');
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _SVGCancel = require('./svg/SVGCancel');
var _SVGCancel2 = _interopRequireDefault(_SVGCancel);
var _helperFunctions = require('./helperFunctions');
var _defaultStyles = require('./defaultStyles');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var ModalDialog = function ModalDialog(_ref) {
var closeModal = _ref.closeModal,
_ref$useStyleTemplate = _ref.useStyleTemplate,
useStyleTemplate = _ref$useStyleTemplate === undefined ? 'default' : _ref$useStyleTemplate,
customStyleTemplate = _ref.customStyleTemplate,
style = _ref.style,
className = _ref.className,
_onClick6 = _ref.onClick,
onMount = _ref.onMount,
onUnmount = _ref.onUnmount,
isExposed = _ref.isExposed,
dataTestId = _ref.dataTestId,
renderBody = _ref.renderBody,
renderHeader = _ref.renderHeader,
noCloseModalButton = _ref.noCloseModalButton,
renderButtons = _ref.renderButtons,
renderCloseModalButton = _ref.renderCloseModalButton;
(0, _react.useEffect)(function () {
document.addEventListener('keydown', function cb(e) {
if (e.keyCode === 27) {
e.currentTarget.removeEventListener(e.type, cb);
closeModal();
}
});
if (typeof window !== 'undefined' && !isExposed) {
window.modalCount ? window.modalCount++ : window.modalCount = 1;
console.log('window.modalCount', window.modalCount);
onMount && onMount();
}
return function () {
if (typeof window !== 'undefined' && !isExposed) {
window.modalCount ? window.modalCount-- : window.modalCount = 0;
console.log('window.modalCount', window.modalCount);
if (window.modalCount === 0) {
onUnmount && onUnmount();
}
}
};
}, []);
var styleTemplate = customStyleTemplate ? customStyleTemplate : useStyleTemplate ? _defaultStyles.modalStyleTemplates[useStyleTemplate] : {};
var getHeaderProps = function getHeaderProps() {
var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _onClick = _ref2.onClick,
className = _ref2.className,
_ref2$style = _ref2.style,
style = _ref2$style === undefined ? {} : _ref2$style,
props = (0, _objectWithoutProperties3.default)(_ref2, ['onClick', 'className', 'style']);
return (0, _extends3.default)({
onClick: function onClick(e) {
for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
e.stopPropagation();
_onClick && _onClick.apply(undefined, [e].concat(args));
},
className: className ? 'modal__header ' + className : 'modal__header',
style: (0, _extends3.default)({}, styleTemplate.getHeader({
hasCloseModalButton: !Boolean(noCloseModalButton)
}), style)
}, props);
};
var getCloseModalButtonProps = function getCloseModalButtonProps() {
var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _onClick2 = _ref3.onClick,
className = _ref3.className,
_ref3$style = _ref3.style,
style = _ref3$style === undefined ? {} : _ref3$style,
props = (0, _objectWithoutProperties3.default)(_ref3, ['onClick', 'className', 'style']);
return (0, _extends3.default)({
onClick: function onClick(e) {
for (var _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
args[_key2 - 1] = arguments[_key2];
}
e.stopPropagation();
closeModal();
_onClick2 && _onClick2.apply(undefined, [e].concat(args));
},
className: className ? 'modal__closemodalbutton ' + className : 'modal__closemodalbutton',
style: (0, _extends3.default)({}, styleTemplate.closemodalbutton, style)
}, props);
};
var getBodyProps = function getBodyProps() {
var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _onClick3 = _ref4.onClick,
className = _ref4.className,
_ref4$style = _ref4.style,
style = _ref4$style === undefined ? {} : _ref4$style,
props = (0, _objectWithoutProperties3.default)(_ref4, ['onClick', 'className', 'style']);
return (0, _extends3.default)({
onClick: function onClick(e) {
for (var _len3 = arguments.length, args = Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
args[_key3 - 1] = arguments[_key3];
}
e.stopPropagation();
_onClick3 && _onClick3.apply(undefined, [e].concat(args));
},
className: className ? 'modal__body ' + className : 'modal__body',
style: (0, _extends3.default)({}, styleTemplate.getBody({
hasCloseModalButton: !Boolean(noCloseModalButton),
hasHeader: Boolean(renderHeader),
hasFooter: Boolean(renderButtons)
}), style)
}, props);
};
var getButtonsProps = function getButtonsProps() {
var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _onClick4 = _ref5.onClick,
className = _ref5.className,
_ref5$style = _ref5.style,
style = _ref5$style === undefined ? {} : _ref5$style,
props = (0, _objectWithoutProperties3.default)(_ref5, ['onClick', 'className', 'style']);
return (0, _extends3.default)({
onClick: function onClick(e) {
for (var _len4 = arguments.length, args = Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
args[_key4 - 1] = arguments[_key4];
}
e.stopPropagation();
_onClick4 && _onClick4.apply(undefined, [e].concat(args));
},
className: className ? 'modal__buttons ' + className : 'modal__buttons',
style: (0, _extends3.default)({}, styleTemplate.buttons, style)
}, props);
};
var getButtonProps = function getButtonProps() {
var _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _onClick5 = _ref6.onClick,
className = _ref6.className,
_ref6$style = _ref6.style,
style = _ref6$style === undefined ? {} : _ref6$style,
props = (0, _objectWithoutProperties3.default)(_ref6, ['onClick', 'className', 'style']);
return (0, _extends3.default)({
onClick: function onClick(e) {
for (var _len5 = arguments.length, args = Array(_len5 > 1 ? _len5 - 1 : 0), _key5 = 1; _key5 < _len5; _key5++) {
args[_key5 - 1] = arguments[_key5];
}
e.stopPropagation();
_onClick5 && _onClick5.apply(undefined, [e].concat(args));
},
className: className ? 'modal__button ' + className : 'modal__button',
style: (0, _extends3.default)({}, styleTemplate.button, style)
}, props);
};
var getContainerProps = function getContainerProps() {
return {
'data-testid': dataTestId,
onClick: function onClick(e) {
for (var _len6 = arguments.length, args = Array(_len6 > 1 ? _len6 - 1 : 0), _key6 = 1; _key6 < _len6; _key6++) {
args[_key6 - 1] = arguments[_key6];
}
e.stopPropagation();
_onClick6 && _onClick6.apply(undefined, [e].concat(args));
},
className: className ? 'modal__container ' + className : 'modal__container',
style: (0, _extends3.default)({}, styleTemplate.container, style)
};
};
return _react2.default.createElement(
_react2.default.Fragment,
null,
_react2.default.createElement(
'div',
(0, _extends3.default)({}, getContainerProps()),
renderCloseModalButton && renderCloseModalButton({ getCloseModalButtonProps: getCloseModalButtonProps }),
!noCloseModalButton && !renderCloseModalButton && _react2.default.createElement(
'div',
(0, _extends3.default)({}, getCloseModalButtonProps()),
_react2.default.createElement(_SVGCancel2.default, null)
),
renderHeader && (typeof renderHeader === 'function' ? renderHeader({ getHeaderProps: getHeaderProps }) : _react2.default.createElement(
'div',
(0, _extends3.default)({}, getHeaderProps()),
renderHeader
)),
typeof renderBody === 'function' ? renderBody({ getBodyProps: getBodyProps }) : _react2.default.createElement(
'div',
(0, _extends3.default)({}, getBodyProps()),
renderBody
),
renderButtons && renderButtons({ getButtonsProps: getButtonsProps, getButtonProps: getButtonProps, closeModal: closeModal })
)
);
};
var hideScrollBar = function hideScrollBar() {
return (0, _helperFunctions.styleElement)('body', {
overflow: 'hidden'
});
};
var showScrollBar = function showScrollBar() {
return (0, _helperFunctions.styleElement)('body', {
overflow: 'auto'
});
};
var enhance = (0, _recompose.compose)();
ModalDialog.propTypes = {
buttons: _propTypes2.default.object
};
ModalDialog.defaultProps = {
useStyleTemplate: 'default',
noCloseModalButton: false,
dataTestId: '',
classNameAppend: '',
classNameOverride: '',
style: {},
onMount: function onMount() {
return null;
},
onUnmount: function onUnmount() {
return null;
}
};
exports.default = enhance(ModalDialog);