@rxdrag/website-lib-react 0.0.6 → 0.0.8

package/src/components/BackgroundHlsVideoPlayer.tsx

@@ -1,97 +0,0 @@
-import { useEffect, useRef, type VideoHTMLAttributes } from "react";
-import Hls from "hls.js";
-
-// 需要过滤掉的非 video 属性（Astro runtime 透传的方法/对象）
-const FORBIDDEN_PROPS = new Set([
-  'createMetadata',
-  'createComponent',
-  'createAstro',
-  'renderComponent',
-  'renderSlot',
-  'render',
-  'addAttribute',
-  'spreadAttributes',
-  'defineStyleVars',
-  'defineScriptVars',
-  'Fragment',
-  'unescapeHTML',
-  'maybeRenderHead',
-  'renderHead',
-  'slots',
-  'props',
-  'children',
-]);
-
-export function BackgroundHlsVideoPlayer(
-  props: VideoHTMLAttributes<HTMLVideoElement>
-) {
-  const { poster, src, className, ...rawRestProps } = props;
-  // 过滤掉 Astro runtime 透传的非 video 属性
-  const restProps: Record<string, unknown> = {};
-  for (const [k, v] of Object.entries(rawRestProps)) {
-    if (FORBIDDEN_PROPS.has(k)) continue;
-    if (k.startsWith('_')) continue;
-    if (typeof v === 'function') continue;
-    restProps[k] = v;
-  }
-  const videoRef = useRef<HTMLVideoElement>(null);
-
-  useEffect(() => {
-    if (!videoRef.current || !src) return;
-
-    const video = videoRef.current;
-
-    if (!Hls.isSupported()) {
-      if (video.canPlayType("application/vnd.apple.mpegurl")) {
-        video.src = src;
-        video.play().catch(() => {});
-      }
-      return;
-    }
-
-    const hls = new Hls({
-      enableWorker: true,
-    });
-
-    hls.on(Hls.Events.MANIFEST_PARSED, () => {
-      video.play().catch(() => {});
-    });
-
-    hls.on(Hls.Events.ERROR, (event, data) => {
-      if (data.fatal) {
-        switch (data.type) {
-          case Hls.ErrorTypes.NETWORK_ERROR:
-            hls.startLoad();
-            break;
-          case Hls.ErrorTypes.MEDIA_ERROR:
-            hls.recoverMediaError();
-            break;
-          default:
-            hls.destroy();
-            break;
-        }
-      }
-    });
-
-    hls.loadSource(src);
-    hls.attachMedia(video);
-
-    return () => {
-      hls.destroy();
-    };
-  }, [src]);
-
-  return (
-    <video
-      ref={videoRef}
-      autoPlay
-      loop
-      muted
-      playsInline
-      poster={poster}
-      className={className}
-      preload="metadata"
-      {...restProps}
-    ></video>
-  );
-}

package/src/components/BackgroundVideoPlayer.tsx

@@ -1,32 +0,0 @@
-import { useEffect, useRef, type VideoHTMLAttributes } from "react";
-
-export function BackgroundVideoPlayer(props: VideoHTMLAttributes<HTMLVideoElement>) {
-  const { poster, src, className, ...restProps } = props;
-  const videoRef = useRef<HTMLVideoElement>(null);
-
-  useEffect(() => {
-    if (videoRef.current) {
-      const video = videoRef.current;
-
-      // 确保视频可以自动播放
-      video.play().catch((error) => {
-        console.log("自动播放失败:", error);
-      });
-    }
-  }, []);
-
-  return (
-    <video
-      ref={videoRef}
-      autoPlay
-      loop
-      muted
-      playsInline
-      poster={poster}
-      className={className}
-      preload="metadata"
-      src={src}
-      {...restProps}
-    ></video>
-  );
-}

package/src/components/Bulletin.tsx

@@ -1,30 +0,0 @@
-import { Bulletin as BulletinModel } from "@rxdrag/rxcms-models";
-import { useEffect, useState } from "react";
-
-export function Bulletin(props: { className?: string }) {
-  const { className, ...rest } = props;
-  const [bulletin, setBulletin] = useState<BulletinModel | null>(null);
-
-  useEffect(() => {
-    fetch("/api/get-bulletin")
-      .then((res) => res.json())
-      .then((res) => {
-        if (res.success) {
-          setBulletin(res.data);
-        }
-      })
-      .catch((err) => {
-        console.error("Failed to fetch bulletin", err);
-      });
-  }, []);
-
-  console.log("====>bulletin", bulletin)
-
-  if (!bulletin) return null;
-
-  return (
-    <div className={className} {...rest}>
-      {bulletin.content}
-    </div>
-  );
-}

package/src/components/ContactForm/ContactForm.tsx

@@ -1,290 +0,0 @@
-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 lastCta = (window as Window & { lastCta?: string }).lastCta;
-
-    // 处理输入变化
-    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 || 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>
-    );
-  }
-);