diff --git a/ivette/src/dome/src/renderer/controls/labels.tsx b/ivette/src/dome/src/renderer/controls/labels.tsx index aab6e501780f3478424ad3619c19552430ff8bb7..a9250344cc81c7cf3a1f2e374fc259e711c3df64 100644 --- a/ivette/src/dome/src/renderer/controls/labels.tsx +++ b/ivette/src/dome/src/renderer/controls/labels.tsx @@ -16,6 +16,7 @@ import './style.css'; // --- Generic Label // -------------------------------------------------------------------------- +/** Labels support fowarding refs to their inner [<label/>] element. */ export interface LabelProps { /** Text of the label. Prepend to other children elements. */ label?: string; @@ -31,9 +32,13 @@ export interface LabelProps { display?: boolean; /** Additional content of the `<label/>` element. */ children?: React.ReactNode; + /** Click event callback. */ + onClick?: (evt: React.MouseEvent) => void; + /** Right-click event callback. */ + onContextMenu?: (evt: React.MouseEvent) => void; } -const makeLabel = (className: string, props: LabelProps) => { +const makeLabel = (className: string) => (props: LabelProps, ref: any) => { const { display = true } = props; const allClasses = classes( className, @@ -42,9 +47,12 @@ const makeLabel = (className: string, props: LabelProps) => { ); return ( <label + ref={ref} className={allClasses} title={props.title} style={props.style} + onClick={props.onClick} + onContextMenu={props.onContextMenu} > {props.icon && <Icon title={props.title} id={props.icon} />} {props.label} @@ -68,18 +76,18 @@ const TCODE = 'dome-xLabel dome-text-code'; // -------------------------------------------------------------------------- /** Simple labels. */ -export const Label = (props: LabelProps) => makeLabel(LABEL, props); +export const Label = React.forwardRef(makeLabel(LABEL)); /** Title and headings. */ -export const Title = (props: LabelProps) => makeLabel(TITLE, props); +export const Title = React.forwardRef(makeLabel(TITLE)); /** Description, textbook content. */ -export const Descr = (props: LabelProps) => makeLabel(DESCR, props); +export const Descr = React.forwardRef(makeLabel(DESCR)); /** Selectable textual information. */ -export const Data = (props: LabelProps) => makeLabel(TDATA, props); +export const Data = React.forwardRef(makeLabel(TDATA)); /** Selectable inlined source-code content. */ -export const Code = (props: LabelProps) => makeLabel(TCODE, props); +export const Code = React.forwardRef(makeLabel(TCODE)); // --------------------------------------------------------------------------