diff --git a/ivette/src/dome/src/renderer/controls/buttons.tsx b/ivette/src/dome/src/renderer/controls/buttons.tsx index f3f2c0a38ce7e4039e988a00d6aa2f87d0c41d12..7be26bdabb974ce57d466c6f212784f82283001b 100644 --- a/ivette/src/dome/src/renderer/controls/buttons.tsx +++ b/ivette/src/dome/src/renderer/controls/buttons.tsx @@ -522,7 +522,7 @@ export interface SelectProps { className?: string; /** Additional style for the `< dov /> ` container of Raiods */ style?: React.CSSProperties; - /** Shall be [[Item]] elements. */ + /** Shall be standard `<option/>` and `<optgroup/>` elements. */ children: any; } diff --git a/ivette/src/dome/src/renderer/layout/form.tsx b/ivette/src/dome/src/renderer/layout/form.tsx index df762bdcc8afcac972216851b64f05415c3f9ee1..1916757ce571ff16c507fbcaf8a45a9fa08edbc9 100644 --- a/ivette/src/dome/src/renderer/layout/form.tsx +++ b/ivette/src/dome/src/renderer/layout/form.tsx @@ -12,7 +12,7 @@ import React from 'react'; import * as Dome from 'dome'; import * as Utils from 'dome/misc/utils'; import { SVG } from 'dome/controls/icons'; -import { Checkbox, Radio } from 'dome/controls/buttons'; +import { Checkbox, Radio, Select as SelectMenu } from 'dome/controls/buttons'; export type Error = | undefined | boolean | string @@ -1050,6 +1050,7 @@ export interface RadioFieldProps<A> extends FieldProps<A> { value: A; } +/** @category Form Fields */ export function RadioField<A>(props: RadioFieldProps<A>) { const { hidden, disabled } = useContext(props); @@ -1076,4 +1077,42 @@ export function RadioField<A>(props: RadioFieldProps<A>) { ); } +/* --------------------------------------------------------------------------*/ +/* --- Select Menu Field ---*/ +/* --------------------------------------------------------------------------*/ + +/** @category Form Fields */ +export interface SelectFieldProps extends FieldProps<string | undefined> { + placeholder?: string; + children: any; +} + +/** + Children must be standard `<option>` or `<optgroup>` elements. + + @category Form Fields +*/ +export function SelectField(props: SelectFieldProps) { + const id = useHtmlFor(); + const [value, error, setState] = useChecker(props.state, props.checker); + const onChange = (newValue?: string) => setState(newValue, undefined); + const { children, placeholder } = props; + return ( + <Field + {...props} + error={error} + htmlFor={id} + > + <SelectMenu + id={id} + value={value} + placeholder={placeholder} + onChange={onChange} + > + {children} + </SelectMenu> + </Field> + ); +} + // --------------------------------------------------------------------------