@rxdrag/website-lib-react 0.0.7 → 0.0.8

package/src/components/ContactForm/TelInput.tsx

@@ -1,215 +0,0 @@
-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

@@ -1,213 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,89 +0,0 @@
-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";