CreateImageWizard: custom buttons for each step
This adds custom buttons for each step, where each button has an id taking the format `$step-(next|previous|cancel)-button`.
This commit is contained in:
parent
b2a6c403bf
commit
39ec63b0c3
10 changed files with 72 additions and 16 deletions
|
|
@ -1,65 +0,0 @@
|
|||
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;
|
||||
Loading…
Add table
Add a link
Reference in a new issue