[react] feat: Added docs for context
This commit is contained in:
joostdecock
parent
54fe6275af
commit
c60e5bf109
5 changed files with 287 additions and 12 deletions
|
|
@ -48,7 +48,7 @@ const LoadingStatus = ({ loadingStatus }) => {
|
|||
|
||||
return (
|
||||
<div
|
||||
className="tw:fixed tw:bottom-14 tw:md:top-28 tw:left-0 tw:w-full tw:z-50 tw:md:px-4 tw:md:mx-auto"
|
||||
className="tw:fixed tw:bottom-14 tw:md:bottom-auto tw:md:top-28 tw:left-0 tw:z-50 tw:md:px-4 tw:w-full"
|
||||
style={{ zIndex: 500 }}
|
||||
>
|
||||
<div
|
||||
|
|
@ -69,12 +69,17 @@ const LoadingStatus = ({ loadingStatus }) => {
|
|||
const LoadingProgress = ({ val = 0, max = 1, msg }) => (
|
||||
<div className="tw:flex tw:flex-col tw:gap-2 tw:w-full tw:grow-0">
|
||||
{msg}
|
||||
<progress className="tw:progress tw:progress-white" value={val} max={max}></progress>
|
||||
<progress className="tw:daisy-progress tw:text-info-content" value={val} max={max}></progress>
|
||||
</div>
|
||||
)
|
||||
|
||||
/*
|
||||
* The Context provider
|
||||
/**
|
||||
* The LoadingStatus context provider
|
||||
*
|
||||
* @component
|
||||
* @param {object} props - All component props
|
||||
* @param {JSX.Element} props.children - The component children, will be rendered if props.js is not set
|
||||
* @returns {JSX.Element}
|
||||
*/
|
||||
export const LoadingStatusContextProvider = ({ children }) => {
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
import React, { useContext } from 'react'
|
||||
import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus'
|
||||
|
||||
export const LoadingExamples = () => {
|
||||
const { setLoadingStatus, LoadingProgress } = useContext(LoadingStatusContext)
|
||||
|
||||
const progressExample = () => {
|
||||
window.setTimeout(
|
||||
setLoadingStatus([true, "All done!", true, true]),
|
||||
1500
|
||||
)
|
||||
for (let i=0; i<51; i++) window.setTimeout(
|
||||
() => setLoadingStatus([
|
||||
true,
|
||||
i < 50 ? <LoadingProgress msg="Herding cats" val={i} max={50} /> : 'All done!',
|
||||
i < 50 ? false : true,
|
||||
true
|
||||
]),
|
||||
i*25
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="tw:flex tw:flex-row tw:flex-wrap tw:items-center tw:gap-2">
|
||||
<button
|
||||
onClick={() => setLoadingStatus([true, "Success, will fade away", true, true])}
|
||||
className="tw:daisy-btn tw:daisy-btn-success"
|
||||
>Show Success Example</button>
|
||||
<button
|
||||
onClick={() => setLoadingStatus([true, "Error, will fade away", true, false])}
|
||||
className="tw:daisy-btn tw:daisy-btn-error"
|
||||
>Show Error Example</button>
|
||||
<button
|
||||
onClick={() => setLoadingStatus([true, "I won't go away, but will make way for a different loading status", false, true])}
|
||||
className="tw:daisy-btn tw:daisy-btn-secondary"
|
||||
>Show Permanent Status</button>
|
||||
<button onClick={progressExample} className="tw:daisy-btn tw:daisy-btn-primary">Show Progress Example</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,7 +1,143 @@
|
|||
---
|
||||
title: LoadingStatusContext
|
||||
title: LoadingStatus
|
||||
---
|
||||
|
||||
:::note
|
||||
This page is yet to be created
|
||||
:::
|
||||
import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
|
||||
import { Popout } from '@freesewing/react/components/Popout'
|
||||
import { Tab, Tabs } from '@freesewing/react/components/Tab'
|
||||
import { LoadingExamples } from './_examples.js'
|
||||
|
||||
<DocusaurusDoc>
|
||||
|
||||
The **LoadingStatus** context is used to set loading status across the FreeSewing web UI.
|
||||
|
||||
<Popout type="tip">
|
||||
As with all React context, the provider should wrap the content in which you
|
||||
want to use the context.
|
||||
|
||||
When using one of the high-level wrappers like
|
||||
[DocusaurusDoc](/reference/packages/react/components/docusaurus/#docusaurusdoc)
|
||||
or
|
||||
[DocusaurusPage](/reference/packages/react/components/docusaurus/#docusauruspage)
|
||||
the context provider is already loaded.
|
||||
</Popout>
|
||||
|
||||
## Examples
|
||||
|
||||
<LoadingExamples />
|
||||
|
||||
## Components
|
||||
|
||||
The **LoadingStatus** context provides the following components:
|
||||
|
||||
- [LoadingStatusContext](#loadingstatuscontext)
|
||||
- [LoadingStatusContextProvider](#loadingstatuscontextprovider)
|
||||
|
||||
### LoadingStatusContext
|
||||
|
||||
This is the context itself to be passed to `React.useContext()`.
|
||||
|
||||
```js
|
||||
import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus'
|
||||
|
||||
const MyComponent = () => {
|
||||
const {
|
||||
loading,
|
||||
LoadingStatus,
|
||||
LoadingProgress,
|
||||
setLoadingStatus,
|
||||
} = useContext(LoadingStatusContext)
|
||||
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
The returned object holds the following:
|
||||
|
||||
### context.loading
|
||||
|
||||
This is a boolean that is `true` when we are currently in a loading state, or `false` when not.
|
||||
|
||||
### context.LoadingStatus
|
||||
|
||||
This is the component that renders the actual loading status message.
|
||||
|
||||
<Popout type="tip">
|
||||
When using one of the high-level wrappers like
|
||||
[DocusaurusDoc](/reference/packages/react/components/docusaurus/#docusaurusdoc)
|
||||
or
|
||||
[DocusaurusPage](/reference/packages/react/components/docusaurus/#docusauruspage)
|
||||
the LoadingStatus component is already loaded.
|
||||
As such, so you typically do not need to use this.
|
||||
</Popout>
|
||||
|
||||
### context.LoadingProgress
|
||||
|
||||
This is a helper component to display a loading message with a progress bar.
|
||||
Although you still need to update the loading state yourself to generate a true progress example.
|
||||
|
||||
<Tabs tabs="Props, Examples">
|
||||
<Tab>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
<th>Optional</th>
|
||||
<th>Default Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>props</td>
|
||||
<td>object</td>
|
||||
<td>All component props</td>
|
||||
<td>no</td>
|
||||
<td>`undefined`</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>props.msg</td>
|
||||
<td>string|JSX.Element</td>
|
||||
<td>The loading message</td>
|
||||
<td>yes</td>
|
||||
<td>`undefined`</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>props.val</td>
|
||||
<td>number</td>
|
||||
<td>The current progress value</td>
|
||||
<td>yes</td>
|
||||
<td>`0`</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>props.max</td>
|
||||
<td>number</td>
|
||||
<td>The maximum progress value</td>
|
||||
<td>yes</td>
|
||||
<td>`1`</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</Tab>
|
||||
<Tab>
|
||||
<LoadingExamples />
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
### context.setLoadingStatus
|
||||
|
||||
This is the method to be used to set the loading status:
|
||||
```js
|
||||
setLoadingStatus([
|
||||
show=false,
|
||||
msg=null,
|
||||
fade=true
|
||||
success=true,
|
||||
])
|
||||
```
|
||||
### LoadingStatusContextProvider
|
||||
|
||||
This is the context provider, it does not take any props apart from `props.children`.
|
||||
|
||||
</DocusaurusDoc>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
import React, { useContext } from 'react'
|
||||
import { ModalContext } from '@freesewing/react/context/Modal'
|
||||
import { ModalWrapper } from '@freesewing/react/components/Modal'
|
||||
|
||||
export const ModalExamples = () => {
|
||||
const { setModal, clearModal } = useContext(ModalContext)
|
||||
|
||||
return (
|
||||
<div className="tw:flex tw:flex-row tw:flex-wrap tw:items-center tw:gap-2">
|
||||
<button
|
||||
onClick={() => setModal(<ModalWrapper><h1>Hello, I am modal</h1></ModalWrapper>)}
|
||||
className="tw:daisy-btn tw:daisy-btn-primary"
|
||||
>Show Example</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,7 +1,85 @@
|
|||
---
|
||||
title: ModalContext
|
||||
title: Modal
|
||||
---
|
||||
|
||||
:::note
|
||||
This page is yet to be created
|
||||
:::
|
||||
import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
|
||||
import { Popout } from '@freesewing/react/components/Popout'
|
||||
import { MiniTip } from '@freesewing/react/components/Mini'
|
||||
import { Tab, Tabs } from '@freesewing/react/components/Tab'
|
||||
import { ModalExamples } from './_examples.js'
|
||||
|
||||
<DocusaurusDoc>
|
||||
|
||||
The **Modal** context is used to set modal content across the FreeSewing web UI.
|
||||
|
||||
<Popout type="tip">
|
||||
As with all React context, the provider should wrap the content in which you
|
||||
want to use the context.
|
||||
|
||||
When using one of the high-level wrappers like
|
||||
[DocusaurusDoc](/reference/packages/react/components/docusaurus/#docusaurusdoc)
|
||||
or
|
||||
[DocusaurusPage](/reference/packages/react/components/docusaurus/#docusauruspage)
|
||||
the context provider is already loaded.
|
||||
</Popout>
|
||||
|
||||
## Examples
|
||||
|
||||
<ModalExamples />
|
||||
|
||||
<br />
|
||||
<MiniTip>The [ModalWrapper ](/reference/packages/react/components/modal/#modalwrapper) documentation has more examples.</MiniTip>
|
||||
|
||||
## Components
|
||||
|
||||
The **Modal** context provides the following components:
|
||||
|
||||
- [ModalContext](#modalcontext)
|
||||
- [ModalContextProvider](#modalcontextprovider)
|
||||
|
||||
### ModalContext
|
||||
|
||||
This is the context itself to be passed to `React.useContext()`.
|
||||
|
||||
```js
|
||||
import { ModalContext } from '@freesewing/react/context/Modal'
|
||||
|
||||
const MyComponent = () => {
|
||||
const {
|
||||
clearModal,
|
||||
modalContent,
|
||||
setModal,
|
||||
} = useContext(ModalContext)
|
||||
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
The returned object holds the following:
|
||||
|
||||
### context.clearModal
|
||||
|
||||
Call this method to clear the modal content.
|
||||
|
||||
### context.modalContent
|
||||
|
||||
This holds the current modal content.
|
||||
|
||||
<Popout type="tip">
|
||||
When using one of the high-level wrappers like
|
||||
[DocusaurusDoc](/reference/packages/react/components/docusaurus/#docusaurusdoc)
|
||||
or
|
||||
[DocusaurusPage](/reference/packages/react/components/docusaurus/#docusauruspage)
|
||||
the modal content will automatically be displayed. If not, you need to render it yoursel
|
||||
using this value.
|
||||
</Popout>
|
||||
|
||||
### context.setModal
|
||||
|
||||
Call this method to set the modal content. The only parameter is the content to set.
|
||||
|
||||
### ModalContextProvider
|
||||
|
||||
This is the context provider, it does not take any props apart from `props.children`.
|
||||
|
||||
</DocusaurusDoc>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue