@rxdrag/website-lib-core 0.0.127 → 0.0.129

package/src/react/components/ContactForm/ContactForm.tsx

@@ -1,289 +1,289 @@
-import { forwardRef, useState } from "react";
-import { Submit } from "./Submit";
-import { type UploadedFile } from "./FileUpload2";
-import clsx from "clsx";
-import { encrypt } from "./funcs";
-import { ContactFormProps, QuoteRequest } from "./types";
-import { getControl, getFileUpload } from "./factory";
-
-interface FormErrors {
-  name?: string;
-  email?: string;
-  message?: string;
-}
-
-export const ContactForm = forwardRef<HTMLDivElement, ContactFormProps>(
-  (props, ref) => {
-    const {
-      submit,
-      actionUrl = "/api/ask-for-quote",
-      formSalt,
-      fields = [],
-      className,
-      classNames,
-      fromCta,
-      ...rest
-    } = props;
-    const [formData, setFormData] = useState<QuoteRequest>({
-      name: "",
-      email: "",
-      company: "",
-      message: "",
-      phone: "", // 初始化蜜罐字段
-      attachments: [], // 附件 ID 列表
-    });
-    // 错误状态
-    const [errors, setErrors] = useState<FormErrors>({});
-    const [submitting, setSubmitting] = useState(false);
-    const [isUploading, setIsUploading] = useState(false);
-    const [submitStatus, setSubmitStatus] = useState<{
-      success?: boolean;
-      message?: string;
-    }>({});
-
-    // 处理输入变化
-    const handleChange = (
-      e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-      isExtends?: boolean
-    ) => {
-      const { name, value } = e.target;
-      if (isExtends) {
-        setFormData((prev) => ({
-          ...prev,
-          extents: {
-            ...(prev.extends || {}),
-            [name]: value,
-          },
-        }));
-      } else {
-        setFormData((prev) => ({
-          ...prev,
-          [name]: value,
-        }));
-      }
-
-      setSubmitStatus({}); // 重置提交状态
-
-      // 清除对应字段的错误
-      if (errors[name as keyof FormErrors]) {
-        setErrors((prev) => ({
-          ...prev,
-          [name]: undefined,
-        }));
-      }
-    };
-
-    // 处理文件上传变化（单文件）
-    const handleFileChange = (fileInfo: UploadedFile | null) => {
-      setFormData((prev) => ({
-        ...prev,
-        attachments: fileInfo ? [fileInfo] : [], // 存储完整的文件信息
-      }));
-    };
-
-    // 处理文件上传状态变化
-    const handleFileUploadStateChange = (uploading: boolean) => {
-      setIsUploading(uploading);
-    };
-    // 验证表单
-    const validateForm = (): boolean => {
-      const newErrors: FormErrors = {};
-
-      // if (!formData.name?.trim()) {
-      //   newErrors.name = "Please enter your name";
-      // }
-
-      if (!formData.email?.trim()) {
-        newErrors.email = "Please enter your email";
-      } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
-        newErrors.email = "Please enter a valid email address";
-      }
-
-      if (!formData.message?.trim()) {
-        newErrors.message = "Please enter your message";
-      }
-
-      // 检查蜜罐字段 - 如果填写了则表示是机器人
-      if (formData.phone) {
-        // 悄悄失败，不显示错误信息
-        console.log("Honeypot triggered - likely spam submission");
-        return false;
-      }
-
-      setErrors(newErrors);
-      return Object.keys(newErrors).length === 0;
-    };
-
-    const handleClick = async (event: React.MouseEvent) => {
-      event.preventDefault(); // 阻止表单默认提交行为
-
-      // 验证表单
-      if (!validateForm()) {
-        return; // 如果验证失败，不继续提交
-      }
-
-      try {
-        setSubmitting(true);
-        setSubmitStatus({}); // 重置提交状态
-        const response = await fetch(actionUrl, {
-          method: "POST",
-          body: JSON.stringify({
-            ...formData,
-            //TODO:后面改成从window 或者传入
-            fromCta: fromCta || window?.lastCta,
-            encryptedField: encrypt(formData.phone, formSalt),
-          }),
-          headers: {
-            "X-Request-URL": window.location.href,
-            "Content-Type": "application/json",
-          },
-        });
-
-        if (!response.ok) {
-          throw new Error(`Server responded with status: ${response.status}`);
-        }
-
-        const result = await response.json();
-
-        setSubmitStatus({
-          success: result.success,
-          message: result.message,
-        });
-
-        if (result.success) {
-          // 重置表单
-          setFormData({
-            name: "",
-            email: "",
-            company: "",
-            message: "",
-            phone: "",
-            attachments: [],
-          });
-          window.location.href = "/thanks";
-        }
-      } catch (error) {
-        // 如果出现错误，打印错误信息
-        console.error("Form submission error:", error);
-        setSubmitStatus({
-          success: false,
-          message:
-            error instanceof Error
-              ? `Error: ${error.message}`
-              : "Failed to submit the form. Please try again later.",
-        });
-      } finally {
-        setSubmitting(false);
-      }
-    };
-
-    return (
-      <div
-        ref={ref}
-        className={clsx(
-          "py-4 grid max-w-2xl grid-cols-1 gap-x-6 sm:grid-cols-2 w-full",
-          className || "gap-y-6"
-        )}
-        {...rest}
-      >
-        {fields.map((field, index) => {
-          const {
-            controlName,
-            feildStyle,
-            isExtends,
-            name,
-            className,
-            inputClassName,
-            labelClassName,
-            ...rest
-          } = field;
-
-          // FileUpload 组件特殊处理
-          if (controlName === "FileUpload") {
-            const FileUploadControl = getFileUpload(feildStyle);
-            return (
-              <FileUploadControl
-                key={name || index}
-                name={name || "attachments"}
-                formSalt={formSalt}
-                className={clsx(classNames?.inputContainer, className)}
-                inputClassName={clsx(classNames?.input, inputClassName)}
-                labelClassName={clsx(classNames?.label, labelClassName)}
-                maxSize={3 * 1024 * 1024}
-                onChange={handleFileChange}
-                onUploadStateChange={handleFileUploadStateChange}
-                placeholder="Click to select file"
-                uploadingText="Uploading..."
-                selectedText="Selected: {name}"
-                accept="*/*"
-                {...rest}
-              />
-            );
-          }
-
-          // 普通输入控件
-          const Control = getControl(controlName, feildStyle);
-          return (
-            <Control
-              key={name || index}
-              name={name}
-              className={clsx(classNames?.inputContainer, className)}
-              labelClassName={clsx(classNames?.label, labelClassName)}
-              inputClassName={clsx(classNames?.input, inputClassName)}
-              requiredClassName={classNames?.required}
-              value={formData[name as keyof QuoteRequest] as string}
-              onChange={(e) => handleChange(e, isExtends)}
-              error={errors[name as keyof FormErrors]}
-              {...rest}
-            />
-          );
-        })}
-
-        {/* 蜜罐字段 - 对用户隐藏但对机器人可见 */}
-        <div style={{ display: "none" }}>
-          <input
-            type="text"
-            name="phone"
-            value={formData.phone}
-            onChange={handleChange}
-            tabIndex={-1}
-            autoComplete="off"
-          />
-        </div>
-        <div
-          className={clsx(
-            "col-span-full flex items-center gap-x-6 px-0 py-2",
-            submit?.containerClassName
-          )}
-        >
-          {submitStatus.message && !submitStatus.success && (
-            <div
-              className={`text-sm ${
-                submitStatus.success ? "text-green-600" : "text-red-600"
-              }`}
-            >
-              {submitStatus.message}
-            </div>
-          )}
-          <Submit
-            className={clsx(
-              "flex gap-2 items-center relative shadow-sm btn btn-lg nowrap",
-              submit?.className || "btn-primary"
-            )}
-            title={submit?.title || "Send Message"}
-            spinner={
-              <div className="left-8 flex items-center justify-center">
-                <div className="animate-spin rounded-full h-5 w-5 border-t-2 border-b-2 border-white" />
-              </div>
-            }
-            rawHtml={submit?.rawHtml}
-            needClasses={submit?.needClasses}
-            submitting={submitting}
-            disabled={submitting || isUploading}
-            onClick={handleClick}
-          />
-        </div>
-      </div>
-    );
-  }
-);
+import { forwardRef, useState } from "react";
+import { Submit } from "./Submit";
+import { type UploadedFile } from "./FileUpload2";
+import clsx from "clsx";
+import { encrypt } from "./funcs";
+import { ContactFormProps, QuoteRequest } from "./types";
+import { getControl, getFileUpload } from "./factory";
+
+interface FormErrors {
+  name?: string;
+  email?: string;
+  message?: string;
+}
+
+export const ContactForm = forwardRef<HTMLDivElement, ContactFormProps>(
+  (props, ref) => {
+    const {
+      submit,
+      actionUrl = "/api/ask-for-quote",
+      formSalt,
+      fields = [],
+      className,
+      classNames,
+      fromCta,
+      ...rest
+    } = props;
+    const [formData, setFormData] = useState<QuoteRequest>({
+      name: "",
+      email: "",
+      company: "",
+      message: "",
+      phone: "", // 初始化蜜罐字段
+      attachments: [], // 附件 ID 列表
+    });
+    // 错误状态
+    const [errors, setErrors] = useState<FormErrors>({});
+    const [submitting, setSubmitting] = useState(false);
+    const [isUploading, setIsUploading] = useState(false);
+    const [submitStatus, setSubmitStatus] = useState<{
+      success?: boolean;
+      message?: string;
+    }>({});
+
+    // 处理输入变化
+    const handleChange = (
+      e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+      isExtends?: boolean
+    ) => {
+      const { name, value } = e.target;
+      if (isExtends) {
+        setFormData((prev) => ({
+          ...prev,
+          extents: {
+            ...(prev.extends || {}),
+            [name]: value,
+          },
+        }));
+      } else {
+        setFormData((prev) => ({
+          ...prev,
+          [name]: value,
+        }));
+      }
+
+      setSubmitStatus({}); // 重置提交状态
+
+      // 清除对应字段的错误
+      if (errors[name as keyof FormErrors]) {
+        setErrors((prev) => ({
+          ...prev,
+          [name]: undefined,
+        }));
+      }
+    };
+
+    // 处理文件上传变化（单文件）
+    const handleFileChange = (fileInfo: UploadedFile | null) => {
+      setFormData((prev) => ({
+        ...prev,
+        attachments: fileInfo ? [fileInfo] : [], // 存储完整的文件信息
+      }));
+    };
+
+    // 处理文件上传状态变化
+    const handleFileUploadStateChange = (uploading: boolean) => {
+      setIsUploading(uploading);
+    };
+    // 验证表单
+    const validateForm = (): boolean => {
+      const newErrors: FormErrors = {};
+
+      // if (!formData.name?.trim()) {
+      //   newErrors.name = "Please enter your name";
+      // }
+
+      if (!formData.email?.trim()) {
+        newErrors.email = "Please enter your email";
+      } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
+        newErrors.email = "Please enter a valid email address";
+      }
+
+      if (!formData.message?.trim()) {
+        newErrors.message = "Please enter your message";
+      }
+
+      // 检查蜜罐字段 - 如果填写了则表示是机器人
+      if (formData.phone) {
+        // 悄悄失败，不显示错误信息
+        console.log("Honeypot triggered - likely spam submission");
+        return false;
+      }
+
+      setErrors(newErrors);
+      return Object.keys(newErrors).length === 0;
+    };
+
+    const handleClick = async (event: React.MouseEvent) => {
+      event.preventDefault(); // 阻止表单默认提交行为
+
+      // 验证表单
+      if (!validateForm()) {
+        return; // 如果验证失败，不继续提交
+      }
+
+      try {
+        setSubmitting(true);
+        setSubmitStatus({}); // 重置提交状态
+        const response = await fetch(actionUrl, {
+          method: "POST",
+          body: JSON.stringify({
+            ...formData,
+            //TODO:后面改成从window 或者传入
+            fromCta: fromCta || window?.lastCta,
+            encryptedField: encrypt(formData.phone, formSalt),
+          }),
+          headers: {
+            "X-Request-URL": window.location.href,
+            "Content-Type": "application/json",
+          },
+        });
+
+        if (!response.ok) {
+          throw new Error(`Server responded with status: ${response.status}`);
+        }
+
+        const result = await response.json();
+
+        setSubmitStatus({
+          success: result.success,
+          message: result.message,
+        });
+
+        if (result.success) {
+          // 重置表单
+          setFormData({
+            name: "",
+            email: "",
+            company: "",
+            message: "",
+            phone: "",
+            attachments: [],
+          });
+          window.location.href = "/thanks";
+        }
+      } catch (error) {
+        // 如果出现错误，打印错误信息
+        console.error("Form submission error:", error);
+        setSubmitStatus({
+          success: false,
+          message:
+            error instanceof Error
+              ? `Error: ${error.message}`
+              : "Failed to submit the form. Please try again later.",
+        });
+      } finally {
+        setSubmitting(false);
+      }
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={clsx(
+          "py-4 grid max-w-2xl grid-cols-1 gap-x-6 sm:grid-cols-2 w-full",
+          className || "gap-y-6"
+        )}
+        {...rest}
+      >
+        {fields.map((field, index) => {
+          const {
+            controlName,
+            feildStyle,
+            isExtends,
+            name,
+            className,
+            inputClassName,
+            labelClassName,
+            ...rest
+          } = field;
+
+          // FileUpload 组件特殊处理
+          if (controlName === "FileUpload") {
+            const FileUploadControl = getFileUpload(feildStyle);
+            return (
+              <FileUploadControl
+                key={name || index}
+                name={name || "attachments"}
+                formSalt={formSalt}
+                className={clsx(classNames?.inputContainer, className)}
+                inputClassName={clsx(classNames?.input, inputClassName)}
+                labelClassName={clsx(classNames?.label, labelClassName)}
+                maxSize={3 * 1024 * 1024}
+                onChange={handleFileChange}
+                onUploadStateChange={handleFileUploadStateChange}
+                placeholder="Click to select file"
+                uploadingText="Uploading..."
+                selectedText="Selected: {name}"
+                accept="*/*"
+                {...rest}
+              />
+            );
+          }
+
+          // 普通输入控件
+          const Control = getControl(controlName, feildStyle);
+          return (
+            <Control
+              key={name || index}
+              name={name}
+              className={clsx(classNames?.inputContainer, className)}
+              labelClassName={clsx(classNames?.label, labelClassName)}
+              inputClassName={clsx(classNames?.input, inputClassName)}
+              requiredClassName={classNames?.required}
+              value={formData[name as keyof QuoteRequest] as string}
+              onChange={(e) => handleChange(e, isExtends)}
+              error={errors[name as keyof FormErrors]}
+              {...rest}
+            />
+          );
+        })}
+
+        {/* 蜜罐字段 - 对用户隐藏但对机器人可见 */}
+        <div style={{ display: "none" }}>
+          <input
+            type="text"
+            name="phone"
+            value={formData.phone}
+            onChange={handleChange}
+            tabIndex={-1}
+            autoComplete="off"
+          />
+        </div>
+        <div
+          className={clsx(
+            "col-span-full flex items-center gap-x-6 px-0 py-2",
+            submit?.containerClassName
+          )}
+        >
+          {submitStatus.message && !submitStatus.success && (
+            <div
+              className={`text-sm ${
+                submitStatus.success ? "text-green-600" : "text-red-600"
+              }`}
+            >
+              {submitStatus.message}
+            </div>
+          )}
+          <Submit
+            className={clsx(
+              "flex gap-2 items-center relative shadow-sm btn btn-lg nowrap",
+              submit?.className || "btn-primary"
+            )}
+            title={submit?.title || "Send Message"}
+            spinner={
+              <div className="left-8 flex items-center justify-center">
+                <div className="animate-spin rounded-full h-5 w-5 border-t-2 border-b-2 border-white" />
+              </div>
+            }
+            rawHtml={submit?.rawHtml}
+            needClasses={submit?.needClasses}
+            submitting={submitting}
+            disabled={submitting || isUploading}
+            onClick={handleClick}
+          />
+        </div>
+      </div>
+    );
+  }
+);

package/src/react/components/ContactForm/Input.tsx

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