@dovetail-v2/refine 0.2.7 → 0.2.8

package/dist/index-40deb620.js

@@ -0,0 +1,497 @@
+import { u as useTranslation, j as jsxRuntimeExports, c as cx_default, S as SocketStatus } from "./common-feae5742.js";
+import { Icon, Typo, DropdownMenu, Tooltip, SearchInput, Alert, Link } from "@cloudtower/eagle";
+import { CanvasAddon } from "@xterm/addon-canvas";
+import { FitAddon } from "@xterm/addon-fit";
+import { SearchAddon } from "@xterm/addon-search";
+import { WebLinksAddon } from "@xterm/addon-web-links";
+import { WebglAddon } from "@xterm/addon-webgl";
+import { Terminal } from "@xterm/xterm";
+import copyToClipboard from "copy-to-clipboard";
+import { debounce } from "lodash-es";
+import React__default, { useRef, useState, useMemo, useCallback, useEffect, useImperativeHandle } from "react";
+import { Loading24GradientBlueIcon, FontSize16GrayIcon, FontSize16BlueIcon, LogCollection16GrayIcon, LogCollection16GradientBlueIcon, TrashBinDeletePermanently16GrayIcon, TrashBinDeletePermanently16BlueIcon } from "@cloudtower/icons-react";
+const Connecting_r8rfff = "";
+const LoadingStyle = "l1ur2ktd";
+const Connecting = () => {
+  const {
+    t
+  } = useTranslation();
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+    className: LoadingStyle,
+    children: [/* @__PURE__ */ jsxRuntimeExports.jsx(Icon, {
+      src: Loading24GradientBlueIcon,
+      iconWidth: 24,
+      iconHeight: 24,
+      isRotate: true
+    }), /* @__PURE__ */ jsxRuntimeExports.jsx("span", {
+      className: Typo.Display.d2_bold_title,
+      children: t("dovetail.connecting")
+    })]
+  });
+};
+const ShellToolbar_ihg418 = "";
+const ToolbarStyle$1 = "tzxa6d";
+const ToolbarAreaStyle = "t1sxu3rr";
+const IconWrapperStyle = "ix8ych8";
+const IconStyle = "i58m6oo";
+const DividerStyle = "d1t2oa87";
+const TooltipStyle = "tuo8xdg";
+function ShellToolbar(props) {
+  const {
+    className,
+    leftSlot,
+    operations = ["fontSize", "downloadLog", "clear"],
+    searchMatchedTotal,
+    onSetFontSize,
+    onSearchNext,
+    onSearchPre,
+    onDownloadLog,
+    onClear
+  } = props;
+  const {
+    t
+  } = useTranslation();
+  const fontSizeOptions = [12, 13, 14, 16, 20];
+  const operationMap = {
+    fontSize: /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenu, {
+      trigger: ["click"],
+      items: fontSizeOptions.map((size) => ({
+        key: `${size}`,
+        title: `${size}px`,
+        text: `${size}px`,
+        onClick: () => {
+          onSetFontSize == null ? void 0 : onSetFontSize(size);
+        }
+      })),
+      slotsElements: {
+        trigger: () => /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, {
+          title: /* @__PURE__ */ jsxRuntimeExports.jsx("span", {
+            className: TooltipStyle,
+            children: t("dovetail.font_size")
+          }),
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+            style: {
+              display: "flex",
+              alignItems: "center"
+            },
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, {
+              className: IconStyle,
+              src: FontSize16GrayIcon,
+              hoverSrc: FontSize16BlueIcon
+            })
+          })
+        })
+      }
+    }),
+    downloadLog: /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, {
+      title: /* @__PURE__ */ jsxRuntimeExports.jsx("span", {
+        className: TooltipStyle,
+        children: t("dovetail.download_shell_content")
+      }),
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, {
+        className: IconStyle,
+        src: LogCollection16GrayIcon,
+        hoverSrc: LogCollection16GradientBlueIcon,
+        onClick: onDownloadLog
+      })
+    }),
+    clear: /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, {
+      title: /* @__PURE__ */ jsxRuntimeExports.jsx("span", {
+        className: TooltipStyle,
+        children: t("dovetail.clear_shell")
+      }),
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, {
+        className: IconStyle,
+        src: TrashBinDeletePermanently16GrayIcon,
+        hoverSrc: TrashBinDeletePermanently16BlueIcon,
+        onClick: onClear
+      })
+    })
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+    className: cx_default(ToolbarStyle$1, className),
+    children: [/* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+      className: ToolbarAreaStyle,
+      children: leftSlot
+    }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+      className: ToolbarAreaStyle,
+      children: [/* @__PURE__ */ jsxRuntimeExports.jsx(SearchInput, {
+        placeholder: t("dovetail.search"),
+        size: "small",
+        total: searchMatchedTotal,
+        onChange: (str) => {
+          onSearchNext(str);
+        },
+        onSearchNext: (str) => {
+          onSearchNext(str);
+        },
+        onSearchPrev: (str) => {
+          onSearchPre(str);
+        }
+      }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+        className: DividerStyle
+      }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+        className: IconWrapperStyle,
+        children: operations.map((operation) => typeof operation === "string" ? operationMap[operation] || null : operation)
+      })]
+    })]
+  });
+}
+const xterm = "";
+const index_n9lket = "";
+const ContainerStyle = "c1q5a2qi";
+const ShellStyle = "sdz5fm1";
+const ErrorAlertStyle = "ebp0h2e";
+const ToolbarStyle = "tioilqy";
+const Shell = React__default.forwardRef(function Shell2(props, ref) {
+  const {
+    className,
+    url,
+    protocols,
+    timeout = 1e4,
+    logFileName,
+    operations,
+    isHideToolbar,
+    toolbarLeftSlot,
+    shellOptions,
+    loadingElement,
+    encode,
+    decode,
+    onSocketStatusChange,
+    onTermInit,
+    onSocketInit,
+    children
+  } = props;
+  const terminalRef = useRef(null);
+  const termInstanceRef = useRef(null);
+  const fitAddonRef = useRef(null);
+  const searchAddonRef = useRef(null);
+  const socketRef = useRef(null);
+  const backlogRef = useRef([]);
+  const containerRef = useRef(null);
+  const [socketStatus, setSocketStatus] = useState(SocketStatus.Opening);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [searchMatchedTotal, setSearchMatchedTotal] = useState(0);
+  const {
+    t
+  } = useTranslation();
+  const searchOptions = useMemo(() => ({
+    decorations: {
+      activeMatchColorOverviewRuler: "#FEA008",
+      matchOverviewRuler: "#E07F00",
+      activeMatchBackground: "#FEA008",
+      matchBackground: "#E07F00"
+    }
+  }), []);
+  const reset = useCallback(() => {
+    var _a, _b;
+    (_a = termInstanceRef.current) == null ? void 0 : _a.clear();
+    (_b = termInstanceRef.current) == null ? void 0 : _b.reset();
+  }, []);
+  const send = useCallback((message, callback) => {
+    if (socketRef.current && socketRef.current.readyState === socketRef.current.OPEN) {
+      socketRef.current.send(message);
+      callback == null ? void 0 : callback();
+    } else {
+      backlogRef.current.push({
+        message,
+        callback
+      });
+    }
+  }, []);
+  const fit = useCallback(() => {
+    var _a;
+    if (!fitAddonRef.current)
+      return;
+    fitAddonRef.current.fit();
+    const {
+      rows,
+      cols
+    } = fitAddonRef.current.proposeDimensions() || {};
+    if (rows && cols) {
+      (_a = props.fit) == null ? void 0 : _a.call(props, {
+        rows,
+        cols
+      });
+    }
+  }, [encode, send, props.fit]);
+  const debouncedFit = useMemo(() => debounce(fit, 200), [fit]);
+  const flush = useCallback(() => {
+    const backlog = backlogRef.current.slice();
+    backlogRef.current = [];
+    for (const data of backlog) {
+      send(data.message, data.callback);
+    }
+  }, [send]);
+  const connect = useCallback(() => {
+    if (socketRef.current) {
+      socketRef.current.close();
+      socketRef.current = null;
+    }
+    if (url) {
+      let onSocketError = function() {
+        setLoading(false);
+        setError(true);
+      }, onSocketOpen = function() {
+        var _a;
+        (_a = props.onSocketOpen) == null ? void 0 : _a.call(props, socket);
+        clearTimeout(timer);
+        setSocketStatus(SocketStatus.Open);
+        fit();
+        flush();
+        setError(false);
+        setLoading(false);
+      }, onSocketClose = function() {
+        setLoading(false);
+        setError(true);
+        if (props.onSocketClose) {
+          props.onSocketClose(socket, termInstanceRef.current);
+        } else {
+          setSocketStatus(SocketStatus.Disconnected);
+        }
+      }, onSocketMessage = function(e) {
+        var _a;
+        if (props.onSocketMessage) {
+          props.onSocketMessage(e, socket, termInstanceRef.current);
+        } else {
+          const msg = (decode == null ? void 0 : decode(e.data)) || e.data;
+          (_a = termInstanceRef.current) == null ? void 0 : _a.write(msg);
+        }
+      };
+      setLoading(true);
+      setError(false);
+      const socket = new WebSocket(url, protocols);
+      const timer = setTimeout(() => {
+        setLoading(false);
+        socket.close();
+      }, timeout);
+      setSocketStatus(SocketStatus.Opening);
+      onSocketInit == null ? void 0 : onSocketInit(socket);
+      socket.addEventListener("open", onSocketOpen);
+      socket.addEventListener("message", onSocketMessage);
+      socket.addEventListener("close", onSocketClose);
+      socket.addEventListener("error", onSocketError);
+      socketRef.current = socket;
+      return function disconnect() {
+        if (socket) {
+          socket.close();
+          socket.removeEventListener("open", onSocketOpen);
+          socket.removeEventListener("message", onSocketMessage);
+          socket.removeEventListener("close", onSocketClose);
+          socket.removeEventListener("error", onSocketError);
+          socketRef.current = null;
+        }
+      };
+    }
+  }, [url, protocols, decode, props.onSocketClose, props.onSocketMessage, props.onSocketOpen, reset, flush, fit, onSocketInit, timeout]);
+  const setupTerminal = useCallback(() => {
+    if (terminalRef.current) {
+      let onKeyDown = function(event) {
+        if (event.ctrlKey && event.shiftKey && event.key === "C") {
+          event.preventDefault();
+          copyToClipboard(term.getSelection());
+        }
+      }, onResize = function() {
+        fit();
+      };
+      if (termInstanceRef.current) {
+        termInstanceRef.current.reset();
+        termInstanceRef.current.dispose();
+      }
+      const term = new Terminal({
+        cursorBlink: true,
+        cols: 150,
+        allowProposedApi: true,
+        fontSize: 12,
+        theme: {
+          background: "#00122E"
+        },
+        ...shellOptions
+      });
+      let renderAddon = null;
+      try {
+        renderAddon = new WebglAddon();
+      } catch {
+        renderAddon = new CanvasAddon();
+      }
+      onTermInit == null ? void 0 : onTermInit(term);
+      term.loadAddon(fitAddonRef.current = new FitAddon());
+      term.loadAddon(searchAddonRef.current = new SearchAddon());
+      term.loadAddon(new WebLinksAddon());
+      term.loadAddon(renderAddon);
+      term.open(terminalRef.current);
+      fit();
+      flush();
+      document.addEventListener("keydown", onKeyDown);
+      window.addEventListener("resize", onResize);
+      searchAddonRef.current.onDidChangeResults(({
+        resultCount
+      }) => {
+        setSearchMatchedTotal(resultCount);
+      });
+      term.onData((input) => {
+        send(encode(input));
+      });
+      termInstanceRef.current = term;
+      return function destroy() {
+        document.removeEventListener("keydown", onKeyDown);
+        window.removeEventListener("resize", onResize);
+        termInstanceRef.current = null;
+        fitAddonRef.current = null;
+        searchAddonRef.current = null;
+        term.clear();
+        term.dispose();
+      };
+    }
+  }, [send, encode, onTermInit, fit, flush, shellOptions]);
+  const searchNext = useCallback((search) => {
+    var _a;
+    (_a = searchAddonRef.current) == null ? void 0 : _a.findNext(search || "", searchOptions);
+  }, [searchOptions]);
+  const searchPrevious = useCallback((search) => {
+    var _a;
+    (_a = searchAddonRef.current) == null ? void 0 : _a.findPrevious(search || "", searchOptions);
+  }, [searchOptions]);
+  const getAllTerminalContents = useCallback(() => {
+    if (!termInstanceRef.current)
+      return [];
+    const buffer = termInstanceRef.current.buffer.active;
+    const lines = [];
+    for (let i = 0; i < buffer.length; i++) {
+      const line = buffer.getLine(i);
+      if (line) {
+        lines.push(line.translateToString(true));
+      }
+    }
+    return lines;
+  }, []);
+  const clear = useCallback(() => {
+    var _a;
+    (_a = termInstanceRef.current) == null ? void 0 : _a.clear();
+  }, []);
+  const downloadContent = useCallback(() => {
+    const content = (getAllTerminalContents() || []).join("\n");
+    const blob = new Blob([content], {
+      type: "text/plain"
+    });
+    const url2 = window.URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url2;
+    a.download = `${logFileName || "term"}.log`;
+    document.body.appendChild(a);
+    a.click();
+    setTimeout(() => {
+      document.body.removeChild(a);
+      window.URL.revokeObjectURL(url2);
+    }, 0);
+  }, [getAllTerminalContents, logFileName]);
+  const setOptions = useCallback((options) => {
+    Object.entries(options).forEach(([key, value]) => {
+      if (termInstanceRef.current) {
+        termInstanceRef.current.options[key] = value;
+      }
+    });
+    fit();
+  }, [fit]);
+  const writeln = useCallback((data) => {
+    var _a;
+    (_a = termInstanceRef.current) == null ? void 0 : _a.writeln(data);
+  }, []);
+  const onClear = useCallback(() => {
+    var _a;
+    clear();
+    (_a = props.onClear) == null ? void 0 : _a.call(props);
+  }, [clear, props.onClear]);
+  useEffect(() => {
+    const destroy = setupTerminal();
+    return () => {
+      destroy == null ? void 0 : destroy();
+    };
+  }, []);
+  useEffect(() => {
+    const disconnect = connect();
+    return () => {
+      disconnect == null ? void 0 : disconnect();
+    };
+  }, [url, protocols]);
+  useEffect(() => {
+    onSocketStatusChange == null ? void 0 : onSocketStatusChange(socketStatus);
+  }, [socketStatus]);
+  useEffect(() => {
+    if (!containerRef.current)
+      return;
+    const resizeObserver = new ResizeObserver(() => {
+      debouncedFit();
+    });
+    resizeObserver.observe(containerRef.current);
+    return () => resizeObserver.disconnect();
+  }, [debouncedFit]);
+  useImperativeHandle(ref, () => ({
+    clear,
+    setSocketStatus,
+    fit,
+    send,
+    connect,
+    searchNext,
+    searchPrevious,
+    getAllTerminalContents,
+    setOptions,
+    setLoading,
+    setError,
+    writeln
+  }), [send, searchNext, searchPrevious, getAllTerminalContents, fit, clear, connect, setOptions, writeln]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+    ref: containerRef,
+    className: ContainerStyle,
+    children: [!!error ? /* @__PURE__ */ jsxRuntimeExports.jsx(Alert, {
+      style: {
+        margin: 8,
+        marginBottom: 4
+      },
+      message: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", {
+        className: ErrorAlertStyle,
+        children: [t("dovetail.disconnected"), /* @__PURE__ */ jsxRuntimeExports.jsx(Link, {
+          onClick: () => {
+            if (props.onReconnect) {
+              props.onReconnect();
+            } else {
+              connect();
+            }
+          },
+          children: t("dovetail.reconnect")
+        })]
+      }),
+      type: "error"
+    }) : null, isHideToolbar ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(ShellToolbar, {
+      className: ToolbarStyle,
+      leftSlot: toolbarLeftSlot,
+      searchMatchedTotal,
+      operations,
+      onSearchNext: searchNext,
+      onSearchPre: searchPrevious,
+      onClear,
+      onDownloadLog: downloadContent,
+      onSetFontSize: (fontSize) => {
+        setOptions({
+          fontSize
+        });
+      }
+    }), loading ? loadingElement || /* @__PURE__ */ jsxRuntimeExports.jsx(Connecting, {}) : null, /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+      className: cx_default(ShellStyle, className),
+      style: {
+        display: loading ? "none" : "block"
+      },
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+        ref: terminalRef,
+        style: {
+          height: "100%"
+        },
+        children
+      })
+    })]
+  });
+});
+export {
+  Shell as S
+};