@formily-design/react 1.0.0 → 1.0.1

package/rollup.config.js

@@ -1,3 +0,0 @@
-import baseConfig from '../../scripts/rollup.base.js'
-
-export default baseConfig('designable.react', 'Designable.React')

package/src/containers/Designer.tsx

@@ -1,50 +0,0 @@
-import React, { useEffect, useRef } from 'react'
-import { Engine, GlobalRegistry } from '@formily-design/core'
-import { DesignerEngineContext } from '../context'
-import { IDesignerProps } from '../types'
-import { GhostWidget } from '../widgets'
-import { useDesigner } from '../hooks'
-import { Layout } from './Layout'
-import * as icons from '../icons'
-
-GlobalRegistry.registerDesignerIcons(icons)
-
-export const Designer: React.FC<IDesignerProps> = (props) => {
-  const engine = useDesigner()
-  const ref = useRef<Engine>()
-  useEffect(() => {
-    if (props.engine) {
-      if (props.engine && ref.current) {
-        if (props.engine !== ref.current) {
-          ref.current.unmount()
-        }
-      }
-      props.engine.mount()
-      ref.current = props.engine
-    }
-    return () => {
-      if (props.engine) {
-        props.engine.unmount()
-      }
-    }
-  }, [props.engine])
-
-  if (engine)
-    throw new Error(
-      'There can only be one Designable Engine Context in the React Tree'
-    )
-
-  return (
-    <Layout {...props}>
-      <DesignerEngineContext.Provider value={props.engine}>
-        {props.children}
-        <GhostWidget />
-      </DesignerEngineContext.Provider>
-    </Layout>
-  )
-}
-
-Designer.defaultProps = {
-  prefixCls: 'dn-',
-  theme: 'light',
-}

package/src/containers/Layout.tsx

@@ -1,50 +0,0 @@
-import React, { useContext, Fragment, useRef, useLayoutEffect } from 'react'
-import { each } from '@formily-design/shared'
-import { DesignerLayoutContext } from '../context'
-import { IDesignerLayoutProps } from '../types'
-import cls from 'classnames'
-
-export const Layout: React.FC<IDesignerLayoutProps> = (props) => {
-  const layout = useContext(DesignerLayoutContext)
-  const ref = useRef<HTMLDivElement>()
-  useLayoutEffect(() => {
-    if (ref.current) {
-      each(props.variables, (value, key) => {
-        ref.current.style.setProperty(`--${key}`, value)
-      })
-    }
-  }, [])
-
-  if (layout) {
-    return <Fragment>{props.children}</Fragment>
-  }
-  return (
-    <div
-      ref={ref}
-      className={cls(
-        {
-          [`${props.prefixCls}app`]: true,
-          [`${props.prefixCls}${props.theme}`]: props.theme,
-        },
-        props.className
-      )}
-      style={props.style}
-    >
-      <DesignerLayoutContext.Provider
-        value={{
-          theme: props.theme,
-          prefixCls: props.prefixCls,
-          position: props.position,
-        }}
-      >
-        {props.children}
-      </DesignerLayoutContext.Provider>
-    </div>
-  )
-}
-
-Layout.defaultProps = {
-  theme: 'light',
-  prefixCls: 'dn-',
-  position: 'fixed',
-}

package/src/containers/Simulator.tsx

@@ -1,30 +0,0 @@
-import React from 'react'
-import { ScreenType } from '@formily-design/core'
-import { requestIdle } from '@formily-design/shared'
-import { observer } from '@formily/reactive-react'
-import { useScreen } from '../hooks'
-import {
-  MobileSimulator,
-  PCSimulator,
-  ResponsiveSimulator,
-} from '../simulators'
-
-export type ISimulatorProps = React.HTMLAttributes<HTMLDivElement>
-
-export const Simulator: React.FC<ISimulatorProps> = observer(
-  (props: ISimulatorProps) => {
-    const screen = useScreen()
-    if (screen.type === ScreenType.PC)
-      return <PCSimulator {...props}>{props.children}</PCSimulator>
-    if (screen.type === ScreenType.Mobile)
-      return <MobileSimulator {...props}>{props.children}</MobileSimulator>
-    if (screen.type === ScreenType.Responsive)
-      return (
-        <ResponsiveSimulator {...props}>{props.children}</ResponsiveSimulator>
-      )
-    return <PCSimulator {...props}>{props.children}</PCSimulator>
-  },
-  {
-    scheduler: requestIdle,
-  }
-)

