mirror of
https://github.com/Steffo99/bluelib.git
synced 2024-12-23 03:54:21 +00:00
✨ Add Checkbox with a WIP onChange API
This commit is contained in:
parent
3c2aff0a19
commit
930be42bed
3 changed files with 95 additions and 3 deletions
50
src/components/inputs/Checkbox.stories.jsx
Normal file
50
src/components/inputs/Checkbox.stories.jsx
Normal file
|
@ -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 => (
|
||||||
|
<Checkbox value={"zero"} {...props}/>
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export const ThreeCheckboxes = props => (
|
||||||
|
<BaseElement kind={"div"}>
|
||||||
|
<BaseElement kind={"div"} bluelibClassNames={"color-blue"}>
|
||||||
|
<Checkbox value={"articuno"} {...props}/> Articuno
|
||||||
|
</BaseElement>
|
||||||
|
<BaseElement kind={"div"} bluelibClassNames={"color-yellow"}>
|
||||||
|
<Checkbox value={"zapdos"} {...props}/> Zapdos
|
||||||
|
</BaseElement>
|
||||||
|
<BaseElement kind={"div"} bluelibClassNames={"color-red"}>
|
||||||
|
<Checkbox value={"moltres"} {...props}/> Moltres
|
||||||
|
</BaseElement>
|
||||||
|
</BaseElement>
|
||||||
|
)
|
||||||
|
ThreeCheckboxes.args = {
|
||||||
|
name: "example"
|
||||||
|
}
|
||||||
|
ThreeCheckboxes.argTypes = {
|
||||||
|
customColor: {
|
||||||
|
control: {type: "color"},
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
control: {type: "null"},
|
||||||
|
},
|
||||||
|
}
|
42
src/components/inputs/Checkbox.tsx
Normal file
42
src/components/inputs/Checkbox.tsx
Normal file
|
@ -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<HTMLInputElement>): boolean => {
|
||||||
|
const checked = event.target.checked
|
||||||
|
const value = event.target.value
|
||||||
|
|
||||||
|
if(onChange) {
|
||||||
|
return onChange(checked, value)
|
||||||
|
}
|
||||||
|
|
||||||
|
return false
|
||||||
|
},
|
||||||
|
|
||||||
|
[onChange]
|
||||||
|
)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<BaseElement kind={"input"} type={"checkbox"} onChange={onChangeWrapper} {...props}/>
|
||||||
|
)
|
||||||
|
}
|
|
@ -8,7 +8,7 @@ import mergeClassNames from "classnames"
|
||||||
interface RadioProps {
|
interface RadioProps {
|
||||||
disabled?: boolean,
|
disabled?: boolean,
|
||||||
|
|
||||||
onChange?: (checked: string) => boolean,
|
onChange?: (value: string) => boolean,
|
||||||
|
|
||||||
name: string,
|
name: string,
|
||||||
value: string,
|
value: string,
|
||||||
|
@ -23,10 +23,10 @@ export function Radio({onChange, ...props}: RadioProps): JSX.Element {
|
||||||
const onChangeWrapper = React.useCallback(
|
const onChangeWrapper = React.useCallback(
|
||||||
|
|
||||||
(event: React.ChangeEvent<HTMLInputElement>): boolean => {
|
(event: React.ChangeEvent<HTMLInputElement>): boolean => {
|
||||||
const checked = event.target.value
|
const value = event.target.value
|
||||||
|
|
||||||
if(onChange) {
|
if(onChange) {
|
||||||
return onChange(checked)
|
return onChange(value)
|
||||||
}
|
}
|
||||||
|
|
||||||
return false
|
return false
|
||||||
|
|
Loading…
Reference in a new issue