@formily-design/react 1.0.0 → 1.0.2

package/src/widgets/IconWidget/styles.less

@@ -1,17 +0,0 @@
-@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/src/widgets/NodeActionsWidget/index.tsx

@@ -1,56 +0,0 @@
-import React from 'react'
-import { Space, Typography, Divider, TypographyProps } 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 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 const NodeActionsWidget: React.FC<INodeActionsWidgetProps> & {
-  Action?: React.FC<INodeActionsWidgetActionProps>
-} = observer((props) => {
-  const node = useTreeNode()
-  const prefix = usePrefix('node-actions')
-  const selected = useSelected()
-  if (selected.indexOf(node.id) === -1 && props.activeShown) return null
-  return (
-    <div className={cls(prefix, props.className)} style={props.style}>
-      <div className={prefix + '-content'}>
-        <Space split={<Divider type="vertical" />}>{props.children}</Space>
-      </div>
-    </div>
-  )
-})
-
-NodeActionsWidget.Action = ({ icon, title, ...props }) => {
-  const prefix = usePrefix('node-actions-item')
-  return (
-    <Typography.Link
-      {...props}
-      className={cls(props.className, prefix)}
-      data-click-stop-propagation="true"
-    >
-      <span className={prefix + '-text'}>
-        <IconWidget infer={icon} />
-        <TextWidget>{title}</TextWidget>
-      </span>
-    </Typography.Link>
-  )
-}

package/src/widgets/NodeActionsWidget/styles.less

@@ -1,51 +0,0 @@
-.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/src/widgets/NodePathWidget/index.tsx

@@ -1,57 +0,0 @@
-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 interface INodePathWidgetProps {
-  workspaceId?: string
-  maxItems?: number
-}
-
-export const NodePathWidget: React.FC<INodePathWidgetProps> = observer(
-  (props) => {
-    const selected = useSelectedNode(props.workspaceId)
-    const selection = useSelection(props.workspaceId)
-    const hover = useHover(props.workspaceId)
-    const prefix = usePrefix('node-path')
-    if (!selected) return <React.Fragment />
-    const maxItems = props.maxItems ?? 3
-    const nodes = selected
-      .getParents()
-      .slice(0, maxItems - 1)
-      .reverse()
-      .concat(selected)
-    return (
-      <Breadcrumb
-        className={prefix}
-        items={nodes.map((node, key) => {
-          return {
-            title: (
-              <>
-                {key === 0 && (
-                  <IconWidget infer="Position" style={{ marginRight: 3 }} />
-                )}
-                <a
-                  href=""
-                  onMouseEnter={() => {
-                    hover.setHover(node)
-                  }}
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    e.preventDefault()
-                    selection.select(node)
-                  }}
-                >
-                  <NodeTitleWidget node={node} />
-                </a>
-              </>
-            ),
-          }
-        })}
-      />
-    )
-  }
-)

package/src/widgets/NodePathWidget/styles.less

@@ -1,16 +0,0 @@
-.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/src/widgets/NodeTitleWidget/index.tsx

@@ -1,20 +0,0 @@
-import React, { Fragment } from 'react'
-import { observer } from '@formily/reactive-react'
-import { TreeNode } from '@formily-design/core'
-export interface INodeTitleWidgetProps {
-  node: TreeNode
-}
-
-export const NodeTitleWidget: React.FC<INodeTitleWidgetProps> = observer(
-  (props) => {
-    const takeNode = () => {
-      const node = props.node
-      if (node.componentName === '$$ResourceNode$$') {
-        return node.children[0]
-      }
-      return node
-    }
-    const node = takeNode()
-    return <Fragment>{node.getMessage('title') || node.componentName}</Fragment>
-  }
-)

package/src/widgets/OutlineWidget/Insertion.tsx

