react-bootstrap#Glyphicon JavaScript Examples

function PlotSelectionTabActionButtons({onNewTab = () => {}, onTabDelete = () => {}}) {
    return (
        <ButtonGroup className="pull-right">
            <OverlayTrigger placement="bottom" overlay={<Tooltip><Message msgId={'cadastrapp.search.addTab'}/></Tooltip>}>
                <Button
                    className="pull-right"
                    onClick={onNewTab}
                ><span className="glyphicon glyphicon-plus"></span>
                </Button>
            </OverlayTrigger>
            <OverlayTrigger placement="bottom" overlay={<Tooltip><Message msgId={'cadastrapp.search.deleteTab'}/></Tooltip>}>
                <ConfirmButton
                    className="pull-right"
                    confirmContent={<Message msgId={'cadastrapp.search.confirmDeleteTab'}/>}
                    onClick={onTabDelete}>
                    <Glyphicon glyph="trash" />
                </ConfirmButton>
            </OverlayTrigger>
        </ButtonGroup>
    );
}

export default function({
    loading, valid, onClear = () => {}, onSearch = () => {}
}) {
    return (<ButtonGroup style={{ margin: "10px", "float": "right" }}>
        {loading ? <Spinner spinnerName="circle" noFadeIn overrideSpinnerClassName="spinner" /> : null}
        <Button
            onClick={onClear}
        ><Message msgId={'cadastrapp.search.clear'}/> </Button>
        <Button
            disabled={loading || !valid}
            bsStyle="primary"
            onClick={onSearch}
        ><Glyphicon glyph="search"/> <Message msgId={'cadastrapp.search.title'}/></Button>
    </ButtonGroup>);
}

export default function WelcomeMessage(props) {
    const { isShown, configuration: { dateValiditeEDIGEO = '', dateValiditeMajic = '' } = {}, data } = props;
    let className = isShown ? "welcome-message" : "collapse";
    if (data.length > 0) {
        className = "collapse";
    }


    return (
        <div className={className}>
            <div>
                <Glyphicon glyph="search-coords"
                    style={{
                        margin: "0px",
                        fontSize: "36px"
                    }}/>
                <h3 className="welcome-message-items"><Message msgId={'cadastrapp.title'}/></h3>
                <h4 className="welcome-message-items"><Message msgId={'cadastrapp.selectTool'}/></h4>
            </div>
            <table className="welcome-message-versions">
                <tr><td><Message msgId={'cadastrapp.dateValiditeEDIGEO'}/>: </td><td>{dateValiditeEDIGEO}</td></tr>
                <tr><td><Message msgId={'cadastrapp.dateValiditeMajic'}/>: </td><td>{dateValiditeMajic}</td></tr>
            </table>
            <div className="welcome-message-build">build &nbsp;
                {/* eslint-disable-next-line no-undef */}
                <a target="_blank" href={`${__REPOURL__?.replace('.git', '')}/commit/${__COMMITHASH__}`}>{__COMMITHASH__?.substr(0, 8)}</a>
            </div>
        </div>
    );
}

export function StrList({items = [], onAdd, onRemove, onSetValue}) {

    return (
        <>
            <div style={{ width: "100%", "float": "left" }}>

                <Button
                    onClick={() => onAdd()}
                    className="pull-left">
                    <Glyphicon glyph="plus"/>

                </Button>
                <span
                    style={{ marginLeft: 6, marginTop: 4 }}
                    className="pull-left"><Message msgId={'cadastrapp.proprietaire.proprietaires.addMoreProprietaire'}/>
                </span>
            </div>
            <div style={{ width: "100%", height: "calc(50vh - 290px)", minHeight: 96, "overflowY": "auto" }}>
                {items.map((v, index) => (
                    <div style={{ width: "100%", "float": "left" }}>
                        <FormControl
                            value={v}
                            className="pull-left"
                            style={{ width: 240, marginTop: 5, marginRight: 5 }}
                            onChange={e => onSetValue(index, e.target.value)}
                        />
                        <Button
                            style={{ marginTop: 5, marginRight: 5 }}
                            className="pull-right"
                            onClick={() => onRemove(index)}
                        >
                            <Glyphicon glyph="trash"/>
                        </Button>
                    </div>
                ))}
            </div>
        </>
    );
}

export default function Owners({ owners = [], parcelle}) {
    const [expanded, setExpanded] = useState(false);
    const togglePanel = () => {
        setExpanded(!expanded);
    };
    const [selected, setSelected] = useState([]);
    const onRowClick = r =>  {
        if (r?.rowIdx >= 0) { // prevent header click
            setSelected([r.rowIdx]);
        }
    };
    const onRowsSelected = (rows) => setSelected(selected.concat(rows.map(r => r.rowIdx)));
    const onRowsDeselected = (rows) => setSelected(selected.filter(i => rows.map(r => r.rowIdx).indexOf(i) === -1));
    const atLeastOneSelected = selected.length > 0;
    return (<>
        <div style={{ margin: 10 }}>
            <Button
                bsStyle={expanded ? "primary" : "default"}
                onClick={togglePanel}
                {...(!atLeastOneSelected ? { disabled: 'true' } : {})}>
                <Glyphicon style={{ marginRight: 4 }} glyph="1-pdf" />
                <Message msgId={"cadastrapp.duc.releve.depropriete"}/>
            </Button>
        </div>
        <PropertiesRadio parcelle={parcelle} expanded={expanded} data={owners} selected={selected} />
        <OwnersTable
            data={owners}
            selected={selected}
            onRowClick={onRowClick}
            onRowsSelected={onRowsSelected}
            onRowsDeselected={onRowsDeselected} />
    </>);

}

