Text input

() => {
  const [value, setValue] = useState("");
  const onChange = ({ value }) => {
    setValue(value);
  };
  const onBlur = ({ value }) => {
    setValue(value);
  };
  
  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcTextInput
        label="Enter your name"
        value={value}
        onChange={onChange}
        onBlur={onBlur}
      />
    </DxcInset>
  );
}

() => {
  const inputRef = useRef();

  const handleSubmit = () => {
    const input = inputRef.current.getElementsByTagName("input")[0];
    console.log(input.value);
  };

  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcFlex direction="column" gap="var(--spacing-gap-xl)" alignItems="flex-start">
        <DxcTextInput
          label="Enter your surname"
          defaultValue="Harris"
          ref={inputRef}
        />
        <DxcButton label="Submit" onClick={handleSubmit} />
      </DxcFlex>
    </DxcInset>
  );
}

() => {
  const [value, setValue] = useState("");
  const onChange = ({ value }) => {
    setValue(value);
  };
  const actionIcon = {
    icon: "Content_Copy",
    onClick: () => {
      navigator.clipboard
        .writeText(value)
        .then(() => {
          alert("Code copied!");
        })
        .catch(() => {
          alert("Failed attempt to copy the text.");
        });
    },
    title: "Copy the text",
  };

  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcTextInput 
        action={actionIcon}
        clearable
        label="Enter your name"
        onChange={onChange}
        value={value}
      />
    </DxcInset>
  );
}

() => {
  const countries = ["Afghanistan", "Albania", "Algeria", "Andorra"];
  const [value, setValue] = useState("");
  const onChange = ({ value }) => {
    setValue(value);
  };
  const onBlur = ({ value }) => {
    setValue(value);
  };

  const callbackFunc = (newValue) => {
    const result = new Promise((resolve) =>
      setTimeout(() => {
        resolve(
          newValue
            ? countries.filter((option) =>
                option.toUpperCase().includes(newValue.toUpperCase())
              )
            : countries
        );
      }, 1500)
    );
    return result;
  };
  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcTextInput
        label="Enter your country"
        value={value}
        onChange={onChange}
        suggestions={callbackFunc}
        onBlur={onBlur}
      />
    </DxcInset>
  );
}

() => {
  const [value, setValue] = useState("");
  const [errorMessage, setErrorMessage] = useState();
  const onChange = ({ value, error }) => {
    setValue(value);
    setErrorMessage(error == undefined ? "" : "Error onChange: invalid email");
  };
  const onBlur = ({ value, error }) => {
    setValue(value);
    setErrorMessage(error == undefined ? "" : "Error onBlur: invalid email");
  };

  const validEmail = new RegExp(
    "^[a-zA-Z0-9._:$!%-]+@[a-zA-Z0-9.-]+.[a-zA-Z]$"
  );

  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcTextInput
        label="Enter your email"
        onChange={onChange}
        onBlur={onBlur}
        error={errorMessage}
        pattern={validEmail}
      />
    </DxcInset>
  );
}