diff --git a/src/components/inputs/Radio.stories.jsx b/src/components/inputs/Radio.stories.jsx new file mode 100644 index 0000000..23816a7 --- /dev/null +++ b/src/components/inputs/Radio.stories.jsx @@ -0,0 +1,42 @@ +import * as React from "react" +import * as ReactDOM from "react-dom" +import * as Decorators from "../../utils/Decorators" +import { Radio } from "./Radio" +import { Box } from "../panels/Box" +import { BaseElement } from "../BaseElement" + + +export default { + component: Radio, + title: "Inputs/Radio", + decorators: [Decorators.Bluelib], + argTypes: { + customColor: { + control: {type: "color"}, + }, + }, +} + + +export const Default = props => ( + +) + + + +export const ThreeRadios = props => ( + + + Articuno + + + Zapdos + + + Moltres + + +) +ThreeRadios.args = { + name: "example" +} diff --git a/src/components/inputs/Radio.tsx b/src/components/inputs/Radio.tsx new file mode 100644 index 0000000..d31cfca --- /dev/null +++ b/src/components/inputs/Radio.tsx @@ -0,0 +1,41 @@ +import * as React from "react" +import * as ReactDOM from "react-dom" +import * as Types from "../../types" +import {BaseElement} from "../BaseElement" +import mergeClassNames from "classnames" + + +interface RadioProps { + disabled?: boolean, + + onChange?: (checked: string) => boolean, + + name: string, + value: string, + + [props: string]: any, +} + + +export function Radio({onChange, ...props}: RadioProps): JSX.Element { + props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "input", "input-radio") + + const onChangeWrapper = React.useCallback( + + (event: React.ChangeEvent): boolean => { + const checked = event.target.value + + if(onChange) { + return onChange(checked) + } + + return false + }, + + [onChange] + ) + + return ( + + ) +}