104 lines
3.5 KiB
TypeScript
104 lines
3.5 KiB
TypeScript
/* eslint-disable */
|
|
import React, { memo, useMemo, useState } from 'react';
|
|
import classNames from 'classnames';
|
|
import Button from '@material-ui/core/Button';
|
|
import Typography from '@material-ui/core/Typography';
|
|
import useLang from '@Hooks/useLang';
|
|
import useMessage from '@Hooks/useMessage';
|
|
import useMappedState from '@Hooks/useMappedState';
|
|
import Modal from '@Components/Base/Modal';
|
|
import { DialogItemObject } from './types';
|
|
import Styles from './index.module.css';
|
|
|
|
/* Dialog Item */
|
|
function DialogItem(props: DialogItemObject): React.ReactElement {
|
|
/* Global & Local States */
|
|
const { i18n } = useLang();
|
|
const { dialog, requestRemoveDialog } = props;
|
|
const [hiddenDebugMessage, setHiddenDebugMessage] = useState(false);
|
|
/* Functions */
|
|
const onConfirmClick = (): void => {
|
|
if (dialog.onConfirm) dialog.onConfirm();
|
|
requestRemoveDialog();
|
|
};
|
|
/* Views */
|
|
return (
|
|
<div className={classNames(Styles.dialogItemContainer)}>
|
|
<div className={classNames(Styles.dialogItemTitle)}>
|
|
<Typography className={classNames(Styles.dialogItemTitleStyle)} variant="h2" color="textPrimary">
|
|
{dialog.typeTitle}
|
|
</Typography>
|
|
</div>
|
|
<div className={classNames(Styles.dialogItemSubTitle)}>
|
|
<Typography variant="body1" color="textPrimary" style={{ whiteSpace: 'pre-wrap' }}>
|
|
{dialog.typeContent && dialog.typeContent}
|
|
</Typography>
|
|
</div>
|
|
{dialog.typeHiddenMessage && hiddenDebugMessage && (
|
|
<div className={classNames(Styles.dialogItemDebug)}>
|
|
<Typography variant="body2" color="textSecondary" style={{ whiteSpace: 'pre-wrap' }}>
|
|
{dialog.typeHiddenMessage && dialog.typeHiddenMessage}
|
|
</Typography>
|
|
</div>
|
|
)}
|
|
<div className={classNames(Styles.dialogItemActionContainer)}>
|
|
{dialog.typeHiddenMessage && (
|
|
<Button
|
|
className={classNames(Styles.dialogItemDebugAction)}
|
|
variant="text"
|
|
color="primary"
|
|
onClick={() => setHiddenDebugMessage(!hiddenDebugMessage)}
|
|
>
|
|
{hiddenDebugMessage ? i18n.t('frontend.global.operation.debugopenclose') : i18n.t('frontend.global.operation.debugopen')}
|
|
</Button>
|
|
)}
|
|
<Button
|
|
className={classNames(Styles.dialogItemActionButtonStyle)}
|
|
variant="contained"
|
|
color="primary"
|
|
onClick={onConfirmClick}
|
|
>
|
|
{dialog.confirmText ? dialog.confirmText : i18n.t('frontend.global.operation.confirm')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ModalDialog(): React.ReactElement {
|
|
/* Global & Local States */
|
|
const reduxMessage = useMessage();
|
|
const storeMessage = useMappedState(state => state.message);
|
|
/* Functions */
|
|
const requestRemoveDialog = (): void => {
|
|
reduxMessage.removeDialog();
|
|
};
|
|
/* Views */
|
|
const RenderMessages = useMemo(() => {
|
|
if (storeMessage.messageDialogList.list.length > 0) {
|
|
return <DialogItem dialog={storeMessage.messageDialogList.list[0]} requestRemoveDialog={requestRemoveDialog} />;
|
|
}
|
|
return <React.Fragment />;
|
|
}, [storeMessage.messageDialogList]);
|
|
const RenderIsMessageOpen = useMemo(() => {
|
|
if (storeMessage.messageDialogList.list.length > 0) {
|
|
return true;
|
|
}
|
|
return false;
|
|
}, [storeMessage.messageDialogList]);
|
|
/* Main */
|
|
return (
|
|
<Modal
|
|
open={RenderIsMessageOpen}
|
|
onClose={requestRemoveDialog}
|
|
typeSize="sm"
|
|
disableCancelButton
|
|
disableConfirmButton
|
|
>
|
|
{RenderMessages}
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
export default memo(ModalDialog);
|