mirror of
https://github.com/Steffo99/bluelib.git
synced 2024-12-23 20:14:21 +00:00
Stefano Pigozzi
8b7c57aae6
* 🔧 Use `<label>` in the `ThreeRadios` and `ThreeCheckboxes` stories * 🔧 Make `onChange` return void, as React does not support implicit preventDefault https://reactjs.org/docs/handling-events.html * 🚧 Some work on forms * 💥 A huge non-atomic commit * 💥 Another huge non-atomic commit * 💥 The final non-atomic commit * 💥 Just kidding, have another * 🚧 A bit more * 🚧 A bot more * ✨ Add `onSimpleChange` events * 🚧 More work on inputs * ✨ Finish `FormRadioGroup` * ✨ Finish `FormCheckboxGroup` * ✨ Finish `Form` * 💥 idk anymore * ✨ Add `Button` input * ✨ Add `FormRow` to forms * 🔨 Fix storybook preview.js * 🔧 Prevent button from submitting a form * 📔 Fix a bit the Form story * 💥 Tweak forms a bit more
35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
import * as React from "react"
|
|
import * as ReactDOM from "react-dom"
|
|
import * as Types from "../../types"
|
|
import {BaseElement} from "../BaseElement"
|
|
import mergeClassNames from "classnames"
|
|
import {Option} from "./Option"
|
|
import {OptionGroup} from "./OptionGroup"
|
|
|
|
|
|
export interface SelectProps extends Types.BluelibHTMLProps<HTMLSelectElement> {
|
|
onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void,
|
|
onSimpleChange?: (value: string) => void,
|
|
value?: string,
|
|
}
|
|
|
|
|
|
export function Select({onChange, onSimpleChange, ...props}: SelectProps): JSX.Element {
|
|
props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "input", "input-select")
|
|
|
|
const onChangeWrapped = React.useCallback(
|
|
event => {
|
|
if(onChange) onChange(event)
|
|
if(onSimpleChange) onSimpleChange(event.target.value)
|
|
},
|
|
[onChange, onSimpleChange]
|
|
)
|
|
|
|
return (
|
|
<BaseElement kind={"select"} multiple={false} required={true} onChange={onChangeWrapped} {...props}/>
|
|
)
|
|
}
|
|
|
|
|
|
Select.Option = Option
|
|
Select.Group = OptionGroup
|