office-ui-fabric-react/lib/demo/pages/PickersPage/examples/Picker.CustomResult.Example.tsx.js

Reusable React components for building experiences for Office 365.

module.exports = "import * as React from 'react';\nimport {\n  IDocumentCardActionsProps,\n  IDocumentCardPreviewProps,\n  IDocumentCardProps,\n  IDocumentCardTitleProps,\n  IDocumentCardActivityProps,\n  DocumentCard,\n  DocumentCardActions,\n  DocumentCardActivity,\n  DocumentCardLocation,\n  DocumentCardPreview,\n  DocumentCardTitle,\n  SelectionZone,\n  FocusZone,\n  ImageFit,\n  IBasePickerProps,\n  Persona,\n  PersonaSize,\n  BaseAutoFill\n} from '../../../../index';\nimport {\n  BasePicker\n} from '../../../../components/pickers/BasePicker';\nimport {\n  IPickerItemProps\n} from '../../../../components/pickers/PickerItem.Props';\nimport './Picker.CustomResult.Example.scss';\n\nexport interface IPeoplePickerExampleState {\n  contextualMenuVisible?: boolean;\n  contextualMenuTarget?: HTMLElement;\n}\n\nexport interface IFullDocumentCardProps {\n  documentCardProps?: IDocumentCardProps;\n  documentActionsProps?: IDocumentCardActionsProps;\n  documentPreviewProps?: IDocumentCardPreviewProps;\n  documentActivityProps?: IDocumentCardActivityProps;\n  documentTitleProps?: IDocumentCardTitleProps;\n}\n\nexport interface IDocumentPickerProps extends IBasePickerProps<IFullDocumentCardProps> {\n}\n\nconst data: IFullDocumentCardProps[] = [\n  {\n    documentPreviewProps: {\n      previewImages: [\n        {\n          previewImageSrc: 'dist/document-preview.png',\n          iconSrc: 'dist/icon-ppt.png',\n          imageFit: ImageFit.cover,\n          width: 318,\n          height: 196,\n          accentColor: '#ce4b1f'\n        }\n      ]\n    },\n    documentCardProps: {},\n    documentActionsProps: {\n      actions:\n      [\n        {\n          icon: 'Share', onClick: (ev: any) => {\n            console.log('You clicked the share action.');\n            ev.preventDefault();\n            ev.stopPropagation();\n          }\n        },\n        {\n          icon: 'Pin', onClick: (ev: any) => {\n            console.log('You clicked the pin action.');\n            ev.preventDefault();\n            ev.stopPropagation();\n          }\n        },\n        {\n          icon: 'Ringer', onClick: (ev: any) => {\n            console.log('You clicked the Ringer action.');\n            ev.preventDefault();\n            ev.stopPropagation();\n          }\n        },\n      ]\n    },\n    documentActivityProps: {\n      activity: 'Created Feb 23, 2016',\n      people:\n      [\n        { name: 'Kat Larrson', profileImageSrc: 'dist/avatar-kat.png' },\n        { name: 'Josh Hancock', profileImageSrc: '', initials: 'JH' },\n        { name: 'Tina Dasani', profileImageSrc: 'dist/avatar-kat.png' }\n      ]\n    },\n    documentTitleProps: {\n      title: 'Document1',\n      shouldTruncate: true\n    }\n  },\n  {\n    documentPreviewProps: {\n      previewImages: [\n        {\n          previewImageSrc: 'dist/document-preview.png',\n          iconSrc: 'dist/icon-ppt.png',\n          imageFit: ImageFit.cover,\n          width: 318,\n          height: 196,\n          accentColor: '#ce4b1f'\n        }\n      ]\n    },\n    documentCardProps: {},\n    documentActionsProps: {\n      actions:\n      [\n        {\n          icon: 'Share', onClick: (ev: any) => {\n            console.log('You clicked the share action.');\n            ev.preventDefault();\n            ev.stopPropagation();\n          }\n        },\n        {\n          icon: 'Pin', onClick: (ev: any) => {\n            console.log('You clicked the pin action.');\n            ev.preventDefault();\n            ev.stopPropagation();\n          }\n        },\n        {\n          icon: 'Ringer', onClick: (ev: any) => {\n            console.log('You clicked the Ringer action.');\n            ev.preventDefault();\n            ev.stopPropagation();\n          }\n        },\n      ]\n    },\n    documentActivityProps: {\n      activity: 'Created Feb 23, 2016',\n      people:\n      [\n        { name: 'Kat Larrson', profileImageSrc: 'dist/avatar-kat.png' },\n        { name: 'Josh Hancock', profileImageSrc: '', initials: 'JH' },\n        { name: 'Tina Dasani', profileImageSrc: 'dist/avatar-kat.png' }\n      ]\n    },\n    documentTitleProps: {\n      title: 'Document2',\n      shouldTruncate: true\n    }\n  },\n  {\n    documentPreviewProps: {\n      previewImages: [\n        {\n          previewImageSrc: 'dist/document-preview2.png',\n          iconSrc: 'dist/icon-ppt.png',\n          imageFit: ImageFit.cover,\n          width: 318,\n          height: 196,\n          accentColor: '#ce4b1f'\n        }\n      ]\n    },\n    documentCardProps: {},\n    documentActionsProps: {\n      actions:\n      [\n        {\n          icon: 'Share', onClick: (ev: any) => {\n            console.log('You clicked the share action.');\n            ev.preventDefault();\n            ev.stopPropagation();\n          }\n        },\n        {\n          icon: 'Pin', onClick: (ev: any) => {\n            console.log('You clicked the pin action.');\n            ev.preventDefault();\n            ev.stopPropagation();\n          }\n        },\n        {\n          icon: 'Ringer', onClick: (ev: any) => {\n            console.log('You clicked the Ringer action.');\n            ev.preventDefault();\n            ev.stopPropagation();\n          }\n        },\n      ]\n    },\n    documentActivityProps: {\n      activity: 'Created Feb 23, 2016',\n      people:\n      [\n        { name: 'Kat Larrson', profileImageSrc: 'dist/avatar-kat.png' },\n        { name: 'Josh Hancock', profileImageSrc: '', initials: 'JH' },\n        { name: 'Tina Dasani', profileImageSrc: 'dist/avatar-kat.png' }\n      ]\n    },\n    documentTitleProps: {\n      title: 'Document3',\n      shouldTruncate: true\n    }\n  },\n  {\n    documentPreviewProps: {\n      previewImages: [\n        {\n          previewImageSrc: 'dist/document-preview3.png',\n          iconSrc: 'dist/icon-ppt.png',\n          imageFit: ImageFit.cover,\n          width: 318,\n          height: 196,\n          accentColor: '#ce4b1f'\n        }\n      ]\n    },\n    documentCardProps: {},\n    documentActionsProps: {\n      actions:\n      [\n        {\n          icon: 'Share', onClick: (ev: any) => {\n            console.log('You clicked the share action.');\n            ev.preventDefault();\n            ev.stopPropagation();\n          }\n        },\n        {\n          icon: 'Pin', onClick: (ev: any) => {\n            console.log('You clicked the pin action.');\n            ev.preventDefault();\n            ev.stopPropagation();\n          }\n        },\n        {\n          icon: 'Ringer', onClick: (ev: any) => {\n            console.log('You clicked the Ringer action.');\n            ev.preventDefault();\n            ev.stopPropagation();\n          }\n        },\n      ]\n    },\n    documentActivityProps: {\n      activity: 'Created Feb 23, 2016',\n      people:\n      [\n        { name: 'Kat Larrson', profileImageSrc: 'dist/avatar-kat.png' },\n        { name: 'Josh Hancock', profileImageSrc: '', initials: 'JH' },\n        { name: 'Tina Dasani', profileImageSrc: 'dist/avatar-kat.png' }\n      ]\n    },\n    documentTitleProps: {\n      title: 'Document4',\n      shouldTruncate: true\n    }\n  }\n];\n\nexport const SuggestedDocumentItem: (documentProps: IFullDocumentCardProps) => JSX.Element = (documentProps: IFullDocumentCardProps) => {\n  return (<div> { documentProps.documentTitleProps.title } </div>);\n};\n\nexport const SuggestedBigItem: (documentProps: IFullDocumentCardProps) => JSX.Element = (documentProps: IFullDocumentCardProps) => {\n  let {\n    documentPreviewProps,\n    documentTitleProps\n  } = documentProps;\n  return (\n    <Persona\n      imageUrl={ documentPreviewProps.previewImages[0].previewImageSrc }\n      primaryText={ documentTitleProps.title }\n      size={ PersonaSize.small } />\n  );\n};\n\nexport const SelectedDocumentItem: (documentProps: IPickerItemProps<IFullDocumentCardProps>) => JSX.Element = (documentProps: IPickerItemProps<IFullDocumentCardProps>) => {\n  let {\n    documentActionsProps,\n    documentPreviewProps,\n    documentActivityProps,\n    documentTitleProps\n  } = documentProps.item;\n  let actions = [];\n  documentActionsProps.actions.forEach((action) => actions.push(action));\n  actions.push({\n    icon: 'Cancel', onClick: (ev: any) => { documentProps.onRemoveItem(); }\n  });\n\n  return (\n    <DocumentCard\n      onClick={ () => { console.log('You clicked the card.'); } }\n      >\n      <DocumentCardPreview { ...documentPreviewProps }/>\n      <DocumentCardLocation location='Marketing Documents' locationHref='http://microsoft.com' ariaLabel='Location, Marketing Documents'/>\n      <DocumentCardTitle { ...documentTitleProps }/>\n      <DocumentCardActivity { ...documentActivityProps }/>\n      <DocumentCardActions actions={ actions }/>\n    </DocumentCard>\n  );\n};\n\nexport class PickerCustomResultExample extends React.Component<any, IPeoplePickerExampleState> {\n  constructor() {\n    super();\n    this._onFilterChanged = this._onFilterChanged.bind(this);\n  }\n\n  public render() {\n    return (\n      <DocumentPicker\n        onRenderSuggestionsItem={ SuggestedBigItem }\n        onResolveSuggestions={ this._onFilterChanged }\n        onRenderItem={ SelectedDocumentItem }\n        getTextFromItem={(props: any) => props.documentTitleProps.title}\n        pickerSuggestionsProps={\n          {\n            suggestionsHeaderText: 'Suggested Documents',\n            noResultsFoundText: 'No Documents Found',\n            suggestionsItemClassName: 'ms-DocumentPicker-bigSuggestion'\n          }\n        }\n        />\n    );\n  }\n\n  private _onFilterChanged(filterText: string, items: IFullDocumentCardProps[]) {\n    return filterText ? data.filter(item => item.documentTitleProps.title.toLowerCase().indexOf(filterText.toLowerCase()) === 0).filter(item => !this._listContainsDocument(item, items)) : [];\n  }\n\n  private _listContainsDocument(document: IFullDocumentCardProps, items: IFullDocumentCardProps[]) {\n    if (!items || !items.length || items.length === 0) {\n      return false;\n    }\n    return items.filter(item => item.documentTitleProps.title === document.documentTitleProps.title).length > 0;\n  }\n}\n\nexport class DocumentPicker extends BasePicker<IFullDocumentCardProps, IDocumentPickerProps> {\n  public render() {\n    let { suggestedDisplayValue } = this.state;\n\n    return (\n      <div>\n        <div ref={ this._resolveRef('root') } className='ms-BasePicker' onKeyDown={ this.onKeyDown }>\n          <SelectionZone selection={ this.selection }>\n            <div className='ms-BasePicker-text'>\n              <BaseAutoFill\n                className='ms-BasePicker-input'\n                ref={ this._resolveRef('input') }\n                onFocus={ this.onInputFocus }\n                onInputValueChange={ this.onInputChange }\n                suggestedDisplayValue={ suggestedDisplayValue }\n                aria-activedescendant={ 'sug-' + this.suggestionStore.currentIndex }\n                aria-owns='suggestion-list'\n                aria-expanded='true'\n                aria-haspopup='true'\n                autoCapitalize='off'\n                autoComplete='off'\n                />\n            </div>\n          </SelectionZone>\n        </div>\n        <FocusZone ref={ this._resolveRef('focusZone') }>\n          { this.renderItems() }\n        </FocusZone>\n        { this.renderSuggestions() }\n      </div>\n    );\n  }\n\n  protected _onBackspace(ev: React.KeyboardEvent<HTMLElement>) {\n    // override the existing backspace method to not do anything because the list items appear below.\n  }\n}";