@mdesignable/react 1.0.0-beta.64

package/lib/widgets/DesignerToolsWidget/styles.less

@@ -0,0 +1,29 @@
+@import '../../variables.less';
+
+.@{prefix-cls}-designer-tools {
+  display: flex;
+  align-items: center;
+
+  .ant-input-number {
+    font-size: 12px !important;
+    background: var(--dn-toolbar-input-bg-color) !important;
+    border-color: var(--dn-toolbar-input-border-color) !important;
+    color: var(--dn-toolbar-input-color) !important;
+
+    .ant-input-number-handler-wrap,
+    .ant-input-number-handler {
+      background: var(--dn-toolbar-input-handler-bg-color) !important;
+      border-color: var(--dn-toolbar-input-border-color) !important;
+      color: var(--dn-toolbar-input-color) !important;
+    }
+
+    .ant-input-number-handler-down-inner,
+    .ant-input-number-handler-up-inner {
+      color: var(--dn-toolbar-input-color) !important;
+    }
+
+    &:hover {
+      border-color: var(--dn-toolbar-input-hover-border-color) !important;
+    }
+  }
+}

package/lib/widgets/DroppableWidget/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TreeNode } from '@mdesignable/core';
+import { INodeActionsWidgetActionProps } from '../NodeActionsWidget';
+import './styles.less';
+export interface IDroppableWidgetProps {
+    node?: TreeNode;
+    actions?: INodeActionsWidgetActionProps[];
+    placeholder?: boolean;
+    height?: number;
+    width?: number;
+    style?: React.CSSProperties;
+    className?: string;
+    hasChildren?: boolean;
+}
+export declare const DroppableWidget: React.FC<IDroppableWidgetProps>;

package/lib/widgets/DroppableWidget/index.js

@@ -0,0 +1,49 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DroppableWidget = void 0;
+var react_1 = __importDefault(require("react"));
+var reactive_react_1 = require("@formily/reactive-react");
+var hooks_1 = require("../../hooks");
+var NodeTitleWidget_1 = require("../NodeTitleWidget");
+var NodeActionsWidget_1 = require("../NodeActionsWidget");
+require("./styles.less");
+exports.DroppableWidget = (0, reactive_react_1.observer)(function (_a) {
+    var _b;
+    var node = _a.node, actions = _a.actions, height = _a.height, width = _a.width, placeholder = _a.placeholder, style = _a.style, className = _a.className, hasChildrenProp = _a.hasChildren, props = __rest(_a, ["node", "actions", "height", "width", "placeholder", "style", "className", "hasChildren"]);
+    var currentNode = (0, hooks_1.useTreeNode)();
+    var nodeId = (0, hooks_1.useNodeIdProps)(node);
+    var target = node !== null && node !== void 0 ? node : currentNode;
+    var hasChildren = hasChildrenProp !== null && hasChildrenProp !== void 0 ? hasChildrenProp : ((_b = target.children) === null || _b === void 0 ? void 0 : _b.length) > 0;
+    return (react_1.default.createElement("div", __assign({}, nodeId, props, { className: className, style: style }),
+        hasChildren ? (props.children) : placeholder ? (react_1.default.createElement("div", { style: { height: height, width: width }, className: "dn-droppable-placeholder" },
+            react_1.default.createElement(NodeTitleWidget_1.NodeTitleWidget, { node: target }))) : (props.children),
+        (actions === null || actions === void 0 ? void 0 : actions.length) ? (react_1.default.createElement(NodeActionsWidget_1.NodeActionsWidget, null, actions.map(function (action, key) { return (react_1.default.createElement(NodeActionsWidget_1.NodeActionsWidget.Action, __assign({}, action, { key: key }))); }))) : null));
+});
+exports.DroppableWidget.defaultProps = {
+    placeholder: true,
+};

package/lib/widgets/DroppableWidget/styles.less

@@ -0,0 +1,11 @@
+.dn-droppable-placeholder {
+  height: 60px;
+  background-color: var(--dn-droppable-bg-color);
+  border: 1px dashed var(--dn-droppable-border-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--dn-droppable-color);
+  font-weight: lighter;
+  font-size: 13px;
+}

package/lib/widgets/EmptyWidget/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import './styles.less';
+export interface IEmptyWidgetProps {
+    dragTipsDirection?: 'left' | 'right';
+}
+export declare const EmptyWidget: React.FC<IEmptyWidgetProps>;

