@rxdrag/website-lib-react 0.0.4 → 0.0.7

package/src/components/ContactForm/FileUpload2.tsx

@@ -0,0 +1,423 @@
+import clsx from "clsx";
+import { forwardRef, useRef, useState } from "react";
+import { useInlineLabelPadding } from "./hooks/useInlineLabelPadding";
+
+/**
+ * Simple encryption function for generating anti-bot encrypted fields
+ */
+const generateEncryption = (formSalt: string, value: 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;
+  }
+
+  return `${hash.toString(16)}_${timestamp}`;
+};
+
+export type UploadedFile = {
+  id: string;
+  name: string;
+  size: number;
+  url: string; // OSS public URL
+};
+
+export type FileUploadProps = {
+  label: string;
+  name: string;
+  required?: boolean;
+  className?: string;
+  labelClassName?: string;
+  inputClassName?: string;
+  accept?: string;
+  onChange?: (fileInfo: UploadedFile | null) => void;
+  onUploadStateChange?: (isUploading: boolean) => void;
+  error?: string;
+  placeholder?: string;
+  uploadingText?: string;
+  selectedText?: string;
+  formSalt?: string; // 加密盐
+  maxSize?: number; // 最大文件大小（字节），默认 5MB
+};
+
+export const FileUpload2 = forwardRef<HTMLInputElement, FileUploadProps>(
+  (props, ref) => {
+    const {
+      label,
+      name,
+      required,
+      className,
+      labelClassName,
+      inputClassName,
+      accept = "*/*",
+      onChange,
+      onUploadStateChange,
+      error,
+      placeholder = "Click to select file",
+      uploadingText = "Uploading...",
+      selectedText = "Selected: {name}",
+      formSalt = "default-salt",
+      maxSize = 5 * 1024 * 1024,
+      ...rest
+    } = props;
+
+    const [uploadedFile, setUploadedFile] = useState<UploadedFile | null>(null);
+    const [isUploading, setIsUploading] = useState(false);
+    const [uploadError, setUploadError] = useState<string>("");
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const { labelRef, paddingLeft } = useInlineLabelPadding(16);
+    const abortControllerRef = useRef<AbortController | null>(null);
+
+    // Upload single file
+    const uploadFile = async (
+      file: File,
+      signal: AbortSignal
+    ): Promise<UploadedFile> => {
+      // Validate file size
+      if (file.size > maxSize) {
+        throw new Error(
+          `File ${file.name} exceeds maximum size limit of ${
+            maxSize / 1024 / 1024
+          }MB`
+        );
+      }
+
+      // Generate encrypted field with honeypot value
+      const honeypot = "";
+      const encryptedField = generateEncryption(formSalt, honeypot);
+
+      // 1. Get upload credentials
+      const credentialsResponse = await fetch("/api/get-upload-credentials", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          fileName: file.name,
+          fileSize: file.size,
+          fileType: file.type,
+          mediaType: "document", // Request document type credentials (usually R2)
+          encryptedField,
+          honeypot,
+        }),
+        signal,
+      });
+
+      if (!credentialsResponse.ok) {
+        const errorData = await credentialsResponse.json();
+        throw new Error(
+          errorData.message || "Failed to get upload credentials"
+        );
+      }
+
+      const credentialsData = await credentialsResponse.json();
+
+      if (!credentialsData.success) {
+        throw new Error(
+          credentialsData.message || "Failed to get upload credentials"
+        );
+      }
+
+      // Extract upload information from response
+      const { credentials, mediaType } = credentialsData;
+      const uploadUrl = credentials?.uploadUrl;
+      const platform = credentials?.platform;
+
+      if (!uploadUrl) {
+        throw new Error("Failed to get upload URL");
+      }
+
+      // 2. Upload to cloud storage
+
+      let uploadResponse: Response;
+
+      // Use different upload methods based on platform type
+      if (platform === "cloudflare_images") {
+        // Cloudflare Images uses FormData + POST
+        const formData = new FormData();
+        formData.append("file", file);
+
+        uploadResponse = await fetch(uploadUrl, {
+          method: "POST",
+          body: formData,
+          signal,
+        });
+      } else {
+        // Other platforms use PUT (e.g., pre-signed URLs)
+        uploadResponse = await fetch(uploadUrl, {
+          method: "PUT",
+          headers: {
+            "Content-Type": file.type,
+          },
+          body: file,
+          signal,
+        });
+      }
+
+      if (!uploadResponse.ok) {
+        throw new Error(
+          `File upload failed: ${uploadResponse.status} ${uploadResponse.statusText}`
+        );
+      }
+
+      // Get resource identifier after upload
+      let resourceId: string;
+      let publicUrl: string;
+
+      if (platform === "cloudflare_images") {
+        // Cloudflare Images returns JSON, extract result.id
+        const uploadResult = await uploadResponse.json();
+        resourceId = uploadResult?.result?.id || uploadUrl;
+        // Construct Cloudflare Images public URL
+        // Format: https://imagedelivery.net/{account_hash}/{image_id}/public
+        const accountHash = uploadUrl.split("/")[3]; // Extract from upload URL
+        publicUrl = `https://imagedelivery.net/${accountHash}/${resourceId}/public`;
+      } else if (platform === "cloudflare_r2") {
+        // Cloudflare R2: uploadUrl is already the public URL (pre-signed or public bucket URL)
+        resourceId = uploadUrl.split("/").pop() || uploadUrl; // Extract filename from URL
+        publicUrl = uploadUrl; // Use the upload URL as public URL
+      } else {
+        // Other platforms use uploadUrl as resource identifier
+        resourceId = uploadUrl;
+        publicUrl = uploadUrl;
+      }
+
+      // 3. Insert Media object into database
+      const mediaPayload = {
+        name: file.name,
+        size: file.size,
+        mimeType: file.type,
+        mediaType,
+        resourceUrl: resourceId,
+        storageType: platform || "cloudflare_images",
+        encryptedField,
+        honeypot,
+      };
+
+      const createMediaResponse = await fetch("/api/create-media", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(mediaPayload),
+        signal,
+      });
+
+      if (!createMediaResponse.ok) {
+        const errorData = await createMediaResponse.json();
+        throw new Error(errorData.message || "Failed to create Media object");
+      }
+
+      const mediaData = await createMediaResponse.json();
+
+      if (!mediaData.success) {
+        throw new Error(mediaData.message || "Failed to create Media object");
+      }
+
+      // Return uploaded file information
+      return {
+        id: mediaData.mediaId,
+        name: file.name,
+        size: file.size,
+        url: publicUrl, // Use public URL instead of resource ID
+      };
+    };
+
+    const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+      const files = e.target.files;
+
+      if (!files || files.length === 0) return;
+
+      const file = files[0]; // Only take the first file
+
+      // Create new AbortController
+      const abortController = new AbortController();
+      abortControllerRef.current = abortController;
+
+      setIsUploading(true);
+      onUploadStateChange?.(true); // 通知父组件开始上传
+      setUploadError("");
+
+      try {
+        // Validate file size
+        if (file.size > maxSize) {
+          throw new Error(
+            `File ${file.name} exceeds ${maxSize / 1024 / 1024}MB limit`
+          );
+        }
+
+        // Upload file
+        const uploadedFileData = await uploadFile(file, abortController.signal);
+        setUploadedFile(uploadedFileData);
+        onChange?.(uploadedFileData); // Pass complete file info
+      } catch (error) {
+        // Don't show error if user cancelled
+        if (error instanceof Error && error.name === "AbortError") {
+          console.log("User cancelled upload");
+        } else {
+          console.error("File upload failed:", error);
+          setUploadError(
+            error instanceof Error ? error.message : "File upload failed"
+          );
+        }
+      } finally {
+        setIsUploading(false);
+        onUploadStateChange?.(false); // 通知父组件上传结束
+        abortControllerRef.current = null;
+        // Clear input to allow re-selecting the same file
+        if (fileInputRef.current) {
+          fileInputRef.current.value = "";
+        }
+      }
+    };
+
+    const handleClick = () => {
+      // Don't allow selection if uploading or file already exists
+      if (isUploading || uploadedFile) return;
+      fileInputRef.current?.click();
+    };
+
+    const handleRemoveFile = (e: React.MouseEvent) => {
+      e.stopPropagation();
+      setUploadedFile(null);
+      onChange?.(null); // Pass null when file is removed
+      setUploadError("");
+    };
+
+    const handleCancelUpload = (e: React.MouseEvent) => {
+      e.stopPropagation();
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+    };
+
+    const getDisplayText = () => {
+      if (isUploading) return uploadingText;
+      if (uploadedFile) {
+        return selectedText.replace("{name}", uploadedFile.name);
+      }
+      return placeholder;
+    };
+
+    return (
+      <div
+        ref={ref}
+        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 opacity-70 text-sm pointer-events-none whitespace-nowrap z-10",
+            labelClassName
+          )}
+        >
+          {label}
+        </label>
+
+        {/* Hidden file input */}
+        <input
+          ref={fileInputRef}
+          type="file"
+          id={name}
+          name={name}
+          required={required}
+          accept={accept}
+          onChange={handleFileChange}
+          disabled={!!uploadedFile}
+          className="hidden"
+        />
+
+        {/* Simulated input box upload area */}
+        <div
+          onClick={handleClick}
+          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 transition-colors duration-200 flex items-center justify-start min-h-[2.5rem]",
+            isUploading || uploadedFile
+              ? "cursor-not-allowed opacity-75"
+              : "cursor-pointer hover:bg-white",
+            inputClassName
+          )}
+          style={{ paddingLeft }}
+        >
+          <span
+            className={clsx(
+              "pl-6 text-sm font-medium flex-1 mr-4",
+              uploadedFile ? "text-gray-900" : "text-gray-600"
+            )}
+          >
+            {getDisplayText()}
+          </span>
+          {isUploading ? (
+            <button
+              type="button"
+              onClick={handleCancelUpload}
+              className="ml-2 p-1 hover:bg-gray-100 rounded-full transition-colors flex-shrink-0 flex items-center gap-1"
+              title="Cancel upload"
+            >
+              <div className="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-primary-500" />
+              <svg
+                className="w-3 h-3 text-gray-500"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              </svg>
+            </button>
+          ) : uploadedFile ? (
+            <button
+              type="button"
+              onClick={handleRemoveFile}
+              className="ml-2 p-1 hover:bg-red-100 rounded-full transition-colors flex-shrink-0"
+              title="Delete file"
+            >
+              <svg
+                className="w-4 h-4 text-red-500"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              </svg>
+            </button>
+          ) : (
+            <svg
+              className="w-5 h-5 text-gray-400 flex-shrink-0"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+              />
+            </svg>
+          )}
+        </div>
+
+        {/* Display error message */}
+        {(error || uploadError) && (
+          <p className="text-red-500 mt-1 text-sm">{error || uploadError}</p>
+        )}
+      </div>
+    );
+  }
+);

