3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-08-04 01:09:20 +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 useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useAnnouncementBarContext from '@theme/hooks/useAnnouncementBarContext';
import useUserPreferencesContext from '@theme/hooks/useUserPreferencesContext';
import styles from './styles.module.css';
@ -19,7 +19,7 @@ function AnnouncementBar() {
const {
isAnnouncementBarClosed,
closeAnnouncementBar,
} = useAnnouncementBarContext();
} = useUserPreferencesContext();
if (!content || isAnnouncementBarClosed) {
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 classnames from 'classnames';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useAnnouncementBarContext from '@theme/hooks/useAnnouncementBarContext';
import useUserPreferencesContext from '@theme/hooks/useUserPreferencesContext';
import useLockBodyScroll from '@theme/hooks/useLockBodyScroll';
import useLogo from '@theme/hooks/useLogo';
import useScrollPosition from '@theme/hooks/useScrollPosition';
@ -165,7 +165,7 @@ function DocSidebar(props) {
isClient,
} = useDocusaurusContext();
const {logoLink, logoLinkProps, logoImageUrl, logoAlt} = useLogo();
const {isAnnouncementBarClosed} = useAnnouncementBarContext();
const {isAnnouncementBarClosed} = useUserPreferencesContext();
const {scrollY} = useScrollPosition();
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 ThemeProvider from '@theme/ThemeProvider';
import TabGroupChoiceProvider from '@theme/TabGroupChoiceProvider';
import AnnouncementBarProvider from '@theme/AnnouncementBarProvider';
import UserPreferencesProvider from '@theme/UserPreferencesProvider';
import AnnouncementBar from '@theme/AnnouncementBar';
import Navbar from '@theme/Navbar';
import Footer from '@theme/Footer';
@ -44,45 +43,40 @@ function Layout(props) {
return (
<ThemeProvider>
<TabGroupChoiceProvider>
<AnnouncementBarProvider>
<Head>
{/* TODO: Do not assume that it is in english language */}
<html lang="en" />
<UserPreferencesProvider>
<Head>
{/* TODO: Do not assume that it is in english language */}
<html lang="en" />
{metaTitle && <title>{metaTitle}</title>}
{metaTitle && <meta property="og:title" content={metaTitle} />}
{favicon && <link rel="shortcut icon" href={faviconUrl} />}
{description && <meta name="description" content={description} />}
{description && (
<meta property="og:description" content={description} />
)}
{version && <meta name="docsearch:version" content={version} />}
{keywords && keywords.length && (
<meta name="keywords" content={keywords.join(',')} />
)}
{metaImage && <meta property="og:image" content={metaImageUrl} />}
{metaImage && (
<meta property="twitter:image" content={metaImageUrl} />
)}
{metaImage && (
<meta
name="twitter:image:alt"
content={`Image for ${metaTitle}`}
/>
)}
{permalink && (
<meta property="og:url" content={siteUrl + permalink} />
)}
{permalink && <link rel="canonical" href={siteUrl + permalink} />}
<meta name="twitter:card" content="summary_large_image" />
</Head>
<AnnouncementBar />
<Navbar />
<div className="main-wrapper">{children}</div>
{!noFooter && <Footer />}
</AnnouncementBarProvider>
</TabGroupChoiceProvider>
{metaTitle && <title>{metaTitle}</title>}
{metaTitle && <meta property="og:title" content={metaTitle} />}
{favicon && <link rel="shortcut icon" href={faviconUrl} />}
{description && <meta name="description" content={description} />}
{description && (
<meta property="og:description" content={description} />
)}
{version && <meta name="docsearch:version" content={version} />}
{keywords && keywords.length && (
<meta name="keywords" content={keywords.join(',')} />
)}
{metaImage && <meta property="og:image" content={metaImageUrl} />}
{metaImage && (
<meta property="twitter:image" content={metaImageUrl} />
)}
{metaImage && (
<meta name="twitter:image:alt" content={`Image for ${metaTitle}`} />
)}
{permalink && (
<meta property="og:url" content={siteUrl + permalink} />
)}
{permalink && <link rel="canonical" href={siteUrl + permalink} />}
<meta name="twitter:card" content="summary_large_image" />
</Head>
<AnnouncementBar />
<Navbar />
<div className="main-wrapper">{children}</div>
{!noFooter && <Footer />}
</UserPreferencesProvider>
</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 useTabGroupChoiceContext from '@theme/hooks/useTabGroupChoiceContext';
import useUserPreferencesContext from '@theme/hooks/useUserPreferencesContext';
import classnames from 'classnames';
@ -19,7 +19,7 @@ const keys = {
function Tabs(props) {
const {block, children, defaultValue, values, groupId} = props;
const {tabGroupChoices, setTabGroupChoices} = useTabGroupChoiceContext();
const {tabGroupChoices, setTabGroupChoices} = useUserPreferencesContext();
const [selectedValue, setSelectedValue] = useState(defaultValue);
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';
const AnnouncementBarContext = createContext({
const UserPreferencesContext = createContext({
// Tab group choice.
tabGroupChoices: {},
setTabGroupChoices: () => {},
// Announcement bar.
isAnnouncementBarClosed: false,
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 AnnouncementBarContext from '@theme/AnnouncementBarContext';
function useAnnouncementBarContext() {
return useContext(AnnouncementBarContext);
import UserPreferencesContext from '@theme/UserPreferencesContext';
function useUserPreferencesContext() {
return useContext(UserPreferencesContext);
}
export default useAnnouncementBarContext;
export default useUserPreferencesContext;