CommitRankedListItem() — react Function Reference

Source Code

packages/react-devtools-shared/src/devtools/views/Profiler/CommitRankedListItem.js lines 26–80

function CommitRankedListItem({data, index, style}: Props) {
  const {
    chartData,
    onElementMouseEnter,
    onElementMouseLeave,
    scaleX,
    selectedFiberIndex,
    selectFiber,
    width,
  } = data;

  const node = chartData.nodes[index];

  const {lineHeight} = useContext(SettingsContext);

  const handleClick = useCallback(
    (event: $FlowFixMe) => {
      event.stopPropagation();
      const {id, name} = node;
      selectFiber(id, name);
    },
    [node, selectFiber],
  );

  const handleMouseEnter = () => {
    const {id, name} = node;
    onElementMouseEnter({id, name});
  };

  const handleMouseLeave = () => {
    onElementMouseLeave();
  };

  // List items are absolutely positioned using the CSS "top" attribute.
  // The "left" value will always be 0.
  // Since height is fixed, and width is based on the node's duration,
  // We can ignore those values as well.
  const top = parseInt(style.top, 10);

  return (
    <ChartNode
      color={getGradientColor(node.value / chartData.maxValue)}
      height={lineHeight}
      isDimmed={index < selectedFiberIndex}
      key={node.id}
      label={node.label}
      onClick={handleClick}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      width={Math.max(minBarWidth, scaleX(node.value, width))}
      x={0}
      y={top}
    />
  );
}