diff --git a/packages/react-dev-utils/ModuleScopePlugin.js b/packages/react-dev-utils/ModuleScopePlugin.js index 101a30a1fb9..d7aeea3450d 100644 --- a/packages/react-dev-utils/ModuleScopePlugin.js +++ b/packages/react-dev-utils/ModuleScopePlugin.js @@ -50,8 +50,7 @@ class ModuleScopePlugin { // Error if in a parent directory of src/ const requestRelative = path.relative(appSrc, requestFullPath); if ( - requestRelative.startsWith('../') || - requestRelative.startsWith('..\\') + requestRelative.startsWith('../') || requestRelative.startsWith('..\\') ) { callback( new Error( diff --git a/packages/react-scripts/template/src/Toast.css b/packages/react-scripts/template/src/Toast.css new file mode 100644 index 00000000000..31ddd15a7d0 --- /dev/null +++ b/packages/react-scripts/template/src/Toast.css @@ -0,0 +1,39 @@ +.Toast { + position: fixed; + bottom: 0; + left: 0; + right: 0; + padding: 16px; + margin: auto; + transition: 250ms; + background: #222; + color: white; + line-height: 24px; + border-top-left-radius: 2px; + border-top-right-radius: 2px; + display: flex; +} + +.Toast.active { + transform: translateY(0); +} + +.Toast.inactive { + transform: translateY(100%); +} + +.Toast a, +.Toast-button { + padding: 0; + background: transparent; + border: 0; + color: #61dafb; + font-size: inherit; + line-height: inherit; + text-transform: uppercase; + text-decoration: none; +} + +.Toast-text { + flex: 1; +} \ No newline at end of file diff --git a/packages/react-scripts/template/src/Toast.js b/packages/react-scripts/template/src/Toast.js new file mode 100644 index 00000000000..f5eee07f0c2 --- /dev/null +++ b/packages/react-scripts/template/src/Toast.js @@ -0,0 +1,42 @@ +import React from 'react'; +import './Toast.css'; + +export default class Toast extends React.Component { + state = { + active: true, + }; + + close = () => { + clearTimeout(this.timeout); + this.setState({ + active: false, + }); + }; + componentDidMount() { + this.timeout = setTimeout( + () => { + this.setState({ + active: false, + }); + }, + this.props.timeout + ); + } + componentWillUnmount() { + clearTimeout(this.timeout); + } + render() { + return ( +