@rxdrag/website-lib-react 0.0.4 → 0.0.7

package/src/components/ContactForm/TelInput.tsx

@@ -0,0 +1,215 @@
+import clsx from "clsx";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { CountryDial } from "./countryDialCodes";
+import { useTelControl } from "./hooks/useTelControl";
+
+export interface TelInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+  label?: string;
+  name: string;
+  required?: boolean;
+  requiredClassName?: string;
+  className?: string;
+  labelClassName?: string;
+  inputClassName?: string;
+  countries?: CountryDial[];
+}
+
+export const TelInput = forwardRef<HTMLInputElement, TelInputProps>(
+  (props, ref) => {
+    const {
+      label,
+      name,
+      required,
+      requiredClassName,
+      className,
+      labelClassName,
+      inputClassName,
+      countries,
+      placeholder,
+      value,
+      onChange,
+    } = props;
+
+    const { allCountries, selected, localNumber, onSelectCountry, onChangeLocal } =
+      useTelControl({ countries, name, value, onChange });
+
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState("");
+    const panelRef = useRef<HTMLDivElement | null>(null);
+    const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+    useEffect(() => {
+      const onDocClick = (e: MouseEvent) => {
+        const target = e.target as Node;
+        if (
+          open &&
+          panelRef.current &&
+          !panelRef.current.contains(target) &&
+          buttonRef.current &&
+          !buttonRef.current.contains(target)
+        ) {
+          setOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", onDocClick);
+      return () => document.removeEventListener("mousedown", onDocClick);
+    }, [open]);
+
+    // 使用 useTelControl 负责解析与变更回传
+
+    const filtered: CountryDial[] = useMemo(() => {
+      if (!query) return allCountries;
+      const q = query.toLowerCase();
+      return allCountries.filter(
+        (c: CountryDial) =>
+          c.name.toLowerCase().includes(q) ||
+          (c.region && c.region.toLowerCase().includes(q)) ||
+          c.dialCode.replace("+", "").includes(q.replace("+", ""))
+      );
+    }, [allCountries, query]);
+
+    return (
+      <div className={clsx("w-full", className)}>
+        {label ? (
+          <label
+            htmlFor={name}
+            className={clsx(
+              "mb-1 inline-flex items-center text-sm text-gray-600",
+              labelClassName
+            )}
+          >
+            {label}
+            {required ? <span className={requiredClassName}>*</span> : null}
+          </label>
+        ) : null}
+
+        <div
+          className={clsx(
+            "flex h-10 items-center gap-2 rounded-md focus-within:ring-2 focus-within:ring-primary-300 focus-within:ring-offset-0 bg-white",
+            inputClassName
+          )}
+        >
+          <div className="relative h-full">
+            <button
+              ref={buttonRef}
+              type="button"
+              aria-haspopup="listbox"
+              aria-expanded={open}
+              onClick={() => setOpen((v) => !v)}
+              className={
+                "h-full min-w-[200px] inline-flex items-center justify-between whitespace-nowrap rounded-md px-3 py-0 text-sm"
+              }
+            >
+              <span className="truncate text-left leading-tight">
+                {selected ? (
+                  <>
+                    <span className="font-medium">{selected.name}</span>
+                    {selected.region ? (
+                      <span className="text-gray-500">, {selected.region}</span>
+                    ) : null}
+                    <span className="ml-1 text-gray-700">
+                      {selected.dialCode}
+                    </span>
+                  </>
+                ) : (
+                  "Select Country/Region"
+                )}
+              </span>
+              <svg
+                className="ml-2 h-4 w-4 text-gray-500"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M5.23 7.21a.75.75 0 011.06.02L10 11.085l3.71-3.855a.75.75 0 111.08 1.04l-4.24 4.41a.75.75 0 01-1.08 0L5.25 8.27a.75.75 0 01-.02-1.06z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            </button>
+
+            {open ? (
+              <div
+                ref={panelRef}
+                className="absolute z-50 mt-2 w-[320px] rounded-md border border-gray-200 bg-white p-2 shadow-lg"
+              >
+                <div className="flex items-center gap-2 rounded-md border border-gray-200 px-2 py-1.5">
+                  <input
+                    value={query}
+                    onChange={(e) => setQuery(e.target.value)}
+                    placeholder="Enter Country/Region"
+                    className="h-8 w-full bg-transparent text-sm outline-none"
+                  />
+                  <svg
+                    className="h-4 w-4 text-gray-500"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M8.5 3.5a5 5 0 013.996 8.1l3.202 3.203a.75.75 0 11-1.06 1.06l-3.203-3.202A5 5 0 118.5 3.5zm0 1.5a3.5 3.5 0 100 7 3.5 3.5 0 000-7z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                </div>
+
+                <div className="mt-2 max-h-64 overflow-auto pr-1">
+                  {filtered.map((c: CountryDial) => (
+                    <button
+                      key={c.code}
+                      type="button"
+                      onClick={() => {
+                        onSelectCountry(c);
+                        setOpen(false);
+                      }}
+                      className="flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm hover:bg-gray-50"
+                    >
+                      <span
+                        className={clsx(
+                          "inline-block h-3 w-3 rounded-full border",
+                          selected?.code === c.code
+                            ? "border-primary-500 ring-4 ring-primary-200"
+                            : "border-gray-400"
+                        )}
+                      ></span>
+                      <span className="flex-1 truncate">
+                        {c.name}
+                        {c.region ? (
+                          <span className="text-gray-500">, {c.region}</span>
+                        ) : null}
+                      </span>
+                      <span className="text-gray-700">{c.dialCode}</span>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            ) : null}
+          </div>
+
+          <input
+            ref={ref}
+            id={name}
+            name={name}
+            required={required}
+            placeholder={placeholder || "Phone number"}
+            inputMode="tel"
+            className={clsx("h-10 w-full px-3 py-0 text-sm leading-tight ring-0 outline-none rounded-md")}
+            value={localNumber}
+            onChange={(e) => {
+              const next = e.target.value;
+              onChangeLocal(next);
+            }}
+            autoComplete={name}
+            autoCorrect="off"
+            spellCheck={false}
+          />
+        </div>
+      </div>
+    );
+  }
+);
+
+export default TelInput;

package/src/components/ContactForm/TelInput2.tsx

@@ -0,0 +1,213 @@
+import clsx from "clsx";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import type { CountryDial } from "./countryDialCodes";
+import { useInlineLabelPadding } from "./hooks/useInlineLabelPadding";
+import { useTelControl } from "./hooks/useTelControl";
+
+export interface TelInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+  label?: string;
+  name: string;
+  required?: boolean;
+  requiredClassName?: string;
+  className?: string;
+  labelClassName?: string;
+  inputClassName?: string;
+  countries?: CountryDial[];
+  selectPlaceholder?: string;
+}
+
+export const TelInput2 = forwardRef<HTMLInputElement, TelInputProps>(
+  (props, ref) => {
+    const {
+      label,
+      name,
+      required,
+      requiredClassName,
+      className,
+      labelClassName,
+      inputClassName,
+      countries,
+      placeholder,
+      selectPlaceholder,
+      value,
+      onChange,
+    } = props;
+
+    const { labelRef, paddingLeft } = useInlineLabelPadding(16);
+    const {
+      allCountries,
+      selected,
+      localNumber,
+      onSelectCountry,
+      onChangeLocal,
+    } = useTelControl({ countries, name, value, onChange });
+
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState("");
+    const panelRef = useRef<HTMLDivElement | null>(null);
+    const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+    const filtered = useMemo(() => {
+      if (!query) return allCountries;
+      const q = query.toLowerCase();
+      return allCountries.filter(
+        (c) =>
+          c.name.toLowerCase().includes(q) ||
+          (c.region && c.region.toLowerCase().includes(q)) ||
+          c.dialCode.replace("+", "").includes(q.replace("+", ""))
+      );
+    }, [allCountries, query]);
+
+    useEffect(() => {
+      const onDocClick = (e: MouseEvent) => {
+        const target = e.target as Node;
+        if (
+          open &&
+          panelRef.current &&
+          !panelRef.current.contains(target) &&
+          buttonRef.current &&
+          !buttonRef.current.contains(target)
+        ) {
+          setOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", onDocClick);
+      return () => document.removeEventListener("mousedown", onDocClick);
+    }, [open]);
+
+    return (
+      <div className={clsx("relative w-full", className)}>
+        <label
+          ref={labelRef}
+          htmlFor={name}
+          className={clsx(
+            "absolute left-3 top-1/2 -translate-y-1/2 mt-1 opacity-70 text-sm pointer-events-none whitespace-nowrap",
+            labelClassName
+          )}
+        >
+          {label}
+          {required ? <span className={requiredClassName}>*</span> : null}
+        </label>
+
+        <div
+          className={clsx(
+            "flex h-10 items-center gap-2 rounded-md shadow-sm focus-within:ring-2 focus-within:ring-primary-300",
+            inputClassName
+          )}
+          style={{ paddingLeft }}
+        >
+          <div className="relative h-full">
+            <button
+              ref={buttonRef}
+              type="button"
+              aria-haspopup="listbox"
+              aria-expanded={open}
+              onClick={() => setOpen((v) => !v)}
+              className={
+                "h-full min-w-[100px] inline-flex items-center justify-between whitespace-nowrap rounded-md px-3 py-0 text-sm"
+              }
+            >
+              <span className="truncate text-left leading-tight">
+                {selected ? (
+                  <span className="font-medium">{selected.dialCode}</span>
+                ) : (
+                  <span className="text-gray-500">+ Code</span>
+                )}
+              </span>
+              <svg
+                className="ml-2 h-4 w-4 text-gray-500"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M5.23 7.21a.75.75 0 011.06.02L10 11.085l3.71-3.855a.75.75 0 111.08 1.04l-4.24 4.41a.75.75 0 01-1.08 0L5.25 8.27a.75.75 0 01-.02-1.06z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            </button>
+
+            {open ? (
+              <div
+                ref={panelRef}
+                className="absolute z-50 mt-2 w-[320px] rounded-md border border-gray-200 bg-white p-2 shadow-lg"
+              >
+                <div className="flex items-center gap-2 rounded-md border border-gray-200 px-2 py-1.5">
+                  <input
+                    value={query}
+                    onChange={(e) => setQuery(e.target.value)}
+                    placeholder={selectPlaceholder || "Enter Country/Region"}
+                    className="h-8 w-full bg-transparent text-sm outline-none"
+                  />
+                  <svg
+                    className="h-4 w-4 text-gray-500"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M8.5 3.5a5 5 0 013.996 8.1l3.202 3.203a.75.75 0 11-1.06 1.06l-3.203-3.202A5 5 0 118.5 3.5zm0 1.5a3.5 3.5 0 100 7 3.5 3.5 0 000-7z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                </div>
+
+                <div className="mt-2 max-h-64 overflow-auto pr-1">
+                  {filtered.map((c) => (
+                    <button
+                      key={c.code}
+                      type="button"
+                      onClick={() => {
+                        onSelectCountry(c);
+                        setOpen(false);
+                      }}
+                      className="flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm hover:bg-gray-50"
+                    >
+                      <span
+                        className={clsx(
+                          "inline-block h-3 w-3 rounded-full border",
+                          selected?.code === c.code
+                            ? "border-primary-500 ring-4 ring-primary-200"
+                            : "border-gray-400"
+                        )}
+                      ></span>
+                      <span className="flex-1 truncate">
+                        {c.name}
+                        {c.region ? (
+                          <span className="text-gray-500">, {c.region}</span>
+                        ) : null}
+                      </span>
+                      <span className="text-gray-700">{c.dialCode}</span>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            ) : null}
+          </div>
+
+          <input
+            ref={ref}
+            id={name}
+            name={name}
+            required={required}
+            placeholder={placeholder || "Phone number"}
+            inputMode="tel"
+            className={clsx(
+              "h-10 w-full appearance-none rounded-md border-0 bg-transparent px-3 py-0 text-sm leading-tight focus:outline-none"
+            )}
+            value={localNumber}
+            onChange={(e) => onChangeLocal(e.target.value)}
+            autoComplete={name}
+            autoCorrect="off"
+            spellCheck={false}
+          />
+        </div>
+      </div>
+    );
+  }
+);
+
+export default TelInput2;

package/src/components/ContactForm/Textarea.tsx

@@ -0,0 +1,48 @@
+import { forwardRef } from "react";
+import { FieldConfig } from "./types";
+
+export type TextareaProps = Omit<FieldConfig, "feildStyle"> & {
+  requiredClassName?: string;
+  value?: string;
+  onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  error?: string;
+};
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (props, ref) => {
+    const {
+      label,
+      name,
+      required,
+      requiredClassName,
+      labelClassName,
+      inputClassName,
+      rows = 8,
+      value,
+      onChange,
+      error,
+      ...rest
+    } = props;
+
+    return (
+      <div {...rest}>
+        <label htmlFor={name} className={labelClassName}>
+          {label}
+          {required ? <span className={requiredClassName}>*</span> : ""}
+        </label>
+        <textarea
+          ref={ref}
+          id={name}
+          name={name}
+          required={required}
+          className={inputClassName}
+          rows={rows}
+          value={value}
+          onChange={onChange}
+          autoComplete={name}
+        />
+        {error && <p className="text-red-500 mt-1">{error}</p>}
+      </div>
+    );
+  }
+);

package/src/components/ContactForm/Textarea2.tsx

@@ -0,0 +1,89 @@
+import { forwardRef, useRef, useEffect, useState } from "react";
+import { TextareaProps } from "./Textarea";
+
+export const Textarea2 = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (props, ref) => {
+    const {
+      label,
+      name,
+      required,
+      requiredClassName,
+      labelClassName,
+      inputClassName,
+      className,
+      rows = 6,
+      value,
+      onChange,
+      error,
+      ...rest
+    } = props;
+
+    const [paddingTop, setPaddingTop] = useState("2.5rem");
+    const labelRef = useRef<HTMLLabelElement>(null);
+
+    useEffect(() => {
+      const labelEl = labelRef.current;
+      if (!labelEl) return;
+
+      let rafId = 0;
+      const measure = () => {
+        const height = labelEl.getBoundingClientRect().height;
+        setPaddingTop(`${height + 12}px`);
+      };
+
+      measure();
+      rafId = requestAnimationFrame(measure);
+
+      if (typeof ResizeObserver === "undefined") {
+        return () => {
+          cancelAnimationFrame(rafId);
+        };
+      }
+
+      const ro = new ResizeObserver(() => {
+        measure();
+      });
+      ro.observe(labelEl);
+
+      return () => {
+        cancelAnimationFrame(rafId);
+        ro.disconnect();
+      };
+    }, [label]);
+
+    return (
+      <div className={className} {...rest}>
+        <div className="relative w-full">
+          <label
+            ref={labelRef}
+            htmlFor={name}
+            className={`absolute left-3 top-2 opacity-70 text-sm pointer-events-none ${
+              labelClassName || ""
+            }`}
+          >
+            {label}
+            {required ? <span className={requiredClassName}>*</span> : ""}
+          </label>
+          <textarea
+            ref={ref}
+            id={name}
+            name={name}
+            required={required}
+            rows={rows}
+            value={value}
+            onChange={onChange}
+            autoComplete={name}
+            style={{ paddingTop }}
+            className={`w-full px-3 pb-2 border border-gray-300 rounded-md shadow-sm focus:outline-none 
+                        focus:ring-2 focus:ring-primary-300 focus:border-transparent resize-y bg-transparent focus:bg-white transition-colors duration-200 ${
+                          inputClassName || ""
+                        }`}
+          />
+        </div>
+        {error && <p className="text-red-500 mt-1 text-sm">{error}</p>}
+      </div>
+    );
+  }
+);
+
+Textarea2.displayName = "Textarea2";