@formily-design/react 1.0.0

package/lib/widgets/ComponentTreeWidget/index.js

@@ -0,0 +1,112 @@
+"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.ComponentTreeWidget = exports.TreeNodeWidget = void 0;
+const react_1 = __importStar(require("react"));
+const hooks_1 = require("../../hooks");
+const context_1 = require("../../context");
+const core_1 = require("@formily-design/core");
+const reactive_react_1 = require("@formily/reactive-react");
+const classnames_1 = __importDefault(require("classnames"));
+require("./styles.less");
+exports.TreeNodeWidget = (0, reactive_react_1.observer)((props) => {
+    var _a, _b;
+    const designer = (0, hooks_1.useDesigner)((_b = (_a = props.node) === null || _a === void 0 ? void 0 : _a.designerProps) === null || _b === void 0 ? void 0 : _b.effects);
+    const components = (0, hooks_1.useComponents)();
+    const node = props.node;
+    const renderChildren = () => {
+        var _a, _b;
+        if ((_a = node === null || node === void 0 ? void 0 : node.designerProps) === null || _a === void 0 ? void 0 : _a.selfRenderChildren)
+            return [];
+        return (_b = node === null || node === void 0 ? void 0 : node.children) === null || _b === void 0 ? void 0 : _b.map((child) => {
+            return react_1.default.createElement(exports.TreeNodeWidget, { key: child.id, node: child });
+        });
+    };
+    const renderProps = (extendsProps = {}) => {
+        var _a, _b, _c;
+        const props = {
+            ...(_a = node.designerProps) === null || _a === void 0 ? void 0 : _a.defaultProps,
+            ...extendsProps,
+            ...node.props,
+            ...(_c = (_b = node.designerProps) === null || _b === void 0 ? void 0 : _b.getComponentProps) === null || _c === void 0 ? void 0 : _c.call(_b, node),
+        };
+        if (node.depth === 0) {
+            delete props.style;
+        }
+        return props;
+    };
+    const renderComponent = () => {
+        var _a, _b;
+        const componentName = node.componentName;
+        const Component = components[componentName];
+        const dataId = {};
+        if (Component) {
+            if (designer) {
+                dataId[(_a = designer === null || designer === void 0 ? void 0 : designer.props) === null || _a === void 0 ? void 0 : _a.nodeIdAttrName] = node.id;
+            }
+            return react_1.default.createElement(Component, renderProps(dataId), ...renderChildren());
+        }
+        else {
+            if ((_b = node === null || node === void 0 ? void 0 : node.children) === null || _b === void 0 ? void 0 : _b.length) {
+                return react_1.default.createElement(react_1.Fragment, null, renderChildren());
+            }
+        }
+    };
+    if (!node)
+        return null;
+    if (node.hidden)
+        return null;
+    return react_1.default.createElement(context_1.TreeNodeContext.Provider, { value: node }, renderComponent());
+});
+exports.ComponentTreeWidget = (0, reactive_react_1.observer)((props) => {
+    var _a, _b;
+    const tree = (0, hooks_1.useTree)();
+    const prefix = (0, hooks_1.usePrefix)('component-tree');
+    const designer = (0, hooks_1.useDesigner)();
+    const dataId = {};
+    if (designer && tree) {
+        dataId[(_a = designer === null || designer === void 0 ? void 0 : designer.props) === null || _a === void 0 ? void 0 : _a.nodeIdAttrName] = tree.id;
+    }
+    (0, react_1.useEffect)(() => {
+        core_1.GlobalRegistry.registerDesignerBehaviors(props.components);
+    }, []);
+    return (react_1.default.createElement("div", { style: { ...props.style, ...(_b = tree === null || tree === void 0 ? void 0 : tree.props) === null || _b === void 0 ? void 0 : _b.style }, className: (0, classnames_1.default)(prefix, props.className), ...dataId },
+        react_1.default.createElement(context_1.DesignerComponentsContext.Provider, { value: props.components },
+            react_1.default.createElement(exports.TreeNodeWidget, { node: tree }))));
+});
+exports.ComponentTreeWidget.displayName = 'ComponentTreeWidget';

