react-bootstrap#ControlLabel JavaScript Examples
The following examples show how to use
react-bootstrap#ControlLabel.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Profile.js From React-Messenger-App with MIT License | 6 votes |
|
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>
);
}
Example #2
| Source File: FieldGroup.js From aws-workshop-colony with Apache License 2.0 | 6 votes |
|
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>
);
}
Example #3
| Source File: SelectFieldGroup.js From aws-workshop-colony with Apache License 2.0 | 6 votes |
|
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>
);
}
Example #4
| Source File: OwnerLot.jsx From mapstore2-cadastrapp with GNU General Public License v3.0 | 6 votes |
|
/**
* 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>);
}
Example #5
| Source File: ContentUpgradeLayout.js From Edlib with GNU General Public License v3.0 | 5 votes |
|
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>
);
}
Example #6
| Source File: Address.jsx From mapstore2-cadastrapp with GNU General Public License v3.0 | 5 votes |
|
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>
</>);
}
Example #7
| Source File: Lot.jsx From mapstore2-cadastrapp with GNU General Public License v3.0 | 5 votes |
|
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>
</>);
}
Example #8
| Source File: OwnerId.jsx From mapstore2-cadastrapp with GNU General Public License v3.0 | 5 votes |
|
/**
* 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>
</>);
}
Example #9
| Source File: User.jsx From mapstore2-cadastrapp with GNU General Public License v3.0 | 5 votes |
|
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>
</>);
}
Example #10
| Source File: CoownershipSearch.jsx From mapstore2-cadastrapp with GNU General Public License v3.0 | 5 votes |
|
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>
);
}
Example #11
| Source File: LicenseChooser.js From Edlib with GNU General Public License v3.0 | 4 votes |
|
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>
);
}
Example #12
| Source File: Request.jsx From mapstore2-cadastrapp with GNU General Public License v3.0 | 4 votes |
|
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>);
}
