react-virtualized#AutoSizer JavaScript Examples

render () {
    const { drawings, indicators } = this.state

    return (
      <div id="bitfinex-chart-demo__bfxc">
        <AutoSizer>
          {({ width, height }) => (
            <Chart
              ref={this.chartRef}
              indicators={indicators}
              drawings={drawings}
              marketLabel='BTC/USD'
              candles={MockCandleData}
              candleWidth='1m'
              width={width}
              height={height}
              disableToolbar

              onUpdateIndicatorArgs={this.onUpdateIndicatorArgs}
              onDeleteIndicator={this.onDeleteIndicator}
              onAddIndicator={this.onAddIndicator}
              onAddDrawing={this.onAddDrawing}
            />
          )}
        </AutoSizer>
      </div>
    )
  }

virtualizedRenderer = ({ overscanRowCount = 10, rowHeight = 15 } = {}) => {
    return ({ rows, stylesheet, useInlineStyles }) => (
        <ListContainer>
            <AutoSizer>
                {({ width, height }) => (
                    <Grid
                        width={width}
                        height={height}
                        rowHeight={rowHeight}
                        columnCount={1}
                        columnWidth={width}
                        rowCount={rows.length}
                        cellRenderer={rowRenderer({ rows, stylesheet, useInlineStyles })}
                        overscanRowCount={overscanRowCount}
                        style={gridStyles}
                        containerStyle={gridInnerContainerStyles}
                    />
                )}
            </AutoSizer>
        </ListContainer>
    );
}

thirdPartyComponents = {
  AutoSizer,
  rbd,
  ReactDND,
  ReactDNDHtml5backend,
  ReactMovable,
  dateFns,
  dateFnsLocale,
  update, // XXX: rename to immutableUpdate
  ...ReactTable, // XXX: rename to ReactTable.xxx
}

render () {
    const { classes, columns, rowHeight, headerHeight, sortDirection, ...tableProps } = this.props
    return (
      <AutoSizer>
        {({ height, width }) => (
          <Table
            height={height}
            width={width}
            rowHeight={rowHeight}
            gridStyle={{
              direction: 'inherit'
            }}
            headerHeight={headerHeight}
            className={classes.table}
            {...tableProps}
            rowClassName={this.getRowClassName}
          >
            {columns.map(({ id, minWidth, ...other }, index) => {
              const label = intl.get(`perspectives.fullTextSearch.properties.${id}.label`)
              return (
                <Column
                  key={id}
                  headerRenderer={(headerProps) =>
                    this.headerRenderer({
                      ...headerProps,
                      label,
                      columnIndex: index,
                      dataKey: id
                    })}
                  className={classes.flexContainer}
                  cellRenderer={this.cellRenderer}
                  dataKey={id}
                  width={minWidth}
                  {...other}
                />
              )
            })}
          </Table>
        )}
      </AutoSizer>
    )
  }

render() {
    if (!this.state.table) {
      return (
        <div>
          <h1>Loading...</h1>
          {!useFastMode && (
            <h3>The progress is reported in the window title.</h3>
          )}
        </div>
      );
    }
    return (
      <div>
        <div>
          <select value={this.state.sortOrder} onChange={this.onUpdateSort}>
            <option value={ALPHABETICAL}>alphabetical</option>
            <option value={REV_ALPHABETICAL}>reverse alphabetical</option>
            <option value={GROUPED_BY_ROW_PATTERN}>
              grouped by row pattern :)
            </option>
          </select>
          <select value={this.state.filter} onChange={this.onUpdateFilter}>
            <option value={ALL}>all</option>
            <option value={INCOMPLETE}>incomplete</option>
            <option value={COMPLETE}>complete</option>
          </select>
          <button style={{marginLeft: '10px'}} onClick={this.handleSaveClick}>
            Save latest results to a file{' '}
            <span role="img" aria-label="Save">
              ?
            </span>
          </button>
        </div>
        <AutoSizer disableHeight={true}>
          {({width}) => (
            <MultiGrid
              ref={input => {
                this.grid = input;
              }}
              cellRenderer={this.renderCell}
              columnWidth={200}
              columnCount={1 + types.length}
              fixedColumnCount={1}
              enableFixedColumnScroll={true}
              enableFixedRowScroll={true}
              height={1200}
              rowHeight={40}
              rowCount={this.attributes.length + 1}
              fixedRowCount={1}
              width={width}
            />
          )}
        </AutoSizer>
      </div>
    );
  }

