How to use the react-virtualized.AutoSizer function in react-virtualized

To help you get started, we’ve selected a few react-virtualized examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github scaleflex / filerobot-uploader / dist / components / VirtualizedImagesGrid.js View on Github external
_this._renderAutoSizer = function (_ref3) {
      var height = _ref3.height,
          scrollTop = _ref3.scrollTop;

      _this._height = height;
      _this._scrollTop = scrollTop;

      var overscanByPixels = _this.state.overscanByPixels;


      return React.createElement(
        _reactVirtualized.AutoSizer,
        {
          ref: function ref(node) {
            return _this.child = node;
          },
          disableHeight: true,
          height: height,
          onResize: _this._onResize,
          overscanByPixels: overscanByPixels,
          scrollTop: _this._scrollTop
        },
        _this._renderMasonry
      );
    };
github bvaughn / react-virtualized-select / dist / commonjs / VirtualizedSelect / VirtualizedSelect.js View on Github external
var maxHeight = _props.maxHeight;
      var optionHeight = _props.optionHeight;
      var optionRenderer = _props.optionRenderer;

      var focusedOptionIndex = options.indexOf(focusedOption);
      var height = Math.min(maxHeight, options.length * optionHeight);
      var innerRowRenderer = optionRenderer || this._optionRenderer;

      function wrappedRowRenderer(index) {
        var option = options[index];

        return innerRowRenderer({ focusedOption: focusedOption, focusedOptionIndex: focusedOptionIndex, focusOption: focusOption, labelKey: labelKey, option: option, options: options, selectValue: selectValue, valueArray: valueArray });
      }

      return _react2.default.createElement(
        _reactVirtualized.AutoSizer,
        { disableHeight: true },
        function (_ref2) {
          var width = _ref2.width;
          return _react2.default.createElement(_reactVirtualized.VirtualScroll, {
            className: 'VirtualSelectGrid',
            height: height,
            rowHeight: optionHeight,
            rowRenderer: wrappedRowRenderer,
            rowsCount: options.length,
            scrollToIndex: focusedOptionIndex,
            width: width
          });
        }
      );
    }
  }, {
github oknosoft / metadata.js / packages / metadata-react-ui / DataField / VirtualizedSelect.js View on Github external
focusedOptionIndex,
          focusOption,
          key,
          labelKey,
          onSelect,
          option,
          optionIndex: index,
          options,
          selectValue: onSelect,
          style,
          valueArray
        });
      }

      return _react2.default.createElement(
        _reactVirtualized.AutoSizer,
        { disableHeight: true },
        ({ width }) => _react2.default.createElement(_reactVirtualized.List, _extends({
          className: "VirtualSelectGrid",
          height: height,
          ref: ref => this._virtualScroll = ref,
          rowCount: options.length,
          rowHeight: ({ index }) => this._getOptionHeight({
            option: options[index]
          }),
          rowRenderer: wrappedRowRenderer,
          scrollToIndex: focusedOptionIndex,
          width: width
        }, listProps))
      );
    }, this._optionRenderer = ({ focusedOption, focusOption, key, labelKey, option, selectValue, style }) => {
      const className = ['VirtualizedSelectOption'];