@ant-design/icons#MessageFilled TypeScript Examples

export function AnyBrickEditor({
  nodeUid,
}: EditorComponentProps): React.ReactElement {
  const node = useBuilderNode({ nodeUid });
  const mountPoints = useBuilderNodeMountPoints({ nodeUid });

  let icon: JSX.Element;
  let displayType = DisplayType.DEFAULT;

  if (node.type === "provider" || node.bg) {
    displayType = DisplayType.PROVIDER;
    icon = <DatabaseFilled />;
  } else if (node.type === "template") {
    displayType = DisplayType.TEMPLATE;
    icon = <GoldenFilled />;
  } else if (node.portal) {
    displayType = DisplayType.PORTAL;
    icon = <MessageFilled />;
  }

  return (
    <EditorContainer nodeUid={nodeUid}>
      <div
        className={classNames(
          styles.wrapper,
          styles[displayType],
          mountPoints.length > 0 ? styles.hasChildren : styles.noChildren,
          {
            [styles.isExpandableTemplate]: node.$$isExpandableTemplate,
          }
        )}
      >
        {mountPoints.length > 0 ? (
          mountPoints.map((mountPoint) => (
            <SlotContainer
              key={mountPoint}
              nodeUid={nodeUid}
              slotName={mountPoint}
            />
          ))
        ) : (
          <>
            {icon && <div className={styles.icon}>{icon}</div>}
            <div className={styles.name}>{node.alias}</div>
          </>
        )}
      </div>
    </EditorContainer>
  );
}

export function BuilderCanvasTabs(): React.ReactElement {
  const { t } = useTranslation(NS_NEXT_BUILDER);
  const { canvasIndex, setCanvasIndex } = useBuilderUIContext();
  const { edges } = useBuilderData();
  const groupedRootChildNodes = useBuilderGroupedChildNodes({
    isRoot: true,
    doNotExpandTemplates: true,
  });
  const rootChildNodes = groupedRootChildNodes.flatMap(
    (group) => group.childNodes
  );
  const canvasList = useCanvasList(rootChildNodes);
  const hoverNodeUid = useHoverNodeUid();
  const highlightedNodes = useHighlightNodes();

  const nodeUidToCanvasIndexMap: Map<number, number> = useMemo(() => {
    const map = new Map<number, number>();
    canvasList.forEach((nodes, index) => {
      const walk = (ids: number[]): void => {
        for (const nodeUid of ids) {
          map.set(nodeUid, index);
          walk(
            edges
              .filter((edge) => edge.parent === nodeUid)
              .map((edge) => edge.child)
          );
        }
      };
      walk(nodes.map((node) => node.$$uid));
    });
    return map;
  }, [canvasList, edges]);

  const tabs = useMemo(
    () =>
      // The first canvas should always be the main canvas.
      // And the last canvas should always be an empty portal canvas.
      canvasList.map((nodes, index) => (
        <li
          key={index}
          className={classNames({
            [styles.active]: canvasIndex === index,
            [styles.isPortalCanvas]: index > 0,
            [styles.hover]:
              hoverNodeUid &&
              canvasIndex !== index &&
              nodeUidToCanvasIndexMap.get(hoverNodeUid) === index,
            [styles.highlighted]:
              canvasIndex !== index &&
              Array.from(highlightedNodes).some(
                (uid) => nodeUidToCanvasIndexMap.get(uid) === index
              ),
          })}
          onClick={canvasIndex === index ? null : () => setCanvasIndex(index)}
          title={index === 0 ? null : t(K.CANVAS_TYPE_PORTAL)}
        >
          <span className={styles.tab}>
            {index > 0 && <MessageFilled />}
            {index === 0
              ? t(K.CANVAS_TYPE_MAIN)
              : nodes.length > 0 && (
                  <span className={styles.portalAlias}>{nodes[0].alias}</span>
                )}
          </span>
        </li>
      )),
    [
      canvasIndex,
      canvasList,
      highlightedNodes,
      hoverNodeUid,
      nodeUidToCanvasIndexMap,
      setCanvasIndex,
      t,
    ]
  );

  return (
    <div className={styles.tabsOuterWrapper}>
      <div
        className={classNames(
          styles.tabsInnerWrapper,
          sharedStyles.customScrollbarContainer
        )}
      >
        <ul className={styles.tabs}>{tabs}</ul>
      </div>
    </div>
  );
}

