@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
778 lines • 161 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var accessibleAccordion_1 = require("../../../controls/accessibleAccordion");
var AdaptiveCardHost_1 = require("../../../AdaptiveCardHost");
var FileTypeIcon_1 = require("../../../FileTypeIcon");
var carousel_1 = require("../../../controls/carousel");
var ControlsTestEnhancedThemeProvider_1 = require("./ControlsTestEnhancedThemeProvider");
var DateTimePicker_1 = require("../../../DateTimePicker");
var Button_1 = require("@fluentui/react/lib/Button");
var Dialog_1 = require("@fluentui/react/lib/Dialog");
var sp_core_library_1 = require("@microsoft/sp-core-library");
var DocumentCard_1 = require("@fluentui/react/lib/DocumentCard");
var Dropdown_1 = require("@fluentui/react/lib/Dropdown");
var react_northstar_1 = require("@fluentui/react-northstar");
var ListView_1 = require("../../../ListView");
var peoplepicker_1 = require("../../../controls/peoplepicker");
//#region Import FluentUI Controls
var react_1 = require("@fluentui/react");
var TaxonomyPicker_1 = require("../../../TaxonomyPicker");
var treeView_1 = require("../../../controls/treeView");
var accordion_1 = require("../../../controls/accordion");
var ChartControl_1 = require("../../../ChartControl");
var FieldCollectionData_1 = require("../../../FieldCollectionData");
var DateTimeUtilities_1 = require("@fluentui/react/lib/DateTimeUtilities");
var EAppHostname_1 = require("../../../controls/userPicker/constants/EAppHostname");
var FilterBar_1 = require("../../../FilterBar");
//#endregion
var Utilities_1 = require("../../../Utilities");
var Image_1 = require("@fluentui/react/lib/Image");
var Label_1 = require("@fluentui/react/lib/Label");
var Link_1 = require("@fluentui/react/lib/Link");
var Map_1 = require("../../../Map");
var ModernAudio_1 = require("../../../ModernAudio");
var Panel_1 = require("@fluentui/react/lib/Panel");
var SecurityTrimmedControl_1 = require("../../../SecurityTrimmedControl");
var sp_http_1 = require("@microsoft/sp-http");
var sp_page_context_1 = require("@microsoft/sp-page-context");
var ModernTaxonomyPicker_1 = require("../../../ModernTaxonomyPicker");
var Stack_1 = require("@fluentui/react/lib/Stack");
var termActions_1 = require("../../../controls/taxonomyPicker/termActions");
var taxonomyPicker_1 = require("../../../controls/taxonomyPicker");
var TestCalendarControl_1 = tslib_1.__importDefault(require("./TestCalendarControl"));
var Text_1 = require("@fluentui/react/lib/Text");
var TextField_1 = require("@fluentui/react/lib/TextField");
var TimeDisplayControlType_1 = require("../../../controls/dateTimePicker/TimeDisplayControlType");
var variantThemeProvider_1 = require("../../../controls/variantThemeProvider");
var dashboard_1 = require("../../../controls/dashboard");
var WorldMap_1 = tslib_1.__importDefault(require("./WorldMap"));
var lodash_1 = require("lodash");
var Styling_1 = require("@fluentui/react/lib/Styling");
var sp_1 = require("@pnp/sp");
var ControlsTest_module_scss_1 = tslib_1.__importDefault(require("./ControlsTest.module.scss"));
//#endregion
//#region Import PnP Controls
var AdaptiveCardDesignerHost = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../AdaptiveCardDesignerHost')); }).then(function (module) { return ({ default: module.AdaptiveCardDesignerHost }); }); });
var AdaptiveCardHost = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../AdaptiveCardHost')); }).then(function (module) { return ({ default: module.AdaptiveCardHost }); }); });
var AnimatedDialog = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../AnimatedDialog')); }).then(function (module) { return ({ default: module.AnimatedDialog }); }); });
var ChartControl = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../ChartControl')); }).then(function (module) { return ({ default: module.ChartControl }); }); });
var AccessibleAccordion = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../controls/accessibleAccordion')); }).then(function (module) { return ({ default: module.Accordion }); }); });
var Carousel = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../controls/carousel')); }).then(function (module) { return ({ default: module.Carousel }); }); });
var ContentTypePicker = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../controls/contentTypePicker')); }).then(function (module) { return ({ default: module.ContentTypePicker }); }); });
var Dashboard = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../controls/dashboard')); }).then(function (module) { return ({ default: module.Dashboard }); }); });
var DynamicForm = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../controls/dynamicForm')); }).then(function (module) { return ({ default: module.DynamicForm }); }); });
var IconPicker = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../controls/iconPicker')); }).then(function (module) { return ({ default: module.IconPicker }); }); });
var ComboBoxListItemPicker = React.lazy(function () {
return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../controls/listItemPicker/ComboBoxListItemPicker')); }).then(function (module) { return ({ default: module.ComboBoxListItemPicker }); });
});
var LivePersona = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../controls/LivePersona')); }).then(function (module) { return ({ default: module.LivePersona }); }); });
var LocationPicker = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../controls/locationPicker/LocationPicker')); }).then(function (module) { return ({ default: module.LocationPicker }); }); });
var ModernTaxonomyPicker = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../controls/modernTaxonomyPicker/ModernTaxonomyPicker')); }).then(function (module) { return ({ default: module.ModernTaxonomyPicker }); }); });
var MonacoEditor = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../controls/monacoEditor')); }).then(function (module) { return ({ default: module.MonacoEditor }); }); });
var MyTeams = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../controls/MyTeams')); }).then(function (module) { return ({ default: module.MyTeams }); }); });
var Pagination = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../controls/pagination')); }).then(function (module) { return ({ default: module.Pagination }); }); });
var PeoplePicker = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../controls/peoplepicker')); }).then(function (module) { return ({ default: module.PeoplePicker }); }); });
var ProgressStepsIndicator = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../controls/ProgressStepsIndicator')); }).then(function (module) { return ({ default: module.ProgressStepsIndicator }); }); });
var SitePicker = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../controls/sitePicker/SitePicker')); }).then(function (module) { return ({ default: module.SitePicker }); }); });
var Toolbar = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../controls/toolbar')); }).then(function (module) { return ({ default: module.Toolbar }); }); });
var TreeView = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../controls/treeView')); }).then(function (module) { return ({ default: module.TreeView }); }); });
var UploadFiles = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../controls/uploadFiles')); }).then(function (module) { return ({ default: module.UploadFiles }); }); });
var VariantThemeProvider = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../controls/variantThemeProvider')); }).then(function (module) { return ({ default: module.VariantThemeProvider }); }); });
var ViewPicker = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../ViewPicker')); }).then(function (module) { return ({ default: module.ViewPicker }); }); });
var DateTimePicker = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../DateTimePicker')); }).then(function (module) { return ({ default: module.DateTimePicker }); }); });
var DragDropFiles = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../DragDropFiles')); }).then(function (module) { return ({ default: module.DragDropFiles }); }); });
var EnhancedThemeProvider = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../EnhancedThemeProvider')); }).then(function (module) { return ({ default: module.EnhancedThemeProvider }); }); });
var FieldCollectionData = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../FieldCollectionData')); }).then(function (module) { return ({ default: module.FieldCollectionData }); }); });
var FieldPicker = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../FieldPicker')); }).then(function (module) { return ({ default: module.FieldPicker }); }); });
var FilePicker = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../FilePicker')); }).then(function (module) { return ({ default: module.FilePicker }); }); });
var FileTypeIcon = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../FileTypeIcon')); }).then(function (module) { return ({ default: module.FileTypeIcon }); }); });
var FolderExplorer = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../FolderExplorer')); }).then(function (module) { return ({ default: module.FolderExplorer }); }); });
var FolderPicker = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../FolderPicker')); }).then(function (module) { return ({ default: module.FolderPicker }); }); });
var GridLayout = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../GridLayout')); }).then(function (module) { return ({ default: module.GridLayout }); }); });
var HoverReactionsBar = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../HoverReactionsBar')); }).then(function (module) { return ({ default: module.HoverReactionsBar }); }); });
var GroupPicker = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../GroupPicker')); }).then(function (module) { return ({ default: module.GroupPicker }); }); });
var IFrameDialog = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../IFrameDialog')); }).then(function (module) { return ({ default: module.IFrameDialog }); }); });
var IFramePanel = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../IFramePanel')); }).then(function (module) { return ({ default: module.IFramePanel }); }); });
var ImagePicker = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../ImagePicker')); }).then(function (module) { return ({ default: module.ImagePicker }); }); });
var ListItemAttachments = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../ListItemAttachments')); }).then(function (module) { return ({ default: module.ListItemAttachments }); }); });
var ListItemComments = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../ListItemComments')); }).then(function (module) { return ({ default: module.ListItemComments }); }); });
var ListItemPicker = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../ListItemPicker')); }).then(function (module) { return ({ default: module.ListItemPicker }); }); });
var ListPicker = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../ListPicker')); }).then(function (module) { return ({ default: module.ListPicker }); }); });
var ListToolbar = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../controls/ListToolbar')); }).then(function (module) { return ({ default: module.ListToolbar }); }); });
var ListView = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../ListView')); }).then(function (module) { return ({ default: module.ListView }); }); });
var Map = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../Map')); }).then(function (module) { return ({ default: module.Map }); }); });
var ModernAudio = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../ModernAudio')); }).then(function (module) { return ({ default: module.ModernAudio }); }); });
var TaxonomyTree = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../ModernTaxonomyPicker')); }).then(function (module) { return ({ default: module.TaxonomyTree }); }); });
var Placeholder = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../Placeholder')); }).then(function (module) { return ({ default: module.Placeholder }); }); });
var Progress = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../Progress')); }).then(function (module) { return ({ default: module.Progress }); }); });
var RichText = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../RichText')); }).then(function (module) { return ({ default: module.RichText }); }); });
var ShareDialog = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../ShareDialog')); }).then(function (module) { return ({ default: module.ShareDialog }); }); });
var SecurityTrimmedControl = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../SecurityTrimmedControl')); }).then(function (module) { return ({ default: module.SecurityTrimmedControl }); }); });
var SiteBreadcrumb = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../SiteBreadcrumb')); }).then(function (module) { return ({ default: module.SiteBreadcrumb }); }); });
var TaxonomyPicker = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../TaxonomyPicker')); }).then(function (module) { return ({ default: module.TaxonomyPicker }); }); });
var TeamChannelPicker = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../TeamChannelPicker')); }).then(function (module) { return ({ default: module.TeamChannelPicker }); }); });
var TeamPicker = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../TeamPicker')); }).then(function (module) { return ({ default: module.TeamPicker }); }); });
var TermSetNavigation = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../TermSetNavigation')); }).then(function (module) { return ({ default: module.TermSetNavigation }); }); });
var WebPartTitle = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../WebPartTitle')); }).then(function (module) { return ({ default: module.WebPartTitle }); }); });
var TestControl = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('./TestControl')); }).then(function (module) { return ({ default: module.TestControl }); }); });
var UserPicker = React.lazy(function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('../../../UserPicker')); }).then(function (module) { return ({ default: module.UserPicker }); }); });
// Used to render document card
/**
* The sample data below was randomly generated (except for the title). It is used by the grid layout
*/
var sampleGridData = [{
thumbnail: "https://pixabay.com/get/57e9dd474952a414f1dc8460825668204022dfe05555754d742e7bd6/hot-air-balloons-1984308_640.jpg",
title: "Adventures in SPFx",
name: "Perry Losselyong",
profileImageSrc: "https://robohash.org/blanditiisadlabore.png?size=50x50&set=set1",
location: "SharePoint",
activity: "3/13/2019"
}, {
thumbnail: "https://pixabay.com/get/55e8d5474a52ad14f1dc8460825668204022dfe05555754d742d79d0/autumn-3804001_640.jpg",
title: "The Wild, Untold Story of SharePoint!",
name: "Ebonee Gallyhaock",
profileImageSrc: "https://robohash.org/delectusetcorporis.bmp?size=50x50&set=set1",
location: "SharePoint",
activity: "6/29/2019"
}, {
thumbnail: "https://pixabay.com/get/57e8dd454c50ac14f1dc8460825668204022dfe05555754d742c72d7/log-cabin-1886620_640.jpg",
title: "Low Code Solutions: PowerApps",
name: "Seward Keith",
profileImageSrc: "https://robohash.org/asperioresautquasi.jpg?size=50x50&set=set1",
location: "PowerApps",
activity: "12/31/2018"
}, {
thumbnail: "https://pixabay.com/get/55e3d445495aa514f1dc8460825668204022dfe05555754d742b7dd5/portrait-3316389_640.jpg",
title: "Not Your Grandpa's SharePoint",
name: "Sharona Selkirk",
profileImageSrc: "https://robohash.org/velnammolestiae.png?size=50x50&set=set1",
location: "SharePoint",
activity: "11/20/2018"
}, {
thumbnail: "https://pixabay.com/get/57e6dd474352ae14f1dc8460825668204022dfe05555754d742a7ed1/faucet-1684902_640.jpg",
title: "Get with the Flow",
name: "Boyce Batstone",
profileImageSrc: "https://robohash.org/nulladistinctiomollitia.jpg?size=50x50&set=set1",
location: "Flow",
activity: "5/26/2019"
}];
var sampleItems = [
{
Langue: { Nom: 'Français' },
Question: 'Charger des fichiers et dossiers',
Reponse: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
},
{
Langue: { Nom: 'Français' },
Question: 'Enregistrer un fichier',
Reponse: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
},
{
Langue: { Nom: 'Français' },
Question: 'Troisième exemple',
Reponse: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
},
{
Langue: { Nom: 'Français' },
Question: 'Quatrième exemple',
Reponse: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
},
{
Langue: { Nom: 'Français' },
Question: 'Cinquième exemple',
Reponse: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
},
{
Langue: { Nom: 'Français' },
Question: 'Sixième exemple',
Reponse: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
}
];
var toolbarFilters = [{
id: "filter1",
title: "filter1"
},
{
id: "filter2",
title: "filter2"
}];
var filterBarFilters = [{
label: "Title",
value: "title 1"
},
{
label: "Field1",
value: "value 1"
},
{
label: "Title",
value: "title 2"
},
{
label: "Field2",
value: "Field 2"
},
{
label: "Field3",
value: "Field 3"
},
{
label: "Field4",
value: "Field 4-1"
},
{
label: "Field4",
value: "Field 4-2"
}];
/**
* Component that can be used to test out the React controls from this project
*/
var ControlsTest = /** @class */ (function (_super) {
tslib_1.__extends(ControlsTest, _super);
function ControlsTest(props) {
var _this = _super.call(this, props) || this;
_this.spTaxonomyService = new ModernTaxonomyPicker_1.SPTaxonomyService(_this.props.context);
_this.theme = window["__themeState__"].theme;
_this.pickerStylesSingle = {
root: {
width: "100%",
borderRadius: 0,
marginTop: 0,
},
input: {
width: "100%",
backgroundColor: _this.theme.white,
},
text: {
borderStyle: "solid",
width: "100%",
borderWidth: 1,
backgroundColor: _this.theme.white,
borderRadius: 0,
borderColor: _this.theme.neutralQuaternaryAlt,
":focus": {
borderStyle: "solid",
borderWidth: 1,
borderColor: _this.theme.themePrimary,
},
":hover": {
borderStyle: "solid",
borderWidth: 1,
borderColor: _this.theme.themePrimary,
},
":after": {
borderWidth: 0,
borderRadius: 0,
},
},
};
_this.onSelectedChannel = function (teamsId, channelId) {
alert("TeamId: ".concat(teamsId, "\n ChannelId: ").concat(channelId, "\n"));
console.log("TeamsId", teamsId);
console.log("ChannelId", channelId);
};
/**
* Static array for carousel control example.
*/
_this.carouselElements = [
React.createElement("div", { id: "1", key: "1" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a mattis libero, nec consectetur neque. Suspendisse potenti. Fusce ultrices faucibus consequat. Suspendisse ex diam, ullamcorper sit amet justo ac, accumsan congue neque. Vestibulum aliquam mauris non justo convallis, id molestie purus sodales. Maecenas scelerisque aliquet turpis, ac efficitur ex iaculis et. Vivamus finibus mi eget urna tempor, sed porta justo tempus. Vestibulum et lectus magna. Integer ante felis, ullamcorper venenatis lectus ac, vulputate pharetra magna. Morbi eget nisl tempus, viverra diam ac, mollis tortor. Nam odio ex, viverra bibendum mauris vehicula, consequat suscipit ligula. Nunc sed ultrices augue, eu tincidunt diam."),
React.createElement("div", { id: "2", key: "2" }, "Quisque metus lectus, facilisis id consectetur ac, hendrerit eget quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut faucibus posuere felis vel efficitur. Maecenas et massa in sem tincidunt finibus. Duis sit amet bibendum nisi. Vestibulum pretium pretium libero, vel tincidunt sem vestibulum sed. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin quam lorem, venenatis id bibendum id, tempus eu nibh. Sed tristique semper ligula, vitae gravida diam gravida vitae. Donec eget posuere mauris, pharetra semper lectus."),
React.createElement("div", { id: "3", key: "3" }, "Pellentesque tempor et leo at tincidunt. Vivamus et leo sed eros vehicula mollis vitae in dui. Duis posuere sodales enim ut ultricies. Cras in venenatis nulla. Ut sed neque dignissim, sollicitudin tellus convallis, placerat leo. Aliquam vestibulum, leo pharetra sollicitudin pretium, ipsum nisl tincidunt orci, in molestie ipsum dui et mi. Praesent aliquam accumsan risus sed bibendum. Cras consectetur elementum turpis, a mollis velit gravida sit amet. Praesent non augue cursus, varius justo at, molestie lorem. Nulla cursus tellus quis odio congue elementum. Vivamus sit amet quam nec lectus hendrerit blandit. Duis ac condimentum sem. Morbi hendrerit elementum purus, non facilisis arcu bibendum vitae. Vivamus commodo tristique euismod."),
React.createElement("div", { id: "4", key: "4" }, "Proin semper egestas porta. Nullam risus nisl, auctor ac hendrerit in, dapibus quis ex. Quisque vitae nisi quam. Etiam vel sapien ut libero ornare rhoncus nec vestibulum dolor. Curabitur lacinia aliquam arcu. Proin ultrices risus velit, in vehicula tellus vehicula at. Sed ultrices et felis fringilla ultricies."),
React.createElement("div", { id: "5", key: "5" }, "Donec orci lorem, imperdiet eu nisi sit amet, condimentum scelerisque tortor. Etiam nec lacinia dui. Duis non turpis neque. Sed pellentesque a erat et accumsan. Pellentesque elit odio, elementum nec placerat nec, ornare in tortor. Suspendisse gravida magna maximus mollis facilisis. Duis odio libero, finibus ac suscipit sed, aliquam et diam. Aenean posuere lacus ex. Donec dapibus, sem ac luctus ultrices, justo libero tempor eros, vitae lacinia ex ante non dolor. Curabitur condimentum, ligula id pharetra dictum, libero libero ullamcorper nunc, eu blandit sem arcu ut felis. Nullam lacinia dapibus auctor.")
];
_this.skypeCheckIcon = { iconName: 'SkypeCheck' };
_this.treeitems = [
{
key: "R1",
label: "Root",
subLabel: "This is a sub label for node",
iconProps: _this.skypeCheckIcon,
actions: [{
title: "Get item",
iconProps: {
iconName: 'Warning',
style: {
color: 'salmon',
},
},
id: "GetItem",
actionCallback: function (treeItem) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
return tslib_1.__generator(this, function (_a) {
console.log(treeItem);
return [2 /*return*/];
});
}); }
}],
children: [
{
key: "1",
label: "Parent 1",
selectable: false,
children: [
{
key: "3",
label: "Child 1",
subLabel: "This is a sub label for node",
actions: [{
title: "Share",
iconProps: {
iconName: 'Share'
},
id: "GetItem",
actionCallback: function (treeItem) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
return tslib_1.__generator(this, function (_a) {
console.log(treeItem);
return [2 /*return*/];
});
}); }
}],
children: [
{
key: "gc1",
label: "Grand Child 1",
actions: [{
title: "Get Grand Child item",
iconProps: {
iconName: 'Mail'
},
id: "GetItem",
actionCallback: function (treeItem) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
return tslib_1.__generator(this, function (_a) {
console.log(treeItem);
return [2 /*return*/];
});
}); }
}]
}
]
},
{
key: "4",
label: "Child 2",
iconProps: _this.skypeCheckIcon
}
]
},
{
key: "2",
label: "Parent 2"
},
{
key: "5",
label: "Parent 3",
disabled: true
},
{
key: "6",
label: "Parent 4",
selectable: true
}
]
},
{
key: "R2",
label: "Root 2",
children: [
{
key: "8",
label: "Parent 5"
},
{
key: "9",
label: "Parent 6"
},
{
key: "10",
label: "Parent 7"
},
{
key: "11",
label: "Parent 8"
}
]
},
{
key: "R3",
label: "Root 3",
children: [
{
key: "12",
label: "Parent 9"
},
{
key: "13",
label: "Parent 10",
children: [
{
key: "gc3",
label: "Child of Parent 10",
children: [
{
key: "ggc1",
label: "Grandchild of Parent 10"
}
]
},
]
},
{
key: "14",
label: "Parent 11"
},
{
key: "15",
label: "Parent 12"
}
]
}
];
_this.progressSteps = [
{ id: 0, title: "Step 1", description: "Step 1 Description" },
{ id: 1, title: "Step 2", description: "Step 2 Description" },
{ id: 3, title: "Step 3", description: "Step 3 Description" },
{ id: 4, title: "Step 4", description: "Step 4 Description" },
{ id: 5, title: "Step 5", description: "Step 5 Description" },
{ id: 6, title: "Step 6", description: "Step 6 Description" },
];
_this.divRefAddReaction = React.createRef();
_this.termSetId = "8ed8c9ea-7052-4c1d-a4d7-b9c10bffea6f";
/**
* Method that retrieves files from drag and drop
* @param files
*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
_this._getDropFiles = function (files) {
for (var i = 0; i < files.length; i++) {
console.log("File name: " + files[i].name);
console.log("Folder Path: " + files[i].fullPath);
}
};
/**
*
*Method that retrieves the selected terms from the taxonomy picker and sets state
* @private
* @param {IPickerTerms} terms
* @memberof ControlsTest
*/
_this.onServicePickerChange = function (terms) {
_this.setState({
initialValues: terms
});
// console.log("serviceTerms", terms);
};
/**
* Method that retrieves the selected terms from the taxonomy picker
* @param terms
*/
_this._onTaxPickerChange = function (terms) {
_this.setState({
initialValues: terms,
errorMessage: terms.length > 0 ? '' : 'This field is required'
});
console.log("Terms:", terms);
};
/**
* Method that retrieves the selected date/time from the DateTime picker
* @param dateTimeValue
*/
_this._onDateTimePickerChange = function (dateTimeValue) {
_this.setState({ dateTimeValue: dateTimeValue });
console.log("Selected Date/Time:", dateTimeValue.toLocaleString());
};
/**
* Selected lists change event
* @param lists
*/
_this.onListPickerChange = function (lists) {
console.log("Lists:", lists);
_this.setState({
selectedList: typeof lists === "string" ? lists : lists.pop()
});
};
/**
* Selected View change event
* @param views
*/
_this.onViewPickerChange = function (views) {
console.log("Views:", views);
};
/**
* Deletes second item from the list
*/
_this.deleteItem = function () {
var items = _this.state.items;
if (items.length >= 2) {
items.splice(1, 1);
_this.setState({
items: items
});
}
};
/**
* Method that retrieves the selected items from People Picker
* @param items
*/
_this._getPeoplePickerItems = function (items) {
_this.setState({
authorEmails: items
});
console.log('Items:', items);
};
_this.defaultUsers = function () {
var users = ["Communications", "melliott@americanveterinarygroup.com"];
return users;
};
/**
* Triggers element change for the carousel example.
*/
_this.triggerNextElement = function (index) {
var canMovePrev = index > 0;
var canMoveNext = index < _this.carouselElements.length - 1;
var nextElement = _this.carouselElements[index];
setTimeout(function () {
_this.setState({
canMovePrev: canMovePrev,
canMoveNext: canMoveNext,
currentCarouselElement: nextElement
});
}, 500);
};
_this._onFilePickerSave = function (filePickerResult) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
var i, item, fileResultContent;
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0:
if (!(filePickerResult && filePickerResult.length > 0)) return [3 /*break*/, 5];
i = 0;
_a.label = 1;
case 1:
if (!(i < filePickerResult.length)) return [3 /*break*/, 4];
item = filePickerResult[i];
return [4 /*yield*/, item.downloadFileContent()];
case 2:
fileResultContent = _a.sent();
console.log(fileResultContent);
item.fileSize = fileResultContent.size;
_a.label = 3;
case 3:
i++;
return [3 /*break*/, 1];
case 4:
this.setState({ filePickerResult: filePickerResult });
_a.label = 5;
case 5: return [2 /*return*/];
}
});
}); };
_this.onToolbarSelectedFiltersChange = function (filterIds) {
_this.setState({
selectedFilters: filterIds
});
};
_this.toggleToolbarFilter = function (filterId) {
_this.setState(function (_a) {
var selectedFilters = _a.selectedFilters;
if (selectedFilters.includes(filterId)) {
return { selectedFilters: selectedFilters.filter(function (f) { return f !== filterId; }) };
}
else {
return { selectedFilters: tslib_1.__spreadArray(tslib_1.__spreadArray([], selectedFilters, true), [filterId], false) };
}
});
};
_this.rootFolder = {
Name: "Site",
ServerRelativeUrl: _this.props.context.pageContext.web.serverRelativeUrl
};
_this._onFolderSelect = function (folder) {
console.log('selected folder', folder);
};
_this.addFilter = function () {
var number = Math.floor(Math.random() * 10);
var i = { label: "Field".concat(number), value: "Field ".concat(number) };
_this.setState({
filters: tslib_1.__spreadArray(tslib_1.__spreadArray([], _this.state.filters, true), [i], false)
});
};
_this.onClearFilters = function () {
console.log("Cleared all filters");
_this.setState({ filters: [] });
};
_this.onRemoveFilter = function (label, value) {
console.log("Cleared ".concat(label, " ").concat(value));
var itm = _this.state.filters.find(function (i) { return i.label === label && i.value === value; });
if (itm) {
var index = _this.state.filters.indexOf(itm);
_this.state.filters.splice(index, 1);
_this.setState({
filters: tslib_1.__spreadArray([], _this.state.filters, true)
});
}
};
_this._onFileClick = function (file) {
console.log('file click', file);
};
_this._onRenderGridItem = function (item, _finalSize, isCompact) {
var previewProps = {
previewImages: [
{
previewImageSrc: item.thumbnail,
imageFit: Image_1.ImageFit.cover,
height: 130
}
]
};
return React.createElement("div", { "data-is-focusable": true, role: "listitem", "aria-label": item.title },
React.createElement(DocumentCard_1.DocumentCard, { type: isCompact ? DocumentCard_1.DocumentCardType.compact : DocumentCard_1.DocumentCardType.normal, onClick: function (ev) { return alert("You clicked on a grid item"); }, style: { maxWidth: _finalSize.width } },
React.createElement(DocumentCard_1.DocumentCardPreview, tslib_1.__assign({}, previewProps)),
!isCompact && React.createElement(DocumentCard_1.DocumentCardLocation, { location: item.location }),
React.createElement("div", null,
React.createElement(DocumentCard_1.DocumentCardTitle, { title: item.title, shouldTruncate: true }),
React.createElement(DocumentCard_1.DocumentCardActivity, { activity: item.activity, people: [{ name: item.name, profileImageSrc: item.profileImageSrc }] }))));
};
_this.getRandomCollectionFieldData = function () {
var result = [];
for (var i = 1; i < 16; i++) {
var sampleDate = new Date();
sampleDate.setDate(sampleDate.getDate() + i);
result.push({
"Field1": "String".concat(i),
"Field2": i,
"Field3": "https://pnp.github.io/",
"Field4": true,
"Field5": null,
"Field6": { key: "choice 1", text: "choice 1" },
"Field7": [{ key: "choice 1", text: "choice 1" }, { key: "choice 2", text: "choice 2" }],
"Field8": sampleDate
});
}
return result;
};
_this.state = {
imgSize: FileTypeIcon_1.ImageSize.small,
items: [],
iFrameDialogOpened: false,
iFramePanelOpened: false,
initialValues: [],
authorEmails: [],
selectedList: null,
progressActions: _this._initProgressActions(),
dateTimeValue: new Date(),
richTextValue: null,
canMovePrev: false,
canMoveNext: true,
currentCarouselElement: _this.carouselElements[0],
comboBoxListItemPickerListId: '0ffa51d7-4ad1-4f04-8cfe-98209905d6da',
comboBoxListItemPickerIds: [{ Id: 1, Title: '111' }],
treeViewSelectedKeys: ['gc1', 'gc3'],
showAnimatedDialog: false,
showCustomisedAnimatedDialog: false,
showSuccessDialog: false,
showErrorDialog: false,
selectedTeam: [],
selectedTeamChannels: [],
selectedGroups: [],
errorMessage: "This field is required",
selectedFilters: ["filter1"],
termStoreInfo: null,
termSetInfo: null,
testTerms: [],
filters: tslib_1.__spreadArray([], filterBarFilters, true),
selectedUrlImagePicker: "",
isOpenHoverReactionBar: false,
isOpenShareDialog: false,
};
_this.peoplePickerContext = {
absoluteUrl: _this.props.context.pageContext.web.absoluteUrl,
msGraphClientFactory: _this.props.context.msGraphClientFactory,
spHttpClient: _this.props.context.spHttpClient
};
_this._onIconSizeChange = _this._onIconSizeChange.bind(_this);
_this._onConfigure = _this._onConfigure.bind(_this);
_this._startProgress = _this._startProgress.bind(_this);
_this.onServicePickerChange = _this.onServicePickerChange.bind(_this);
return _this;
}
/**
* React componentDidMount lifecycle hook
*/
ControlsTest.prototype.componentDidMount = function () {
return tslib_1.__awaiter(this, void 0, void 0, function () {
var restApi, response, items, _a;
var _b;
return tslib_1.__generator(this, function (_c) {
switch (_c.label) {
case 0:
restApi = "".concat(this.props.context.pageContext.web.absoluteUrl, "/_api/web/GetFolderByServerRelativeUrl('Shared%20Documents')/files?$expand=ListItemAllFields");
return [4 /*yield*/, this.props.context.spHttpClient.get(restApi, sp_http_1.SPHttpClient.configurations.v1)];
case 1:
response = _c.sent();
return [4 /*yield*/, response.json()];
case 2:
items = _c.sent();
sp_1.sp.setup({
spfxContext: this.props.context
});
_a = this.setState;
_b = {
items: items.value ? items.value : []
};
return [4 /*yield*/, this.spTaxonomyService.getTermStoreInfo()];
case 3:
_a.apply(this, [(_b.termStoreInfo = _c.sent(),
_b)]);
return [2 /*return*/];
}
});
});
};
ControlsTest.prototype.componentDidUpdate = function (prevProps, prevState, snapshot) {
return tslib_1.__awaiter(this, void 0, void 0, function () {
var termsSet, error_1;
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0:
if (!(prevProps.controlVisibility !== this.props.controlVisibility)) return [3 /*break*/, 5];
if (!this.props.controlVisibility.TaxonomyTree) return [3 /*break*/, 5];
termsSet = null;
_a.label = 1;
case 1:
_a.trys.push([1, 3, , 4]);
return [4 /*yield*/, this.spTaxonomyService.getTermSetInfo(sp_core_library_1.Guid.parse(this.termSetId))];
case 2:
termsSet = _a.sent();
return [3 /*break*/, 4];
case 3:
error_1 = _a.sent();
return [3 /*break*/, 4];
case 4:
this.setState({
termSetInfo: termsSet
});
_a.label = 5;
case 5: return [2 /*return*/];
}
});
});
};
/**
* Event handler when changing the icon size in the dropdown
* @param element
*/
ControlsTest.prototype._onIconSizeChange = function (element) {
this.setState({
imgSize: parseInt(element.key.toString())
});
};
/**
* Open the property pane
*/
ControlsTest.prototype._onConfigure = function () {
this.props.context.propertyPane.open();
};
/**
* Method that retrieves the selected items in the list view
* @p