diff --git a/src/components/inputs/Checkbox.stories.jsx b/src/components/inputs/Checkbox.stories.jsx new file mode 100644 index 0000000..3b843f3 --- /dev/null +++ b/src/components/inputs/Checkbox.stories.jsx @@ -0,0 +1,50 @@ +import * as React from "react" +import * as ReactDOM from "react-dom" +import * as Decorators from "../../utils/Decorators" +import { Checkbox } from "./Checkbox" +import { Box } from "../panels/Box" +import { BaseElement } from "../BaseElement" + + +export default { + component: Checkbox, + title: "Inputs/Checkbox", + decorators: [Decorators.Bluelib], + argTypes: { + customColor: { + control: {type: "color"}, + }, + }, +} + + +export const Default = props => ( + +) + + + +export const ThreeCheckboxes = props => ( + + + Articuno + + + Zapdos + + + Moltres + + +) +ThreeCheckboxes.args = { + name: "example" +} +ThreeCheckboxes.argTypes = { + customColor: { + control: {type: "color"}, + }, + value: { + control: {type: "null"}, + }, +} \ No newline at end of file diff --git a/src/components/inputs/Checkbox.tsx b/src/components/inputs/Checkbox.tsx new file mode 100644 index 0000000..1ca93a5 --- /dev/null +++ b/src/components/inputs/Checkbox.tsx @@ -0,0 +1,42 @@ +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 CheckboxProps { + disabled?: boolean, + + onChange?: (checked: boolean, value: string) => boolean, + + name: string, + value: string, + + [props: string]: any, +} + + +export function Checkbox({onChange, ...props}: CheckboxProps): JSX.Element { + props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "input", "input-checkbox") + + const onChangeWrapper = React.useCallback( + + (event: React.ChangeEvent): boolean => { + const checked = event.target.checked + const value = event.target.value + + if(onChange) { + return onChange(checked, value) + } + + return false + }, + + [onChange] + ) + + return ( + + ) +} diff --git a/src/components/inputs/Radio.tsx b/src/components/inputs/Radio.tsx index d31cfca..9f60dd0 100644 --- a/src/components/inputs/Radio.tsx +++ b/src/components/inputs/Radio.tsx @@ -8,7 +8,7 @@ import mergeClassNames from "classnames" interface RadioProps { disabled?: boolean, - onChange?: (checked: string) => boolean, + onChange?: (value: string) => boolean, name: string, value: string, @@ -23,10 +23,10 @@ export function Radio({onChange, ...props}: RadioProps): JSX.Element { const onChangeWrapper = React.useCallback( (event: React.ChangeEvent): boolean => { - const checked = event.target.value + const value = event.target.value if(onChange) { - return onChange(checked) + return onChange(value) } return false