react-bootstrap#Radio JavaScript Examples

export function PlotInformationRadio({
    isCNIL1,
    isCNIL2,
    baseMaps = [],
    parcelle,
    selectedStyle = {},
    isShown,
    modalStyle
}) {
    const [baseMap, setBaseMap] = useState();
    const [personalData, setPersonalData] = useState("0");
    const [loading, setLoading] = useState(false);
    let className = isShown ? "" : "collapse";
    const hr = !modalStyle ? <hr/> : null;
    const {
        opacity,
        fillcolor,
        strokewidth,
        strokecolor
    } = toParams(selectedStyle);
    return (
        <div {...modalStyle && {style: modalStyle}} className={className}>
            {hr}
            <div
                style={{ width: modalStyle ? "100%" : "70%" }}
                className="pull-left">
                {isCNIL1 || isCNIL2 ? <FormGroup>
                    <b className={'cadastrapp-formgroup-label'}><Message msgId={"cadastrapp.bordereauparcellaire.data.title"}/>: </b>
                    <Radio inline checked={personalData === "0"} onChange={() => setPersonalData("0")} value="0">
                        <Message msgId={"cadastrapp.bordereauparcellaire.data.without"}/>
                    </Radio>
                    <Radio inline checked={personalData === "1"} onChange={() => setPersonalData("1")} value="1">
                        <Message msgId={"cadastrapp.bordereauparcellaire.data.with"}/>
                    </Radio>
                </FormGroup> : null}
                <FormGroup>
                    <b className={'cadastrapp-formgroup-label'}><Message msgId={"cadastrapp.bordereauparcellaire.basemap"}/>:</b>
                    <div style={{ "float": "left" }}>
                        <DropdownList style={{width: 300}} value={baseMap} defaultValue={baseMaps[0]} onSelect={v => setBaseMap(v)} textField="title" data={baseMaps} itemComponent={ListItem} />
                    </div>
                </FormGroup>
            </div>
            <div

                style={{ width: modalStyle ? "100%" : "30%" }}
                className="pull-left">
                <Button
                    disabled={loading}
                    onClick={() => {
                        const idx = baseMaps.indexOf(baseMap);
                        const baseMapIndex = idx >= 0 ? idx : 0;
                        setLoading(true);
                        createBordereauParcellaire({
                            fillcolor,
                            opacity,
                            strokecolor,
                            strokewidth,
                            parcelle,
                            ...((isCNIL1 || isCNIL2) && {personaldata: personalData}),
                            basemapindex: baseMapIndex
                        }).then((response) => {
                            setLoading(false);
                            downloadResponse(response);
                        }).catch(() => {
                            setLoading(false); // TODO: handle error
                        });
                    }}
                    className="pull-right">
                    {loading ? <Spinner spinnerName="circle" noFadeIn overrideSpinnerClassName="spinner" /> : null}
                    <Message msgId={"cadastrapp.bordereauparcellaire.export"}/>
                </Button>
            </div>
            {hr}
        </div>);
}

export default function PropertiesRadio({
    showParcelle = true,
    expanded,
    parcelle,
    data = [],
    selected = []
}) {

    let className = expanded ? "" : "collapse";
    const [useParcelle, setUseParcelle] = useState(showParcelle);
    const [format, setFormat] = useState('pdf');
    const [loading, setLoading] = useState(false);

    return (
        <div className={className}>
            <hr/>
            <div
                style={{ width: "70%" }}
                className="pull-left">
                {showParcelle ? <FormGroup>
                    <b style={{ "float": "left", width: 150, marginRight: 15 }}><Message msgId={"cadastrapp.relevepropriete.data"}/>: </b>
                    <Radio checked={useParcelle} value={"true"} onChange={() => setUseParcelle(true)} inline>
                        <Message msgId={"cadastrapp.relevepropriete.partial"}/>
                    </Radio>s
                    <Radio checked={!useParcelle} value={"false"} onChange={() => setUseParcelle(false)} inline>
                        <Message msgId={"cadastrapp.relevepropriete.full"}/>
                    </Radio>
                </FormGroup> : null}
                <FormGroup>
                    <b style={{ "float": "left", width: 150, marginRight: 15 }}><Message msgId={"cadastrapp.relevepropriete.type.title"}/>:</b>
                    <Radio checked={format === 'pdf'} value="pdf" onChange={() => setFormat("pdf")} inline>
                        <Message msgId={"cadastrapp.relevepropriete.type.pdf"}/>
                    </Radio>
                    <Radio checked={format === 'csv'} value="csv" onChange={() => setFormat("csv")} inline>
                        <Message msgId={"cadastrapp.relevepropriete.type.csv"}/>
                    </Radio>
                </FormGroup>
            </div>
            <div
                style={{ width: "30%" }}
                className="pull-left">
                <Button
                    disabled={selected.length === 0 || loading}
                    onClick={() => {
                        setLoading(true);
                        const handler = format === 'csv' ? createReleveProprieteAsCSV : createRelevePropriete;
                        handler({
                            parcelleId: useParcelle ? parcelle : undefined,
                            compteCommunal: data
                                .filter((_, i) => selected.includes(i))
                                .map(({ comptecommunal }) => comptecommunal)
                                .filter(function onlyUnique(value, index, self) {
                                    return self.indexOf(value) === index;
                                })
                                .join(',')
                        }).then((response) => {
                            setLoading(false);
                            downloadResponse(response);
                        }).catch(() => {
                            setLoading(false); // TODO: handle error
                        });
                    }}
                    className="pull-right">
                    {loading ? <Spinner spinnerName="circle" noFadeIn overrideSpinnerClassName="spinner" /> : null}
                    <Message msgId={"cadastrapp.relevepropriete.export"}/>
                </Button>
            </div>
            <hr/>
        </div>);
}

