react-bootstrap#ControlLabel JavaScript Examples

render() {
  // Using destructuring assignment to set the constant profile to the state
  const { profile } = this.state;
  return (
    <div className="container">
      <div className="profile-area">
        <h1>{profile.name}</h1>
        <Panel header="Profile">
        <img src={profile.picture} alt="profile" />
            <div>
              <ControlLabel><Glyphicon glyph="user" /> Nickname</ControlLabel>
              <h3>{profile.nickname}</h3>
            </div>
            <pre>{JSON.stringify(profile, null, 2)}</pre>
          </Panel>
        </div>
      </div>
    );
  }

FieldGroup = ({ id, label, help, error, ...props }) => {
    return (
        <FormGroup controlId={id} validationState={error ? 'error' : null}>
            <ControlLabel>{label}</ControlLabel>
            <FormControl {...props} />
            {help && <HelpBlock>{help}</HelpBlock>}
            {error && <div className="alert alert-danger">{error}</div>}
        </FormGroup>
    );
}

SelectFieldGroup = ({ id, label, options, help, error, ...props }) => {
    return (
        <FormGroup controlId={id} validationState={error ? 'error' : null}>
            <ControlLabel>{label}</ControlLabel>
            <FormControl componentClass="select"  {...props}>
                {options.map(option=>{
                    return <option key={option.value} value={option.value}>{option.text}</option>;
                })}
            </FormControl>
            {help && <HelpBlock>{help}</HelpBlock>}
            {error && <div className="alert alert-danger">{error}</div>}
        </FormGroup>
    );
}

/**
 * This form takes a file with the list of comptecommunal.
 * E.g.
 * ```
 * 350238*02795,350238*03107
 */
export default function Lot({ values = {}, setValue = () => { } }) {
    const onDrop = files => {
        setValue("file", files[0]);
    };
    const removeFile = (event) => {
        setValue("file", undefined);
        event.stopPropagation();
        event.preventDefault();
    };
    const fileName = values.file?.name;
    return (<div className="item-row">
        <div className="label-col">
            <ControlLabel><Message msgId={'cadastrapp.proprietaire.file.title'}/></ControlLabel>
        </div>
        <div className="form-col" style={{ position: 'relative' }}>
            <DropZone
                style={dropZoneStyle}
                activeStyle={dropZoneActiveStyle}
                multiple={false}
                accept={["text/csv", "text/plain", ".csv"]}
                onDrop={onDrop}>
                {fileName ? <span><Glyphicon glyph="remove" onClick={removeFile} /> {fileName} </span> : <Message msgId={'cadastrapp.parcelle.file.example'} />}
            </DropZone>
            <div
                style={{ width: "100%", "float": "left" }}
                className="text-muted"><Message msgId={'cadastrapp.proprietaire.file.explanation'}/></div>
        </div>
    </div>);
}

ContentUpgradeLayout = ({
    onClick,
    libraries,
    showConfirm,
    onConfirm,
    upgradeComplete,
    onToggleConfirm,
    onUndoUpgrade,
    percentProgress,
    inProgress,
    translations,
    selectedLibraryId,
}) => {
    return (
        <div className="upgradeVersionContainer">
            {(upgradeComplete !== true && inProgress !== true) && (
                <>
                    <FormGroup controlId="formControlsSelect">
                        <FormControl
                            componentClass="select"
                            onChange={onClick}
                            value={selectedLibraryId}
                        >
                            <option value="">{translations.selectVersion}</option>
                            {libraries.map((library, index) => {
                                return (
                                    <option key={index} value={library.id}>{library.version}</option>
                                );
                            })}
                        </FormControl>
                    </FormGroup>
                    <ModalWindow
                        show={showConfirm}
                        onHide={onToggleConfirm}
                        header={
                            <div>
                                {translations.confirmation}
                            </div>
                        }
                        footer={
                            <div>
                                <Button onClick={onConfirm} bsStyle="success">
                                    {translations.yes}
                                </Button>
                                <Button onClick={onToggleConfirm} bsStyle="danger">
                                    {translations.no}
                                </Button>
                            </div>
                        }
                    >
                        {translations.upgradeConfirmation}
                    </ModalWindow>
                </>
            )}
            {(inProgress === true || upgradeComplete === true) && (
                <>
                    <ControlLabel>{translations.progress}</ControlLabel>
                    <ProgressBar
                        now={percentProgress}
                        label={`${percentProgress}%`}
                    />
                </>
            )}
            {upgradeComplete === true && (
                <div className="contentupgrade-complete">
                    <div>{translations.undoTextHTML}</div>
                    <Button
                        bsStyle="danger"
                        onClick={onUndoUpgrade}
                    >
                        {translations.undo}
                    </Button>
                </div>
            )}
        </div>
    );
}

