jjb-lc-designable
Version:
基于alibaba-designable源码二次封装的表单设计器。
62 lines • 2.31 kB
JavaScript
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, { useRef, useLayoutEffect } from 'react';
import cls from 'classnames';
import { useTree, usePrefix, useOutline, useWorkbench } from '../../hooks';
import { observer } from 'jjb-lc-formily/reactive-react';
import { OutlineTreeNode } from './OutlineNode';
import { Insertion } from './Insertion';
import { NodeContext } from './context';
import { globalThisPolyfill } from 'jjb-lc-designable/shared';
export const OutlineTreeWidget = observer(({
onClose,
style,
renderActions,
renderTitle,
className,
...props
}) => {
const ref = useRef();
const prefix = usePrefix('outline-tree');
const workbench = useWorkbench();
const current = workbench?.activeWorkspace || workbench?.currentWorkspace;
const workspaceId = current?.id;
const tree = useTree(workspaceId);
const outline = useOutline(workspaceId);
const outlineRef = useRef();
useLayoutEffect(() => {
if (!workspaceId) return;
if (outlineRef.current && outlineRef.current !== outline) {
outlineRef.current.onUnmount();
}
if (ref.current && outline) {
outline.onMount(ref.current, globalThisPolyfill);
}
outlineRef.current = outline;
return () => {
outline.onUnmount();
};
}, [workspaceId, outline]);
if (!outline || !workspaceId) return null;
return /*#__PURE__*/React.createElement(NodeContext.Provider, {
value: {
renderActions,
renderTitle
}
}, /*#__PURE__*/React.createElement("div", _extends({}, props, {
className: cls(prefix + '-container', className),
style: style
}), /*#__PURE__*/React.createElement("div", {
className: prefix + '-content',
ref: ref
}, /*#__PURE__*/React.createElement(OutlineTreeNode, {
node: tree,
workspaceId: workspaceId
}), /*#__PURE__*/React.createElement("div", {
className: prefix + '-aux',
style: {
pointerEvents: 'none'
}
}, /*#__PURE__*/React.createElement(Insertion, {
workspaceId: workspaceId
})))));
});