import React from 'react'; import { Button, FormControl, Glyphicon } from "react-bootstrap"; import Message from '@mapstore/components/I18N/Message'; 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> </> ); }