74 lines
2.0 KiB
TypeScript
74 lines
2.0 KiB
TypeScript
import Link from "next/link";
|
|
import React from "react";
|
|
|
|
import OldModal, { IProps as IPropsModal } from "..";
|
|
import Button, { EButtonStyleType, EButtonVariant } from "../../Button";
|
|
import classes from "./classes.module.scss";
|
|
|
|
type IProps = IPropsModal & {
|
|
onAccept?: () => void;
|
|
cancelText: string | JSX.Element;
|
|
cancelPath?: string;
|
|
confirmText: string | JSX.Element;
|
|
showCancelButton: boolean;
|
|
showButtons: boolean;
|
|
canConfirm: boolean;
|
|
};
|
|
|
|
type IState = {};
|
|
|
|
export default class Confirm extends React.Component<IProps, IState> {
|
|
static defaultProps = {
|
|
showCancelButton: true,
|
|
cancelText: "Cancel",
|
|
confirmText: "Confirm",
|
|
canConfirm: true,
|
|
showButtons: true,
|
|
...OldModal.defaultProps,
|
|
};
|
|
|
|
public override render(): JSX.Element | null {
|
|
return (
|
|
<OldModal
|
|
closeBtn={this.props.closeBtn}
|
|
header={this.props.header}
|
|
footer={this.footer()}
|
|
animationDelay={this.props.animationDelay}
|
|
{...this.props}>
|
|
{this.props.children}
|
|
</OldModal>
|
|
);
|
|
}
|
|
|
|
private footer(): JSX.Element | null {
|
|
if (!this.props.showButtons) return null;
|
|
return (
|
|
<div className={classes["buttons-container"]}>
|
|
{this.props.showCancelButton &&
|
|
(this.props.cancelPath ? (
|
|
<Link href={this.props.cancelPath} className={classes["sub-container"]}>
|
|
<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED} onClick={this.props.onClose}>
|
|
{this.props.cancelText}
|
|
</Button>
|
|
</Link>
|
|
) : (
|
|
<div className={classes["sub-container"]}>
|
|
<Button
|
|
variant={EButtonVariant.PRIMARY}
|
|
styleType={EButtonStyleType.OUTLINED}
|
|
onClick={this.props.onClose}
|
|
className={classes["sub-container"]}>
|
|
{this.props.cancelText}
|
|
</Button>
|
|
</div>
|
|
))}
|
|
<div className={classes["sub-container"]}>
|
|
<Button variant={EButtonVariant.PRIMARY} onClick={this.props.onAccept} disabled={!this.props.canConfirm} fullwidth>
|
|
{this.props.confirmText}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|