office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 5.11 kB
JavaScript
define([], function() { return "import * as React from 'react';\r\nimport {\r\n DocumentCard,\r\n IDocumentCardPreviewProps,\r\n ImageFit\r\n} from '../../../../index';\r\n\r\nimport { DocumentCardActions } from '../../../../components/DocumentCard/DocumentCardActions';\r\nimport { DocumentCardActivity } from '../../../../components/DocumentCard/DocumentCardActivity';\r\nimport { DocumentCardLocation } from '../../../../components/DocumentCard/DocumentCardLocation';\r\nimport { DocumentCardPreview } from '../../../../components/DocumentCard/DocumentCardPreview';\r\nimport { DocumentCardTitle } from '../../../../components/DocumentCard/DocumentCardTitle';\r\n\r\nexport class DocumentCardCompleteExample extends React.Component<any, any> {\r\n public render() {\r\n let previewProps: IDocumentCardPreviewProps = {\r\n getOverflowDocumentCountText: (overflowCount: number) => `+${ overflowCount } more`,\r\n previewImages: [\r\n {\r\n name: '2016 Conference Presentation',\r\n url: 'http://bing.com',\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 name: 'New Contoso Collaboration for Conference Presentation Draft',\r\n url: 'http://bing.com',\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 name: 'Spec Sheet for design',\r\n url: 'http://bing.com',\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 name: 'Contoso Marketing Presentation',\r\n url: 'http://bing.com',\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 name: 'Notes from Ignite conference',\r\n url: 'http://bing.com',\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 name: 'FY17 Cost Projections',\r\n url: 'http://bing.com',\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 };\r\n\r\n return (\r\n <DocumentCard\r\n onClick={ () => { console.log('You clicked the card.'); } }\r\n >\r\n <DocumentCardPreview { ...previewProps }/>\r\n <DocumentCardLocation location='Marketing Documents' locationHref='http://microsoft.com' ariaLabel='Location, Marketing Documents'/>\r\n <DocumentCardTitle title='6 files were uploaded'/>\r\n <DocumentCardActivity\r\n activity='Created Feb 23, 2016'\r\n people={\r\n [\r\n { name: 'Annie Lindqvist', profileImageSrc: 'images/persona-female.png' },\r\n { name: 'Roko Kolar', profileImageSrc: '', initials: 'JH' },\r\n { name: 'Greta Lundberg', profileImageSrc: 'images/persona-female.png' }\r\n ]\r\n }\r\n />\r\n <DocumentCardActions\r\n actions={\r\n [\r\n {\r\n icon: 'Share',\r\n onClick: (ev: any) => {\r\n console.log('You clicked the share action.');\r\n ev.preventDefault();\r\n ev.stopPropagation();\r\n },\r\n ariaLabel: 'share action'\r\n },\r\n {\r\n icon: 'Pin',\r\n onClick: (ev: any) => {\r\n console.log('You clicked the pin action.');\r\n ev.preventDefault();\r\n ev.stopPropagation();\r\n },\r\n ariaLabel: 'pin action'\r\n },\r\n {\r\n icon: 'Ringer',\r\n onClick: (ev: any) => {\r\n console.log('You clicked the ringer action.');\r\n ev.preventDefault();\r\n ev.stopPropagation();\r\n },\r\n ariaLabel: 'ringer action'\r\n },\r\n ]\r\n }\r\n views={ 432 }\r\n />\r\n </DocumentCard>\r\n );\r\n }\r\n\r\n}\r\n"; });