diff --git a/src/components/inputs/Multiselect.tsx b/src/components/inputs/Multiselect.tsx index a820d8f..970df5a 100644 --- a/src/components/inputs/Multiselect.tsx +++ b/src/components/inputs/Multiselect.tsx @@ -8,17 +8,34 @@ import mergeClassNames from "classnames" interface MultiselectProps { disabled?: boolean, - onChange?: (event: React.FormEvent) => boolean, + onChange?: (contents: string[]) => boolean, + + children: React.ReactNode, [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") + const onChangeWrapper = React.useCallback( + + (event: React.ChangeEvent): 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 ( - + ) } diff --git a/src/components/inputs/MultiselectContext.ts b/src/components/inputs/MultiselectContext.ts new file mode 100644 index 0000000..0311e80 --- /dev/null +++ b/src/components/inputs/MultiselectContext.ts @@ -0,0 +1,5 @@ +import * as React from "react" +import * as Types from "../../types" + + +export const MultiselectContext: Types.UseStateContext = React.createContext(null) as Types.UseStateContext diff --git a/src/components/inputs/Select.tsx b/src/components/inputs/Select.tsx index e6873c0..cb22aa5 100644 --- a/src/components/inputs/Select.tsx +++ b/src/components/inputs/Select.tsx @@ -3,13 +3,13 @@ import * as ReactDOM from "react-dom" import * as Types from "../../types" import {BaseElement} from "../BaseElement" import mergeClassNames from "classnames" +import {SelectContext} from "./SelectContext"; interface SelectProps { disabled?: boolean, onChange?: (contents: string) => boolean, - value?: string, 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") const onChangeWrapper = React.useCallback( @@ -36,8 +37,6 @@ export function Select({onChange, children, ...props}: SelectProps): JSX.Element ) return ( - - // TODO - + ) } diff --git a/src/components/inputs/SelectContext.ts b/src/components/inputs/SelectContext.ts new file mode 100644 index 0000000..7dc71a5 --- /dev/null +++ b/src/components/inputs/SelectContext.ts @@ -0,0 +1,5 @@ +import * as React from "react" +import * as Types from "../../types" + + +export const SelectContext: Types.UseStateContext = React.createContext(null) as Types.UseStateContext diff --git a/src/types.ts b/src/types.ts index 073fcf4..14430dd 100644 --- a/src/types.ts +++ b/src/types.ts @@ -6,4 +6,8 @@ export type {Argument as ClassNames} from "classnames" // export type FunctionComponentKind = (props: object) => JSX.Element // export type ClassComponentKind = typeof React.Component // export type ComponentKind = IntrinsicComponentKind | FunctionComponentKind | ClassComponentKind -export type ComponentKind = any \ No newline at end of file +export type ComponentKind = any + + + +export type UseStateContext = React.Context>]> \ No newline at end of file