centralcloud/oncall-engine
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix a bug in GForm (#1712)

Browse source 
# What this PR does

Fixed `onChange` handler within `GForm` component
This commit is contained in:
Rares Mardare 2023-04-11 12:23:55 +03:00 • committed by GitHub
parent 2fbf3f503d
commit 5b1ce3988e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
CHANGELOG.md
View file

@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## Unreleased
### Fixed
- Fixed a bug in GForm's RemoteSelect where the value for Dropdown could not change
## v1.2.8 (2023-04-06)
### Changed

55
grafana-plugin/src/components/GForm/GForm.tsx
View file

@ -17,17 +17,19 @@ const nullNormalizer = (value: string) => {
return value || null;
};
function renderFormControl(formItem: FormItem, register: any, control: any, onChangeFn: () => void) {
function renderFormControl(formItem: FormItem, register: any, control: any, onChangeFn: (field, value) => void) {
switch (formItem.type) {
case FormItemType.Input:
return <Input {...register(formItem.name, formItem.validation)} onChange={onChangeFn} />;
return (
<Input {...register(formItem.name, formItem.validation)} onChange={(value) => onChangeFn(undefined, value)} />
);
case FormItemType.TextArea:
return (
<TextArea
rows={formItem.extra?.rows || 4}
{...register(formItem.name, formItem.validation)}
onChange={onChangeFn}
onChange={(value) => onChangeFn(undefined, value)}
/>
);
@ -36,15 +38,7 @@ function renderFormControl(formItem: FormItem, register: any, control: any, onCh
<InputControl
render={({ field }) => {
return (
<GSelect
isMulti={true}
{...field}
{...formItem.extra}
onChange={(value) => {
field.onChange(value);
onChangeFn();
}}
/>
<GSelect isMulti={true} {...field} {...formItem.extra} onChange={(value) => onChangeFn(field, value)} />
);
}}
control={control}
@ -55,17 +49,8 @@ function renderFormControl(formItem: FormItem, register: any, control: any, onCh
case FormItemType.Select:
return (
<InputControl
render={({ field: { onChange, ...field } }) => {
return (
<Select
{...field}
{...formItem.extra}
onChange={(value) => {
onChange(value.value);
onChangeFn();
}}
/>
);
render={({ field: { ...field } }) => {
return <Select {...field} {...formItem.extra} onChange={(value) => onChangeFn(field, value)} />;
}}
control={control}
name={formItem.name}
@ -75,17 +60,8 @@ function renderFormControl(formItem: FormItem, register: any, control: any, onCh
case FormItemType.GSelect:
return (
<InputControl
render={({ field: { onChange, ...field } }) => {
return (
<GSelect
{...field}
{...formItem.extra}
onChange={(value) => {
onChange(value);
onChangeFn();
}}
/>
);
render={({ field: { ...field } }) => {
return <GSelect {...field} {...formItem.extra} onChange={(value) => onChangeFn(field, value)} />;
}}
control={control}
name={formItem.name}
@ -93,13 +69,15 @@ function renderFormControl(formItem: FormItem, register: any, control: any, onCh
);
case FormItemType.Switch:
return <Switch {...register(formItem.name, formItem.validation)} onChange={onChangeFn} />;
return (
<Switch {...register(formItem.name, formItem.validation)} onChange={(value) => onChangeFn(undefined, value)} />
);
case FormItemType.RemoteSelect:
return (
<InputControl
render={({ field: { ...field } }) => {
return <RemoteSelect {...field} {...formItem.extra} onChange={onChangeFn} />;
return <RemoteSelect {...field} {...formItem.extra} onChange={(value) => onChangeFn(field, value)} />;
}}
control={control}
name={formItem.name}
@ -133,7 +111,10 @@ class GForm extends React.Component<GFormProps, {}> {
error={`${capitalCase(formItem.name)} is required`}
description={formItem.description}
>
{renderFormControl(formItem, register, control, () => this.forceUpdate())}
{renderFormControl(formItem, register, control, (field, value) => {
field?.onChange(value);
this.forceUpdate();
})}
</Field>
);
});