@formily-design/react 1.0.0

package/esm/widgets/EmptyWidget/index.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { useTree, usePrefix } from '../../hooks';
+import { observer } from '@formily/reactive-react';
+import { IconWidget } from '../IconWidget';
+import './styles.less';
+export const EmptyWidget = observer((props) => {
+    var _a;
+    const tree = useTree();
+    const prefix = usePrefix('empty');
+    const renderEmpty = () => {
+        return (React.createElement("div", { style: { display: 'flex', flexDirection: 'column' } },
+            React.createElement("div", { className: "animations" },
+                React.createElement(IconWidget, { infer: props.dragTipsDirection === 'left'
+                        ? 'DragLeftSourceAnimation'
+                        : 'DragRightSourceAnimation', size: 240 }),
+                React.createElement(IconWidget, { infer: "BatchDragAnimation", size: 240 })),
+            React.createElement("div", { className: "hotkeys-list" },
+                React.createElement("div", null,
+                    "Selection ",
+                    React.createElement(IconWidget, { infer: "Command" }),
+                    " + Click /",
+                    ' ',
+                    React.createElement(IconWidget, { infer: "Shift" }),
+                    " + Click /",
+                    ' ',
+                    React.createElement(IconWidget, { infer: "Command" }),
+                    " + A"),
+                React.createElement("div", null,
+                    "Copy ",
+                    React.createElement(IconWidget, { infer: "Command" }),
+                    " + C / Paste",
+                    ' ',
+                    React.createElement(IconWidget, { infer: "Command" }),
+                    " + V"),
+                React.createElement("div", null,
+                    "Delete ",
+                    React.createElement(IconWidget, { infer: "Delete" })))));
+    };
+    if (!((_a = tree === null || tree === void 0 ? void 0 : tree.children) === null || _a === void 0 ? void 0 : _a.length)) {
+        return (React.createElement("div", { className: prefix }, props.children ? props.children : renderEmpty()));
+    }
+    return null;
+});
+EmptyWidget.defaultProps = {
+    dragTipsDirection: 'left',
+};

package/esm/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/esm/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/esm/widgets/GhostWidget/index.js

@@ -0,0 +1,33 @@
+import React, { useRef, useEffect } from 'react';
+import { useCursor, usePrefix, useDesigner } from '../../hooks';
+import { CursorStatus } from '@formily-design/core';
+import { autorun } from '@formily/reactive';
+import { observer } from '@formily/reactive-react';
+import { NodeTitleWidget } from '../NodeTitleWidget';
+import './styles.less';
+export const GhostWidget = observer(() => {
+    const designer = useDesigner();
+    const cursor = useCursor();
+    const ref = useRef();
+    const prefix = usePrefix('ghost');
+    const movingNodes = designer.findMovingNodes();
+    const firstNode = movingNodes[0];
+    useEffect(() => 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.createElement("span", { style: {
+                whiteSpace: 'nowrap',
+            } },
+            React.createElement(NodeTitleWidget, { node: firstNode }),
+            movingNodes.length > 1 ? '...' : ''));
+    };
+    if (!firstNode)
+        return null;
+    return cursor.status === CursorStatus.Dragging ? (React.createElement("div", { ref: ref, className: prefix }, renderNodes())) : null;
+});
+GhostWidget.displayName = 'GhostWidget';

package/esm/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/esm/widgets/HistoryWidget/index.d.ts

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

