From 5752900b5496c65f8968af720ad1e40e91715095 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Magalh=C3=A3es?= <joamag@gmail.com>
Date: Thu, 18 Aug 2022 10:42:51 +0100
Subject: [PATCH] refacotr: made info use children instead of props
---
examples/web/react/app.tsx | 57 ++++++++++-----------
examples/web/react/components/info/info.tsx | 6 +--
2 files changed, 31 insertions(+), 32 deletions(-)
diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx
index 0307e7f9..3ee47fff 100644
--- a/examples/web/react/app.tsx
+++ b/examples/web/react/app.tsx
@@ -15,34 +15,6 @@ export const App = () => {
const [count, setCount] = useState(0);
const getText = () => `Hello World ${count}`;
const onClick = () => setCount(count + 1);
- const pairs = () => [
- <Pair key="tobias" name={"Tobias"} value={`Count ${count}`} />,
- <Pair key="matias" name={"Matias"} value={"3"} />,
- <Pair
- key="button-tobias"
- name={"Button Increment"}
- valueNode={
- <ButtonIncrement
- value={200}
- delta={100}
- min={0}
- suffix={"Hz"}
- />
- }
- />,
- <Pair
- key="button-cpu"
- name={"Button Switch"}
- valueNode={
- <ButtonSwitch
- options={["NEO", "CLASSIC"]}
- size={"large"}
- style={["simple"]}
- onChange={(v) => alert(v)}
- />
- }
- />
- ];
return (
<>
<Button text={getText()} onClick={onClick} />
@@ -52,7 +24,34 @@ export const App = () => {
imageAlt="tobias"
onClick={onClick}
/>
- <Info pairs={pairs()} />
+ <Info>
+ <Pair key="tobias" name={"Tobias"} value={`Count ${count}`} />
+ <Pair key="matias" name={"Matias"} value={"3"} />
+ <Pair
+ key="button-tobias"
+ name={"Button Increment"}
+ valueNode={
+ <ButtonIncrement
+ value={200}
+ delta={100}
+ min={0}
+ suffix={"Hz"}
+ />
+ }
+ />
+ <Pair
+ key="button-cpu"
+ name={"Button Switch"}
+ valueNode={
+ <ButtonSwitch
+ options={["NEO", "CLASSIC"]}
+ size={"large"}
+ style={["simple"]}
+ onChange={(v) => alert(v)}
+ />
+ }
+ />
+ </Info>
</>
);
};
diff --git a/examples/web/react/components/info/info.tsx b/examples/web/react/components/info/info.tsx
index e91952c8..ce6130a4 100644
--- a/examples/web/react/components/info/info.tsx
+++ b/examples/web/react/components/info/info.tsx
@@ -3,7 +3,7 @@ import React, { FC, ReactNode } from "react";
import "./info.css";
type InfoProps = {
- pairs?: ReactNode[];
+ children?: ReactNode;
style?: string[];
};
@@ -18,9 +18,9 @@ type InfoProps = {
* to build the info pairs.
* @returns The info component with the associated pairs.
*/
-export const Info: FC<InfoProps> = ({ pairs = [], style = [] }) => {
+export const Info: FC<InfoProps> = ({ children = [], style = [] }) => {
const classes = () => ["info", ...style].join(" ");
- return <dl className={classes()}>{pairs}</dl>;
+ return <dl className={classes()}>{children}</dl>;
};
export default Info;
--
GitLab