CPV Field

This field is very special, since it is giving you an opportunity to adjust visual part after user will select codes from the CPV Picker.

Let's take a look at 2 examples

1st - Default version shipped with @mercell/form-react package.

Please select some codes and see the 'end result'

interface DefaultCPVProps {
    selectedCPVs: string[];
    setCPVPickerVisibility: Dispatch<SetStateAction<boolean>>;
    setSelectedCPVs: Dispatch<SetStateAction<string[]>>;
    isDisabled: boolean;
    showErrors: boolean;
    errors: string;
    onChangeFieldValue: (event: any) => void;
    name: string;
    allowToSelectOnlyOne?: boolean;
}

type CPVFieldStructure<T extends DefaultCPVProps = DefaultCPVProps> = {
    type: 'cpv-selector';
    elementProperties?: JSX.IntrinsicElements['div'];
    fieldToTrackToDisableCodes?: FieldTrackerInterface;
    Component?: FC<T>;
} & Omit<
    CPVProps,
    | 'onCloseCPVPickerCallback'
    | 'isCPVPickerOpen'
    | 'onCPVListChange'
    | 'selectedCPVs'
> &
    Omit<FieldStructure, 'placeholder'>;

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 schema: FormSchema = { cpvDefaultExample: { type: 'cpv-selector', fieldWrapperProperties: { className: 'mb-2' }, }, } 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 schema: FormSchema = {
    cpvDefaultExample: {
        type: 'cpv-selector',
        fieldWrapperProperties: { className: 'mb-2' },
    },
}
render (
     <FormWrapper
        schema={schema}
        onSubmit={onSubmit}
    >
        <Button type='submit' scheme='primary'>
            Submit
        </Button>
    </FormWrapper>
)

Result

2nd example - custom component for selected codes.

Live Editor

// You can play with code, with HTML tags and text as much as you want! interface Props { selectedCPVs: string[]; setCPVPickerVisibility: Dispatch<SetStateAction<boolean>>; setSelectedCPVs: Dispatch<SetStateAction<string[]>>; isDisabled: boolean; showErrors: boolean; errors: string; onChangeFieldValue: (event: any) => void; name: string; allowToSelectOnlyOne?: boolean; } const CustomCPVFieldComponent: FC<Props> = ({ selectedCPVs, setCPVPickerVisibility, onChangeFieldValue, showErrors, errors, isDisabled, name, setSelectedCPVs, allowToSelectOnlyOne }) => { const selectedCPVsRef = React.useRef<string[]>(selectedCPVs); React.useEffect(() => { if ( JSON.stringify(selectedCPVs) !== JSON.stringify(selectedCPVsRef.current) ) { onChangeFieldValue(selectedCPVs); } }, [onChangeFieldValue, selectedCPVs]); return ( <> {selectedCPVs.map((code) => ( <div className="flex"> <RadioButton key={code} id={code} name='cpv-selection'>{code}</RadioButton> <CloseButton onClick={()=> setSelectedCPVs(currentSelected => currentSelected.filter(cpvCode => cpvCode !== code))}/> </div> ))} <Button scheme="primary" onClick={() => setCPVPickerVisibility(true)} > Open CPV Picker </Button> {showErrors && <FieldError>{errors}</FieldError>} </> ); }; async function onSubmit(values, form, callback) { await(300); alert(JSON.stringify(values)); } const schema: FormSchema = { cpvDefaultExample: { type: 'cpv-selector', fieldWrapperProperties: { className: 'mb-2' }, Component: CustomCPVFieldComponent }, } 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!
interface Props {
    selectedCPVs: string[];
    setCPVPickerVisibility: Dispatch<SetStateAction<boolean>>;
    setSelectedCPVs: Dispatch<SetStateAction<string[]>>;
    isDisabled: boolean;
    showErrors: boolean;
    errors: string;
    onChangeFieldValue: (event: any) => void;
    name: string;
    allowToSelectOnlyOne?: boolean;
}
const CustomCPVFieldComponent: FC<Props> = ({
    selectedCPVs,
    setCPVPickerVisibility,
    onChangeFieldValue,
    showErrors,
    errors,
    isDisabled,
    name,
    setSelectedCPVs,
    allowToSelectOnlyOne
}) => {
    const selectedCPVsRef = React.useRef<string[]>(selectedCPVs);
    React.useEffect(() => {
        if (
            JSON.stringify(selectedCPVs) !==
            JSON.stringify(selectedCPVsRef.current)
        ) {
            onChangeFieldValue(selectedCPVs);
        }
    }, [onChangeFieldValue, selectedCPVs]);
    return (
        <>
            {selectedCPVs.map((code) => (
                <div className="flex">
                    <RadioButton key={code} id={code} name='cpv-selection'>{code}</RadioButton>
                    <CloseButton onClick={()=> setSelectedCPVs(currentSelected => currentSelected.filter(cpvCode => cpvCode !== code))}/>
                </div>
            ))}
            <Button
                scheme="primary"
                onClick={() => setCPVPickerVisibility(true)}
            >
                Open CPV Picker
            </Button>
            {showErrors && <FieldError>{errors}</FieldError>}
        </>
   );
};
async function onSubmit(values, form, callback) {
    await(300);
    alert(JSON.stringify(values));
}
const schema: FormSchema = {
    cpvDefaultExample: {
        type: 'cpv-selector',
        fieldWrapperProperties: { className: 'mb-2' },
        Component: CustomCPVFieldComponent
    },
}
render (
     <FormWrapper
        schema={schema}
        onSubmit={onSubmit}
    >
        <Button type='submit' scheme='primary'>
            Submit
        </Button>
    </FormWrapper>
)

Result