@rxdrag/website-lib-core 0.0.49 → 0.0.51

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

@@ -1,14 +1,8 @@
-import { forwardRef, HTMLInputTypeAttribute } from "react";
+import { forwardRef } from "react";
+import { FieldConfig } from "./types";
 
-export type InputProps = {
-  label: string;
-  name: string;
-  required?: boolean;
-  className?: string;
-  labelClassName?: string;
-  inputClassName?: string;
-  type?: HTMLInputTypeAttribute;
-  autoFocus?: boolean;
+export type InputProps = Omit<FieldConfig, "feildStyle"> & {
+  requiredClassName?: string;
   value?: string;
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
   error?: string;
@@ -19,6 +13,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
     label,
     name,
     required,
+    requiredClassName,
     labelClassName,
     inputClassName,
     type,
@@ -33,6 +28,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
     <div {...rest}>
       <label htmlFor={name} className={labelClassName}>
         {label}
+        {required ? <span className={requiredClassName}>*</span> : ""}
       </label>
       <input
         ref={ref}

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

@@ -0,0 +1,64 @@
+import clsx from "clsx";
+import { forwardRef, useRef, useEffect, useState } from "react";
+import { InputProps } from "./Input";
+
+export const Input2 = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
+  const {
+    label,
+    name,
+    required,
+    className,
+    labelClassName,
+    inputClassName,
+    type = "text",
+    autoFocus,
+    value,
+    placeholder,
+    onChange,
+    error,
+    ...rest
+  } = props;
+
+  const labelRef = useRef<HTMLLabelElement>(null);
+  const [paddingLeft, setPaddingLeft] = useState("3.5rem"); // default fallback
+
+  useEffect(() => {
+    if (labelRef.current) {
+      const width = labelRef.current.getBoundingClientRect().width;
+      setPaddingLeft(`${width + 16}px`); // extra 16px spacing
+    }
+  }, [label]);
+
+  return (
+    <div className={clsx("relative w-full", className)} {...rest}>
+      <label
+        ref={labelRef}
+        htmlFor={name}
+        className={clsx(
+          "absolute left-3 top-1/2 -translate-y-1/2 mt-1 text-gray-400 opacity-70 text-sm pointer-events-none whitespace-nowrap",
+          labelClassName
+        )}
+      >
+        {label}
+      </label>
+      <input
+        ref={ref}
+        type={type}
+        id={name}
+        name={name}
+        required={required}
+        placeholder={placeholder}
+        className={clsx(
+          "w-full pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-300 bg-transparent focus:bg-white transition-colors duration-200",
+          inputClassName
+        )}
+        style={{ paddingLeft }}
+        autoComplete={name}
+        autoFocus={autoFocus}
+        value={value}
+        onChange={onChange}
+      />
+      {error && <p className="text-red-500 mt-1 text-sm">{error}</p>}
+    </div>
+  );
+});

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

@@ -1,8 +1,11 @@
 export type SubmitProps = {
+  needClasses?: string;
   title: string;
   className?: string;
+  rawHtml?: string;
   spinner?: React.ReactNode;
   submitting?: boolean;
+  disabled?: boolean;
   onClick?: (e: React.MouseEvent) => void;
 };
 
@@ -12,19 +15,31 @@ export const Submit: React.FC<SubmitProps> = (props) => {
     className,
     spinner,
     submitting,
+    disabled,
     onClick,
+    rawHtml,
+    needClasses,
     ...rest
   } = props;
   return (
-    <button
-      type="button"
-      className={className}
-      disabled={submitting}
-      onClick={onClick}
-      {...rest}
-    >
-      {submitting && spinner}
-      {title}
-    </button>
+    <>
+      <button
+        type="button"
+        className={className}
+        disabled={disabled ?? submitting}
+        onClick={onClick}
+        {...rest}
+      >
+        {submitting && spinner}
+        {rawHtml ? (
+          <div dangerouslySetInnerHTML={{ __html: rawHtml }} />
+        ) : (
+          title
+        )}
+      </button>
+      <span className="fixed -z-10 top-0 left-0 w-0 h-0 overflow-hidden opacity-0 pointer-events-none">
+        <span className={needClasses}></span>
+      </span>
+    </>
   );
 };

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

@@ -1,13 +1,8 @@
 import { forwardRef } from "react";
+import { FieldConfig } from "./types";
 
