65 lines
1.7 KiB
JavaScript
65 lines
1.7 KiB
JavaScript
// @flow
|
|
|
|
import React, { Fragment, useContext, useEffect } from 'react';
|
|
import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
|
|
import { useLocalStorage } from './hooks';
|
|
import { ModalDialogContext } from './ModalDialog';
|
|
import ReactLogo from './ReactLogo';
|
|
import { CHANGE_LOG_URL } from 'src/constants';
|
|
|
|
import styles from './ShowWelcomeToTheNewDevToolsDialog.css';
|
|
|
|
const LOCAL_STORAGE_KEY =
|
|
'React::DevTools::hasShownWelcomeToTheNewDevToolsDialog';
|
|
|
|
export default function ShowWelcomeToTheNewDevToolsDialog(_: {||}) {
|
|
const { dispatch } = useContext(ModalDialogContext);
|
|
const [
|
|
hasShownWelcomeToTheNewDevToolsDialog,
|
|
setHasShownWelcomeToTheNewDevToolsDialog,
|
|
] = useLocalStorage<boolean>(LOCAL_STORAGE_KEY, false);
|
|
|
|
useEffect(() => {
|
|
if (!hasShownWelcomeToTheNewDevToolsDialog) {
|
|
batchedUpdates(() => {
|
|
setHasShownWelcomeToTheNewDevToolsDialog(true);
|
|
dispatch({
|
|
canBeDismissed: true,
|
|
type: 'SHOW',
|
|
content: <DialogContent />,
|
|
});
|
|
});
|
|
}
|
|
}, [
|
|
dispatch,
|
|
hasShownWelcomeToTheNewDevToolsDialog,
|
|
setHasShownWelcomeToTheNewDevToolsDialog,
|
|
]);
|
|
|
|
return null;
|
|
}
|
|
|
|
function DialogContent(_: {||}) {
|
|
return (
|
|
<Fragment>
|
|
<div className={styles.Row}>
|
|
<ReactLogo className={styles.Logo} />
|
|
<div>
|
|
<div className={styles.Title}>Welcome to the new React DevTools!</div>
|
|
<div>
|
|
<a
|
|
className={styles.ReleaseNotesLink}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
href={CHANGE_LOG_URL}
|
|
>
|
|
Learn more
|
|
</a>{' '}
|
|
about changes in this version.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Fragment>
|
|
);
|
|
}
|