@xsolla/xui-image-uploader 0.147.1

package/native/index.mjs

@@ -0,0 +1,641 @@
+// src/ImageUploader.tsx
+import React, { useRef, useState, useEffect, forwardRef } from "react";
+
+// ../../foundation/primitives-native/src/Box.tsx
+import {
+  View,
+  Pressable,
+  Image
+} from "react-native";
+import { jsx } from "react/jsx-runtime";
+var Box = ({
+  children,
+  onPress,
+  onLayout,
+  onMoveShouldSetResponder,
+  onResponderGrant,
+  onResponderMove,
+  onResponderRelease,
+  onResponderTerminate,
+  backgroundColor,
+  borderColor,
+  borderWidth,
+  borderBottomWidth,
+  borderBottomColor,
+  borderTopWidth,
+  borderTopColor,
+  borderLeftWidth,
+  borderLeftColor,
+  borderRightWidth,
+  borderRightColor,
+  borderRadius,
+  borderStyle,
+  height,
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+  margin,
+  marginTop,
+  marginBottom,
+  marginLeft,
+  marginRight,
+  flexDirection,
+  alignItems,
+  justifyContent,
+  position,
+  top,
+  bottom,
+  left,
+  right,
+  width,
+  minWidth,
+  minHeight,
+  maxWidth,
+  maxHeight,
+  flex,
+  overflow,
+  zIndex,
+  hoverStyle,
+  pressStyle,
+  style,
+  "data-testid": dataTestId,
+  testID,
+  as,
+  src,
+  alt,
+  ...rest
+}) => {
+  const getContainerStyle = (pressed) => ({
+    backgroundColor: pressed && pressStyle?.backgroundColor ? pressStyle.backgroundColor : backgroundColor,
+    borderColor,
+    borderWidth,
+    borderBottomWidth,
+    borderBottomColor,
+    borderTopWidth,
+    borderTopColor,
+    borderLeftWidth,
+    borderLeftColor,
+    borderRightWidth,
+    borderRightColor,
+    borderRadius,
+    borderStyle,
+    overflow,
+    zIndex,
+    height,
+    width,
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight,
+    padding,
+    paddingHorizontal,
+    paddingVertical,
+    margin,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    flexDirection,
+    alignItems,
+    justifyContent,
+    position,
+    top,
+    bottom,
+    left,
+    right,
+    flex,
+    ...style
+  });
+  const finalTestID = dataTestId || testID;
+  const {
+    role,
+    tabIndex,
+    onKeyDown,
+    onKeyUp,
+    "aria-label": _ariaLabel,
+    "aria-labelledby": _ariaLabelledBy,
+    "aria-current": _ariaCurrent,
+    "aria-disabled": _ariaDisabled,
+    "aria-live": _ariaLive,
+    className,
+    "data-testid": _dataTestId,
+    ...nativeRest
+  } = rest;
+  if (as === "img" && src) {
+    const imageStyle = {
+      width,
+      height,
+      borderRadius,
+      position,
+      top,
+      bottom,
+      left,
+      right,
+      ...style
+    };
+    return /* @__PURE__ */ jsx(
+      Image,
+      {
+        source: { uri: src },
+        style: imageStyle,
+        testID: finalTestID,
+        resizeMode: "cover",
+        ...nativeRest
+      }
+    );
+  }
+  if (onPress) {
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        onPress,
+        onLayout,
+        onMoveShouldSetResponder,
+        onResponderGrant,
+        onResponderMove,
+        onResponderRelease,
+        onResponderTerminate,
+        style: ({ pressed }) => getContainerStyle(pressed),
+        testID: finalTestID,
+        ...nativeRest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: getContainerStyle(),
+      testID: finalTestID,
+      onLayout,
+      onMoveShouldSetResponder,
+      onResponderGrant,
+      onResponderMove,
+      onResponderRelease,
+      onResponderTerminate,
+      ...nativeRest,
+      children
+    }
+  );
+};
+
+// ../../foundation/primitives-native/src/Text.tsx
+import {
+  Text as RNText,
+  StyleSheet
+} from "react-native";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var roleMap = {
+  alert: "alert",
+  heading: "header",
+  button: "button",
+  link: "link",
+  text: "text"
+};
+var parseNumericValue = (value) => {
+  if (value === void 0) return void 0;
+  if (typeof value === "number") return value;
+  const parsed = parseFloat(value);
+  return isNaN(parsed) ? void 0 : parsed;
+};
+var Text = ({
+  children,
+  color,
+  fontSize,
+  fontWeight,
+  fontFamily,
+  textAlign,
+  lineHeight,
+  numberOfLines,
+  id,
+  role,
+  style: styleProp,
+  ...props
+}) => {
+  let resolvedFontFamily = fontFamily ? fontFamily.split(",")[0].replace(/['"]/g, "").trim() : void 0;
+  if (resolvedFontFamily === "Pilat Wide" || resolvedFontFamily === "Pilat Wide Bold" || resolvedFontFamily === "Aktiv Grotesk") {
+    resolvedFontFamily = void 0;
+  }
+  const incomingStyle = StyleSheet.flatten(styleProp);
+  const baseStyle = {
+    color: color ?? incomingStyle?.color,
+    fontSize: typeof fontSize === "number" ? fontSize : void 0,
+    fontWeight,
+    fontFamily: resolvedFontFamily,
+    textDecorationLine: props.textDecoration,
+    textAlign: textAlign ?? incomingStyle?.textAlign,
+    lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),
+    marginTop: parseNumericValue(
+      incomingStyle?.marginTop
+    ),
+    marginBottom: parseNumericValue(
+      incomingStyle?.marginBottom
+    )
+  };
+  const accessibilityRole = role ? roleMap[role] : void 0;
+  return /* @__PURE__ */ jsx2(
+    RNText,
+    {
+      style: baseStyle,
+      numberOfLines,
+      testID: id,
+      accessibilityRole,
+      children
+    }
+  );
+};
+
+// ../../foundation/primitives-native/src/index.tsx
+var isWeb = false;
+
+// src/ImageUploader.tsx
+import {
+  useId,
+  useResolvedTheme
+} from "@xsolla/xui-core";
+import { Image as Image2, TrashCan } from "@xsolla/xui-icons-base";
+import { Spinner } from "@xsolla/xui-spinner";
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+var ImageUploader = forwardRef(
+  ({
+    size = "xl",
+    placeholder = "Upload",
+    uploadingPlaceholder = "Uploading",
+    description,
+    errorMessage,
+    wideView = false,
+    accept = "image/*",
+    openPicker,
+    value,
+    onUpload,
+    onChange,
+    onDelete,
+    disabled = false,
+    loading = false,
+    themeMode,
+    themeProductContext
+  }, ref) => {
+    const { theme } = useResolvedTheme({ themeMode, themeProductContext });
+    const fileInputRef = useRef(null);
+    const isControlled = value !== void 0;
+    const [internalPreview, setInternalPreview] = useState(null);
+    const [isHover, setIsHover] = useState(false);
+    const [isFocus, setIsFocus] = useState(false);
+    const [isPreviewHover, setIsPreviewHover] = useState(false);
+    const [isHoverless] = useState(
+      () => !isWeb || typeof window !== "undefined" && !!window.matchMedia?.("(hover: none)").matches
+    );
+    const reactId = useId();
+    const baseId = `image-uploader-${reactId.replace(/[^a-zA-Z0-9-]/g, "")}`;
+    const descriptionId = `${baseId}-description`;
+    const errorId = `${baseId}-error`;
+    const preview = isControlled ? value?.url ?? null : internalPreview;
+    useEffect(() => {
+      if (!isControlled && value === null) setInternalPreview(null);
+    }, [isControlled, value]);
+    React.useImperativeHandle(
+      ref,
+      () => fileInputRef.current,
+      []
+    );
+    const sizeStyles = theme.sizing.imageUploader(size);
+    const inputColors = theme.colors.control.input;
+    const focusColors = theme.colors.control.focus;
+    const alertBorder = theme.colors.control.alert.border;
+    const alertText = theme.colors.content.alert.primary;
+    const scrim = theme.colors.layer.scrim;
+    const hasError = !!errorMessage;
+    let state;
+    if (disabled) state = "disable";
+    else if (loading) state = "uploading";
+    else if (hasError) state = "error";
+    else if (preview)
+      state = isPreviewHover || isHoverless ? "uploadedHover" : "uploaded";
+    else if (isFocus) state = "focus";
+    else if (isHover) state = "hover";
+    else state = "default";
+    const emitFile = (img) => {
+      if (!isControlled) setInternalPreview(img.uri);
+      onUpload?.(img);
+      onChange?.({
+        filename: img.name,
+        url: img.uri
+      });
+    };
+    const handleWebFile = (file) => {
+      if (!file.type.startsWith("image/")) return;
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const uri = e.target?.result;
+        emitFile({
+          name: file.name,
+          size: file.size,
+          uri,
+          mimeType: file.type,
+          file
+        });
+      };
+      reader.readAsDataURL(file);
+    };
+    const handleClick = async () => {
+      if (disabled || loading) return;
+      if (preview) {
+        removeImage();
+        return;
+      }
+      if (openPicker) {
+        const picked = await openPicker();
+        if (picked) emitFile(picked);
+        return;
+      }
+      if (isWeb) {
+        fileInputRef.current?.click();
+      }
+    };
+    const handleFileChange = (e) => {
+      const file = e.target.files?.[0];
+      e.target.value = "";
+      if (file) handleWebFile(file);
+    };
+    const handleDragOver = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!disabled && !loading && !preview) setIsHover(true);
+    };
+    const handleDragLeave = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsHover(false);
+    };
+    const handleDrop = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsHover(false);
+      if (disabled || loading || preview) return;
+      const file = e.dataTransfer.files?.[0];
+      if (file) handleWebFile(file);
+    };
+    const removeImage = (e) => {
+      e?.stopPropagation?.();
+      if (!isControlled) setInternalPreview(null);
+      setIsPreviewHover(false);
+      onDelete?.();
+      onChange?.(null);
+      if (isWeb && fileInputRef.current) fileInputRef.current.value = "";
+    };
+    let backgroundColor = inputColors.bg;
+    let borderColor = inputColors.border;
+    let borderStyle = "dashed";
+    let labelColor = inputColors.text;
+    let descriptionColor = inputColors.placeholder;
+    let iconColor = inputColors.text;
+    switch (state) {
+      case "hover":
+        backgroundColor = inputColors.bgHover;
+        borderColor = inputColors.borderHover;
+        break;
+      case "focus":
+      case "uploading":
+        backgroundColor = focusColors.bg;
+        borderColor = focusColors.border;
+        break;
+      case "uploaded":
+      case "uploadedHover":
+        backgroundColor = "transparent";
+        borderColor = "transparent";
+        break;
+      case "error":
+        backgroundColor = inputColors.bg;
+        borderColor = alertBorder;
+        borderStyle = "solid";
+        labelColor = alertText;
+        iconColor = alertText;
+        break;
+      case "disable":
+        backgroundColor = inputColors.bgDisable;
+        borderColor = inputColors.borderDisable;
+        labelColor = inputColors.textDisable;
+        descriptionColor = inputColors.textDisable;
+        iconColor = inputColors.textDisable;
+        break;
+    }
+    const rootGap = state === "error" ? sizeStyles.errorGap : 0;
+    const renderInner = () => {
+      if (state === "uploaded" || state === "uploadedHover") {
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx3(
+            Box,
+            {
+              as: "img",
+              src: preview || void 0,
+              alt: value?.filename ?? "Uploaded image",
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              borderRadius: sizeStyles.radius,
+              resizeMode: "cover",
+              ...isWeb && { width: "100%", height: "100%" },
+              style: isWeb ? { objectFit: "cover" } : void 0
+            }
+          ),
+          state === "uploadedHover" && !disabled && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx3(
+              Box,
+              {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                backgroundColor: scrim,
+                borderRadius: sizeStyles.radius,
+                ...isWeb && { "aria-hidden": "true" }
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              Box,
+              {
+                position: "relative",
+                width: sizeStyles.iconSize,
+                height: sizeStyles.iconSize,
+                alignItems: "center",
+                justifyContent: "center",
+                zIndex: 1,
+                pointerEvents: "none",
+                ...isWeb && { "aria-hidden": "true" },
+                children: /* @__PURE__ */ jsx3(TrashCan, { size: sizeStyles.iconSize, color: "#ffffff" })
+              }
+            )
+          ] })
+        ] });
+      }
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        state === "uploading" ? /* @__PURE__ */ jsx3(
+          Spinner,
+          {
+            size,
+            color: theme.colors.content.brand.primary,
+            ...isWeb && { "aria-hidden": "true" }
+          }
+        ) : /* @__PURE__ */ jsx3(Box, { ...isWeb && { "aria-hidden": "true" }, children: /* @__PURE__ */ jsx3(Image2, { size: sizeStyles.iconSize, color: iconColor }) }),
+        placeholder && /* @__PURE__ */ jsx3(
+          Text,
+          {
+            "data-testid": "image-uploader__placeholder",
+            color: labelColor,
+            fontSize: sizeStyles.labelFontSize,
+            lineHeight: sizeStyles.labelLineHeight,
+            fontWeight: "500",
+            textAlign: "center",
+            numberOfLines: 1,
+            style: isWeb ? {
+              maxWidth: "100%",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            } : void 0,
+            children: state === "uploading" ? uploadingPlaceholder : placeholder
+          }
+        ),
+        description && wideView && state !== "uploading" && state !== "error" && (typeof description === "string" ? /* @__PURE__ */ jsx3(
+          Text,
+          {
+            "data-testid": "image-uploader__description",
+            color: descriptionColor,
+            fontSize: sizeStyles.descriptionFontSize,
+            lineHeight: sizeStyles.descriptionLineHeight,
+            textAlign: "center",
+            numberOfLines: 1,
+            style: isWeb ? {
+              maxWidth: "100%",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            } : void 0,
+            ...isWeb && { id: descriptionId },
+            children: description
+          }
+        ) : /* @__PURE__ */ jsx3(
+          Box,
+          {
+            "data-testid": "image-uploader__description",
+            ...isWeb && { id: descriptionId },
+            children: description
+          }
+        ))
+      ] });
+    };
+    const webOnlyHandlers = isWeb ? {
+      onMouseEnter: () => {
+        if (disabled || loading) return;
+        if (preview) setIsPreviewHover(true);
+        else setIsHover(true);
+      },
+      onMouseLeave: () => {
+        if (preview) setIsPreviewHover(false);
+        else setIsHover(false);
+      },
+      onFocus: (e) => {
+        if (disabled || loading || preview) return;
+        if (typeof e.target?.matches === "function" && !e.target.matches(":focus-visible")) {
+          return;
+        }
+        setIsFocus(true);
+      },
+      onBlur: () => setIsFocus(false),
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop
+    } : {};
+    const webOnlyStyle = isWeb ? {
+      boxSizing: "border-box",
+      display: "flex",
+      cursor: disabled || loading ? "not-allowed" : "pointer",
+      outline: "none",
+      transition: "background-color 0.15s ease, border-color 0.15s ease"
+    } : {};
+    const buttonAriaLabel = preview ? `Remove image${value?.filename ? `: ${value.filename}` : ""}` : state === "uploading" ? uploadingPlaceholder : placeholder;
+    const describedBy = [
+      state === "error" && errorMessage ? errorId : null,
+      description && wideView && state !== "uploading" && state !== "error" ? descriptionId : null
+    ].filter(Boolean).join(" ") || void 0;
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        "data-testid": "image-uploader",
+        flexDirection: "column",
+        gap: rootGap,
+        alignItems: "flex-start",
+        width: wideView ? "100%" : void 0,
+        maxWidth: wideView ? sizeStyles.wideWidth : void 0,
+        children: [
+          isWeb && /* @__PURE__ */ jsx3(
+            "input",
+            {
+              type: "file",
+              ref: fileInputRef,
+              accept,
+              onChange: handleFileChange,
+              style: { display: "none" },
+              disabled,
+              tabIndex: -1,
+              "aria-hidden": "true",
+              "data-testid": "image-uploader__input"
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            Box,
+            {
+              as: isWeb ? "button" : "div",
+              disabled: disabled || loading,
+              "data-testid": "image-uploader__button",
+              onPress: handleClick,
+              ...isWeb && {
+                "aria-label": buttonAriaLabel,
+                "aria-busy": loading || void 0,
+                "aria-invalid": state === "error" || void 0,
+                "aria-describedby": describedBy
+              },
+              ...webOnlyHandlers,
+              position: "relative",
+              width: wideView ? "100%" : sizeStyles.box,
+              maxWidth: wideView ? sizeStyles.wideWidth : void 0,
+              height: sizeStyles.box,
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: sizeStyles.gap,
+              padding: state === "uploaded" ? 0 : sizeStyles.padding,
+              borderWidth: sizeStyles.borderWidth,
+              borderStyle,
+              borderColor,
+              borderRadius: sizeStyles.radius,
+              backgroundColor,
+              overflow: "hidden",
+              style: webOnlyStyle,
+              children: renderInner()
+            }
+          ),
+          state === "error" && errorMessage && /* @__PURE__ */ jsx3(
+            Text,
+            {
+              "data-testid": "image-uploader__error",
+              color: alertText,
+              fontSize: sizeStyles.errorFontSize,
+              lineHeight: sizeStyles.errorLineHeight,
+              ...isWeb && { id: errorId, role: "alert" },
+              children: errorMessage
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ImageUploader.displayName = "ImageUploader";
+export {
+  ImageUploader
+};
+//# sourceMappingURL=index.mjs.map