-export type TextareaProps = {
-  label: string;
-  name: string;
-  required?: boolean;
-  className?: string;
-  labelClassName?: string;
-  textareaClassName?: string;
-  rows?: number;
+export type TextareaProps = Omit<FieldConfig, "feildStyle"> & {
+  requiredClassName?: string;
   value?: string;
   onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
   error?: string;
@@ -19,8 +14,9 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
       label,
       name,
       required,
+      requiredClassName,
       labelClassName,
-      textareaClassName,
+      inputClassName,
       rows = 8,
       value,
       onChange,
@@ -32,13 +28,14 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
       <div {...rest}>
         <label htmlFor={name} className={labelClassName}>
           {label}
+          {required ? <span className={requiredClassName}>*</span> : ""}
         </label>
         <textarea
           ref={ref}
           id={name}
           name={name}
           required={required}
-          className={textareaClassName}
+          className={inputClassName}
           rows={rows}
           value={value}
           onChange={onChange}

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

@@ -0,0 +1,64 @@
+import { forwardRef, useRef, useEffect, useState } from "react";
+import { TextareaProps } from "./Textarea";
+
+export const Textarea2 = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (props, ref) => {
+    const {
+      label,
+      name,
+      required,
+      labelClassName,
+      inputClassName,
+      className,
+      rows = 6,
+      value,
+      onChange,
+      error,
+      ...rest
+    } = props;
+
+    const [paddingTop, setPaddingTop] = useState("2.5rem");
+    const labelRef = useRef<HTMLLabelElement>(null);
+
+    useEffect(() => {
+      if (labelRef.current) {
+        const height = labelRef.current.getBoundingClientRect().height;
+        setPaddingTop(`${height + 12}px`); // 留白 label 高度 + 12px 间距
+      }
+    }, [label]);
+
+    return (
+      <div className={className} {...rest}>
+        <div className="relative w-full">
+          <label
+            ref={labelRef}
+            htmlFor={name}
+            className={`absolute left-3 top-2 text-gray-400 opacity-70 text-sm pointer-events-none ${
+              labelClassName || ""
+            }`}
+          >
+            {label}
+          </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";

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

@@ -0,0 +1,49 @@
+import { FileUpload, FileUploadProps } from "./FileUpload";
+import { Input } from "./Input";
+import { Input2 } from "./Input2";
+import { Textarea } from "./Textarea";
+import { Textarea2 } from "./Textarea2";
+import { FieldStyle } from "./types";
+
+export const getControl = (controlName?: string, fieldStyle?: FieldStyle) => {
+  switch (controlName) {
+    case "Input":
+      return getInput(fieldStyle);
+    case "Textarea":
+      return getTextarea(fieldStyle);
+    default:
+      return getInput(fieldStyle);
+  }
+};
+
+export const getInput = (fieldStyle?: FieldStyle) => {
+  if (fieldStyle === "default") {
+    return Input;
+  } else if (fieldStyle === "label-inline") {
+    return Input2;
+  } else {
+    return Input;
+  }
+};
+
+export const getTextarea = (fieldStyle?: FieldStyle) => {
+  if (fieldStyle === "default") {
+    return Textarea;
+  } else if (fieldStyle === "label-inline") {
+    return Textarea2;
+  } else {
+    return Textarea;
+  }
+};
+
+export const getFileUpload = (
+  fieldStyle?: FieldStyle
+): React.FC<FileUploadProps> => {
+  if (fieldStyle === "default") {
+    return FileUpload;
+  } else if (fieldStyle === "label-inline") {
+    return FileUpload;
+  } else {
+    return FileUpload;
+  }
+};

package/src/react/components/ContactForm/funcs.ts

@@ -0,0 +1,64 @@
+/**
+ * 简单的加密函数，用于生成防机器人的加密字段
+ * @param value 需要加密的值
+ * @returns 加密后的字符串
+ */
+export const encrypt = (value: string, formSalt: string): string => {
+  // 获取当前时间戳，精确到分钟级别（防止频繁变化）
+  const timestamp = Math.floor(Date.now() / (60 * 1000));
+
+  // 将时间戳与盐值和输入值组合
+  const dataToEncrypt = `${formSalt}:${timestamp}:${value}`;
+
+  // 使用简单的哈希算法
+  let hash = 0;
+  for (let i = 0; i < dataToEncrypt.length; i++) {
+    const char = dataToEncrypt.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash; // 转换为32位整数
+  }
+
+  // 转换为16进制字符串并添加时间戳信息
+  return `${hash.toString(16)}_${timestamp}`;
+};
+
+/**
+ * 验证加密字段是否有效
+ * @param encryptedValue 加密后的字符串
+ * @param originalValue 原始值（如蜜罐字段的值）
+ * @param maxAgeMinutes 最大有效时间（分钟）
+ * @returns 是否有效
+ */
+export const verifyEncryption = (
+  formSalt: string,
+  encryptedValue: string = "",
+  originalValue: string = "",
+  maxAgeMinutes: number = 30
+): boolean => {
+  // 解析加密值
+  const parts = encryptedValue.split("_");
+  if (parts.length !== 2) {
+    return false; // 格式不正确
+  }
+
+  const [hashString, timestampString] = parts;
+  const timestamp = parseInt(timestampString, 10);
+
+  // 验证时间戳是否在有效期内
+  const currentTimestamp = Math.floor(Date.now() / (60 * 1000));
+  if (isNaN(timestamp) || currentTimestamp - timestamp > maxAgeMinutes) {
+    return false; // 时间戳无效或已过期
+  }
+
+  // 重新计算哈希值
+  const dataToEncrypt = `${formSalt}:${timestamp}:${originalValue}`;
+  let hash = 0;
+  for (let i = 0; i < dataToEncrypt.length; i++) {
+    const char = dataToEncrypt.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash;
+  }
+
+  // 比较哈希值
+  return hashString === hash.toString(16);
+};

package/src/react/components/ContactForm/index.ts

@@ -0,0 +1,7 @@
+export * from "./ContactForm";
+export * from "./FileUpload";
+export * from "./Input";
+export * from "./Submit";
+export * from "./Textarea";
+export * from "./funcs";
+export * from "./types";

package/src/react/components/ContactForm/types.ts

@@ -0,0 +1,67 @@
+import { HTMLInputTypeAttribute } from "react";
+
+export type FieldStyle = "default" | "label-inline" | string;
+
+export type FieldConfig = {
+  name: string;
+  label: string;
+  controlName?: string;
+  required?: boolean;
+  placeholder?: string;
+  className?: string;
+  labelClassName?: string;
+  inputClassName?: string;
+  rows?: number;
+  type?: HTMLInputTypeAttribute;
+  autoFocus?: boolean;
+  feildStyle?: FieldStyle;
+  isExtends?: boolean;
+};
+
+export type SubmitConfig = {
+  containerClassName?: string;
+  className?: string;
+  title?: string;
+  rawHtml?: string;
+  //rawHtml模式时，用于触发tailwind编译
+  needClasses?: string;
+};
+
+export type ContactFormProps = {
+  submit?: SubmitConfig;
+  actionUrl?: string;
+  formSalt: string;
+  className?: string;
+  classNames?: {
+    inputContainer?: string;
+    input?: string;
+    label?: string;
+    required?: string;
+  };
+  fields: FieldConfig[];
+};
+
+export interface FileAttachment {
+  id: string;
+  name: string;
+  size: number;
+  url: string;
+}
+
+export interface QuoteRequest {
+  name?: string;
+  email?: string;
+  company?: string;
+  message?: string;
+  fromCta?: string;
+  // 电话或者whatsapp
+  mobile?: string;
+  // 蜜罐字段，用于检测机器人
+  phone: string;
+  // 一个加密字段，用于防机器人，点击时附加一个加密的字符串
+  encryptedField?: string;
+  // 附件文件信息列表（包含 ID, 名称, 大小, URL）
+  attachments?: FileAttachment[];
+  extents?: Record<string, unknown>;
+  [key: string]: unknown;
+}

package/src/react/components/ContactForm/useVisitorInfo.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+
+export interface VisitorInfo {
+  visitorId: string | null;
+  sessionId: string | null;
+}
+
+export function useVisitorInfo() {
+  const [visitorInfo, setVisitorInfo] = useState<VisitorInfo>({
+    visitorId: null,
+    sessionId: null,
+  });
+
+  useEffect(() => {
+    const getVisitorId = () => {
+      const match = document.cookie.match(/visitor_id=([^;]+)/);
+      return match ? match[1] : null;
+    };
+
+    const getSessionId = () => {
+      return sessionStorage.getItem("session_id");
+    };
+
+    setVisitorInfo({
+      visitorId: getVisitorId(),
+      sessionId: getSessionId(),
+    });
+  }, []);
+
+  return visitorInfo;
+}

package/src/react/components/index.ts

@@ -1,3 +1,4 @@
+export * from "./Analytics";
 export * from "./AttachmentIcon";
 export * from "./ContactForm";
 export * from "./Icon";
@@ -8,3 +9,5 @@ export * from "./Share";
 export * from "./Scroller";
 export * from "./SearchInput";
 export * from "./ToTop";
+export * from "./BackgroundVideoPlayer";
+export * from "./BackgroundHlsVideoPlayer";