// 350238000AD0053 for a set of many coowners.
export default function CoOwners({parcelle}) {
    const [expanded, setExpanded] = useState(false);
    const togglePanel = () => {
        setExpanded(!expanded);
    };
    // handle table data.
    const [data, setData] = useState([]);
    const [selected, setSelected] = useState([]);
    const onRowsSelected = (rows) => setSelected(selected.concat(rows.map(r => r.rowIdx)));
    const onRowsDeselected = (rows) => setSelected(selected.filter(i => rows.map(r => r.rowIdx).indexOf(i) === -1));
    const atLeastOneSelected = selected.length > 0;
    return (<>
        <div style={{ margin: 10 }}>
            <Button
                bsStyle={expanded ? "primary" : "default"}
                onClick={togglePanel}
                {...(!atLeastOneSelected ? { disabled: 'true' } : {})}>
                <Glyphicon style={{ marginRight: 4 }} glyph="1-pdf" />
                <Message msgId={"cadastrapp.duc.releve.depropriete"} />
            </Button>
        </div>
        <PropertiesRadio parcelle={parcelle} expanded={expanded} data={data} selected={selected} />
        <CoOwnersTable
            data={data}
            setData={setData}
            setSelected={setSelected}
            loadData={({ start, limit }) => getCoProprietaire({start, limit, parcelle})}
            selected={selected}
            onRowsSelected={onRowsSelected}
            onRowsDeselected={onRowsDeselected} />
    </>);

}

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

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

export default function Plot({
    isCNIL1,
    isCNIL2,
    selectedStyle,
    parcelle,
    fiuc,
    onGeneratePlotInformation = () => {},
    baseMaps = []
}) {
    let [isPlotShown, setIsPlotShown] = useState(false);
    const handlePlotClick = () => {
        setIsPlotShown(!isPlotShown);
    };
    if (!fiuc) {
        return "Loading";
    }
    return (<>
        <div style={{ margin: 10 }}>
            <Button
                bsStyle={isPlotShown ? "primary" : "default"}
                onClick={handlePlotClick}>
                <Glyphicon style={{ marginRight: 4 }} glyph="1-pdf" />
                <Message msgId={"cadastrapp.bordereauparcellaire.title"}/>
            </Button>
        </div>
        <PlotInformationRadio isCNIL1={isCNIL1} isCNIL2={isCNIL2} parcelle={parcelle} isShown={isPlotShown} baseMaps={baseMaps} onGeneratePlotInformation={onGeneratePlotInformation} selectedStyle={selectedStyle}/>
        <Table condensed>
            <thead>
                <tr>
                    <th><Message msgId={'cadastrapp.ficu.description'}/></th>
                    <th><Message msgId={'cadastrapp.ficu.value'}/></th>
                </tr>
            </thead>
            <tbody>
                <tr><td><Message msgId={'cadastrapp.ficu.commune'}/></td><td>{ fiuc.libcom + ' (' + fiuc.cgocommune + ')' }</td></tr>
                <tr><td><Message msgId={'cadastrapp.ficu.section'}/></td><td>{ fiuc.ccopre + fiuc.ccosec }</td></tr>
                <tr><td><Message msgId={'cadastrapp.ficu.parcelle'}/></td><td>{ fiuc.dnupla }</td></tr>
                <tr><td><Message msgId={'cadastrapp.ficu.voie'}/></td><td>{ fiuc.ccoriv }</td></tr>
                <tr><td><Message msgId={'cadastrapp.ficu.adresse'} /></td><td>{fiuc.dnvoiri + fiuc.dindic + " " + fiuc.cconvo + " " + fiuc.dvoilib}</td></tr>
                <tr><td><Message msgId={'cadastrapp.ficu.contenancedgfip'}/></td><td>{ fiuc?.dcntpa?.toLocaleString()}</td></tr>
                <tr><td><Message msgId={'cadastrapp.ficu.contenancesig'}/></td><td>{ fiuc?.surfc?.toLocaleString()}</td></tr>
                <tr><td><Message msgId={'cadastrapp.ficu.batie'}/></td><td><Message msgId={fiuc.gparbat === '1' ? 'cadastrapp.ficu.yes' : 'cadastrapp.ficu.no'} /></td></tr>
                <tr><td><Message msgId={'cadastrapp.ficu.urbain'}/></td><td><Message msgId={fiuc.gurbpa === 'U' ? 'cadastrapp.ficu.yes' : 'cadastrapp.ficu.no'} /></td></tr>
            </tbody>
        </Table>
    </>);
}