package/lib/widgets/ComponentTreeWidget/styles.less

@@ -0,0 +1,6 @@
+@import '../../variables.less';
+
+.@{prefix-cls}-component-tree {
+  min-height: 100%;
+  min-width: 100%;
+}

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import './styles.less';
+type DesignerToolsType = 'HISTORY' | 'CURSOR' | 'SCREEN_TYPE';
+export type IDesignerToolsWidgetProps = {
+    className?: string;
+    style?: React.CSSProperties;
+    use?: DesignerToolsType[];
+};
+export declare const DesignerToolsWidget: React.FC<IDesignerToolsWidgetProps>;
+export {};

package/lib/widgets/DesignerToolsWidget/index.js

@@ -0,0 +1,148 @@
+"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.DesignerToolsWidget = void 0;
+const react_1 = __importStar(require("react"));
+const antd_1 = require("antd");
+const reactive_react_1 = require("@formily/reactive-react");
+const core_1 = require("@formily-design/core");
+const hooks_1 = require("../../hooks");
+const IconWidget_1 = require("../IconWidget");
+const classnames_1 = __importDefault(require("classnames"));
+require("./styles.less");
+exports.DesignerToolsWidget = (0, reactive_react_1.observer)((props) => {
+    const screen = (0, hooks_1.useScreen)();
+    const cursor = (0, hooks_1.useCursor)();
+    const workbench = (0, hooks_1.useWorkbench)();
+    const history = (0, hooks_1.useHistory)();
+    const sizeRef = (0, react_1.useRef)({});
+    const prefix = (0, hooks_1.usePrefix)('designer-tools');
+    const renderHistoryController = () => {
+        if (!props.use.includes('HISTORY'))
+            return null;
+        return (react_1.default.createElement(antd_1.Button.Group, { size: "small", style: { marginRight: 20 } },
+            react_1.default.createElement(antd_1.Button, { size: "small", disabled: !(history === null || history === void 0 ? void 0 : history.allowUndo), onClick: () => {
+                    history.undo();
+                } },
+                react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Undo" })),
+            react_1.default.createElement(antd_1.Button, { size: "small", disabled: !(history === null || history === void 0 ? void 0 : history.allowRedo), onClick: () => {
+                    history.redo();
+                } },
+                react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Redo" }))));
+    };
+    const renderCursorController = () => {
+        if (workbench.type !== 'DESIGNABLE')
+            return null;
+        if (!props.use.includes('CURSOR'))
+            return null;
+        return (react_1.default.createElement(antd_1.Button.Group, { size: "small", style: { marginRight: 20 } },
+            react_1.default.createElement(antd_1.Button, { size: "small", disabled: cursor.type === core_1.CursorType.Normal, onClick: () => {
+                    cursor.setType(core_1.CursorType.Normal);
+                } },
+                react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Move" })),
+            react_1.default.createElement(antd_1.Button, { size: "small", disabled: cursor.type === core_1.CursorType.Selection, onClick: () => {
+                    cursor.setType(core_1.CursorType.Selection);
+                } },
+                react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Selection" }))));
+    };
+    const renderResponsiveController = () => {
+        if (!props.use.includes('SCREEN_TYPE'))
+            return null;
+        if (screen.type !== core_1.ScreenType.Responsive)
+            return null;
+        return (react_1.default.createElement(react_1.Fragment, null,
+            react_1.default.createElement(antd_1.InputNumber, { size: "small", value: screen.width, style: { width: 70, textAlign: 'center' }, onChange: (value) => {
+                    sizeRef.current.width = value;
+                }, onPressEnter: () => {
+                    screen.setSize(sizeRef.current.width, screen.height);
+                } }),
+            react_1.default.createElement(IconWidget_1.IconWidget, { size: 10, infer: "Close", style: { padding: '0 3px', color: '#999' } }),
+            react_1.default.createElement(antd_1.InputNumber, { value: screen.height, size: "small", style: {
+                    width: 70,
+                    textAlign: 'center',
+                    marginRight: 10,
+                }, onChange: (value) => {
+                    sizeRef.current.height = value;
+                }, onPressEnter: () => {
+                    screen.setSize(screen.width, sizeRef.current.height);
+                } }),
+            (screen.width !== '100%' || screen.height !== '100%') && (react_1.default.createElement(antd_1.Button, { size: "small", style: { marginRight: 20 }, onClick: () => {
+                    screen.resetSize();
+                } },
+                react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Recover" })))));
+    };
+    const renderScreenTypeController = () => {
+        if (!props.use.includes('SCREEN_TYPE'))
+            return null;
+        return (react_1.default.createElement(antd_1.Button.Group, { size: "small", style: { marginRight: 20 } },
+            react_1.default.createElement(antd_1.Button, { size: "small", disabled: screen.type === core_1.ScreenType.PC, onClick: () => {
+                    screen.setType(core_1.ScreenType.PC);
+                } },
+                react_1.default.createElement(IconWidget_1.IconWidget, { infer: "PC" })),
+            react_1.default.createElement(antd_1.Button, { size: "small", disabled: screen.type === core_1.ScreenType.Mobile, onClick: () => {
+                    screen.setType(core_1.ScreenType.Mobile);
+                } },
+                react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Mobile" })),
+            react_1.default.createElement(antd_1.Button, { size: "small", disabled: screen.type === core_1.ScreenType.Responsive, onClick: () => {
+                    screen.setType(core_1.ScreenType.Responsive);
+                } },
+                react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Responsive" }))));
+    };
+    const renderMobileController = () => {
+        if (!props.use.includes('SCREEN_TYPE'))
+            return null;
+        if (screen.type !== core_1.ScreenType.Mobile)
+            return;
+        return (react_1.default.createElement(antd_1.Button, { size: "small", style: { marginRight: 20 }, onClick: () => {
+                screen.setFlip(!screen.flip);
+            } },
+            react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Flip", style: {
+                    transition: 'all .15s ease-in',
+                    transform: screen.flip ? 'rotate(-90deg)' : '',
+                } })));
+    };
+    return (react_1.default.createElement("div", { style: props.style, className: (0, classnames_1.default)(prefix, props.className) },
+        renderHistoryController(),
+        renderCursorController(),
+        renderScreenTypeController(),
+        renderMobileController(),
+        renderResponsiveController()));
+});
+exports.DesignerToolsWidget.defaultProps = {
+    use: ['HISTORY', 'CURSOR', 'SCREEN_TYPE'],
+};

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 '@formily-design/core';
+import { INodeActionsWidgetActionProps } from '../NodeActionsWidget';
+import './styles.less';
+export interface IDroppableWidgetProps {
+    children?: React.ReactNode;
+    node?: TreeNode;
+    actions?: INodeActionsWidgetActionProps[];
+    placeholder?: boolean;
+    height?: number;
+    style?: React.CSSProperties;
+    className?: string;
+    hasChildren?: boolean;
+}
+export declare const DroppableWidget: React.FC<IDroppableWidgetProps>;

package/lib/widgets/DroppableWidget/index.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DroppableWidget = void 0;
+const react_1 = __importDefault(require("react"));
+const reactive_react_1 = require("@formily/reactive-react");
+const hooks_1 = require("../../hooks");
+const NodeTitleWidget_1 = require("../NodeTitleWidget");
+const NodeActionsWidget_1 = require("../NodeActionsWidget");
+require("./styles.less");
+exports.DroppableWidget = (0, reactive_react_1.observer)(({ node, actions, height, placeholder, style, className, hasChildren: hasChildrenProp, ...props }) => {
+    var _a;
+    const currentNode = (0, hooks_1.useTreeNode)();
+    const nodeId = (0, hooks_1.useNodeIdProps)(node);
+    const target = node !== null && node !== void 0 ? node : currentNode;
+    const hasChildren = hasChildrenProp !== null && hasChildrenProp !== void 0 ? hasChildrenProp : ((_a = target.children) === null || _a === void 0 ? void 0 : _a.length) > 0;
+    return (react_1.default.createElement("div", { ...nodeId, ...props, className: className, style: style },
+        hasChildren ? (props.children) : placeholder ? (react_1.default.createElement("div", { style: { height }, 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((action, key) => (react_1.default.createElement(NodeActionsWidget_1.NodeActionsWidget.Action, { ...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,7 @@
+import React from 'react';
+import './styles.less';
+export interface IEmptyWidgetProps {
+    children?: React.ReactNode;
+    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;
+const react_1 = __importDefault(require("react"));
+const hooks_1 = require("../../hooks");
+const reactive_react_1 = require("@formily/reactive-react");
+const IconWidget_1 = require("../IconWidget");
+require("./styles.less");
+exports.EmptyWidget = (0, reactive_react_1.observer)((props) => {
+    var _a;
+    const tree = (0, hooks_1.useTree)();
+    const prefix = (0, hooks_1.usePrefix)('empty');
+    const renderEmpty = () => {
+        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,69 @@
+"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.GhostWidget = void 0;
+const react_1 = __importStar(require("react"));
+const hooks_1 = require("../../hooks");
+const core_1 = require("@formily-design/core");
+const reactive_1 = require("@formily/reactive");
+const reactive_react_1 = require("@formily/reactive-react");
+const NodeTitleWidget_1 = require("../NodeTitleWidget");
+require("./styles.less");
+exports.GhostWidget = (0, reactive_react_1.observer)(() => {
+    const designer = (0, hooks_1.useDesigner)();
+    const cursor = (0, hooks_1.useCursor)();
+    const ref = (0, react_1.useRef)();
+    const prefix = (0, hooks_1.usePrefix)('ghost');
+    const movingNodes = designer.findMovingNodes();
+    const firstNode = movingNodes[0];
+    (0, react_1.useEffect)(() => (0, reactive_1.autorun)(() => {
+        var _a, _b;
+        const transform = `perspective(1px) translate3d(${((_a = cursor.position) === null || _a === void 0 ? void 0 : _a.topClientX) - 18}px,${((_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]);
+    const renderNodes = () => {
+        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;
+const react_1 = __importDefault(require("react"));
+const dateformat_1 = __importDefault(require("dateformat"));
+const reactive_react_1 = require("@formily/reactive-react");
+const hooks_1 = require("../../hooks");
+const TextWidget_1 = require("../TextWidget");
+const classnames_1 = __importDefault(require("classnames"));
+require("./styles.less");
+exports.HistoryWidget = (0, reactive_react_1.observer)(() => {
+    const workbench = (0, hooks_1.useWorkbench)();
+    const currentWorkspace = (workbench === null || workbench === void 0 ? void 0 : workbench.activeWorkspace) || (workbench === null || workbench === void 0 ? void 0 : workbench.currentWorkspace);
+    const prefix = (0, hooks_1.usePrefix)('history');
+    if (!currentWorkspace)
+        return null;
+    return (react_1.default.createElement("div", { className: prefix }, currentWorkspace.history.list().map((item, index) => {
+        const type = item.type || 'default_state';
+        const 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: () => {
+                currentWorkspace.history.goTo(index);
+            } },
+            react_1.default.createElement("span", { className: prefix + '-item-title' },
+                react_1.default.createElement(TextWidget_1.TextWidget, { token: `operations.${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,23 @@
+import React from 'react';
+import { TooltipProps } from 'antd';
+import './styles.less';
+export interface IconProviderProps {
+    children?: React.ReactNode;
+    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>;
+};