57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
import react from 'react';
|
|
import Button, { ButtonType } from './Button';
|
|
|
|
export interface ConfirmButtonProps<T>{
|
|
delayMS? : number;
|
|
buttonType : ButtonType;
|
|
keyValue: T;
|
|
children: React.ReactNode;
|
|
confirmMessage?: React.ReactNode;
|
|
onClick?: ( keyValue? : T ) => void;
|
|
}
|
|
|
|
export interface ConfirmButtonState{
|
|
firstClick : boolean
|
|
}
|
|
|
|
class ConfirmButton<T> extends react.Component<ConfirmButtonProps<T>, ConfirmButtonState > {
|
|
state : ConfirmButtonState = {
|
|
firstClick : false
|
|
}
|
|
|
|
FirstClick = () => {
|
|
const firstClick = true;
|
|
this.setState({firstClick});
|
|
|
|
let { delayMS } = this.props;
|
|
if (delayMS === undefined)
|
|
delayMS = 5000;
|
|
|
|
setTimeout(() => {
|
|
console.log(`updating state`)
|
|
const firstClick = false;
|
|
this.setState({firstClick});
|
|
}, delayMS);
|
|
}
|
|
|
|
SecondClick = () => {
|
|
const {keyValue, onClick} = this.props;
|
|
|
|
if (onClick)
|
|
onClick(keyValue);
|
|
}
|
|
|
|
render() {
|
|
const { buttonType, children, confirmMessage } = this.props;
|
|
const { firstClick } = this.state;
|
|
|
|
return (
|
|
<>
|
|
{!firstClick && <Button buttonType={buttonType} onClick={this.FirstClick}>{children}</Button>}
|
|
{firstClick && <Button buttonType={ButtonType.danger} onClick={this.SecondClick}>{confirmMessage!==undefined?confirmMessage:"Are you sure?"}</Button>}
|
|
</>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default ConfirmButton; |