Channels = ({className, searchTerm}) => {
  const [channels, setChannels] = React.useState([]);

  React.useEffect(() => {
    const fetchChannels = async () => {
      const channelsData = await getChannels();
      setChannels(channelsData);
    }
    fetchChannels();
  }, []);

  const searchedChannels = searchTerm ? channels.filter(channel => (
    channel.name.toLowerCase().includes(searchTerm.toLowerCase())
    )) : channels;

  const Cell = ({ columnIndex, key, rowIndex, style }) => {
    const channelIndex = (rowIndex * 6) + columnIndex; 
    if (!searchedChannels[channelIndex]) return; // exit if the channel on that index doesn't exist
    return (
    <li className="list-none" key={key} style={style}>
      <div className="p-3 h-full w-full">
      <ChannelCard channel={searchedChannels[channelIndex]} />
      </div>
    </li>
  )};

  // To choose a good number for height & width, go to https://nerdcave.com/tailwind-cheat-sheet and select a size as per Tailwind standards
  const columnWidth = 192; // This is the cell width. Card size will be smaller due to padding
  const rowHeight = 224; // This is the cell height. Card size will be smaller due to padding
  return (
    <div className={`${className} min-h-screen container mx-auto`}>
      <WindowScroller>
        {({ height, isScrolling, onChildScroll, scrollTop }) => (
          <AutoSizer disableHeight>
            {
              ({width}) => {
                const columnCount = Math.floor(width/columnWidth);
                return (
                  <Grid
                    autoHeight
                    cellRenderer={Cell}
                    columnCount={columnCount}
                    columnWidth={columnWidth}
                    height={height}
                    isScrolling={isScrolling}
                    onScroll={onChildScroll}
                    scrollTop={scrollTop}
                    rowCount={Math.ceil(searchedChannels.length/columnCount)}
                    rowHeight={rowHeight}
                    width={width}
                    className = "flex justify-center"
                  />
                )
              }
            }
          </AutoSizer>
        )}
      </WindowScroller>
    </div>
  );
}

