3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-08-06 10:20:09 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor(v2): combine nested theme providers into one (#2870)

Browse source
This commit is contained in:
Alexey Pyltsyn 2020-06-05 10:09:13 +03:00 • committed by GitHub
parent 2d8abe150f
commit 174cd8dc6f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 83 additions and 131 deletions
Download patch file Download diff file Expand all files Collapse all files

4
packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.js
View file

@ -7,7 +7,7 @@
import React from 'react'; import React from 'react';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useAnnouncementBarContext from '@theme/hooks/useAnnouncementBarContext'; import useUserPreferencesContext from '@theme/hooks/useUserPreferencesContext';
import styles from './styles.module.css'; import styles from './styles.module.css';
@ -19,7 +19,7 @@ function AnnouncementBar() {
const { const {
isAnnouncementBarClosed, isAnnouncementBarClosed,
closeAnnouncementBar, closeAnnouncementBar,
} = useAnnouncementBarContext(); } = useUserPreferencesContext();
if (!content || isAnnouncementBarClosed) { if (!content || isAnnouncementBarClosed) {
return null; return null;

24
packages/docusaurus-theme-classic/src/theme/AnnouncementBarProvider/index.js
View file

@ -1,24 +0,0 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import AnnouncementBarContext from '@theme/AnnouncementBarContext';
import useAnnouncementBar from '@theme/hooks/useAnnouncementBar';
function AnnouncementBarProvider(props) {
const {isAnnouncementBarClosed, closeAnnouncementBar} = useAnnouncementBar();
return (
<AnnouncementBarContext.Provider
value={{isAnnouncementBarClosed, closeAnnouncementBar}}>
{props.children}
</AnnouncementBarContext.Provider>
);
}
export default AnnouncementBarProvider;

4
packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js
View file

@ -8,7 +8,7 @@
import React, {useState, useCallback, useEffect, useRef} from 'react'; import React, {useState, useCallback, useEffect, useRef} from 'react';
import classnames from 'classnames'; import classnames from 'classnames';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useAnnouncementBarContext from '@theme/hooks/useAnnouncementBarContext'; import useUserPreferencesContext from '@theme/hooks/useUserPreferencesContext';
import useLockBodyScroll from '@theme/hooks/useLockBodyScroll'; import useLockBodyScroll from '@theme/hooks/useLockBodyScroll';
import useLogo from '@theme/hooks/useLogo'; import useLogo from '@theme/hooks/useLogo';
import useScrollPosition from '@theme/hooks/useScrollPosition'; import useScrollPosition from '@theme/hooks/useScrollPosition';
@ -165,7 +165,7 @@ function DocSidebar(props) {
isClient, isClient,
} = useDocusaurusContext(); } = useDocusaurusContext();
const {logoLink, logoLinkProps, logoImageUrl, logoAlt} = useLogo(); const {logoLink, logoLinkProps, logoImageUrl, logoAlt} = useLogo();
const {isAnnouncementBarClosed} = useAnnouncementBarContext(); const {isAnnouncementBarClosed} = useUserPreferencesContext();
const {scrollY} = useScrollPosition(); const {scrollY} = useScrollPosition();
const { const {

74
packages/docusaurus-theme-classic/src/theme/Layout/index.js
View file

@ -11,8 +11,7 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useBaseUrl from '@docusaurus/useBaseUrl'; import useBaseUrl from '@docusaurus/useBaseUrl';
import ThemeProvider from '@theme/ThemeProvider'; import ThemeProvider from '@theme/ThemeProvider';
import TabGroupChoiceProvider from '@theme/TabGroupChoiceProvider'; import UserPreferencesProvider from '@theme/UserPreferencesProvider';
import AnnouncementBarProvider from '@theme/AnnouncementBarProvider';
import AnnouncementBar from '@theme/AnnouncementBar'; import AnnouncementBar from '@theme/AnnouncementBar';
import Navbar from '@theme/Navbar'; import Navbar from '@theme/Navbar';
import Footer from '@theme/Footer'; import Footer from '@theme/Footer';
@ -44,45 +43,40 @@ function Layout(props) {
return ( return (
<ThemeProvider> <ThemeProvider>
<TabGroupChoiceProvider> <UserPreferencesProvider>
<AnnouncementBarProvider> <Head>
<Head> {/* TODO: Do not assume that it is in english language */}
{/* TODO: Do not assume that it is in english language */} <html lang="en" />
<html lang="en" />
{metaTitle && <title>{metaTitle}</title>} {metaTitle && <title>{metaTitle}</title>}
{metaTitle && <meta property="og:title" content={metaTitle} />} {metaTitle && <meta property="og:title" content={metaTitle} />}
{favicon && <link rel="shortcut icon" href={faviconUrl} />} {favicon && <link rel="shortcut icon" href={faviconUrl} />}
{description && <meta name="description" content={description} />} {description && <meta name="description" content={description} />}
{description && ( {description && (
<meta property="og:description" content={description} /> <meta property="og:description" content={description} />
)} )}
{version && <meta name="docsearch:version" content={version} />} {version && <meta name="docsearch:version" content={version} />}
{keywords && keywords.length && ( {keywords && keywords.length && (
<meta name="keywords" content={keywords.join(',')} /> <meta name="keywords" content={keywords.join(',')} />
)} )}
{metaImage && <meta property="og:image" content={metaImageUrl} />} {metaImage && <meta property="og:image" content={metaImageUrl} />}
{metaImage && ( {metaImage && (
<meta property="twitter:image" content={metaImageUrl} /> <meta property="twitter:image" content={metaImageUrl} />
)} )}
{metaImage && ( {metaImage && (
<meta <meta name="twitter:image:alt" content={`Image for ${metaTitle}`} />
name="twitter:image:alt" )}
content={`Image for ${metaTitle}`} {permalink && (
/> <meta property="og:url" content={siteUrl + permalink} />
)} )}
{permalink && ( {permalink && <link rel="canonical" href={siteUrl + permalink} />}
<meta property="og:url" content={siteUrl + permalink} /> <meta name="twitter:card" content="summary_large_image" />
)} </Head>
{permalink && <link rel="canonical" href={siteUrl + permalink} />} <AnnouncementBar />
<meta name="twitter:card" content="summary_large_image" /> <Navbar />
</Head> <div className="main-wrapper">{children}</div>
<AnnouncementBar /> {!noFooter && <Footer />}
<Navbar /> </UserPreferencesProvider>
<div className="main-wrapper">{children}</div>
{!noFooter && <Footer />}
</AnnouncementBarProvider>
</TabGroupChoiceProvider>
</ThemeProvider> </ThemeProvider>
); );
} }

15
packages/docusaurus-theme-classic/src/theme/TabGroupChoiceContext.js
View file

@ -1,15 +0,0 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import {createContext} from 'react';
const TabGroupChoiceContext = createContext({
tabGroupChoices: {},
setTabGroupChoices: () => {},
});
export default TabGroupChoiceContext;

24
packages/docusaurus-theme-classic/src/theme/TabGroupChoiceProvider/index.js
View file

@ -1,24 +0,0 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import useTabGroupChoice from '@theme/hooks/useTabGroupChoice';
import TabGroupChoiceContext from '@theme/TabGroupChoiceContext';
function TabGroupChoiceProvider(props) {
const {tabGroupChoices, setTabGroupChoices} = useTabGroupChoice();
return (
<TabGroupChoiceContext.Provider
value={{tabGroupChoices, setTabGroupChoices}}>
{props.children}
</TabGroupChoiceContext.Provider>
);
}
export default TabGroupChoiceProvider;

4
packages/docusaurus-theme-classic/src/theme/Tabs/index.js
View file

@ -6,7 +6,7 @@
*/ */
import React, {useState, Children} from 'react'; import React, {useState, Children} from 'react';
import useTabGroupChoiceContext from '@theme/hooks/useTabGroupChoiceContext'; import useUserPreferencesContext from '@theme/hooks/useUserPreferencesContext';
import classnames from 'classnames'; import classnames from 'classnames';
@ -19,7 +19,7 @@ const keys = {
function Tabs(props) { function Tabs(props) {
const {block, children, defaultValue, values, groupId} = props; const {block, children, defaultValue, values, groupId} = props;
const {tabGroupChoices, setTabGroupChoices} = useTabGroupChoiceContext(); const {tabGroupChoices, setTabGroupChoices} = useUserPreferencesContext();
const [selectedValue, setSelectedValue] = useState(defaultValue); const [selectedValue, setSelectedValue] = useState(defaultValue);
if (groupId != null) { if (groupId != null) {

9
packages/docusaurus-theme-classic/src/theme/AnnouncementBarContext.js → packages/docusaurus-theme-classic/src/theme/UserPreferencesContext.js
View file

@ -7,9 +7,14 @@
import {createContext} from 'react'; import {createContext} from 'react';
const AnnouncementBarContext = createContext({ const UserPreferencesContext = createContext({
// Tab group choice.
tabGroupChoices: {},
setTabGroupChoices: () => {},
// Announcement bar.
isAnnouncementBarClosed: false, isAnnouncementBarClosed: false,
closeAnnouncementBar: () => {}, closeAnnouncementBar: () => {},
}); });
export default AnnouncementBarContext; export default UserPreferencesContext;

31
packages/docusaurus-theme-classic/src/theme/UserPreferencesProvider/index.js Normal file
View file

@ -0,0 +1,31 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import useTabGroupChoice from '@theme/hooks/useTabGroupChoice';
import useAnnouncementBar from '@theme/hooks/useAnnouncementBar';
import UserPreferencesContext from '@theme/UserPreferencesContext';
function UserPreferencesProvider(props) {
const {tabGroupChoices, setTabGroupChoices} = useTabGroupChoice();
const {isAnnouncementBarClosed, closeAnnouncementBar} = useAnnouncementBar();
return (
<UserPreferencesContext.Provider
value={{
tabGroupChoices,
setTabGroupChoices,
isAnnouncementBarClosed,
closeAnnouncementBar,
}}>
{props.children}
</UserPreferencesContext.Provider>
);
}
export default UserPreferencesProvider;

16
packages/docusaurus-theme-classic/src/theme/hooks/useTabGroupChoiceContext.js
View file

@ -1,16 +0,0 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import {useContext} from 'react';
import TabGroupChoiceContext from '@theme/TabGroupChoiceContext';
function useTabGroupChoiceContext() {
return useContext(TabGroupChoiceContext);
}
export default useTabGroupChoiceContext;

9
packages/docusaurus-theme-classic/src/theme/hooks/useAnnouncementBarContext.js → packages/docusaurus-theme-classic/src/theme/hooks/useUserPreferencesContext.js
View file

@ -6,10 +6,11 @@
*/ */
import {useContext} from 'react'; import {useContext} from 'react';
import AnnouncementBarContext from '@theme/AnnouncementBarContext';
function useAnnouncementBarContext() { import UserPreferencesContext from '@theme/UserPreferencesContext';
return useContext(AnnouncementBarContext);
function useUserPreferencesContext() {
return useContext(UserPreferencesContext);
} }
export default useAnnouncementBarContext; export default useUserPreferencesContext;