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

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

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React from 'react';
import { observer } from 'jjb-lc-formily/reactive-react';
import { useTreeNode, useNodeIdProps } from '../../hooks';
import { NodeTitleWidget } from '../NodeTitleWidget';
import { NodeActionsWidget } from '../NodeActionsWidget';
import './styles.less';
export const DroppableWidget = 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 /*#__PURE__*/React.createElement("div", _extends({}, nodeId, props, {
    className: className,
    style: style
  }), hasChildren ? props.children : placeholder ? /*#__PURE__*/React.createElement("div", {
    style: {
      height
    },
    className: "dn-droppable-placeholder"
  }, /*#__PURE__*/React.createElement(NodeTitleWidget, {
    node: target
  })) : props.children, actions?.length ?
  /*#__PURE__*/
  // @ts-ignore
  React.createElement(NodeActionsWidget, null, actions.map((action, key) => /*#__PURE__*/React.createElement(NodeActionsWidget.Action, _extends({}, action, {
    key: key
  })))) : null);
});
DroppableWidget.defaultProps = {
  placeholder: true
};