export default function BuildingsButtons({
    setShowDescription = () => {},
    selected = [],
    data = [],
    dnubat,
    parcelle

}) {
    let [propertiesSelected, setPropertiesSelected] = useState(false);
    let [bundleSelected, setBundleSelected] = useState(false);

    const onPropertiesClick = () => {
        setBundleSelected(false);
        setPropertiesSelected(!propertiesSelected);
    };

    const onBundleClick = () => {
        setPropertiesSelected(false);
        setBundleSelected(!bundleSelected);
    };
    // auto close panel if no row has been selected
    useEffect(() => {
        if (selected.length === 0) {
            setPropertiesSelected(false);
        }
    }, [selected]);

    return (<>
        <ButtonGroup className="pull-right">
            <OverlayTrigger placement="bottom" overlay={<Tooltip><Message msgId={'cadastrapp.duc.releve.depropriete'}/></Tooltip>}>
                <Button
                    disabled={selected.length === 0}
                    bsStyle={propertiesSelected ? "primary" : "default"}
                    onClick={onPropertiesClick}>
                    <Glyphicon glyph="th-list" />
                </Button>
            </OverlayTrigger>
            <OverlayTrigger placement="bottom" overlay={<Tooltip><Message msgId={'cadastrapp.duc.batiment_descriptif'}/></Tooltip>}>
                <Button
                    onClick={() => setShowDescription(true)}
                    disabled={selected.length === 0}>
                    <Glyphicon glyph="info-sign" />
                </Button>
            </OverlayTrigger>
            <OverlayTrigger placement="bottom" overlay={<Tooltip><Message msgId={'cadastrapp.duc.batiment_bundle'}/></Tooltip>}>
                <Button
                    bsStyle={bundleSelected ? "primary" : "default"}
                    onClick={onBundleClick}>
                    <Glyphicon glyph="compressed" /></Button>
            </OverlayTrigger>
        </ButtonGroup>
        <PropertiesRadio parcelle={parcelle} expanded={propertiesSelected} data={data} selected={selected} />
        <BundleRadio
            dnubat={dnubat}
            parcelle={parcelle}
            show={bundleSelected} />
    </>);
}

export default function ReferencesList({ references = [], cgocommune, onAddReference, onRemoveReference, onSetValue }) {

    const [sections, setSections] = useState();
    useEffect(() => {
        if (cgocommune) {
            getSection(cgocommune).then(results => {
                setSections(results);
                onAddReference({}); // when commune is selected, first line of references is added by default
            });
        }
    }, [cgocommune]);
    const validReferences = validateReferences(references);
    return (
        <>
            <div style={{ width: "100%", "float": "left" }}>
                <Button
                    disabled={
                        !sections
                        || !cgocommune
                        || sections
                            && cgocommune
                            && references.length > 0
                        && !validReferences
                    }
                    onClick={() => onAddReference({})}
                    className="pull-left">
                    <Glyphicon glyph="plus"/>

                </Button>
                <span
                    style={{ marginLeft: 6, marginTop: 4 }}
                    className="pull-left"><Message msgId={'cadastrapp.parcelle.addMoreReference'}/></span>
            </div>
            <div style={{ width: "100%", height: "calc(50vh - 290px)", minHeight: 96, "overflowY": "visible" }}>
                {
                    sections && references.map((row, index) => {
                        return (<ReferenceRow
                            row={row}
                            sections={sections}
                            onRemove={() => onRemoveReference(index)}
                            onSetValue={(column, value) => onSetValue(index, column, value)} />);
                    })
                }
            </div>
        </>
    );
}

export default function PreferencesDialog({
    isShown,
    onClose,
    setLayerStyles = () => {},
    updateLayerStyle = () => {},
    styles = {
        selected: {},
        "default": {}
    },
    configStyles = {}
}) {
    const setDefaultStyles = () => {
        setLayerStyles(isEmpty(configStyles) ? LAYER_STYLES : configStyles);
    };

    useEffect(()=>{
        const isStateStylesEmpty = isEmpty(styles) || (isEmpty(styles.selected) && isEmpty(styles.default));
        isStateStylesEmpty && setDefaultStyles(); // Retain state styles (if any)
    }, [setLayerStyles]);

    if (!isShown) {
        return null;
    }

    return (
        <Portal container={document.querySelector('#container #viewer') || document.body}><Dialog
            className="cadastrapp-preferences-dialog"
            show={isShown} >
            <span role="header"><span><Message msgId={'cadastrapp.preferences.title'}/></span><button style={{ background: 'transparent', border: 'none', "float": "right" }}><Glyphicon glyph="1-close" onClick={() => onClose()} style={{  }} /></button></span>
            <div role="body" style={{height: 200}}>
                <Tabs defaultActiveKey={1} >
                    <Tab eventKey={1} title={<Message msgId={'cadastrapp.preferences.default'}/>}>
                        <StyleEditor
                            style={styles.default}
                            updateLayerStyle={( ...args ) => updateLayerStyle('default', ...args)} />
                    </Tab>
                    <Tab eventKey={2} title={<Message msgId={'cadastrapp.preferences.selected'}/>}>
                        <StyleEditor
                            style={styles.selected}
                            updateLayerStyle={(...args) => updateLayerStyle('selected', ...args)} />

                    </Tab>

                </Tabs>
            </div>
            <div role="footer">
                <Button onClick={setDefaultStyles}><Message msgId={'cadastrapp.preferences.defaultStyle'}/></Button>
                <Button onClick={() => { onClose(); }}><Message msgId={'cadastrapp.preferences.close'}/></Button>
            </div>
        </Dialog></Portal>
    );
}

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

