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.

57 lines
1.3 KiB

  1. /* eslint react/prop-types: 0 */
  2. import React from "react";
  3. import { Button } from "reactstrap";
  4. import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
  5. const CopyField = props => {
  6. const ref = React.createRef();
  7. const handleClickOnField = event => {
  8. event.target.focus();
  9. event.target.select();
  10. };
  11. const handleClickOnButton = () => {
  12. const input = ref.current;
  13. input.focus();
  14. input.select();
  15. document.execCommand("copy");
  16. };
  17. const { t, value, iconCopy } = props;
  18. return (
  19. <div className="input-group ">
  20. <input
  21. type="text"
  22. className="form-control"
  23. ref={ref}
  24. value={value}
  25. readOnly
  26. onClick={handleClickOnField}
  27. />
  28. <div className="input-group-append">
  29. <Button
  30. className="btn btn-secondary"
  31. onClick={handleClickOnButton}
  32. type="button"
  33. >
  34. <FontAwesomeIcon icon={iconCopy} className="mr-2" />
  35. {t("Copy")}
  36. </Button>
  37. </div>
  38. {/*<div className="input-group-append">
  39. <a
  40. className="btn btn-secondary"
  41. href={value}
  42. target="_blank"
  43. rel="noopener noreferrer"
  44. >
  45. <FontAwesomeIcon icon={iconOpen} className="mr-2" />
  46. {t("Open")}
  47. </a>
  48. </div>*/}
  49. </div>
  50. );
  51. };
  52. export default CopyField;