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:
Sanne Raymaekers 2022-12-01 12:28:38 +01:00
parent b2a6c403bf
commit 39ec63b0c3
10 changed files with 72 additions and 16 deletions

View file

@ -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;