/**
 * RequestObject component
 * @param {object} props Component props
 * @param {number} props.availableRequest contains number of available request allow for the user
 * @param {function} props.setAvailableRequest triggered when adding or deleting a request object
 */
export default function RequestObject({availableRequest = 0, setAvailableRequest = () => {}, ...props}) {
    let randomId = uuid();
    let item = {};
    if (availableRequest > 0) {
        item[randomId] = "";
    }
    let [requestObjects, setRequestObjects] = useState(item);

    useEffect(() => {
        setAvailableRequest(availableRequest - Object.keys(requestObjects).length);
    }, [setAvailableRequest]);

    let handleAdd = () => {
        let r = { ...requestObjects };
        let id = uuid();
        r[id] = "";
        setRequestObjects(r);
        setAvailableRequest(availableRequest - 1);
    };

    let handleChange = (id, value) => {
        let r = { ...requestObjects };
        r[id] = value;
        setRequestObjects(r);
    };

    let handleDelete = (id) => {
        let r = { ...requestObjects };
        delete r[id];
        setRequestObjects(r);
        setAvailableRequest(availableRequest + 1);
    };

    return (
        <div>
            <div className="pull-left" style={{ width: "100%", marginBottom: 10 }}>
                <Button disabled={availableRequest <= 0} className="pull-right" onClick={handleAdd} style={{ marginRight: 4 }}>
                    <Glyphicon glyph="plus"/>
                </Button>
                <small style={{ marginTop: 5, marginRight: 10, ...(availableRequest <= 0 && {color: "red"}) }} className="pull-right">
                    <Message msgId={availableRequest <= 0 ? 'cadastrapp.demandeinformation.exceded.maxNumber' : 'cadastrapp.demandeinformation.addMore'}/>
                </small>
            </div>
            <div>
                {Object.keys(requestObjects).map((v, index) => (
                    <RequestObjectItem
                        key={index}
                        dataId={v}
                        value={requestObjects[v]}
                        onChange={handleChange}
                        onDelete={handleDelete}
                        {...props}
                    />
                ))}
            </div>
        </div>
    );
}

/**
 * Row element for Reference(s) list in Reference plot search.
 * @prop {object} row the content. is an object of two "columns". "section" and "plot".
 * @prop {object[]} sections sections to show in the section selector combo box.
 * @prop {function} setValue handler to set the value for the current row. 2 arguments. (column, value); column should be "section" or "plot". Value is the object selected.
 * @prop {function} onRemove handler to remove the current row.
 * @prop {boolean} hideRemove flag to hide the remove button
 * @prop {object} containerStyle additional style props for the container (if any)
 * @prop {object} fieldStyle style props to override field styles
 */
export default function ReferenceRow({
    row = {},
    sections,
    onSetValue = () => { },
    onRemove,
    hideRemove = false,
    containerStyle = {},
    fieldStyle = {width: 120, marginTop: 5, marginRight: 5},
    dropUp = false
}) {
    const [plots, setPlots] = useState();
    const [busy, setBusy] = useState();
    const [openPlot, setOpenPlot] = useState(false);
    const {section, plot} = row;
    useEffect(() => {
        if (section) {
            setBusy(true);
            const { ccopre, ccosec, cgocommune  } = section;
            getDnuplaList({ ccopre, ccosec, cgocommune }).then(values => {
                setPlots(values);
                setBusy(false);
                setOpenPlot(true);
                onSetValue('plot', undefined);
            });
        }
    }, [section]);
    return (<div style={{ width: "100%", "float": "left", display: "flex", ...containerStyle }}>
        <DropdownList
            dropUp={dropUp}
            defaultOpen
            disabled={isEmpty(sections)}
            style={fieldStyle}
            textField="ccosec"
            placeholder={'cadastrapp.parcelle.result.ccosec'}
            value={section}
            onChange={() => { }}
            onSelect={newSection => {
                onSetValue('section', newSection);
            }}
            filter="contains"
            data={sections.map(({ ccosec, ...rest}) => ({
                ccosec,
                ...rest,
                label: "" + ccosec
            }))}
        />
        <DropdownList
            dropUp={dropUp}
            onToggle={(v) => setOpenPlot(v)}
            open={openPlot}
            busy={busy}
            disabled={!plots}
            style={fieldStyle}
            value={plot}
            placeholder={'cadastrapp.parcelle.libcom'}
            textField="dnupla"
            filter="contains"
            onSelect={v => {
                onSetValue('plot', v);
            }}
            data={plots}
        />
        {!hideRemove && <Button
            style={{marginTop: 3, marginRight: 3}}
            className="pull-right"
            onClick={onRemove}
        >
            <Glyphicon glyph="trash"/>
        </Button>
        }
    </div>);
}

