How to use react-form - 10 common examples

return '';
        }
        return fields[5].trim();
    }
    private setPermission(permission: string) {
        const fields = (this.props.fieldApi.getValue() as string).split(',');
        if (fields.length !== 6) {
            this.props.fieldApi.setValue(generatePolicy(this.props.projName, this.props.roleName, '', '', permission));
            return;
        }
        fields[5] = ` ${permission}`;
        this.props.fieldApi.setValue(fields.join());
    }
}

const Policy = ReactForm.FormField(PolicyWrapper);

import { Autocomplete } from 'argo-ui';
import * as classNames from 'classnames';
import * as React from 'react';
import * as ReactForm from 'react-form';

require('./tags-editor.scss');

export const TagsEditor = ReactForm.FormField((props: {options: string[], noTagsLabel?: string, fieldApi: ReactForm.FieldApi, className: string }) => {
    const { fieldApi: {getValue, setValue}} = props;
    const tags = (getValue() || []) as Array;

    return (
        <div>
            {tags.length &gt; 0 &amp;&amp; (
                <div>
                    {tags.map((path, i) =&gt; (
                        <span title="{path}"><i> {
                            const newPaths = tags.slice();
                            newPaths.splice(i, 1);
                            setValue(newPaths);
                        }}/&gt; {path}</i></span><i>
                    ))}
                </i></div></div>

export const ApplicationSyncOptions = (props: ApplicationSyncOptionProps) => (
    <div>
        {syncOptions.map((render, i) =&gt; (
            <div style="{optionStyle}">
                {render(props)}
            </div>
        ))}
    </div>
);

export const ApplicationManualSyncFlags = ReactForm.FormField((props: {fieldApi: ReactForm.FieldApi}) =&gt; {
    const {
        fieldApi: {getValue, setValue, setTouched}
    } = props;
    const val = getValue() || false;
    return (
        <div style="{optionStyle}">
            {Object.keys(ManualSyncFlags).map(flag =&gt; (
                
                     {
                            setTouched(true);
                            const update = {...val};
                            update[flag] = newVal;
                            setValue(update);</div>

<i> this.props.deleteApp()} style={{cursor: 'pointer'}} /&gt;
                
            
        );
    }

    private getApplication(): string {
        return this.props.fieldApi.getValue();
    }

    private setApplication(application: string) {
        this.props.fieldApi.setValue(application);
    }
}

const Attribute = ReactForm.FormField(AttributeWrapper);

function generateSchedule(minute?: string, hour?: string, dom?: string, month?: string, dow?: string): string {
    return `${minute} ${hour} ${dom} ${month} ${dow}`;
}

export const ProjectSyncWindowScheduleEdit = (props: ProjectSyncWindowProps) =&gt; (
    
        <h6>Schedule</h6>
        <div>
            <div>
                <div>Minute{helpTip('The minute/minutes assigned to the schedule')}</div>
                <div>Hour{helpTip('The hour/hours assigned to the schedule')}</div>
                <div>Day Of The Month{helpTip('The day/days of the month assigned to the schedule')}</div>
                <div>Month{helpTip('The month/months assigned to the schedule.')}</div>
                <div>Day Of the Week{helpTip('The day/days of the week assigned to the schedule')}</div>
            </div></div></i>

checked={val[flag]}
                        onChange={(newVal: boolean) => {
                            setTouched(true);
                            const update = {...val};
                            update[flag] = newVal;
                            setValue(update);
                        }}
                    />
                    <label>{ManualSyncFlags[flag as keyof typeof ManualSyncFlags]}</label>{' '}
                
            ))}
        
    );
});

export const ApplicationSyncOptionsField = ReactForm.FormField((props: {fieldApi: ReactForm.FieldApi}) =&gt; {
    const {
        fieldApi: {getValue, setValue, setTouched}
    } = props;
    const val = getValue() || [];
    return (
        <div style="{{borderBottom:">
             {
                    setTouched(true);
                    setValue(opts);
                }}
            /&gt;
        </div>
    );
});

import {Checkbox} from 'argo-ui';
import * as React from 'react';
import * as ReactForm from 'react-form';

export const CheckboxField = ReactForm.FormField((props: {fieldApi: ReactForm.FieldApi; id: string; className: string; checked: boolean}) => {
    const {
        fieldApi: {getValue, setValue}
    } = props;

    return ;
});

} catch (e) {
                    apis.notifications.show({
                        content: ,
                        type: NotificationType.Error
                    });
                }
            }
        },
        {name: 'argo-icon-warning', color: 'warning'},
        'yellow',
        {propagationPolicy: 'foreground'}
    );
    return confirmed;
}

const PropagationPolicyOption = ReactForm.FormField((props: {fieldApi: ReactForm.FieldApi; policy: string; message: string}) => {
    const {
        fieldApi: {setValue}
    } = props;
    return (
        <div>
            <input id="{props.policy}" value="{props.policy}" name="propagation-policy" type="radio"> setValue(props.policy.toLowerCase())}
            /&gt;
            <label></label></div>

case 2:
                    this.props.fieldApi.setValue(generateSchedule('*', '*', values.join(','), '*', '*'));
                    break;
                case 3:
                    this.props.fieldApi.setValue(generateSchedule('*', '*', '*', values.join(','), '*'));
                    break;
                case 4:
                    this.props.fieldApi.setValue(generateSchedule('*', '*', '*', '*', values.join(',')));
                    break;
            }
        }
        return;
    }
}

const Schedule = ReactForm.FormField(ScheduleWrapper);

}

class GroupWrapper extends React.Component {
    public render() {
        return (
            <div>
                <div>{this.props.groupName}</div>
                <div>
                    <i> this.props.deleteGroup()} style={{cursor: 'pointer'}} /&gt;
                </i></div><i>
            </i></div><i>
        );
    }
}

const Group = ReactForm.FormField(GroupWrapper);
</i>

spec: {
        destination: {
            name: '',
            namespace: '',
            server: ''
        },
        source: {
            path: '',
            repoURL: '',
            targetRevision: 'HEAD'
        },
        project: ''
    }
};

const AutoSyncFormField = ReactFormField((props: {fieldApi: FieldApi; className: string}) => {
    const manual = 'Manual';
    const auto = 'Automatic';
    const {
        fieldApi: {getValue, setValue}
    } = props;
    const automated = getValue() as models.Automated;

    return (
        
            <label>Sync Policy</label>
            <select value="{automated"> {
                    setValue(opt.value === auto ? {prune: false, selfHeal: false} : null);
                }}</select>