@netless/telebox-insider 0.2.28 → 0.2.30

package/dist/telebox-insider.es.js

@@ -17,7 +17,6 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import React, { useRef, useEffect, useState } from "react";
 var fancyScrollbar = ".tele-fancy-scrollbar {\n  overscroll-behavior: contain;\n  overflow: auto;\n  overflow-y: scroll;\n  overflow-y: overlay;\n  -webkit-overflow-scrolling: touch;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n  scrollbar-width: auto;\n}\n.tele-fancy-scrollbar::-webkit-scrollbar {\n  height: 8px;\n  width: 8px;\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-track {\n  background-color: transparent;\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-thumb {\n  background-color: rgba(68, 78, 96, 0.1);\n  background-color: transparent;\n  border-radius: 4px;\n  transition: background-color 0.4s;\n}\n.tele-fancy-scrollbar:hover::-webkit-scrollbar-thumb {\n  background-color: rgba(68, 78, 96, 0.1);\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-thumb:hover {\n  background-color: rgba(68, 78, 96, 0.2);\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-thumb:active {\n  background-color: rgba(68, 78, 96, 0.2);\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-thumb:vertical {\n  min-height: 50px;\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-thumb:horizontal {\n  min-width: 50px;\n}";
 var style$3 = '.telebox-box {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 100;\n  transition: width 0.4s cubic-bezier(0.4, 0.9, 0.71, 1.02), height 0.4s cubic-bezier(0.55, 0.82, 0.63, 0.95), opacity 0.6s cubic-bezier(0.7, 0, 0.84, 0), transform 0.4s ease;\n}\n\n.telebox-box-main {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  background: #f9f9fc;\n  box-shadow: 0px 4px 10px 0px rgba(47, 65, 146, 0.15);\n  border-radius: 6px;\n  border: 1px solid #e3e3ec;\n}\n\n.telebox-titlebar-wrap {\n  flex-shrink: 0;\n  position: relative;\n  z-index: 1;\n}\n\n.telebox-content-wrap {\n  flex: 1;\n  width: 100%;\n  overflow: hidden;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.telebox-content {\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n\n.telebox-footer-wrap {\n  flex-shrink: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.telebox-footer-wrap::before {\n  content: "";\n  display: block;\n  flex: 1;\n}\n\n.telebox-resize-handle {\n  user-select: none;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  position: absolute;\n  z-index: 2147483647;\n}\n\n.telebox-n {\n  width: 100%;\n  height: 5px;\n  left: 0;\n  top: -5px;\n  cursor: n-resize;\n}\n\n.telebox-s {\n  width: 100%;\n  height: 5px;\n  left: 0;\n  bottom: -5px;\n  cursor: s-resize;\n}\n\n.telebox-w {\n  width: 5px;\n  height: 100%;\n  left: -5px;\n  top: 0;\n  cursor: w-resize;\n}\n\n.telebox-e {\n  width: 5px;\n  height: 100%;\n  right: -5px;\n  top: 0;\n  cursor: e-resize;\n}\n\n.telebox-nw {\n  width: 15px;\n  height: 15px;\n  top: -5px;\n  left: -5px;\n  cursor: nw-resize;\n}\n\n.telebox-ne {\n  width: 15px;\n  height: 15px;\n  top: -5px;\n  right: -5px;\n  cursor: ne-resize;\n}\n\n.telebox-se {\n  width: 15px;\n  height: 15px;\n  bottom: -5px;\n  right: -5px;\n  cursor: se-resize;\n}\n\n.telebox-sw {\n  width: 15px;\n  height: 15px;\n  bottom: -5px;\n  left: -5px;\n  cursor: sw-resize;\n}\n\n.telebox-track-mask {\n  user-select: none;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 2147483647;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.0001);\n  cursor: move;\n}\n\n.telebox-cursor-n {\n  cursor: n-resize;\n}\n\n.telebox-cursor-s {\n  cursor: s-resize;\n}\n\n.telebox-cursor-w {\n  cursor: w-resize;\n}\n\n.telebox-cursor-e {\n  cursor: e-resize;\n}\n\n.telebox-cursor-nw {\n  cursor: nw-resize;\n}\n\n.telebox-cursor-ne {\n  cursor: ne-resize;\n}\n\n.telebox-cursor-se {\n  cursor: se-resize;\n}\n\n.telebox-cursor-sw {\n  cursor: sw-resize;\n}\n\n.telebox-maximized .telebox-resize-handles,\n.telebox-no-resize .telebox-resize-handles {\n  display: none;\n}\n\n.telebox-maximized {\n  box-shadow: none;\n  transition: none;\n}\n\n.telebox-minimized {\n  transition: width 0.05s cubic-bezier(0.4, 0.9, 0.71, 1.02), height 0.05s cubic-bezier(0.55, 0.82, 0.63, 0.95), opacity 0.6s cubic-bezier(0.7, 0, 0.84, 0), transform 0.6s ease;\n  opacity: 0;\n  pointer-events: none;\n  user-select: none;\n}\n\n.telebox-transforming {\n  will-change: transform;\n  transition: opacity 0.6s cubic-bezier(0.7, 0, 0.84, 0);\n}\n\n.telebox-readonly .telebox-resize-handle {\n  cursor: initial !important;\n  pointer-events: none !important;\n}\n\n.telebox-color-scheme-dark {\n  color-scheme: dark;\n}\n\n.telebox-color-scheme-dark .telebox-box-main {\n  color: #e9e9e9;\n  background: #212126;\n  border-color: #43434d;\n}';
 var eventemitter3 = { exports: {} };