export default function Address({values, setValue = () => {}}) {
    useEffect(()=> {isEmpty(values) && setValue('dindic', '');}, [values]);
    return (<>
        <div className="item-row">
            <div className="label-col">
                <ControlLabel><Message msgId={'cadastrapp.parcelle.city'}/></ControlLabel>
            </div>
            <div className="form-col">
                <MunicipalityCombo value={values?.commune} onSelect={v => setValue('commune', v)} />
                <div className="text-muted"><Message msgId={'cadastrapp.parcelle.cityExample'}/></div>
            </div>
        </div>
        <div className="item-row">
            <div className="label-col">
                <ControlLabel><Message msgId={'cadastrapp.parcelle.town'}/></ControlLabel>
            </div>
            <div className="form-col">
                <RoadCombo value={values?.road} disabled={!values?.commune} cgocommune={values?.commune?.cgocommune} onSelect={v => setValue('road', v)}/>
                <div className="text-muted"><Message msgId={'cadastrapp.parcelle.townExample'}/></div>
            </div>
        </div>
        <div className="item-row">
            <div className="label-col">
                <ControlLabel><Message msgId={'cadastrapp.parcelle.street'}/></ControlLabel>
            </div>
            <div className="form-col">
                <FormControl value={values?.dnvoiri ?? ""} style={{ height: 34, width: 100, "float": "left" }} type="text" bsSize="sm" onChange={v => setValue('dnvoiri', v.target.value)}/>
                <div className="pull-left">
                    <DropdownList
                        style={{ width: 100, marginLeft: 5 }}
                        valueField="value"
                        textField="label"
                        value={values?.dindic}
                        onSelect={(v) => {
                            setValue('dindic', v.value);
                        }}
                        data={options}
                    />
                </div>
                <div style={{ "float": "left", marginLeft: 5, marginTop: 5 }} className="text-muted "><Message msgId={'cadastrapp.parcelle.streetExample'}/></div>
            </div>
        </div>
    </>);
}

export default function Lot({ values = {}, setValue = () => {}}) {
    const onDrop = files => {
        setValue('parcelle', undefined); // mutual exclusion
        setValue("file", files[0]);
    };
    const removeFile = (event) => {
        setValue("file", undefined);
        event.stopPropagation();
        event.preventDefault();
    };
    const setParcelle = (parcelle) => {
        setValue("file", undefined); // mutual exclusion
        setValue('parcelle', parcelle);
    };
    const fileName = values.file?.name;
    // const dropMessage = "Drag and drop the CSV file here or click to select";
    return (<>
        <div className="item-row">
            <div className="label-col">
                <ControlLabel><Message msgId={'cadastrapp.parcelle.lot.title'}/></ControlLabel>
            </div>
            <div className="form-col">
                <FormControl componentClassName="textarea"
                    type="text" bsSize="sm" value={values?.parcelle ?? ""} onChange={v => setParcelle(v.target.value)}/>
                <div className="text-muted"><Message msgId={'cadastrapp.parcelle.lot.example'}/></div>
            </div>
        </div>

        <div className="item-row">
            <div className="label-col">
                <ControlLabel/>
            </div>
            <div className="form-col">
                <div style={{ textAlign: "center" }} className="text-muted">or</div>
            </div>
        </div>

        <div className="item-row">
            <div className="label-col">
                <ControlLabel><Message msgId={'cadastrapp.parcelle.file.title'}/></ControlLabel>
            </div>
            <div className="form-col" style={{position: 'relative'}}>
                <DropZone
                    accept={["text/csv", "text/plain", ".csv"]}
                    style={dropZoneStyle}
                    activeStyle={dropZoneActiveStyle}
                    multiple={false}
                    onDrop={onDrop}>
                    {fileName ? <span><Glyphicon glyph="remove" onClick={removeFile} /> {fileName} </span> : <Message msgId={'cadastrapp.parcelle.file.example'}/>}
                </DropZone>
                <div
                    style={{ width: "100%", "float": "left" }}
                    className="text-muted"><Message msgId={'cadastrapp.parcelle.file.explanation'}/></div>
            </div>
        </div>
    </>);
}

