99 lines
3.2 KiB
TypeScript
99 lines
3.2 KiB
TypeScript
import React, { memo, useMemo } 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 { ConfirmItemObject } from './types';
|
|
import Styles from './index.module.css';
|
|
|
|
/* Confirm Item */
|
|
function ConfirmItem(props: ConfirmItemObject): React.ReactElement {
|
|
/* Global & Local States */
|
|
const { i18n } = useLang();
|
|
const { confirm, requestRemoveConfirm } = props;
|
|
/* Functions */
|
|
const onConfirmClick = (): void => {
|
|
if (confirm.onConfirm) confirm.onConfirm();
|
|
requestRemoveConfirm();
|
|
};
|
|
const onCancelClick = (): void => {
|
|
if (confirm.onCancel) confirm.onCancel();
|
|
requestRemoveConfirm();
|
|
};
|
|
/* Main */
|
|
return (
|
|
<div className={classNames(Styles.confirmItemContainer)}>
|
|
<div className={classNames(Styles.confirmItemTitle)}>
|
|
<Typography className={classNames(Styles.confirmItemTitleStyle)} variant="h2" color="textPrimary">
|
|
{confirm.typeTitle}
|
|
</Typography>
|
|
</div>
|
|
<div className={classNames(Styles.confirmItemSubTitle)}>
|
|
<Typography variant="body1" color="textPrimary" style={{ whiteSpace: 'pre-wrap' }}>
|
|
{confirm.typeContent && confirm.typeContent}
|
|
</Typography>
|
|
</div>
|
|
<div className={classNames(Styles.confirmItemActionContainer)}>
|
|
<Button
|
|
className={classNames(Styles.confirmItemActionButtonStyle)}
|
|
variant="text"
|
|
color="default"
|
|
onClick={onCancelClick}
|
|
>
|
|
{confirm.cancelText ? confirm.cancelText : i18n.t('frontend.global.operation.cancel')}
|
|
</Button>
|
|
<Button
|
|
className={classNames(Styles.confirmItemActionButtonStyle)}
|
|
variant="contained"
|
|
color="primary"
|
|
onClick={onConfirmClick}
|
|
>
|
|
{confirm.confirmText ? confirm.confirmText : i18n.t('frontend.global.operation.confirm')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ModalConfirm(): React.ReactElement {
|
|
/* Global & Local States */
|
|
const reduxMessage = useMessage();
|
|
const storeMessage = useMappedState((state) => state.message);
|
|
/* Functions */
|
|
const requestRemoveConfirm = (): void => {
|
|
reduxMessage.removeConfirm();
|
|
};
|
|
/* Views */
|
|
const RenderMessages = useMemo(() => {
|
|
if (storeMessage.messageConfirmList.list.length > 0) {
|
|
return (
|
|
<ConfirmItem confirm={storeMessage.messageConfirmList.list[0]} requestRemoveConfirm={requestRemoveConfirm} />
|
|
);
|
|
}
|
|
return <React.Fragment />;
|
|
}, [storeMessage.messageConfirmList]);
|
|
const RenderIsMessageOpen = useMemo(() => {
|
|
if (storeMessage.messageConfirmList.list.length > 0) {
|
|
return true;
|
|
}
|
|
return false;
|
|
}, [storeMessage.messageConfirmList]);
|
|
/* Main */
|
|
return (
|
|
<Modal
|
|
open={RenderIsMessageOpen}
|
|
onClose={requestRemoveConfirm}
|
|
typeSize="sm"
|
|
disableCancelButton
|
|
disableConfirmButton
|
|
>
|
|
{RenderMessages}
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
export default memo(ModalConfirm);
|