@formily-design/react 1.0.0

package/lib/widgets/IconWidget/index.js

@@ -0,0 +1,141 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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;
+const react_1 = __importStar(require("react"));
+const shared_1 = require("@formily-design/shared");
+const reactive_react_1 = require("@formily/reactive-react");
+const antd_1 = require("antd");
+const hooks_1 = require("../../hooks");
+const classnames_1 = __importDefault(require("classnames"));
+require("./styles.less");
+const IconContext = (0, react_1.createContext)(null);
+const isNumSize = (val) => /^[\d.]+$/.test(val);
+exports.IconWidget = (0, reactive_react_1.observer)((props) => {
+    var _a, _b, _c;
+    const theme = (0, hooks_1.useTheme)();
+    const context = (0, react_1.useContext)(IconContext);
+    const registry = (0, hooks_1.useRegistry)();
+    const prefix = (0, hooks_1.usePrefix)('icon');
+    const size = props.size || '1em';
+    const height = ((_a = props.style) === null || _a === void 0 ? void 0 : _a.height) || size;
+    const width = ((_b = props.style) === null || _b === void 0 ? void 0 : _b.width) || size;
+    const takeIcon = (infer) => {
+        if ((0, shared_1.isStr)(infer)) {
+            const 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,
+                width,
+                fill: 'currentColor',
+            });
+        }
+        else if (react_1.default.isValidElement(infer)) {
+            if (infer.type === 'svg') {
+                const svgProps = {
+                    height,
+                    width,
+                    fill: 'currentColor',
+                    viewBox: infer.props.viewBox || '0 0 1024 1024',
+                    focusable: 'false',
+                    'aria-hidden': 'true',
+                };
+                return react_1.default.cloneElement(infer, svgProps);
+            }
+            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;
+        }
+    };
+    const renderTooltips = (children) => {
+        if (!(0, shared_1.isStr)(props.infer) && (context === null || context === void 0 ? void 0 : context.tooltip))
+            return children;
+        const tooltip = props.tooltip || registry.getDesignerMessage(`icons.${props.infer}`);
+        if (tooltip) {
+            const title = react_1.default.isValidElement(tooltip) || (0, shared_1.isStr)(tooltip)
+                ? tooltip
+                : tooltip.title;
+            const props = react_1.default.isValidElement(tooltip) || (0, shared_1.isStr)(tooltip)
+                ? {}
+                : (0, shared_1.isObj)(tooltip)
+                    ? tooltip
+                    : {};
+            return (react_1.default.createElement(antd_1.Tooltip, { ...props, title: title }, children));
+        }
+        return children;
+    };
+    if (!props.infer)
+        return null;
+    return renderTooltips(react_1.default.createElement("span", { ...props, className: (0, classnames_1.default)(prefix, props.className), style: {
+            ...props.style,
+            cursor: props.onClick ? 'pointer' : (_c = props.style) === null || _c === void 0 ? void 0 : _c.cursor,
+        } }, takeIcon(props.infer)));
+});
+exports.IconWidget.ShadowSVG = (props) => {
+    const ref = (0, react_1.useRef)();
+    const width = isNumSize(props.width) ? `${props.width}px` : props.width;
+    const height = isNumSize(props.height) ? `${props.height}px` : props.height;
+    (0, react_1.useEffect)(() => {
+        if (ref.current) {
+            const root = ref.current.shadowRoot ||
+                ref.current.attachShadow({
+                    mode: 'open',
+                });
+            root.innerHTML = `<svg viewBox="0 0 1024 1024" style="width:${width};height:${height}">${props.content}</svg>`;
+        }
+    }, []);
+    return react_1.default.createElement("div", { ref: ref });
+};
+exports.IconWidget.Provider = (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,18 @@
+import React from 'react';
+import { TypographyProps } from 'antd';
+import './styles.less';
+export interface INodeActionsWidgetProps {
+    children?: React.ReactNode;
+    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,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NodeActionsWidget = void 0;
+const react_1 = __importDefault(require("react"));
+const antd_1 = require("antd");
+const reactive_react_1 = require("@formily/reactive-react");
+const hooks_1 = require("../../hooks");
+const IconWidget_1 = require("../IconWidget");
+const TextWidget_1 = require("../TextWidget");
+const classnames_1 = __importDefault(require("classnames"));
+require("./styles.less");
+exports.NodeActionsWidget = (0, reactive_react_1.observer)((props) => {
+    const node = (0, hooks_1.useTreeNode)();
+    const prefix = (0, hooks_1.usePrefix)('node-actions');
+    const 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 = ({ icon, title, ...props }) => {
+    const prefix = (0, hooks_1.usePrefix)('node-actions-item');
+    return (react_1.default.createElement(antd_1.Typography.Link, { ...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,51 @@
+.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 #d9d9d9;
+      right: 100%;
+    }
+    &::after {
+      position: absolute;
+      content: '';
+      display: block;
+      height: 0;
+      width: 300%;
+      top: 50%;
+      border-bottom: 1px dashed #d9d9d9;
+      left: 100%;
+    }
+    a {
+      &:hover {
+      }
+    }
+  }
+  &-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>;

package/lib/widgets/NodePathWidget/index.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NodePathWidget = void 0;
+const react_1 = __importDefault(require("react"));
+const antd_1 = require("antd");
+const hooks_1 = require("../../hooks");
+const IconWidget_1 = require("../IconWidget");
+const NodeTitleWidget_1 = require("../NodeTitleWidget");
+const reactive_react_1 = require("@formily/reactive-react");
+require("./styles.less");
+exports.NodePathWidget = (0, reactive_react_1.observer)((props) => {
+    var _a;
+    const selected = (0, hooks_1.useSelectedNode)(props.workspaceId);
+    const selection = (0, hooks_1.useSelection)(props.workspaceId);
+    const hover = (0, hooks_1.useHover)(props.workspaceId);
+    const prefix = (0, hooks_1.usePrefix)('node-path');
+    if (!selected)
+        return react_1.default.createElement(react_1.default.Fragment, null);
+    const maxItems = (_a = props.maxItems) !== null && _a !== void 0 ? _a : 3;
+    const nodes = selected
+        .getParents()
+        .slice(0, maxItems - 1)
+        .reverse()
+        .concat(selected);
+    return (react_1.default.createElement(antd_1.Breadcrumb, { className: prefix, items: nodes.map((node, key) => {
+            return {
+                title: (react_1.default.createElement(react_1.default.Fragment, null,
+                    key === 0 && (react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Position", style: { marginRight: 3 } })),
+                    react_1.default.createElement("a", { href: "", onMouseEnter: () => {
+                            hover.setHover(node);
+                        }, onClick: (e) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                            selection.select(node);
+                        } },
+                        react_1.default.createElement(NodeTitleWidget_1.NodeTitleWidget, { node: node })))),
+            };
+        }) }));
+});

package/lib/widgets/NodePathWidget/styles.less

@@ -0,0 +1,16 @@
+.dn-node-path {
+  padding: 4px 10px !important;
+  border-bottom: 1px solid var(--dn-panel-border-color);
+
+  .dn-icon {
+    font-size: 11px;
+  }
+
+  .ant-breadcrumb-separator {
+    margin: 0 4px !important;
+  }
+
+  a {
+    font-size: 12px;
+  }
+}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { TreeNode } from '@formily-design/core';
+export interface INodeTitleWidgetProps {
+    node: TreeNode;
+}
+export declare const NodeTitleWidget: React.FC<INodeTitleWidgetProps>;

package/lib/widgets/NodeTitleWidget/index.js

@@ -0,0 +1,49 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NodeTitleWidget = void 0;
+const react_1 = __importStar(require("react"));
+const reactive_react_1 = require("@formily/reactive-react");
+exports.NodeTitleWidget = (0, reactive_react_1.observer)((props) => {
+    const takeNode = () => {
+        const node = props.node;
+        if (node.componentName === '$$ResourceNode$$') {
+            return node.children[0];
+        }
+        return node;
+    };
+    const node = takeNode();
+    return react_1.default.createElement(react_1.Fragment, null, node.getMessage('title') || node.componentName);
+});

package/lib/widgets/OutlineWidget/Insertion.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface IInsertionProps {
+    workspaceId?: string;
+}
+export declare const Insertion: React.FC<IInsertionProps>;

package/lib/widgets/OutlineWidget/Insertion.js

@@ -0,0 +1,57 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Insertion = void 0;
+const react_1 = __importDefault(require("react"));
+const hooks_1 = require("../../hooks");
+const core_1 = require("@formily-design/core");
+const reactive_react_1 = require("@formily/reactive-react");
+exports.Insertion = (0, reactive_react_1.observer)(({ workspaceId }) => {
+    const moveHelper = (0, hooks_1.useMoveHelper)(workspaceId);
+    const prefix = (0, hooks_1.usePrefix)('outline-tree-insertion');
+    const createInsertionStyle = () => {
+        const closestDirection = moveHelper.outlineClosestDirection;
+        const closestRect = moveHelper.outlineClosestOffsetRect;
+        const baseStyle = {
+            position: 'absolute',
+            transform: 'perspective(1px) translate3d(0,0,0)',
+            top: 0,
+            left: 0,
+        };
+        if (!closestRect)
+            return baseStyle;
+        if (closestDirection === core_1.ClosestPosition.After ||
+            closestDirection === core_1.ClosestPosition.InnerAfter ||
+            closestDirection === core_1.ClosestPosition.Under ||
+            closestDirection === core_1.ClosestPosition.ForbidAfter ||
+            closestDirection === core_1.ClosestPosition.ForbidInnerAfter ||
+            closestDirection === core_1.ClosestPosition.ForbidUnder) {
+            baseStyle.width = closestRect.width;
+            baseStyle.height = 2;
+            baseStyle.transform = `perspective(1px) translate3d(${closestRect.x}px,${closestRect.y + closestRect.height - 2}px,0)`;
+        }
+        else if (closestDirection === core_1.ClosestPosition.Before ||
+            closestDirection === core_1.ClosestPosition.InnerBefore ||
+            closestDirection === core_1.ClosestPosition.Upper ||
+            closestDirection === core_1.ClosestPosition.ForbidBefore ||
+            closestDirection === core_1.ClosestPosition.ForbidInnerBefore ||
+            closestDirection === core_1.ClosestPosition.ForbidUpper) {
+            baseStyle.width = closestRect.width;
+            baseStyle.height = 2;
+            baseStyle.transform = `perspective(1px) translate3d(${closestRect.x}px,${closestRect.y}px,0)`;
+        }
+        if (closestDirection.includes('FORBID')) {
+            baseStyle.backgroundColor = 'red';
+        }
+        else {
+            baseStyle.backgroundColor = '';
+        }
+        return baseStyle;
+    };
+    if (!(moveHelper === null || moveHelper === void 0 ? void 0 : moveHelper.closestNode))
+        return null;
+    return react_1.default.createElement("div", { className: prefix, style: createInsertionStyle() });
+});
+exports.Insertion.displayName = 'Insertion';

package/lib/widgets/OutlineWidget/OutlineNode.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TreeNode } from '@formily-design/core';
+import './styles.less';
+export interface IOutlineTreeNodeProps {
+    node: TreeNode;
+    style?: React.CSSProperties;
+    className?: string;
+    workspaceId?: string;
+}
+export declare const OutlineTreeNode: React.FC<IOutlineTreeNodeProps>;

package/lib/widgets/OutlineWidget/OutlineNode.js

@@ -0,0 +1,178 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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.OutlineTreeNode = void 0;
+const react_1 = __importStar(require("react"));
+const core_1 = require("@formily-design/core");
+const shared_1 = require("@formily-design/shared");
+const reactive_1 = require("@formily/reactive");
+const reactive_react_1 = require("@formily/reactive-react");
+const hooks_1 = require("../../hooks");
+const IconWidget_1 = require("../IconWidget");
+const NodeTitleWidget_1 = require("../NodeTitleWidget");
+const context_1 = require("./context");
+const classnames_1 = __importDefault(require("classnames"));
+require("./styles.less");
+exports.OutlineTreeNode = (0, reactive_react_1.observer)(({ node, className, style, workspaceId }) => {
+    var _a, _b;
+    const prefix = (0, hooks_1.usePrefix)('outline-tree-node');
+    const engine = (0, hooks_1.useDesigner)();
+    const ref = (0, react_1.useRef)();
+    const ctx = (0, react_1.useContext)(context_1.NodeContext);
+    const request = (0, react_1.useRef)(null);
+    const cursor = (0, hooks_1.useCursor)();
+    const selection = (0, hooks_1.useSelection)(workspaceId);
+    const moveHelper = (0, hooks_1.useMoveHelper)(workspaceId);
+    (0, react_1.useEffect)(() => {
+        return engine.subscribeTo(core_1.DragMoveEvent, () => {
+            var _a;
+            const closestNodeId = (_a = moveHelper === null || moveHelper === void 0 ? void 0 : moveHelper.closestNode) === null || _a === void 0 ? void 0 : _a.id;
+            const closestDirection = moveHelper === null || moveHelper === void 0 ? void 0 : moveHelper.outlineClosestDirection;
+            const id = node.id;
+            if (!ref.current)
+                return;
+            if (closestNodeId === id &&
+                closestDirection === core_1.ClosestPosition.Inner) {
+                if (!ref.current.classList.contains('droppable')) {
+                    ref.current.classList.add('droppable');
+                }
+                if (!ref.current.classList.contains('expanded')) {
+                    if (request.current) {
+                        clearTimeout(request.current);
+                        request.current = null;
+                    }
+                    request.current = setTimeout(() => {
+                        ref.current.classList.add('expanded');
+                    }, 600);
+                }
+            }
+            else {
+                if (request.current) {
+                    clearTimeout(request.current);
+                    request.current = null;
+                }
+                if (ref.current.classList.contains('droppable')) {
+                    ref.current.classList.remove('droppable');
+                }
+            }
+        });
+    }, [node, moveHelper, cursor]);
+    (0, react_1.useEffect)(() => {
+        return (0, reactive_1.autorun)(() => {
+            var _a;
+            const selectedIds = (selection === null || selection === void 0 ? void 0 : selection.selected) || [];
+            const id = node.id;
+            if (!ref.current)
+                return;
+            if (selectedIds.includes(id)) {
+                if (!ref.current.classList.contains('selected')) {
+                    ref.current.classList.add('selected');
+                }
+            }
+            else {
+                if (ref.current.classList.contains('selected')) {
+                    ref.current.classList.remove('selected');
+                }
+            }
+            if (cursor.status === core_1.CursorStatus.Dragging &&
+                ((_a = moveHelper === null || moveHelper === void 0 ? void 0 : moveHelper.dragNodes) === null || _a === void 0 ? void 0 : _a.length)) {
+                if (ref.current.classList.contains('selected')) {
+                    ref.current.classList.remove('selected');
+                }
+            }
+        });
+    }, [node, selection, moveHelper]);
+    if (!node)
+        return null;
+    const renderIcon = (node) => {
+        var _a;
+        const icon = node.designerProps.icon;
+        if (icon) {
+            return react_1.default.createElement(IconWidget_1.IconWidget, { infer: icon, size: 12 });
+        }
+        if (node === (node === null || node === void 0 ? void 0 : node.root)) {
+            return react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Page", size: 12 });
+        }
+        else if ((_a = node.designerProps) === null || _a === void 0 ? void 0 : _a.droppable) {
+            return react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Container", size: 12 });
+        }
+        return react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Component", size: 12 });
+    };
+    const renderTitle = (node) => {
+        if ((0, shared_1.isFn)(ctx.renderTitle))
+            return ctx.renderTitle(node);
+        return (react_1.default.createElement("span", null,
+            react_1.default.createElement(NodeTitleWidget_1.NodeTitleWidget, { node: node })));
+    };
+    const renderActions = (node) => {
+        if ((0, shared_1.isFn)(ctx.renderActions))
+            return ctx.renderActions(node);
+    };
+    return (react_1.default.createElement("div", { style: style, ref: ref, className: (0, classnames_1.default)(prefix, className, 'expanded'), "data-designer-outline-node-id": node.id },
+        react_1.default.createElement("div", { className: prefix + '-header' },
+            react_1.default.createElement("div", { className: prefix + '-header-head', style: {
+                    left: -node.depth * 16,
+                    width: node.depth * 16,
+                } }),
+            react_1.default.createElement("div", { className: prefix + '-header-content' },
+                react_1.default.createElement("div", { className: prefix + '-header-base' },
+                    (((_a = node === null || node === void 0 ? void 0 : node.children) === null || _a === void 0 ? void 0 : _a.length) > 0 || node === node.root) && (react_1.default.createElement("div", { className: prefix + '-expand', onClick: (e) => {
+                            var _a, _b, _c, _d;
+                            e.preventDefault();
+                            e.stopPropagation();
+                            if ((_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains('expanded')) {
+                                (_c = ref.current) === null || _c === void 0 ? void 0 : _c.classList.remove('expanded');
+                            }
+                            else {
+                                (_d = ref.current) === null || _d === void 0 ? void 0 : _d.classList.add('expanded');
+                            }
+                        } },
+                        react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Expand", size: 10 }))),
+                    react_1.default.createElement("div", { className: prefix + '-icon' }, renderIcon(node)),
+                    react_1.default.createElement("div", { className: prefix + '-title' }, renderTitle(node))),
+                react_1.default.createElement("div", { className: prefix + '-header-actions', "data-click-stop-propagation": true },
+                    renderActions(node),
+                    node !== node.root && (react_1.default.createElement(IconWidget_1.IconWidget, { className: (0, classnames_1.default)(prefix + '-hidden-icon', {
+                            hidden: node.hidden,
+                        }), infer: node.hidden ? 'EyeClose' : 'Eye', size: 14, onClick: () => {
+                            node.hidden = !node.hidden;
+                        } }))))),
+        react_1.default.createElement("div", { className: prefix + '-children' }, (_b = node.children) === null || _b === void 0 ? void 0 : _b.map((child) => {
+            return (react_1.default.createElement(exports.OutlineTreeNode, { node: child, key: child.id, workspaceId: workspaceId }));
+        }))));
+});

package/lib/widgets/OutlineWidget/context.d.ts

@@ -0,0 +1,8 @@
+import { TreeNode } from '@formily-design/core';
+import React from 'react';
+interface INodeContext {
+    renderTitle?: (node: TreeNode) => React.ReactNode;
+    renderActions?: (node: TreeNode) => React.ReactNode;
+}
+export declare const NodeContext: React.Context<INodeContext>;
+export {};

package/lib/widgets/OutlineWidget/context.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NodeContext = void 0;
+const react_1 = require("react");
+exports.NodeContext = (0, react_1.createContext)(null);