/**
 * Examples of ownerId for rennes, in the list:
 * - `*00002`
 * - `*00003`
 * - `+00003`
 * - `+00005`
 * - `*00006`
 * - `*00007`
 * - `*00008`
 * - `+00008`
 * - `+00012`
 * - `*00013`
 * - `+00015`
 * - `*00016`
 * - `*00017`
 * - `*00019`
 * - `*00020`
 * - `*00022`
 * - `*00023`
 * - `+00023`
 * - `*00024`
 * - `*00025`
 */
export default function OwnerId({values, setValue = () => {}}) {
    return (
        <>
            <div className="item-row">
                <div className="label-col">
                    <ControlLabel><Message msgId={'cadastrapp.proprietaire.city'}/></ControlLabel>
                </div>
                <div className="form-col">
                    <MunicipalityCombo value={values?.commune} onSelect={v => setValue('commune', v)} />
                    <div className="text-muted"><Message msgId={'cadastrapp.proprietaire.cityExample'}/></div>
                </div>
            </div>
            <div className="item-row">
                <div className="label-col">
                    <ControlLabel><Message msgId={'cadastrapp.proprietaire.proprietaires.title'}/></ControlLabel>
                </div>
                <div className="form-col">
                    <StrList
                        items={values?.dnupro ?? []}
                        onAdd={(ownerId = "") => {
                            setValue(`dnupro`, [...(values?.dnupro ?? []), ownerId]);
                        }}
                        onRemove={index => {
                            const array = values?.dnupro ?? [];
                            const newArray = [...array.slice(0, index), ...array.slice(index + 1)];
                            setValue(`dnupro`, newArray);
                        }}
                        onSetValue={(index, value) => {
                            setValue(`dnupro[${index}]`, value);
                        }} />
                </div>
            </div>
        </>);
}

export default function User({values, setValue = () => {}}) {
    return (
        <>
            <div className="item-row">
                <div className="label-col">
                    <ControlLabel><Message msgId={'cadastrapp.proprietaire.city'}/></ControlLabel>
                </div>
                <div className="form-col">
                    <MunicipalityCombo value={values?.commune} onSelect={v => setValue('commune', v)} />
                    <div className="text-muted"><Message msgId={'cadastrapp.proprietaire.cityExample'}/></div>
                </div>
            </div>
            <div className="item-row">
                <div className="label-col">
                    <ControlLabel><Message msgId={'cadastrapp.proprietaire.name.title'}/></ControlLabel>
                </div>
                <div className="form-col">
                    <ProprietaireCombo
                        birthsearch={values?.birthsearch ?? false}
                        value={values?.proprietaire}
                        disabled={!values?.commune}
                        cgocommune={values?.commune?.cgocommune}
                        onSelect={v => setValue('proprietaire', v)}
                        onChange={v => setValue('proprietaire', v)}
                    />
                    <div className="text-muted"><Message msgId={'cadastrapp.proprietaire.name.example'}/></div>
                </div>
            </div>
            <div className="item-row">
                <div className="label-col">
                    <ControlLabel/>
                </div>
                <div className="form-col">
                    <Checkbox
                        value={values?.birthsearch}
                        onChange={v => {
                            setValue('birthsearch', v.target.checked);
                        }} >
                        <Message msgId={'cadastrapp.proprietaire.search.birth'}/>
                    </Checkbox>
                    <div className="text-muted"><Message msgId={'cadastrapp.proprietaire.name.tooltip'}/></div>
                </div>
            </div>
        </>);
}

