54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
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';
|