@zjlab-fe/data-hub-ui 0.21.6 → 0.22.0

package/es/components/file-preview/parquet-preview/index.js

@@ -0,0 +1,54 @@
+import { __awaiter } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import DataTable from '../data-table/index.js';
+import { parseTable } from 'arrow-js-ffi';
+import initWasm, { wasmMemory, readParquet } from 'parquet-wasm';
+
+initWasm();
+let WASM_MEMORY;
+function ParquetPreview(props) {
+    var _a;
+    const ref = useRef(null);
+    const [parquetData, setParquetData] = useState();
+    const [containerHeight, setContainerHeight] = useState();
+    const [containerWidth, setContainerWidth] = useState();
+    useEffect(() => {
+        if (!WASM_MEMORY) {
+            WASM_MEMORY = wasmMemory();
+        }
+        let ffiTable;
+        (() => __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d;
+            try {
+                const resp = yield fetch(props.filePath);
+                const parquetUint8Array = new Uint8Array(yield resp.arrayBuffer());
+                // const start = new Date().getTime();
+                ffiTable = readParquet(parquetUint8Array).intoFFI();
+                const arrowTable = parseTable(WASM_MEMORY.buffer, ffiTable.arrayAddrs(), ffiTable.schemaAddr());
+                // 获取列名作为表头
+                const head = arrowTable.schema.fields.map((field) => field.name);
+                // console.log('+++ head', head);
+                // 获取数据
+                const data = [];
+                console.log('+++ arrowTable.numRows', arrowTable.numRows);
+                for (let i = 0; i < arrowTable.numRows; i++) {
+                    data.push(Object.assign(Object.assign({}, arrowTable.get(i).toJSON()), { key: i.toString() }));
+                }
+                // const end = new Date().getTime();
+                // console.log('+++ 耗时', end - start);
+                setParquetData({ head, data });
+                setContainerHeight((_a = ref.current) === null || _a === void 0 ? void 0 : _a.clientHeight);
+                setContainerWidth((_b = ref.current) === null || _b === void 0 ? void 0 : _b.clientWidth);
+                (_c = props === null || props === void 0 ? void 0 : props.onSuccess) === null || _c === void 0 ? void 0 : _c.call(props);
+                ffiTable.drop();
+            }
+            catch (e) {
+                (_d = props === null || props === void 0 ? void 0 : props.onError) === null || _d === void 0 ? void 0 : _d.call(props, e);
+            }
+        }))();
+    }, []);
+    return (jsx("div", { style: { height: '100%', overflow: 'auto', wordBreak: 'break-all' }, ref: ref, children: parquetData && (jsx(DataTable, { head: parquetData.head, data: parquetData.data, containerHeight: containerHeight, containerWidth: containerWidth, maxLines: (_a = props.tableConfig) === null || _a === void 0 ? void 0 : _a.maxLines })) }));
+}
+
+export { ParquetPreview as default };

package/es/components/file-preview/pdf-preview/index.js

@@ -0,0 +1,215 @@
+import { jsx } from 'react/jsx-runtime';
+import { appendAsset } from '../util.js';
+import { useRef, useEffect } from 'react';
+import { wrap } from './index.module.scss.js';
+
+class OutputScale {
+    constructor() {
+        const pixelRatio = window.devicePixelRatio || 1;
+        this.sx = pixelRatio;
+        this.sy = pixelRatio;
+    }
+    get scaled() {
+        return this.sx !== 1 || this.sy !== 1;
+    }
+}
+function approximateFraction(x) {
+    // Fast paths for int numbers or their inversions.
+    if (Math.floor(x) === x) {
+        return [x, 1];
+    }
+    const xinv = 1 / x;
+    const limit = 8;
+    if (xinv > limit) {
+        return [1, limit];
+    }
+    else if (Math.floor(xinv) === xinv) {
+        return [1, xinv];
+    }
+    const x_ = x > 1 ? xinv : x;
+    // a/b and c/d are neighbours in Farey sequence.
+    let a = 0, b = 1, c = 1, d = 1;
+    // Limiting search to order 8.
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+        // Generating next term in sequence (order of q).
+        const p = a + c, q = b + d;
+        if (q > limit) {
+            break;
+        }
+        if (x_ <= p / q) {
+            c = p;
+            d = q;
+        }
+        else {
+            a = p;
+            b = q;
+        }
+    }
+    let result;
+    // Select closest of the neighbours to x.
+    if (x_ - a / b < c / d - x_) {
+        result = x_ === x ? [a, b] : [b, a];
+    }
+    else {
+        result = x_ === x ? [c, d] : [d, c];
+    }
+    return result;
+}
+function roundToDivide(x, div) {
+    const r = x % div;
+    return r === 0 ? x : Math.round(x - r + div);
+}
+function PdfPreview(props) {
+    const { filePath } = props;
+    const pdfContainer = useRef(null);
+    const pageSize = 3;
+    const lastScrollTop = useRef(0);
+    // eslint-disable-next-line
+    const pdfDoc = useRef(null);
+    const totalPages = useRef(0);
+    const loadedHeight = useRef(0);
+    const currentPage = useRef(0);
+    const loading = useRef(false);
+    const onScroll = (e) => {
+        const currentScrollTop = e.target.scrollTop;
+        // console.log('totalPages.current', totalPages.current);
+        // console.log('currentScrollTop', currentScrollTop);
+        // console.log('lastScrollTop.current', lastScrollTop.current);
+        // console.log('currentPage.current', currentPage.current);
+        // console.log(
+        //   'loadedHeight.current - 200 - pdfContainer.current!.clientHeight',
+        //   loadedHeight.current - 200 - pdfContainer.current!.clientHeight,
+        // );
+        if (currentScrollTop > lastScrollTop.current &&
+            currentPage.current < totalPages.current &&
+            currentScrollTop > loadedHeight.current - 200 - pdfContainer.current.clientHeight) {
+            // debugger;
+            // 加载更多
+            loadMore();
+        }
+        lastScrollTop.current = currentScrollTop;
+    };
+    const loadMore = () => {
+        if (loading.current) {
+            return Promise.resolve();
+        }
+        // console.log('+++ load more');
+        loading.current = true;
+        // console.log('loading.current', loading.current);
+        const lastPage = currentPage.current + pageSize > totalPages.current
+            ? totalPages.current
+            : currentPage.current + pageSize;
+        return new Promise((resolve) => {
+            if (pdfDoc.current) {
+                const canvasContainer = pdfContainer.current;
+                let length = lastPage - currentPage.current;
+                for (let i = currentPage.current + 1; i <= lastPage; i++) {
+                    // 使用 pdfDoc.getPage（i） 获取第 i 页的数据
+                    pdfDoc.current
+                        .getPage(i)
+                        // eslint-disable-next-line
+                        .then((page) => {
+                        // 可通过scale来调节初始的缩放比
+                        const viewport = page.getViewport({
+                            scale: window.devicePixelRatio || 1,
+                        });
+                        // 创建一个 canvas 元素，并设置元素的画布属性
+                        const canvas = document.createElement('canvas');
+                        canvas.setAttribute('id', 'the-canvas' + i);
+                        const context = canvas.getContext('2d');
+                        const MAX_CANVAS_PIXELS = 16777216;
+                        const outputScale = new OutputScale();
+                        const maxCanvasPixels = MAX_CANVAS_PIXELS;
+                        const { width, height } = viewport;
+                        {
+                            const pixelsInViewport = width * height;
+                            const maxScale = Math.sqrt(maxCanvasPixels / pixelsInViewport);
+                            if (outputScale.sx > maxScale || outputScale.sy > maxScale) {
+                                outputScale.sx = maxScale;
+                                outputScale.sy = maxScale;
+                            }
+                        }
+                        const sfx = approximateFraction(outputScale.sx);
+                        const sfy = approximateFraction(outputScale.sy);
+                        canvas.width = roundToDivide(width * outputScale.sx, sfx[0]);
+                        canvas.height = roundToDivide(height * outputScale.sy, sfy[0]);
+                        const { style } = canvas;
+                        style.width = roundToDivide(width, sfx[1]) + 'px';
+                        style.height = roundToDivide(height, sfy[1]) + 'px';
+                        const transform = outputScale.scaled ? [outputScale.sx, 0, 0, outputScale.sy, 0, 0] : null;
+                        const renderContext = {
+                            canvasContext: context,
+                            transform,
+                            viewport,
+                        };
+                        // 将canvas元素加入到容器中
+                        canvasContainer.appendChild(canvas);
+                        // console.log('canvas.clientHeight', canvas.clientHeight);
+                        // 使用 page.render 将数据渲染到画布上
+                        return page.render(renderContext).promise.then(() => {
+                            return new Promise((_resolve) => {
+                                setTimeout(() => {
+                                    // console.log('timeout canvas.clientHeight', canvas.clientHeight);
+                                    loadedHeight.current = loadedHeight.current + canvas.clientHeight;
+                                    _resolve(1);
+                                });
+                            });
+                        });
+                    })
+                        // eslint-disable-next-line
+                        .catch((e) => { })
+                        .finally(() => {
+                        length--;
+                        if (length === 0) {
+                            if (loadedHeight.current < pdfContainer.current.clientHeight &&
+                                lastPage < totalPages.current) {
+                                setTimeout(loadMore);
+                            }
+                            resolve(1);
+                        }
+                    });
+                }
+            }
+            else {
+                resolve(0);
+            }
+        }).then(() => {
+            loading.current = false;
+            currentPage.current = lastPage;
+            // console.log('loading.current', loading.current);
+        });
+    };
+    useEffect(() => {
+        appendAsset([
+            'https://haina-datahub.zero2x.org/ossRoute/frontend/resources/npm/pdfjs-dist/4.7.76/build/pdf.min.mjs',
+            'https://haina-datahub.zero2x.org/ossRoute/frontend/resources/npm/pdfjs-dist/4.7.76/build/pdf.worker.min.mjs',
+        ]).then(() => {
+            // eslint-disable-next-line
+            const pdfjsLib = window.pdfjsLib;
+            pdfjsLib
+                .getDocument({
+                url: filePath,
+                cMapUrl: 'https://haina-datahub.zero2x.org/ossRoute/frontend/resources/npm/pdfjs-dist/4.7.76/cmaps/',
+                cMapPacked: true,
+            })
+                // eslint-disable-next-line
+                .promise.then((doc) => {
+                var _a;
+                pdfDoc.current = doc;
+                // pdf 的总页数
+                totalPages.current = doc.numPages;
+                loadMore();
+                (_a = props === null || props === void 0 ? void 0 : props.onSuccess) === null || _a === void 0 ? void 0 : _a.call(props);
+            })
+                // eslint-disable-next-line
+                .catch((e) => {
+                var _a;
+                (_a = props === null || props === void 0 ? void 0 : props.onError) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            });
+        });
+    }, [filePath]);
+    return jsx("div", { ref: pdfContainer, className: wrap, onScroll: onScroll });
+}
+
+export { PdfPreview as default };

