text: import * as tslib_1 from "tslib";
  import * as React from 'react';
  import { TextField } from 'office-ui-fabric-react/lib/TextField';
  import { DetailsList, DetailsListLayoutMode, Selection } from 'office-ui-fabric-react/lib/DetailsList';
  import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection';
  import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
  import { createRef } from 'office-ui-fabric-react/lib/Utilities';
  var _items = [];
  var _columns = [
      {
          key: 'column1',
          name: 'Name',
          fieldName: 'name',
          minWidth: 100,
          maxWidth: 200,
          isResizable: true,
          ariaLabel: 'Operations for name'
      },
      {
          key: 'column2',
          name: 'Value',
          fieldName: 'value',
          minWidth: 100,
          maxWidth: 200,
          isResizable: true,
          ariaLabel: 'Operations for value'
      }
  ];
  var DetailsListBasicExample = /** @class */ (function (_super) {
      tslib_1.__extends(DetailsListBasicExample, _super);
      function DetailsListBasicExample(props) {
          var _this = _super.call(this, props) || this;
          _this._detailsList = createRef();
          _this._onChange = function (ev, text) {
              _this.setState({ items: text ? _items.filter(function (i) { return i.name.toLowerCase().indexOf(text) > -1; }) : _items });
          };
          _this._onShowItemIndexInViewChanged = function (event, checked) {
              _this.setState({
                  showItemIndexInView: checked
              });
          };
          // Populate with items for demos.
          if (_items.length === 0) {
              for (var i = 0; i < 200; i++) {
                  _items.push({
                      key: i,
                      name: 'Item ' + i,
                      value: i
                  });
              }
          }
          _this._selection = new Selection({
              onSelectionChanged: function () { return _this.setState({ selectionDetails: _this._getSelectionDetails() }); }
          });
          _this.state = {
              items: _items,
              selectionDetails: _this._getSelectionDetails(),
              showItemIndexInView: false
          };
          return _this;
      }
      DetailsListBasicExample.prototype.render = function () {
          var _a = this.state, items = _a.items, selectionDetails = _a.selectionDetails;
          return (React.createElement("div", null,
              React.createElement("div", null, selectionDetails),
              React.createElement("div", null,
                  React.createElement(Checkbox, { label: "Show index of the first item in view when unmounting", checked: this.state.showItemIndexInView, onChange: this._onShowItemIndexInViewChanged })),
              React.createElement(TextField, { label: "Filter by name:", onChange: this._onChange }),
              React.createElement(MarqueeSelection, { selection: this._selection },
                  React.createElement(DetailsList, { componentRef: this._detailsList, items: items, columns: _columns, setKey: "set", layoutMode: DetailsListLayoutMode.fixedColumns, selection: this._selection, selectionPreservedOnEmptyClick: true, ariaLabelForSelectionColumn: "Toggle selection", ariaLabelForSelectAllCheckbox: "Toggle selection for all items", onItemInvoked: this._onItemInvoked }))));
      };
      DetailsListBasicExample.prototype.componentWillUnmount = function () {
          if (this.state.showItemIndexInView) {
              var itemIndexInView = this._detailsList.current.getStartItemIndexInView();
              alert('unmounting, getting first item index that was in view: ' + itemIndexInView);
          }
      };
      DetailsListBasicExample.prototype._getSelectionDetails = function () {
          var selectionCount = this._selection.getSelectedCount();
          switch (selectionCount) {
              case 0:
                  return 'No items selected';
              case 1:
                  return '1 item selected: ' + this._selection.getSelection()[0].name;
              default:
                  return selectionCount + " items selected";
          }
      };
      DetailsListBasicExample.prototype._onItemInvoked = function (item) {
          alert("Item invoked: " + item.name);
      };
      return DetailsListBasicExample;
  }(React.Component));
  export { DetailsListBasicExample };
  //# sourceMappingURL=DetailsList.Basic.Example.js.map