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.

55 lines
1.4 KiB

  1. import {useState} from 'react'
  2. import ButtonWithConfirm from "./ButtonWithConfirm";
  3. import {
  4. Row,
  5. Col,
  6. Input,
  7. InputGroup,
  8. InputGroupAddon,
  9. } from "reactstrap";
  10. import {useTranslation} from "react-i18next";
  11. import {
  12. sortableHandle
  13. } from "react-sortable-hoc";
  14. import HelpButton from "@components/form/HelpButton";
  15. const DragHandle = sortableHandle(({children}) => (
  16. <span className="input-group-text indexNumber">{children}</span>
  17. ));
  18. const CandidateField = ({label, candIndex, onDelete, ...inputProps}) => {
  19. const {t} = useTranslation();
  20. return (
  21. <Row>
  22. <Col>
  23. <InputGroup>
  24. <InputGroupAddon addonType="prepend">
  25. <DragHandle>
  26. <span>{candIndex + 1}</span>
  27. </DragHandle>
  28. </InputGroupAddon>
  29. <Input
  30. type="text"
  31. value={label}
  32. {...inputProps}
  33. placeholder={t("resource.candidatePlaceholder")}
  34. tabIndex={candIndex + 1}
  35. maxLength="250"
  36. autoFocus
  37. />
  38. <ButtonWithConfirm className="btn btn-primary border-light" label={label} onDelete={onDelete}>
  39. </ButtonWithConfirm>
  40. </InputGroup>
  41. </Col>
  42. <Col xs="auto" className="align-self-center pl-0">
  43. <HelpButton>
  44. {t(
  45. "Enter the name of your candidate or proposal here (250 characters max.)"
  46. )}
  47. </HelpButton>
  48. </Col>
  49. </Row>
  50. );
  51. }
  52. export default CandidateField