package/es/components/file-preview/pdf-preview/index.module.scss.js

@@ -0,0 +1,16 @@
+var style = document.createElement('style');
+style.textContent = `.index-module__wrap___eXiLF {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  overflow: auto;
+}
+.index-module__wrap___eXiLF canvas {
+  max-width: 100%;
+}`;
+document.head.appendChild(style);
+
+var wrap = "index-module__wrap___eXiLF";
+
+export { wrap };

package/es/components/file-preview/table-preview/index.js

@@ -0,0 +1,43 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import DataTable from '../data-table/index.js';
+import { wrap } from './index.module.scss.js';
+
+function TablePreview(props) {
+    var _a, _b;
+    const ref = useRef(null);
+    const [csvData, setCsvData] = useState();
+    const [csvContainerHeight, setCsvContainerHeight] = useState();
+    const [csvContainerWidth, setCsvContainerWidth] = useState();
+    useEffect(() => {
+        var _a, _b;
+        const { tableConfig } = props;
+        const { header, rows = [] } = tableConfig || {};
+        if (header) {
+            const head = header;
+            const data = [];
+            rows.forEach((row, rowIndex) => {
+                const rowData = {
+                    key: rowIndex.toString(),
+                };
+                head.forEach((cell, index) => {
+                    rowData[cell] = row[index];
+                });
+                data.push(rowData);
+            });
+            setCsvData({
+                head,
+                data,
+            });
+            setCsvContainerHeight(ref.current.clientHeight);
+            setCsvContainerWidth(ref.current.clientWidth);
+            (_a = props === null || props === void 0 ? void 0 : props.onSuccess) === null || _a === void 0 ? void 0 : _a.call(props);
+        }
+        else {
+            (_b = props === null || props === void 0 ? void 0 : props.onError) === null || _b === void 0 ? void 0 : _b.call(props, new Error('tableConfig.header is required'));
+        }
+    }, []);
+    return (jsx("div", { ref: ref, className: wrap, children: csvData ? (jsx(DataTable, { head: csvData.head, data: csvData.data, maxLines: (_a = props.tableConfig) === null || _a === void 0 ? void 0 : _a.maxLines, total: (_b = props.tableConfig) === null || _b === void 0 ? void 0 : _b.rowCount, containerHeight: csvContainerHeight, containerWidth: csvContainerWidth })) : null }));
+}
+
+export { TablePreview as default };

