jjb-lc-designable/react/widgets/GhostWidget/index.js

基于alibaba-designable源码二次封装的表单设计器。

import React, { useRef, useEffect } from 'react';
import { useCursor, usePrefix, useDesigner } from '../../hooks';
import { CursorStatus } from 'jjb-lc-designable/core';
import { autorun } from 'jjb-lc-formily/reactive';
import { observer } from 'jjb-lc-formily/reactive-react';
import { NodeTitleWidget } from '../NodeTitleWidget';
import './styles.less';
export const GhostWidget = observer(() => {
  const designer = useDesigner();
  const cursor = useCursor();
  const ref = useRef();
  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 /*#__PURE__*/React.createElement("span", {
      style: {
        whiteSpace: 'nowrap'
      }
    }, /*#__PURE__*/React.createElement(NodeTitleWidget, {
      node: firstNode
    }), movingNodes.length > 1 ? '...' : '');
  };
  if (!firstNode) return null;
  return cursor.status === CursorStatus.Dragging ? /*#__PURE__*/React.createElement("div", {
    ref: ref,
    className: prefix
  }, renderNodes()) : null;
});
GhostWidget.displayName = 'GhostWidget';