react-window#ListChildComponentProps TypeScript Examples

The following examples show how to use react-window#ListChildComponentProps. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: NativeSelect.tsx    From GTAV-NativeDB with MIT License 6 votes vote down vote up 
function renderRow(props: ListChildComponentProps) {
  const { data, index, style } = props
  return React.cloneElement(data[index], {
    style: {
      ...style,
      top: (style.top as number) + LISTBOX_PADDING
    }
  })
}
Example #2
Source File: SQFormAutocomplete.tsx    From SQForm with MIT License 6 votes vote down vote up 
function renderRow({data, index, style}: ListChildComponentProps) {
  const elToClone = data[index];
  const value = elToClone.props.children.props.children;
  const clone = React.cloneElement(elToClone, {
    style: {
      ...style,
      top: (style.top as number) + LISTBOX_PADDING,
    },
  });

  return (
    <Tooltip
      title={value || ''}
      key={`${value}-${index}-with-tooltip`}
      placement="bottom-start"
    >
      {clone}
    </Tooltip>
  );
}
Example #3
Source File: Row.tsx    From hubble-ui with Apache License 2.0 6 votes vote down vote up 
export function RowRenderer({ index, style, data }: ListChildComponentProps) {
  const props = data as RowRendererData;
  const flow = props.flows[index];
  return (
    <Row
      style={style}
      flow={flow}
      visibleColumns={props.visibleColumns}
      isSelected={props.selectedFlow?.id === flow.id}
      onSelect={props.onSelectFlow}
      ticker={props.ticker}
    />
  );
}
Example #4
Source File: GroupSelect.tsx    From asynqmon with MIT License 6 votes vote down vote up 
// px

function renderRow(props: ListChildComponentProps) {
  const { data, index, style } = props;
  return React.cloneElement(data[index], {
    style: {
      ...style,
      top: (style.top as number) + LISTBOX_PADDING,
    },
  });
}
Example #5
Source File: SearchBarComponent.tsx    From professor-prebid with Apache License 2.0 6 votes vote down vote up 
renderRow = (props: ListChildComponentProps) => {
  const { data, index, style } = props;
  const dataSet = data[index];
  const inlineStyle = {
    ...style,
    top: (style.top as number) + LISTBOX_PADDING,
  };

  if (dataSet.hasOwnProperty('group')) {
    return (
      <ListSubheader key={dataSet.key} component="div" style={inlineStyle}>
        {dataSet.group}
      </ListSubheader>
    );
  }

  return (
    <Typography component="li" {...dataSet[0]} noWrap style={inlineStyle}>
      {dataSet[1]}
    </Typography>
  );
}
Example #6
Source File: Row.tsx    From react-datasheet-grid with MIT License 5 votes vote down vote up 
Row = <T extends any>({
  index,
  style,
  data,
  isScrolling,
}: ListChildComponentProps<ListItemData<T>>) => {
  // Do not render header row, it is rendered by the InnerContainer
  if (index === 0) {
    return null
  }

  return (
    <RowComponent
      index={index - 1}
      data={data.data[index - 1]}
      columns={data.columns}
      style={{
        ...style,
        width: data.contentWidth ? data.contentWidth : '100%',
      }}
      hasStickyRightColumn={data.hasStickyRightColumn}
      isScrolling={isScrolling}
      active={Boolean(
        index - 1 >= (data.selectionMinRow ?? Infinity) &&
          index - 1 <= (data.selectionMaxRow ?? -Infinity) &&
          data.activeCell
      )}
      activeColIndex={
        data.activeCell?.row === index - 1 ? data.activeCell.col : null
      }
      editing={Boolean(data.activeCell?.row === index - 1 && data.editing)}
      setRowData={data.setRowData}
      deleteRows={data.deleteRows}
      insertRowAfter={data.insertRowAfter}
      duplicateRows={data.duplicateRows}
      stopEditing={
        data.activeCell?.row === index - 1 && data.editing
          ? data.stopEditing
          : undefined
      }
      getContextMenuItems={data.getContextMenuItems}
      rowClassName={data.rowClassName}
    />
  )
}
Example #7
Source File: SQFormAsyncAutocomplete.tsx    From SQForm with MIT License 5 votes vote down vote up 
function renderRow({data, index, style}: ListChildComponentProps) {
  return React.cloneElement(data[index], {
    style: {
      ...style,
      top: (style.top as number) + LISTBOX_PADDING,
    },
  });
}
Example #8
Source File: SQFormMultiValue.tsx    From SQForm with MIT License 5 votes vote down vote up 
function renderRow({data, index, style}: ListChildComponentProps) {
  return React.cloneElement(data[index], {
    style: {
      ...style,
      top: (style.top as number) + LISTBOX_PADDING,
    },
  });
}
Example #9
Source File: TorrentList.tsx    From flood with GNU General Public License v3.0 5 votes vote down vote up 
TorrentListRowRenderer: FC<ListChildComponentProps> = observer(({index, style}) => (
  <TorrentListRow hash={TorrentStore.filteredTorrents[index].hash} style={style} />
))