package/src/components/ContactForm/Input.tsx

@@ -0,0 +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>
+  );
+});

package/src/components/ContactForm/Input2.tsx

@@ -0,0 +1,59 @@
+import clsx from "clsx";
+import { forwardRef } from "react";
+import { InputProps } from "./Input";
+import { useInlineLabelPadding } from "./hooks/useInlineLabelPadding";
+
+export const Input2 = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
+  const {
+    label,
+    name,
+    required,
+    requiredClassName,
+    className,
+    labelClassName,
+    inputClassName,
+    type = "text",
+    autoFocus,
+    value,
+    placeholder,
+    onChange,
+    error,
+    ...rest
+  } = props;
+
+  const { labelRef, paddingLeft } = useInlineLabelPadding(16);
+
+  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 opacity-70 text-sm pointer-events-none whitespace-nowrap",
+          labelClassName
+        )}
+      >
+        {label}
+        {required ? <span className={requiredClassName}>*</span> : ""}
+      </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/components/ContactForm/Submit.tsx

@@ -0,0 +1,48 @@
+export type SubmitProps = {
+  needClasses?: string;
+  title: string;
+  className?: string;
+  rawHtml?: string;
+  spinner?: React.ReactNode;
+  submitting?: boolean;
+  disabled?: boolean;
+  onClick?: (e: React.MouseEvent) => void;
+};
+
+export const Submit: React.FC<SubmitProps> = (props) => {
+  const {
+    title = "Send Message",
+    className,
+    spinner,
+    submitting,
+    disabled,
+    onClick,
+    rawHtml,
+    needClasses,
+    ...rest
+  } = props;
+  return (
+    <>
+      <button
+        type="button"
+        className={className}
+        disabled={disabled ?? submitting}
+        onClick={onClick}
+        {...rest}
+      >
+        {submitting && spinner}
+        {rawHtml ? (
+          <div
+            style={{ display: "contents" }}
+            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>
+    </>
+  );
+};