Skip to content

Commit bffc903

Browse files
nDriaDevnDriaDev
committed
[IMPL] Show Component
1 parent b058263 commit bffc903

11 files changed

Lines changed: 84 additions & 31 deletions

File tree

‎apps/react-tools-demo/scripts/generateRouter.js‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ const UTILS_DIR_NAME = "utils";
1515
const HOOKS_TYPE = ["state", "lifecycle", "performance", "events", "api-dom"];
1616

1717
/**
18-
*
19-
* @param {{readonly value: string;add(s: string): this;set(s: string[]): this;}} router
18+
*
19+
* @param {{readonly value: string;add(s: string): this;set(s: string[]): this;}} router
2020
*/
2121
async function generateImportMarkdown(router) {
2222
/**
@@ -30,9 +30,9 @@ async function generateImportMarkdown(router) {
3030
}
3131

3232
/**
33-
*
34-
* @param {{readonly value: string;add(s: string): this;set(s: string[]): this;}} router
35-
* @returns {Promise<{readonly value: string;add(s: string): this;set(s: string[]): this;}>} router
33+
*
34+
* @param {{readonly value: string;add(s: string): this;set(s: string[]): this;}} router
35+
* @returns {Promise<{readonly value: string;add(s: string): this;set(s: string[]): this;}>} router
3636
*/
3737
async function generateImportDemoComponent(router) {
3838
const demoComponentDirs = await fs.readdir(path.join(PATH_DEMO_SRC, DEMO_COMPONENT_DIR_NAME));
@@ -59,9 +59,9 @@ async function generateImportDemoComponent(router) {
5959
for (const componentDemoComponentDir of componentsDemoComponentDirs) {
6060
const files = await fs.readdir(path.join(PATH_DEMO_SRC, DEMO_COMPONENT_DIR_NAME, demoComponentDir, componentDemoComponentDir));
6161
files.forEach(l => {
62-
const [fileName, extension] = l.split(".")[0];
62+
const [fileName, extension] = l.split(".");
6363
if (fileName.toLowerCase() === componentDemoComponentDir.toLowerCase() && extension === "tsx") {
64-
router.add(`const ${fileName} = lazy((() => import('../${DEMO_COMPONENT_DIR_NAME}/${demoComponentDir}/${componentDemoComponentDir}/${fileName}').then(module => ({default: "default" in module ? module["default"] : module["${fileName}"]})) as unknown as () => Promise<{ default: ComponentType; }>)`);
64+
router.add(`const ${fileName} = lazy((() => import('../${DEMO_COMPONENT_DIR_NAME}/${demoComponentDir}/${componentDemoComponentDir}/${fileName}').then(module => ({default: "default" in module ? module["default"] : module["${fileName}"]}))) as unknown as () => Promise<{ default: ComponentType; }>)`);
6565
}
6666
})
6767
}
@@ -70,8 +70,8 @@ async function generateImportDemoComponent(router) {
7070
}
7171

7272
/**
73-
*
74-
* @param {{readonly value: string;add(s: string): this;set(s: string[]): this;}} router
73+
*
74+
* @param {{readonly value: string;add(s: string): this;set(s: string[]): this;}} router
7575
*/
7676
async function generateImport(router) {
7777
router.set([
@@ -85,13 +85,13 @@ async function generateImport(router) {
8585
}
8686

8787
/**
88-
*
89-
* @param {{readonly value: string;add(s: string): this;set(s: string[]): this;}} router
90-
* @param {string[]} stateFiles
91-
* @param {string[]} lifecycleFiles
92-
* @param {string[]} performanceFiles
93-
* @param {string[]} eventsfiles
94-
* @param {string[]} apiDomFiles
88+
*
89+
* @param {{readonly value: string;add(s: string): this;set(s: string[]): this;}} router
90+
* @param {string[]} stateFiles
91+
* @param {string[]} lifecycleFiles
92+
* @param {string[]} performanceFiles
93+
* @param {string[]} eventsfiles
94+
* @param {string[]} apiDomFiles
9595
*/
9696
function createHooksRoutes(router, stateFiles, lifecycleFiles, performanceFiles, eventsFiles, apiDomFiles,) {
9797
router.add(' {');
@@ -201,8 +201,8 @@ function createHooksRoutes(router, stateFiles, lifecycleFiles, performanceFiles,
201201
}
202202

203203
/**
204-
*
205-
* @param {{readonly value: string;add(s: string): this;set(s: string[]): this;}} router
204+
*
205+
* @param {{readonly value: string;add(s: string): this;set(s: string[]): this;}} router
206206
* @param {string[]} componentsFiles
207207
* @param {string} parentRoot
208208
*/
@@ -222,8 +222,8 @@ function createRoutes(router, componentsFiles, parentRoot) {
222222
}
223223

224224
/**
225-
*
226-
* @param {{readonly value: string;add(s: string): this;set(s: string[]): this;}} router
225+
*
226+
* @param {{readonly value: string;add(s: string): this;set(s: string[]): this;}} router
227227
*/
228228
async function createRouter(router) {
229229
const libSrcIndexFile = await fs.readFile(path.join(PATH_LIB_SRC, "index.ts"));
@@ -283,17 +283,17 @@ async function generateRouter() {
283283
const stringBuffer = {
284284
value: "",
285285
/**
286-
*
287-
* @param {string} s
286+
*
287+
* @param {string} s
288288
* @returns {this}
289289
*/
290290
add(s) {
291291
this.value += s + "\n";
292292
return this;
293293
},
294294
/**
295-
*
296-
* @param {string[]} s
295+
*
296+
* @param {string[]} s
297297
* @returns {this}
298298
*/
299299
set(s) {

‎apps/react-tools-demo/src/markdown/Show.md‎

Lines changed: 29 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,43 @@
1-
#
1+
# Show
2+
Generic component used to conditional render part of the view: it renders _children_ when the _when_ prop is truthy, otherwise the _fallback_ prop, if it is present, or null.
3+
4+
## Usage
5+
6+
```tsx
7+
export default function ShowComponent() {
8+
const [show, setShow] = useReducer(t => !t, false);
9+
10+
return <>
11+
<button onClick={setShow}>{show ? "hide" : "show"}</button>
12+
<Show when={show} fallback={<p>hidden</p>}>
13+
<p>Shown</p>
14+
</Show>
15+
</>
16+
}
17+
```
18+
19+
> The component has a state boolean variable _show_ updated by a button element and uses _Show_ generic component to conditional render a p element. If _show_ is true, a _p element_ with __Shown__ text value is shown otherwise is shown a _p element_ with __Hidden__ text value.
220
321

422
## API
523

624
```tsx
7-
Show = ({ when, fallback, children }: PropsWithChildren<{ when: boolean, fallback?: ReactNode }>)
25+
Show({ when, fallback, children }: PropsWithChildren<{ when: boolean, fallback?: ReactNode }>)
826
```
927

1028
> ### Params
1129
>
12-
>
30+
> - __object__: _PropsWithChildren<{when: boolean, fallback?: ReactNode}>_
31+
> - __object.when__: _boolean_
32+
boolean indicating if to show _children_ or _fallback_/_null_.
33+
> - __object.fallback?__: _ReactNode_
34+
optional element to render when _when_ prop is false.
35+
> - __object.children?__: _PropsWithChildren<any>["children"]_
36+
optional element to render when _when_ prop is true.
1337
>
1438
1539
> ### Returns
1640
>
17-
>
18-
>
41+
> __element__: the element rendered or null.
42+
> - _JSX.Element|null_
1943
>

‎apps/react-tools-demo/src/markdown/useAudio.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export const UseAudio = () => {
1414
<button onClick={pause} disabled={state.paused}>Pause</button>
1515
</div>
1616
}
17+
1718
```
1819

1920
> The component use _useAudio_ hook to use an audio track.

‎apps/react-tools-demo/src/markdown/usePIP.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export const UsePIP = () => {
2929
}
3030
</div>
3131
}
32+
3233
```
3334

3435
> The component uses _usePIP_ hook to show a video and a button to enable PIP.

‎apps/react-tools-demo/src/markdown/usePopover.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ function that will be executed when popover has been showed/hidden.
5151
5252
> ### Returns
5353
>
54-
> __reuslt__: _UsePopoverResult_
54+
> __result__: _UsePopoverResult_
5555
> Object with these properties:
5656
> - __isSupported__: boolean that indicates if Popover API is supported or not.
5757
> - __isSupported__: boolean that indicates if popover is opened or not.

‎apps/react-tools-demo/src/markdown/useRemotePlayback.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export const UseRemotePlayback = () => {
1717
<button style={{marginTop: 20}} onClick={prompt} disabled={state === "unavailable"}>Prompt</button>
1818
</div>
1919
}
20+
2021
```
2122

2223
> The component use _useRemotePlayback_ hook to play a video in a remote device.

‎apps/react-tools-demo/src/markdown/useVideo.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export const UseVideo = () => {
1414
<button onClick={pause} disabled={state.paused}>Pause</button>
1515
</div>
1616
}
17+
1718
```
1819

1920
> The component use _useVideo_ hook to use a video track.

‎apps/react-tools-demo/src/pages/components/show/Show.md‎

Whitespace-only changes.

‎apps/react-tools-demo/src/pages/components/show/Show.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { useReducer } from "react";
2+
import { Show } from "../../../../../../packages/react-tools/src";
3+
4+
/**
5+
The component has a state boolean variable _show_ updated by a button element and uses _Show_ generic component to conditional render a p element. If _show_ is true, a _p element_ with __Shown__ text value is shown otherwise is shown a _p element_ with __Hidden__ text value.
6+
*/
7+
export default function ShowComponent() {
8+
const [show, setShow] = useReducer(t => !t, false);
9+
10+
return <>
11+
<button onClick={setShow}>{show ? "hide" : "show"}</button>
12+
<Show when={show} fallback={<p>hidden</p>}>
13+
<p>Shown</p>
14+
</Show>
15+
</>
16+
}

‎apps/react-tools-demo/src/router/Router.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,7 @@ import useVisibleMD from "../markdown/useVisible.md?raw"
131131
import useWebSocketMD from "../markdown/useWebSocket.md?raw"
132132
import useWebWorkerMD from "../markdown/useWebWorker.md?raw"
133133
import useWebWorkerFnMD from "../markdown/useWebWorkerFn.md?raw"
134+
const Show = lazy((() => import('../pages/components/show/Show').then(module => ({default: "default" in module ? module["default"] : module["Show"]}))) as unknown as () => Promise<{ default: ComponentType; }>)
134135
import HomeWrapper from '../pages/home/HomeWrapper'
135136
const UseActiveElement = lazy((() => import('../pages/hooks/api-dom/useActiveElement/UseActiveElement').then(module => ({default: "default" in module ? module["default"] : module["UseActiveElement"]}))) as unknown as () => Promise<{ default: ComponentType; }>)
136137
const UseAnimation = lazy((() => import('../pages/hooks/api-dom/useAnimation/UseAnimation').then(module => ({default: "default" in module ? module["default"] : module["UseAnimation"]}))) as unknown as () => Promise<{ default: ComponentType; }>)
@@ -986,7 +987,7 @@ function Router() {
986987
{
987988
path: "Show",
988989
element: <Suspense>
989-
<ComponentLayout markdown={ShowMD} />
990+
<ComponentLayout markdown={ShowMD} component={<Show/>}/>
990991
</Suspense>
991992
},
992993
]

0 commit comments

Comments
 (0)