office-ui-fabric-react/lib/demo/pages/DocumentCardPage/examples/DocumentCard.Complete.Example.tsx.js

Reusable React components for building experiences for Office 365.

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