// select options to download full bundle
function BundleRadio({ show, dnubat, parcelle}) {
    let className = show ? "" : "collapse";
    const [format, setFormat] = useState('pdf');
    const [loading, setLoading] = useState(false);
    return (
        <div className={className}>
            <hr></hr>
            <div
                style={{ width: "70%" }}
                className="pull-left">
                <FormGroup>
                    <b style={{ "float": "left", width: 150, marginRight: 15 }}><Message msgId={'cadastrapp.lots.type.title'}/>:</b>
                    <Radio checked={format === 'pdf'} value="pdf" onChange={() => setFormat("pdf")} inline>
                        <Message msgId={'cadastrapp.lots.type.pdf'}/>
                    </Radio>
                    <Radio checked={format === 'csv'} value="csv" onChange={() => setFormat("csv")} inline>
                        <Message msgId={'cadastrapp.lots.type.csv'}/>
                    </Radio>
                </FormGroup>
            </div>
            <div
                style={{ width: "30%" }}
                className="pull-left">
                <Button
                    disabled={loading}
                    onClick={() => {
                        setLoading(true);
                        const handler = format === 'csv' ? exportLotsAsCSV : exportLotsAsPDF;
                        handler({
                            dnubat,
                            parcelle
                        }).then((response) => {
                            setLoading(false);
                            downloadResponse(response);
                        }).catch(() => {
                            setLoading(false); // TODO: handle error
                        });
                    }}
                    className="pull-right">
                    {loading ? <Spinner spinnerName="circle" noFadeIn overrideSpinnerClassName="spinner" /> : null}
                    Export
                </Button>
            </div>
            <hr></hr>
        </div>);
}

export default function BundleInformationModal({ show, parcelle, onClose }) {
    const [loading, setLoading] = useState(false);
    const [format, setFormat ] = useState("pdf");
    const [letters, setLetters] = useState([]);
    const [firstOpen, setFirstOpen] = useState(false);
    useEffect(() => {
        if (show && parcelle) {
            setFirstOpen(false);
            getBatimentsByParcelle({parcelle}).then(data => setLetters(data));
        }
    }, [show, parcelle]);
    const [letter, setLetter] = useState();
    useEffect(() => {
        if (letters.length > 0 && !firstOpen) {
            setFirstOpen(true);
            setLetter(letters[0].dnubat);
        }
    }, [letters]);
    return (<Modal
        style={{ maxHeight: "100%", overflowY: "auto", zIndex: 10000 }}
        dialogClassName="cadastrapp-modal"
        show={show}
        onHide={onClose}>
        <Modal.Header closeButton>
            <Modal.Title><Message msgId={'cadastrapp.lots.title'}/> { parcelle }</Modal.Title>
        </Modal.Header>
        <Modal.Body>
            <div><Message msgId={'cadastrapp.lots.batiments'}/></div>
            {letters.map(({ dnubat }) => <Button bsStyle={letter === dnubat ? "primary" : undefined} onClick={() => setLetter(dnubat)}>{dnubat}</Button>)}
        </Modal.Body>
        <FormGroup>
            <b style={{ "float": "left", width: 150, marginRight: 15 }}><Message msgId={'cadastrapp.lots.type.title'}/>:</b>
            <Radio checked={format === 'pdf'} value="pdf" onChange={() => setFormat("pdf")} inline>
                <Message msgId={'cadastrapp.lots.type.pdf'}/>
            </Radio>
            <Radio checked={format === 'csv'} value="csv" onChange={() => setFormat("csv")} inline>
                <Message msgId={'cadastrapp.lots.type.csv'}/>
            </Radio>
        </FormGroup>
        <Modal.Footer>
            <Button
                disabled={loading}
                bsStyle="primary"
                onClick={() => {
                    setLoading(true);
                    (format === "csv" ? exportLotsAsCSV({ parcelle, dnubat: letter }) : exportLotsAsPDF({ parcelle, dnubat: letter }))
                        .then(response => {
                            downloadResponse(response);
                            setLoading(false);
                        })
                        .catch(() => {
                            setLoading(false);
                        });
                }}
            >
                {loading ? <Spinner spinnerName="circle" noFadeIn overrideSpinnerClassName="spinner" /> : null} Export</Button>
        </Modal.Footer>
    </Modal>);
}

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>);
}