export default function CoownershipSearch({ loading, onSearch = () => { }, onOwnersSearch = () => {} }) {
    const [searchState, setFormState, resetFormState] = useFormState();
    const values = searchState[SEARCH_TYPES.COOWNER];
    const setValue = (k, v) => setFormState(SEARCH_TYPES.COOWNER, k, v);
    return (
        <div className="coownership-search">
            <h3><Message msgId={'cadastrapp.search.copropriete.title'}/></h3>
            <div style={{padding: "10px", height: 242}}>
                <div className="item-row">
                    <div className="label-col">
                        <ControlLabel><Message msgId={'cadastrapp.parcelle.city'}/></ControlLabel>
                    </div>
                    <div className="form-col">
                        <MunicipalityCombo value={values?.commune} onSelect={v => setValue('commune', v)} />
                        <div className="text-muted"><Message msgId={'cadastrapp.parcelle.cityExample'}/></div>
                    </div>
                </div>

                <div className="item-row">
                    <div className="label-col">
                        <ControlLabel><Message msgId={'cadastrapp.proprietaire.name.title'}/></ControlLabel>
                    </div>
                    <div className="form-col">
                        <ProprietaireCombo
                            value={values?.proprietaire}
                            disabled={!values?.commune}
                            cgocommune={values?.commune?.cgocommune}
                            onSelect={v => setValue('proprietaire', v)}
                            onChange={v => setValue('proprietaire', v)}
                        />
                        <div className="text-muted"><Message msgId={'cadastrapp.proprietaire.name.example'}/></div>
                    </div>
                </div>

                <div className="item-row">
                    <div className="label-col">
                        <ControlLabel><Message msgId={'cadastrapp.search.copropriete.parcelle.ident'}/></ControlLabel>
                    </div>
                    <div className="form-col">
                        <FormControl value={values?.parcelle ?? ""} onChange={e => setValue('parcelle', e.target.value)} type="text" bsSize="sm"/>
                        <div className="text-muted"><Message msgId={'cadastrapp.parcelle.ident.example'}/></div>
                    </div>
                </div>

                <div className="item-row">
                    <div className="label-col">
                        <ControlLabel><Message msgId={'cadastrapp.search.copropriete.comptecommunal.ident'}/></ControlLabel>
                    </div>
                    <div className="form-col">
                        <FormControl value={values?.comptecommunal ?? ""} onChange={e => setValue('comptecommunal', e.target.value)} type="text" bsSize="sm"/>
                        <div className="text-muted"><Message msgId={'cadastrapp.search.copropriete.comptecommunal.example'}/></div>
                    </div>
                </div>
            </div>
            <SearchButtons
                loading={loading}
                valid={isSearchValid(SEARCH_TYPES.COOWNER, searchState[SEARCH_TYPES.COOWNER])}
                onClear={() => resetFormState(SEARCH_TYPES.COOWNER)}
                onSearch={() => {
                    if (isString(searchState[SEARCH_TYPES.COOWNER]?.proprietaire) && !values?.parcelle) {
                        onOwnersSearch(SEARCH_TYPES.COOWNER, searchState[SEARCH_TYPES.COOWNER]);
                    } else {
                        // plot search
                        onSearch(SEARCH_TYPES.COOWNER, searchState[SEARCH_TYPES.COOWNER]);
                    }
                }}/>
        </div>
    );
}

