forgeplus-react/node_modules/react-virtualized/dist/es/Collection/Collection.example.js

import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import PropTypes from 'prop-types';
import * as React from 'react';
import Immutable from 'immutable';
import { ContentBox, ContentBoxHeader, ContentBoxParagraph } from '../demo/ContentBox';
import { LabeledInput, InputRow } from '../demo/LabeledInput';
import AutoSizer from '../AutoSizer';
import Collection from './Collection';
import styles from './Collection.example.css'; // Defines a pattern of sizes and positions for a range of 10 rotating cells
// These cells cover an area of 600 (wide) x 400 (tall)

var GUTTER_SIZE = 3;
var CELL_WIDTH = 75;

var CollectionExample =
/*#__PURE__*/
function (_React$PureComponent) {
  _inherits(CollectionExample, _React$PureComponent);

  function CollectionExample(props, context) {
    var _this;

    _classCallCheck(this, CollectionExample);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(CollectionExample).call(this, props, context));
    _this.state = {
      cellCount: context.list.size,
      columnCount: _this._getColumnCount(context.list.size),
      height: 300,
      horizontalOverscanSize: 0,
      scrollToCell: undefined,
      showScrollingPlaceholder: false,
      verticalOverscanSize: 0
    };
    _this._columnYMap = [];
    _this._cellRenderer = _this._cellRenderer.bind(_assertThisInitialized(_this));
    _this._cellSizeAndPositionGetter = _this._cellSizeAndPositionGetter.bind(_assertThisInitialized(_this));
    _this._noContentRenderer = _this._noContentRenderer.bind(_assertThisInitialized(_this));
    _this._onCellCountChange = _this._onCellCountChange.bind(_assertThisInitialized(_this));
    _this._onHeightChange = _this._onHeightChange.bind(_assertThisInitialized(_this));
    _this._onHorizontalOverscanSizeChange = _this._onHorizontalOverscanSizeChange.bind(_assertThisInitialized(_this));
    _this._onScrollToCellChange = _this._onScrollToCellChange.bind(_assertThisInitialized(_this));
    _this._onVerticalOverscanSizeChange = _this._onVerticalOverscanSizeChange.bind(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(CollectionExample, [{
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$state = this.state,
          cellCount = _this$state.cellCount,
          height = _this$state.height,
          horizontalOverscanSize = _this$state.horizontalOverscanSize,
          scrollToCell = _this$state.scrollToCell,
          showScrollingPlaceholder = _this$state.showScrollingPlaceholder,
          verticalOverscanSize = _this$state.verticalOverscanSize;
      return React.createElement(ContentBox, null, React.createElement(ContentBoxHeader, {
        text: "Collection",
        sourceLink: "https://github.com/bvaughn/react-virtualized/blob/master/source/Collection/Collection.example.js",
        docsLink: "https://github.com/bvaughn/react-virtualized/blob/master/docs/Collection.md"
      }), React.createElement(ContentBoxParagraph, null, "Renders scattered or non-linear data. Unlike ", React.createElement("code", null, "Grid"), ", which renders checkerboard data, ", React.createElement("code", null, "Collection"), " can render arbitrarily positioned- even overlapping- data."), React.createElement(ContentBoxParagraph, null, React.createElement("label", {
        className: styles.checkboxLabel
      }, React.createElement("input", {
        "aria-label": "Show placeholder while scrolling?",
        checked: showScrollingPlaceholder,
        className: styles.checkbox,
        type: "checkbox",
        onChange: function onChange(event) {
          return _this2.setState({
            showScrollingPlaceholder: event.target.checked
          });
        }
      }), "Show placeholder while scrolling?")), React.createElement(InputRow, null, React.createElement(LabeledInput, {
        label: "Num cells",
        name: "cellCount",
        onChange: this._onCellCountChange,
        value: cellCount
      }), React.createElement(LabeledInput, {
        label: "Scroll to cell",
        name: "onScrollToCell",
        placeholder: "Index...",
        onChange: this._onScrollToCellChange,
        value: scrollToCell || ''
      }), React.createElement(LabeledInput, {
        label: "Height",
        name: "height",
        onChange: this._onHeightChange,
        value: height
      }), React.createElement(LabeledInput, {
        label: "Horizontal Overscan",
        name: "horizontalOverscanSize",
        onChange: this._onHorizontalOverscanSizeChange,
        value: horizontalOverscanSize
      }), React.createElement(LabeledInput, {
        label: "Vertical Overscan",
        name: "verticalOverscanSize",
        onChange: this._onVerticalOverscanSizeChange,
        value: verticalOverscanSize
      })), React.createElement(AutoSizer, {
        disableHeight: true
      }, function (_ref) {
        var width = _ref.width;
        return React.createElement(Collection, {
          cellCount: cellCount,
          cellRenderer: _this2._cellRenderer,
          cellSizeAndPositionGetter: _this2._cellSizeAndPositionGetter,
          className: styles.collection,
          height: height,
          horizontalOverscanSize: horizontalOverscanSize,
          noContentRenderer: _this2._noContentRenderer,
          scrollToCell: scrollToCell,
          verticalOverscanSize: verticalOverscanSize,
          width: width
        });
      }));
    }
  }, {
    key: "_cellRenderer",
    value: function _cellRenderer(_ref2) {
      var index = _ref2.index,
          isScrolling = _ref2.isScrolling,
          key = _ref2.key,
          style = _ref2.style;
      var list = this.context.list;
      var showScrollingPlaceholder = this.state.showScrollingPlaceholder;
      var datum = list.get(index % list.size); // Customize style

      style.backgroundColor = datum.color;
      return React.createElement("div", {
        className: styles.cell,
        key: key,
        style: style
      }, showScrollingPlaceholder && isScrolling ? '...' : index);
    }
  }, {
    key: "_cellSizeAndPositionGetter",
    value: function _cellSizeAndPositionGetter(_ref3) {
      var index = _ref3.index;
      var list = this.context.list;
      var columnCount = this.state.columnCount;
      var columnPosition = index % (columnCount || 1);
      var datum = list.get(index % list.size); // Poor man's Masonry layout; columns won't all line up equally with the bottom.

      var height = datum.size;
      var width = CELL_WIDTH;
      var x = columnPosition * (GUTTER_SIZE + width);
      var y = this._columnYMap[columnPosition] || 0;
      this._columnYMap[columnPosition] = y + height + GUTTER_SIZE;
      return {
        height: height,
        width: width,
        x: x,
        y: y
      };
    }
  }, {
    key: "_getColumnCount",
    value: function _getColumnCount(cellCount) {
      return Math.round(Math.sqrt(cellCount));
    }
  }, {
    key: "_onHorizontalOverscanSizeChange",
    value: function _onHorizontalOverscanSizeChange(event) {
      var horizontalOverscanSize = parseInt(event.target.value, 10) || 0;
      this.setState({
        horizontalOverscanSize: horizontalOverscanSize
      });
    }
  }, {
    key: "_noContentRenderer",
    value: function _noContentRenderer() {
      return React.createElement("div", {
        className: styles.noCells
      }, "No cells");
    }
  }, {
    key: "_onCellCountChange",
    value: function _onCellCountChange(event) {
      var cellCount = parseInt(event.target.value, 10) || 0;
      this._columnYMap = [];
      this.setState({
        cellCount: cellCount,
        columnCount: this._getColumnCount(cellCount)
      });
    }
  }, {
    key: "_onHeightChange",
    value: function _onHeightChange(event) {
      var height = parseInt(event.target.value, 10) || 0;
      this.setState({
        height: height
      });
    }
  }, {
    key: "_onScrollToCellChange",
    value: function _onScrollToCellChange(event) {
      var cellCount = this.state.cellCount;
      var scrollToCell = Math.min(cellCount - 1, parseInt(event.target.value, 10));

      if (isNaN(scrollToCell)) {
        scrollToCell = undefined;
      }

      this.setState({
        scrollToCell: scrollToCell
      });
    }
  }, {
    key: "_onVerticalOverscanSizeChange",
    value: function _onVerticalOverscanSizeChange(event) {
      var verticalOverscanSize = parseInt(event.target.value, 10) || 0;
      this.setState({
        verticalOverscanSize: verticalOverscanSize
      });
    }
  }]);

  return CollectionExample;
}(React.PureComponent);

_defineProperty(CollectionExample, "contextTypes", {
  list: PropTypes.instanceOf(Immutable.List).isRequired
});

export { CollectionExample as default };