100 lines
3.5 KiB
TypeScript
100 lines
3.5 KiB
TypeScript
/*
|
|
* Copyright 2019 Red Hat, Inc. and/or its affiliates.
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*/
|
|
|
|
import * as React from 'react';
|
|
import { Modal, Button, ButtonProps } from '@patternfly/react-core';
|
|
import {Msg} from './Msg';
|
|
|
|
/**
|
|
* For any of these properties that are strings, you can
|
|
* pass in a localization key instead of a static string.
|
|
*/
|
|
interface ContinueCancelModalProps {
|
|
buttonTitle: string;
|
|
buttonVariant?: ButtonProps['variant'];
|
|
buttonId?: string;
|
|
modalTitle: string;
|
|
modalMessage: string;
|
|
modalContinueButtonLabel?: string;
|
|
modalCancelButtonLabel?: string;
|
|
onContinue: () => void;
|
|
isDisabled?: boolean;
|
|
}
|
|
|
|
interface ContinueCancelModalState {
|
|
isModalOpen: boolean;
|
|
}
|
|
|
|
/**
|
|
* This class renders a button that provides a continue/cancel modal dialog when clicked. If the user selects 'Continue'
|
|
* then the onContinue function is executed.
|
|
*
|
|
* @author Stan Silvert ssilvert@redhat.com (C) 2019 Red Hat Inc.
|
|
*/
|
|
export class ContinueCancelModal extends React.Component<ContinueCancelModalProps, ContinueCancelModalState> {
|
|
protected static defaultProps = {
|
|
buttonVariant: 'primary',
|
|
modalContinueButtonLabel: 'continue',
|
|
modalCancelButtonLabel: 'doCancel',
|
|
isDisabled: false
|
|
};
|
|
|
|
public constructor(props: ContinueCancelModalProps) {
|
|
super(props);
|
|
this.state = {
|
|
isModalOpen: false
|
|
};
|
|
}
|
|
|
|
private handleModalToggle = () => {
|
|
this.setState(({ isModalOpen }) => ({
|
|
isModalOpen: !isModalOpen
|
|
}));
|
|
};
|
|
|
|
private handleContinue = () => {
|
|
this.handleModalToggle();
|
|
this.props.onContinue();
|
|
}
|
|
|
|
public render(): React.ReactNode {
|
|
const { isModalOpen } = this.state;
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<Button id={this.props.buttonId} variant={this.props.buttonVariant} onClick={this.handleModalToggle} isDisabled={this.props.isDisabled}>
|
|
<Msg msgKey={this.props.buttonTitle}/>
|
|
</Button>
|
|
<Modal
|
|
isSmall
|
|
title={Msg.localize(this.props.modalTitle)}
|
|
isOpen={isModalOpen}
|
|
onClose={this.handleModalToggle}
|
|
actions={[
|
|
<Button id='modal-cancel' key="cancel" variant="secondary" onClick={this.handleModalToggle}>
|
|
<Msg msgKey={this.props.modalCancelButtonLabel!}/>
|
|
</Button>,
|
|
<Button id='modal-confirm' key="confirm" variant="primary" onClick={this.handleContinue}>
|
|
<Msg msgKey={this.props.modalContinueButtonLabel!}/>
|
|
</Button>
|
|
]}
|
|
>
|
|
<Msg msgKey={this.props.modalMessage}/>
|
|
</Modal>
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
}; |