diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx index 546233a5c4b630b8a2db0b53990a09950829b58f..09a5ca31eb5144f19c81116ef1cc787a46b3623f 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 0000000000000000000000000000000000000000..54c5bd272985ad8eb809eeb0aafdcca91de30e85 --- /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 9ab1a38f4208235f4d74bd1cecf51e12ba404ba9..39a5636eeccfd71ac14b39d7ba180973035fdfda 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";