You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
56 lines
1.4 KiB
56 lines
1.4 KiB
3 years ago
|
import {useState} from 'react'
|
||
|
|
import ButtonWithConfirm from "./ButtonWithConfirm";
|
||
|
|
import {
|
||
|
|
Row,
|
||
|
|
Col,
|
||
|
|
Input,
|
||
|
|
InputGroup,
|
||
|
|
InputGroupAddon,
|
||
|
|
} from "reactstrap";
|
||
|
|
import {useTranslation} from "react-i18next";
|
||
|
|
import {
|
||
|
|
sortableHandle
|
||
|
|
} from "react-sortable-hoc";
|
||
|
|
import HelpButton from "@components/form/HelpButton";
|
||
|
|
|
||
|
|
const DragHandle = sortableHandle(({children}) => (
|
||
|
|
<span className="input-group-text indexNumber">{children}</span>
|
||
|
|
));
|
||
|
|
const CandidateField = ({label, candIndex, onDelete, ...inputProps}) => {
|
||
|
|
const {t} = useTranslation();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Row>
|
||
|
|
<Col>
|
||
|
|
<InputGroup>
|
||
|
|
<InputGroupAddon addonType="prepend">
|
||
|
|
<DragHandle>
|
||
|
|
<span>{candIndex + 1}</span>
|
||
|
|
</DragHandle>
|
||
|
|
</InputGroupAddon>
|
||
|
|
<Input
|
||
|
|
type="text"
|
||
|
|
value={label}
|
||
|
|
{...inputProps}
|
||
|
|
placeholder={t("resource.candidatePlaceholder")}
|
||
|
|
tabIndex={candIndex + 1}
|
||
|
|
maxLength="250"
|
||
|
|
autoFocus
|
||
|
|
/>
|
||
|
|
<ButtonWithConfirm className="btn btn-primary border-light" label={label} onDelete={onDelete}>
|
||
|
|
</ButtonWithConfirm>
|
||
|
|
</InputGroup>
|
||
|
|
</Col>
|
||
|
|
<Col xs="auto" className="align-self-center pl-0">
|
||
|
|
<HelpButton>
|
||
|
|
{t(
|
||
|
|
"Enter the name of your candidate or proposal here (250 characters max.)"
|
||
|
|
)}
|
||
|
|
</HelpButton>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default CandidateField
|