Skip to content

Commit 20960f1

Browse files
mrholekmrholek
committed
docs: fix context issue
1 parent 9ef30fc commit 20960f1

File tree

5 files changed

+100
-90
lines changed

5 files changed

+100
-90
lines changed

‎packages/docs/src/AppContext.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react'
2+
3+
export interface AppContextProps {
4+
name?: string
5+
sidebarVisible?: boolean | undefined
6+
setSidebarVisible?: React.Dispatch<React.SetStateAction<boolean | undefined>>
7+
}
8+
9+
export const AppContextInitialState: AppContextProps = {
10+
name: 'DocsContext',
11+
}
12+
13+
export const AppContext = React.createContext(AppContextInitialState)

‎packages/docs/src/components/Header.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,20 @@ import React, { FC } from 'react'
22

33
import CIcon from '@coreui/icons-react'
44
import { cibGithub, cibTwitter, cilCloudDownload, cilMenu } from '@coreui/icons'
5-
import { CButton, CHeader, CHeaderNav, CHeaderToggler, CNavItem } from '@coreui/react/src/index'
5+
import { CButton, CHeader, CHeaderNav, CHeaderToggler, CNavItem } from '@coreui/react'
66

7-
import { myContext } from './../templates/Docs'
7+
import { AppContext } from './../AppContext'
88

99
const Header: FC = () => {
1010
return (
1111
<>
12-
<myContext.Consumer>
12+
<AppContext.Consumer>
1313
{(context) => (
1414
<CHeader className="mb-5" position="sticky">
1515
<CHeaderToggler
1616
className="ms-md-3"
1717
onClick={() => {
18-
context.setSidebarVisible(!context.sidebarVisible)
18+
context.setSidebarVisible && context.setSidebarVisible(!context.sidebarVisible)
1919
}}
2020
>
2121
<CIcon icon={cilMenu} size="lg" />
@@ -45,7 +45,7 @@ const Header: FC = () => {
4545
</CButton>
4646
</CHeader>
4747
)}
48-
</myContext.Consumer>
48+
</AppContext.Consumer>
4949
</>
5050
)
5151
}

‎packages/docs/src/components/Sidebar.tsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ import {
99
CSidebar,
1010
CSidebarBrand,
1111
CImage,
12-
} from '@coreui/react/src/index'
12+
} from '@coreui/react'
1313
import { SidebarNav } from '.'
1414

15-
import { myContext } from './../templates/Docs'
15+
import { AppContext } from './../AppContext'
1616

