From 8b1eda664c4fc095e36528d05306dcab2c38c01e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Magalh=C3=A3es?= <joamag@gmail.com>
Date: Tue, 19 Jul 2022 06:22:26 +0100
Subject: [PATCH] feat: new button switch component
---
examples/web/react/app.tsx | 11 +++++--
.../button-switch/button-switch.tsx | 33 +++++++++++++++++++
examples/web/react/components/index.ts | 1 +
3 files changed, 43 insertions(+), 2 deletions(-)
create mode 100644 examples/web/react/components/button-switch/button-switch.tsx
diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx
index 546233a5..09a5ca31 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, Info, Pair } from "./components";
+import { Button, ButtonSwitch, Info, Pair } from "./components";
import "./app.css";
@@ -15,7 +15,14 @@ export const App = () => {
<Pair
key="button"
name={"Button"}
- valueNode={<Button text="NEO" size={"large"} style={["simple"]} />}
+ valueNode={
+ <ButtonSwitch
+ options={["NEO", "CLASSIC"]}
+ size={"large"}
+ style={["simple"]}
+ onChange={(v) => alert(v)}
+ />
+ }
/>
];
return (
diff --git a/examples/web/react/components/button-switch/button-switch.tsx b/examples/web/react/components/button-switch/button-switch.tsx
new file mode 100644
index 00000000..54c5bd27
--- /dev/null
+++ b/examples/web/react/components/button-switch/button-switch.tsx
@@ -0,0 +1,33 @@
+import React, { FC, useState } from "react";
+import Button from "../button/button";
+
+type ButtonSwitchProps = {
+ options: string[];
+ size?: string;
+ style?: string[];
+ onClick?: () => void;
+ onChange?: (value: string, index: number) => void;
+};
+
+export const ButtonSwitch: FC<ButtonSwitchProps> = ({
+ options,
+ size = "small",
+ style = ["simple", "border"],
+ onClick,
+ onChange
+}) => {
+ const [index, setIndex] = useState(0);
+ const text = () => options[index];
+ const _onClick = () => {
+ const indexNew = (index + 1) % options.length;
+ const option = options[indexNew];
+ setIndex(indexNew);
+ if (onClick) onClick();
+ if (onChange) onChange(option, indexNew);
+ };
+ return (
+ <Button text={text()} size={size} style={style} onClick={_onClick} />
+ );
+};
+
+export default ButtonSwitch;
diff --git a/examples/web/react/components/index.ts b/examples/web/react/components/index.ts
index 9ab1a38f..39a5636e 100644
--- a/examples/web/react/components/index.ts
+++ b/examples/web/react/components/index.ts
@@ -1,3 +1,4 @@
export * from "./button/button";
+export * from "./button-switch/button-switch";
export * from "./info/info";
export * from "./pair/pair";
--
GitLab