diff --git a/src/components/ConfirmButton/ConfirmButton.tsx b/src/components/ConfirmButton/ConfirmButton.tsx index 8a6d2f812..981131dbb 100644 --- a/src/components/ConfirmButton/ConfirmButton.tsx +++ b/src/components/ConfirmButton/ConfirmButton.tsx @@ -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, WithStyles { 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; diff --git a/src/components/SaveButtonBar/SaveButtonBar.tsx b/src/components/SaveButtonBar/SaveButtonBar.tsx index 64f57e492..279436b79 100644 --- a/src/components/SaveButtonBar/SaveButtonBar.tsx +++ b/src/components/SaveButtonBar/SaveButtonBar.tsx @@ -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 = 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 = props => { className={classes.deleteButton} data-test="button-bar-delete" > - {labels && labels.delete - ? labels.delete - : intl.formatMessage(buttonMessages.delete)} + {labels?.delete || intl.formatMessage(buttonMessages.delete)} )}
@@ -121,21 +119,16 @@ export const SaveButtonBar: React.FC = props => { onClick={onCancel} data-test="button-bar-cancel" > - {maybe( - () => labels.cancel, - intl.formatMessage(buttonMessages.back) - )} + {labels?.cancel || intl.formatMessage(buttonMessages.back)} appAction.setDocked(true)} > - {maybe( - () => labels.save, - intl.formatMessage(buttonMessages.save) - )} + {labels?.save || intl.formatMessage(buttonMessages.save)} diff --git a/src/components/messages/MessageManagerProvider.tsx b/src/components/messages/MessageManagerProvider.tsx index 4f20b8af3..280ff0a5b 100644 --- a/src/components/messages/MessageManagerProvider.tsx +++ b/src/components/messages/MessageManagerProvider.tsx @@ -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( diff --git a/src/config.ts b/src/config.ts index 7a9e4ef0c..fb0bd87d4 100644 --- a/src/config.ts +++ b/src/config.ts @@ -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;