package/src/containers/Viewport.tsx

@@ -1,69 +0,0 @@
-import React, { useLayoutEffect, useRef, useState } from 'react'
-import { usePrefix, useViewport } from '../hooks'
-import { AuxToolWidget, EmptyWidget } from '../widgets'
-import { Viewport as ViewportType } from '@formily-design/core'
-import { requestIdle, globalThisPolyfill } from '@formily-design/shared'
-import cls from 'classnames'
-export interface IViewportProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'placeholder'> {
-  placeholder?: React.ReactNode
-  dragTipsDirection?: 'left' | 'right'
-}
-
-export const Viewport: React.FC<IViewportProps> = ({
-  placeholder,
-  dragTipsDirection,
-  ...props
-}) => {
-  const [loaded, setLoaded] = useState(false)
-  const prefix = usePrefix('viewport')
-  const viewport = useViewport()
-  const ref = useRef<HTMLDivElement>()
-  const viewportRef = useRef<ViewportType>()
-  const isFrameRef = useRef(false)
-  useLayoutEffect(() => {
-    const frameElement = ref.current.querySelector('iframe')
-    if (!viewport) return
-    if (viewportRef.current && viewportRef.current !== viewport) {
-      viewportRef.current.onUnmount()
-    }
-    if (frameElement) {
-      frameElement.addEventListener('load', () => {
-        viewport.onMount(frameElement, frameElement.contentWindow)
-        requestIdle(() => {
-          isFrameRef.current = true
-          setLoaded(true)
-        })
-      })
-    } else {
-      viewport.onMount(ref.current, globalThisPolyfill)
-      requestIdle(() => {
-        isFrameRef.current = false
-        setLoaded(true)
-      })
-    }
-    viewportRef.current = viewport
-    return () => {
-      viewport.onUnmount()
-    }
-  }, [viewport])
-
-  return (
-    <div
-      {...props}
-      ref={ref}
-      className={cls(prefix, props.className)}
-      style={{
-        opacity: !loaded ? 0 : 1,
-        overflow: isFrameRef.current ? 'hidden' : 'overlay',
-        ...props.style,
-      }}
-    >
-      {props.children}
-      <AuxToolWidget />
-      <EmptyWidget dragTipsDirection={dragTipsDirection}>
-        {placeholder}
-      </EmptyWidget>
-    </div>
-  )
-}

package/src/containers/Workbench.tsx

@@ -1,15 +0,0 @@
-import React from 'react'
-import { observer } from '@formily/reactive-react'
-import { useWorkbench } from '../hooks'
-import { Workspace } from './Workspace'
-
-export const Workbench: React.FC<{ children?: React.ReactNode }> = observer(
-  (props) => {
-    const workbench = useWorkbench()
-    return (
-      <Workspace id={workbench.currentWorkspace?.id}>
-        {props.children}
-      </Workspace>
-    )
-  }
-)

package/src/containers/Workspace.tsx

@@ -1,41 +0,0 @@
-import React, { useMemo, useRef, Fragment } from 'react'
-import { useDesigner } from '../hooks'
-import { WorkspaceContext } from '../context'
-export interface IWorkspaceProps {
-  children?: React.ReactNode
-  id?: string
-  title?: string
-  description?: string
-}
-
-export const Workspace: React.FC<IWorkspaceProps> = ({
-  id,
-  title,
-  description,
-  ...props
-}) => {
-  const oldId = useRef<string>()
-  const designer = useDesigner()
-  const workspace = useMemo(() => {
-    if (!designer) return
-    if (oldId.current && oldId.current !== id) {
-      const old = designer.workbench.findWorkspaceById(oldId.current)
-      if (old) old.viewport.detachEvents()
-    }
-    const workspace = {
-      id: id || 'index',
-      title,
-      description,
-    }
-    designer.workbench.ensureWorkspace(workspace)
-    oldId.current = workspace.id
-    return workspace
-  }, [id, designer])
-  return (
-    <Fragment>
-      <WorkspaceContext.Provider value={workspace}>
-        {props.children}
-      </WorkspaceContext.Provider>
-    </Fragment>
-  )
-}