/* eslint-disable camelcase */

export default function OwnersModal({
    loading,
    show,
    onSearch = () => {},
    owners = [],
    onClose
}) {
    const [downloading, setDownloading] = useState(false);
    const [selected, setSelected] = useState([]);
    const [expanded, setExpanded] = useState(false);
    const oneSelected = selected.length === 1;
    const onRowClick = (i) => {
        if (i >= 0 ) { // prevent header click to toggle invalid selection
            setSelected(selected.length === 1 && selected[0] === i ? [] : [i]); // toggle row selection
        }
    };
    const onRowsSelected = (rows) => setSelected(selected.concat(rows.map(r => r.rowIdx)));
    const onRowsDeselected = (rows) => setSelected(selected.filter(i => rows.map(r => r.rowIdx).indexOf(i) === -1));
    return (<Modal
        className="cadastrapp-owners-modal"
        style={{ maxHeight: "100%", overflowY: "auto", zIndex: 10000 }}
        show={show}
        onHide={onClose}>
        <Modal.Header closeButton>
            <Modal.Title><Message msgId={'cadastrapp.result.owner.title'}/></Modal.Title>
        </Modal.Header>
        <Modal.Body style={{ maxHeight: 700, overflow: "auto" }} >
            <div style={{ margin: 10 }}>
                <Button
                    disabled={loading || !oneSelected}
                    bsStyle={expanded ? "primary" : undefined}
                    onClick={() => {
                        setExpanded(!expanded);
                    }}
                >
                    <Glyphicon style={{ marginRight: 4 }} glyph="1-pdf" />
                    <Message msgId={'cadastrapp.result.owner.rp'}/>
                </Button>
                <PropertiesRadio showParcelle={false} expanded={expanded} data={owners} selected={selected} />
            </div>
            <OwnersListTable
                onRowClick={onRowClick}
                onRowsSelected={onRowsSelected}
                onRowsDeselected={onRowsDeselected}
                data={owners}
                selected={selected} />
        </Modal.Body>
        <Modal.Footer>
            <Button
                disabled={loading || !oneSelected}
                bsStyle="primary"
                onClick={() => {
                    onClose();
                    onSearch(SEARCH_TYPES.COMPTE_COMMUNAL, owners[selected[0]]);

                }}
            >
                <Message msgId={'cadastrapp.result.owner.show.parcelle'}/>
            </Button>
            <Button
                disabled={loading || downloading}
                bsStyle="primary"
                onClick={() => {
                    const titles = ["Owner id", "Full name information"]; // TODO: localize
                    const dataJson = oneSelected ? [owners[selected[0]]] : owners;
                    const rows = dataJson.map(({ comptecommunal, app_nom_usage }) => ([comptecommunal, app_nom_usage]));
                    setDownloading(true);
                    exportAsCsv({ data: [titles, rows[0]]})
                        .then(response => {
                            setDownloading(false);
                            if (oneSelected) {
                                downloadResponse(response, {});
                            } else {
                                // in case all list have to be downloaded,
                                // recreate the data to download
                                const separator = response.data[response.data.indexOf(titles[1]) - 1];
                                const data = [titles.join(separator), ...(rows.map(row => row.join(separator)))].join("\n");
                                downloadResponse({
                                    ...response,
                                    data
                                });
                            }

                        }).catch(() => {
                            setDownloading(false); // TODO: notify error.
                        });
                }}
            >
                {oneSelected
                    ? <Message msgId={'cadastrapp.selection.proprietaires.export.row'}/>
                    : <Message msgId={'cadastrapp.selection.proprietaires.export.list'}/>
                }
            </Button>
        </Modal.Footer>
    </Modal>);
}