render() {
        let publicDomain = null;
        let createCommons = null;
        let attributionFields = null;
        // let disableCC0 = (this.allowedLicenses.indexOf('CC0') === -1);
        // let disableCopyright = (this.allowedLicenses.indexOf('COPYRIGHT') === -1);

        if (['PUBLICDOMAIN'].indexOf(this.state.licenseType) !== -1) {
            publicDomain = (
                <div>
                    <FormGroup controlId="publicdomain">
                        <ControlLabel className="licensechooser-group-title">
                            <FormattedMessage id="LICENSECHOOSER.PUBLICDOMAIN"/>
                        </ControlLabel>
                        <HelpIcon messageId="LICENSECHOOSER.PUBLICDOMAIN.HELP"/>
                        <RadioGroup
                            name="publicdomainlicense"
                            selectedValue={this.state.publicDomainLicense}
                            onChange={this.handlePublicDomainLicenseChange}
                        >
                            <label className="radio-inline">
                                <Radio className="radio-inline" value="CC0"/>
                                <FormattedMessage id="LICENSECHOOSER.PUBLICDOMAIN.CC0"/>
                            </label>
                            <label className="radio-inline">
                                <Radio className="radio-inline" value="PDM"/>
                                <FormattedMessage id="LICENSECHOOSER.PUBLICDOMAIN.PDM"/>
                            </label>
                        </RadioGroup>
                    </FormGroup>
                </div>
            );
        }

        if (this.state.licenseType === 'CC') {
            createCommons = (
                <div>
                    <FormGroup controlId="sharing">
                        <ControlLabel className="licensechooser-group-title">
                            <FormattedMessage id="LICENSECHOOSER.ADAPTIONS"/>
                        </ControlLabel>
                        <HelpIcon messageId="LICENSECHOOSER.ADAPTIONS-HELP"/>
                        <RadioGroup
                            name="sharing"
                            selectedValue={this.state.sharing}
                            onChange={this.handleSharingChange}
                        >
                            <label className="radio-inline">
                                <Radio className="radio-inline" value="-"/>
                                <FormattedMessage id="LICENSECHOOSER.YES"/>
                            </label>
                            <label className="radio-inline">
                                <Radio className="radio-inline" value="ND"/>
                                <FormattedMessage id="LICENSECHOOSER.NO"/>
                            </label>
                            <label className="radio-inline">
                                <Radio className="radio-inline" value="SA"/>
                                <FormattedMessage id="LICENSECHOOSER.OPTION-SHAREALIKE"/>
                            </label>
                        </RadioGroup>
                    </FormGroup>

                    <FormGroup controlId="commercial">
                        <ControlLabel className="licensechooser-group-title">
                            <FormattedMessage id="LICENSECHOOSER.COMMERCIAL-USE"/>
                        </ControlLabel>
                        <HelpIcon messageId="LICENSECHOOSER.COMMERCIAL-USE-HELP"/>
                        <RadioGroup
                            name="commercial"
                            selectedValue={this.state.commercial}
                            onChange={this.handleCommercialChange}
                        >
                            <label className="radio-inline">
                                <Radio value="-" className="radio-inline"/>
                                <FormattedMessage id="LICENSECHOOSER.YES"/>
                            </label>
                            <label className="radio-inline">
                                <Radio value="NC" className="radio-inline"/>
                                <FormattedMessage id="LICENSECHOOSER.NO"/>
                            </label>
                        </RadioGroup>
                    </FormGroup>
                </div>
            );
        }

        if (this.props.useAttribution && this.state.licenseType !== 'EDLL') {
            attributionFields = (
                <div className="licensechooser-attribution-container">
                    <ControlLabel className="licensechooser-group-title">
                        <FormattedMessage id="LICENSECHOOSER.ATTRIBUTION-TITLE"/>
                    </ControlLabel>
                    <HelpIcon messageId="LICENSECHOOSER.ATTRIBUTION-HELP"/>

                    <FormGroup>
                        <ControlLabel className="licensechooser-input-title">
                            <FormattedMessage id="LICENSECHOOSER.ATTRIBUTION-FIELD-TITLE"/>
                        </ControlLabel>
                        <FormControl
                            type="text"
                            value={this.props.attributionTitle}
                            placeholder={this.props.intl.formatMessage({ id: 'LICENSECHOOSER.ATTRIBUTION-FIELD-TITLE-PLACEHOLDER' })}
                            onChange={this.handleAttributionTitle}
                        />
                    </FormGroup>

                    <FormGroup>
                        <ControlLabel className="licensechooser-input-title">
                            <FormattedMessage id="LICENSECHOOSER.ATTRIBUTION-FIELD-NAME"/>
                        </ControlLabel>
                        <FormControl
                            type="text"
                            value={this.props.attributionName}
                            placeholder={this.props.intl.formatMessage({ id: 'LICENSECHOOSER.ATTRIBUTION-FIELD-NAME-PLACEHOLDER' })}
                            onChange={this.handleAttributionName}
                        />
                    </FormGroup>

                    <FormGroup>
                        <ControlLabel className="licensechooser-input-title">
                            <FormattedMessage id="LICENSECHOOSER.ATTRIBUTION-FIELD-URL"/>
                        </ControlLabel>
                        <FormControl
                            type="text"
                            value={this.props.attributionUrl}
                            placeholder={this.props.intl.formatMessage({ id: 'LICENSECHOOSER.ATTRIBUTION-FIELD-URL-PLACEHOLDER' })}
                            onChange={this.handleAttributionUrl}
                        />
                    </FormGroup>
                </div>
            );
        }

        return (
            <div>
                <ControlLabel className="licensechooser-group-title">
                    <FormattedMessage id="LICENSECHOOSER.RESTRICTION-LEVEL"/>
                </ControlLabel>
                <HelpIcon messageId="LICENSECHOOSER.RESTRICTION-LEVEL-HELP"/>
                <FormGroup>
                    <RadioGroup
                        name="restriction"
                        selectedValue={this.state.licenseType}
                        onChange={this.handleLicenseTypeChange}
                    >
                        <label className="radio-inline">
                            <Radio className="radio-inline" value="PUBLICDOMAIN"/>
                            <FormattedMessage id="LICENSECHOOSER.PUBLIC-DOMAIN"/>
                        </label>

                        <label className="radio-inline">
                            <Radio className="radio-inline" value="CC"/>
                            <FormattedMessage id="LICENSECHOOSER.CREATIVE-COMMONS"/>
                        </label>

                        <label className="radio-inline">
                            <Radio className="radio-inline" value="EDLL"/>
                            <FormattedMessage id="LICENSECHOOSER.EDLL"/>
                        </label>
                    </RadioGroup>
                </FormGroup>

                {publicDomain}
                {createCommons}
                {attributionFields}
            </div>
        );
    }