package/src/containers/index.ts

@@ -1,7 +0,0 @@
-import './styles.less'
-export * from './Layout'
-export * from './Designer'
-export * from './Workspace'
-export * from './Simulator'
-export * from './Viewport'
-export * from './Workbench'

package/src/containers/styles.less

@@ -1,19 +0,0 @@
-@import '../variables.less';
-
-.@{prefix-cls}-viewport {
-  height: 100%;
-  width: 100%;
-  min-height: 100px;
-  position: relative;
-  outline: none;
-  box-sizing: border-box;
-  user-select: none;
-  overflow: overlay;
-
-  // & > * {
-  //   width: fit-content;
-  //   height: fit-content;
-  //   min-width: 100%;
-  //   min-height: 100%;
-  // }
-}

package/src/context.ts

@@ -1,17 +0,0 @@
-import { createContext } from 'react'
-import { TreeNode, Engine } from '@formily-design/core'
-import {
-  IDesignerLayoutContext,
-  IWorkspaceContext,
-  IDesignerComponents,
-} from './types'
-
-export const DesignerComponentsContext = createContext<IDesignerComponents>({})
-
-export const DesignerLayoutContext = createContext<IDesignerLayoutContext>(null)
-
-export const DesignerEngineContext = createContext<Engine>(null)
-
-export const TreeNodeContext = createContext<TreeNode>(null)
-
-export const WorkspaceContext = createContext<IWorkspaceContext>(null)

package/src/hooks/index.ts

@@ -1,25 +0,0 @@
-export * from './useDesigner'
-export * from './useCursor'
-export * from './useScreen'
-export * from './useTree'
-export * from './useTheme'
-export * from './usePosition'
-export * from './useTreeNode'
-export * from './useHover'
-export * from './useViewport'
-export * from './useOutline'
-export * from './useSelection'
-export * from './useOperation'
-export * from './useWorkbench'
-export * from './useWorkspace'
-export * from './useLayout'
-export * from './useHistory'
-export * from './usePrefix'
-export * from './useRegistry'
-export * from './useValidNodeOffsetRect'
-export * from './useMoveHelper'
-export * from './useNodeIdProps'
-export * from './useTransformHelper'
-export * from './useSelectedNode'
-export * from './useSelected'
-export * from './useComponents'

package/src/hooks/useComponents.ts

@@ -1,3 +0,0 @@
-import { useContext } from 'react'
-import { DesignerComponentsContext } from '../context'
-export const useComponents = () => useContext(DesignerComponentsContext)

package/src/hooks/useCursor.ts

@@ -1,6 +0,0 @@
-import { useDesigner } from './useDesigner'
-
-export const useCursor = () => {
-  const designer = useDesigner()
-  return designer.cursor
-}

package/src/hooks/useDesigner.ts

@@ -1,19 +0,0 @@
-import { useContext, useEffect } from 'react'
-import { Engine } from '@formily-design/core'
-import { DesignerEngineContext } from '../context'
-import { isFn, globalThisPolyfill } from '@formily-design/shared'
-export interface IEffects {
-  (engine: Engine): void
-}
-
-export const useDesigner = (effects?: IEffects): Engine => {
-  const designer: Engine =
-    globalThisPolyfill['__DESIGNABLE_ENGINE__'] ||
-    useContext(DesignerEngineContext)
-  useEffect(() => {
-    if (isFn(effects)) {
-      return effects(designer)
-    }
-  }, [])
-  return designer
-}

package/src/hooks/useHistory.ts

@@ -1,6 +0,0 @@
-import { useWorkspace } from './useWorkspace'
-
-export const useHistory = (workspaceId?: string) => {
-  const workspace = useWorkspace(workspaceId)
-  return workspace?.history
-}

