@bouko/react 2.7.2 → 2.7.3

package/dist/components/index.d.ts

@@ -10,6 +10,7 @@ export { default as IconButton } from "./button/icon";
 export { default as Badge } from "./text/badge";
 export { default as Dropdown } from "./dropdown/normal";
 export { default as FileUploader } from "./upload/file";
+export { ImageUploader } from "./upload/image";
 export * from "./animate";
 export * from "./list";
 export * from "./carousel";

package/dist/components/index.js

@@ -10,6 +10,7 @@ export { default as IconButton } from "./button/icon";
 export { default as Badge } from "./text/badge";
 export { default as Dropdown } from "./dropdown/normal";
 export { default as FileUploader } from "./upload/file";
+export { ImageUploader } from "./upload/image";
 export * from "./animate";
 export * from "./list";
 export * from "./carousel";

package/dist/components/upload/image.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    style?: string;
+    placeholder?: string;
+    value?: File;
+    update?: (x: File) => void;
+    disabled?: boolean;
+};
+export declare function ImageUploader({ style, placeholder, value, update, disabled }: Props): import("react/jsx-runtime").JSX.Element;
+export default ImageUploader;

package/dist/components/upload/image.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { cn } from "@bouko/style";
+import Camera from "../../assets/icons/camera.svg";
+export function ImageUploader({ style, placeholder, value, update, disabled = false }) {
+    const [preview, setPreview] = useState();
+    useEffect(() => {
+        if (value) {
+            console.log(value);
+            setPreview(URL.createObjectURL(value));
+        }
+    }, [value]);
+    const ref = useRef(null);
+    const uploadFile = () => ref.current?.click();
+    if (!update)
+        disabled = true;
+    const handleFileChange = (e) => {
+        const file = e.target.files?.[0];
+        if (!file)
+            return;
+        update?.(file);
+    };
+    return (_jsxs("div", { className: cn(styles.container, style), onClick: uploadFile, children: [_jsx("input", { type: "file", className: "hidden", onChange: handleFileChange, ref: ref }), _jsx("img", { className: "absolute top-0 left-0 w-full h-full", src: preview || placeholder, alt: "Image Uploader" }), _jsx("div", { className: "flex justify-center items-center w-full h-full z-10 opacity-0 hover:opacity-50 bg-background-light/80 duration-200 cursor-pointer", children: _jsx(Camera, { className: "text-xl text-primary-light" }) })] }));
+}
+const styles = {
+    container: "relative shrink-0 border border-border rounded-md overflow-hidden",
+};
+export default ImageUploader;

package/package.json

@@ -1,7 +1,7 @@
 {
 
   "name": "@bouko/react",
-  "version": "2.7.2",
+  "version": "2.7.3",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",