@formily-design/react 1.0.0

package/esm/widgets/AuxToolWidget/styles.less

@@ -0,0 +1,383 @@
+@import '../../variables.less';
+
+@keyframes dn-animate-slide-to-top {
+  from {
+    transform: translateY(-10%);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0);
+    opacity: 0.8;
+  }
+}
+
+.@{prefix-cls}-auxtool {
+  transform: perspective(1px) translate3d(0, 0, 0);
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+
+  z-index: 9998;
+}
+
+.dn-aux-button {
+  button {
+    font-size: 12px !important;
+    display: flex;
+    align-items: center;
+    padding: 0 3px;
+    height: 20px;
+    color: var(--dn-aux-selector-btn-color); //#fff
+    background: var(--dn-aux-selector-btn-bg-color); //#1890ff
+    border-color: var(--dn-aux-selector-btn-border-color); //#1890ff
+
+    &:hover,
+    &:focus {
+      color: var(--dn-aux-selector-btn-hover-color); //#fff
+      background: var(--dn-aux-selector-btn-hover-bg-color); //#40a9ff
+      border-color: var(--dn-aux-selector-btn-hover-border-color); //#40a9ff
+    }
+
+    &:active {
+      color: var(--dn-aux-selector-btn-active-color); //#fff
+      background: var(--dn-aux-selector-btn-active-bg-color); //#096dd9
+      border-color: var(--dn-aux-selector-btn-active-border-color); //#096dd9
+    }
+  }
+}
+
+.@{prefix-cls}-aux-cover-rect {
+  &.dragging {
+    background-color: var(--dn-aux-cover-rect-dragging-color);
+  }
+
+  &.dropping {
+    background-color: var(--dn-aux-cover-rect-dropping-color);
+  }
+}
+
+.@{prefix-cls}-aux-free-selection {
+  background-color: var(--dn-aux-free-selection-background-color);
+  border-color: var(--dn-aux-free-selection-border-color);
+}
+
+.@{prefix-cls}-aux-helpers {
+  position: absolute;
+  pointer-events: all;
+  z-index: 10;
+  user-select: none;
+
+  .dn-aux-button();
+
+  &.bottom-right {
+    top: 100%;
+    right: 0;
+  }
+
+  &.bottom-left {
+    top: 100%;
+    left: 0;
+  }
+
+  &.bottom-center {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &.inner-top-right {
+    top: -2px;
+    right: 2px;
+  }
+
+  &.inner-top-left {
+    top: -2px;
+    left: 2px;
+  }
+
+  &.inner-top-center {
+    top: -2px;
+    right: 2px;
+  }
+
+  &.inner-bottom-right {
+    bottom: -2px;
+    right: 2px;
+  }
+
+  &.inner-bottom-left {
+    bottom: -2px;
+    left: 2px;
+  }
+
+  &.inner-bottom-center {
+    bottom: -2px;
+    right: 2px;
+  }
+
+  &.top-right {
+    bottom: 100%;
+    right: 0;
+  }
+
+  &.top-left {
+    bottom: 100%;
+    left: 0;
+  }
+
+  &.top-center {
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  button {
+    span {
+      transform: scale(0.9);
+      margin-left: 2px;
+
+      &.@{prefix-cls}-icon {
+        transform: scale(1);
+        margin-left: 0;
+      }
+    }
+  }
+
+  &-content {
+    display: flex;
+    flex-wrap: nowrap;
+    white-space: nowrap;
+
+    button {
+      font-size: 12px !important;
+      display: flex;
+      align-items: center;
+      padding: 0 3px;
+      height: 20px;
+    }
+
+    & > * {
+      margin-top: 4px;
+      margin-bottom: 4px;
+      margin-left: 2px;
+
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+  }
+}
+
+.@{prefix-cls}-aux-insertion {
+  background-color: var(--dn-aux-insertion-color);
+}
+
+.@{prefix-cls}-aux-dashed-box {
+  border: 1px dashed var(--dn-aux-dashed-box-color);
+
+  &-title {
+    color: var(--dn-aux-dashed-box-title-color);
+  }
+}
+
+.@{prefix-cls}-aux-selection-box {
+  border: 2px solid var(--dn-aux-selection-box-border-color);
+  position: relative;
+  pointer-events: none;
+
+  &-inner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  &-title {
+    color: var(--dn-aux-selection-box-color);
+  }
+}
+
+.@{prefix-cls}-aux-selector {
+  .dn-aux-button();
+
+  &-menu {
+    margin-top: -4px;
+    animation: dn-animate-slide-to-top 0.2s;
+    opacity: 0.8;
+
+    button {
+      font-size: 12px !important;
+      display: flex;
+      align-items: center;
+      padding: 0 3px;
+      height: 20px;
+      margin-top: 2px;
+    }
+  }
+}
+
+.@{prefix-cls}-aux-drag-handler {
+  cursor: move;
+}
+
+.@{prefix-cls}-aux-node-resize-handler {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  pointer-events: all;
+  border-radius: 10px;
+  background-color: #fff;
+  border: 1px solid var(--dn-brand-color);
+
+  &.left-center {
+    left: 0;
+    top: 50%;
+    transform: translate(calc(-50% - 1px), -50%);
+    cursor: ew-resize;
+  }
+
+  &.right-center {
+    left: 100%;
+    top: 50%;
+    transform: translate(calc(-50% + 1px), -50%);
+    cursor: ew-resize;
+  }
+
+  &.center-top {
+    left: 50%;
+    top: 0;
+    transform: translate(-50%, calc(-50% - 1px));
+    cursor: ns-resize;
+  }
+
+  &.center-bottom {
+    left: 50%;
+    top: 100%;
+    transform: translate(-50%, calc(-50% + 1px));
+    cursor: ns-resize;
+  }
+
+  &.left-top {
+    left: 0;
+    top: 0;
+    transform: translate(calc(-50% + 1px), calc(-50% + 1px));
+    cursor: nwse-resize;
+  }
+
+  &.left-bottom {
+    left: 0;
+    top: 100%;
+    transform: translate(-50%, -50%);
+    cursor: nesw-resize;
+  }
+
+  &.right-bottom {
+    left: 100%;
+    top: 100%;
+    transform: translate(-50%, -50%);
+    cursor: nwse-resize;
+  }
+
+  &.right-top {
+    left: 100%;
+    top: 0;
+    transform: translate(-50%, -50%);
+    cursor: nesw-resize;
+  }
+}
+
+.@{prefix-cls}-aux-node-translate-handler {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 2px;
+  width: 40px;
+  height: 20px;
+  background: #1890ff;
+  opacity: 0.5;
+  pointer-events: all;
+}
+
+.@{prefix-cls}-aux-space-block-ruler-indicator {
+  position: absolute;
+  background-color: var(--dn-brand-color);
+  color: var(--dn-white);
+  border-radius: 8px;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  span {
+    margin: 0 6px;
+    display: inline-block;
+    font-size: 12px;
+  }
+}
+
+.@{prefix-cls}-aux-space-block-ruler-h {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translate(0, -50%);
+  width: 100%;
+  height: 12px;
+  border-left: 1px solid var(--dn-brand-color);
+  border-right: 1px solid var(--dn-brand-color);
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    transform: translate(0, -50%);
+    width: 100%;
+    height: 1px;
+    background-color: var(--dn-brand-color);
+    z-index: 1;
+  }
+
+  .@{prefix-cls}-aux-space-block-ruler-indicator {
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%) scale(0.7);
+  }
+}
+
+.@{prefix-cls}-aux-space-block-ruler-v {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, 0);
+  height: 100%;
+  width: 12px;
+  border-top: 1px solid var(--dn-brand-color);
+  border-bottom: 1px solid var(--dn-brand-color);
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, 0);
+    height: 100%;
+    width: 1px;
+    background-color: var(--dn-brand-color);
+    z-index: 1;
+  }
+
+  .@{prefix-cls}-aux-space-block-ruler-indicator {
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%) scale(0.7);
+  }
+}

