Hide save bar if no action is available (#735)
This commit is contained in:
parent
7cd3409bb3
commit
287a2eb8ed
3 changed files with 47 additions and 44 deletions
|
@ -136,7 +136,7 @@ const AttributePage: React.FC<AttributePageProps> = ({
|
|||
|
||||
return (
|
||||
<Form initial={initialForm} onSubmit={handleSubmit}>
|
||||
{({ change, data, submit }) => {
|
||||
{({ change, data, hasChanged, submit }) => {
|
||||
const changeMetadata = makeMetadataChangeHandler(change);
|
||||
|
||||
return (
|
||||
|
@ -185,7 +185,7 @@ const AttributePage: React.FC<AttributePageProps> = ({
|
|||
</div>
|
||||
</Grid>
|
||||
<SaveButtonBar
|
||||
disabled={disabled}
|
||||
disabled={disabled || !hasChanged}
|
||||
state={saveButtonBarState}
|
||||
onCancel={onBack}
|
||||
onSave={submit}
|
||||
|
|
|
@ -80,55 +80,58 @@ export const SaveButtonBar: React.FC<SaveButtonBarProps> = props => {
|
|||
const scrollPosition = useWindowScroll();
|
||||
const scrolledToBottom =
|
||||
scrollPosition.y + window.innerHeight >= document.body.scrollHeight;
|
||||
const shouldDisplay = onDelete || !disabled;
|
||||
|
||||
return (
|
||||
<AppActionContext.Consumer>
|
||||
{anchor =>
|
||||
anchor ? (
|
||||
<Portal container={anchor.current}>
|
||||
<div className={classes.root} {...rest}>
|
||||
<Container>
|
||||
<Card elevation={scrolledToBottom ? 0 : 16}>
|
||||
<CardContent className={classes.content}>
|
||||
{!!onDelete && (
|
||||
{shouldDisplay && (
|
||||
<div className={classes.root} {...rest}>
|
||||
<Container>
|
||||
<Card elevation={scrolledToBottom ? 0 : 16}>
|
||||
<CardContent className={classes.content}>
|
||||
{!!onDelete && (
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={onDelete}
|
||||
className={classes.deleteButton}
|
||||
data-test="button-bar-delete"
|
||||
>
|
||||
{labels && labels.delete
|
||||
? labels.delete
|
||||
: intl.formatMessage(buttonMessages.delete)}
|
||||
</Button>
|
||||
)}
|
||||
<div className={classes.spacer} />
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={onDelete}
|
||||
className={classes.deleteButton}
|
||||
data-test="button-bar-delete"
|
||||
className={classes.cancelButton}
|
||||
variant="text"
|
||||
onClick={onCancel}
|
||||
data-test="button-bar-cancel"
|
||||
>
|
||||
{labels && labels.delete
|
||||
? labels.delete
|
||||
: intl.formatMessage(buttonMessages.delete)}
|
||||
{maybe(
|
||||
() => labels.cancel,
|
||||
intl.formatMessage(buttonMessages.back)
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
<div className={classes.spacer} />
|
||||
<Button
|
||||
className={classes.cancelButton}
|
||||
variant="text"
|
||||
onClick={onCancel}
|
||||
data-test="button-bar-cancel"
|
||||
>
|
||||
{maybe(
|
||||
() => labels.cancel,
|
||||
intl.formatMessage(buttonMessages.back)
|
||||
)}
|
||||
</Button>
|
||||
<ConfirmButton
|
||||
disabled={disabled}
|
||||
onClick={onSave}
|
||||
transitionState={state}
|
||||
data-test="button-bar-confirm"
|
||||
>
|
||||
{maybe(
|
||||
() => labels.save,
|
||||
intl.formatMessage(buttonMessages.save)
|
||||
)}
|
||||
</ConfirmButton>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Container>
|
||||
</div>
|
||||
<ConfirmButton
|
||||
disabled={disabled}
|
||||
onClick={onSave}
|
||||
transitionState={state}
|
||||
data-test="button-bar-confirm"
|
||||
>
|
||||
{maybe(
|
||||
() => labels.save,
|
||||
intl.formatMessage(buttonMessages.save)
|
||||
)}
|
||||
</ConfirmButton>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Container>
|
||||
</div>
|
||||
)}
|
||||
</Portal>
|
||||
) : null
|
||||
}
|
||||
|
|
|
@ -47,7 +47,7 @@ const CountryListPage: React.FC<CountryListPageProps> = ({
|
|||
};
|
||||
return (
|
||||
<Form initial={initialForm} onSubmit={onSubmit}>
|
||||
{({ change, data, submit }) => (
|
||||
{({ change, data, hasChanged, submit }) => (
|
||||
<>
|
||||
<Container>
|
||||
<AppHeader onBack={onBack}>
|
||||
|
@ -77,7 +77,7 @@ const CountryListPage: React.FC<CountryListPageProps> = ({
|
|||
</Grid>
|
||||
</Container>
|
||||
<SaveButtonBar
|
||||
disabled={disabled}
|
||||
disabled={disabled || !hasChanged}
|
||||
state={saveButtonBarState}
|
||||
onCancel={onBack}
|
||||
onSave={submit}
|
||||
|
|
Loading…
Reference in a new issue