2021-08-19 17:54:58 +00:00
|
|
|
import * as React from "react"
|
|
|
|
import * as ReactDOM from "react-dom"
|
|
|
|
import * as Types from "../../types"
|
|
|
|
import {BaseElement} from "../BaseElement"
|
|
|
|
import mergeClassNames from "classnames"
|
2021-08-24 02:22:15 +00:00
|
|
|
import {Option} from "./Option"
|
|
|
|
import {OptionGroup} from "./OptionGroup"
|
2021-08-19 17:54:58 +00:00
|
|
|
|
|
|
|
|
2021-08-24 02:22:15 +00:00
|
|
|
export interface SelectProps extends Types.BluelibHTMLProps<HTMLSelectElement> {
|
|
|
|
onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void,
|
|
|
|
onSimpleChange?: (value: string) => void,
|
|
|
|
value?: string,
|
2021-08-19 17:54:58 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
2021-08-24 02:22:15 +00:00
|
|
|
export function Select({onChange, onSimpleChange, ...props}: SelectProps): JSX.Element {
|
2021-08-19 17:54:58 +00:00
|
|
|
props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "input", "input-select")
|
|
|
|
|
2021-08-24 02:22:15 +00:00
|
|
|
const onChangeWrapped = React.useCallback(
|
|
|
|
event => {
|
|
|
|
if(onChange) onChange(event)
|
|
|
|
if(onSimpleChange) onSimpleChange(event.target.value)
|
2021-08-19 17:54:58 +00:00
|
|
|
},
|
2021-08-24 02:22:15 +00:00
|
|
|
[onChange, onSimpleChange]
|
2021-08-19 17:54:58 +00:00
|
|
|
)
|
|
|
|
|
|
|
|
return (
|
2021-08-24 02:22:15 +00:00
|
|
|
<BaseElement kind={"select"} multiple={false} required={true} onChange={onChangeWrapped} {...props}/>
|
2021-08-19 17:54:58 +00:00
|
|
|
)
|
|
|
|
}
|
2021-08-24 02:22:15 +00:00
|
|
|
|
|
|
|
|
|
|
|
Select.Option = Option
|
|
|
|
Select.Group = OptionGroup
|