react-window#areEqual TypeScript Examples

Row = memo((props: RowProps) => {
  const { index, style, data } = props;
  const row = data[index];
  return (
    <div style={style}>
      <div
        style={{
          display: "flex",
          flexDirection: "row",
          borderBottom: "1px solid rgba(224, 224, 224, 1)",
          alignItems: "center",
        }}
      >
        <ERC20Token tokenAddress={row.tokenAddress} symbol={row.symbol} />
        <Receiver receiverAddress={row.receiver} receiverEnsName={row.receiverEnsName} />
        <div style={{ flex: "1", padding: 16, minWidth: 80 }}>
          <Text size="md">{row.amount?.toFixed()}</Text>
        </div>
      </div>
    </div>
  );
}, areEqual)

Row = memo((props: RowProps) => {
  const { index, style, data } = props;
  const row = data[index];
  return (
    <div style={style}>
      <div
        style={{
          display: "flex",
          flexDirection: "row",
          borderBottom: "1px solid rgba(224, 224, 224, 1)",
          alignItems: "center",
        }}
      >
        <ERC721Token
          tokenAddress={row.tokenAddress}
          id={row.tokenId}
          token_type={row.token_type}
          hasMetaData={row.hasMetaData}
        />
        <div style={{ flex: "1", padding: 16, minWidth: 80 }}>
          <Text size="md">{row.token_type.toUpperCase()}</Text>
        </div>
        <Receiver receiverAddress={row.receiver} receiverEnsName={row.receiverEnsName} />
        <div style={{ flex: "1", padding: 16, minWidth: 80 }}>
          <Text size="md">{row.amount?.toFixed()}</Text>
        </div>
        <div style={{ flex: "1", padding: 16, minWidth: 80 }}>
          <Text size="md">{row.tokenId.toFixed()}</Text>
        </div>
      </div>
    </div>
  );
}, areEqual)

renderVirtualRow = React.memo((props: VirtualRowProps) => {
    const { data: items, index, style, isDragging } = props
    const { isDragEnabled } = this.props
    const flatItem = items[index]
    const isDragDisabled =
      typeof isDragEnabled === 'function'
        ? !isDragEnabled(flatItem.item)
        : !isDragEnabled

    return (
      <Draggable
        draggableId={flatItem.item.id.toString()}
        index={index}
        isDragDisabled={isDragDisabled}
        key={flatItem.item.id}
      >
        {(provided, snapshot) =>
          this.renderVirtualItem({
            snapshot,
            provided,
            flatItem,
            style,
            isDragging,
          })
        }
      </Draggable>
    )
  }, areEqual)

TokenRow = memo(
  ({
    data: { tokenKeys, onClick, mode },
    index,
    style,
  }: {
    data: {
      tokenKeys: string[];
      onClick: (symbol: string) => any;
      mode: Mode;
    };
    index: number;
    style: CSSProperties;
  }) => {
    const token = tokens[tokenKeys[index]];

    const { data: balance, isLoading: isBalanceLoading } = useTokenBalance(
      token.address
    );

    return (
      <div style={style}>
        <Row
          flexShrink={0}
          as="button"
          onClick={() => onClick(token.symbol)}
          mainAxisAlignment="flex-start"
          crossAxisAlignment="center"
          width="100%"
        >
          <Box height="45px" width="45px" borderRadius="50%" mr={2}>
            <Image
              width="100%"
              height="100%"
              borderRadius="50%"
              backgroundImage={`url(${BigWhiteCircle})`}
              src={token.logoURL}
              alt=""
            />
          </Box>
          <Column
            mainAxisAlignment="flex-start"
            crossAxisAlignment="flex-start"
          >
            <Heading fontSize="20px" lineHeight="1.25rem" color={token.color}>
              {token.symbol}
            </Heading>
            <Text fontWeight="thin" fontSize="15px">
              {mode === Mode.DEPOSIT
                ? isBalanceLoading
                  ? "?"
                  : usdFormatter(
                      parseFloat(balance!.toString()) / 10 ** token.decimals
                    ).replace("$", "")
                : null}
            </Text>
          </Column>
        </Row>
      </div>
    );
  },
  areEqual
)

Row = memo<RowProps>(function FlowsTableRow(props) {
  const onClick = useCallback(
    () => props.onSelect?.(props.isSelected ? null : props.flow),
    [props.onSelect, props.isSelected, props.flow],
  );

  const className = classnames(css.row, {
    [css.selected]: props.isSelected,
  });

  return (
    <div className={className} style={props.style} onClick={onClick}>
      {props.visibleColumns.has(Column.SrcPod) && (
        <Cell flow={props.flow} kind={Column.SrcPod} />
      )}
      {props.visibleColumns.has(Column.SrcIp) && (
        <Cell flow={props.flow} kind={Column.SrcIp} />
      )}
      {props.visibleColumns.has(Column.SrcService) && (
        <Cell flow={props.flow} kind={Column.SrcService} />
      )}
      {props.visibleColumns.has(Column.DstPod) && (
        <Cell flow={props.flow} kind={Column.DstPod} />
      )}
      {props.visibleColumns.has(Column.DstIp) && (
        <Cell flow={props.flow} kind={Column.DstIp} />
      )}
      {props.visibleColumns.has(Column.DstService) && (
        <Cell flow={props.flow} kind={Column.DstService} />
      )}
      {props.visibleColumns.has(Column.DstPort) && (
        <Cell flow={props.flow} kind={Column.DstPort} />
      )}
      {props.visibleColumns.has(Column.L7Info) && (
        <Cell flow={props.flow} kind={Column.L7Info} />
      )}
      {props.visibleColumns.has(Column.Verdict) && (
        <Cell flow={props.flow} kind={Column.Verdict} />
      )}
      {props.visibleColumns.has(Column.TcpFlags) && (
        <Cell flow={props.flow} kind={Column.TcpFlags} />
      )}
      {props.visibleColumns.has(Column.Timestamp) && (
        <Cell flow={props.flow} kind={Column.Timestamp} ticker={props.ticker} />
      )}
    </div>
  );
}, areEqual)

