1
Fork 0
mirror of https://github.com/Steffo99/bluelib.git synced 2024-12-23 03:54:21 +00:00

🚧 Fix Select and Multiselect

This commit is contained in:
Steffo 2021-08-19 23:01:11 +02:00
parent 04e014ad8e
commit fac3e8c87d
Signed by: steffo
GPG key ID: 6965406171929D01
5 changed files with 40 additions and 10 deletions

View file

@ -8,17 +8,34 @@ import mergeClassNames from "classnames"
interface MultiselectProps { interface MultiselectProps {
disabled?: boolean, disabled?: boolean,
onChange?: (event: React.FormEvent<HTMLInputElement>) => boolean, onChange?: (contents: string[]) => boolean,
children: React.ReactNode,
[props: string]: any, [props: string]: any,
} }
export function Multiselect({...props}: MultiselectProps): JSX.Element { export function Multiselect({onChange, ...props}: MultiselectProps): JSX.Element {
props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "input", "input-multiselect") props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "input", "input-multiselect")
const onChangeWrapper = React.useCallback(
(event: React.ChangeEvent<HTMLSelectElement>): boolean => {
const options = Array.from(event.target.selectedOptions)
const contents = options.map((option: HTMLOptionElement) => option.value)
if(onChange) {
return onChange(contents)
}
return false
},
[onChange]
)
return ( return (
<BaseElement kind={"select"} multiple={true} {...props}/> <BaseElement kind={"select"} multiple={true} onChange={onChangeWrapper} {...props}/>
) )
} }

View file

@ -0,0 +1,5 @@
import * as React from "react"
import * as Types from "../../types"
export const MultiselectContext: Types.UseStateContext<string[]> = React.createContext(null) as Types.UseStateContext<string[]>

View file

@ -3,13 +3,13 @@ import * as ReactDOM from "react-dom"
import * as Types from "../../types" import * as Types from "../../types"
import {BaseElement} from "../BaseElement" import {BaseElement} from "../BaseElement"
import mergeClassNames from "classnames" import mergeClassNames from "classnames"
import {SelectContext} from "./SelectContext";
interface SelectProps { interface SelectProps {
disabled?: boolean, disabled?: boolean,
onChange?: (contents: string) => boolean, onChange?: (contents: string) => boolean,
value?: string,
children: React.ReactNode, children: React.ReactNode,
@ -17,7 +17,8 @@ interface SelectProps {
} }
export function Select({onChange, children, ...props}: SelectProps): JSX.Element { export function Select({onChange, ...props}: SelectProps): JSX.Element {
props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "input", "input-select") props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "input", "input-select")
const onChangeWrapper = React.useCallback( const onChangeWrapper = React.useCallback(
@ -36,8 +37,6 @@ export function Select({onChange, children, ...props}: SelectProps): JSX.Element
) )
return ( return (
<BaseElement kind={"select"} multiple={false} {...props}> <BaseElement kind={"select"} multiple={false} onChange={onChangeWrapper} {...props}/>
// TODO
</BaseElement>
) )
} }

View file

@ -0,0 +1,5 @@
import * as React from "react"
import * as Types from "../../types"
export const SelectContext: Types.UseStateContext<string> = React.createContext(null) as Types.UseStateContext<string>

View file

@ -7,3 +7,7 @@ export type {Argument as ClassNames} from "classnames"
// export type ClassComponentKind = typeof React.Component // export type ClassComponentKind = typeof React.Component
// export type ComponentKind = IntrinsicComponentKind | FunctionComponentKind | ClassComponentKind // export type ComponentKind = IntrinsicComponentKind | FunctionComponentKind | ClassComponentKind
export type ComponentKind = any export type ComponentKind = any
export type UseStateContext<S> = React.Context<null | [S, React.Dispatch<React.SetStateAction<S>>]>