@bioturing/components 0.13.1

package/dist/Upload.js

@@ -0,0 +1,419 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE_antd_es_upload_29096ddd__ from "antd/es/upload";
+import * as __WEBPACK_EXTERNAL_MODULE_antd_es_button_8f463bb4__ from "antd/es/button";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE__bioturing_assets_dd0c210d__ from "@bioturing/assets";
+import * as __WEBPACK_EXTERNAL_MODULE_antd_es_config_provider_6a57beb3__ from "antd/es/config-provider";
+import * as __WEBPACK_EXTERNAL_MODULE_antd_es_theme_useToken_e8911485__ from "antd/es/theme/useToken";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE_antd_es_flex_86593150__ from "antd/es/flex";
+import * as __WEBPACK_EXTERNAL_MODULE_antd_es_progress_da1757d8__ from "antd/es/progress";
+import "antd/es/tooltip/style/css";
+import * as __WEBPACK_EXTERNAL_MODULE_antd_es_tooltip_1091cc47__ from "antd/es/tooltip";
+import * as __WEBPACK_EXTERNAL_MODULE__base_ui_components_react_5aaa6934__ from "@base-ui-components/react";
+const ButtonInner = ({ style, ...rest }, ref)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd_es_button_8f463bb4__["default"], {
+        ref: ref,
+        style: style,
+        ...rest
+    });
+const Button = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)(ButtonInner);
+function cx(...args) {
+    const classes = [];
+    for (const arg of args)if (arg) {
+        if ("string" == typeof arg || "number" == typeof arg) classes.push(String(arg));
+        else if (Array.isArray(arg)) classes.push(...cx(...arg));
+        else if ("object" == typeof arg) {
+            for (const [key, value] of Object.entries(arg))if (value) classes.push(key);
+        }
+    }
+    return classes;
+}
+function clsx(...args) {
+    return cx(...args).join(" ");
+}
+function cn(...args) {
+    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(cx(...args));
+}
+"use client";
+const useGetPrefixCls = ()=>{
+    const { getPrefixCls } = (0, __WEBPACK_EXTERNAL_MODULE_react__.useContext)(__WEBPACK_EXTERNAL_MODULE_antd_es_config_provider_6a57beb3__["default"].ConfigContext);
+    return {
+        getPrefixCls
+    };
+};
+const useAntdCssVarClassname = ()=>{
+    var _token_;
+    const token = (0, __WEBPACK_EXTERNAL_MODULE_antd_es_theme_useToken_e8911485__["default"])();
+    return null == (_token_ = token[4]) ? void 0 : _token_.key;
+};
+const useCls = ()=>{
+    const { getPrefixCls } = (0, __WEBPACK_EXTERNAL_MODULE_react__.useContext)(__WEBPACK_EXTERNAL_MODULE_antd_es_config_provider_6a57beb3__["default"].ConfigContext);
+    return (...args)=>cx(...args).map((cls)=>getPrefixCls(cls)).join(" ");
+};
+"use client";
+const IconButtonImpl = (props, ref)=>{
+    const { label, size = "medium", negativeMargin = true, children, className, tooltipProps = {}, as, href, target, rel, download, hrefLang, referrerPolicy, ...rest } = props;
+    const cls = useCls();
+    const antdCssVarClassname = useAntdCssVarClassname();
+    const buttonClasses = [
+        cls("icon-button"),
+        cls(`icon-button-${size}`),
+        cls(negativeMargin ? "icon-button-negative-margin" : ""),
+        antdCssVarClassname,
+        className
+    ].filter(Boolean).join(" ");
+    const Component = as || (href ? "a" : "button");
+    const anchorProps = "a" === Component ? {
+        ...void 0 !== target && {
+            target
+        },
+        ...void 0 !== rel && {
+            rel
+        },
+        ...void 0 !== download && {
+            download
+        },
+        ...void 0 !== hrefLang && {
+            hrefLang
+        },
+        ...void 0 !== referrerPolicy && {
+            referrerPolicy
+        }
+    } : {};
+    const elementProps = {
+        ref,
+        className: buttonClasses,
+        ..."button" === Component && {
+            type: "button"
+        },
+        ...href && {
+            href
+        },
+        ...anchorProps,
+        ...rest
+    };
+    const element = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Component, {
+        ...elementProps,
+        children: children
+    });
+    return label ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd_es_tooltip_1091cc47__["default"], {
+        title: label,
+        arrow: false,
+        ...tooltipProps,
+        children: element
+    }) : element;
+};
+const IconButton = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)(IconButtonImpl);
+const measureText = (container)=>{
+    const span = document.createElement("span");
+    span.style.opacity = "0";
+    span.style.position = "absolute";
+    span.style.top = "-1000px";
+    span.style.left = "-1000px";
+    span.style.whiteSpace = "nowrap";
+    span.style.pointerEvents = "none";
+    container.appendChild(span);
+    return {
+        measure: (text)=>{
+            span.innerText = text;
+            return span.clientWidth;
+        },
+        destroy: ()=>{
+            container.removeChild(span);
+        }
+    };
+};
+const getMiddleTruncatedString = (text, ellipsis, container)=>{
+    var _Object_values_reverse_find;
+    if (!text) return text;
+    const { measure: getTextWidth, destroy: destroyMeasure } = measureText(container);
+    const textWidth = getTextWidth(text);
+    const containerWidth = container.clientWidth;
+    const initialOffset = Math.floor(containerWidth / textWidth * text.length);
+    if (textWidth <= containerWidth) {
+        destroyMeasure();
+        return text;
+    }
+    let offset = initialOffset;
+    const attempts = {};
+    const maxAttempts = 20;
+    const buffer = 10;
+    while(Object.values(attempts).length <= maxAttempts){
+        if (attempts[offset]) break;
+        if (offset <= 1) {
+            attempts[0] = [
+                0,
+                ellipsis
+            ];
+            break;
+        }
+        const start = text.slice(0, Math.ceil((offset - ellipsis.length) / 2 - 1)).trimEnd();
+        const end = text.slice(Math.floor((offset - ellipsis.length) / 2) - offset).trimStart();
+        const truncatedStr = start + ellipsis + end;
+        const width = getTextWidth(truncatedStr);
+        attempts[offset] = [
+            width,
+            truncatedStr
+        ];
+        if (width >= containerWidth) offset -= 2;
+        else {
+            if (containerWidth - width < buffer) break;
+            offset += 2;
+        }
+    }
+    destroyMeasure();
+    return (null == (_Object_values_reverse_find = Object.values(attempts).reverse().find(([width])=>width < containerWidth)) ? void 0 : _Object_values_reverse_find[1]) ?? Object.values(attempts)[0][1];
+};
+"use client";
+const Truncate = ({ children, position = "end", className, style, ...rest })=>{
+    const cls = useCls();
+    const containerRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const [isTruncated, setIsTruncated] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
+    const [truncatedText, setTruncatedText] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(children);
+    const text = children;
+    const getContainerStyles = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(()=>{
+        const baseStyles = {
+            overflow: "hidden",
+            whiteSpace: "nowrap",
+            textOverflow: "clip",
+            flexGrow: 1,
+            minWidth: 0,
+            maxWidth: "100%",
+            display: "block",
+            ...style
+        };
+        if ("end" === position) return {
+            ...baseStyles,
+            textOverflow: "ellipsis"
+        };
+        return baseStyles;
+    }, [
+        position,
+        style
+    ]);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useLayoutEffect)(()=>{
+        const container = containerRef.current;
+        if (!container) return;
+        let cancellationToken = {
+            cancelled: false
+        };
+        const calculateTruncatedString = ()=>{
+            if (cancellationToken) cancellationToken.cancelled = true;
+            const requestCancellationToken = {
+                cancelled: false
+            };
+            cancellationToken = requestCancellationToken;
+            const truncated = getMiddleTruncatedString(text, "\u2026", container);
+            if (requestCancellationToken.cancelled) return;
+            setTruncatedText(truncated);
+        };
+        if ("middle" == position) {
+            var _window_document_fonts_ready, _window_document_fonts;
+            null == (_window_document_fonts = window.document.fonts) || null == (_window_document_fonts_ready = _window_document_fonts.ready) || _window_document_fonts_ready.then(calculateTruncatedString);
+        }
+        if ("end" == position) setTruncatedText(text);
+        const observer = new ResizeObserver(()=>{
+            if ("middle" == position) window.requestAnimationFrame(calculateTruncatedString);
+            if ("end" == position) {
+                const isOverflowing = container.scrollWidth > container.clientWidth;
+                if (isOverflowing) setIsTruncated(true);
+            }
+        });
+        observer.observe(container);
+        return ()=>{
+            cancellationToken.cancelled = true;
+            observer.disconnect();
+        };
+    }, [
+        text,
+        position
+    ]);
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+        ref: containerRef,
+        style: getContainerStyles(),
+        className: clsx(cls("truncate"), className),
+        title: isTruncated ? text : void 0,
+        ...rest,
+        children: text === truncatedText ? text : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+            children: truncatedText
+        })
+    });
+};
+const getUploadFileIcon = (fileType)=>"folder" === fileType ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__bioturing_assets_dd0c210d__.Folder, {
+        size: 20,
+        weight: "fill"
+    }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__bioturing_assets_dd0c210d__.File, {
+        size: 20,
+        weight: "fill"
+    });
+const UploadItem = ({ fileName, fileType, status = "pending", percent, removable = true, onRemove, extraActions })=>{
+    const cls = useCls();
+    const showPercent = Math.round(percent || 0);
+    const statusWithProgress = {
+        done: "success",
+        error: "exception",
+        uploading: "active",
+        removed: "normal",
+        pending: "normal"
+    };
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd_es_flex_86593150__["default"], {
+        className: clsx(cls("upload-item")),
+        justify: "space-between",
+        align: "center",
+        "data-error": "error" === status,
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_antd_es_flex_86593150__["default"], {
+            align: "center",
+            gap: 16,
+            flex: 1,
+            className: cls("upload-item-content"),
+            children: [
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                    className: cls("upload-item-icon"),
+                    children: getUploadFileIcon(fileType)
+                }),
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_antd_es_flex_86593150__["default"], {
+                    align: "start",
+                    vertical: true,
+                    flex: 1,
+                    className: cls("upload-item-name-progress"),
+                    children: [
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Truncate, {
+                            position: "middle",
+                            children: fileName
+                        }),
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd_es_progress_da1757d8__["default"], {
+                            percent: showPercent,
+                            size: "small",
+                            className: cls("upload-item-progress"),
+                            status: status && status in statusWithProgress ? statusWithProgress[status] : "normal"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_antd_es_flex_86593150__["default"], {
+                    gap: 8,
+                    align: "center",
+                    children: [
+                        extraActions,
+                        removable && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(IconButton, {
+                            label: "Remove",
+                            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__bioturing_assets_dd0c210d__.Trash, {
+                                size: 16
+                            }),
+                            onClick: onRemove,
+                            size: "small"
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+"use client";
+const useUploadItemRender = ({ showRemoveButton = true })=>{
+    const itemRender = (_originNode, file, _fileList, actions)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(UploadItem, {
+            fileName: file.name,
+            fileType: file.type,
+            status: file.status,
+            percent: file.percent,
+            removable: showRemoveButton,
+            onRemove: ()=>actions.remove()
+        });
+    return (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(itemRender, [
+        showRemoveButton
+    ]);
+};
+"use client";
+const Dragger = ({ children, uploadTitle = "Click or drag file to this area to upload", uploadDescription = "Support for a single or bulk upload.", itemRender, ...rest })=>{
+    const cls = useCls();
+    const renderChildren = ()=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
+            children: [
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("p", {
+                    className: cls("upload-drag-icon"),
+                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__bioturing_assets_dd0c210d__.CloudArrowUp, {
+                        size: 40
+                    })
+                }),
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("p", {
+                    className: cls("upload-text"),
+                    children: uploadTitle
+                }),
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("p", {
+                    className: cls("upload-hint"),
+                    children: uploadDescription
+                })
+            ]
+        });
+    const defaultItemRender = useUploadItemRender({
+        showRemoveButton: true
+    });
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd_es_upload_29096ddd__["default"].Dragger, {
+        itemRender: itemRender || defaultItemRender,
+        ...rest,
+        children: children ? children : renderChildren()
+    });
+};
+"use client";
+const DefaultUpload = ({ showRemoveButton = true, className, fileList, children, ...restProps })=>{
+    const cls = useCls();
+    const icon = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__bioturing_assets_dd0c210d__.CloudArrowUp, {
+        size: 24
+    });
+    const defaultChildren = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Button, {
+        icon: icon,
+        type: "default",
+        children: "Upload Files"
+    });
+    const itemRender = useUploadItemRender({
+        showRemoveButton
+    });
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd_es_upload_29096ddd__["default"], {
+        className: clsx(cls("upload"), className),
+        ...restProps,
+        fileList: fileList,
+        itemRender: itemRender,
+        children: children || defaultChildren
+    });
+};
+const Upload = Object.assign(DefaultUpload, {
+    Dragger: Dragger,
+    Item: UploadItem
+});
+function reactNodeToString(node) {
+    if (null == node) return "";
+    if ("string" == typeof node) return node;
+    if ("number" == typeof node || "boolean" == typeof node) return node.toString();
+    if (Array.isArray(node)) return node.map(reactNodeToString).join("");
+    if ((0, __WEBPACK_EXTERNAL_MODULE_react__.isValidElement)(node) && "props" in node && node.props && "object" == typeof node.props && "children" in node.props && node.props.children) {
+        if ("br" === node.type) return "\n";
+        if (node.props.children) return reactNodeToString(node.props.children);
+    }
+    return "";
+}
+function isTracebackError(error) {
+    if (!error || "string" != typeof error && !error.toString) return false;
+    const errorString = "string" == typeof error ? error : error.toString();
+    const pythonTracebackRegex = /Traceback \(most recent call last\):/;
+    const pythonStackFrameRegex = /File ".*?", line \d+, in/;
+    const goStackTraceRegex = /goroutine \d+ \[.*\]:|panic: /;
+    const goStackFrameRegex = /\/.*\.go:\d+/;
+    const isPythonTraceback = pythonTracebackRegex.test(errorString) || pythonStackFrameRegex.test(errorString);
+    const isGoStackTrace = goStackTraceRegex.test(errorString) || goStackFrameRegex.test(errorString);
+    return isPythonTraceback || isGoStackTrace;
+}
+"use client";
+const WithAntdTokens = ({ as: Tag = "div", ref, className, ...rest })=>{
+    const Component = Tag;
+    const cssVar = useAntdCssVarClassname();
+    const { renderElement } = (0, __WEBPACK_EXTERNAL_MODULE__base_ui_components_react_5aaa6934__.useRender)({
+        render: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Component, {}),
+        refs: [
+            ref
+        ],
+        props: {
+            ...rest,
+            className: clsx(className, cssVar)
+        }
+    });
+    return renderElement();
+};
+export { DefaultUpload, Upload, WithAntdTokens, clsx, cn, cx, isTracebackError, reactNodeToString, useAntdCssVarClassname, useCls, useGetPrefixCls, useUploadItemRender };