ReactVirtualizedList = props => {
  const classes = useStyles(props)
  const { results } = props.perspectiveState

  useEffect(() => {
    props.fetchResults({
      resultClass: props.resultClass,
      facetClass: props.facetClass
    })
  }, [])

  useEffect(() => {
    const { facetUpdateID } = props
    if (facetUpdateID > 0) {
      props.fetchResults({
        resultClass: props.resultClass,
        facetClass: props.facetClass
      })
    }
  }, [props.facetUpdateID])

  const rowRenderer = ({
    key, // Unique key within array of rows
    index, // Index of row within collection
    isScrolling, // The List is currently being scrolled
    isVisible, // This row is visible within the List (eg it is not an overscanned row)
    style // Style object to be applied to row (to position it)
  }) => {
    const data = props.perspectiveState.results[index]
    let image = null
    if (data.imageURL) {
      const { imageURL } = data
      image = imageURL.includes(', ') ? imageURL.split(', ')[0] : imageURL
    }
    return (
      <div className={classes.rowRoot} key={key} style={style}>
        <Link className={classes.link} to={data.dataProviderUrl}>
          <Card>
            <CardActionArea>
              {image &&
                <CardMedia
                  component='img'
                  alt='Kuva löydöstä'
                  height='140'
                  image={image}
                  title='Kuva löydöstä'
                />}
              <CardContent>
                <Typography gutterBottom variant='h5' component='h2'>
                  {data.findName}
                </Typography>
                <Typography variant='body2' color='textSecondary' component='p'>
                  <strong>{intl.get('perspectives.finds.properties.objectType.label')}: </strong>
                  {data.objectType}
                </Typography>
                <Typography variant='body2' color='textSecondary' component='p'>
                  <strong>{intl.get('perspectives.finds.properties.material.label')}: </strong>
                  {data.material}
                </Typography>
                <Typography variant='body2' color='textSecondary' component='p'>
                  <strong>{intl.get('perspectives.finds.properties.period.label')}: </strong>
                  {data.period}
                </Typography>
                <Typography variant='body2' color='textSecondary' component='p'>
                  <strong>{intl.get('perspectives.finds.properties.municipality.label')}: </strong>
                  {data.municipality}
                </Typography>
              </CardContent>
            </CardActionArea>
          </Card>
        </Link>

      </div>
    )
  }

  const getRowHeight = ({ index }) => {
    const data = props.perspectiveState.results[index]
    let height = 300
    if (!data.imageURL) {
      height -= 140
    }
    if (data.findName.length > 26) {
      height += 32
    }
    if (data.findName.length > 40) {
      height += 54
    }
    if (data.period) {
      const limit = window.innerWidth < 328 ? 25 : 34
      if (data.period.length > limit) {
        height += 20
      }
    }
    return height
  }

  const validResults = () => {
    const { results, resultClass } = props.perspectiveState
    if (resultClass !== props.resultClass) { return false }
    if (results == null) { return false }
    if (results.length < 1) { return false }
    return true
  }

  // if (props.perspectiveState.results) {
  //   props.perspectiveState.results.map(r => {
  //     if (r.period && r.period.length > 33) {
  //       console.log(r)
  //     }
  //   })
  // }

  return (
    <div className={classes.root}>
      {(!validResults() || props.perspectiveState.results.fetching)
        ? (
          <div className={classes.progressContainer}>
            <CircularProgress />
          </div>
          )
        : (
          <AutoSizer>
            {({ height, width }) => (
              <List
                className={classes.list}
                height={height}
                width={width}
                rowCount={results.length}
                rowHeight={getRowHeight}
                rowRenderer={rowRenderer}
              />
            )}
          </AutoSizer>
          )}
    </div>
  )
}

