From e514c2f13d5cea9090d958627d5c18ef610b2248 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Magalh=C3=A3es?= <joamag@gmail.com>
Date: Mon, 18 Jul 2022 09:33:35 +0100
Subject: [PATCH] feat: initial key value example
---
examples/web/react/app.tsx | 13 +++++++--
examples/web/react/components/info/info.css | 29 +++++++++++++++++++++
examples/web/react/components/info/info.tsx | 7 ++---
examples/web/react/components/pair/pair.tsx | 14 +++++-----
4 files changed, 51 insertions(+), 12 deletions(-)
create mode 100644 examples/web/react/components/info/info.css
diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx
index cfda6f16..7406a525 100644
--- a/examples/web/react/app.tsx
+++ b/examples/web/react/app.tsx
@@ -1,7 +1,7 @@
import React, { useState } from "react";
import ReactDOM from "react-dom/client";
-import { Button } from "./components";
+import { Button, Info, Pair } from "./components";
import "./app.css";
@@ -9,7 +9,16 @@ export const App = () => {
const [count, setCount] = useState(0);
const getText = () => `Hello World ${count}`;
const onClick = () => setCount(count + 1);
- return <Button text={getText()} onClick={onClick} />;
+ const pairs = () => [
+ <Pair key="tobias" name={"Tobias"} value="2"></Pair>,
+ <Pair key="matias" name={"Matias"} value="3"></Pair>
+ ];
+ return (
+ <>
+ <Button text={getText()} onClick={onClick} />
+ <Info pairs={pairs()}></Info>
+ </>
+ );
};
export const startApp = (element: string) => {
diff --git a/examples/web/react/components/info/info.css b/examples/web/react/components/info/info.css
new file mode 100644
index 00000000..4d41c39e
--- /dev/null
+++ b/examples/web/react/components/info/info.css
@@ -0,0 +1,29 @@
+.info {
+ font-size: 24px;
+ vertical-align: top;
+}
+
+.info > dt {
+ clear: both;
+ float: left;
+ margin-top: 12px;
+}
+
+.info > dt:first-of-type {
+ margin-top: 0px;
+}
+
+.info > dd {
+ float: right;
+ margin-top: 12px;
+}
+
+.info > dd:first-of-type {
+ margin-top: 0px;
+}
+
+.info::after {
+ clear: both;
+ content: '';
+ display: block;
+}
diff --git a/examples/web/react/components/info/info.tsx b/examples/web/react/components/info/info.tsx
index 6122534e..c55d36d6 100644
--- a/examples/web/react/components/info/info.tsx
+++ b/examples/web/react/components/info/info.tsx
@@ -1,14 +1,15 @@
-import React, { FC } from "react";
+import React, { FC, ReactNode } from "react";
import "./info.css";
type InfoProps = {
+ pairs?: ReactNode[];
style?: string[];
};
-export const Info: FC<InfoProps> = ({ style = [] }) => {
+export const Info: FC<InfoProps> = ({ pairs = [], style = [] }) => {
const classes = () => ["info", ...style].join(" ");
- return <dl className={classes()}></dl>;
+ return <dl className={classes()}>{pairs}</dl>;
};
export default Info;
diff --git a/examples/web/react/components/pair/pair.tsx b/examples/web/react/components/pair/pair.tsx
index b0b9321b..4b19c469 100644
--- a/examples/web/react/components/pair/pair.tsx
+++ b/examples/web/react/components/pair/pair.tsx
@@ -3,27 +3,27 @@ import React, { FC } from "react";
import "./pair.css";
type PairProps = {
- key: string;
+ name: string;
value?: string;
style?: string[];
- onKeyClick?: () => void;
+ onNameClick?: () => void;
onValueClick?: () => void;
};
export const Pair: FC<PairProps> = ({
- key,
+ name,
value,
style = [],
- onKeyClick,
+ onNameClick,
onValueClick
}) => {
const classes = () => ["pair", ...style].join(" ");
- const _onKeyClick = () => (onKeyClick ? onKeyClick() : undefined);
+ const _onNameClick = () => (onNameClick ? onNameClick() : undefined);
const _onValueClick = () => (onValueClick ? onValueClick() : undefined);
return (
<>
- <dt className={classes()} onClick={_onKeyClick}>
- {key}
+ <dt className={classes()} onClick={_onNameClick}>
+ {name}
</dt>
<dd className={classes()} onClick={_onValueClick}>
{value ?? ""}
--
GitLab