<commit_before>import { hot } from "react-hot-loader/root"; // doit être importé avant React
import React, { useEffect, useRef, useState } from "react";

import PropTypes from "prop-types";
import {
  isIBANValid,
  formatInputContent
} from "@agir/lib/IBANField/validation";

const errorMessages = {
  wrongCountry: "La nationalité de cet IBAN n'est pas acceptée.",
  invalid: "Cet IBAN est invalide."
};

function HelpBlock({ children }) {
  return children && <span className="help-block">{children}</span>;
}

function checkIfError(value, allowedCountries) {
  if (value === "") {
    return null;
  } else if (
    allowedCountries !== null &&
    !allowedCountries.includes(value.slice(0, 2))
  ) {
    return errorMessages.wrongCountry;
  } else if (!isIBANValid(value)) {
    return errorMessages.invalid;
  }
  return null;
}

const IBANField = ({ id, name, initial, placeholder, allowedCountries }) => {
  const [inputState, setInputState] = useState({ value: initial, cursor: 0 });
  const [error, setError] = useState(null);
  const ref = useRef();

  useEffect(() => {
    if (ref.current) {
      ref.current.setSelectionRange(inputState.cursor, inputState.cursor);
    }
  }, inputState);

  return (
    <div className={error && "has-error"}>
      <input
        ref={ref}
        id={id}
        name={name}
        type="text"
        className={"form-control"}
        placeholder={placeholder}
        value={inputState.value}
        onChange={e => {
          setInputState(
            formatInputContent(
              ref.current.value,<commit_msg>Fix(champ IBAN): enlève un warning<commit_after>import { hot } from "react-hot-loader/root"; // doit être importé avant React
import React, { useEffect, useRef, useState } from "react";

import PropTypes from "prop-types";
import {
  isIBANValid,
  formatInputContent
} from "@agir/lib/IBANField/validation";

const errorMessages = {
  wrongCountry: "La nationalité de cet IBAN n'est pas acceptée.",
  invalid: "Cet IBAN est invalide."
};

function HelpBlock({ children }) {
  return children && <span className="help-block">{children}</span>;
}

function checkIfError(value, allowedCountries) {
  if (value === "") {
    return null;
  } else if (
    allowedCountries !== null &&
    !allowedCountries.includes(value.slice(0, 2))
  ) {
    return errorMessages.wrongCountry;
  } else if (!isIBANValid(value)) {
    return errorMessages.invalid;
  }
  return null;
}

const IBANField = ({ id, name, initial, placeholder, allowedCountries }) => {
  const [inputState, setInputState] = useState({ value: initial, cursor: 0 });
  const [error, setError] = useState(null);
  const ref = useRef();

  useEffect(() => {
    if (ref.current) {
      ref.current.setSelectionRange(inputState.cursor, inputState.cursor);
    }
  }, [inputState]);

  return (
    <div className={error && "has-error"}>
      <input
        ref={ref}
        id={id}
        name={name}
        type="text"
        className={"form-control"}
        placeholder={placeholder}
        value={inputState.value}
        onChange={e => {
          setInputState(
            formatInputContent(
              ref.current.value,
{'fraction_non_alphanumeric': 0.1390728476821192, 'fraction_numerical': 0.001892147587511826, 'mean_word_length': 3.246318607764391, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 15, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2968292', 'n_tokens_mistral': 968, 'n_tokens_neox': 959, 'n_words': 231}