package/esm/widgets/HistoryWidget/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import format from 'dateformat';
+import { observer } from '@formily/reactive-react';
+import { usePrefix, useWorkbench } from '../../hooks';
+import { TextWidget } from '../TextWidget';
+import cls from 'classnames';
+import './styles.less';
+export const HistoryWidget = observer(() => {
+    const workbench = useWorkbench();
+    const currentWorkspace = (workbench === null || workbench === void 0 ? void 0 : workbench.activeWorkspace) || (workbench === null || workbench === void 0 ? void 0 : workbench.currentWorkspace);
+    const prefix = usePrefix('history');
+    if (!currentWorkspace)
+        return null;
+    return (React.createElement("div", { className: prefix }, currentWorkspace.history.list().map((item, index) => {
+        const type = item.type || 'default_state';
+        const token = type.replace(/\:/g, '_');
+        return (React.createElement("div", { className: cls(prefix + '-item', {
+                active: currentWorkspace.history.current === index,
+            }), key: item.timestamp, onClick: () => {
+                currentWorkspace.history.goTo(index);
+            } },
+            React.createElement("span", { className: prefix + '-item-title' },
+                React.createElement(TextWidget, { token: `operations.${token}` })),
+            React.createElement("span", { className: prefix + '-item-timestamp' },
+                ' ',
+                format(item.timestamp, 'yy/mm/dd HH:MM:ss'))));
+    })));
+});

package/esm/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/esm/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>;
+};

package/esm/widgets/IconWidget/index.js

@@ -0,0 +1,102 @@
+import React, { createContext, useContext, useEffect, useRef } from 'react';
+import { isStr, isFn, isObj, isPlainObj } from '@formily-design/shared';
+import { observer } from '@formily/reactive-react';
+import { Tooltip } from 'antd';
+import { usePrefix, useRegistry, useTheme } from '../../hooks';
+import cls from 'classnames';
+import './styles.less';
+const IconContext = createContext(null);
+const isNumSize = (val) => /^[\d.]+$/.test(val);
+export const IconWidget = observer((props) => {
+    var _a, _b, _c;
+    const theme = useTheme();
+    const context = useContext(IconContext);
+    const registry = useRegistry();
+    const prefix = 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 (isStr(infer)) {
+            const finded = registry.getDesignerIcon(infer);
+            if (finded) {
+                return takeIcon(finded);
+            }
+            return React.createElement("img", { src: infer, height: height, width: width });
+        }
+        else if (isFn(infer)) {
+            return React.createElement(infer, {
+                height,
+                width,
+                fill: 'currentColor',
+            });
+        }
+        else if (React.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.cloneElement(infer, svgProps);
+            }
+            else if (infer.type === 'path' || infer.type === 'g') {
+                return (React.createElement("svg", { viewBox: "0 0 1024 1024", height: height, width: width, fill: "currentColor", focusable: "false", "aria-hidden": "true" }, infer));
+            }
+            return infer;
+        }
+        else if (isPlainObj(infer)) {
+            if (infer[theme]) {
+                return takeIcon(infer[theme]);
+            }
+            else if (infer['shadow']) {
+                return (React.createElement(IconWidget.ShadowSVG, { width: width, height: height, content: infer['shadow'] }));
+            }
+            return null;
+        }
+    };
+    const renderTooltips = (children) => {
+        if (!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.isValidElement(tooltip) || isStr(tooltip)
+                ? tooltip
+                : tooltip.title;
+            const props = React.isValidElement(tooltip) || isStr(tooltip)
+                ? {}
+                : isObj(tooltip)
+                    ? tooltip
+                    : {};
+            return (React.createElement(Tooltip, { ...props, title: title }, children));
+        }
+        return children;
+    };
+    if (!props.infer)
+        return null;
+    return renderTooltips(React.createElement("span", { ...props, className: cls(prefix, props.className), style: {
+            ...props.style,
+            cursor: props.onClick ? 'pointer' : (_c = props.style) === null || _c === void 0 ? void 0 : _c.cursor,
+        } }, takeIcon(props.infer)));
+});
+IconWidget.ShadowSVG = (props) => {
+    const ref = useRef();
+    const width = isNumSize(props.width) ? `${props.width}px` : props.width;
+    const height = isNumSize(props.height) ? `${props.height}px` : props.height;
+    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.createElement("div", { ref: ref });
+};
+IconWidget.Provider = (props) => {
+    return (React.createElement(IconContext.Provider, { value: props }, props.children));
+};

