Field to track (only Checkbox, Radio, Select)

Field to track is a feature to track specific field value to e.g. filter out some options from optionsList property in Radio, Checkbox or Select field.

If you will take a closer look to the optionsList property inside those fields, you can easily see that it is method based prop with param inside to hold the value from - you guessed it - fieldToTrack prop.

CheckboxFieldStructure | RadioFieldStructure| SelectFieldStructure = {
   // ... rest of the CheckboxFieldStructure | RadioFieldStructure | SelectFieldStructure,
   fieldToTrack?: FieldTrackerInterface;
}

    interface FieldTrackerInterface {
        fieldName: string;
        useSamePath?: boolean;
    }

Example

Let's say we don't want to give user to choose the same value in two different select fields because it should choose the favourite food and second favourite too :)

Live Editor

// You can play with code, with HTML tags and text as much as you want!
async function onSubmit(values, form, callback) {
    await(300);
    alert(JSON.stringify(values));
}
const foodOptions = () => [
    { label: 'Pizza', value: 'pizza' },
    { label: 'Burger', value: 'burger' },
    { label: 'Taco', value: 'taco' },
]
const schema: FormSchema = {
    favFood: {
        type: 'select',
        fieldWrapperProperties: { className: 'mb-2' }
        optionsList: foodOptions
    },
    secondFavFood: {
        type: 'select',
        fieldWrapperProperties: { className: 'mb-2' },
        fieldToTrack: {
            fieldName: 'favFood'
        },
        optionsList: (valueFromFieldToTrack: string) => foodOptions().filter(option => option.value !== valueFromFieldToTrack)
    }
}
render (
     <FormWrapper
        schema={schema}
        onSubmit={onSubmit}
    >
        <Button type='submit' scheme='primary'>
            Submit
        </Button>
    </FormWrapper>
)

// You can play with code, with HTML tags and text as much as you want!
async function onSubmit(values, form, callback) {
    await(300);
    alert(JSON.stringify(values));
}
const foodOptions = () => [
    { label: 'Pizza', value: 'pizza' },
    { label: 'Burger', value: 'burger' },
    { label: 'Taco', value: 'taco' },
]
const schema: FormSchema = {
    favFood: {
        type: 'select',
        fieldWrapperProperties: { className: 'mb-2' }
        optionsList: foodOptions
    },
    secondFavFood: {
        type: 'select',
        fieldWrapperProperties: { className: 'mb-2' },
        fieldToTrack: {
            fieldName: 'favFood'
        },
        optionsList: (valueFromFieldToTrack: string) => foodOptions().filter(option => option.value !== valueFromFieldToTrack)
    }
}
render (
     <FormWrapper
        schema={schema}
        onSubmit={onSubmit}
    >
        <Button type='submit' scheme='primary'>
            Submit
        </Button>
    </FormWrapper>
)

Result

`useSamePath` example

useSamePath property is allowing to only put the field name inside the fieldName property without replicating the whole path to that field. You can spot the difference inside the schema.

It is super useful inside nested sections or array fields, since you can easily point to the nearest sibling field.

Live Editor

// You can play with code, with HTML tags and text as much as you want!
async function onSubmit(values, form, callback) {
    await(300);
    alert(JSON.stringify(values));
}
const foodOptions = () => [
    { label: 'Pizza', value: 'pizza' },
    { label: 'Burger', value: 'burger' },
    { label: 'Taco', value: 'taco' },
]
const schema: FormSchema = {
    firstSection: {
        type: 'section',
        fieldLabel: () => <h2>First Section</h2>,
        fields: [
            {
                favFood: {
                    type: 'select',
                    fieldWrapperProperties: { className: 'mb-2' }
                    optionsList: foodOptions
                },
            },
            {
                secondFavFood: {
                    type: 'select',
                    fieldWrapperProperties: { className: 'mb-2' },
                    fieldToTrack: {
                        fieldName: 'favFood',
                        useSamePath: true
                    },
                    optionsList: (valueFromFieldToTrack: string) =>
                        foodOptions().filter(option => option.value !== valueFromFieldToTrack)
                }
            },
        ]
    }
    secondSection: {
        type: 'section',
        fieldLabel: () => <h2>Second Section</h2>,
        fields: [
            {
                favFood: {
                    type: 'select',
                    fieldWrapperProperties: { className: 'mb-2' }
                    optionsList: foodOptions
                },
            },
            {
                secondFavFood: {
                    type: 'select',
                    fieldWrapperProperties: { className: 'mb-2' },
                    fieldToTrack: {
                        fieldName: 'secondSection.favFood'
                    },
                    optionsList: (valueFromFieldToTrack: string) =>
                        foodOptions().filter(option => option.value !== valueFromFieldToTrack)
                }
            },
        ]
    }
}
render (
     <FormWrapper
        schema={schema}
        onSubmit={onSubmit}
    >
        <Button type='submit' scheme='primary'>
            Submit
        </Button>
    </FormWrapper>
)

// You can play with code, with HTML tags and text as much as you want!
async function onSubmit(values, form, callback) {
    await(300);
    alert(JSON.stringify(values));
}
const foodOptions = () => [
    { label: 'Pizza', value: 'pizza' },
    { label: 'Burger', value: 'burger' },
    { label: 'Taco', value: 'taco' },
]
const schema: FormSchema = {
    firstSection: {
        type: 'section',
        fieldLabel: () => <h2>First Section</h2>,
        fields: [
            {
                favFood: {
                    type: 'select',
                    fieldWrapperProperties: { className: 'mb-2' }
                    optionsList: foodOptions
                },
            },
            {
                secondFavFood: {
                    type: 'select',
                    fieldWrapperProperties: { className: 'mb-2' },
                    fieldToTrack: {
                        fieldName: 'favFood',
                        useSamePath: true
                    },
                    optionsList: (valueFromFieldToTrack: string) =>
                        foodOptions().filter(option => option.value !== valueFromFieldToTrack)
                }
            },
        ]
    }
    secondSection: {
        type: 'section',
        fieldLabel: () => <h2>Second Section</h2>,
        fields: [
            {
                favFood: {
                    type: 'select',
                    fieldWrapperProperties: { className: 'mb-2' }
                    optionsList: foodOptions
                },
            },
            {
                secondFavFood: {
                    type: 'select',
                    fieldWrapperProperties: { className: 'mb-2' },
                    fieldToTrack: {
                        fieldName: 'secondSection.favFood'
                    },
                    optionsList: (valueFromFieldToTrack: string) =>
                        foodOptions().filter(option => option.value !== valueFromFieldToTrack)
                }
            },
        ]
    }
}
render (
     <FormWrapper
        schema={schema}
        onSubmit={onSubmit}
    >
        <Button type='submit' scheme='primary'>
            Submit
        </Button>
    </FormWrapper>
)

Result

Field to track (only Checkbox, Radio, Select)

Example​

useSamePath example​

Example

`useSamePath` example