48 lines
1.8 KiB
JavaScript
48 lines
1.8 KiB
JavaScript
import React, { useContext, useState } from 'react';
|
|
import { Button } from '@patternfly/react-core';
|
|
import { FormSpy } from '@data-driven-forms/react-form-renderer';
|
|
import WizardContext from '@data-driven-forms/react-form-renderer/wizard-context';
|
|
import PropTypes from 'prop-types';
|
|
|
|
const CustomButtons = ({ buttonLabels: { cancel, submit, back }}) => {
|
|
const [ isSaving, setIsSaving ] = useState(false);
|
|
const { handlePrev, formOptions } = useContext(WizardContext);
|
|
return <FormSpy>
|
|
{() => (
|
|
<React.Fragment>
|
|
<Button
|
|
variant="primary"
|
|
type="button"
|
|
isDisabled={ !formOptions.valid || formOptions.getState().validating || isSaving }
|
|
isLoading={ isSaving }
|
|
onClick={ () => {
|
|
formOptions.onSubmit({
|
|
values: formOptions.getState().values,
|
|
setIsSaving
|
|
});
|
|
} }>
|
|
{ isSaving ? 'Creating image' : submit}
|
|
</Button>
|
|
<Button type="button" variant="secondary" onClick={ handlePrev } isDisabled={ isSaving }>
|
|
{back}
|
|
</Button>
|
|
<div className="pf-c-wizard__footer-cancel">
|
|
<Button type="button" variant="link" onClick={ formOptions.onCancel } isDisabled={ isSaving }>
|
|
{cancel}
|
|
</Button>
|
|
</div>
|
|
</React.Fragment>
|
|
)}
|
|
</FormSpy>;
|
|
};
|
|
|
|
CustomButtons.propTypes = {
|
|
buttonLabels: PropTypes.shape({
|
|
cancel: PropTypes.node,
|
|
submit: PropTypes.node,
|
|
back: PropTypes.node,
|
|
}),
|
|
isSaving: PropTypes.bool
|
|
};
|
|
|
|
export default CustomButtons;
|