package/src/hooks/useHover.ts

@@ -1,6 +0,0 @@
-import { useOperation } from './useOperation'
-
-export const useHover = (workspaceId?: string) => {
-  const operation = useOperation(workspaceId)
-  return operation?.hover
-}

package/src/hooks/useLayout.ts

@@ -1,11 +0,0 @@
-import { useContext } from 'react'
-import { DesignerLayoutContext } from '../context'
-import { IDesignerLayoutContext } from '../types'
-import { globalThisPolyfill } from '@formily-design/shared'
-
-export const useLayout = (): IDesignerLayoutContext => {
-  return (
-    globalThisPolyfill['__DESIGNABLE_LAYOUT__'] ||
-    useContext(DesignerLayoutContext)
-  )
-}

package/src/hooks/useMoveHelper.ts

@@ -1,6 +0,0 @@
-import { useOperation } from './useOperation'
-
-export const useMoveHelper = (workspaceId?: string) => {
-  const operation = useOperation(workspaceId)
-  return operation?.moveHelper
-}

package/src/hooks/useNodeIdProps.ts

@@ -1,11 +0,0 @@
-import { TreeNode } from '@formily-design/core'
-import { useDesigner } from './useDesigner'
-import { useTreeNode } from './useTreeNode'
-
-export const useNodeIdProps = (node?: TreeNode) => {
-  const target = useTreeNode()
-  const designer = useDesigner()
-  return {
-    [designer.props.nodeIdAttrName]: node ? node.id : target.id,
-  }
-}

package/src/hooks/useOperation.ts

@@ -1,6 +0,0 @@
-import { useWorkspace } from './useWorkspace'
-
-export const useOperation = (workspaceId?: string) => {
-  const workspace = useWorkspace(workspaceId)
-  return workspace?.operation
-}

package/src/hooks/useOutline.ts

@@ -1,6 +0,0 @@
-import { useWorkspace } from './useWorkspace'
-
-export const useOutline = (workspaceId?: string) => {
-  const workspace = useWorkspace(workspaceId)
-  return workspace?.outline
-}

package/src/hooks/usePosition.ts

@@ -1,5 +0,0 @@
-import { useLayout } from './useLayout'
-
-export const usePosition = () => {
-  return useLayout()?.position
-}

package/src/hooks/usePrefix.ts

@@ -1,5 +0,0 @@
-import { useLayout } from './useLayout'
-
-export const usePrefix = (after = '') => {
-  return useLayout()?.prefixCls + after
-}

package/src/hooks/useRegistry.ts

@@ -1,6 +0,0 @@
-import { GlobalRegistry, IDesignerRegistry } from '@formily-design/core'
-import { globalThisPolyfill } from '@formily-design/shared'
-
-export const useRegistry = (): IDesignerRegistry => {
-  return globalThisPolyfill['__DESIGNER_REGISTRY__'] || GlobalRegistry
-}

package/src/hooks/useScreen.ts

@@ -1,5 +0,0 @@
-import { useDesigner } from './useDesigner'
-
-export const useScreen = () => {
-  return useDesigner().screen
-}

package/src/hooks/useSelected.ts

@@ -1,6 +0,0 @@
-import { useSelection } from './useSelection'
-
-export const useSelected = (workspaceId?: string) => {
-  const selection = useSelection(workspaceId)
-  return selection?.selected || []
-}

package/src/hooks/useSelectedNode.ts

@@ -1,14 +0,0 @@
-import { useSelected } from './useSelected'
-import { useTree } from './useTree'
-
-export const useSelectedNode = (workspaceId?: string) => {
-  const selected = useSelected(workspaceId)
-  const tree = useTree(workspaceId)
-  return tree?.findById?.(selected[0])
-}
-
-/**
- * @deprecated
- * please use useSelectedNode
- */
-export const useCurrentNode = useSelectedNode

package/src/hooks/useSelection.ts

@@ -1,6 +0,0 @@
-import { useOperation } from './useOperation'
-
-export const useSelection = (workspaceId?: string) => {
-  const operation = useOperation(workspaceId)
-  return operation?.selection
-}

