in packages/plugin-outline-pane/src/views/tree-title.tsx [119:174]
render() {
const { treeNode, isModal } = this.props;
const { pluginContext } = treeNode;
const { editing, filterWorking, matchSelf, keywords } = this.state;
const isCNode = !treeNode.isRoot();
const { node } = treeNode;
const { componentMeta } = node;
const availableActions = componentMeta ? componentMeta.availableActions.map((availableAction) => availableAction.name) : [];
const isNodeParent = node.isParentalNode;
const isContainer = node.isContainerNode;
let style: any;
if (isCNode) {
const { depth } = treeNode;
const indent = depth * 12;
style = {
paddingLeft: indent + (isModal ? 12 : 0),
marginLeft: -indent,
};
}
const Extra = pluginContext.extraTitle;
const { intlNode, common, config } = pluginContext;
const { Tip, Title } = common.editorCabin;
const couldHide = availableActions.includes('hide');
const couldLock = availableActions.includes('lock');
const couldUnlock = availableActions.includes('unlock');
const shouldShowHideBtn = isCNode && isNodeParent && !isModal && couldHide;
const shouldShowLockBtn = config.get('enableCanvasLock', false) && isContainer && isCNode && isNodeParent && ((couldLock && !node.isLocked) || (couldUnlock && node.isLocked));
const shouldEditBtn = isCNode && isNodeParent;
const shouldDeleteBtn = isCNode && isNodeParent && node?.canPerformAction('remove');
return (
<div
className={classNames('tree-node-title', { editing })}
style={style}
data-id={treeNode.nodeId}
onClick={() => {
if (isModal) {
if (this.state.visible) {
node.document?.modalNodesManager?.setInvisible(node);
} else {
node.document?.modalNodesManager?.setVisible(node);
}
return;
}
if (node.conditionGroup) {
node.setConditionalVisible();
}
}}
>
{isModal && this.state.visible && (
<div onClick={() => {
node.document?.modalNodesManager?.setInvisible(node);
}}
>
<IconRadioActive className="tree-node-modal-radio-active" />
</div>
)}