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

Reusable React components for building experiences for Office 365.

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