@@ -2203,150 +2202,6 @@ class TeleBox {
 function noop() {
   return;
 }
-const useUpdateEffect = (effect, deps) => {
-  const isFirst = useRef(true);
-  useEffect(() => {
-    if (isFirst.current) {
-      isFirst.current = false;
-      return;
-    }
-    return effect();
-  }, deps);
-};
-const TeleBoxReact = (props) => {
-  const [teleBox] = useState(() => new TeleBox(props));
-  useUpdateEffect(() => {
-    if (props.prefersColorScheme != null) {
-      teleBox.setPrefersColorScheme(props.prefersColorScheme);
-    }
-  }, [teleBox, props.prefersColorScheme]);
-  useUpdateEffect(() => {
-    if (props.minWidth != null) {
-      teleBox.setMinWidth(props.minWidth);
-    }
-  }, [teleBox, props.minWidth]);
-  useUpdateEffect(() => {
-    if (props.minHeight != null) {
-      teleBox.setMinHeight(props.minHeight);
-    }
-  }, [teleBox, props.minHeight]);
-  useUpdateEffect(() => {
-    var _a, _b;
-    teleBox.resize((_a = props.width) != null ? _a : teleBox.width, (_b = props.height) != null ? _b : teleBox.height, true);
-  }, [teleBox, props.width, props.height]);
-  useUpdateEffect(() => {
-    var _a, _b;
-    teleBox.move((_a = props.x) != null ? _a : teleBox.x, (_b = props.y) != null ? _b : teleBox.y, true);
-  }, [teleBox, props.x, props.y]);
-  useUpdateEffect(() => {
-    if (props.title != null) {
-      teleBox.setTitle(props.title);
-    }
-  }, [teleBox, props.title]);
-  useUpdateEffect(() => {
-    if (props.visible != null) {
-      teleBox.setVisible(props.visible);
-    }
-  }, [teleBox, props.visible]);
-  useUpdateEffect(() => {
-    if (props.minimized != null) {
-      teleBox.setMinimized(props.minimized, true);
-    }
-  }, [teleBox, props.minimized]);
-  useUpdateEffect(() => {
-    if (props.maximized != null) {
-      teleBox.setMaximized(props.maximized, true);
-    }
-  }, [teleBox, props.maximized]);
-  useUpdateEffect(() => {
-    if (props.state != null) {
-      teleBox.setState(props.state, true);
-    }
-  }, [teleBox, props.state]);
-  useUpdateEffect(() => {
-    if (props.draggable != null) {
-      teleBox.setDraggable(props.draggable);
-    }
-  }, [teleBox, props.draggable]);
-  useUpdateEffect(() => {
-    if (props.resizable != null) {
-      teleBox.setResizable(props.resizable);
-    }
-  }, [teleBox, props.resizable]);
-  useUpdateEffect(() => {
-    if (props.fence != null) {
-      teleBox.setFence(props.fence);
-    }
-  }, [teleBox, props.fence]);
-  useUpdateEffect(() => {
-    if (props.containerRect != null) {
-      teleBox.setContainerRect(props.containerRect);
-    }
-  }, [teleBox, props.containerRect]);
-  useUpdateEffect(() => {
-    if (props.fixRatio != null) {
-      teleBox.setFixRatio(props.fixRatio);
-    }
-  }, [teleBox, props.fixRatio]);
-  useEffect(() => {
-    if (props.onResize) {
-      teleBox.events.on(TELE_BOX_EVENT.Resize, props.onResize);
-      return () => {
-        teleBox.events.off(TELE_BOX_EVENT.Resize, props.onResize);
-      };
-    }
-    return;
-  }, [teleBox, props.onResize]);
-  useEffect(() => {
-    if (props.onMove) {
-      teleBox.events.on(TELE_BOX_EVENT.Move, props.onMove);
-      return () => {
-        teleBox.events.off(TELE_BOX_EVENT.Move, props.onMove);
-      };
-    }
-    return;
-  }, [teleBox, props.onMove]);
-  useEffect(() => {
-    if (props.onClose) {
-      teleBox.events.on(TELE_BOX_EVENT.Close, props.onClose);
-      return () => {
-        teleBox.events.off(TELE_BOX_EVENT.Close, props.onClose);
-      };
-    }
-    return;
-  }, [teleBox, props.onClose]);
-  useEffect(() => {
-    if (props.onFocus) {
-      teleBox.events.on(TELE_BOX_EVENT.Focus, props.onFocus);
-      return () => {
-        teleBox.events.off(TELE_BOX_EVENT.Focus, props.onFocus);
-      };
-    }
-    return;
-  }, [teleBox, props.onFocus]);
-  useEffect(() => {
-    if (props.onBlur) {
-      teleBox.events.on(TELE_BOX_EVENT.Blur, props.onBlur);
-      return () => {
-        teleBox.events.off(TELE_BOX_EVENT.Blur, props.onBlur);
-      };
-    }
-    return;
-  }, [teleBox, props.onBlur]);
-  useEffect(() => {
-    if (props.onStateChanged) {
-      teleBox.events.on(TELE_BOX_EVENT.State, props.onStateChanged);
-      return () => {
-        teleBox.events.off(TELE_BOX_EVENT.State, props.onStateChanged);
-      };
-    }
-    return;
-  }, [teleBox, props.onStateChanged]);
-  return /* @__PURE__ */ React.createElement("div", {
-    ref: (node) => node && teleBox.render(node),
-    className: teleBox.wrapClassName("box")
-  });
-};
 var style$1 = ".telebox-collector {\n  user-select: none;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  visibility: hidden;\n  display: block;\n  position: absolute;\n  z-index: 200;\n  width: 40px;\n  height: 40px;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  font-size: 0;\n  border-radius: 50%;\n  background: #fff;\n  box-shadow: 0px 2px 6px 0px rgba(47, 65, 146, 0.15);\n  cursor: pointer;\n  user-select: none;\n  pointer-events: none;\n  background-repeat: no-repeat;\n  background-size: 18px 16px;\n  background-position: center;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.telebox-collector-visible {\n  visibility: visible;\n  pointer-events: initial;\n}\n\n.telebox-collector-readonly {\n  cursor: not-allowed;\n}\n\n.telebox-color-scheme-dark {\n  color-scheme: dark;\n}\n\n.telebox-color-scheme-dark.telebox-collector {\n  background-color: #43434d;\n}";
 var collectorSVG = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOCAxNiI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIHN0cm9rZT0iIzdCODhBMCIgc3Ryb2tlLXdpZHRoPSIxLjQiIGQ9Ik0uNyAxLjJoMTYuNnYxMy42SC43eiIgLz4KICAgICAgICA8cGF0aCBmaWxsPSIjN0I4OEEwIiBkPSJNNCA1LjVoNnYxLjRINHpNNCA5LjVoMTB2MS40SDR6IiAvPgogICAgPC9nPgo8L3N2Zz4K";
 class TeleBoxCollector {
@@ -3119,5 +2974,5 @@ class TeleBoxManager {
     return typeof boxOrID === "string" ? this.boxes.find((box) => box.id === boxOrID) : boxOrID;
   }
 }
-export { DefaultTitleBar, TELE_BOX_COLOR_SCHEME, TELE_BOX_DELEGATE_EVENT, TELE_BOX_EVENT, TELE_BOX_MANAGER_EVENT, TELE_BOX_RESIZE_HANDLE, TELE_BOX_STATE, TeleBox, TeleBoxCollector, TeleBoxDragHandleType, TeleBoxManager, TeleBoxReact };
+export { DefaultTitleBar, TELE_BOX_COLOR_SCHEME, TELE_BOX_DELEGATE_EVENT, TELE_BOX_EVENT, TELE_BOX_MANAGER_EVENT, TELE_BOX_RESIZE_HANDLE, TELE_BOX_STATE, TeleBox, TeleBoxCollector, TeleBoxDragHandleType, TeleBoxManager };
 //# sourceMappingURL=telebox-insider.es.js.map