diff --git a/ivette/src/dome/src/renderer/layout/form.tsx b/ivette/src/dome/src/renderer/layout/form.tsx index ab00a53c0d979185ee3135547d27d27cdefcb1a1..e85027a3751245d25596c0336b80f0cbbdbbd47d 100644 --- a/ivette/src/dome/src/renderer/layout/form.tsx +++ b/ivette/src/dome/src/renderer/layout/form.tsx @@ -12,6 +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 } from 'dome/controls/buttons'; export type Error = | undefined | boolean | string @@ -1005,4 +1006,39 @@ export function TimeField(props: TimeOrDateFieldProps) { ); } +/* --------------------------------------------------------------------------*/ +/* --- Check Box Field ---*/ +/* --------------------------------------------------------------------------*/ + +/** @category Form Fields */ +export interface CheckboxFieldProps extends FieldProps<boolean> { + /** Default is false */ + inverted?: boolean; +} + +/** @category Form Fields */ +export function CheckboxField(props: CheckboxFieldProps) { + const { hidden, disabled } = useContext(props); + + if (hidden) return null; + + const [value, , setState] = props.state; + const { label, title, inverted } = props; + const css = Utils.classes( + 'dome-xForm-field dome-text-label', + disabled && 'dome-disabled', + ); + const onChange = () => setState(!value, undefined); + return ( + <Checkbox + className={css} + label={label} + title={title} + disabled={disabled} + value={inverted ? !value : value} + onChange={onChange} + /> + ); +} + // --------------------------------------------------------------------------