1717
import items from './../nav'
1818
// @ts-expect-error svg file
@@ -24,15 +24,15 @@ interface SidebarProps {
2424

2525
const Sidebar: FC<SidebarProps> = ({ ...props }) => {
2626
return (
27-
<myContext.Consumer>
27+
<AppContext.Consumer>
2828
{(context) => (
2929
<CSidebar
3030
className="docs-sidebar border-end ps-xl-4 elevation-0"
3131
position="fixed"
3232
size="lg"
3333
visible={context.sidebarVisible}
34-
onVisibleChange={(value) => {
35-
context.setSidebarVisible(value)
34+
onVisibleChange={(value: boolean) => {
35+
context.setSidebarVisible && context.setSidebarVisible(value)
3636
}}
3737
>
3838
<CSidebarBrand className="justify-content-start ps-3">
@@ -44,21 +44,21 @@ const Sidebar: FC<SidebarProps> = ({ ...props }) => {
4444
React.js
4545
</CDropdownToggle>
4646
<CDropdownMenu className="w-100">
47-
<CDropdownItem href="#" disabled>
48-
Angular <span className="badge bg-warning float-end mt-1">Work in Progress</span>
47+
<CDropdownItem href="https://coreui.io/angular/docs/" target="_blank">
48+
Angular
4949
</CDropdownItem>
50-
<CDropdownItem href="https://coreui.io/docs/4.0/" target="_blank">
50+
<CDropdownItem href="https://coreui.io/docs/" target="_blank">
5151
JavaScript / Vanilla JS
5252
</CDropdownItem>
53-
<CDropdownItem href="https://coreui.io/vue/docs/4.0/" target="_blank">
53+
<CDropdownItem href="https://coreui.io/vue/docs/" target="_blank">
5454
Vue.js
5555
</CDropdownItem>
5656
</CDropdownMenu>
5757
</CDropdown>
5858
<SidebarNav items={items} currentRoute={props.currentRoute} />
5959
</CSidebar>
6060
)}
61-
</myContext.Consumer>
61+
</AppContext.Consumer>
6262
)
6363
}
6464

‎packages/docs/src/templates/Docs.tsx

Lines changed: 72 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,23 @@
1-
import React, { FC, useState } from 'react'
1+
import React, { createContext, FC, useState } from 'react'
22
import PropTypes from 'prop-types'
33
import { graphql } from 'gatsby'
44
import { MDXProvider } from '@mdx-js/react'
55
import { MDXRenderer } from 'gatsby-plugin-mdx'
66
import { Ads, CodeBlock, Example, Footer, Header, Seo, Sidebar, Toc } from './../components/'
7-
import { CCol, CContainer, CLink, CRow, CTable } from '@coreui/react/src/'
7+
import { CCol, CContainer, CLink, CRow, CTable } from '@coreui/react'
88
import './../styles/styles.scss'
99

10-
interface ContextProps {
11-
sidebarVisible: boolean | undefined
12-
setSidebarVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
13-
}
10+
import { AppContext } from './../AppContext'
11+
12+
// interface ContextProps {
13+
// name?: string
14+
// sidebarVisible: boolean | undefined
15+
// setSidebarVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
16+
// }
1417

15-
export const myContext = React.createContext({} as ContextProps)
18+
// export const MyContext = createContext({
19+
// name: 'DocsContext',
20+
// } as ContextProps)
1621

1722
const components = {
1823
// eslint-disable-next-line react/display-name
@@ -22,78 +27,74 @@ const components = {
2227
Example,
2328
}
2429

25-
const DocsLayout: FC = ({ data: { mdx } }) => {
26-
// const myMarkdownFile = require('@coreui/coreui/scss/_variables.scss').toString()
30+
const DocsLayout: FC = ({ data: { mdx } }: { data: any }) => {
2731
const [sidebarVisible, setSidebarVisible] = useState()
2832
return (
29-
<>
33+
<AppContext.Provider
34+
value={{
35+
name: 'aaaaa',
36+
sidebarVisible,
37+
setSidebarVisible,
38+
}}
39+
>
3040
<Seo
3141
title={mdx.frontmatter.title}
3242
description={mdx.frontmatter.description}
3343
name={mdx.frontmatter.name}
3444
/>
35-
<myContext.Provider
36-
value={{
37-
sidebarVisible,
38-
setSidebarVisible,
39-
}}
40-
>
41-
<Sidebar currentRoute={mdx.frontmatter.route} />
42-
<div className="wrapper d-flex flex-column min-vh-100">
43-
<Header />
44-
<div className="body flex-grow-1 px-3">
45-
<CContainer lg>
46-
<CRow>
47-
<CCol lg={9}>
48-
<div className="bg-info bg-opacity-10 border-start border-start-5 border-start-info p-4 pb-3 mb-5">
49-
<h3 className="mb-4">Support CoreUI Development</h3>
50-
<p>
51-
CoreUI is an MIT-licensed open source project and is completely free to use.
52-
However, the amount of effort needed to maintain and develop new features for
53-
the project is not sustainable without proper financial backing.
54-
</p>
55-
<p>
56-
You can support our Open Source software development in the following ways:
57-
</p>
58-
<ul>
59-
<li>
60-
Buy the{' '}
61-
<CLink href="https://coreui.io/pricing/?support=react">CoreUI PRO</CLink>,
62-
and get access to PRO components, and dedicated support.
63-
</li>
64-
<li>
65-
<CLink href="https://opencollective.com/coreui" target="_blank">
66-
Became a sponsor
67-
</CLink>
68-
, and get your logo on BACKERS.md/README.md files or each site of this
69-
documentation
70-
</li>
71-
<li>
72-
Give us a star ⭐️ on{' '}
73-
<CLink href="https://github.com/coreui/coreui-react" target="_blank">
74-
Github
75-
</CLink>
76-
.
77-
</li>
78-
</ul>
79-
</div>
80-
<h1>{mdx.frontmatter.title}</h1>
81-
<p className="docs-lead fs-4 fw-light">{mdx.frontmatter.description}</p>
82-
<Ads code="CEAICKJY" placement="coreuiio" />
83-
<MDXProvider components={components}>
84-
<MDXRenderer frontmatter={mdx.frontmatter}>{mdx.body}</MDXRenderer>
85-
</MDXProvider>
86-
</CCol>
87-
<CCol lg={3}>
88-
<Toc items={mdx.tableOfContents} />
89-
</CCol>
90-
</CRow>
91-
</CContainer>
92-
</div>
93-
<Footer />
45+
<Sidebar currentRoute={mdx.frontmatter.route} />
46+
<div className="wrapper d-flex flex-column min-vh-100">
47+
<Header />
48+
<div className="body flex-grow-1 px-3">
49+
<CContainer lg>
50+
<CRow>
51+
<CCol lg={9}>
52+
<div className="bg-info bg-opacity-10 border-start border-start-5 border-start-info p-4 pb-3 mb-5">
53+
<h3 className="mb-4">Support CoreUI Development</h3>
54+
<p>
55+
CoreUI is an MIT-licensed open source project and is completely free to use.
56+
However, the amount of effort needed to maintain and develop new features for
57+
the project is not sustainable without proper financial backing.
58+
</p>
59+
<p>You can support our Open Source software development in the following ways:</p>
60+
<ul>
61+
<li>
62+
Buy the{' '}
63+
<CLink href="https://coreui.io/pricing/?support=react">CoreUI PRO</CLink>, and
64+
get access to PRO components, and dedicated support.
65+
</li>
66+
<li>
67+
<CLink href="https://opencollective.com/coreui" target="_blank">
68+
Became a sponsor
69+
</CLink>
70+
, and get your logo on BACKERS.md/README.md files or each site of this
71+
documentation
72+
</li>
73+
<li>
74+
Give us a star ⭐️ on{' '}
75+
<CLink href="https://github.com/coreui/coreui-react" target="_blank">
76+
Github
77+
</CLink>
78+
.
79+
</li>
80+
</ul>
81+
</div>
82+
<h1>{mdx.frontmatter.title}</h1>
83+
<p className="docs-lead fs-4 fw-light">{mdx.frontmatter.description}</p>
84+
<Ads code="CEAICKJY" placement="coreuiio" />
85+
<MDXProvider components={components}>
86+
<MDXRenderer frontmatter={mdx.frontmatter}>{mdx.body}</MDXRenderer>
87+
</MDXProvider>
88+
</CCol>
89+
<CCol lg={3}>
90+
<Toc items={mdx.tableOfContents} />
91+
</CCol>
92+
</CRow>
93+
</CContainer>
9494
</div>
95-
</myContext.Provider>
96-
</>
95+
<Footer />
96+
</div>
97+
</AppContext.Provider>
9798
)
9899
}
99100

‎packages/docs/src/templates/Layout.tsx

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
11
import React, { FC } from 'react'
22
import PropTypes from 'prop-types'
3-
import Helmet from 'react-helmet'
43
import { Footer, Header } from './../components/'
54
import './../styles/styles.scss'
65
import { CContainer } from '@coreui/react/src/'
76

87
const DefaultLayout: FC = ({ children, ...props }) => {
98
return (
109
<>
11-
<Helmet>
12-
<script src="https://media.ethicalads.io/media/client/ethicalads.min.js" />
13-
</Helmet>
1410
<div className="wrapper d-flex flex-column min-vh-100">
1511
<Header />
1612
<div className="body flex-grow-1 px-3">

0 commit comments

Comments
 (0)