office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
287 lines (285 loc) • 13.7 kB
JavaScript
define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/DocumentCard", "office-ui-fabric-react/lib/Image", "office-ui-fabric-react/lib/Persona", "office-ui-fabric-react/lib/Checkbox", "office-ui-fabric-react/lib/Pickers", "../../../common/TestImages", "./Picker.CustomResult.Example.scss"], function (require, exports, tslib_1, React, DocumentCard_1, Image_1, Persona_1, Checkbox_1, Pickers_1, TestImages_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var data = [
{
documentPreviewProps: {
previewImages: [
{
previewImageSrc: TestImages_1.TestImages.documentPreview,
iconSrc: TestImages_1.TestImages.iconPpt,
imageFit: Image_1.ImageFit.cover,
width: 318,
height: 196,
accentColor: '#ce4b1f'
}
]
},
documentCardProps: {},
documentActionsProps: {
actions: [
{
icon: 'Share', onClick: function (ev) {
console.log('You clicked the share action.');
ev.preventDefault();
ev.stopPropagation();
}
},
{
icon: 'Pin', onClick: function (ev) {
console.log('You clicked the pin action.');
ev.preventDefault();
ev.stopPropagation();
}
},
{
icon: 'Ringer', onClick: function (ev) {
console.log('You clicked the Ringer action.');
ev.preventDefault();
ev.stopPropagation();
}
},
]
},
documentActivityProps: {
activity: 'Created Feb 23, 2016',
people: [
{ name: 'Kat Larrson', profileImageSrc: TestImages_1.TestImages.personaFemale },
{ name: 'Josh Hancock', profileImageSrc: '', initials: 'JH' },
{ name: 'Tina Dasani', profileImageSrc: TestImages_1.TestImages.personaFemale }
]
},
documentTitleProps: {
title: 'Document1',
shouldTruncate: true
}
},
{
documentPreviewProps: {
previewImages: [
{
previewImageSrc: TestImages_1.TestImages.documentPreview,
iconSrc: TestImages_1.TestImages.iconPpt,
imageFit: Image_1.ImageFit.cover,
width: 318,
height: 196,
accentColor: '#ce4b1f'
}
]
},
documentCardProps: {},
documentActionsProps: {
actions: [
{
icon: 'Share', onClick: function (ev) {
console.log('You clicked the share action.');
ev.preventDefault();
ev.stopPropagation();
}
},
{
icon: 'Pin', onClick: function (ev) {
console.log('You clicked the pin action.');
ev.preventDefault();
ev.stopPropagation();
}
},
{
icon: 'Ringer', onClick: function (ev) {
console.log('You clicked the Ringer action.');
ev.preventDefault();
ev.stopPropagation();
}
},
]
},
documentActivityProps: {
activity: 'Created Feb 23, 2016',
people: [
{ name: 'Kat Larrson', profileImageSrc: TestImages_1.TestImages.personaFemale },
{ name: 'Josh Hancock', profileImageSrc: '', initials: 'JH' },
{ name: 'Tina Dasani', profileImageSrc: TestImages_1.TestImages.personaFemale }
]
},
documentTitleProps: {
title: 'Document2',
shouldTruncate: true
}
},
{
documentPreviewProps: {
previewImages: [
{
previewImageSrc: TestImages_1.TestImages.documentPreviewTwo,
iconSrc: TestImages_1.TestImages.iconPpt,
imageFit: Image_1.ImageFit.cover,
width: 318,
height: 196,
accentColor: '#ce4b1f'
}
]
},
documentCardProps: {},
documentActionsProps: {
actions: [
{
icon: 'Share', onClick: function (ev) {
console.log('You clicked the share action.');
ev.preventDefault();
ev.stopPropagation();
}
},
{
icon: 'Pin', onClick: function (ev) {
console.log('You clicked the pin action.');
ev.preventDefault();
ev.stopPropagation();
}
},
{
icon: 'Ringer', onClick: function (ev) {
console.log('You clicked the Ringer action.');
ev.preventDefault();
ev.stopPropagation();
}
},
]
},
documentActivityProps: {
activity: 'Created Feb 23, 2016',
people: [
{ name: 'Kat Larrson', profileImageSrc: TestImages_1.TestImages.personaFemale },
{ name: 'Josh Hancock', profileImageSrc: '', initials: 'JH' },
{ name: 'Tina Dasani', profileImageSrc: TestImages_1.TestImages.personaFemale }
]
},
documentTitleProps: {
title: 'Document3',
shouldTruncate: true
}
},
{
documentPreviewProps: {
previewImages: [
{
previewImageSrc: TestImages_1.TestImages.documentPreviewThree,
iconSrc: TestImages_1.TestImages.iconPpt,
imageFit: Image_1.ImageFit.cover,
width: 318,
height: 196,
accentColor: '#ce4b1f'
}
]
},
documentCardProps: {},
documentActionsProps: {
actions: [
{
icon: 'Share', onClick: function (ev) {
console.log('You clicked the share action.');
ev.preventDefault();
ev.stopPropagation();
}
},
{
icon: 'Pin', onClick: function (ev) {
console.log('You clicked the pin action.');
ev.preventDefault();
ev.stopPropagation();
}
},
{
icon: 'Ringer', onClick: function (ev) {
console.log('You clicked the Ringer action.');
ev.preventDefault();
ev.stopPropagation();
}
},
]
},
documentActivityProps: {
activity: 'Created Feb 23, 2016',
people: [
{ name: 'Kat Larrson', profileImageSrc: TestImages_1.TestImages.personaFemale },
{ name: 'Josh Hancock', profileImageSrc: '', initials: 'JH' },
{ name: 'Tina Dasani', profileImageSrc: TestImages_1.TestImages.personaFemale }
]
},
documentTitleProps: {
title: 'Document4',
shouldTruncate: true
}
}
];
exports.SuggestedDocumentItem = function (documentProps) {
return (React.createElement("div", null,
" ",
documentProps.documentTitleProps.title,
" "));
};
exports.SuggestedBigItem = function (documentProps, itemProps) {
var documentPreviewProps = documentProps.documentPreviewProps, documentTitleProps = documentProps.documentTitleProps;
var onClick = itemProps.onClick;
return (React.createElement(Persona_1.Persona, { imageUrl: documentPreviewProps.previewImages[0].previewImageSrc, primaryText: documentTitleProps.title, size: Persona_1.PersonaSize.small }));
};
exports.SelectedDocumentItem = function (documentProps) {
var _a = documentProps.item, documentActionsProps = _a.documentActionsProps, documentPreviewProps = _a.documentPreviewProps, documentActivityProps = _a.documentActivityProps, documentTitleProps = _a.documentTitleProps;
var actions = [];
documentActionsProps.actions.forEach(function (action) { return actions.push(action); });
actions.push({
icon: 'Cancel', onClick: function (ev) { documentProps.onRemoveItem(); }
});
return (React.createElement(DocumentCard_1.DocumentCard, { onClick: function () { console.log('You clicked the card.'); } },
React.createElement(DocumentCard_1.DocumentCardPreview, tslib_1.__assign({}, documentPreviewProps)),
React.createElement(DocumentCard_1.DocumentCardLocation, { location: 'Marketing Documents', locationHref: 'http://microsoft.com', ariaLabel: 'Location, Marketing Documents' }),
React.createElement(DocumentCard_1.DocumentCardTitle, tslib_1.__assign({}, documentTitleProps)),
React.createElement(DocumentCard_1.DocumentCardActivity, tslib_1.__assign({}, documentActivityProps)),
React.createElement(DocumentCard_1.DocumentCardActions, { actions: actions })));
};
var PickerCustomResultExample = (function (_super) {
tslib_1.__extends(PickerCustomResultExample, _super);
function PickerCustomResultExample() {
var _this = _super.call(this) || this;
_this._onFilterChanged = _this._onFilterChanged.bind(_this);
_this.state = {
isPickerDisabled: false
};
return _this;
}
PickerCustomResultExample.prototype.render = function () {
return (React.createElement("div", null,
React.createElement(Checkbox_1.Checkbox, { label: 'Disable Document Picker', checked: this.state.isPickerDisabled, onChange: this._onDisabledButtonClick.bind(this) }),
React.createElement(DocumentPicker, { onRenderSuggestionsItem: exports.SuggestedBigItem, onResolveSuggestions: this._onFilterChanged, onRenderItem: exports.SelectedDocumentItem, getTextFromItem: function (props) { return props.documentTitleProps.title; }, pickerSuggestionsProps: {
suggestionsHeaderText: 'Suggested Documents',
noResultsFoundText: 'No Documents Found',
suggestionsItemClassName: 'ms-DocumentPicker-bigSuggestion'
}, disabled: this.state.isPickerDisabled })));
};
PickerCustomResultExample.prototype._onDisabledButtonClick = function () {
this.setState({
isPickerDisabled: !this.state.isPickerDisabled
});
};
PickerCustomResultExample.prototype._onFilterChanged = function (filterText, items) {
var _this = this;
return filterText ? data.filter(function (item) { return item.documentTitleProps.title.toLowerCase().indexOf(filterText.toLowerCase()) === 0; }).filter(function (item) { return !_this._listContainsDocument(item, items); }) : [];
};
PickerCustomResultExample.prototype._listContainsDocument = function (document, items) {
if (!items || !items.length || items.length === 0) {
return false;
}
return items.filter(function (item) { return item.documentTitleProps.title === document.documentTitleProps.title; }).length > 0;
};
return PickerCustomResultExample;
}(React.Component));
exports.PickerCustomResultExample = PickerCustomResultExample;
var DocumentPicker = (function (_super) {
tslib_1.__extends(DocumentPicker, _super);
function DocumentPicker() {
return _super !== null && _super.apply(this, arguments) || this;
}
return DocumentPicker;
}(Pickers_1.BasePickerListBelow));
exports.DocumentPicker = DocumentPicker;
});
//# sourceMappingURL=Picker.CustomResult.Example.js.map