function Entity()

in document-json-explorer/src/Entity.js [34:107]
50 lines of code
8 McCabe index (conditional complexity)

function Entity(props) {
  const cardRef = React.createRef(); // Create a ref for the containing card so that we can scroll it into view

  function onClick() {
    if (props.onClick) {
      props.onClick(props.entity);
    }
  }

  function onInfoClick(event) {
    event.stopPropagation();
    if (props.onInfoClick) {
      props.onInfoClick(props.entity);
    }
  }

  // Determine whether or not we should hilight.  The rules are:
  // If no hilight is supplied then no hilight
  // If a string, then compare it to the enetity id value
  // If a boolean, then hilight based on the value of the boolean
  // If an object, assume it is an entity and hilight based on the id comparison
  //
  let hilight = false;
  if (props.hilight) {
    if (
      typeof props.hilight === "string" &&
      props.hilight === props.entity.id
    ) {
      hilight = true;
    } else if (typeof props.hilight === "boolean") {
      hilight = props.hilight;
    } else {
      hilight = props.entity.id === props.hilight.id;
    }
  }

  // When the entity has rendered, if this entity is hilighted, then scroll it into
  // view within the containing list.
  useEffect(() => {
    if (hilight) {
      cardRef.current.scrollIntoView();
    }
  });

  return (
    <Card
      ref={cardRef}
      variant="outlined"
      style={{
        backgroundColor: hilight ? "lightgray" : "white",
        margin: "4px",
      }}
      onClick={onClick}
    >
      <CardHeader
        title={props.entity.type}
        action={
          props.onInfoClick && (
            <IconButton color="primary" size="small" onClick={onInfoClick}>
              <InfoIcon />
            </IconButton>
          )
        }
      ></CardHeader>
      <CardContent>
        <Typography variant="body1">
          Text: {props.entity.mentionText}
          <br />
          Confidence: {props.entity.confidence}
        </Typography>
      </CardContent>
    </Card>
  );
} // Entity