render()

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>
        )}