export function StoryboardTreeNode({
  nodeUid,
  mountPoint,
  level,
}: StoryboardTreeNodeProps): React.ReactElement {
  const node = useBuilderNode({ nodeUid });
  const { highlightNodes } = useBuilderUIContext();
  const hoverNodeUid = useHoverNodeUid();
  const mountPoints = useBuilderNodeMountPoints({
    nodeUid,
    doNotExpandTemplates: true,
  });
  const parentNode = useBuilderParentNode(nodeUid);
  const siblingGroups = useBuilderGroupedChildNodes({
    nodeUid: parentNode.$$uid,
    doNotExpandTemplates: true,
  });
  const manager = useBuilderDataManager();
  const canDrop = useCanDrop();
  const contextMenuStatus = useBuilderContextMenuStatus();
  const outlineApplicable = node.brick === "basic-bricks.easy-view";
  const outlineEnabled = useOutlineEnabled(node.instanceId, !outlineApplicable);

  const handleClick = useCallback(() => {
    manager.nodeClick(node);
  }, [manager, node]);

  const hover = useMemo(
    () => hoverNodeUid === nodeUid,
    [hoverNodeUid, nodeUid]
  );

  const [{ isDragging }, dragRef, draggingPreviewRef] = useDrag({
    item: {
      type: StoryboardTreeTransferType.NODE,
      nodeUid,
      nodeId: node.id,
      nodeInstanceId: node.instanceId,
      nodeType: node.type,
    },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  });

  const [{ isDraggingOverCurrent }, dropRef] = useDrop({
    accept: StoryboardTreeTransferType.NODE,
    canDrop: (item: DraggingNodeItem) =>
      canDrop(item.nodeUid, nodeUid) &&
      (Number(isRouteNode(node)) ^
        Number(isRouteNode({ type: item.nodeType } as any))) ===
        0,
    collect: (monitor) => ({
      isDraggingOverCurrent: monitor.isOver() && monitor.canDrop(),
    }),
    drop: (item, monitor) => {
      if (!monitor.didDrop()) {
        let droppingIndex = -1;
        for (const group of siblingGroups) {
          droppingIndex = group.childNodes.findIndex(
            (n) => n.$$uid === nodeUid
          );
          if (droppingIndex > -1) {
            // When dropping a node on another node,
            // we say it drops *under* the target node.
            // So add `droppingIndex` by 1.
            droppingIndex += 1;
            break;
          }
        }
        handleDropOnNode({
          draggingItem: item,
          droppingMountPoint: mountPoint,
          droppingParentNode: parentNode,
          droppingSiblingGroups: siblingGroups,
          droppingIndex,
          manager,
        });
      }
    },
  });

  const handleContextMenu = useCallback(
    (event: React.MouseEvent) => {
      event.preventDefault();
      manager.contextMenuChange({
        active: true,
        node,
        x: event.clientX,
        y: event.clientY,
      });
    },
    [manager, node]
  );

  let icon: JSX.Element;
  let displayType = DisplayType.DEFAULT;

  if (node.type === "provider" || node.bg) {
    displayType = DisplayType.PROVIDER;
    icon = <DatabaseFilled />;
  } else if (node.portal) {
    displayType = DisplayType.PORTAL;
    icon = <MessageFilled />;
  } else if (isRouteNode(node)) {
    displayType = DisplayType.ROUTE;
    icon = <BranchesOutlined />;
  }

  const handleMouseEnter = useCallback((): void => {
    const prevUid = manager.getHoverNodeUid();
    if (prevUid !== node.$$uid) {
      manager.setHoverNodeUid(node.$$uid);
    }
  }, [manager, node]);

  const handleMouseLeave = useCallback((): void => {
    const prevUid = manager.getHoverNodeUid();
    if (prevUid === node.$$uid) {
      manager.setHoverNodeUid(undefined);
    }
  }, [manager, node]);

  const handleOutlineToggle = useCallback(
    (event: React.MouseEvent) => {
      event.stopPropagation();
      manager.toggleOutline(node.instanceId);
    },
    [manager, node]
  );

  return (
    <li
      className={classNames(
        styles.treeNode,
        {
          [styles.dragging]: isDragging,
          [styles.draggingNodeOverCurrent]: isDraggingOverCurrent,
        },
        styles[displayType]
      )}
      ref={draggingPreviewRef}
    >
      <div
        className={classNames(styles.nodeNameWrapper, {
          [styles.highlightNode]: highlightNodes.has(nodeUid),
          [styles.nodeNameWrapperHover]:
            hover ||
            (contextMenuStatus.active &&
              contextMenuStatus.node.$$uid === nodeUid),
        })}
        style={{
          paddingLeft: level * treeViewPaddingUnit,
        }}
        onClick={handleClick}
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
        onContextMenu={handleContextMenu}
        ref={(node) => dragRef(dropRef(node))}
      >
        {icon && <div className={styles.icon}>{icon}</div>}
        <div className={styles.nodeName} title={node.alias}>
          {node.alias}
        </div>
        {outlineApplicable && (
          <div
            className={classNames(styles.outlineToggle, {
              [styles.outlineEnabled]: outlineEnabled,
            })}
            onClick={handleOutlineToggle}
          >
            grid
          </div>
        )}
      </div>
      {mountPoints.length > 0 && (
        <ul className={styles.mountPointList}>
          {mountPoints.map((childMountPoint) => (
            <StoryboardTreeMountPoint
              level={level + 1}
              key={childMountPoint}
              nodeUid={nodeUid}
              mountPoint={childMountPoint}
            />
          ))}
        </ul>
      )}
      <div
        className={styles.dropCursor}
        style={{
          left: level * treeViewPaddingUnit,
        }}
      />
    </li>
  );
}