Hide save bar if no action is available (#735)

This commit is contained in:
Dominik Żegleń 2020-10-01 17:50:17 +02:00 committed by GitHub
parent 7cd3409bb3
commit 287a2eb8ed
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 47 additions and 44 deletions

View file

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

View file

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

View file

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