From 48585dbf70b3f54ca30947a6c1e0fe3e94d00ea8 Mon Sep 17 00:00:00 2001 From: Ade Viankakrisna Fadlil Date: Wed, 31 May 2017 22:31:18 +0700 Subject: [PATCH 1/7] add toast component for messages --- packages/react-dev-utils/ModuleScopePlugin.js | 3 +- packages/react-scripts/template/src/Toast.css | 25 ++++++++++++++++ packages/react-scripts/template/src/Toast.js | 29 +++++++++++++++++++ .../template/src/registerServiceWorker.js | 29 +++++++++++++++++-- 4 files changed, 81 insertions(+), 5 deletions(-) create mode 100644 packages/react-scripts/template/src/Toast.css create mode 100644 packages/react-scripts/template/src/Toast.js 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..2a6c507045a --- /dev/null +++ b/packages/react-scripts/template/src/Toast.css @@ -0,0 +1,25 @@ +.Toast { + position: fixed; + bottom: 0; + left: 0; + right: 0; + max-width: 100%; + width: 240px; + padding: 16px; + margin: auto; + transition: 250ms; + background: #222; + color: white; + text-align: center; + line-height: 24px; + border-top-left-radius: 2px; + border-top-right-radius: 2px; +} + +.Toast.active { + transform: translateY(0); +} + +.Toast.inactive { + transform: translateY(100%); +} \ 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..409e2e49f71 --- /dev/null +++ b/packages/react-scripts/template/src/Toast.js @@ -0,0 +1,29 @@ +import React from 'react'; +import './Toast.css'; + +export default class Toast extends React.Component { + state = { + active: true, + }; + componentDidMount() { + setTimeout( + () => { + this.setState({ + active: false, + }); + }, + this.props.timeout + ); + } + render() { + return ( +
+ {this.props.children} +
+ ); + } +} + +Toast.defaultProps = { + timeout: 3000, +}; diff --git a/packages/react-scripts/template/src/registerServiceWorker.js b/packages/react-scripts/template/src/registerServiceWorker.js index 4a3ccf02124..c0e2dd0fbd9 100644 --- a/packages/react-scripts/template/src/registerServiceWorker.js +++ b/packages/react-scripts/template/src/registerServiceWorker.js @@ -7,6 +7,27 @@ // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. // This link also includes instructions on opting out of this behavior. +import React from 'react'; +import ReactDOM from 'react-dom'; +import Toast from './Toast'; + +const domId = 'create-react-app-toast'; +let dom = document.getElementById(domId); + +if (!dom) { + dom = document.createElement('div'); + dom.id = domId; + document.body.appendChild(dom); +} + +function renderToast(message) { + ReactDOM.render( + + {message} + , + dom + ); +} const isLocalhost = Boolean( window.location.hostname === 'localhost' || @@ -40,6 +61,8 @@ export default function register() { checkValidServiceWorker(swUrl); } }); + } else { + renderToast('Development mode started.'); } } @@ -56,12 +79,12 @@ function registerValidSW(swUrl) { // the fresh content will have been added to the cache. // It's the perfect time to display a "New content is // available; please refresh." message in your web app. - console.log('New content is available; please refresh.'); + renderToast('New content is available; please refresh.'); } else { // At this point, everything has been precached. // It's the perfect time to display a // "Content is cached for offline use." message. - console.log('Content is cached for offline use.'); + renderToast('Content is cached for offline use.'); } } }; @@ -93,7 +116,7 @@ function checkValidServiceWorker(swUrl) { } }) .catch(() => { - console.log( + renderToast( 'No internet connection found. App is running in offline mode.' ); }); From 13faa18f7fce371d26422b12b712e6088f9ad566 Mon Sep 17 00:00:00 2001 From: Ade Viankakrisna Fadlil Date: Wed, 31 May 2017 22:53:41 +0700 Subject: [PATCH 2/7] add useToast for easier enable disable --- .../template/src/registerServiceWorker.js | 27 +++++++++++-------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/packages/react-scripts/template/src/registerServiceWorker.js b/packages/react-scripts/template/src/registerServiceWorker.js index c0e2dd0fbd9..dd19622a7ad 100644 --- a/packages/react-scripts/template/src/registerServiceWorker.js +++ b/packages/react-scripts/template/src/registerServiceWorker.js @@ -11,6 +11,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import Toast from './Toast'; +const useToast = true; const domId = 'create-react-app-toast'; let dom = document.getElementById(domId); @@ -20,13 +21,17 @@ if (!dom) { document.body.appendChild(dom); } -function renderToast(message) { - ReactDOM.render( - - {message} - , - dom - ); +function showMessage(message) { + if (useToast) { + ReactDOM.render( + + {message} + , + dom + ); + } else { + console.log(message); + } } const isLocalhost = Boolean( @@ -62,7 +67,7 @@ export default function register() { } }); } else { - renderToast('Development mode started.'); + showMessage('Development mode started.'); } } @@ -79,12 +84,12 @@ function registerValidSW(swUrl) { // the fresh content will have been added to the cache. // It's the perfect time to display a "New content is // available; please refresh." message in your web app. - renderToast('New content is available; please refresh.'); + showMessage('New content is available; please refresh.'); } else { // At this point, everything has been precached. // It's the perfect time to display a // "Content is cached for offline use." message. - renderToast('Content is cached for offline use.'); + showMessage('Content is cached for offline use.'); } } }; @@ -116,7 +121,7 @@ function checkValidServiceWorker(swUrl) { } }) .catch(() => { - renderToast( + showMessage( 'No internet connection found. App is running in offline mode.' ); }); From e2e8f91cb027586870908092178ae39954df9754 Mon Sep 17 00:00:00 2001 From: Ade Viankakrisna Fadlil Date: Thu, 1 Jun 2017 01:18:10 +0700 Subject: [PATCH 3/7] update style for Toast and add dismiss button --- packages/react-scripts/template/src/Toast.css | 20 ++++++++++++++++--- packages/react-scripts/template/src/Toast.js | 17 ++++++++++++++-- .../template/src/registerServiceWorker.js | 2 +- 3 files changed, 33 insertions(+), 6 deletions(-) diff --git a/packages/react-scripts/template/src/Toast.css b/packages/react-scripts/template/src/Toast.css index 2a6c507045a..6fe54091b13 100644 --- a/packages/react-scripts/template/src/Toast.css +++ b/packages/react-scripts/template/src/Toast.css @@ -3,17 +3,15 @@ bottom: 0; left: 0; right: 0; - max-width: 100%; - width: 240px; padding: 16px; margin: auto; transition: 250ms; background: #222; color: white; - text-align: center; line-height: 24px; border-top-left-radius: 2px; border-top-right-radius: 2px; + display: flex; } .Toast.active { @@ -22,4 +20,20 @@ .Toast.inactive { transform: translateY(100%); +} + +.Toast-button { + padding: 0; + background: transparent; + border: 0; + display: inline-block; + color: #61dafb; + font-size: inherit; + line-height: inherit; + text-transform: uppercase; + flex: 0 0 0; +} + +.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 index 409e2e49f71..f5eee07f0c2 100644 --- a/packages/react-scripts/template/src/Toast.js +++ b/packages/react-scripts/template/src/Toast.js @@ -5,8 +5,15 @@ export default class Toast extends React.Component { state = { active: true, }; + + close = () => { + clearTimeout(this.timeout); + this.setState({ + active: false, + }); + }; componentDidMount() { - setTimeout( + this.timeout = setTimeout( () => { this.setState({ active: false, @@ -15,10 +22,16 @@ export default class Toast extends React.Component { this.props.timeout ); } + componentWillUnmount() { + clearTimeout(this.timeout); + } render() { return (
- {this.props.children} + + {this.props.children} + +
); } diff --git a/packages/react-scripts/template/src/registerServiceWorker.js b/packages/react-scripts/template/src/registerServiceWorker.js index dd19622a7ad..3f893b00032 100644 --- a/packages/react-scripts/template/src/registerServiceWorker.js +++ b/packages/react-scripts/template/src/registerServiceWorker.js @@ -24,7 +24,7 @@ if (!dom) { function showMessage(message) { if (useToast) { ReactDOM.render( - + {message} , dom From 276763c3debec2a954372c2e92bca9712675c088 Mon Sep 17 00:00:00 2001 From: Ade Viankakrisna Fadlil Date: Thu, 1 Jun 2017 02:42:14 +0700 Subject: [PATCH 4/7] add explicit check for non production env --- packages/react-scripts/template/src/registerServiceWorker.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/react-scripts/template/src/registerServiceWorker.js b/packages/react-scripts/template/src/registerServiceWorker.js index 3f893b00032..6cb1c8aa89c 100644 --- a/packages/react-scripts/template/src/registerServiceWorker.js +++ b/packages/react-scripts/template/src/registerServiceWorker.js @@ -66,7 +66,9 @@ export default function register() { checkValidServiceWorker(swUrl); } }); - } else { + } + + if (process.env.NODE_ENV !== 'production') { showMessage('Development mode started.'); } } From 08d05cffc13474167a989ff82ddee0e0a6cd2444 Mon Sep 17 00:00:00 2001 From: Ade Viankakrisna Fadlil Date: Thu, 1 Jun 2017 02:58:11 +0700 Subject: [PATCH 5/7] add link to read me --- packages/react-scripts/template/src/Toast.css | 2 ++ .../template/src/registerServiceWorker.js | 11 ++++++++++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/react-scripts/template/src/Toast.css b/packages/react-scripts/template/src/Toast.css index 6fe54091b13..f4da49f63e8 100644 --- a/packages/react-scripts/template/src/Toast.css +++ b/packages/react-scripts/template/src/Toast.css @@ -22,6 +22,7 @@ transform: translateY(100%); } +.Toast a, .Toast-button { padding: 0; background: transparent; @@ -31,6 +32,7 @@ font-size: inherit; line-height: inherit; text-transform: uppercase; + text-decoration: none; flex: 0 0 0; } diff --git a/packages/react-scripts/template/src/registerServiceWorker.js b/packages/react-scripts/template/src/registerServiceWorker.js index 6cb1c8aa89c..9399115dd7f 100644 --- a/packages/react-scripts/template/src/registerServiceWorker.js +++ b/packages/react-scripts/template/src/registerServiceWorker.js @@ -69,7 +69,16 @@ export default function register() { } if (process.env.NODE_ENV !== 'production') { - showMessage('Development mode started.'); + showMessage( + + Development mode started.{' '} + + Read Me + + + ); } } From 3b60e325bbf68df3ccc81305cdd5847c05ae1600 Mon Sep 17 00:00:00 2001 From: Ade Viankakrisna Fadlil Date: Thu, 1 Jun 2017 03:04:06 +0700 Subject: [PATCH 6/7] simplify style --- packages/react-scripts/template/src/Toast.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/react-scripts/template/src/Toast.css b/packages/react-scripts/template/src/Toast.css index f4da49f63e8..31ddd15a7d0 100644 --- a/packages/react-scripts/template/src/Toast.css +++ b/packages/react-scripts/template/src/Toast.css @@ -27,13 +27,11 @@ padding: 0; background: transparent; border: 0; - display: inline-block; color: #61dafb; font-size: inherit; line-height: inherit; text-transform: uppercase; text-decoration: none; - flex: 0 0 0; } .Toast-text { From 873a617b07ffef921580d4d7a27e8ce55e836d88 Mon Sep 17 00:00:00 2001 From: Ade Viankakrisna Fadlil Date: Thu, 1 Jun 2017 04:36:56 +0700 Subject: [PATCH 7/7] unnamespace toast id --- packages/react-scripts/template/src/registerServiceWorker.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/src/registerServiceWorker.js b/packages/react-scripts/template/src/registerServiceWorker.js index 9399115dd7f..d1ac525c36f 100644 --- a/packages/react-scripts/template/src/registerServiceWorker.js +++ b/packages/react-scripts/template/src/registerServiceWorker.js @@ -12,7 +12,7 @@ import ReactDOM from 'react-dom'; import Toast from './Toast'; const useToast = true; -const domId = 'create-react-app-toast'; +const domId = 'toast'; let dom = document.getElementById(domId); if (!dom) {