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

Reusable React components for building experiences for Office 365.

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