import { ChangeEvent, FormEvent, useCallback } from 'react'; import { VariableWithMultiSupport } from '@grafana/data'; import { SelectionOptionsForm } from 'app/features/dashboard-scene/settings/variables/components/SelectionOptionsForm'; import { KeyedVariableIdentifier } from '../state/types'; import { toKeyedVariableIdentifier } from '../utils'; import { VariableEditorProps } from './types'; export interface SelectionOptionsEditorProps<Model extends VariableWithMultiSupport = VariableWithMultiSupport> extends VariableEditorProps<Model> { onMultiChanged: (identifier: KeyedVariableIdentifier, value: boolean) => void; } export const SelectionOptionsEditor = ({ onMultiChanged: onMultiChangedProps, onPropChange, variable, }: SelectionOptionsEditorProps) => { const onMultiChanged = useCallback( (event: ChangeEvent<HTMLInputElement>) => { onMultiChangedProps(toKeyedVariableIdentifier(variable), event.target.checked); }, [onMultiChangedProps, variable] ); const onIncludeAllChanged = useCallback( (event: ChangeEvent<HTMLInputElement>) => { onPropChange({ propName: 'includeAll', propValue: event.target.checked }); }, [onPropChange] ); const onAllValueChanged = useCallback( (event: FormEvent<HTMLInputElement>) => { onPropChange({ propName: 'allValue', propValue: event.currentTarget.value }); }, [onPropChange] ); return ( <SelectionOptionsForm multi={variable.multi} includeAll={variable.includeAll} allValue={variable.allValue} onMultiChange={onMultiChanged} onIncludeAllChange={onIncludeAllChanged} onAllValueChange={onAllValueChanged} /> ); }; SelectionOptionsEditor.displayName = 'SelectionOptionsEditor';