package/esm/widgets/ComponentTreeWidget/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { IDesignerComponents } from '../../types';
+import { TreeNode } from '@formily-design/core';
+import './styles.less';
+export interface IComponentTreeWidgetProps {
+    style?: React.CSSProperties;
+    className?: string;
+    components: IDesignerComponents;
+}
+export interface ITreeNodeWidgetProps {
+    node: TreeNode;
+    children?: React.ReactChild;
+}
+export declare const TreeNodeWidget: React.FC<ITreeNodeWidgetProps>;
+export declare const ComponentTreeWidget: React.FC<IComponentTreeWidgetProps>;

package/esm/widgets/ComponentTreeWidget/index.js

@@ -0,0 +1,73 @@
+import React, { Fragment, useEffect } from 'react';
+import { useTree, usePrefix, useDesigner, useComponents } from '../../hooks';
+import { TreeNodeContext, DesignerComponentsContext } from '../../context';
+import { GlobalRegistry } from '@formily-design/core';
+import { observer } from '@formily/reactive-react';
+import cls from 'classnames';
+import './styles.less';
+export const TreeNodeWidget = observer((props) => {
+    var _a, _b;
+    const designer = useDesigner((_b = (_a = props.node) === null || _a === void 0 ? void 0 : _a.designerProps) === null || _b === void 0 ? void 0 : _b.effects);
+    const components = 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.createElement(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.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.createElement(Fragment, null, renderChildren());
+            }
+        }
+    };
+    if (!node)
+        return null;
+    if (node.hidden)
+        return null;
+    return React.createElement(TreeNodeContext.Provider, { value: node }, renderComponent());
+});
+export const ComponentTreeWidget = observer((props) => {
+    var _a, _b;
+    const tree = useTree();
+    const prefix = usePrefix('component-tree');
+    const designer = 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;
+    }
+    useEffect(() => {
+        GlobalRegistry.registerDesignerBehaviors(props.components);
+    }, []);
+    return (React.createElement("div", { style: { ...props.style, ...(_b = tree === null || tree === void 0 ? void 0 : tree.props) === null || _b === void 0 ? void 0 : _b.style }, className: cls(prefix, props.className), ...dataId },
+        React.createElement(DesignerComponentsContext.Provider, { value: props.components },
+            React.createElement(TreeNodeWidget, { node: tree }))));
+});
+ComponentTreeWidget.displayName = 'ComponentTreeWidget';

