module.exports = "import * as React from 'react';\nimport { CommandBar, IContextualMenuItem } from '../../../../index';\nimport { Check } from '../../../../components/DetailsList/Check';\nimport {\n  IObjectWithKey,\n  ISelection,\n  Selection,\n  SelectionMode,\n  SelectionZone\n  } from '../../../../utilities/selection/index';\nimport { createListItems } from '../../../utilities/data';\n\nimport './Selection.Example.scss';\n\nconst ITEM_COUNT = 100;\n\nexport interface ISelectionBasicExampleState {\n  items?: any[];\n  selection?: ISelection;\n  selectionMode?: SelectionMode;\n}\n\nexport interface ISelectionItemExampleProps {\n  item?: any;\n  itemIndex?: number;\n  selection?: ISelection;\n  selectionMode?: SelectionMode;\n}\n\n/**\n * The SelectionBasicExample controls the selection state of all items\n */\nexport class SelectionBasicExample extends React.Component<any, ISelectionBasicExampleState> {\n  private _hasMounted: boolean;\n\n  constructor() {\n    super();\n\n    this._hasMounted = false;\n    this._onSelectionChanged = this._onSelectionChanged.bind(this);\n    this._onSelectionModeChanged = this._onSelectionModeChanged.bind(this);\n    this._onToggleSelectAll = this._onToggleSelectAll.bind(this);\n\n    this.state = {\n      items: createListItems(ITEM_COUNT),\n      selection: new Selection(this._onSelectionChanged),\n      selectionMode: SelectionMode.multiple,\n    };\n    this.state.selection.setItems(this.state.items as IObjectWithKey[], false);\n  }\n\n  public componentDidMount() {\n    this._hasMounted = true;\n  }\n\n  public render() {\n    let { items, selection, selectionMode } = this.state;\n\n    return (\n      <div className='ms-SelectionBasicExample'>\n        <CommandBar items={ this._getCommandItems() } />\n        <SelectionZone selection={ selection } selectionMode={ selectionMode } >\n          { items.map((item, index) => (\n              <SelectionItemExample\n                ref={ 'detailsGroup_' + index }\n                key={ item.key }\n                item={ item }\n                itemIndex={ index }\n                selectionMode={ selectionMode }\n                selection={ selection }\n                />\n            )) }\n        </SelectionZone>\n      </div>\n    );\n  }\n\n  private _onSelectionChanged() {\n    if (this._hasMounted) {\n      this.forceUpdate();\n    }\n  }\n\n  private _onToggleSelectAll() {\n    let { selection } = this.state;\n    selection.toggleAllSelected();\n  }\n\n  private _onSelectionModeChanged(menuItem: IContextualMenuItem) {\n    this.setState({\n      selectionMode: menuItem.data\n    });\n  }\n\n  private _getCommandItems(): IContextualMenuItem[] {\n    let { selectionMode } = this.state;\n\n    return [\n      {\n        key: 'selectionMode',\n        name: 'Selection Mode',\n        items: [\n          {\n            key: SelectionMode[SelectionMode.none],\n            name: 'None',\n            canCheck: true,\n            isChecked: selectionMode === SelectionMode.none,\n            onClick: this._onSelectionModeChanged,\n            data: SelectionMode.none\n\n          },\n          {\n            key: SelectionMode[SelectionMode.single],\n            name: 'Single select',\n            canCheck: true,\n            isChecked: selectionMode === SelectionMode.single,\n            onClick: this._onSelectionModeChanged,\n            data: SelectionMode.single\n          },\n          {\n            key: SelectionMode[SelectionMode.multiple],\n            name: 'Multi select',\n            canCheck: true,\n            isChecked: selectionMode === SelectionMode.multiple,\n            onClick: this._onSelectionModeChanged,\n            data: SelectionMode.multiple\n          },\n        ]\n      },\n      {\n        key: 'selectAll',\n        name: 'Select All',\n        icon: 'check',\n        onClick: this._onToggleSelectAll\n      }\n    ];\n  }\n}\n\n/**\n * The SelectionItemExample controls and displays the selection state of a single item\n */\nexport class SelectionItemExample extends React.Component<ISelectionItemExampleProps, {}> {\n  public render() {\n    let { item, itemIndex, selection, selectionMode } = this.props;\n    let isSelected = selection.isIndexSelected(itemIndex);\n\n    return (\n      <div className='ms-SelectionItemExample'  data-selection-index={ itemIndex }>\n          { (selectionMode !== SelectionMode.none) && (\n            <button className='ms-SelectionItemExample-check' data-selection-toggle={ true } >\n              <Check isChecked={ isSelected } />\n            </button>\n          ) }\n          <span className='ms-SelectionItemExample-name'>\n            { item.name }\n          </span>\n      </div>\n    );\n  }\n}\n";