From 76e89537abdecc8c3c7b0630e857639ff0f47073 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 16:04:44 +0100
Subject: [PATCH] refactor: better panel split
---
examples/web/react/app.tsx | 83 ++++++++++---------
.../components/panel-split/panel-split.css | 34 ++++----
.../components/panel-split/panel-split.tsx | 18 +++-
.../web/react/components/section/section.css | 10 +--
4 files changed, 80 insertions(+), 65 deletions(-)
diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx
index 485657e6..00864994 100644
--- a/examples/web/react/app.tsx
+++ b/examples/web/react/app.tsx
@@ -7,6 +7,7 @@ import {
ButtonSwitch,
Info,
Pair,
+ PanelSplit,
Section
} from "./components";
@@ -18,47 +19,49 @@ export const App = () => {
const onClick = () => setCount(count + 1);
return (
<>
- <Section>
- <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}`}
+ <PanelSplit>
+ <Section>
+ <Button text={getText()} onClick={onClick} />
+ <Button
+ text={getText()}
+ image={require("../res/pause.svg")}
+ imageAlt="tobias"
+ onClick={onClick}
/>
- <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>
+ <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>
+ </PanelSplit>
</>
);
};
diff --git a/examples/web/react/components/panel-split/panel-split.css b/examples/web/react/components/panel-split/panel-split.css
index 17aec400..88edf704 100644
--- a/examples/web/react/components/panel-split/panel-split.css
+++ b/examples/web/react/components/panel-split/panel-split.css
@@ -1,17 +1,17 @@
-.panel-split {
- display: flex;
-}
-
-.panel-split > .side-left {
- text-align: center;
- flex: 1 0;
- justify-content: center;
- display: flex;
-}
-
-.panel-split > .side-right {
- max-width: 100%;
- min-width: 580px;
- flex: 0;
- padding: 0px 24px 0px 24px;
-}
+.panel-split {
+ display: flex;
+}
+
+.panel-split > .side-left {
+ display: flex;
+ flex: 1 0;
+ justify-content: center;
+ text-align: center;
+}
+
+.panel-split > .side-right {
+ flex: 0;
+ max-width: 100%;
+ min-width: 580px;
+ padding: 0px 24px 0px 24px;
+}
diff --git a/examples/web/react/components/panel-split/panel-split.tsx b/examples/web/react/components/panel-split/panel-split.tsx
index e6966f20..f394bbbd 100644
--- a/examples/web/react/components/panel-split/panel-split.tsx
+++ b/examples/web/react/components/panel-split/panel-split.tsx
@@ -3,13 +3,25 @@ import React, { FC, ReactNode } from "react";
import "./panel-split.css";
type PanelSplitProps = {
- children: ReactNode;
+ children?: ReactNode;
+ left?: ReactNode;
+ right?: ReactNode;
style?: string[];
};
-export const PanelSplit: FC<PanelSplitProps> = ({ children, style = [] }) => {
+export const PanelSplit: FC<PanelSplitProps> = ({
+ children,
+ left,
+ right,
+ style = []
+}) => {
const classes = () => ["panel-split", ...style].join(" ");
- return <></>;
+ return (
+ <div className={classes()}>
+ <div className="side-left">{left}</div>
+ <div className="side-right">{children || right}</div>
+ </div>
+ );
};
export default PanelSplit;
diff --git a/examples/web/react/components/section/section.css b/examples/web/react/components/section/section.css
index 21d28b60..c5ce8fe2 100644
--- a/examples/web/react/components/section/section.css
+++ b/examples/web/react/components/section/section.css
@@ -1,5 +1,5 @@
-.section > .separator {
- height: 2px;
- background: #ffffff;
- margin: 22px 0px 22px 0px;
-}
+.section > .separator {
+ background: #ffffff;
+ height: 2px;
+ margin: 22px 0px 22px 0px;
+}
--
GitLab