render () {
    const { classes, list, perspectiveID } = this.props
    // console.log(list)
    const rowGetter = ({ index }) => this._getDatum(list, index)

    const headerRenderer = ({
      dataKey,
      label,
      sortBy,
      sortDirection
    }) => {
      const showSortIndicator = sortBy === dataKey
      const children = [
        <span
          className='ReactVirtualized__Table__headerTruncatedText'
          style={showSortIndicator ? {} : { marginRight: 16 }}
          key='label'
          title={label}
        >
          {label}
        </span>
      ]
      if (showSortIndicator) {
        children.push(
          <SortIndicator key='SortIndicator' sortDirection={sortDirection} />
        )
      }
      return children
    }

    const labelRenderer = ({ cellData, rowData }) => {
      if (cellData == null) return ''
      const label = <a target='_blank' rel='noopener noreferrer' href={rowData.id}>{cellData}</a>
      let marker = ''
      if (typeof rowData.lat !== 'undefined' || typeof rowData.long !== 'undefined') {
        marker = (
          <IconButton disabled aria-label='Marker' size="large">
            <PlaceIcon />
          </IconButton>
        )
      }
      return (
        <div key={rowData.id}>
          {label}{marker}
        </div>
      )
    }

    const sourceRenderer = ({ cellData, rowData }) => {
      if (cellData == null) return ''
      if (has(rowData, 'namesArchiveLink')) {
        return (
          <div key={rowData.s}>
            <a target='_blank' rel='noopener noreferrer' href={rowData.namesArchiveLink}>{cellData}</a>
          </div>
        )
      } else {
        return (
          <div key={rowData.s}>{cellData}</div>
        )
      }
    }

    return (
      <div className={classes.root}>
        {this.props.list.size > 0 &&
          <AutoSizer>
            {({ height, width }) => (
              <Table
                overscanRowCount={10}
                rowHeight={40}
                rowGetter={rowGetter}
                rowCount={this.props.list.size}
                sort={this._sort}
                sortBy={this.props.clientFSState.sortBy}
                sortDirection={this.props.clientFSState.sortDirection.toUpperCase()}
                width={width}
                height={height}
                headerHeight={50}
                noRowsRenderer={this._noRowsRenderer}
                style={tableStyles.tableRoot}
                rowStyle={calculateRowStyle}
              >
                <Column
                  label={intl.get(`perspectives.${perspectiveID}.properties.prefLabel.label`)}
                  cellDataGetter={({ rowData }) => rowData.prefLabel}
                  dataKey='prefLabel'
                  headerRenderer={headerRenderer}
                  cellRenderer={labelRenderer}
                  width={columnWidth + 70}
                />
                <Column
                  label={intl.get(`perspectives.${perspectiveID}.properties.broaderTypeLabel.label`)}
                  cellDataGetter={({ rowData }) => has(rowData, 'broaderTypeLabel') ? rowData.broaderTypeLabel.toLowerCase() : ''}
                  dataKey='broaderTypeLabel'
                  headerRenderer={headerRenderer}
                  width={columnWidth + 10}
                />
                {/* <Column
                    label="NA type"
                    cellDataGetter={({rowData}) => has(rowData,'typeLabel') ? rowData.typeLabel.toLowerCase() : ''}
                    dataKey="typeLabel"
                    headerRenderer={headerRenderer}
                    width={columnWidth}
                  /> */}
                <Column
                  label={intl.get(`perspectives.${perspectiveID}.properties.broaderAreaLabel.label`)}
                  cellDataGetter={({ rowData }) => rowData.broaderAreaLabel}
                  dataKey='broaderAreaLabel'
                  headerRenderer={headerRenderer}
                  width={columnWidth}
                />
                <Column
                  label={intl.get(`perspectives.${perspectiveID}.properties.modifier.label`)}
                  cellDataGetter={({ rowData }) => rowData.modifier}
                  dataKey='modifier'
                  headerRenderer={headerRenderer}
                  width={columnWidth + 10}
                />
                <Column
                  label={intl.get(`perspectives.${perspectiveID}.properties.basicElement.label`)}
                  cellDataGetter={({ rowData }) => rowData.basicElement}
                  dataKey='basicElement'
                  headerRenderer={headerRenderer}
                  width={columnWidth}
                />
                {/*
                  <Column
                    label="Collector"
                    cellDataGetter={({rowData}) => rowData.collector}
                    dataKey="collector"
                    headerRenderer={headerRenderer}
                    width={columnWidth}
                  /> */}
                <Column
                  label={intl.get(`perspectives.${perspectiveID}.properties.collectionYear.label`)}
                  cellDataGetter={({ rowData }) => rowData.collectionYear}
                  dataKey='collectionYear'
                  headerRenderer={headerRenderer}
                  width={columnWidth}
                />
                <Column
                  label={intl.get(`perspectives.${perspectiveID}.properties.source.label`)}
                  cellDataGetter={({ rowData }) => rowData.source}
                  dataKey='source'
                  headerRenderer={headerRenderer}
                  cellRenderer={sourceRenderer}
                  width={columnWidth}
                />
              </Table>
            )}
          </AutoSizer>}
      </div>
    )
  }

DagreGraph = ({ data, height, width, style, className }) => {
  const ref = useRef(null);
  const graphRef = useRef(null)

  useEffect(() => {
    if (!graphRef.current) {

      const tooltip = new G6.Tooltip({
        getContent(e) {
          const nodeType = e.item.getType();
          const outDiv = document.createElement('div');
          if (nodeType === 'node') {
            const model = e.item.getModel();
            outDiv.innerHTML = getTooltipContent(model);
            return outDiv
          }
        },
        itemTypes: ['node'],
        className: 'dagre-node-tooltip',
      });

      const graph = new G6.Graph({
        container: ref.current,
        width: width ?? 0,
        height: height ?? 0,
        fitView: true,
        layout: {
          type: 'dagre',
          rankdir: 'LR',
          nodesepFunc: () => 0,
          ranksepFunc: () => 0,
          controlPoints: true,
        },
        modes: {
          default: [],
        },
        plugins: [tooltip],
        defaultNode: {
          type: 'circle',
          size: 15,
          style: {
            opacity: 0.8,
            stroke: 'rgb(192, 192, 192)',
            fill: '#0079f2',
            lineWidth: 0.7,
          },
          labelCfg,
        },
        defaultEdge: {
          type: 'spline',
          style: {
            stroke: '#55c1e9',
            lineWidth: 1.2,
            opacity: 0.4,
            endArrow: {
              opacity: 0.9,
              shadowBlur: 0,
              path: G6.Arrow.triangle(2, 3, 0),
              fill: "#55c1e9",
              stroke: "#55c1e9",
            },
          },
        },
      });

      graph.read(data);
      graphRef.current = graph;
    }
  }, []);

  const [initialData] = useState(data);

  useEffect(() => {
    if (graphRef.current && initialData !== data) {
      graphRef.current.data(data);
      graphRef.current.render();
    }
  }, [data]);


  return (
    <div style={{ position: 'relative', textAlign: 'left' }} className={styles.dagreGraphContainer}>
      <AutoSizer>
        {({ height: calculatedHeight, width: calculatedWidth }) => {
          if ((isNil(height) || isNil(width)) && graphRef.current) {
            graphRef.current.changeSize(width ?? calculatedWidth, height ?? calculatedHeight);
            graphRef.current.render();
          }
          return (<div style={style} className={className} ref={ref} />);
        }}
      </AutoSizer>
    </div>
  );

}

