office-ui-fabric-react/lib/demo/pages/MarqueeSelectionPage/examples/MarqueeSelection.Basic.Example.tsx.js

Reusable React components for building experiences for Office 365.

module.exports = "/* tslint:disable:no-unused-variable */\nimport * as React from 'react';\n/* tslint:enable:no-unused-variable */\n\nimport {\n  Checkbox,\n  Selection,\n  MarqueeSelection,\n  css\n} from '../../../../index';\nimport { createArray } from '../../../../utilities/array';\nimport './MarqueeSelection.Basic.Example.scss';\n\nconst PHOTOS = createArray(250, () => {\n  const randomWidth = 50 + Math.floor(Math.random() * 150);\n\n  return {\n    url: `http://placehold.it/${randomWidth}x100`,\n    width: randomWidth,\n    height: 100\n  };\n});\n\nexport interface IMarqueeSelectionBasicExampleState {\n  isMarqueeEnabled: boolean;\n}\n\nexport class MarqueeSelectionBasicExample extends React.Component<{}, IMarqueeSelectionBasicExampleState> {\n  private _selection: Selection;\n  private _isMounted: boolean;\n\n  constructor() {\n    super();\n\n    this.state = {\n      isMarqueeEnabled: true\n    };\n\n    this._selection = new Selection({ onSelectionChanged: () => {\n      if (this._isMounted) {\n        this.forceUpdate();\n      }\n    }});\n\n    this._selection.setItems(PHOTOS);\n  }\n\n  public componentDidMount() {\n    this._isMounted = true;\n  }\n\n  public render() {\n    return (\n      <MarqueeSelection selection={ this._selection } isEnabled={ this.state.isMarqueeEnabled }>\n        <Checkbox\n          label='Is marquee enabled'\n          defaultChecked={ true }\n          onChange={ (ev, isMarqueeEnabled) => this.setState({ isMarqueeEnabled }) } />\n        <p>Drag a rectangle around the items below to select them:</p>\n        <ul className='ms-MarqueeSelectionBasicExample-photoList'>\n          { PHOTOS.map((photo, index) => (\n            <div\n              key={ index }\n              className={ css('ms-MarqueeSelectionBasicExample-photoCell', {\n                'is-selected': this._selection.isIndexSelected(index)\n              }) }\n              data-is-focusable={ true }\n              data-selection-index={ index }\n              onClick={ () => console.log('clicked') }\n              style={ { width: photo.width, height: photo.height } }>\n              { index }\n            </div>\n          )) }\n        </ul>\n      </MarqueeSelection>\n    );\n  }\n\n}\n";