onchain-lexical-instance 0.0.3 → 0.0.4

package/dist/OnchainLexicalInstance.js

@@ -1563,8 +1563,8 @@ function isFixedAddress(instance) {
   return !!instance && Object.keys(instance).length === 1 && typeof instance.value === 'object';
 }
 
-var css_248z$5 = ".styles-module_left__CN0nC{align-items:center;display:flex;flex-direction:column;left:0;position:absolute;transform:translate(-26px);user-select:none;width:26px}.styles-module_left__CN0nC .styles-module_link__M-1Wq{margin-bottom:10px}.styles-module_left__CN0nC>*{align-items:center;display:inline-flex;justify-content:center}.styles-module_left__CN0nC>span:first-of-type{height:38px}.styles-module_right__sxVYl{align-items:center;display:inline-flex;height:40px;justify-content:flex-end;position:absolute;right:0;top:0;user-select:none}.styles-module_hasChildren__FqxrJ,.styles-module_hover__IeKlt:hover,.styles-module_selected__dpCTX{color:#0563b0}";
-var Styles$5 = {"left":"styles-module_left__CN0nC","link":"styles-module_link__M-1Wq","right":"styles-module_right__sxVYl","selected":"styles-module_selected__dpCTX","hasChildren":"styles-module_hasChildren__FqxrJ","hover":"styles-module_hover__IeKlt"};
+var css_248z$5 = ".styles-module_left__CN0nC{align-items:center;display:flex;flex-direction:column;left:0;position:absolute;transform:translate(-26px);user-select:none;width:26px}.styles-module_left__CN0nC .styles-module_link__M-1Wq{margin-bottom:6px}.styles-module_left__CN0nC .styles-module_link__M-1Wq>button>span>div{position:relative}.styles-module_left__CN0nC .styles-module_link__M-1Wq>button>span>div>i{align-items:center;background-color:#0563b0;border-radius:50%;bottom:-2px;color:#fff;display:flex;font-size:10px;font-style:normal;height:12px;justify-content:center;position:absolute;right:-2px;width:12px}.styles-module_left__CN0nC .styles-module_hiddenLinkCount__ThNp5>button>span>div>i,.styles-module_left__CN0nC .styles-module_link__M-1Wq>button>span>div>i:empty{display:none}.styles-module_left__CN0nC>*{align-items:center;display:inline-flex;justify-content:center}.styles-module_left__CN0nC>span:first-of-type{height:38px}.styles-module_right__sxVYl{align-items:center;display:inline-flex;height:40px;justify-content:flex-end;position:absolute;right:0;top:0;user-select:none}.styles-module_hasChildren__FqxrJ,.styles-module_hover__IeKlt:hover,.styles-module_selected__dpCTX{color:#0563b0}";
+var Styles$5 = {"left":"styles-module_left__CN0nC","link":"styles-module_link__M-1Wq","hiddenLinkCount":"styles-module_hiddenLinkCount__ThNp5","right":"styles-module_right__sxVYl","selected":"styles-module_selected__dpCTX","hasChildren":"styles-module_hasChildren__FqxrJ","hover":"styles-module_hover__IeKlt"};
 styleInject(css_248z$5);
 
 /**
@@ -1585,11 +1585,13 @@ const Bar = props => {
   const {
     preview,
     selectedInstance,
-    getInstanceIcon
+    getInstanceIcon,
+    components
   } = instanceConfig.useInstanceConfig();
   const {
     extra
   } = settings.useSettings();
+  const [open, setOpen] = React.useState(false);
 
   // icon-front-link1
   const isSelected = React.useMemo(() => {
@@ -1628,6 +1630,11 @@ const Bar = props => {
     }
     return 'demand1';
   }, [instance]);
+  const Components = React.useMemo(() => {
+    return {
+      ...components
+    };
+  }, [components]);
   const hasChildren = !!instance?.children?.length || instance?.insBom;
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -1637,10 +1644,31 @@ const Bar = props => {
         className: hasChildren ? Styles$5.hasChildren : undefined,
         type: `icon-front-${icon}`
       }), !preview && extra.showLeftToolbar !== false ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
-          className: `${Styles$5.hover} ${Styles$5.link}`,
-          type: "icon-front-link1"
+        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+          className: `${Styles$5.link} ${open ? Styles$5.hiddenLinkCount : ''}`,
+          children: /*#__PURE__*/jsxRuntime.jsx(DropDown, {
+            arrow: true,
+            showIcon: false,
+            disabled: !instance?.trackLinkCount,
+            stopCloseOnClickSelf: true,
+            buttonLabel:
+            /*#__PURE__*/
+            // [TODO] 显示 trackLinkCount
+            jsxRuntime.jsxs("div", {
+              children: [/*#__PURE__*/jsxRuntime.jsx("i", {
+                children: instance?.trackLinkCount || ''
+              }), /*#__PURE__*/jsxRuntime.jsx(Icon.StaticIcon, {
+                className: `${Styles$5.hover}`,
+                type: "icon-front-link1"
+              })]
+            }),
+            onOpen: setOpen,
+            children: Components.TrackLinkList && instance ? /*#__PURE__*/jsxRuntime.jsx(Components.TrackLinkList, {
+              number: instance.number
+            }) : null
+          })
         }), /*#__PURE__*/jsxRuntime.jsxs(DropDown, {
+          arrow: true,
           showIcon: false,
           buttonLabel: /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
             className: Styles$5.hover,

package/dist/OnchainLexicalInstance.mjs

@@ -21,7 +21,7 @@ import React__default, { useState, useEffect, useMemo, useCallback, useRef, Susp
 import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { useSettings } from 'onchain-lexical-context/settings';
 import DropDown, { DropDownItem } from 'onchain-lexical-ui/DropDown';
-import { Icon } from 'onchain-lexical-ui/Icon';
+import { Icon, StaticIcon } from 'onchain-lexical-ui/Icon';
 import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
 import { $textToRichNodes } from 'onchain-lexical-markdown';
 import { $setBlocksType } from '@lexical/selection';
@@ -1549,8 +1549,8 @@ function isFixedAddress(instance) {
   return !!instance && Object.keys(instance).length === 1 && typeof instance.value === 'object';
 }
 
-var css_248z$5 = ".styles-module_left__CN0nC{align-items:center;display:flex;flex-direction:column;left:0;position:absolute;transform:translate(-26px);user-select:none;width:26px}.styles-module_left__CN0nC .styles-module_link__M-1Wq{margin-bottom:10px}.styles-module_left__CN0nC>*{align-items:center;display:inline-flex;justify-content:center}.styles-module_left__CN0nC>span:first-of-type{height:38px}.styles-module_right__sxVYl{align-items:center;display:inline-flex;height:40px;justify-content:flex-end;position:absolute;right:0;top:0;user-select:none}.styles-module_hasChildren__FqxrJ,.styles-module_hover__IeKlt:hover,.styles-module_selected__dpCTX{color:#0563b0}";
-var Styles$5 = {"left":"styles-module_left__CN0nC","link":"styles-module_link__M-1Wq","right":"styles-module_right__sxVYl","selected":"styles-module_selected__dpCTX","hasChildren":"styles-module_hasChildren__FqxrJ","hover":"styles-module_hover__IeKlt"};
+var css_248z$5 = ".styles-module_left__CN0nC{align-items:center;display:flex;flex-direction:column;left:0;position:absolute;transform:translate(-26px);user-select:none;width:26px}.styles-module_left__CN0nC .styles-module_link__M-1Wq{margin-bottom:6px}.styles-module_left__CN0nC .styles-module_link__M-1Wq>button>span>div{position:relative}.styles-module_left__CN0nC .styles-module_link__M-1Wq>button>span>div>i{align-items:center;background-color:#0563b0;border-radius:50%;bottom:-2px;color:#fff;display:flex;font-size:10px;font-style:normal;height:12px;justify-content:center;position:absolute;right:-2px;width:12px}.styles-module_left__CN0nC .styles-module_hiddenLinkCount__ThNp5>button>span>div>i,.styles-module_left__CN0nC .styles-module_link__M-1Wq>button>span>div>i:empty{display:none}.styles-module_left__CN0nC>*{align-items:center;display:inline-flex;justify-content:center}.styles-module_left__CN0nC>span:first-of-type{height:38px}.styles-module_right__sxVYl{align-items:center;display:inline-flex;height:40px;justify-content:flex-end;position:absolute;right:0;top:0;user-select:none}.styles-module_hasChildren__FqxrJ,.styles-module_hover__IeKlt:hover,.styles-module_selected__dpCTX{color:#0563b0}";
+var Styles$5 = {"left":"styles-module_left__CN0nC","link":"styles-module_link__M-1Wq","hiddenLinkCount":"styles-module_hiddenLinkCount__ThNp5","right":"styles-module_right__sxVYl","selected":"styles-module_selected__dpCTX","hasChildren":"styles-module_hasChildren__FqxrJ","hover":"styles-module_hover__IeKlt"};
 styleInject(css_248z$5);
 
 /**
@@ -1571,11 +1571,13 @@ const Bar = props => {
   const {
     preview,
     selectedInstance,
-    getInstanceIcon
+    getInstanceIcon,
+    components
   } = useInstanceConfig();
   const {
     extra
   } = useSettings();
+  const [open, setOpen] = useState(false);
 
   // icon-front-link1
   const isSelected = useMemo(() => {
@@ -1614,6 +1616,11 @@ const Bar = props => {
     }
     return 'demand1';
   }, [instance]);
+  const Components = useMemo(() => {
+    return {
+      ...components
+    };
+  }, [components]);
   const hasChildren = !!instance?.children?.length || instance?.insBom;
   return /*#__PURE__*/jsxs(Fragment$1, {
     children: [/*#__PURE__*/jsxs("div", {
@@ -1623,10 +1630,31 @@ const Bar = props => {
         className: hasChildren ? Styles$5.hasChildren : undefined,
         type: `icon-front-${icon}`
       }), !preview && extra.showLeftToolbar !== false ? /*#__PURE__*/jsxs(Fragment$1, {
-        children: [/*#__PURE__*/jsx(Icon, {
-          className: `${Styles$5.hover} ${Styles$5.link}`,
-          type: "icon-front-link1"
+        children: [/*#__PURE__*/jsx("span", {
+          className: `${Styles$5.link} ${open ? Styles$5.hiddenLinkCount : ''}`,
+          children: /*#__PURE__*/jsx(DropDown, {
+            arrow: true,
+            showIcon: false,
+            disabled: !instance?.trackLinkCount,
+            stopCloseOnClickSelf: true,
+            buttonLabel:
+            /*#__PURE__*/
+            // [TODO] 显示 trackLinkCount
+            jsxs("div", {
+              children: [/*#__PURE__*/jsx("i", {
+                children: instance?.trackLinkCount || ''
+              }), /*#__PURE__*/jsx(StaticIcon, {
+                className: `${Styles$5.hover}`,
+                type: "icon-front-link1"
+              })]
+            }),
+            onOpen: setOpen,
+            children: Components.TrackLinkList && instance ? /*#__PURE__*/jsx(Components.TrackLinkList, {
+              number: instance.number
+            }) : null
+          })
         }), /*#__PURE__*/jsxs(DropDown, {
+          arrow: true,
           showIcon: false,
           buttonLabel: /*#__PURE__*/jsx(Icon, {
             className: Styles$5.hover,

package/package.json

@@ -7,7 +7,7 @@
     "instance"
   ],
   "license": "MIT",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "types": "index.d.ts",
   "files": [
     "dist",
@@ -23,9 +23,9 @@
     "@lexical/table": "^0.30.0",
     "@lexical/utils": "^0.30.0",
     "lexical": "0.30.0",
-    "onchain-lexical-context": "^0.0.2",
-    "onchain-lexical-markdown": "^0.0.2",
-    "onchain-lexical-ui": "^0.0.2",
+    "onchain-lexical-context": "^0.0.3",
+    "onchain-lexical-markdown": "^0.0.3",
+    "onchain-lexical-ui": "^0.0.3",
     "onchain-utility": "^0.0.4"
   },
   "sideEffects": false,

package/src/bar/BarComponent.tsx

@@ -11,9 +11,9 @@ import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {useInstanceConfig} from 'onchain-lexical-context/instanceConfig';
 import {useSettings} from 'onchain-lexical-context/settings';
 import DropDown, {DropDownItem} from 'onchain-lexical-ui/DropDown';
-import {Icon} from 'onchain-lexical-ui/Icon';
+import {Icon, StaticIcon} from 'onchain-lexical-ui/Icon';
 import {translateI18n} from 'onchain-utility';
-import {useCallback, useMemo} from 'react';
+import {useCallback, useMemo, useState} from 'react';
 
 import {OPEN_CREATE_WINDOW} from '../const';
 import {Instance} from '../types';
@@ -26,8 +26,10 @@ const Bar = (props: {
 }): JSX.Element => {
   const {insNodeKey, instance} = props;
   const [editor] = useLexicalComposerContext();
-  const {preview, selectedInstance, getInstanceIcon} = useInstanceConfig();
+  const {preview, selectedInstance, getInstanceIcon, components} =
+    useInstanceConfig();
   const {extra} = useSettings();
+  const [open, setOpen] = useState(false);
 
   // icon-front-link1
   const isSelected = useMemo(() => {
@@ -72,6 +74,12 @@ const Bar = (props: {
     return 'demand1';
   }, [instance]);
 
+  const Components = useMemo(() => {
+    return {
+      ...components,
+    };
+  }, [components]);
+
   const hasChildren = !!instance?.children?.length || instance?.insBom;
 
   return (
@@ -83,11 +91,33 @@ const Bar = (props: {
         />
         {!preview && extra.showLeftToolbar !== false ? (
           <>
-            <Icon
-              className={`${Styles.hover} ${Styles.link}`}
-              type="icon-front-link1"
-            />
+            <span
+              className={`${Styles.link} ${
+                open ? Styles.hiddenLinkCount : ''
+              }`}>
+              <DropDown
+                arrow={true}
+                showIcon={false}
+                disabled={!instance?.trackLinkCount}
+                stopCloseOnClickSelf={true}
+                buttonLabel={
+                  // [TODO] 显示 trackLinkCount
+                  <div>
+                    <i>{instance?.trackLinkCount || ''}</i>
+                    <StaticIcon
+                      className={`${Styles.hover}`}
+                      type="icon-front-link1"
+                    />
+                  </div>
+                }
+                onOpen={setOpen}>
+                {Components.TrackLinkList && instance ? (
+                  <Components.TrackLinkList number={instance.number!} />
+                ) : null}
+              </DropDown>
+            </span>
             <DropDown
+              arrow={true}
               showIcon={false}
               buttonLabel={
                 <Icon className={Styles.hover} type="icon-front-xinzeng1" />

package/src/bar/styles.module.less

@@ -11,7 +11,33 @@
   flex-direction: column;
   align-items: center;
   .link {
-    margin-bottom: 10px;
+    margin-bottom: 6px;
+    > button > span > div {
+      position: relative;
+      > i {
+        position: absolute;
+        font-size: 10px;
+        color: #fff;
+        right: -2px;
+        bottom: -2px;
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        display: flex;
+        font-style: normal;
+        align-items: center;
+        justify-content: center;
+        background-color: @themeColor;
+        &:empty {
+          display: none;
+        }
+      }
+    }
+  }
+  .hiddenLinkCount {
+    > button > span > div > i {
+      display: none;
+    }
   }
   > * {
     display: inline-flex;

package/src/types.d.ts

@@ -25,6 +25,7 @@ export interface Instance
   extends InstanceBaseInfo,
     Partial<InstanceExtraAttributes> {
   children?: Instance[];
+  trackLinkCount?: number | null
   __contentText?: string;
 }