LogItem = memo(
  ({ index, style, data: { columns, items, showLogDetails } }: Props) => {
    const logData = items[index]
    const { name, message, level, process, formattedTimestamp, idx } = logData
    let logName = String(name)
    logName = logName.length > 20 ? logName.substring(0, 20) : logName
    let levelInitial = String(level)[0]
    const { firstCol, secondCol, thirdCol } = columns
    return (
      <div
        data-name={`logItem-${index}`}
        className={`log log-${String(
          level
        ).toLowerCase()} px-4 border-bottom py-1`}
        css={{ maxHeight: 84 }}
        style={style}
        onClick={() => showLogDetails(logData)}
      >
        <div className="flex">
          <div
            className="log-prefix text-muted px-0 flex flex-row"
            css={{ maxWidth: firstCol }}
          >
            <div className="text-bold mr-2">{idx}</div>
            <div className="ml-auto">{formattedTimestamp}</div>
          </div>
          <div
            className="log-prefix px-0 text-left text-md-right text-bold cursor-pointer"
            css={{ maxWidth: secondCol }}
          >
            {logName}@{process}[{levelInitial}]:
          </div>
          <div
            className="px-0"
            css={{
              maxHeight: 84,
              display: "block",
              overflow: "hidden",
              textOverflow: "ellipsis",
              width: thirdCol,
              whiteSpace: "nowrap",
              paddingRight: 0,
              marginRight: 0,
            }}
          >
            {message}
          </div>
        </div>
      </div>
    )
  },
  areEqual
)

ResultsTableRow = memo(ResultsTableRowUnmemoed, areEqual)

RowComponent = React.memo(
  ({
    index,
    style,
    data,
    isScrolling,
    columns,
    hasStickyRightColumn,
    active,
    activeColIndex,
    editing,
    setRowData,
    deleteRows,
    insertRowAfter,
    duplicateRows,
    stopEditing,
    getContextMenuItems,
    rowClassName,
  }: RowProps<any>) => {
    const firstRender = useFirstRender()

    // True when we should render the light version (when we are scrolling)
    const renderLight = isScrolling && firstRender

    const setGivenRowData = useCallback(
      (rowData: any) => {
        setRowData(index, rowData)
      },
      [index, setRowData]
    )

    const deleteGivenRow = useCallback(() => {
      deleteRows(index)
    }, [deleteRows, index])

    const duplicateGivenRow = useCallback(() => {
      duplicateRows(index)
    }, [duplicateRows, index])

    const insertAfterGivenRow = useCallback(() => {
      insertRowAfter(index)
    }, [insertRowAfter, index])

    return (
      <div
        className={cx(
          'dsg-row',
          typeof rowClassName === 'string' ? rowClassName : null,
          typeof rowClassName === 'function'
            ? rowClassName({ rowData: data, rowIndex: index })
            : null
        )}
        style={style}
      >
        {columns.map((column, i) => {
          const Component = column.component

          const disabled =
            column.disabled === true ||
            (typeof column.disabled === 'function' &&
              column.disabled({ rowData: data, rowIndex: index }))

          return (
            <Cell
              key={i}
              gutter={i === 0}
              disabled={disabled}
              stickyRight={hasStickyRightColumn && i === columns.length - 1}
              column={column}
              active={active}
              className={cx(
                !column.renderWhenScrolling && renderLight && 'dsg-cell-light',
                typeof column.cellClassName === 'function'
                  ? column.cellClassName({ rowData: data, rowIndex: index })
                  : column.cellClassName
              )}
            >
              {(column.renderWhenScrolling || !renderLight) && (
                <Component
                  rowData={data}
                  getContextMenuItems={getContextMenuItems}
                  disabled={disabled}
                  active={activeColIndex === i - 1}
                  columnIndex={i - 1}
                  rowIndex={index}
                  focus={activeColIndex === i - 1 && editing}
                  deleteRow={deleteGivenRow}
                  duplicateRow={duplicateGivenRow}
                  stopEditing={
                    activeColIndex === i - 1 && editing && stopEditing
                      ? stopEditing
                      : nullfunc
                  }
                  insertRowBelow={insertAfterGivenRow}
                  setRowData={setGivenRowData}
                  columnData={column.columnData}
                />
              )}
            </Cell>
          )
        })}
      </div>
    )
  },
  (prevProps, nextProps) => {
    const { isScrolling: prevIsScrolling, ...prevRest } = prevProps
    const { isScrolling: nextIsScrolling, ...nextRest } = nextProps

    // When we are scrolling always re-use previous render, otherwise check props
    return nextIsScrolling || (!prevIsScrolling && areEqual(prevRest, nextRest))
  }
)