package/es/components/file-preview/table-preview/index.module.scss.js

@@ -0,0 +1,11 @@
+var style = document.createElement('style');
+style.textContent = `.index-module__wrap___YSAno {
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}`;
+document.head.appendChild(style);
+
+var wrap = "index-module__wrap___YSAno";
+
+export { wrap };

package/es/components/file-preview/txt-preview/index.js

@@ -0,0 +1,24 @@
+import { __awaiter } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { fetchFileWithAutoCode } from '../util.js';
+
+function TxtPreview(props) {
+    const [content, setContent] = useState('');
+    useEffect(() => {
+        (() => __awaiter(this, void 0, void 0, function* () {
+            var _a, _b;
+            try {
+                const result = yield fetchFileWithAutoCode(props.filePath);
+                setContent(result);
+                (_a = props === null || props === void 0 ? void 0 : props.onSuccess) === null || _a === void 0 ? void 0 : _a.call(props);
+            }
+            catch (e) {
+                (_b = props === null || props === void 0 ? void 0 : props.onError) === null || _b === void 0 ? void 0 : _b.call(props, e);
+            }
+        }))();
+    }, []);
+    return jsx("div", { style: { whiteSpace: 'pre-wrap', height: '100%', overflow: 'auto' }, children: content });
+}
+
+export { TxtPreview as default };

package/es/components/file-preview/util.js

