@formily-design/react 1.0.0

package/src/widgets/DesignerToolsWidget/index.tsx

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

package/src/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/src/widgets/DroppableWidget/index.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import { TreeNode } from '@formily-design/core'
+import { observer } from '@formily/reactive-react'
+import { useTreeNode, useNodeIdProps } from '../../hooks'
+import { NodeTitleWidget } from '../NodeTitleWidget'
+import {
+  NodeActionsWidget,
+  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 const DroppableWidget: React.FC<IDroppableWidgetProps> = observer(
+  ({
+    node,
+    actions,
+    height,
+    placeholder,
+    style,
+    className,
+    hasChildren: hasChildrenProp,
+    ...props
+  }) => {
+    const currentNode = useTreeNode()
+    const nodeId = useNodeIdProps(node)
+    const target = node ?? currentNode
+    const hasChildren = hasChildrenProp ?? target.children?.length > 0
+    return (
+      <div {...nodeId} {...props} className={className} style={style}>
+        {hasChildren ? (
+          props.children
+        ) : placeholder ? (
+          <div style={{ height }} className="dn-droppable-placeholder">
+            <NodeTitleWidget node={target} />
+          </div>
+        ) : (
+          props.children
+        )}
+        {actions?.length ? (
+          <NodeActionsWidget>
+            {actions.map((action, key) => (
+              <NodeActionsWidget.Action {...action} key={key} />
+            ))}
+          </NodeActionsWidget>
+        ) : null}
+      </div>
+    )
+  }
+)
+
+DroppableWidget.defaultProps = {
+  placeholder: true,
+}

package/src/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/src/widgets/EmptyWidget/index.tsx

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

package/src/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/src/widgets/GhostWidget/index.tsx

@@ -0,0 +1,47 @@
+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<HTMLDivElement>()
+  const prefix = usePrefix('ghost')
+  const movingNodes = designer.findMovingNodes()
+  const firstNode = movingNodes[0]
+  useEffect(
+    () =>
+      autorun(() => {
+        const transform = `perspective(1px) translate3d(${
+          cursor.position?.topClientX - 18
+        }px,${cursor.position?.topClientY - 12}px,0) scale(0.8)`
+        if (!ref.current) return
+        ref.current.style.transform = transform
+      }),
+    [designer, cursor]
+  )
+  const renderNodes = () => {
+    return (
+      <span
+        style={{
+          whiteSpace: 'nowrap',
+        }}
+      >
+        <NodeTitleWidget node={firstNode} />
+        {movingNodes.length > 1 ? '...' : ''}
+      </span>
+    )
+  }
+  if (!firstNode) return null
+  return cursor.status === CursorStatus.Dragging ? (
+    <div ref={ref} className={prefix}>
+      {renderNodes()}
+    </div>
+  ) : null
+})
+
+GhostWidget.displayName = 'GhostWidget'

package/src/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/src/widgets/HistoryWidget/index.tsx

@@ -0,0 +1,42 @@
+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: React.FC = observer(() => {
+  const workbench = useWorkbench()
+  const currentWorkspace =
+    workbench?.activeWorkspace || workbench?.currentWorkspace
+  const prefix = usePrefix('history')
+  if (!currentWorkspace) return null
+  return (
+    <div className={prefix}>
+      {currentWorkspace.history.list().map((item, index) => {
+        const type = item.type || 'default_state'
+        const token = type.replace(/\:/g, '_')
+        return (
+          <div
+            className={cls(prefix + '-item', {
+              active: currentWorkspace.history.current === index,
+            })}
+            key={item.timestamp}
+            onClick={() => {
+              currentWorkspace.history.goTo(index)
+            }}
+          >
+            <span className={prefix + '-item-title'}>
+              <TextWidget token={`operations.${token}`} />
+            </span>
+            <span className={prefix + '-item-timestamp'}>
+              {' '}
+              {format(item.timestamp, 'yy/mm/dd HH:MM:ss')}
+            </span>
+          </div>
+        )
+      })}
+    </div>
+  )
+})

package/src/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/src/widgets/IconWidget/index.tsx

@@ -0,0 +1,152 @@
+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, TooltipProps } from 'antd'
+import { usePrefix, useRegistry, useTheme } from '../../hooks'
+import cls from 'classnames'
+import './styles.less'
+
+const IconContext = createContext<IconProviderProps>(null)
+
+const isNumSize = (val: any) => /^[\d.]+$/.test(val)
+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 const IconWidget: React.FC<IIconWidgetProps> & {
+  Provider?: React.FC<IconProviderProps>
+  ShadowSVG?: React.FC<IShadowSVGProps>
+} = observer((props: React.PropsWithChildren<IIconWidgetProps>) => {
+  const theme = useTheme()
+  const context = useContext(IconContext)
+  const registry = useRegistry()
+  const prefix = usePrefix('icon')
+  const size = props.size || '1em'
+  const height = props.style?.height || size
+  const width = props.style?.width || size
+  const takeIcon = (infer: IIconWidgetProps['infer']) => {
+    if (isStr(infer)) {
+      const finded = registry.getDesignerIcon(infer)
+      if (finded) {
+        return takeIcon(finded)
+      }
+      return <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: any = {
+          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 (
+          <svg
+            viewBox="0 0 1024 1024"
+            height={height}
+            width={width}
+            fill="currentColor"
+            focusable="false"
+            aria-hidden="true"
+          >
+            {infer}
+          </svg>
+        )
+      }
+      return infer
+    } else if (isPlainObj(infer)) {
+      if (infer[theme]) {
+        return takeIcon(infer[theme])
+      } else if (infer['shadow']) {
+        return (
+          <IconWidget.ShadowSVG
+            width={width}
+            height={height}
+            content={infer['shadow']}
+          />
+        )
+      }
+      return null
+    }
+  }
+  const renderTooltips = (children: React.ReactElement): React.ReactElement => {
+    if (!isStr(props.infer) && context?.tooltip) return children as any
+    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 (
+        <Tooltip {...props} title={title}>
+          {children}
+        </Tooltip>
+      )
+    }
+    return children
+  }
+  if (!props.infer) return null
+  return renderTooltips(
+    <span
+      {...props}
+      className={cls(prefix, props.className)}
+      style={{
+        ...props.style,
+        cursor: props.onClick ? 'pointer' : props.style?.cursor,
+      }}
+    >
+      {takeIcon(props.infer)}
+    </span>
+  )
+})
+
+IconWidget.ShadowSVG = (props) => {
+  const ref = useRef<HTMLDivElement>()
+  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 <div ref={ref}></div>
+}
+
+IconWidget.Provider = (props) => {
+  return (
+    <IconContext.Provider value={props}>{props.children}</IconContext.Provider>
+  )
+}