package/esm/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/esm/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/esm/widgets/NodeActionsWidget/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Space, Typography, Divider } from 'antd';
+import { observer } from '@formily/reactive-react';
+import { usePrefix, useTreeNode, useSelected } from '../../hooks';
+import { IconWidget } from '../IconWidget';
+import { TextWidget } from '../TextWidget';
+import cls from 'classnames';
+import './styles.less';
+export const NodeActionsWidget = observer((props) => {
+    const node = useTreeNode();
+    const prefix = usePrefix('node-actions');
+    const selected = useSelected();
+    if (selected.indexOf(node.id) === -1 && props.activeShown)
+        return null;
+    return (React.createElement("div", { className: cls(prefix, props.className), style: props.style },
+        React.createElement("div", { className: prefix + '-content' },
+            React.createElement(Space, { split: React.createElement(Divider, { type: "vertical" }) }, props.children))));
+});
+NodeActionsWidget.Action = ({ icon, title, ...props }) => {
+    const prefix = usePrefix('node-actions-item');
+    return (React.createElement(Typography.Link, { ...props, className: cls(props.className, prefix), "data-click-stop-propagation": "true" },
+        React.createElement("span", { className: prefix + '-text' },
+            React.createElement(IconWidget, { infer: icon }),
+            React.createElement(TextWidget, null, title))));
+};

package/esm/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/esm/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/esm/widgets/NodePathWidget/index.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Breadcrumb } from 'antd';
+import { useSelectedNode, useSelection, usePrefix, useHover } from '../../hooks';
+import { IconWidget } from '../IconWidget';
+import { NodeTitleWidget } from '../NodeTitleWidget';
+import { observer } from '@formily/reactive-react';
+import './styles.less';
+export const NodePathWidget = observer((props) => {
+    var _a;
+    const selected = useSelectedNode(props.workspaceId);
+    const selection = useSelection(props.workspaceId);
+    const hover = useHover(props.workspaceId);
+    const prefix = usePrefix('node-path');
+    if (!selected)
+        return React.createElement(React.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.createElement(Breadcrumb, { className: prefix, items: nodes.map((node, key) => {
+            return {
+                title: (React.createElement(React.Fragment, null,
+                    key === 0 && (React.createElement(IconWidget, { infer: "Position", style: { marginRight: 3 } })),
+                    React.createElement("a", { href: "", onMouseEnter: () => {
+                            hover.setHover(node);
+                        }, onClick: (e) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                            selection.select(node);
+                        } },
+                        React.createElement(NodeTitleWidget, { node: node })))),
+            };
+        }) }));
+});

package/esm/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/esm/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/esm/widgets/NodeTitleWidget/index.js

@@ -0,0 +1,13 @@
+import React, { Fragment } from 'react';
+import { observer } from '@formily/reactive-react';
+export const NodeTitleWidget = observer((props) => {
+    const takeNode = () => {
+        const node = props.node;
+        if (node.componentName === '$$ResourceNode$$') {
+            return node.children[0];
+        }
+        return node;
+    };
+    const node = takeNode();
+    return React.createElement(Fragment, null, node.getMessage('title') || node.componentName);
+});

package/esm/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/esm/widgets/OutlineWidget/Insertion.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { useMoveHelper, usePrefix } from '../../hooks';
+import { ClosestPosition } from '@formily-design/core';
+import { observer } from '@formily/reactive-react';
+export const Insertion = observer(({ workspaceId }) => {
+    const moveHelper = useMoveHelper(workspaceId);
+    const prefix = 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 === ClosestPosition.After ||
+            closestDirection === ClosestPosition.InnerAfter ||
+            closestDirection === ClosestPosition.Under ||
+            closestDirection === ClosestPosition.ForbidAfter ||
+            closestDirection === ClosestPosition.ForbidInnerAfter ||
+            closestDirection === 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 === ClosestPosition.Before ||
+            closestDirection === ClosestPosition.InnerBefore ||
+            closestDirection === ClosestPosition.Upper ||
+            closestDirection === ClosestPosition.ForbidBefore ||
+            closestDirection === ClosestPosition.ForbidInnerBefore ||
+            closestDirection === 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.createElement("div", { className: prefix, style: createInsertionStyle() });
+});
+Insertion.displayName = 'Insertion';

package/esm/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>;