djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Wait for notification to disappear

Browse source
This commit is contained in:
dominik-zeglen 2020-11-02 13:20:52 +01:00
commit 6ee5038f6c
4 changed files with 49 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/components/ConfirmButton/ConfirmButton.tsx
View file

@ -7,6 +7,7 @@ import {
withStyles
} from "@material-ui/core/styles";
import CheckIcon from "@material-ui/icons/Check";
import { DEFAULT_NOTIFICATION_SHOW_TIME } from "@saleor/config";
import { buttonMessages } from "@saleor/intl";
import classNames from "classnames";
import React from "react";
@ -61,6 +62,7 @@ export interface ConfirmButtonProps
extends Omit<ButtonProps, "classes">,
WithStyles<typeof styles> {
transitionState: ConfirmButtonTransitionState;
onTransitionToDefault?: () => void;
}
interface ConfirmButtonState {
@ -93,20 +95,21 @@ const ConfirmButton = withStyles(styles, { name: "ConfirmButton" })(
}
componentDidUpdate(prevProps: ConfirmButtonProps) {
const { transitionState } = this.props;
const { transitionState, onTransitionToDefault } = this.props;
if (prevProps.transitionState !== transitionState) {
if (
(["error", "success"] as ConfirmButtonTransitionState[]).includes(
transitionState
)
) {
this.timeout = setTimeout(
() =>
this.setState({
displayCompletedActionState: false
}),
2000
);
this.timeout = setTimeout(() => {
this.setState({
displayCompletedActionState: false
});
if (onTransitionToDefault) {
onTransitionToDefault();
}
}, DEFAULT_NOTIFICATION_SHOW_TIME);
} else if (transitionState === "loading") {
clearTimeout(this.timeout);
}
@ -125,6 +128,7 @@ const ConfirmButton = withStyles(styles, { name: "ConfirmButton" })(
disabled,
transitionState,
onClick,
onTransitionToDefault: _,
...props
} = this.props;
const { displayCompletedActionState } = this.state;

23
src/components/SaveButtonBar/SaveButtonBar.tsx
View file

@ -8,7 +8,6 @@ import { buttonMessages } from "@saleor/intl";
import React from "react";
import { useIntl } from "react-intl";
import { maybe } from "../../misc";
import { useAppAction } from "../AppLayout/AppActionContext";
import ConfirmButton, {
ConfirmButtonTransitionState
@ -85,10 +84,11 @@ export const SaveButtonBar: React.FC<SaveButtonBarProps> = props => {
const scrollPosition = useWindowScroll();
React.useEffect(() => {
appAction.setDocked(disabled);
return () => appAction.setDocked(true);
if (!disabled && state !== "loading") {
appAction.setDocked(false);
}
}, [disabled]);
React.useEffect(() => () => appAction.setDocked(true), []);
const scrolledToBottom =
scrollPosition.y + window.innerHeight >= document.body.scrollHeight;
@ -109,9 +109,7 @@ export const SaveButtonBar: React.FC<SaveButtonBarProps> = props => {
className={classes.deleteButton}
data-test="button-bar-delete"
>
{labels && labels.delete
? labels.delete
: intl.formatMessage(buttonMessages.delete)}
{labels?.delete || intl.formatMessage(buttonMessages.delete)}
</Button>
)}
<div className={classes.spacer} />
@ -121,21 +119,16 @@ export const SaveButtonBar: React.FC<SaveButtonBarProps> = props => {
onClick={onCancel}
data-test="button-bar-cancel"
>
{maybe(
() => labels.cancel,
intl.formatMessage(buttonMessages.back)
)}
{labels?.cancel || intl.formatMessage(buttonMessages.back)}
</Button>
<ConfirmButton
disabled={disabled}
onClick={onSave}
transitionState={state}
data-test="button-bar-confirm"
onTransitionToDefault={() => appAction.setDocked(true)}
>
{maybe(
() => labels.save,
intl.formatMessage(buttonMessages.save)
)}
{labels?.save || intl.formatMessage(buttonMessages.save)}
</ConfirmButton>
</CardContent>
</Card>

50
src/components/messages/MessageManagerProvider.tsx
View file

@ -1,3 +1,4 @@
import { DEFAULT_NOTIFICATION_SHOW_TIME } from "@saleor/config";
import React, { useCallback, useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";
import { TransitionGroup } from "react-transition-group";
@ -43,32 +44,35 @@ const MessageManagerProvider = ({ children }) => {
);
}, []);
const show = useCallback((message = {}, timeout = 3000) => {
const id = Date.now();
const notification = {
close: () => remove(id),
id,
message,
timeout
};
if (timeout !== null) {
const timeoutId = window.setTimeout(() => {
timerCallback(notification);
}, timeout);
const show = useCallback(
(message = {}, timeout = DEFAULT_NOTIFICATION_SHOW_TIME) => {
const id = Date.now();
const notification = {
close: () => remove(id),
id,
message,
timeout
};
if (timeout !== null) {
const timeoutId = window.setTimeout(() => {
timerCallback(notification);
}, timeout);
timersArr.current.push({
id: notification.id,
notification,
remaining: timeout,
start: new Date().getTime(),
timeoutId
});
}
timersArr.current.push({
id: notification.id,
notification,
remaining: timeout,
start: new Date().getTime(),
timeoutId
});
}
setNotifications(state => [notification, ...state]);
setNotifications(state => [notification, ...state]);
return notification;
}, []);
return notification;
},
[]
);
const getCurrentTimer = (notification: INotification) => {
const currentTimerIndex = timersArr.current.findIndex(

2
src/config.ts
View file

@ -96,3 +96,5 @@ export const defaultListSettings: AppListViewSettings = {
export const APP_VERSION = packageInfo.version;
export const DEMO_MODE = process.env.DEMO_MODE === "true";
export const GTM_ID = process.env.GTM_ID;
export const DEFAULT_NOTIFICATION_SHOW_TIME = 3000;