package/esm/widgets/ComponentTreeWidget/styles.less

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

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

@@ -0,0 +1,109 @@
+import React, { Fragment, useRef } from 'react';
+import { Button, InputNumber } from 'antd';
+import { observer } from '@formily/reactive-react';
+import { CursorType, ScreenType } from '@formily-design/core';
+import { useCursor, useHistory, useScreen, usePrefix, useWorkbench, } from '../../hooks';
+import { IconWidget } from '../IconWidget';
+import cls from 'classnames';
+import './styles.less';
+export const DesignerToolsWidget = observer((props) => {
+    const screen = useScreen();
+    const cursor = useCursor();
+    const workbench = useWorkbench();
+    const history = useHistory();
+    const sizeRef = useRef({});
+    const prefix = usePrefix('designer-tools');
+    const renderHistoryController = () => {
+        if (!props.use.includes('HISTORY'))
+            return null;
+        return (React.createElement(Button.Group, { size: "small", style: { marginRight: 20 } },
+            React.createElement(Button, { size: "small", disabled: !(history === null || history === void 0 ? void 0 : history.allowUndo), onClick: () => {
+                    history.undo();
+                } },
+                React.createElement(IconWidget, { infer: "Undo" })),
+            React.createElement(Button, { size: "small", disabled: !(history === null || history === void 0 ? void 0 : history.allowRedo), onClick: () => {
+                    history.redo();
+                } },
+                React.createElement(IconWidget, { infer: "Redo" }))));
+    };
+    const renderCursorController = () => {
+        if (workbench.type !== 'DESIGNABLE')
+            return null;
+        if (!props.use.includes('CURSOR'))
+            return null;
+        return (React.createElement(Button.Group, { size: "small", style: { marginRight: 20 } },
+            React.createElement(Button, { size: "small", disabled: cursor.type === CursorType.Normal, onClick: () => {
+                    cursor.setType(CursorType.Normal);
+                } },
+                React.createElement(IconWidget, { infer: "Move" })),
+            React.createElement(Button, { size: "small", disabled: cursor.type === CursorType.Selection, onClick: () => {
+                    cursor.setType(CursorType.Selection);
+                } },
+                React.createElement(IconWidget, { infer: "Selection" }))));
+    };
+    const renderResponsiveController = () => {
+        if (!props.use.includes('SCREEN_TYPE'))
+            return null;
+        if (screen.type !== ScreenType.Responsive)
+            return null;
+        return (React.createElement(Fragment, null,
+            React.createElement(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.createElement(IconWidget, { size: 10, infer: "Close", style: { padding: '0 3px', color: '#999' } }),
+            React.createElement(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.createElement(Button, { size: "small", style: { marginRight: 20 }, onClick: () => {
+                    screen.resetSize();
+                } },
+                React.createElement(IconWidget, { infer: "Recover" })))));
+    };
+    const renderScreenTypeController = () => {
+        if (!props.use.includes('SCREEN_TYPE'))
+            return null;
+        return (React.createElement(Button.Group, { size: "small", style: { marginRight: 20 } },
+            React.createElement(Button, { size: "small", disabled: screen.type === ScreenType.PC, onClick: () => {
+                    screen.setType(ScreenType.PC);
+                } },
+                React.createElement(IconWidget, { infer: "PC" })),
+            React.createElement(Button, { size: "small", disabled: screen.type === ScreenType.Mobile, onClick: () => {
+                    screen.setType(ScreenType.Mobile);
+                } },
+                React.createElement(IconWidget, { infer: "Mobile" })),
+            React.createElement(Button, { size: "small", disabled: screen.type === ScreenType.Responsive, onClick: () => {
+                    screen.setType(ScreenType.Responsive);
+                } },
+                React.createElement(IconWidget, { infer: "Responsive" }))));
+    };
+    const renderMobileController = () => {
+        if (!props.use.includes('SCREEN_TYPE'))
+            return null;
+        if (screen.type !== ScreenType.Mobile)
+            return;
+        return (React.createElement(Button, { size: "small", style: { marginRight: 20 }, onClick: () => {
+                screen.setFlip(!screen.flip);
+            } },
+            React.createElement(IconWidget, { infer: "Flip", style: {
+                    transition: 'all .15s ease-in',
+                    transform: screen.flip ? 'rotate(-90deg)' : '',
+                } })));
+    };
+    return (React.createElement("div", { style: props.style, className: cls(prefix, props.className) },
+        renderHistoryController(),
+        renderCursorController(),
+        renderScreenTypeController(),
+        renderMobileController(),
+        renderResponsiveController()));
+});
+DesignerToolsWidget.defaultProps = {
+    use: ['HISTORY', 'CURSOR', 'SCREEN_TYPE'],
+};

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { observer } from '@formily/reactive-react';
+import { useTreeNode, useNodeIdProps } from '../../hooks';
+import { NodeTitleWidget } from '../NodeTitleWidget';
+import { NodeActionsWidget, } from '../NodeActionsWidget';
+import './styles.less';
+export const DroppableWidget = observer(({ node, actions, height, placeholder, style, className, hasChildren: hasChildrenProp, ...props }) => {
+    var _a;
+    const currentNode = useTreeNode();
+    const nodeId = 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.createElement("div", { ...nodeId, ...props, className: className, style: style },
+        hasChildren ? (props.children) : placeholder ? (React.createElement("div", { style: { height }, className: "dn-droppable-placeholder" },
+            React.createElement(NodeTitleWidget, { node: target }))) : (props.children),
+        (actions === null || actions === void 0 ? void 0 : actions.length) ? (React.createElement(NodeActionsWidget, null, actions.map((action, key) => (React.createElement(NodeActionsWidget.Action, { ...action, key: key }))))) : null));
+});
+DroppableWidget.defaultProps = {
+    placeholder: true,
+};

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