@formily-design/react 1.0.0 → 1.0.1

package/src/widgets/DesignerToolsWidget/index.tsx

@@ -1,206 +0,0 @@
-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

@@ -1,29 +0,0 @@
-@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

@@ -1,63 +0,0 @@
-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

@@ -1,11 +0,0 @@
-.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

@@ -1,58 +0,0 @@
-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

@@ -1,27 +0,0 @@
-@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

@@ -1,47 +0,0 @@
-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

@@ -1,20 +0,0 @@
-@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

@@ -1,42 +0,0 @@
-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

@@ -1,23 +0,0 @@
-@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

@@ -1,152 +0,0 @@
-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>
-  )
-}