office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 6.57 kB
JavaScript
module.exports = "import * as React from 'react';\nimport { CommandBar, IContextualMenuItem, MarqueeSelection } from '../../../../index';\nimport { Check } from '../../../../components/Check/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 canSelect?: string;\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 this._onCanSelectChanged = this._onCanSelectChanged.bind(this);\n this._canSelectItem = this._canSelectItem.bind(this);\n\n this.state = {\n items: createListItems(ITEM_COUNT),\n selection: new Selection({ onSelectionChanged: this._onSelectionChanged }),\n selectionMode: SelectionMode.multiple,\n canSelect: 'all'\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 <MarqueeSelection selection={ selection } isEnabled={ selectionMode === SelectionMode.multiple } >\n <SelectionZone\n selection={ selection }\n selectionMode={ selectionMode }\n onItemInvoked={ (item) => alert('item invoked: ' + item.name) }>\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 </MarqueeSelection>\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(ev: React.MouseEvent<HTMLElement>, menuItem: IContextualMenuItem) {\n this.setState({\n selectionMode: menuItem.data\n });\n }\n\n private _onCanSelectChanged(ev: React.MouseEvent<HTMLElement>, menuItem: IContextualMenuItem) {\n let canSelectItem = (menuItem.data === 'vowels') ? this._canSelectItem : undefined;\n let newSelection = new Selection({ onSelectionChanged: this._onSelectionChanged, canSelectItem: canSelectItem });\n newSelection.setItems(this.state.items as IObjectWithKey[], false);\n this.setState({\n selection: newSelection,\n canSelect: (menuItem.data === 'vowels') ? 'vowels' : 'all'\n });\n }\n\n private _canSelectItem(item: any): boolean {\n return item.name && (item.name.indexOf('a') === 0 || item.name.indexOf('e') === 0 || item.name.indexOf('i') === 0 || item.name.indexOf('o') === 0 || item.name.indexOf('u') === 0);\n }\n\n private _getCommandItems(): IContextualMenuItem[] {\n let { selectionMode, canSelect } = 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 key: 'allowCanSelect',\n name: 'Choose selectable items',\n items: [\n {\n key: 'all',\n name: 'All items',\n canCheck: true,\n isChecked: canSelect === 'all',\n onClick: this._onCanSelectChanged,\n data: 'all'\n },\n {\n key: 'a',\n name: 'Names starting with vowels',\n canCheck: true,\n isChecked: canSelect === 'vowels',\n onClick: this._onCanSelectChanged,\n data: 'vowels'\n }\n ]\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 <div className='ms-SelectionItemExample-check' data-selection-toggle={ true } >\n <Check isChecked={ isSelected } />\n </div>\n ) }\n <span className='ms-SelectionItemExample-name'>\n { item.name }\n </span>\n </div>\n );\n }\n}\n";