package/src/hooks/useTheme.ts

@@ -1,5 +0,0 @@
-import { useLayout } from './useLayout'
-
-export const useTheme = () => {
-  return useLayout()?.theme
-}

package/src/hooks/useTransformHelper.ts

@@ -1,6 +0,0 @@
-import { useOperation } from './useOperation'
-
-export const useTransformHelper = (workspaceId?: string) => {
-  const operation = useOperation(workspaceId)
-  return operation?.transformHelper
-}

package/src/hooks/useTree.ts

@@ -1,6 +0,0 @@
-import { useOperation } from './useOperation'
-
-export const useTree = (workspaceId?: string) => {
-  const operation = useOperation(workspaceId)
-  return operation?.tree
-}

package/src/hooks/useTreeNode.ts

@@ -1,6 +0,0 @@
-import { useContext } from 'react'
-import { TreeNodeContext } from '../context'
-
-export const useTreeNode = () => {
-  return useContext(TreeNodeContext)
-}

package/src/hooks/useValidNodeOffsetRect.ts

@@ -1,48 +0,0 @@
-import { useState, useEffect, useMemo, useCallback } from 'react'
-import { TreeNode, CursorStatus, CursorDragType } from '@formily-design/core'
-import { LayoutObserver } from '@formily-design/shared'
-import { useViewport } from './useViewport'
-import { useDesigner } from './useDesigner'
-
-const isEqualRect = (rect1: DOMRect, rect2: DOMRect) => {
-  return (
-    rect1?.x === rect2?.x &&
-    rect1?.y === rect2?.y &&
-    rect1?.width === rect2?.width &&
-    rect1?.height === rect2?.height
-  )
-}
-
-export const useValidNodeOffsetRect = (node: TreeNode) => {
-  const engine = useDesigner()
-  const viewport = useViewport()
-  const [, forceUpdate] = useState(null)
-  const rectRef = useMemo(
-    () => ({ current: viewport.getValidNodeOffsetRect(node) as any }),
-    [viewport]
-  )
-
-  const element = viewport.findElementById(node?.id)
-
-  const compute = useCallback(() => {
-    if (
-      engine.cursor.status !== CursorStatus.Normal &&
-      engine.cursor.dragType === CursorDragType.Move
-    )
-      return
-    const nextRect = viewport.getValidNodeOffsetRect(node) as any
-    if (!isEqualRect(rectRef.current, nextRect) && nextRect) {
-      rectRef.current = nextRect
-      forceUpdate([])
-    }
-  }, [viewport, node])
-
-  useEffect(() => {
-    const layoutObserver = new LayoutObserver(compute)
-    if (element) layoutObserver.observe(element)
-    return () => {
-      layoutObserver.disconnect()
-    }
-  }, [node, viewport, element])
-  return rectRef.current
-}

package/src/hooks/useViewport.ts

@@ -1,6 +0,0 @@
-import { useWorkspace } from './useWorkspace'
-
-export const useViewport = (workspaceId?: string) => {
-  const workspace = useWorkspace(workspaceId)
-  return workspace?.viewport
-}

package/src/hooks/useWorkbench.ts

@@ -1,6 +0,0 @@
-import { useDesigner } from './useDesigner'
-
-export const useWorkbench = () => {
-  const designer = useDesigner()
-  return designer.workbench
-}

package/src/hooks/useWorkspace.ts

@@ -1,16 +0,0 @@
-import { useContext } from 'react'
-import { useDesigner } from './useDesigner'
-import { WorkspaceContext } from '../context'
-import { Workspace } from '@formily-design/core'
-import { globalThisPolyfill } from '@formily-design/shared'
-
-export const useWorkspace = (id?: string): Workspace => {
-  const designer = useDesigner()
-  const workspaceId = id || useContext(WorkspaceContext)?.id
-  if (workspaceId) {
-    return designer.workbench.findWorkspaceById(workspaceId)
-  }
-  if (globalThisPolyfill['__DESIGNABLE_WORKSPACE__'])
-    return globalThisPolyfill['__DESIGNABLE_WORKSPACE__']
-  return designer.workbench.currentWorkspace
-}