New source found from dndbeyond.com

2025-06-18 01:00:16 -07:00
parent 451d940294
commit 0b403376c5
30 changed files with 496 additions and 418 deletions
@@ -0,0 +1,132 @@
+import clsx from "clsx";
+import {
+  ChangeEvent,
+  FC,
+  FocusEvent,
+  HTMLAttributes,
+  HTMLInputTypeAttribute,
+  useEffect,
+  useState,
+} from "react";
+import { v4 as uuidv4 } from "uuid";
+
+import styles from "./styles.module.css";
+
+interface InputProps extends HTMLAttributes<HTMLInputElement> {
+  min?: number;
+  max?: number;
+  autoComplete?: string;
+}
+
+export interface InputFieldProps extends HTMLAttributes<HTMLInputElement> {
+  errorMessage?: string;
+  initialValue?: string | number | null;
+  label: string;
+  maxLength?: number;
+  placeholder?: string;
+  type?: HTMLInputTypeAttribute;
+  inputProps?: InputProps;
+}
+
+export const InputField: FC<InputFieldProps> = ({
+  className,
+  errorMessage,
+  initialValue = "",
+  inputProps,
+  label,
+  maxLength,
+  onBlur,
+  onChange,
+  onFocus,
+  placeholder,
+  type = "text",
+  ...props
+}) => {
+  // Set default error message if not provided
+  errorMessage ||= `The maximum length is ${maxLength} characters.`;
+  // Set up component state and a shared id
+  const [value, setValue] = useState(initialValue);
+  const [showError, setShowError] = useState(false);
+  const id = props.id ?? `input-field-${uuidv4()}`;
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const valueLength = e.target.value.length;
+    if (maxLength) {
+      // If the value length exceeds maxLength, show error
+      if (valueLength > maxLength) {
+        setShowError(true);
+        //return; Prevent further processing if maxLength exceeded
+        return;
+      }
+
+      // If the value length is equal to maxLength, show error
+      if (valueLength === maxLength) {
+        setShowError(true);
+      }
+      // If the value length is less than maxLength, hide error
+      if (valueLength < maxLength) {
+        setShowError(false);
+      }
+    }
+    // Update component state
+    setValue(e.target.value);
+    // Call the provided onChange handler if it exists
+    if (onChange) onChange(e);
+    return;
+  };
+
+  const handleBlur = (e: FocusEvent<HTMLInputElement>) => {
+    const intValue = parseInt(e.target.value);
+
+    // If entered value is below the minimum, reset to minimum
+    if (!isNaN(intValue) && inputProps?.min && intValue < inputProps?.min) {
+      setValue(inputProps.min);
+    }
+
+    // If entered value is above the maximum and no initialValue exists, reset to maximum
+    if (!isNaN(intValue) && inputProps?.max && intValue > inputProps?.max) {
+      setValue(inputProps.max);
+    }
+
+    // Call the provided onBlur handler if it exists
+    if (onBlur) onBlur(e);
+
+    // Reset error state on blur
+    setShowError(false);
+  };
+
+  const handleFocus = (e: FocusEvent<HTMLInputElement>) => {
+    // Call the provided onFocus handler if it exists
+    if (onFocus) onFocus(e);
+    // Check for maxLength error
+    const valueLength = e.target.value.length;
+    if (maxLength && valueLength > maxLength - 1) setShowError(true);
+  };
+
+  useEffect(() => {
+    // Update the value when initialValue changes
+    setValue(initialValue);
+    // Reset error state when initial value changes
+    setShowError(false);
+  }, [initialValue]);
+
+  const inputAttrs = { id, type, placeholder };
+
+  return (
+    <div className={clsx([styles.inputField, className])} {...props}>
+      <label className={styles.label} htmlFor={id}>
+        {label}
+      </label>
+      <input
+        className={styles.input}
+        value={value ?? ""}
+        onBlur={handleBlur}
+        onChange={handleChange}
+        onFocus={handleFocus}
+        {...inputAttrs}
+        {...inputProps}
+      />
+      {showError && <span className={styles.error}>{errorMessage}</span>}
+    </div>
+  );
+};