@@ -0,0 +1,94 @@
+import { __awaiter } from 'tslib';
+import { getFileExt } from '@zjlab-fe/util';
+
+function appendAsset(assetUrlArr) {
+    return new Promise((resolve) => {
+        if (assetUrlArr && assetUrlArr.length > 0) {
+            const assetArr = [...assetUrlArr];
+            // eslint-disable-next-line
+            function appendNext() {
+                if (assetArr.length > 0) {
+                    setTimeout(innerAppend);
+                }
+                else {
+                    setTimeout(() => {
+                        resolve(null);
+                    });
+                }
+            }
+            // eslint-disable-next-line
+            function innerAppend() {
+                const currentAssetUrl = assetArr.shift();
+                const ext = getFileExt(currentAssetUrl);
+                if (ext === 'js' || ext === 'mjs') {
+                    if (!document.querySelector(`script[src="${currentAssetUrl}"]`)) {
+                        const script = document.createElement('script');
+                        script.src = currentAssetUrl;
+                        if (ext === 'mjs') {
+                            script.type = 'module';
+                        }
+                        document.head.appendChild(script);
+                        script.onload = appendNext;
+                        script.onerror = appendNext;
+                        return;
+                    }
+                }
+                else if (ext === 'css') {
+                    if (!document.querySelector(`link[href="${currentAssetUrl}"]`)) {
+                        const link = document.createElement('link');
+                        link.rel = 'stylesheet';
+                        link.href = currentAssetUrl;
+                        document.head.appendChild(link);
+                        link.onload = appendNext;
+                        link.onerror = appendNext;
+                        return;
+                    }
+                }
+                appendNext();
+            }
+            innerAppend();
+        }
+        else {
+            resolve(null);
+        }
+    });
+}
+/**
+ * Fetch 文件并自动判断编码解析（未知编码场景）
+ * 优先尝试：GBK → GB2312 → Big5 → UTF-8，按实际业务调整优先级
+ * @param {string} fileUrl - 文件地址
+ * @returns {Promise<string>} 解码后的正常字符串
+ */
+function fetchFileWithAutoCode(fileUrl) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const response = yield fetch(fileUrl);
+        if (!response.ok)
+            throw new Error(`请求失败：${response.status}`);
+        const arrayBuffer = yield response.arrayBuffer();
+        let resultStr = '';
+        // 定义待尝试的编码列表（按业务场景调整优先级）
+        const codeList = ['utf-8', 'gbk', 'gb2312', 'big5', 'gb18030'];
+        // 遍历编码尝试解码，成功则立即返回
+        for (const code of codeList) {
+            try {
+                // `fatal: true` 表示编码不匹配时抛出错误，进入下一次尝试
+                const decoder = new TextDecoder(code, { fatal: true });
+                resultStr = decoder.decode(arrayBuffer);
+                // console.log(`文件编码匹配成功：${code}`);
+                break; // 解码成功，退出循环
+            }
+            catch (e) {
+                // 该编码不匹配，继续尝试下一个
+                continue;
+            }
+        }
+        // 若所有编码都失败，返回原始UTF-8解码结果（兜底）
+        if (!resultStr) {
+            resultStr = new TextDecoder('utf-8').decode(arrayBuffer);
+            console.warn('未匹配到已知编码，返回UTF-8兜底结果（可能乱码）');
+        }
+        return resultStr;
+    });
+}
+
+export { appendAsset, fetchFileWithAutoCode };

package/es/components/file-uploader/components/circle-progress.css.js

@@ -0,0 +1,39 @@
+var style = document.createElement('style');
+style.textContent = `.styled-progress-circle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.styled-progress-circle svg {
+  transform: rotate(-90deg);
+}
+
+.styled-progress-circle circle {
+  fill: none;
+  stroke-width: 10;
+  stroke-linecap: round;
+}
+
+.styled-progress-circle .circle-bg {
+  stroke: var(--uploader-progress-track);
+}
+
+.styled-progress-circle .circle-progress {
+  stroke: var(--uploader-progress-fill);
+  transition: stroke-dashoffset 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.styled-progress-circle.progress-failed .circle-progress {
+  stroke: var(--uploader-progress-failed);
+}
+
+.styled-progress-circle.progress-success .circle-progress {
+  stroke: var(--uploader-progress-success);
+}
+
+
+
+
+`;
+document.head.appendChild(style);

package/es/components/file-uploader/components/circle-progress.js

@@ -0,0 +1,12 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import './circle-progress.css.js';
+
+// Circle Progress Component
+function CircleProgress({ percent, isFailed, isSuccess, }) {
+    const radius = 50;
+    const circumference = 2 * Math.PI * radius;
+    const offset = circumference - (percent / 100) * circumference;
+    return (jsx("div", { className: `styled-progress-circle ${isFailed ? 'progress-failed' : isSuccess ? 'progress-success' : ''}`, children: jsxs("svg", { width: "20", height: "20", viewBox: "0 0 120 120", children: [jsx("circle", { className: "circle-bg", cx: "60", cy: "60", r: radius }), jsx("circle", { className: "circle-progress", cx: "60", cy: "60", r: radius, strokeDasharray: circumference, strokeDashoffset: offset })] }) }));
+}
+
+export { CircleProgress };

package/es/components/file-uploader/components/hooks/use-drop-zone.js

