From 23c8c0e5e0aa7f72bc75a1356c135e55a9a5c5e9 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 11:01:58 +0100
Subject: [PATCH] feat: initial panel split implementation
---
examples/web/react/app.tsx | 77 ++++++++++---------
examples/web/react/components/index.ts | 1 +
.../components/panel-split/panel-split.css | 0
.../components/panel-split/panel-split.tsx | 15 ++++
.../web/react/components/section/section.css | 5 ++
5 files changed, 63 insertions(+), 35 deletions(-)
create mode 100644 examples/web/react/components/panel-split/panel-split.css
create mode 100644 examples/web/react/components/panel-split/panel-split.tsx
diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx
index 3ee47fff..485657e6 100644
--- a/examples/web/react/app.tsx
+++ b/examples/web/react/app.tsx
@@ -6,7 +6,8 @@ import {
ButtonIncrement,
ButtonSwitch,
Info,
- Pair
+ Pair,
+ Section
} from "./components";
import "./app.css";
@@ -17,41 +18,47 @@ export const App = () => {
const onClick = () => setCount(count + 1);
return (
<>
- <Button text={getText()} onClick={onClick} />
- <Button
- text={getText()}
- image={require("../res/pause.svg")}
- imageAlt="tobias"
- onClick={onClick}
- />
- <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"}
- />
- }
+ <Section>
+ <Button text={getText()} onClick={onClick} />
+ <Button
+ text={getText()}
+ image={require("../res/pause.svg")}
+ imageAlt="tobias"
+ onClick={onClick}
/>
- <Pair
- key="button-cpu"
- name={"Button Switch"}
- valueNode={
- <ButtonSwitch
- options={["NEO", "CLASSIC"]}
- size={"large"}
- style={["simple"]}
- onChange={(v) => alert(v)}
- />
- }
- />
- </Info>
+ <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>
+ </Section>
</>
);
};
diff --git a/examples/web/react/components/index.ts b/examples/web/react/components/index.ts
index 4672a519..ce050ee2 100644
--- a/examples/web/react/components/index.ts
+++ b/examples/web/react/components/index.ts
@@ -3,4 +3,5 @@ export * from "./button-increment/button-increment";
export * from "./button-switch/button-switch";
export * from "./info/info";
export * from "./pair/pair";
+export * from "./panel-split/panel-split";
export * from "./section/section";
diff --git a/examples/web/react/components/panel-split/panel-split.css b/examples/web/react/components/panel-split/panel-split.css
new file mode 100644
index 00000000..e69de29b
diff --git a/examples/web/react/components/panel-split/panel-split.tsx b/examples/web/react/components/panel-split/panel-split.tsx
new file mode 100644
index 00000000..e6966f20
--- /dev/null
+++ b/examples/web/react/components/panel-split/panel-split.tsx
@@ -0,0 +1,15 @@
+import React, { FC, ReactNode } from "react";
+
+import "./panel-split.css";
+
+type PanelSplitProps = {
+ children: ReactNode;
+ style?: string[];
+};
+
+export const PanelSplit: FC<PanelSplitProps> = ({ children, style = [] }) => {
+ const classes = () => ["panel-split", ...style].join(" ");
+ return <></>;
+};
+
+export default PanelSplit;
diff --git a/examples/web/react/components/section/section.css b/examples/web/react/components/section/section.css
index e69de29b..21d28b60 100644
--- a/examples/web/react/components/section/section.css
+++ b/examples/web/react/components/section/section.css
@@ -0,0 +1,5 @@
+.section > .separator {
+ height: 2px;
+ background: #ffffff;
+ margin: 22px 0px 22px 0px;
+}
--
GitLab