export default function RequestFormModal({
    onClose = () => {},
    isShown = false,
    authLevel = {},
    maxRequest = DEFAULT_MAX_REQUEST,
    ...props
}) {

    // Auth level of the user
    const isCNIL = authLevel.isCNIL2 || authLevel.isCNIL1;

    const USER_TYPE_OPTIONS = [
        { value: 'A', label: 'cadastrapp.demandeinformation.type.A'},
        { value: 'P1', label: 'cadastrapp.demandeinformation.type.P1' },
        { value: 'P2', label: 'cadastrapp.demandeinformation.type.P2' },
        { value: 'P3', label: 'cadastrapp.demandeinformation.type.P3' }
    ];

    const [showReqByFields, setShowReqByFields] = useState(false);
    const [showRequestObj, setShowRequestObj] = useState(false);
    const [requestFormData, setRequestFormData] = useState(DEFAULT_REQUEST_OBJ);
    const [inValidField, setInValidField] = useState(true);
    const [availableRequest, setAvailableRequest] = useState(+maxRequest);
    const [checkingLimit, setCheckingLimit] = useState(false);

    useEffect(()=>{
        const {type, lastname, cni} = requestFormData;
        const isNotNormalUser = !isEmpty(type) && type !== "P3";  // P3 is normal user
        const isValidNormalUser = !isEmpty(cni) && type === "P3";

        setShowReqByFields(isNotNormalUser || isValidNormalUser); // Show/hide requestBy fields
        setShowRequestObj((isNotNormalUser && !!lastname.length) || isValidNormalUser); // Show/hide request object fields
    }, [requestFormData.cni, requestFormData.type, requestFormData.lastname]);

    // Check request limit based cni and type and set available request
    const checkRequestLimit = ({cni, type}) => {
        setCheckingLimit(true);
        checkRequestLimitation({cni, type}).then((data)=> {
            if (data.user) {
                // Use the fetched user data to populate the request form field
                setRequestFormData({
                    ...requestFormData, ...data.user,
                    firstname: data.user?.firstName || '',
                    lastname: data.user?.lastName || '',
                    codepostal: data.user?.codePostal || ''
                });
            }
            // Set available requests from the response, else set max request from configuration
            data.requestAvailable || data.requestAvailable === 0 ? setAvailableRequest(+data.requestAvailable) : setAvailableRequest(+maxRequest);
            setCheckingLimit(false);
        }).catch(()=>{
            setAvailableRequest(0);
            props.onError({
                title: "Error",
                message: "cadastrapp.demandeinformation.availableReqError"
            });
            setCheckingLimit(false);
        });
    };

    const [printRequest, setPrintRequest] = useState({});

    useEffect(() => {
        // Generate print params from form data
        setPrintRequest(formulatePrintParams(requestFormData));
    }, [requestFormData]);

    const onChange = (item) => {
        let formObj;
        if (item.value) {
            formObj = {...DEFAULT_REQUEST_OBJ, type: item.value};
        } else {
            const {name = '', value = ''} = item?.target || {};
            formObj = {...requestFormData, [name]: includes(['askby', 'responseby'], name) ? +value : value};
            name === "cni" && setCheckingLimit(true); // Set flag when checking for request limit
        }
        setRequestFormData(formObj);
    };

    const onBlur = ({target}) => {
        const {name = '', value = ''} = target || {};
        const trimmedValue = value.trim();
        setRequestFormData({...requestFormData, [name]: trimmedValue});

        // Trigger check request limit call
        if (name === "cni" && !isEmpty(requestFormData.type) && !isEmpty(trimmedValue) && trimmedValue.length > 2) {
            checkRequestLimit(requestFormData);
        }
    };

    const onCloseForm = () => { onClose(); setRequestFormData(DEFAULT_REQUEST_OBJ); setAvailableRequest(DEFAULT_MAX_REQUEST);};

    const formFields = [
        {
            value: requestFormData.cni,
            name: 'cni',
            label: <Message msgId={"cadastrapp.demandeinformation.cni"}/>,
            validation: requestFormData.type === 'P3' && isEmpty(requestFormData.cni) && "error"
        },
        {
            value: requestFormData.lastname,
            name: 'lastname',
            label: <Message msgId={"cadastrapp.demandeinformation.nom"}/>,
            validation: !isEmpty(requestFormData.type) && requestFormData.type !== 'P3' && isEmpty(requestFormData.lastname) && "error"
        },
        {
            value: requestFormData.firstname,
            name: 'firstname',
            label: <Message msgId={"cadastrapp.demandeinformation.prenom"}/>
        },
        {
            value: requestFormData.adress,
            name: 'adress',
            label: <Message msgId={"cadastrapp.demandeinformation.num_rue"}/>
        },
        {
            value: requestFormData.codepostal,
            name: 'codepostal',
            label: <Message msgId={"cadastrapp.demandeinformation.code_postal"}/>
        },
        {
            value: requestFormData.commune,
            name: 'commune',
            label: <Message msgId={"cadastrapp.demandeinformation.commune"}/>
        },
        {
            value: requestFormData.mail,
            name: 'mail',
            type: 'email',
            label: <Message msgId={"cadastrapp.demandeinformation.mail"}/>,
            validation: !isEmpty(requestFormData.mail) && !isValidEmail(requestFormData.mail) && "error"
        }
    ];

    const radioButtonGroup = {
        groupLabel: [
            {label: <Message msgId={"cadastrapp.demandeinformation.realise"}/>, name: 'askby' },
            {label: <Message msgId={"cadastrapp.demandeinformation.transmission"}/>, name: 'responseby'}
        ],
        groupField: [
            <Message msgId={"cadastrapp.demandeinformation.counter"}/>,
            <Message msgId={"cadastrapp.demandeinformation.mail"}/>,
            <Message msgId={"cadastrapp.demandeinformation.email"}/>
        ]
    };

    return (
        <Modal
            dialogClassName="cadastrapp-modal"
            show={isShown} onHide={onCloseForm}>
            <Modal.Header closeButton>
                <Modal.Title><Message msgId={'cadastrapp.demandeinformation.title'}/></Modal.Title>
            </Modal.Header>
            <Modal.Body className="request-modal-body">
                <div className="item-row">
                    <div className="label-col">
                        <ControlLabel><Message msgId={'cadastrapp.demandeinformation.type.demandeur'}/></ControlLabel>
                    </div>
                    <div className="form-col">
                        <Select name="type" value={requestFormData.type} onChange={onChange} options={USER_TYPE_OPTIONS}/>
                    </div>
                </div>
                {
                    formFields.map(({label, name, value, type = "text", validation = null}, index)=> (
                        <div className="item-row" key={index}>
                            <FormGroup validationState={validation}>
                                <div className="label-col">
                                    <ControlLabel>{label}</ControlLabel>
                                </div>
                                <div className="form-col">
                                    <FormControl
                                        disabled={isEmpty(requestFormData.type) || (name !== "cni" && requestFormData.type === 'P3' && isEmpty(requestFormData.cni))}
                                        value={value} name={name} onBlur={onBlur} onChange={onChange} type={type}
                                        bsSize="sm"
                                    />
                                </div>
                            </FormGroup>
                        </div>
                    ))
                }
                {
                    showReqByFields && radioButtonGroup.groupLabel.map(({label, name})=> (
                        <div className={"item-row"}>
                            <div className="label-col">
                                <ControlLabel>{label}</ControlLabel>
                            </div>
                            <div className="form-col">
                                <FormGroup>
                                    {radioButtonGroup.groupField.map((fieldLabel, index)=>
                                        <Radio onChange={onChange} checked={requestFormData[name] === index + 1} value={index + 1}  name={name} inline>
                                            {fieldLabel}
                                        </Radio>)}
                                </FormGroup>
                            </div>
                        </div>
                    ))
                }
                <hr/>
                {showRequestObj && !checkingLimit && <div className={"item-row"}>
                    <div className="request-obj-label">
                        <ControlLabel><Message msgId={"cadastrapp.demandeinformation.titre2"}/></ControlLabel>
                    </div>
                    <RequestObject
                        allow={isCNIL}
                        requestFormData={requestFormData}
                        setInValidField={setInValidField}
                        setRequestFormData={setRequestFormData}
                        setAvailableRequest={setAvailableRequest}
                        availableRequest={availableRequest}
                    />
                </div>
                }
            </Modal.Body>
            <Modal.Footer>
                <Button onClick={onCloseForm}><Message msgId={'cadastrapp.demandeinformation.annuler'}/></Button>
                <Button
                    disabled={!showRequestObj || checkingLimit || inValidField || props.loading}
                    onClick={()=>props.onPrintPDF(printRequest)}
                    className="print"
                >
                    {!props.allowDocument && props.loading ? (
                        <Spinner
                            spinnerName="circle"
                            noFadeIn
                            overrideSpinnerClassName="spinner"
                        />
                    ) : null}
                    <Message msgId={'cadastrapp.demandeinformation.imprimer'}/>
                </Button>
                <Button
                    disabled={isCNIL ? !props.allowDocument : true}
                    onClick={()=>props.onPrintPDF(null, 'Document')}
                    className="print"
                >
                    {props.allowDocument && props.loading ? (
                        <Spinner
                            spinnerName="circle"
                            noFadeIn
                            overrideSpinnerClassName="spinner"
                        />
                    ) : null}
                    <Message msgId={'cadastrapp.demandeinformation.generate.document'}/>
                </Button>
            </Modal.Footer>
        </Modal>);
}