package/lib/widgets/EmptyWidget/index.js

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmptyWidget = void 0;
+var react_1 = __importDefault(require("react"));
+var hooks_1 = require("../../hooks");
+var reactive_react_1 = require("@formily/reactive-react");
+var IconWidget_1 = require("../IconWidget");
+require("./styles.less");
+exports.EmptyWidget = (0, reactive_react_1.observer)(function (props) {
+    var _a;
+    var tree = (0, hooks_1.useTree)();
+    var prefix = (0, hooks_1.usePrefix)('empty');
+    var renderEmpty = function () {
+        return (react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column' } },
+            react_1.default.createElement("div", { className: "animations" },
+                react_1.default.createElement(IconWidget_1.IconWidget, { infer: props.dragTipsDirection === 'left'
+                        ? 'DragLeftSourceAnimation'
+                        : 'DragRightSourceAnimation', size: 240 }),
+                react_1.default.createElement(IconWidget_1.IconWidget, { infer: "BatchDragAnimation", size: 240 })),
+            react_1.default.createElement("div", { className: "hotkeys-list" },
+                react_1.default.createElement("div", null,
+                    "Selection ",
+                    react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Command" }),
+                    " + Click /",
+                    ' ',
+                    react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Shift" }),
+                    " + Click /",
+                    ' ',
+                    react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Command" }),
+                    " + A"),
+                react_1.default.createElement("div", null,
+                    "Copy ",
+                    react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Command" }),
+                    " + C / Paste",
+                    ' ',
+                    react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Command" }),
+                    " + V"),
+                react_1.default.createElement("div", null,
+                    "Delete ",
+                    react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Delete" })))));
+    };
+    if (!((_a = tree === null || tree === void 0 ? void 0 : tree.children) === null || _a === void 0 ? void 0 : _a.length)) {
+        return (react_1.default.createElement("div", { className: prefix }, props.children ? props.children : renderEmpty()));
+    }
+    return null;
+});
+exports.EmptyWidget.defaultProps = {
+    dragTipsDirection: 'left',
+};

package/lib/widgets/EmptyWidget/styles.less

@@ -0,0 +1,27 @@
+@import '../../variables.less';
+
+.@{prefix-cls}-empty {
+  transform: perspective(1px) translate3d(0, 0, 0);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 100%;
+  width: 100%;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--dn-empty-bg-color);
+  .animations {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  .hotkeys-list {
+    text-align: center;
+    line-height: 30px;
+    color: #888;
+  }
+}

package/lib/widgets/GhostWidget/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import './styles.less';
+export declare const GhostWidget: React.MemoExoticComponent<import("@formily/reactive-react").ReactFC<unknown>>;

package/lib/widgets/GhostWidget/index.js

@@ -0,0 +1,61 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GhostWidget = void 0;
+var react_1 = __importStar(require("react"));
+var hooks_1 = require("../../hooks");
+var core_1 = require("@mdesignable/core");
+var reactive_1 = require("@formily/reactive");
+var reactive_react_1 = require("@formily/reactive-react");
+var NodeTitleWidget_1 = require("../NodeTitleWidget");
+require("./styles.less");
+exports.GhostWidget = (0, reactive_react_1.observer)(function () {
+    var designer = (0, hooks_1.useDesigner)();
+    var cursor = (0, hooks_1.useCursor)();
+    var ref = (0, react_1.useRef)();
+    var prefix = (0, hooks_1.usePrefix)('ghost');
+    var movingNodes = designer.findMovingNodes();
+    var firstNode = movingNodes[0];
+    (0, react_1.useEffect)(function () {
+        return (0, reactive_1.autorun)(function () {
+            var _a, _b;
+            var transform = "perspective(1px) translate3d(".concat(((_a = cursor.position) === null || _a === void 0 ? void 0 : _a.topClientX) - 18, "px,").concat(((_b = cursor.position) === null || _b === void 0 ? void 0 : _b.topClientY) - 12, "px,0) scale(0.8)");
+            if (!ref.current)
+                return;
+            ref.current.style.transform = transform;
+        });
+    }, [designer, cursor]);
+    var renderNodes = function () {
+        return (react_1.default.createElement("span", { style: {
+                whiteSpace: 'nowrap',
+            } },
+            react_1.default.createElement(NodeTitleWidget_1.NodeTitleWidget, { node: firstNode }),
+            movingNodes.length > 1 ? '...' : ''));
+    };
+    if (!firstNode)
+        return null;
+    return cursor.status === core_1.CursorStatus.Dragging ? (react_1.default.createElement("div", { ref: ref, className: prefix }, renderNodes())) : null;
+});
+exports.GhostWidget.displayName = 'GhostWidget';

package/lib/widgets/GhostWidget/styles.less

@@ -0,0 +1,20 @@
+@import '../../variables.less';
+
+.@{prefix-cls}-ghost {
+  padding-left: 25px;
+  padding-right: 15px;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  color: var(--dn-ghost-color);
+  font-size: 12px;
+  z-index: 9999;
+  border-radius: 50px;
+  background-color: var(--dn-ghost-bg-color);
+  pointer-events: none;
+  left: 0;
+  top: 0;
+  transform: translate3d(0, 0, 0);
+}

package/lib/widgets/HistoryWidget/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import './styles.less';
+export declare const HistoryWidget: React.FC;

package/lib/widgets/HistoryWidget/index.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HistoryWidget = void 0;
+var react_1 = __importDefault(require("react"));
+var dateformat_1 = __importDefault(require("dateformat"));
+var reactive_react_1 = require("@formily/reactive-react");
+var hooks_1 = require("../../hooks");
+var TextWidget_1 = require("../TextWidget");
+var classnames_1 = __importDefault(require("classnames"));
+require("./styles.less");
+exports.HistoryWidget = (0, reactive_react_1.observer)(function () {
+    var workbench = (0, hooks_1.useWorkbench)();
+    var currentWorkspace = (workbench === null || workbench === void 0 ? void 0 : workbench.activeWorkspace) || (workbench === null || workbench === void 0 ? void 0 : workbench.currentWorkspace);
+    var prefix = (0, hooks_1.usePrefix)('history');
+    if (!currentWorkspace)
+        return null;
+    return (react_1.default.createElement("div", { className: prefix }, currentWorkspace.history.list().map(function (item, index) {
+        var type = item.type || 'default_state';
+        var token = type.replace(/\:/g, '_');
+        return (react_1.default.createElement("div", { className: (0, classnames_1.default)(prefix + '-item', {
+                active: currentWorkspace.history.current === index,
+            }), key: item.timestamp, onClick: function () {
+                currentWorkspace.history.goTo(index);
+            } },
+            react_1.default.createElement("span", { className: prefix + '-item-title' },
+                react_1.default.createElement(TextWidget_1.TextWidget, { token: "operations.".concat(token) })),
+            react_1.default.createElement("span", { className: prefix + '-item-timestamp' },
+                ' ',
+                (0, dateformat_1.default)(item.timestamp, 'yy/mm/dd HH:MM:ss'))));
+    })));
+});

package/lib/widgets/HistoryWidget/styles.less

@@ -0,0 +1,23 @@
+@import '../../variables.less';
+
+.@{prefix-cls}-history {
+  &-item {
+    display: flex;
+    justify-content: space-between;
+    min-height: 32px;
+    padding: 0 10px;
+    align-items: center;
+    cursor: pointer;
+    color: var(--dn-outline-tree-node-header-color);
+    &-timestamp {
+      font-size: 10px;
+    }
+    &:hover {
+      background-color: var(--dn-panel-active-bg-color);
+    }
+
+    &.active {
+      background-color: var(--dn-panel-active-bg-color);
+    }
+  }
+}

package/lib/widgets/IconWidget/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { TooltipProps } from 'antd';
+import './styles.less';
+export interface IconProviderProps {
+    tooltip?: boolean;
+}
+export interface IShadowSVGProps {
+    content?: string;
+    width?: number | string;
+    height?: number | string;
+}
+export interface IIconWidgetProps extends React.HTMLAttributes<HTMLElement> {
+    tooltip?: React.ReactNode | TooltipProps;
+    infer: React.ReactNode | {
+        shadow: string;
+    };
+    size?: number | string;
+}
+export declare const IconWidget: React.FC<IIconWidgetProps> & {
+    Provider?: React.FC<IconProviderProps>;
+    ShadowSVG?: React.FC<IShadowSVGProps>;
+};

package/lib/widgets/IconWidget/index.js

@@ -0,0 +1,137 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconWidget = void 0;
+var react_1 = __importStar(require("react"));
+var shared_1 = require("@mdesignable/shared");
+var reactive_react_1 = require("@formily/reactive-react");
+var antd_1 = require("antd");
+var hooks_1 = require("../../hooks");
+var classnames_1 = __importDefault(require("classnames"));
+require("./styles.less");
+var IconContext = (0, react_1.createContext)(null);
+var isNumSize = function (val) { return /^[\d.]+$/.test(val); };
+exports.IconWidget = (0, reactive_react_1.observer)(function (props) {
+    var _a, _b, _c;
+    var theme = (0, hooks_1.useTheme)();
+    var context = (0, react_1.useContext)(IconContext);
+    var registry = (0, hooks_1.useRegistry)();
+    var prefix = (0, hooks_1.usePrefix)('icon');
+    var size = props.size || '1em';
+    var height = ((_a = props.style) === null || _a === void 0 ? void 0 : _a.height) || size;
+    var width = ((_b = props.style) === null || _b === void 0 ? void 0 : _b.width) || size;
+    var takeIcon = function (infer) {
+        if ((0, shared_1.isStr)(infer)) {
+            var finded = registry.getDesignerIcon(infer);
+            if (finded) {
+                return takeIcon(finded);
+            }
+            return react_1.default.createElement("img", { src: infer, height: height, width: width });
+        }
+        else if ((0, shared_1.isFn)(infer)) {
+            return react_1.default.createElement(infer, {
+                height: height,
+                width: width,
+                fill: 'currentColor',
+            });
+        }
+        else if (react_1.default.isValidElement(infer)) {
+            if (infer.type === 'svg') {
+                return react_1.default.cloneElement(infer, {
+                    height: height,
+                    width: width,
+                    fill: 'currentColor',
+                    viewBox: infer.props.viewBox || '0 0 1024 1024',
+                    focusable: 'false',
+                    'aria-hidden': 'true',
+                });
+            }
+            else if (infer.type === 'path' || infer.type === 'g') {
+                return (react_1.default.createElement("svg", { viewBox: "0 0 1024 1024", height: height, width: width, fill: "currentColor", focusable: "false", "aria-hidden": "true" }, infer));
+            }
+            return infer;
+        }
+        else if ((0, shared_1.isPlainObj)(infer)) {
+            if (infer[theme]) {
+                return takeIcon(infer[theme]);
+            }
+            else if (infer['shadow']) {
+                return (react_1.default.createElement(exports.IconWidget.ShadowSVG, { width: width, height: height, content: infer['shadow'] }));
+            }
+            return null;
+        }
+    };
+    var renderTooltips = function (children) {
+        if (!(0, shared_1.isStr)(props.infer) && (context === null || context === void 0 ? void 0 : context.tooltip))
+            return children;
+        var tooltip = props.tooltip || registry.getDesignerMessage("icons.".concat(props.infer));
+        if (tooltip) {
+            var title = react_1.default.isValidElement(tooltip) || (0, shared_1.isStr)(tooltip)
+                ? tooltip
+                : tooltip.title;
+            var props_1 = react_1.default.isValidElement(tooltip) || (0, shared_1.isStr)(tooltip)
+                ? {}
+                : (0, shared_1.isObj)(tooltip)
+                    ? tooltip
+                    : {};
+            return (react_1.default.createElement(antd_1.Tooltip, __assign({}, props_1, { title: title }), children));
+        }
+        return children;
+    };
+    if (!props.infer)
+        return null;
+    return renderTooltips(react_1.default.createElement("span", __assign({}, props, { className: (0, classnames_1.default)(prefix, props.className), style: __assign(__assign({}, props.style), { cursor: props.onClick ? 'pointer' : (_c = props.style) === null || _c === void 0 ? void 0 : _c.cursor }) }), takeIcon(props.infer)));
+});
+exports.IconWidget.ShadowSVG = function (props) {
+    var ref = (0, react_1.useRef)();
+    var width = isNumSize(props.width) ? "".concat(props.width, "px") : props.width;
+    var height = isNumSize(props.height) ? "".concat(props.height, "px") : props.height;
+    (0, react_1.useEffect)(function () {
+        if (ref.current) {
+            var root = ref.current.attachShadow({
+                mode: 'open',
+            });
+            root.innerHTML = "<svg viewBox=\"0 0 1024 1024\" style=\"width:".concat(width, ";height:").concat(height, "\">").concat(props.content, "</svg>");
+        }
+    }, []);
+    return react_1.default.createElement("div", { ref: ref });
+};
+exports.IconWidget.Provider = function (props) {
+    return (react_1.default.createElement(IconContext.Provider, { value: props }, props.children));
+};

package/lib/widgets/IconWidget/styles.less

@@ -0,0 +1,17 @@
+@import '../../variables.less';
+
+.@{prefix-cls}-icon {
+  display: inline-block;
+  color: inherit;
+  font-style: normal;
+  line-height: 0;
+  text-align: center;
+  text-transform: none;
+  vertical-align: -0.125em;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  svg {
+    pointer-events: none;
+  }
+}

package/lib/widgets/NodeActionsWidget/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { TypographyProps } from 'antd';
+import './styles.less';
+export interface INodeActionsWidgetProps {
+    className?: string;
+    style?: React.CSSProperties;
+    activeShown?: boolean;
+}
+export interface INodeActionsWidgetActionProps extends Omit<React.ComponentProps<'a'>, 'title' | 'type' | 'ref'>, Partial<TypographyProps['Link']> {
+    className?: string;
+    style?: React.CSSProperties;
+    title: React.ReactNode;
+    icon?: React.ReactNode;
+}
+export declare const NodeActionsWidget: React.FC<INodeActionsWidgetProps> & {
+    Action?: React.FC<INodeActionsWidgetActionProps>;
+};

package/lib/widgets/NodeActionsWidget/index.js

@@ -0,0 +1,54 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NodeActionsWidget = void 0;
+var react_1 = __importDefault(require("react"));
+var antd_1 = require("antd");
+var reactive_react_1 = require("@formily/reactive-react");
+var hooks_1 = require("../../hooks");
+var IconWidget_1 = require("../IconWidget");
+var TextWidget_1 = require("../TextWidget");
+var classnames_1 = __importDefault(require("classnames"));
+require("./styles.less");
+exports.NodeActionsWidget = (0, reactive_react_1.observer)(function (props) {
+    var node = (0, hooks_1.useTreeNode)();
+    var prefix = (0, hooks_1.usePrefix)('node-actions');
+    var selected = (0, hooks_1.useSelected)();
+    if (selected.indexOf(node.id) === -1 && props.activeShown)
+        return null;
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(prefix, props.className), style: props.style },
+        react_1.default.createElement("div", { className: prefix + '-content' },
+            react_1.default.createElement(antd_1.Space, { split: react_1.default.createElement(antd_1.Divider, { type: "vertical" }) }, props.children))));
+});
+exports.NodeActionsWidget.Action = function (_a) {
+    var icon = _a.icon, title = _a.title, props = __rest(_a, ["icon", "title"]);
+    var prefix = (0, hooks_1.usePrefix)('node-actions-item');
+    return (react_1.default.createElement(antd_1.Typography.Link, __assign({}, props, { className: (0, classnames_1.default)(props.className, prefix), "data-click-stop-propagation": "true" }),
+        react_1.default.createElement("span", { className: prefix + '-text' },
+            react_1.default.createElement(IconWidget_1.IconWidget, { infer: icon }),
+            react_1.default.createElement(TextWidget_1.TextWidget, null, title))));
+};