@@ -0,0 +1,74 @@
+import { __awaiter } from 'tslib';
+import { useState, useRef, useCallback } from 'react';
+import { readEntry } from '../utils/directory-reader.js';
+
+function useDropZone({ disabled, directory, accept, onFilesReady, onError }) {
+    const [isDragging, setIsDragging] = useState(false);
+    const dragCounterRef = useRef(0);
+    const handleDragEnter = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (disabled)
+            return;
+        dragCounterRef.current += 1;
+        if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
+            setIsDragging(true);
+        }
+    }, [disabled]);
+    const handleDragOver = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (disabled)
+            return;
+        e.dataTransfer.dropEffect = 'copy';
+    }, [disabled]);
+    const handleDragLeave = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (disabled)
+            return;
+        dragCounterRef.current -= 1;
+        if (dragCounterRef.current === 0) {
+            setIsDragging(false);
+        }
+    }, [disabled]);
+    const handleDrop = useCallback((e) => __awaiter(this, void 0, void 0, function* () {
+        e.preventDefault();
+        e.stopPropagation();
+        if (disabled)
+            return;
+        setIsDragging(false);
+        dragCounterRef.current = 0;
+        try {
+            const items = Array.from(e.dataTransfer.items);
+            const filesWithPaths = [];
+            // Always use webkitGetAsEntry for better handling
+            // When directory=false, directories will be skipped automatically
+            const entries = items.map((item) => item.webkitGetAsEntry()).filter(Boolean);
+            for (const entry of entries) {
+                if (entry) {
+                    const entryFiles = yield readEntry(entry, accept, directory);
+                    filesWithPaths.push(...entryFiles);
+                }
+            }
+            if (filesWithPaths.length > 0) {
+                onFilesReady(filesWithPaths);
+            }
+        }
+        catch (error) {
+            onError === null || onError === void 0 ? void 0 : onError({
+                type: 'DROP_FAILED',
+                message: error instanceof Error ? error.message : 'Failed to process dropped files',
+            });
+        }
+    }), [disabled, directory, accept, onFilesReady, onError]);
+    return {
+        isDragging,
+        handleDragEnter,
+        handleDragOver,
+        handleDragLeave,
+        handleDrop,
+    };
+}
+
+export { useDropZone };

package/es/components/file-uploader/components/hooks/use-file-validation.js

@@ -0,0 +1,52 @@
+import { __awaiter } from 'tslib';
+import { useCallback } from 'react';
+
+function useFileValidation({ maxSize, maxFiles, fileValidation, onDrop, onError, }) {
+    const validateFiles = useCallback((files) => __awaiter(this, void 0, void 0, function* () {
+        const valid = [];
+        const invalid = [];
+        // Step 1: Filter by file size
+        for (const fileWithPath of files) {
+            if (maxSize && fileWithPath.file.size > maxSize) {
+                invalid.push(fileWithPath);
+            }
+            else {
+                valid.push(fileWithPath);
+            }
+        }
+        // Step 2: Filter by max files count
+        if (maxFiles && valid.length > maxFiles) {
+            const excess = valid.splice(maxFiles);
+            invalid.push(...excess);
+        }
+        // Step 3: Apply custom validation callback
+        if (fileValidation && valid.length > 0) {
+            const validationResults = yield Promise.all(valid.map((fwp) => fileValidation(fwp.file)));
+            const passedFiles = valid.filter((_, index) => validationResults[index]);
+            const failedFiles = valid.filter((_, index) => !validationResults[index]);
+            valid.length = 0;
+            valid.push(...passedFiles);
+            invalid.push(...failedFiles);
+        }
+        return { valid, invalid };
+    }), [maxSize, maxFiles, fileValidation]);
+    const processFiles = useCallback((files) => __awaiter(this, void 0, void 0, function* () {
+        const { valid, invalid } = yield validateFiles(files);
+        if (invalid.length > 0) {
+            const error = {
+                type: maxSize && invalid.some((fwp) => fwp.file.size > maxSize) ? 'FILE_TOO_LARGE' : 'TOO_MANY_FILES',
+                message: maxSize && invalid.some((fwp) => fwp.file.size > maxSize)
+                    ? `${invalid.length} file(s) exceed maximum size`
+                    : `Too many files. Maximum ${maxFiles} allowed`,
+                rejectedFiles: invalid.map((fwp) => fwp.file),
+            };
+            onError === null || onError === void 0 ? void 0 : onError(error);
+        }
+        if (valid.length > 0) {
+            onDrop(valid);
+        }
+    }), [validateFiles, maxSize, maxFiles, onDrop, onError]);
+    return { processFiles };
+}
+
+export { useFileValidation };

