updated types and changed return of imagepicker

This commit is contained in:
PhilReact 2025-05-09 17:01:08 +03:00
parent 252cd3d377
commit 300f30d0d9
4 changed files with 31 additions and 17 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "qapp-core", "name": "qapp-core",
"version": "1.0.26", "version": "1.0.27",
"description": "Qortal's core React library with global state, UI components, and utilities", "description": "Qortal's core React library with global state, UI components, and utilities",
"main": "dist/index.js", "main": "dist/index.js",
"module": "dist/index.mjs", "module": "dist/index.mjs",

View File

@ -10,6 +10,13 @@ import { fileToBase64 } from "../utils/base64";
type Mode = "single" | "multi"; type Mode = "single" | "multi";
interface ImageResult {
base64: string;
name: string;
type: string;
size: number;
}
interface CommonProps { interface CommonProps {
children: React.ReactNode; children: React.ReactNode;
mode?: Mode; mode?: Mode;
@ -19,12 +26,12 @@ interface CommonProps {
interface SingleModeProps extends CommonProps { interface SingleModeProps extends CommonProps {
mode?: "single"; mode?: "single";
onPick: (base64: string) => void; onPick: (result: ImageResult) => void;
} }
interface MultiModeProps extends CommonProps { interface MultiModeProps extends CommonProps {
mode: "multi"; mode: "multi";
onPick: (base64s: string[]) => void; onPick: (results: ImageResult[]) => void;
} }
type ImageUploaderProps = SingleModeProps | MultiModeProps; type ImageUploaderProps = SingleModeProps | MultiModeProps;
@ -33,19 +40,18 @@ export const ImagePicker: React.FC<ImageUploaderProps> = ({
children, children,
onPick, onPick,
quality = 0.6, quality = 0.6,
maxWidth= 1200, maxWidth = 1200,
mode = "single", mode = "single",
}) => { }) => {
const onDrop = useCallback( const onDrop = useCallback(
async (acceptedFiles: File[]) => { async (acceptedFiles: File[]) => {
const images = const images = mode === "single" ? acceptedFiles.slice(0, 1) : acceptedFiles;
mode === "single" ? acceptedFiles.slice(0, 1) : acceptedFiles;
const base64s: string[] = []; const results: ImageResult[] = [];
for (const image of images) { for (const image of images) {
try { try {
let fileToConvert: File; let fileToConvert: Blob;
if (image.type === "image/gif") { if (image.type === "image/gif") {
if (image.size > 500 * 1024) { if (image.size > 500 * 1024) {
@ -54,15 +60,13 @@ export const ImagePicker: React.FC<ImageUploaderProps> = ({
} }
fileToConvert = image; fileToConvert = image;
} else { } else {
fileToConvert = await new Promise<File>((resolve, reject) => { fileToConvert = await new Promise<Blob>((resolve, reject) => {
new Compressor(image, { new Compressor(image, {
quality, quality,
maxWidth, maxWidth,
mimeType: "image/webp", mimeType: "image/webp",
success(result) { success(result) {
resolve( resolve(result);
new File([result], image.name, { type: "image/webp" })
);
}, },
error(err) { error(err) {
console.error("Compression error:", err); console.error("Compression error:", err);
@ -73,21 +77,27 @@ export const ImagePicker: React.FC<ImageUploaderProps> = ({
} }
const base64 = await fileToBase64(fileToConvert); const base64 = await fileToBase64(fileToConvert);
base64s.push(base64);
results.push({
base64,
name: image.name,
type: image.type,
size: image.size,
});
} catch (error) { } catch (error) {
console.error("File processing error:", error); console.error("File processing error:", error);
} }
} }
if (mode === "single") { if (mode === "single") {
if (base64s[0]) { if (results[0]) {
(onPick as (base64: string) => void)(base64s[0]); (onPick as (result: ImageResult) => void)(results[0]);
} }
} else { } else {
(onPick as (base64s: string[]) => void)(base64s); (onPick as (results: ImageResult[]) => void)(results);
} }
}, },
[onPick, mode] [onPick, mode, quality, maxWidth]
); );
const { const {

View File

@ -236,6 +236,7 @@ export type PublishMultipleQdnResourcesQortalRequest =
export interface PublishQdnResourceQortalRequestBase extends BaseRequest { export interface PublishQdnResourceQortalRequestBase extends BaseRequest {
action: "PUBLISH_QDN_RESOURCE"; action: "PUBLISH_QDN_RESOURCE";
service: Service; service: Service;
name?: string;
identifier: string; identifier: string;
title?: string; title?: string;
description?: string; description?: string;

View File

@ -92,6 +92,7 @@ export type ForeignCoin =
| { | {
service: Service service: Service
identifier: string identifier: string
name?: string
title?: string title?: string
description?: string description?: string
category?: string category?: string
@ -103,6 +104,7 @@ export type ForeignCoin =
| { | {
service: Service service: Service
identifier: string identifier: string
name?: string
title?: string title?: string
description?: string description?: string
category?: string category?: string
@ -114,6 +116,7 @@ export type ForeignCoin =
| { | {
service: Service service: Service
identifier: string identifier: string
name: string
title?: string title?: string
description?: string description?: string
category?: string category?: string