export default function PlotSelectionToolbar({
    foncier,
    authLevel = {},
    currentData = [],
    loadInfo = () => {},
    onSaveAsAnnotation = () => {},
    zoomToSelection = () => {},
    removePlots = () => {},
    showLandedPropertyInformationByParcelle = () => {},
    selectedPlots = []
}) {
    const atLeastOneSelected = selectedPlots.length > 0;
    const onlyOneSelected = selectedPlots.length === 1;
    const isDataPresent = currentData.length > 0;
    const { isCNIL1, isCNIL2 } = authLevel;
    const [showBundleInformation, setShowBundleInformation] = useState(false);
    const [exportPlotModal, setExportPlotModal] = useState(false);
    return (
        <>
            <Toolbar
                btnGroupProps={{className: "pull-right"}}
                btnDefaultProps={{
                    tooltipPosition: 'bottom'
                }}
                buttons={[{
                    disabled: !isDataPresent,
                    glyph: "zoom-in",
                    tooltipId: atLeastOneSelected ? "cadastrapp.result.parcelle.zoom.selection" : "cadastrapp.result.parcelle.zoom.list",
                    onClick: zoomToSelection
                }, ...(foncier
                    ? [{
                        disabled: !onlyOneSelected,
                        glyph: "th-list",
                        tooltipId: "cadastrapp.result.parcelle.uf",
                        onClick: () => { showLandedPropertyInformationByParcelle(find(currentData, {parcelle: selectedPlots[0]})); }
                    }]
                    : []), {
                    disabled: !atLeastOneSelected,
                    glyph: "trash",
                    tooltipId: "cadastrapp.result.parcelle.delete",
                    onClick: () => { removePlots(selectedPlots); }
                }, {
                    disabled: !atLeastOneSelected,
                    glyph: "info-sign",
                    tooltipId: "cadastrapp.result.parcelle.fiche",
                    onClick: () => { loadInfo(selectedPlots);}
                }, {
                    disabled: !isDataPresent,
                    glyph: "comment",
                    tooltipId: "cadastrapp.result.parcelle.saveAsAnnotation",
                    onClick: () => { onSaveAsAnnotation(selectedPlots);}
                }, ((isCNIL1 || isCNIL2) ? {
                    renderButton:
                        (<DropdownButton
                            disabled={!atLeastOneSelected}
                            pullRight title={< Glyphicon glyph="export" />}>
                            <MenuItem onClick={() => exportParcellesAsCSV({ parcelles: selectedPlots }).then(downloadResponse)}>
                                <Message msgId={"cadastrapp.result.csv.button.parcelles"} />
                            </MenuItem>
                            <MenuItem onClick={() => exportProprietaireByParcelles({ parcelles: selectedPlots }).then(downloadResponse)}>
                                <Message msgId={"cadastrapp.result.csv.button.owner"} />
                            </MenuItem>
                            <MenuItem onClick={() => exportCoProprietaireByParcelles({ parcelles: selectedPlots }).then(downloadResponse)}>
                                <Message msgId={"cadastrapp.result.csv.button.coowner"} />
                            </MenuItem>
                            <MenuItem disabled={!onlyOneSelected} onClick={() => {
                                // prevent click event when disabled
                                if (onlyOneSelected) {
                                    setShowBundleInformation(true);
                                }
                            }}><Message msgId={"cadastrapp.result.csv.button.bundle"} /></MenuItem>
                            <MenuItem onClick={() => setExportPlotModal(true)}>
                                <Message msgId={"cadastrapp.result.pdf.export"} /></MenuItem>
                        </DropdownButton>)
                } : {
                    renderButton: (
                        <DropdownButton
                            disabled={!isDataPresent || !atLeastOneSelected}
                            pullRight title={< Glyphicon glyph="export" />}>
                            <MenuItem
                                onClick={() => exportParcellesAsCSV({ parcelles: selectedPlots }).then(downloadResponse)}>
                                <Message msgId={"cadastrapp.result.csv.export"} />
                            </MenuItem>
                            <MenuItem onClick={() => setExportPlotModal(true)}>
                                <Message msgId={"cadastrapp.result.pdf.export"} /></MenuItem>
                        </DropdownButton>
                    )
                })
                ]}
            />
            <BundleInformationModal show={showBundleInformation} onClose={() => setShowBundleInformation(false)} parcelle={selectedPlots[0]} />
            <ExportPlotsAsPDFModal show={exportPlotModal} onClose={()=> setExportPlotModal(false) }
                parcelle={selectedPlots} isCNIL1={isCNIL1} isCNIL2={isCNIL2}/>
        </>);
}

/**
 * RequestObjectItem component
 * @param {object} props Component props
 * @param {function} props.setRequestFormData triggered when adding or updating request object's data
 * @param {object} props.requestFormData contains request form data
 * @param {id} props.dataId key/index of the request object
 * @param {string} props.value contains current request option value
 * @param {function} props.onDelete triggered when adding or deleting a request object
 * @param {function} props.onChange triggered when changing a request object
 * @param {function} props.setInValidField triggered when changing mandatory fields values
 * @param {bool} props.allow boolean variable to show restricted options
 */