package/es/components/file-uploader/components/icons.js

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function UploadIcon(props) {
+    return (jsx("svg", Object.assign({ width: "34", height: "31", viewBox: "0 0 34 31", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: jsxs("g", { id: "\u00E4\u00B8\u008A\u00E4\u00BC\u00A0\u00E6\u008F\u0092\u00E5\u009B\u00BE", children: [jsx("path", { id: "Vector", d: "M26 8.66665V29.7043C26.0013 29.867 25.9705 30.0284 25.9094 30.1792C25.8483 30.33 25.7581 30.4672 25.6439 30.5831C25.5297 30.699 25.3938 30.7913 25.244 30.8547C25.0941 30.918 24.9332 30.9512 24.7705 30.9523H1.22943C0.903577 30.9523 0.591055 30.823 0.360528 30.5927C0.130002 30.3624 0.000328142 30.05 0 29.7241V1.22819C0 0.563332 0.553428 0 1.23562 0H17.3333V7.42856C17.3333 7.75692 17.4638 8.07184 17.6959 8.30402C17.9281 8.53621 18.243 8.66665 18.5714 8.66665H26ZM26 6.19047H19.8095V0.00371423L26 6.19047Z", fill: "#B9D6FF" }), jsxs("g", { id: "Group 1000006993", children: [jsx("circle", { id: "Ellipse 87", cx: "26", cy: "23", r: "8", fill: "#1775FE" }), jsx("path", { id: "Vector_2", d: "M26.4545 24.315V27.5714H25.5455V24.315L24.3034 25.2023L23.775 24.4625L26 22.8732L28.225 24.4625L27.6966 25.2023L26.4545 24.315ZM31 24.4545C31 25.7098 29.9825 26.7273 28.7273 26.7273H27.3636V25.8182H28.7273C29.0749 25.8184 29.4094 25.6858 29.6625 25.4476C29.9156 25.2094 30.0682 24.8835 30.0891 24.5365C30.11 24.1896 29.9976 23.8477 29.7749 23.5808C29.5522 23.314 29.236 23.1422 28.8909 23.1007L28.4568 23.0489L28.4918 22.6127C28.4973 22.5455 28.5 22.4775 28.5 22.4091C28.5 21.0284 27.3807 19.9091 26 19.9091C25.4245 19.9091 24.8666 20.1077 24.4205 20.4712C23.9744 20.8347 23.6672 21.3409 23.5509 21.9045L23.4955 22.175L23.2295 22.2507C22.8492 22.3591 22.5146 22.5885 22.2763 22.9042C22.038 23.2198 21.9091 23.6045 21.9091 24C21.9091 24.4822 22.1006 24.9447 22.4416 25.2856C22.7826 25.6266 23.2451 25.8182 23.7273 25.8182H24.6364V26.7273H23.7273C22.2211 26.7273 21 25.5061 21 24C21 22.8655 21.6989 21.8682 22.7239 21.4632C22.9292 20.753 23.3598 20.1288 23.9506 19.6846C24.5415 19.2403 25.2607 19.0001 26 19C27.8414 19 29.3416 20.4598 29.4068 22.2852C29.8687 22.4302 30.2723 22.7187 30.5588 23.1089C30.8453 23.499 30.9999 23.9705 31 24.4545Z", fill: "white" })] })] }) })));
+}
+function FileIcon() {
+    return (jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) }));
+}
+function CloseIcon() {
+    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }));
+}
+function PauseIcon() {
+    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) }));
+}
+function ResumeIcon() {
+    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { d: "M8 5v14l11-7z" }) }));
+}
+
+export { CloseIcon, FileIcon, PauseIcon, ResumeIcon, UploadIcon as default };