CellContent() — react Function Reference

Architecture documentation for the CellContent() function in App.js from the react codebase.

Function javascript BabelCompiler Entrypoint

Entity Profile

BabelCompiler→ Entrypoint→ CellContent() — react Function Reference

Dependency Diagram

graph TD
  f9a721e6_602c_f118_e740_930a5ba3fe9d["CellContent()"]
  444f4239_c2fb_3bc5_1037_eb595d98f6e1["App.js"]
  f9a721e6_602c_f118_e740_930a5ba3fe9d -->|defined in| 444f4239_c2fb_3bc5_1037_eb595d98f6e1
  style f9a721e6_602c_f118_e740_930a5ba3fe9d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/attribute-behavior/src/App.js lines 703–742

function CellContent(props) {
  const {
    columnIndex,
    rowIndex,
    attributesInSortedOrder,
    completedHashes,
    toggleAttribute,
    table,
  } = props;
  const attribute = attributesInSortedOrder[rowIndex - 1];
  const type = types[columnIndex - 1];

  if (columnIndex === 0) {
    if (rowIndex === 0) {
      return null;
    }
    const row = table.get(attribute);
    const rowPatternHash = row.rowPatternHash;
    return (
      <RowHeader
        checked={completedHashes.has(rowPatternHash)}
        onChange={() => toggleAttribute(rowPatternHash)}>
        {row.hasSameBehaviorForAll ? (
          attribute.name
        ) : (
          <b css={{color: 'purple'}}>{attribute.name}</b>
        )}
      </RowHeader>
    );
  }

  if (rowIndex === 0) {
    return <ColumnHeader>{type.name}</ColumnHeader>;
  }

  const row = table.get(attribute);
  const result = row.results.get(type.name);

  return <Result {...result} />;
}