export default function RequestObjectItem({
    setRequestFormData = () => {},
    requestFormData = {},
    dataId,
    value,
    onDelete = () => {},
    onChange = () => {},
    setInValidField = () => {},
    allow = false
}) {
    const requestOptions = [
        { value: 'owner-id', label: 'cadastrapp.demandeinformation.object.type.1' },
        { value: 'plot', label: 'cadastrapp.demandeinformation.object.type.2' },
        { value: 'co-owners', label: 'cadastrapp.demandeinformation.object.type.3' },
        { value: 'plot-id', label: 'cadastrapp.demandeinformation.object.type.5' },
        { value: 'owner', label: 'cadastrapp.demandeinformation.object.type.4', style: {display: allow ? 'block' : 'none'} },
        { value: 'owner-birth-name', label: 'cadastrapp.demandeinformation.object.type.7', style: {display: allow ? 'block' : 'none'} },
        { value: 'lot-co-owners', label: 'cadastrapp.demandeinformation.object.type.6', style: {display: allow ? 'block' : 'none'} }
    ];

    const [fieldName, setFieldName] = useState('');
    const [mandatoryFields, setMandatoryFields] = useState(0);

    const handleOnChange = ({target}) => {
        const {name, value: data} = target || {};
        setRequestFormData({...requestFormData, [fieldName]: {
            ...requestFormData[fieldName],
            [dataId]: {
                ...requestFormData[fieldName][dataId],
                ...(includes(['propStatement', 'parcelSlip'], name)
                    ? {[name]: target.checked}
                    : {[name]: data})
            }}
        });
    };

    const handleSelectChange = (name, v) => {
        let result;
        if (name === "commune" && isEmpty(v)) {
            result = { [dataId]: {} };
            setRequestFormData({...requestFormData,
                [fieldName]: { ...requestFormData[fieldName] }});
        } else {
            result = {
                [dataId]: {
                    ...requestFormData[fieldName][dataId],
                    [name]: {...v}
                }
            };
        }
        setRequestFormData({...requestFormData,
            [fieldName]: { ...requestFormData[fieldName], ...result}});
    };

    useEffect(()=>{
        const data = requestFormData?.[fieldName]?.[dataId] || [];
        const fieldEquality = Object.keys(data).filter(k => !isEmpty(data[k]) && !includes(['propStatement', 'parcelSlip'], k));
        const booleanFields = Object.keys(data).filter(k => data[k] === true);
        // Mandatory field validation
        let inValid = true;
        if (!isEmpty(data) && !isEmpty(mandatoryFields)) {
            if (isEqual(fieldEquality.sort(), mandatoryFields.sort())) {
                if (booleanFields.length > 0) {
                    inValid = false;
                }
            }
        }
        setInValidField(inValid);
    }, [requestFormData]);

    function ownerId() {
        return (
            <div>
                <FormControl
                    className="pull-left"
                    placeholder={"cadastrapp.demandeinformation.idCompteCom"}
                    name="accountId"
                    value={requestFormData?.[fieldName]?.[dataId]?.accountId || ''}
                    style={{ height: 34, width: 248, margin: 4 }}
                    onChange={handleOnChange}
                />
            </div>
        );
    }

    const plot = () => {
        return (
            <div>
                <div style={{display: 'flex', "float": "left", margin: 4}}>
                    <MunicipalityCombo
                        dropUp
                        placeholder={'cadastrapp.commune'}
                        additionalStyle={{width: 300, marginRight: 4}} value={requestFormData?.[fieldName]?.[dataId]?.commune?.label}
                        onSelect={v =>handleSelectChange("commune", v)}
                    />
                    <SectionCombo
                        cgocommune={requestFormData?.[fieldName]?.[dataId]?.commune?.cgocommune}
                        value={{section: requestFormData?.[fieldName]?.[dataId]?.section,
                            plot: isEmpty(requestFormData?.[fieldName]?.[dataId]?.plot) ? null : requestFormData?.[fieldName]?.[dataId]?.plot}}
                        onSelect={(c, v) =>handleSelectChange(c, v)}
                    />
                </div>
            </div>
        );
    };

    const coOwners = () => {
        return (
            <div style={{ width: "300" }}>
                <FormControl
                    placeholder={'cadastrapp.demandeinformation.idCompteCom'}
                    name="accountId"
                    value={requestFormData?.[fieldName]?.[dataId]?.accountId || ''}
                    className={cs("pull-left", "request-obj-double")}
                    onChange={handleOnChange}
                />
                <FormControl
                    placeholder={'cadastrapp.demandeinformation.idParcelle'}
                    name={"plotId"}
                    value={requestFormData?.[fieldName]?.[dataId]?.plotId || ''}
                    className={cs("pull-left", "request-obj-double")}
                    onChange={handleOnChange}
                />
            </div>
        );
    };

    const plotId = () => {
        return (
            <div>
                <FormControl
                    placeholder={'cadastrapp.demandeinformation.idCompteCom'}
                    name="accountId"
                    value={requestFormData?.[fieldName]?.[dataId]?.accountId || ''}
                    className={cs("pull-left", "request-obj-double")}
                    onChange={handleOnChange}
                />
            </div>
        );
    };

    const owner = () => {
        return (
            <div key="owner">
                <div style={{display: 'flex', "float": "left", margin: 4}}>
                    <MunicipalityCombo
                        dropUp
                        placeholder={'cadastrapp.commune'}
                        additionalStyle={{width: 300, marginRight: 4}}
                        value={requestFormData?.[fieldName]?.[dataId]?.commune?.label}
                        onSelect={v =>handleSelectChange("commune", v)}
                    />
                    <ProprietaireCombo
                        dropUp
                        placeholder={'cadastrapp.demandeinformation.proprietaire'}
                        disabled={isEmpty(requestFormData?.[fieldName]?.[dataId]?.commune)}
                        birthsearch={false}
                        cgocommune={requestFormData?.[fieldName]?.[dataId]?.commune?.cgocommune}
                        additionalStyle={{width: 300, marginRight: 4}}
                        value={requestFormData?.[fieldName]?.[dataId]?.proprietaire?.value}
                        onSelect={v =>handleSelectChange("proprietaire", v)}
                    />
                </div>
            </div>
        );
    };

    const cadastrappDemandei = () => {
        return (
            <div>
                <div style={{display: 'flex', "float": "left", margin: 4}}>
                    <MunicipalityCombo
                        dropUp
                        placeholder={'cadastrapp.commune'}
                        additionalStyle={{width: 300, marginRight: 4}}
                        value={requestFormData?.[fieldName]?.[dataId]?.commune?.label}
                        onSelect={v =>handleSelectChange("commune", v)}
                    />
                    <ProprietaireCombo
                        dropUp
                        placeholder={'cadastrapp.demandeinformation.proprietaire'}
                        disabled={isEmpty(requestFormData?.[fieldName]?.[dataId]?.commune)}
                        birthsearch
                        cgocommune={requestFormData?.[fieldName]?.[dataId]?.commune?.cgocommune}
                        additionalStyle={{width: 300, marginRight: 4}}
                        value={requestFormData?.[fieldName]?.[dataId]?.proprietaire?.value }
                        onSelect={v =>handleSelectChange("proprietaire", v)}
                    />
                </div>
            </div>
        );
    };

    const lotCoOwners = () => {
        return (
            <div>
                <div style={{display: 'flex', margin: 4}}>
                    <MunicipalityCombo
                        dropUp
                        placeholder={'cadastrapp.commune'}
                        additionalStyle={{marginRight: 4}}
                        value={requestFormData?.[fieldName]?.[dataId]?.commune?.label}
                        onSelect={v =>handleSelectChange("commune", v)}
                    />
                    <SectionCombo
                        cgocommune={requestFormData?.[fieldName]?.[dataId]?.commune?.cgocommune}
                        value={{section: requestFormData?.[fieldName]?.[dataId]?.section,
                            plot: isEmpty(requestFormData?.[fieldName]?.[dataId]?.plot) ? null : requestFormData?.[fieldName]?.[dataId]?.plot}}
                        onSelect={(c, v) =>handleSelectChange(c, v)}/>

                    <ProprietaireComboList
                        placeholder={'cadastrapp.demandeinformation.proprietaire'}
                        disabled={isEmpty(requestFormData?.[fieldName]?.[dataId]?.plot)}
                        section={requestFormData?.[fieldName]?.[dataId]?.section?.ccosec}
                        numero={requestFormData?.[fieldName]?.[dataId]?.section?.plot?.dnupla}
                        commune={requestFormData?.[fieldName]?.[dataId]?.commune?.cgocommune}
                        onSelect={v =>handleSelectChange("proprietaire", v)}
                    />
                </div>
            </div>
        );
    };

    const inputTemplate = () => <div/>;
    const [compRender, setCompRender] = useState(inputTemplate);

    useEffect(()=>{
        switch (value) {
        case "owner-id":
            setFieldName("comptecommunaux");
            setMandatoryFields(["accountId"]);
            setCompRender(ownerId);
            break;
        case "plot":
            setFieldName("parcelles");
            setMandatoryFields(["commune", "section", "plot"]);
            setCompRender(plot);
            break;
        case "co-owners":
            setFieldName("coproprietes");
            setMandatoryFields(["accountId", "plotId"]);
            setCompRender(coOwners);
            break;
        case "plot-id":
            setFieldName("parcelleIds");
            setMandatoryFields(["accountId"]);
            setCompRender(plotId);
            break;
        case "owner":
            setFieldName("proprietaires");
            setMandatoryFields(["commune", "proprietaire"]);
            setCompRender(owner);
            break;
        case "owner-birth-name":
            setFieldName("proprietaires");
            setMandatoryFields(["commune", "proprietaire"]);
            setCompRender(cadastrappDemandei);
            break;
        case "lot-co-owners":
            setFieldName("proprietaireLots");
            setMandatoryFields(["commune", "section", "numero", "proprietaire"]);
            setCompRender(lotCoOwners);
            break;
        default: break;
        }
    }, [value, requestFormData, fieldName, allow, dataId]);

    let handleDelete = () => {
        onDelete(dataId);
        delete requestFormData?.[fieldName]?.[dataId];
        setRequestFormData({...requestFormData});
    };

    const handleChange = (item) => {
        onChange(dataId, item.value);
    };

    return (
        <div className="pull-left" style={{ width: "100%" }}>
            <div className={"request-obj-triple"}>
                <RequestSelect
                    className={"drop-up"}
                    options={requestOptions}
                    value={value}
                    onChange={handleChange}
                />
            </div>
            {compRender}
            <Button className="pull-right" onClick={handleDelete} style={{ margin: 4 }}>
                <Glyphicon glyph="trash"/>
            </Button>
            {!isEmpty(fieldName) && <RequestItemsCheckboxes
                handleOnChange={handleOnChange}
                requestFormData={requestFormData?.[fieldName]?.[dataId] || {}}
            />}
        </div>
    );
}