1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 04:46:40 +07:00
vault-frontend/src/containers/dialogs/Modal/index.tsx
2019-10-16 12:46:52 +07:00

57 lines
1.6 KiB
TypeScript

import React, { Attributes, FC, useCallback } from 'react';
import { connect } from 'react-redux';
import ReactDOM from 'react-dom';
import * as styles from './styles.scss';
import { IState } from '~/redux/store';
import * as ACTIONS from '~/redux/modal/actions';
import { DIALOG_CONTENT, IDialogProps } from '~/redux/modal/constants';
const mapStateToProps = ({ modal }: IState) => ({ ...modal });
const mapDispatchToProps = {
modalSetShown: ACTIONS.modalSetShown,
modalSetDialog: ACTIONS.modalSetDialog,
modalShowDialog: ACTIONS.modalShowDialog,
};
type IProps = typeof mapDispatchToProps & ReturnType<typeof mapStateToProps> & {};
const ModalUnconnected: FC<IProps> = ({
modalSetShown,
modalSetDialog,
modalShowDialog,
is_shown,
dialog,
}) => {
const onRequestClose = useCallback(() => {
modalSetShown(false);
modalSetDialog(null);
}, [modalSetShown, modalSetDialog]);
if (!dialog || !DIALOG_CONTENT[dialog] || !is_shown) return null;
console.log({ onRequestClose });
return ReactDOM.createPortal(
<div className={styles.fixed}>
<div className={styles.overlay} onClick={onRequestClose} />
<div className={styles.content}>
<div className={styles.content_scroller}>
<div className={styles.content_padder}>
{React.createElement(DIALOG_CONTENT[dialog], {
onRequestClose,
onDialogChange: modalShowDialog,
})}
</div>
</div>
</div>
</div>,
document.body
);
};
const Modal = connect(
mapStateToProps,
mapDispatchToProps
)(ModalUnconnected);
export { ModalUnconnected, Modal };