package/lib/widgets/NodeActionsWidget/styles.less

@@ -0,0 +1,53 @@
+.dn-node-actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  overflow: hidden;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  &-content {
+    position: relative;
+    padding: 0 20px;
+    display: flex;
+    align-items: center;
+    line-height: 1;
+    &::before {
+      position: absolute;
+      content: '';
+      display: block;
+      height: 0;
+      width: 300%;
+      top: 50%;
+      border-bottom: 1px dashed var(--border-color-split);
+      right: 100%;
+    }
+    &::after {
+      position: absolute;
+      content: '';
+      display: block;
+      height: 0;
+      width: 300%;
+      top: 50%;
+      border-bottom: 1px dashed var(--border-color-split);
+      left: 100%;
+    }
+    a {
+      color: var(--text-color-secondary);
+      &:hover {
+        color: var(--primary-color);
+      }
+    }
+  }
+  &-item {
+    &-text {
+      font-size: 10px;
+      display: flex;
+      align-items: center;
+      line-height: 1;
+      .dn-icon {
+        margin-right: 6px;
+      }
+    }
+  }
+}

package/lib/widgets/NodePathWidget/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import './styles.less';
+export interface INodePathWidgetProps {
+    workspaceId?: string;
+    maxItems?: number;
+}
+export declare const NodePathWidget: React.FC<INodePathWidgetProps>;