Template = (args) => {
  const [, setWidth] = useState(400)
  const [columnWidth, setColumnWidth] = useState(200)
  const sample = [
    {
      title: 'title name',
      account: 'account',
      date: 'June 1st',
      hash: 'ca13sdfad232334',
      certificate: (
        <IconButton aria-label="delete" size="medium">
          <LockIcon fontSize="inherit" />
        </IconButton>
      )
    },
    {
      title: 'title name',
      account: 'account',
      date: 'June 1st',
      hash: 'ca13sdfad232334',
      certificate: (
        <IconButton aria-label="delete" size="medium">
          <LockIcon fontSize="inherit" />
        </IconButton>
      )
    },
    {
      title: 'title name',
      account: 'account',
      date: 'June 1st',
      hash: 'ca13sdfad232334',
      certificate: (
        <IconButton aria-label="delete" size="medium">
          <LockIcon fontSize="inherit" />
        </IconButton>
      )
    }
  ]
  const rows = []

  for (let i = 0; i < 100; i += 1) {
    const randomSelection = sample[Math.floor(Math.random() * sample.length)]
    rows.push(randomSelection)
  }
  const columns = [
    {
      width: columnWidth,
      label: 'Titulo',
      dataKey: 'title'
    },
    {
      width: columnWidth,
      label: 'Cuenta',
      dataKey: 'account',
      numeric: true
    },
    {
      width: columnWidth,
      label: 'Fecha',
      dataKey: 'date'
    },
    {
      width: columnWidth,
      label: 'Hash',
      dataKey: 'hash'
    },
    {
      width: columnWidth,
      label: 'Certificado',
      dataKey: 'certificate'
    }
  ]

  const onResize = ({ width }) => {
    setWidth(width)
    let newColumnWidth = width / columns.length
    newColumnWidth = Math.max(100, 150)
    newColumnWidth = Math.min(200, 150)
    newColumnWidth = Math.floor(newColumnWidth)
    setColumnWidth(newColumnWidth)
    setWidth(Math.min(width, columnWidth * columns.length))
  }

  return (
    <AutoSizer onResize={onResize}>
      {({ height, width }) => (
        <InfiniteRegistryTableLoader
          hasNextPage
          isNextPageLoading
          rows={rows}
          height={height || 500}
          width={width}
          loadNextPage={(e) => console.log(e)}
          columns={columns}
          rowHeight={48}
          headerHeight={48}
        />
      )}
    </AutoSizer>
  )
}