@@ -1,63 +0,0 @@
-import React from 'react'
-import { useMoveHelper, usePrefix } from '../../hooks'
-import { ClosestPosition } from '@formily-design/core'
-import { observer } from '@formily/reactive-react'
-
-export interface IInsertionProps {
-  workspaceId?: string
-}
-
-export const Insertion: React.FC<IInsertionProps> = observer(
-  ({ workspaceId }) => {
-    const moveHelper = useMoveHelper(workspaceId)
-    const prefix = usePrefix('outline-tree-insertion')
-    const createInsertionStyle = (): React.CSSProperties => {
-      const closestDirection = moveHelper.outlineClosestDirection
-      const closestRect = moveHelper.outlineClosestOffsetRect
-      const baseStyle: React.CSSProperties = {
-        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?.closestNode) return null
-
-    return <div className={prefix} style={createInsertionStyle()}></div>
-  }
-)
-
-Insertion.displayName = 'Insertion'

package/src/widgets/OutlineWidget/OutlineNode.tsx

@@ -1,198 +0,0 @@
-import React, { useRef, useContext, useEffect } from 'react'
-import {
-  TreeNode,
-  ClosestPosition,
-  CursorStatus,
-  DragMoveEvent,
-} from '@formily-design/core'
-import { isFn } from '@formily-design/shared'
-import { autorun } from '@formily/reactive'
-import { observer } from '@formily/reactive-react'
-import {
-  usePrefix,
-  useCursor,
-  useSelection,
-  useMoveHelper,
-  useDesigner,
-} from '../../hooks'
-import { IconWidget } from '../IconWidget'
-import { NodeTitleWidget } from '../NodeTitleWidget'
-import { NodeContext } from './context'
-import cls from 'classnames'
-import './styles.less'
-export interface IOutlineTreeNodeProps {
-  node: TreeNode
-  style?: React.CSSProperties
-  className?: string
-  workspaceId?: string
-}
-
-export const OutlineTreeNode: React.FC<IOutlineTreeNodeProps> = observer(
-  ({ node, className, style, workspaceId }) => {
-    const prefix = usePrefix('outline-tree-node')
-    const engine = useDesigner()
-    const ref = useRef<HTMLDivElement>()
-    const ctx = useContext(NodeContext)
-    const request = useRef(null)
-    const cursor = useCursor()
-    const selection = useSelection(workspaceId)
-    const moveHelper = useMoveHelper(workspaceId)
-
-    useEffect(() => {
-      return engine.subscribeTo(DragMoveEvent, () => {
-        const closestNodeId = moveHelper?.closestNode?.id
-        const closestDirection = moveHelper?.outlineClosestDirection
-        const id = node.id
-        if (!ref.current) return
-        if (
-          closestNodeId === id &&
-          closestDirection === 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])
-
-    useEffect(() => {
-      return autorun(() => {
-        const selectedIds = 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 === CursorStatus.Dragging &&
-          moveHelper?.dragNodes?.length
-        ) {
-          if (ref.current.classList.contains('selected')) {
-            ref.current.classList.remove('selected')
-          }
-        }
-      })
-    }, [node, selection, moveHelper])
-
-    if (!node) return null
-
-    const renderIcon = (node: TreeNode) => {
-      const icon = node.designerProps.icon
-      if (icon) {
-        return <IconWidget infer={icon} size={12} />
-      }
-      if (node === node?.root) {
-        return <IconWidget infer="Page" size={12} />
-      } else if (node.designerProps?.droppable) {
-        return <IconWidget infer="Container" size={12} />
-      }
-      return <IconWidget infer="Component" size={12} />
-    }
-
-    const renderTitle = (node: TreeNode) => {
-      if (isFn(ctx.renderTitle)) return ctx.renderTitle(node)
-      return (
-        <span>
-          <NodeTitleWidget node={node} />
-        </span>
-      )
-    }
-
-    const renderActions = (node: TreeNode) => {
-      if (isFn(ctx.renderActions)) return ctx.renderActions(node)
-    }
-
-    return (
-      <div
-        style={style}
-        ref={ref}
-        className={cls(prefix, className, 'expanded')}
-        data-designer-outline-node-id={node.id}
-      >
-        <div className={prefix + '-header'}>
-          <div
-            className={prefix + '-header-head'}
-            style={{
-              left: -node.depth * 16,
-              width: node.depth * 16,
-            }}
-          ></div>
-          <div className={prefix + '-header-content'}>
-            <div className={prefix + '-header-base'}>
-              {(node?.children?.length > 0 || node === node.root) && (
-                <div
-                  className={prefix + '-expand'}
-                  onClick={(e) => {
-                    e.preventDefault()
-                    e.stopPropagation()
-                    if (ref.current?.classList?.contains('expanded')) {
-                      ref.current?.classList.remove('expanded')
-                    } else {
-                      ref.current?.classList.add('expanded')
-                    }
-                  }}
-                >
-                  <IconWidget infer="Expand" size={10} />
-                </div>
-              )}
-              <div className={prefix + '-icon'}>{renderIcon(node)}</div>
-              <div className={prefix + '-title'}>{renderTitle(node)}</div>
-            </div>
-            <div
-              className={prefix + '-header-actions'}
-              data-click-stop-propagation
-            >
-              {renderActions(node)}
-              {node !== node.root && (
-                <IconWidget
-                  className={cls(prefix + '-hidden-icon', {
-                    hidden: node.hidden,
-                  })}
-                  infer={node.hidden ? 'EyeClose' : 'Eye'}
-                  size={14}
-                  onClick={() => {
-                    node.hidden = !node.hidden
-                  }}
-                />
-              )}
-            </div>
-          </div>
-        </div>
-        <div className={prefix + '-children'}>
-          {node.children?.map((child) => {
-            return (
-              <OutlineTreeNode
-                node={child}
-                key={child.id}
-                workspaceId={workspaceId}
-              />
-            )
-          })}
-        </div>
-      </div>
-    )
-  }
-)

package/src/widgets/OutlineWidget/context.ts

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

package/src/widgets/OutlineWidget/index.tsx

@@ -1,66 +0,0 @@
-import React, { useRef, useLayoutEffect } from 'react'
-import cls from 'classnames'
-import { useTree, usePrefix, useOutline, useWorkbench } from '../../hooks'
-import { observer } from '@formily/reactive-react'
-import { OutlineTreeNode } from './OutlineNode'
-import { Insertion } from './Insertion'
-import { TreeNode, Viewport } from '@formily-design/core'
-import { NodeContext } from './context'
-import { globalThisPolyfill } from '@formily-design/shared'
-
-export interface IOutlineTreeWidgetProps {
-  className?: string
-  style?: React.CSSProperties
-  onClose?: () => void
-  renderTitle?: (node: TreeNode) => React.ReactNode
-  renderActions?: (node: TreeNode) => React.ReactNode
-}
-
-export const OutlineTreeWidget: React.FC<IOutlineTreeWidgetProps> = observer(
-  ({ onClose, style, renderActions, renderTitle, className, ...props }) => {
-    const ref = useRef<HTMLDivElement>()
-    const prefix = usePrefix('outline-tree')
-    const workbench = useWorkbench()
-    const current = workbench?.activeWorkspace || workbench?.currentWorkspace
-    const workspaceId = current?.id
-    const tree = useTree(workspaceId)
-    const outline = useOutline(workspaceId)
-    const outlineRef = useRef<Viewport>()
-    useLayoutEffect(() => {
-      if (!workspaceId) return
-      if (outlineRef.current && outlineRef.current !== outline) {
-        outlineRef.current.onUnmount()
-      }
-      if (ref.current && outline) {
-        outline.onMount(ref.current, globalThisPolyfill)
-      }
-      outlineRef.current = outline
-      return () => {
-        outline.onUnmount()
-      }
-    }, [workspaceId, outline])
-
-    if (!outline || !workspaceId) return null
-    return (
-      <NodeContext.Provider value={{ renderActions, renderTitle }}>
-        <div
-          {...props}
-          className={cls(prefix + '-container', className)}
-          style={style}
-        >
-          <div className={prefix + '-content'} ref={ref}>
-            <OutlineTreeNode node={tree} workspaceId={workspaceId} />
-            <div
-              className={prefix + '-aux'}
-              style={{
-                pointerEvents: 'none',
-              }}
-            >
-              <Insertion workspaceId={workspaceId} />
-            </div>
-          </div>
-        </div>
-      </NodeContext.Provider>
-    )
-  }
-)