feat: trigger context

Author: WindRunnerMax

packages/plugin/src/shared/modules/trigger.tsx

@@ -1,11 +1,64 @@
 import type { TriggerProps } from "@arco-design/web-react";
 import { Trigger as ArcoTrigger } from "@arco-design/web-react";
 import type { FC } from "react";
-import { Fragment } from "react";
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
 
-export const Trigger: FC<TriggerProps & { readonly?: boolean }> = props => {
-  if (props.readonly) {
-    return <Fragment>{props.children}</Fragment>;
-  }
-  return <ArcoTrigger {...props}>{props.children}</ArcoTrigger>;
+import { useMemoFn } from "../hooks/preset";
+
+type ContextProps = { lock: () => void; unlock: () => void };
+const Context = createContext<ContextProps>({
+  lock: () => null,
+  unlock: () => null,
+});
+
+export const TriggerContext: FC<TriggerProps> = props => {
+  const { children, ...rest } = props;
+  const context = useContext(Context);
+  const [visible, setVisible] = useState(false);
+  const [prevVisible, setPrevVisible] = useState(true);
+  const popupVisible = rest.popupVisible === void 0 ? visible : rest.popupVisible;
+
+  const lock = useMemoFn(() => {
+    setPrevVisible(false);
+  });
+
+  const unlock = useMemoFn(() => {
+    setPrevVisible(true);
+  });
+
+  const provider = useMemo(() => ({ lock, unlock }), [lock, unlock]);
+
+  const onVisibleChange = useMemoFn((v: boolean) => {
+    if (rest.onVisibleChange) {
+      rest.onVisibleChange(v);
+    } else {
+      setVisible(v);
+    }
+  });
+
+  useEffect(() => {
+    if (popupVisible) {
+      context.lock();
+    } else {
+      context.unlock();
+    }
+  }, [popupVisible, context]);
+
+  return (
+    <Context.Provider value={provider}>
+      <ArcoTrigger
+        {...rest}
+        popupVisible={popupVisible}
+        onVisibleChange={onVisibleChange}
+        style={{
+          ...rest.style,
+          opacity: !prevVisible ? 0 : void 0,
+          visibility: !prevVisible ? "hidden" : void 0,
+          transition: "opacity 0.3s",
+        }}
+      >
+        {children}
+      </ArcoTrigger>
+    </Context.Provider>
+  );
 };

packages/plugin/src/table/components/pin-toolbar.tsx

@@ -1,12 +1,12 @@
 import { Button } from "@arco-design/web-react";
+import { Trigger } from "@arco-design/web-react";
 import type { EditorKit } from "doc-editor-core";
 import type { BlockElement } from "doc-editor-delta";
 import { Editor, Transforms } from "doc-editor-delta";
 import { findNodePath } from "doc-editor-utils";
 import type { FC } from "react";
 import { useMemo } from "react";
 
-import { Trigger } from "../../shared/modules/trigger";
 import type { TableContext } from "../hooks/use-context";
 import { MergeIcon } from "../icon/merge";
 import { SplitIcon } from "../icon/split";

packages/react/src/components/preset.ts

@@ -37,7 +37,7 @@ export const example: BaseNode[] = [
       },
     ],
   },
-  { children: [{ text: "行内元素" }], heading: { type: "h2", id: "83ddface" } },
+  { children: [{ text: "行内结构" }], heading: { type: "h2", id: "83ddface" } },
   {
     children: [
       { text: "支持" },
@@ -68,7 +68,7 @@ export const example: BaseNode[] = [
     ],
     align: "center",
   },
-  { children: [{ text: "行级元素" }], heading: { id: "4644b757", type: "h2" } },
+  { children: [{ text: "段落结构" }], heading: { id: "4644b757", type: "h2" } },
   { children: [{ text: "标题" }], heading: { type: "h3", id: "213e6703" } },
   {
     children: [
@@ -93,7 +93,7 @@ export const example: BaseNode[] = [
   { "line-height": 2, "children": [{ text: "支持行级别的文字对齐。" }], "align": "left" },
   {
     "line-height": 2,
-    "children": [{ text: "嵌套元素" }],
+    "children": [{ text: "组合结构" }],
     "heading": { type: "h2", id: "QFwoE5fK" },
   },
   { children: [{ text: "引用块" }], heading: { type: "h3", id: "8426a51b" } },
@@ -169,7 +169,7 @@ export const example: BaseNode[] = [
       },
     ],
   },
-  { children: [{ text: "嵌入元素" }], heading: { type: "h2", id: "cfSqPoYb" } },
+  { children: [{ text: "嵌入结构" }], heading: { type: "h2", id: "cfSqPoYb" } },
   { children: [{ text: "图片" }], heading: { type: "h3", id: "aab55qq1" } },
   { children: [{ text: "支持图片上传。" }] },
   {
@@ -197,7 +197,7 @@ export const example: BaseNode[] = [
     ],
   },
   { "dividing-line": true, "children": [{ text: "" }] },
-  { children: [{ text: "块级元素" }], heading: { type: "h2", id: "DEnfO0kv" } },
+  { children: [{ text: "块级结构" }], heading: { type: "h2", id: "DEnfO0kv" } },
   { children: [{ text: "高亮块" }], heading: { type: "h3", id: "af869b51" } },
   {
     "highlight-block": { border: "var(--arcoblue-6)", background: "var(--arcoblue-3)" },