ItemList = ({
  isLoading,
  defibrillators,
  activeDef,
  fetchDefItems,
  filter,
  totalCount,
  page,
  search,
  setMapCenterCoords,
  setMapZoomParam
}) => {
  const classes = useStyles();
  const noData = !isLoading && !defibrillators.length;
  const showMessage =
    (isLoading && !defibrillators.length) || noData;
  const showHorizontalLoader =
    isLoading && !!defibrillators.length;
  let message;

  switch (true) {
    case isLoading:
      message = 'Завантаження...';
      break;
    case noData:
      message = 'Даних не знайдено...';
      break;
    default:
      message = '';
  }

  const cache = new CellMeasurerCache({
    fixedWidth: true,
    defaultHeight: 100
  });

  const handleScroll = event => {
    const { scrollHeight, scrollTop, clientHeight } = event;

    if (
      totalCount >= page &&
      scrollHeight - Math.ceil(scrollTop) <= clientHeight
    ) {
      fetchDefItems({ page, ...filter, ...search });
    }
  };

  // eslint-disable-next-line react/prop-types
  const rowRenderer = ({ key, index, style, parent }) => {
    return (
      <CellMeasurer //  dynamically calculates the height of every item
        key={key}
        cache={cache}
        parent={parent}
        columnIndex={0}
        rowIndex={index}
      >
        <DefItem
          styleParam={style}
          defItemInfo={defibrillators[index]}
        />
      </CellMeasurer>
    );
  };

  useEffect(() => {
    if (!defibrillators.length) {
      fetchDefItems();
    }
    return () => {
      defsCancelToken.cancel();
    };
    // eslint-disable-next-line
  }, []);

  useEffect(() => {
    if (activeDef) {
      const [lng, lat] = activeDef.location.coordinates;
      setMapCenterCoords({
        lng,
        lat
      });
      setMapZoomParam(BASE_ZOOM_VALUE);
    }
    // eslint-disable-next-line
  }, [activeDef]);

  return (
    <div className={classes.listOuterStyle}>
      <AutoSizer>
        {({ width, height }) => {
          //  AutoSizer expands list to width and height of parent automatically
          return (
            <List
              onScroll={handleScroll}
              className={classes.listStyle}
              width={width}
              height={height}
              deferredMeasurementCache={cache}
              rowCount={defibrillators.length}
              rowHeight={cache.rowHeight}
              rowRenderer={rowRenderer}
              overscanRowCount={10}
            />
          );
        }}
      </AutoSizer>
      {showMessage && <InfoMessage>{message}</InfoMessage>}
      {showHorizontalLoader && <HorizontalLoader />}
    </div>
  );
}

SearchInput = (props) => {
  const classes = useStyles();
  const world = useContext(WorldContext);

  const [results, setResults] = React.useState([]);

  // Force the search index to lazy load
  React.useEffect(() => {
    world.get(Path.root(), SearchIndexComponent);
  });

  const onClose = () => {
    setResults([]);
  };

  const onChange = (e) => {
    const search = world.get(SEARCH_INDEX_PATH, SearchIndexComponent);
    if (!search) {
      return;
    }

    setResults(search.search(e.target.value));
  };

  const onChoice = (e, path) => {
    e.preventDefault();
    setResults([]);
    props.onChoice(path);
  };

  const resultRenderer = ({index, key, style}) => {
    const {name, path} = results[index];

    return (
      <div key={key} style={style} className={classes.result}>
        <MaterialLink href="#" onClick={(e) => onChoice(e, path)}>
          {name}
        </MaterialLink>
      </div>
    );
  };

  return (
    <ClickAwayListener onClickAway={onClose}>
      <div className={`${classes.root} ${props.className || ''}`}>
        <SearchIcon className={classes.searchIcon} />
        <InputBase
            className={classes.input}
            onChange={onChange}
            placerholder="Search..." />
        {props.onGeolocate &&
            <Divider className={classes.divider} />
        }
        {props.onGeolocate &&
            <IconButton
                size="small"
                className={classes.iconButton}
                onClick={props.onGeolocate}>
              <LocationSearchingIcon />
            </IconButton>
        }
        <Paper
            className={
              `${classes.resultsContainer} `
                  + (results.length === 0 ? 'hide' : '')
            }
            elevation={3}>
          <AutoSizer disableHeight>
            {({width}) => (
              <List
                  className={classes.resultsList}
                  rowCount={results.length}
                  rowHeight={RESULT_HEIGHT}
                  rowRenderer={resultRenderer}
                  width={width}
                  height={Math.min(RESULTS_MAX_HEIGHT, RESULT_HEIGHT * results.length)}
              />
            )}
          </AutoSizer>
        </Paper>
      </div>
    </ClickAwayListener>
  );
}