refactor(settings): move NodePath to NodePathWidget

Author: janryWang

packages/react-settings-form/src/SettingsForm.tsx

@@ -8,17 +8,17 @@ import {
   useSelected,
   useOperation,
   useCurrentNode,
+  useWorkbench,
   IconWidget,
+  NodePathWidget,
 } from '@designable/react'
 import { SchemaField } from './SchemaField'
 import { ISettingFormProps } from './types'
 import { SettingsFormContext } from './shared/context'
 import { useLocales, useSnapshot } from './effects'
-import { NodePath } from './components/NodePath'
 import { Empty } from 'antd'
 import cls from 'classnames'
 import './styles.less'
-import { useWorkbench } from 'packages/react/lib'
 
 const GlobalState = {
   idleRequest: null,
@@ -89,7 +89,7 @@ export const SettingsForm: React.FC<ISettingFormProps> = observer(
     return (
       <IconWidget.Provider tooltip>
         <div className={prefix + '-wrapper'}>
-          {!isEmpty && <NodePath />}
+          {!isEmpty && <NodePathWidget workspaceId={currentWorkspaceId} />}
           <div className={prefix + '-content'}>{render()}</div>
         </div>
       </IconWidget.Provider>

packages/react-settings-form/src/components/NodePath/index.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, Fragment, useContext } from 'react'
+import React, { createContext, useContext } from 'react'
 import { GlobalRegistry } from '@designable/core'
 import { isStr, isFn, isPlainObj } from '@designable/shared'
 import { observer } from '@formily/reactive-react'

packages/react/src/widgets/IconWidget/index.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import { Breadcrumb } from 'antd'
+import { useCurrentNode, useSelection, usePrefix, useHover } from '../../hooks'
+import { IconWidget } from '../IconWidget'
+import { TextWidget } from '../TextWidget'
+import { observer } from '@formily/react'
+import './styles.less'
+
+export interface INodePathWidgetProps {
+  workspaceId?: string
+  maxItems?: number
+}
+
+export const NodePathWidget: React.FC<INodePathWidgetProps> = observer(
+  (props) => {
+    const selected = useCurrentNode(props.workspaceId)
+    const selection = useSelection(props.workspaceId)
+    const hover = useHover(props.workspaceId)
+    const prefix = usePrefix('node-path')
+    if (!selected) return <React.Fragment />
+    const maxItems = props.maxItems ?? 3
+    const nodes = selected
+      .getParents()
+      .slice(0, maxItems - 1)
+      .reverse()
+      .concat(selected)
+    return (
+      <Breadcrumb className={prefix}>
+        {nodes.map((node, key) => {
+          return (
+            <Breadcrumb.Item key={key}>
+              {key === 0 && (
+                <IconWidget infer="Position" style={{ marginRight: 3 }} />
+              )}
+              <a
+                href=""
+                onMouseEnter={() => {
+                  hover.setHover(node)
+                }}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  e.preventDefault()
+                  selection.select(node)
+                }}
+              >
+                <TextWidget>{node.designerProps.title}</TextWidget>
+              </a>
+            </Breadcrumb.Item>
+          )
+        })}
+      </Breadcrumb>
+    )
+  }
+)

packages/react/src/widgets/NodePathWidget/index.tsx

@@ -3,7 +3,7 @@
 .dn-node-path {
   padding: 4px 10px !important;
   border-bottom: 1px solid @border-color-split;
-  .dn-icon{
+  .dn-icon {
     font-size: 11px;
   }
   .@{ant-prefix}-breadcrumb-separator {
@@ -13,4 +13,4 @@
   a {
     font-size: 12px;
   }
-}
+}

packages/react-settings-form/src/components/NodePath/styles.less renamed to packages/react/src/widgets/NodePathWidget/styles.less

@@ -9,3 +9,4 @@ export * from './OutlineWidget'
 export * from './IconWidget'
 export * from './TextWidget'
 export * from './HistoryWidget'
+export * from './NodePathWidget'