@bouko/react 2.7.4 → 2.7.6

package/dist/assets/icons/camera.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em">
+    <path 
+        d="M220.6 121.2L271.1 96 448 96l0 96-114.8 0c-21.9-15.1-48.5-24-77.2-24s-55.2 8.9-77.2 24L64 192l0-64 128 0c9.9 0 19.7-2.3 28.6-6.8zM0 128L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L271.1 32c-9.9 0-19.7 2.3-28.6 6.8L192 64l-32 0 0-16c0-8.8-7.2-16-16-16L80 32c-8.8 0-16 7.2-16 16l0 16C28.7 64 0 92.7 0 128zM168 304a88 88 0 1 1 176 0 88 88 0 1 1 -176 0z" 
+        fill="currentColor" 
+    />
+</svg>

package/dist/components/input.d.ts

@@ -11,6 +11,7 @@ type FieldProps<T> = {
 };
 type Variant = "normal" | "ghost";
 type Props = Omit<FieldProps<string>, "id"> & {
+    type?: "text" | "number" | "email" | "password";
     variant?: Variant;
     style?: string;
     placeholder?: string;
@@ -33,5 +34,5 @@ type Props = Omit<FieldProps<string>, "id"> & {
  * @param {string} placeholder - Placeholder text for the input. (optional)
  * @param {Function} onEnter - Callback when `Enter` key is pressed. (optional)
 **/
-export default function Input({ variant, style, value, update, onEnter, disabled, placeholder, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export default function Input({ type, variant, style, value, update, onEnter, disabled, placeholder, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/input.js

@@ -25,8 +25,8 @@ const fieldStyles = {
  * @param {string} placeholder - Placeholder text for the input. (optional)
  * @param {Function} onEnter - Callback when `Enter` key is pressed. (optional)
 **/
-export default function Input({ variant, style, value, update, onEnter, disabled, placeholder, ...props }) {
-    return (_jsx(Field, { ...props, children: _jsx("input", { className: cn(styles({ variant }), style), placeholder: placeholder, value: value, onChange: ({ target: { value } }) => update?.(value), onKeyUp: ({ key }) => key === "Enter" && value ? onEnter?.(value) : null, disabled: disabled }) }));
+export default function Input({ type = "text", variant, style, value, update, onEnter, disabled, placeholder, ...props }) {
+    return (_jsx(Field, { ...props, children: _jsx("input", { type: type, className: cn(styles({ variant }), style), placeholder: placeholder, value: value, onChange: ({ target: { value } }) => update?.(value), onKeyUp: ({ key }) => key === "Enter" && value ? onEnter?.(value) : null, disabled: disabled }) }));
 }
 const styles = tv({
     base: "px-3 py-2 duration-200 rounded text-xs sm:text-sm placeholder:text-primary-darker text-primary disabled:brightness-90 disabled:cursor-not-allowed",

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

@@ -3,8 +3,8 @@ type Props<T> = {
     id?: string;
     style?: string;
     placeholder?: string;
-    value?: File;
-    update?: (x: File) => void;
+    value?: string;
+    update?: (x: string) => void;
     updateForm?: Dispatch<SetStateAction<T>>;
     disabled?: boolean;
 };

package/dist/components/upload/image.js

@@ -6,27 +6,34 @@ import Camera from "../../assets/icons/camera.svg";
 export function ImageUploader({ id, style, placeholder, value, update, updateForm, disabled = false }) {
     const [preview, setPreview] = useState();
     useEffect(() => {
-        if (value) {
-            const imageUrl = URL.createObjectURL(value);
-            setPreview(imageUrl);
-        }
+        if (value)
+            setPreview(value);
     }, [value]);
     const ref = useRef(null);
     const uploadFile = () => ref.current?.click();
     if (!update)
         disabled = true;
-    const handleFileChange = (e) => {
+    const handleFileChange = async (e) => {
         const file = e.target.files?.[0];
         if (!file)
             return;
+        const base64 = await fileToBase64(file);
         if (id && updateForm)
-            updateForm(x => ({ ...x, [id]: file }));
+            updateForm(x => ({ ...x, [id]: base64 }));
         else
-            update?.(file);
+            update?.(base64);
     };
     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",
 };
+function fileToBase64(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(reader.result); // data:image/...;base64,...
+        reader.onerror = reject;
+        reader.readAsDataURL(file);
+    });
+}
 export default ImageUploader;

package/package.json

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