import * as React from "react" ; import { IBasePickerStyles , ITag , } from "office-ui-fabric-react/lib/Pickers" ; import { Stack , } from "office-ui-fabric-react/lib/Stack" ; import { Text , } from "office-ui-fabric-react/lib/Text" ; import { TextField } from "office-ui-fabric-react/lib/TextField" ; import { DefaultButton , PrimaryButton } from "office-ui-fabric-react/lib/components/Button" ; import { DialogType , DialogFooter , IDialogContentProps } from "office-ui-fabric-react/lib/components/Dialog" ; import { IModalProps } from "office-ui-fabric-react/lib/Modal" ; import { Dropdown , IDropdownOption } from "office-ui-fabric-react/lib/components/Dropdown" ; import { Link } from "office-ui-fabric-react/lib/components/Link" ; import { DocumentCard , DocumentCardActivity , DocumentCardLocation , DocumentCardPreview , DocumentCardTitle , DocumentCardType , IDocumentCardPreviewProps } from "office-ui-fabric-react/lib/DocumentCard" ; import { IIconProps } from "office-ui-fabric-react/lib/Icon" ; import { Spinner , SpinnerSize } from 'office-ui-fabric-react/lib/Spinner' ; import { ImageFit } from "office-ui-fabric-react/lib/Image" ; import { PanelType } from "office-ui-fabric-react/lib/Panel" ; import { mergeStyles } from "office-ui-fabric-react/lib/Styling" ; import { ISize } from "office-ui-fabric-react/lib/Utilities" ; import { DayOfWeek } from "office-ui-fabric-react/lib/utilities/dateValues/DateValues" ; import { ExclamationCircleIcon , Flex , ScreenshareIcon , ShareGenericIcon , Text as NorthstarText } from "@fluentui/react-northstar" ; import { DisplayMode , Environment , EnvironmentType } from "@microsoft/sp-core-library" ; import { SPHttpClient } from "@microsoft/sp-http" ; import { SPPermission } from "@microsoft/sp-page-context" ; import { Accordion } from "../../../controls/accordion" ; import { ChartControl , ChartType } from "../../../ChartControl" ; import { Accordion as AccessibleAccordion , AccordionItem , AccordionItemButton , AccordionItemHeading , AccordionItemPanel } from "../../../controls/accessibleAccordion" ; import { Carousel , CarouselButtonsDisplay , CarouselButtonsLocation , CarouselIndicatorsDisplay , CarouselIndicatorShape } from "../../../controls/carousel" ; import { Dashboard , WidgetSize } from "../../../controls/dashboard" ; import { TimeDisplayControlType } from "../../../controls/dateTimePicker/TimeDisplayControlType" ; import { IconPicker } from "../../../controls/iconPicker" ; import { ComboBoxListItemPicker } from "../../../controls/listItemPicker/ComboBoxListItemPicker" ; import { Pagination } from "../../../controls/pagination" ; import { TermActionsDisplayStyle } from "../../../controls/taxonomyPicker" ; import { TermActionsDisplayMode } from "../../../controls/taxonomyPicker/termActions" ; import { Toolbar } from "../../../controls/toolbar" ; import { ITreeItem , TreeItemActionsDisplayMode , TreeView , TreeViewSelectionMode } from "../../../controls/treeView" ; import { DateConvention , DateTimePicker , TimeConvention } from "../../../DateTimePicker" ; import { CustomCollectionFieldType , FieldCollectionData } from "../../../FieldCollectionData" ; import { FilePicker , IFilePickerResult } from "../../../FilePicker" ; import { ApplicationType , FileTypeIcon , IconType , ImageSize } from "../../../FileTypeIcon" ; import { FolderExplorer , IBreadcrumbItem , IFolder } from "../../../FolderExplorer" ; import { FolderPicker } from "../../../FolderPicker" ; import { GridLayout } from "../../../GridLayout" ; import { IFrameDialog } from "../../../IFrameDialog" ; import { IFramePanel } from "../../../IFramePanel" ; import { ListItemPicker } from "../../../ListItemPicker" ; import { ListPicker } from "../../../ListPicker" ; import { GroupOrder , IGrouping , IViewField , ListView , SelectionMode } from "../../../ListView" ; import { Map , MapType } from "../../../Map" ; import { PeoplePicker , PrincipalType } from "../../../PeoplePicker" ; import { Placeholder } from "../../../Placeholder" ; import { IProgressAction , Progress } from "../../../Progress" ; import { RichText } from "../../../RichText" ; import { PermissionLevel , SecurityTrimmedControl } from "../../../SecurityTrimmedControl" ; import { ITerm } from "../../../services/ISPTermStorePickerService" ; import SPTermStorePickerService from "../../../services/SPTermStorePickerService" ; import { SiteBreadcrumb } from "../../../SiteBreadcrumb" ; import { IPickerTerms , TaxonomyPicker , UpdateType } from "../../../TaxonomyPicker" ; import { WebPartTitle } from "../../../WebPartTitle" ; import { AnimatedDialog } from "../../../AnimatedDialog" ; import styles from "./ControlsTest.module.scss" ; import { IControlsTestProps , IControlsTestState } from "./IControlsTestProps" ; import { MyTeams } from "../../../controls/MyTeams" ; import { TeamPicker } from "../../../TeamPicker" ; import { TeamChannelPicker } from "../../../TeamChannelPicker" ; import { DragDropFiles } from "../../../DragDropFiles" ; import { SitePicker } from "../../../controls/sitePicker/SitePicker" ; import { DynamicForm } from '../../../controls/dynamicForm' ; import { LocationPicker } from "../../../controls/locationPicker/LocationPicker" ; import { ILocationPickerItem } from "../../../controls/locationPicker/ILocationPicker" ; import { debounce } from "lodash" ; import { ModernTaxonomyPicker } from "../../../controls/modernTaxonomyPicker/ModernTaxonomyPicker" ; /**
 * The sample data below was randomly generated (except for the title). It is used by the grid layout
 */ const 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" } ] ; const 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.' } ] ; /**
 * Component that can be used to test out the React controls from this project
 */ export default class ControlsTest extends React . Component < IControlsTestProps , IControlsTestState > { private taxService : SPTermStorePickerService = null ; private richTextValue : string = null ; private theme = window [ "__themeState__" ] . theme ; private pickerStylesSingle : Partial < IBasePickerStyles > = { 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 , } , } , } ; private onSelectedChannel = ( teamsId , channelId ) => { alert ( `TeamId: ${ teamsId }\n ChannelId: ${ channelId }\n` ) ; console . log ( "TeamsId" , teamsId ) ; console . log ( "ChannelId" , channelId ) ; } ; /**
     * Static array for carousel control example.
     */ private carouselElements = [ < 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 . < /div>, < 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 . < /div>, < 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 . < /div>, < 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 . < /div>, < 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 . < /div> ] ; private skypeCheckIcon : IIconProps = { iconName : 'SkypeCheck' } ; private 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 : async ( treeItem ) => { console . log ( treeItem ) ; } } ] , 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 : async ( treeItem ) => { console . log ( treeItem ) ; } } ] , children : [ { key : "gc1" , label : "Grand Child 1" , actions : [ { title : "Get Grand Child item" , iconProps : { iconName : 'Mail' } , id : "GetItem" , actionCallback : async ( treeItem ) => { console . log ( treeItem ) ; } } ] } ] } , { 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" } ] } ] ; constructor ( props ) { super ( props ) ; this . state = { imgSize : 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 : [ ] , errorMessage : "This field is required" } ; this . _onIconSizeChange = this . _onIconSizeChange . bind ( this ) ; this . _onConfigure = this . _onConfigure . bind ( this ) ; this . _startProgress = this . _startProgress . bind ( this ) ; this . onServicePickerChange = this . onServicePickerChange . bind ( this ) ; } /**
     * React componentDidMount lifecycle hook
     */ public componentDidMount ( ) { const restApi = `${ this . props . context . pageContext . web . absoluteUrl }/_api/web/GetFolderByServerRelativeUrl('Shared%20Documents')/files?$expand=ListItemAllFields` ; this . props . context . spHttpClient . get ( restApi , SPHttpClient . configurations . v1 ) . then ( resp => { return resp . json ( ) ; } ) . then ( items => { this . setState ( { items : items . value ? items . value : [ ] } ) ; } ) ; } param element private _onIconSizeChange ( element ? ) { this . setState ( { imgSize : parseInt ( element . key . toString ( ) ) } ) ; } /**
     * Open the property pane
     */ private _onConfigure ( ) { this . props . context . propertyPane . open ( ) ; } param items private _getSelection ( items ) { console . log ( 'Items:' , items ) ; } param files private _getDropFiles = ( files ) => { for ( var i = 0 ; i < files . length ; i ++ ) { console . log ( "File name: " + files [ i ] . name ) ; console . log ( "Folder Path: " + files [ i ] . fullPath ) ; } } ; private param { IPickerTerms } terms memberof private onServicePickerChange = ( terms ) : void => { this . setState ( { initialValues : terms } ) ; } ; param terms private _onTaxPickerChange = ( terms ) => { this . setState ( { initialValues : terms , errorMessage : terms . length > 0 ? '' : 'This field is required' } ) ; console . log ( "Terms:" , terms ) ; } ; param dateTimeValue private _onDateTimePickerChange = ( dateTimeValue ) => { this . setState ( { dateTimeValue } ) ; console . log ( "Selected Date/Time:" , dateTimeValue . toLocaleString ( ) ) ; } ; param lists private onListPickerChange = ( lists ) => { console . log ( "Lists:" , lists ) ; this . setState ( { selectedList : typeof lists === "string" ? lists : lists . pop ( ) } ) ; } ; /**
     * Deletes second item from the list
     */ private deleteItem = ( ) => { const { items } = this . state ; if ( items . length >= 2 ) { items . splice ( 1 , 1 ) ; this . setState ( { items : items } ) ; } } ; param items private _getPeoplePickerItems ( items ) { console . log ( 'Items:' , items ) ; } /**
     * Selected item from the list data picker
     */ private listItemPickerDataSelected ( item ) { console . log ( item ) ; } private _startProgress ( ) { let currentIndex = 0 ; const intervalId = setInterval ( ( ) => { const actions = this . state . progressActions ; if ( currentIndex >= actions . length ) { clearInterval ( intervalId ) ; } else { const action = actions [ currentIndex ] ; if ( currentIndex == 1 ) { action . hasError = true ; action . errorMessage = 'some error message' ; } } this . setState ( { currentProgressActionIndex : currentIndex , progressActions : actions } ) ; currentIndex ++ ; } , 5000 ) ; } private _initProgressActions ( ) { return [ { title : 'First Step' , subActionsTitles : [ 'Sub action 1' , 'Sub action 2' ] } , { title : 'Second step' } , { title : 'Third Step' , subActionsTitles : [ 'Sub action 1' , 'Sub action 2' , 'Sub action 3' ] } , { title : 'Fourth Step' } ] ; } /**
     * Triggers element change for the carousel example.
     */ private triggerNextElement = ( index ) : void => { const canMovePrev = index > 0 ; const canMoveNext = index < this . carouselElements . length - 1 ; const nextElement = this . carouselElements [ index ] ; setTimeout ( ( ) => { this . setState ( { canMovePrev , canMoveNext , currentCarouselElement : nextElement } ) ; } , 500 ) ; } ; private _onFilePickerSave = async ( filePickerResult ) => { this . setState ( { filePickerResult : filePickerResult } ) ; if ( filePickerResult && filePickerResult . length > 0 ) { for ( var i = 0 ; i < filePickerResult . length ; i ++ ) { const item = filePickerResult [ i ] ; const fileResultContent = await item . downloadFileContent ( ) ; console . log ( fileResultContent ) ; } } } ; private rootFolder : IFolder = { Name : "Site" , ServerRelativeUrl : this . props . context . pageContext . web . serverRelativeUrl } ; private _onFolderSelect = ( folder ) : void => { console . log ( 'selected folder' , folder ) ; } ; private _onRenderGridItem = ( item , _finalSize , isCompact ) : JSX . Element => { const previewProps = { previewImages : [ { previewImageSrc : item . thumbnail , imageFit : ImageFit . cover , height : 130 } ] } ; return < div data - is - focusable = { true } role = "listitem" aria - label = { item . title } > < DocumentCard type = { isCompact ? DocumentCardType . compact : DocumentCardType . normal } onClick = { ( ev ) => alert ( "You clicked on a grid item" ) } > < DocumentCardPreview { ... previewProps } / > { ! isCompact && < DocumentCardLocation location = { item . location } />} < div > < DocumentCardTitle title = { item . title } shouldTruncate = { true } / > < DocumentCardActivity activity = { item . activity } people = { [ { name : item . name , profileImageSrc : item . profileImageSrc } ] } / > < /div> < /DocumentCard> < /div>; } ; public render ( ) { const sizeOptions = [ { key : ImageSize . small , text : ImageSize [ ImageSize . small ] , selected : ImageSize . small === this . state . imgSize } , { key : ImageSize . medium , text : ImageSize [ ImageSize . medium ] , selected : ImageSize . medium === this . state . imgSize } , { key : ImageSize . large , text : ImageSize [ ImageSize . large ] , selected : ImageSize . large === this . state . imgSize } ] ; const viewFields = [ { name : 'ListItemAllFields.Id' , displayName : 'ID' , maxWidth : 40 , sorting : true , isResizable : true } , { name : 'ListItemAllFields.Underscore_Field' , displayName : "Underscore_Field" , sorting : true , isResizable : true } , { name : 'Name' , linkPropertyName : 'ServerRelativeUrl' , sorting : true , isResizable : true } , { name : 'ServerRelativeUrl' , displayName : 'Path' , render : ( item ) => { return < a href = { item [ 'ServerRelativeUrl' ] } > Link < /a>; } , isResizable : true } , { name : 'Title' , isResizable : true } ] ; const groupByFields = [ { name : "ListItemAllFields.Department.Label" , order : GroupOrder . ascending } ] ; let iframeUrl = '/temp/workbench.html' ; if ( Environment . type === EnvironmentType . SharePoint ) { iframeUrl = '/_layouts/15/sharepoint.aspx' ; } else if ( Environment . type === EnvironmentType . ClassicSharePoint ) { iframeUrl = this . context . pageContext . web . serverRelativeUrl ; } const additionalBreadcrumbItems = [ { text : 'Places' , key : 'Places' , onClick : ( ) => { console . log ( 'additional breadcrumb item' ) ; } , } ] ; const linkExample = { href : "#" } ; const calloutItemsExample = [ { id : "action_1" , title : "Info" , icon : < ExclamationCircleIcon />, } , { id : "action_2" , title : "Popup" , icon : < ScreenshareIcon /> }, { id : "action_3" , title : "Share" , icon : < ShareGenericIcon />, } , ] ; /**
       * Animated dialog related
       */ const animatedDialogContentProps = { type : DialogType . normal , title : 'Animated Dialog' , subText : 'Do you like the animated dialog?' , } ; const animatedModalProps = { isDarkOverlay : true } ; const customizedAnimatedModalProps = { isDarkOverlay : true , containerClassName : `${ styles . dialogContainer }` } ; const customizedAnimatedDialogContentProps = { type : DialogType . normal , title : 'Animated Dialog' } ; const successDialogContentProps = { type : DialogType . normal , title : 'Good answer!' } ; const errorDialogContentProps = { type : DialogType . normal , title : 'Uh oh!' } ; const timeout = ( ms ) : Promise < void > => { return new Promise ( ( resolve , reject ) => setTimeout ( resolve , ms ) ) ; } ; return ( < div className = { styles . controlsTest } > < div className = "ms-font-m" > { } { } < /div> < WebPartTitle displayMode = { this . props . displayMode } title = { this . props . title } updateProperty = { this . props . updateProperty } moreLink = { < Link href = "https://pnp.github.io/sp-dev-fx-controls-react/" > See all < /Link>}/ > < Stack styles = { { root : { marginBottom : 200 } } } > < MyTeams title = "My Teams" webPartContext = { this . props . context } themeVariant = { this . props . themeVariant } enablePersonCardInteraction = { true } onSelectedChannel = { this . onSelectedChannel } / > < /Stack> < Stack styles = { { root : { margin : "10px 10px 100px 10px" } } } tokens = { { childrenGap : 10 } } > < TeamPicker label = "Select Team" themeVariant = { this . props . themeVariant } selectedTeams = { this . state . selectedTeam } appcontext = { this . props . context } itemLimit = { 1 } onSelectedTeams = { ( tagList ) => { this . setState ( { selectedTeamChannels : [ ] } ) ; this . setState ( { selectedTeam : tagList } ) ; console . log ( tagList ) ; } } /> { this . state ?. selectedTeam && this . state ?. selectedTeam . length > 0 && ( < > < TeamChannelPicker label = "Select Team Channel" themeVariant = { this . props . themeVariant } selectedChannels = { this . state . selectedTeamChannels } teamId = { this . state . selectedTeam [ 0 ] . key } appcontext = { this . props . context } onSelectedChannels = { ( tagList ) => { this . setState ( { selectedTeamChannels : tagList } ) ; console . log ( tagList ) ; } } /> < />)} < /Stack> < AccessibleAccordion allowZeroExpanded > < AccordionItem key = { "Headding 1" } > < AccordionItemHeading > < AccordionItemButton > { "Accordion Item Heading 1" } < /AccordionItemButton> < /AccordionItemHeading> < AccordionItemPanel > < div style = { { margin : 20 } } > < h2 > Content Heading 1 < /h2> < Text variant = { "mediumPlus" } > Text sample < /Text> < /div> < /AccordionItemPanel> < /AccordionItem> < AccordionItem key = { "Headding 2" } > < AccordionItemHeading > < AccordionItemButton > Accordion Item Heading 2 < /AccordionItemButton> < /AccordionItemHeading> < AccordionItemPanel > < div style = { { margin : 20 } } > < h2 > Content Heading 2 < /h2> < Text variant = { "mediumPlus" } > Text < /Text> < TextField > < /TextField> < /div> < /AccordionItemPanel> < /AccordionItem> < /AccessibleAccordion> { sampleItems . map ( ( item , index ) => ( < Accordion title = { item . Question } defaultCollapsed = { false } className = { "itemCell" } key = { index } > < div className = { "itemContent" } > < div className = { "itemResponse" } > { item . Reponse } < /div> < div className = { "itemIndex" } > { `Langue :  ${ item . Langue . Nom }` } < /div> < /div> < /Accordion>))} < div className = "ms-font-m" > Services tester : < TaxonomyPicker allowMultipleSelections = { true } selectChildrenIfParentSelected = { true } termsetNameOrID = "8ea5ac06-fd7c-4269-8d0d-02f541df8eb9" initialValues = { [ { key : "c05250ff-80e7-41e6-bfb3-db2db62d63d3" , name : "Business" , path : "Business" , termSet : "8ea5ac06-fd7c-4269-8d0d-02f541df8eb9" , termSetName : "Trip Types" } , { key : "a05250ff-80e7-41e6-bfb3-db2db62d63d3" , name : "BBusiness" , path : "BBusiness" , termSet : "8ea5ac06-fd7c-4269-8d0d-02f541df8eb9" , termSetName : "Trip Types" } ] } validateOnLoad = { true } panelTitle = "Select Sorted Term" label = "Service Picker with custom actions" context = { this . props . context } onChange = { this . onServicePickerChange } isTermSetSelectable = { true } termActions = { { actions : [ { title : "Get term labels" , iconName : "LocaleLanguage" , id : "test" , invokeActionOnRender : true , hidden : true , actionCallback : async ( taxService , term ) => { const updateAction = { updateActionType : UpdateType . updateTermLabel , value : `${ term . Name } (updated)` } ; return updateAction ; } , applyToTerm : ( term ) => ( term && term . Name && term . Name . toLowerCase ( ) === "about us" ) } , ] , termActionsDisplayMode : TermActionsDisplayMode . buttons , termActionsDisplayStyle : TermActionsDisplayStyle . textAndIcon , } } onPanelSelectionChange = { ( prev , next ) => { console . log ( prev ) ; console . log ( next ) ; } } /> < TaxonomyPicker allowMultipleSelections = { true } termsetNameOrID = "8ea5ac06-fd7c-4269-8d0d-02f541df8eb9" panelTitle = "Select Default Sorted Term" label = "Service Picker" context = { this . props . context } onChange = { this . onServicePickerChange } isTermSetSelectable = { false } placeholder = "Select service" required = { true } errorMessage = 'this field is required' onGetErrorMessage = { ( value ) => { return 'comment errorMessage to see this one' ; } } /> < TaxonomyPicker initialValues = { this . state . initialValues } allowMultipleSelections = { true } termsetNameOrID = "41dec50a-3e09-4b3f-842a-7224cffc74c0" anchorId = "436a6154-9691-4925-baa5-4c9bb9212cbf" panelTitle = "Select Term" label = "Taxonomy Picker" context = { this . props . context } onChange = { this . _onTaxPickerChange } isTermSetSelectable = { false } hideDeprecatedTags = { true } hideTagsNotAvailableForTagging = { true } errorMessage = { this . state . errorMessage } termActions = { { actions : [ { title : "Get term labels" , iconName : "LocaleLanguage" , id : "test" , invokeActionOnRender : true , hidden : true , actionCallback : async ( taxService , term ) => { console . log ( term . Name , term . TermsCount ) ; return { updateActionType : UpdateType . updateTermLabel , value : `${ term . Name } (updated)` } ; } , applyToTerm : ( term ) => ( term && term . Name && term . Name === "internal" ) } , { title : "Hide term" , id : "hideTerm" , invokeActionOnRender : true , hidden : true , actionCallback : async ( taxService , term ) => { return { updateActionType : UpdateType . hideTerm , value : true } ; } , applyToTerm : ( term ) => ( term && term . Name && ( term . Name . toLowerCase ( ) === "help desk" || term . Name . toLowerCase ( ) === "multi-column valo site page" ) ) } , { title : "Disable term" , id : "disableTerm" , invokeActionOnRender : true , hidden : true , actionCallback : async ( taxService , term ) => { return { updateActionType : UpdateType . disableTerm , value : true } ; } , applyToTerm : ( term ) => ( term && term . Name && term . Name . toLowerCase ( ) === "secured" ) } , { title : "Disable or hide term" , id : "disableOrHideTerm" , invokeActionOnRender : true , hidden : true , actionCallback : async ( taxService , term ) => { if ( term . TermsCount > 0 ) { return { updateActionType : UpdateType . disableTerm , value : true } ; } return { updateActionType : UpdateType . hideTerm , value : true } ; } , applyToTerm : ( term ) => true } ] , termActionsDisplayMode : TermActionsDisplayMode . buttons , termActionsDisplayStyle : TermActionsDisplayStyle . textAndIcon } } /> < DefaultButton text = "Add" onClick = { ( ) => { this . setState ( { initialValues : [ { key : "ab703558-2546-4b23-b8b8-2bcb2c0086f5" , name : "HR" , path : "HR" , termSet : "b3e9b754-2593-4ae6-abc2-35345402e186" } ] , errorMessage : "" } ) ; } } /> < /div> < DateTimePicker label = "DateTime Picker (unspecified = date and time)" isMonthPickerVisible = { false } showSeconds = { false } onChange = { ( value ) => console . log ( "DateTimePicker value:" , value ) } placeholder = "Pick a date" / > < DateTimePicker label = "DateTime Picker 12-hour clock" showSeconds = { true } onChange = { ( value ) => console . log ( "DateTimePicker value:" , value ) } timeDisplayControlType = { TimeDisplayControlType . Dropdown } minutesIncrementStep = { 15 } / > < DateTimePicker label = "DateTime Picker 24-hour clock" showSeconds = { true } timeConvention = { TimeConvention . Hours24 } onChange = { ( value ) => console . log ( "DateTimePicker value:" , value ) } /> < DateTimePicker label = "DateTime Picker no seconds" value = { new Date ( ) } onChange = { ( value ) => console . log ( "DateTimePicker value:" , value ) } /> < DateTimePicker label = "DateTime Picker (unspecified = date and time)" timeConvention = { TimeConvention . Hours24 } value = { new Date ( ) } onChange = { ( value ) => console . log ( "DateTimePicker value:" , value ) } /> < DateTimePicker label = "DateTime Picker dropdown" showSeconds = { true } timeDisplayControlType = { TimeDisplayControlType . Dropdown } value = { new Date ( ) } onChange = { ( value ) => console . log ( "DateTimePicker value:" , value ) } /> < DateTimePicker label = "DateTime Picker date only" showLabels = { false } dateConvention = { DateConvention . Date } value = { new Date ( ) } onChange = { ( value ) => console . log ( "DateTimePicker value:" , value ) } minDate = { new Date ( "05/01/2019" ) } maxDate = { new Date ( "05/01/2020" ) } / > { } < RichText value = { this . state . richTextValue } isEditMode = { this . props . displayMode === DisplayMode . Edit } onChange = { value => { this . setState ( { richTextValue : value } ) ; return value ; } } /> < PrimaryButton text = 'Reset text' onClick = { ( ) => { this . setState ( { richTextValue : 'test' } ) ; } } /> { } < Placeholder iconName = 'Edit' iconText = 'Configure your web part' description = { defaultClassNames => < span className = { defaultClassNames } > Please configure the web part . < /span>} buttonLabel='Configure' hideButton={this.props.displayMode === DisplayMode.Read} onConfigure={this._onConfigure}/ > < PeoplePicker context = { this . props . context } titleText = "People Picker custom styles" styles = { this . pickerStylesSingle } personSelectionLimit = { 5 } ensureUser = { true } principalTypes = { [ PrincipalType . User , PrincipalType . SharePointGroup , PrincipalType . SecurityGroup , PrincipalType . DistributionList ] } onChange = { this . _getPeoplePickerItems } / > < PeoplePicker context = { this . props . context } titleText = "People Picker (Group not found)" webAbsoluteUrl = { this . props . context . pageContext . site . absoluteUrl } groupName = "Team Site Visitors 123" ensureUser = { true } principalTypes = { [ PrincipalType . User , PrincipalType . SharePointGroup , PrincipalType . SecurityGroup , PrincipalType . DistributionList ] } defaultSelectedUsers = { [ "admin@tenant.onmicrosoft.com" , "test@tenant.onmicrosoft.com" ] } onChange = { this . _getPeoplePickerItems } / > < PeoplePicker context = { this . props . context } titleText = "People Picker (search for group)" groupName = "Team Site Visitors" principalTypes = { [ PrincipalType . User , PrincipalType . SharePointGroup , PrincipalType . SecurityGroup , PrincipalType . DistributionList ] } defaultSelectedUsers = { [ "admin@tenant.onmicrosoft.com" , "test@tenant.onmicrosoft.com" ] } onChange = { this . _getPeoplePickerItems } / > < PeoplePicker context = { this . props . context } titleText = "People Picker (pre-set global users)" principalTypes = { [ PrincipalType . User , PrincipalType . SharePointGroup , PrincipalType . SecurityGroup , PrincipalType . DistributionList ] } defaultSelectedUsers = { [ "admin@tenant.onmicrosoft.com" , "test@tenant.onmicrosoft.com" ] } onChange = { this . _getPeoplePickerItems } personSelectionLimit = { 2 } ensureUser = { true } / > < PeoplePicker context = { this . props . context } titleText = "People Picker (pre-set local users)" webAbsoluteUrl = { this . props . context . pageContext . site . absoluteUrl } principalTypes = { [ PrincipalType . User , PrincipalType . SharePointGroup , PrincipalType . SecurityGroup , PrincipalType . DistributionList ] } defaultSelectedUsers = { [ "admin@tenant.onmicrosoft.com" , "test@tenant.onmicrosoft.com" ] } onChange = { this . _getPeoplePickerItems } / > < PeoplePicker context = { this . props . context } titleText = "People Picker (tenant scoped)" personSelectionLimit = { 5 } showtooltip = { true } required = { true } onChange = { this . _getPeoplePickerItems } showHiddenInUI = { false } principalTypes = { [ PrincipalType . User , PrincipalType . SharePointGroup , PrincipalType . SecurityGroup , PrincipalType . DistributionList ] } suggestionsLimit = { 2 } resolveDelay = { 200 } placeholder = { 'Select a SharePoint principal (User or Group)' } onGetErrorMessage = { async ( items ) => { if ( ! items || items . length < 2 ) { return 'error' ; } return '' ; } } /> < PeoplePicker context = { this . props . context } titleText = "People Picker (local scoped)" webAbsoluteUrl = { this . props . context . pageContext . site . absoluteUrl } personSelectionLimit = { 5 } showtooltip = { true } required = { true } onChange = { this . _getPeoplePickerItems } showHiddenInUI = { false } principalTypes = { [ PrincipalType . User , PrincipalType . SharePointGroup , PrincipalType . SecurityGroup , PrincipalType . DistributionList ] } suggestionsLimit = { 2 } resolveDelay = { 200 } / > < PeoplePicker context = { this . props . context } titleText = "People Picker (disabled)" disabled = { true } showtooltip = { true } defaultSelectedUsers = { [ 'aleksei.dovzhyk@sharepointalist.com' ] } / > < DateTimePicker label = "DateTime Picker (unspecified = date and time)" / > < DateTimePicker label = "DateTime Picker (unspecified = date and time, no seconds)" / > < DateTimePicker label = "DateTime Picker (date and time - default time = 12h)" dateConvention = { DateConvention . DateTime } showSeconds = { true } / > < DateTimePicker label = "DateTime Picker (date and time - 12h)" dateConvention = { DateConvention . DateTime } timeConvention = { TimeConvention . Hours12 } showSeconds = { false } / > < DateTimePicker label = "DateTime Picker (date and time - 24h)" dateConvention = { DateConvention . DateTime } timeConvention = { TimeConvention . Hours24 } firstDayOfWeek = { DayOfWeek . Monday } showSeconds = { true } / > < DateTimePicker label = "DateTime Picker (Controlled)" formatDate = { d => `${ d . getFullYear ( ) } - ${ d . getMonth ( ) + 1 } - ${ d . getDate ( ) }` } dateConvention = { DateConvention . DateTime } timeConvention = { TimeConvention . Hours24 } firstDayOfWeek = { DayOfWeek . Monday } value = { this . state . dateTimeValue } onChange = { this . _onDateTimePickerChange } isMonthPickerVisible = { false } showMonthPickerAsOverlay = { true } showWeekNumbers = { true } showSeconds = { true } timeDisplayControlType = { TimeDisplayControlType . Dropdown } / > < PrimaryButton text = { 'Clear Date' } onClick = { ( ) => { this . setState ( { dateTimeValue : undefined } ) ; } } /> < DateTimePicker label = "DateTime Picker (date only)" dateConvention = { DateConvention . Date } / > < DateTimePicker label = "DateTime Picker (disabled)" disabled = { true } / > < br > < /br> < b > Drag and Drop Files < /b> < DragDropFiles dropEffect = "copy" enable = { true } onDrop = { this . _getDropFiles } iconName = "Upload" labelMessage = "My custom upload File" > < Placeholder iconName = 'BulkUpload' iconText = 'Drag files or folder with files here...' description = { defaultClassNames => < span className = { defaultClassNames } > Drag files or folder with files here ... < /span>} buttonLabel='Configure' hideButton={this.props.displayMode === DisplayMode.Read} onConfigure={this._onConfigure}/ > < /DragDropFiles> < br > < /br> < ListView items = { this . state . items } viewFields = { viewFields } iconFieldName = 'ServerRelativeUrl' groupByFields = { groupByFields } compact = { true } selectionMode = { SelectionMode . single } selection = { this . _getSelection } showFilter = { true } dragDropFiles = { true } onDrop = { this . _getDropFiles } stickyHeader = { true } className = { styles . listViewWrapper } / > < ChartControl type = { ChartType . Bar } data = { { labels : [ "Red" , "Blue" , "Yellow" , "Green" , "Purple" , "Orange" ] , datasets : [ { label : '# of Votes' , data : [ 12 , 19 , 3 , 5 , 2 , 3 ] , backgroundColor : [ 'rgba(255, 99, 132, 0.2)' , 'rgba(54, 162, 235, 0.2)' , 'rgba(255, 206, 86, 0.2)' , 'rgba(75, 192, 192, 0.2)' , 'rgba(153, 102, 255, 0.2)' , 'rgba(255, 159, 64, 0.2)' ] , borderColor : [ 'rgba(255,99,132,1)' , 'rgba(54, 162, 235, 1)' , 'rgba(255, 206, 86, 1)' , 'rgba(75, 192, 192, 1)' , 'rgba(153, 102, 255, 1)' , 'rgba(255, 159, 64, 1)' ] , borderWidth : 1 } ] } } options = { { scales : { yAxes : [ { ticks : { beginAtZero : true } } ] } } } /> < Map titleText = "New map control" coordinates = { { latitude : 51.507351 , longitude : - 0.127758 } } enableSearch = { true } mapType = { MapType . normal } onUpdateCoordinates = { ( coordinates ) => console . log ( "Updated location:" , coordinates ) } /> < div className = { styles . container } > < div className = { `ms-Grid-row ms-bgColor-neutralLight ms-fontColor-neutralDark ${ styles . row }` } > < div className = "ms-Grid-col ms-lg10 ms-xl8 ms-xlPush2 ms-lgPush1" > < span className = "ms-font-xl" > Controls testing < /span> < SecurityTrimmedControl context = { this . props . context } level = { PermissionLevel . currentWeb } permissions = { [ SPPermission . viewListItems ] } className = { "TestingClass" } noPermissionsControl = { < p > You do not have permissions . < /p>}> < p > You have permissions to view list items . < /p> < /SecurityTrimmedControl> < p className = "ms-font-l" > File type icon control < /p> < div className = "ms-font-m" > Font icons : & nbsp ; < FileTypeIcon type = { IconType . font } path = "https://contoso.sharepoint.com/documents/filename.docx" / > & nbsp ; < FileTypeIcon type = { IconType . font } path = "https://contoso.sharepoint.com/documents/filename.unknown" / > & nbsp ; < FileTypeIcon type = { IconType . font } path = "https://contoso.sharepoint.com/documents/filename.doc" / > & nbsp ; < FileTypeIcon type = { IconType . font } application = { ApplicationType . HTML } / > & nbsp ; < FileTypeIcon type = { IconType . font } application = { ApplicationType . Mail } / > & nbsp ; < FileTypeIcon type = { IconType . font } application = { ApplicationType . SASS } / > < /div> < div className = "ms-font-m" > Image icons : & nbsp ; < FileTypeIcon type = { IconType . image } path = "https://contoso.sharepoint.com/documents/filename.docx" / > & nbsp ; < FileTypeIcon type = { IconType . image } path = "https://contoso.sharepoint.com/documents/filename.unknown" / > & nbsp ; < FileTypeIcon type = { IconType . image } path = "https://contoso.sharepoint.com/documents/filename.pptx?querystring='prop1'&amp;prop2='test'" / > & nbsp ; < FileTypeIcon type = { IconType . image } application = { ApplicationType . Word } / > & nbsp ; < FileTypeIcon type = { IconType . image } application = { ApplicationType . PDF } / > & nbsp ; < FileTypeIcon type = { IconType . image } path = "https://contoso.sharepoint.com/documents/filename.pdf" / > < /div> < div className = "ms-font-m" > Icon size tester : < Dropdown options = { sizeOptions } onChanged = { this . _onIconSizeChange } / > < FileTypeIcon type = { IconType . image } size = { this . state . imgSize } application = { ApplicationType . Excel } / > < FileTypeIcon type = { IconType . image } size = { this . state . imgSize } application = { ApplicationType . PDF } / > < FileTypeIcon type = { IconType . image } size = { this . state . imgSize } / > < /div> < div className = "ms-font-m" > Site picker tester : < SitePicker context = { this . props . context } label = { 'select sites' } mode = { 'site' } allowSearch = { true } multiSelect = { false } onChange = { ( sites ) => { console . log ( sites ) ; } } placeholder = { 'Select sites' } searchPlaceholder = { 'Filter sites' } / > < /div> < div className = "ms-font-m" > List picker tester : < ListPicker context = { this . props . context } label = "Select your list(s)" placeholder = "Select your list(s)" baseTemplate = { 100 } includeHidden = { false } multiSelect = { true } contentTypeId = "0x01" onSelectionChanged = { this . onListPickerChange } / > < /div> < div className = "ms-font-m" > List Item picker list data tester : < ListItemPicker listId = { '76a8231b-35b6-4703-b1f4-5d03d3dfb1ca' } columnInternalName = "Title" keyColumnInternalName = "Id" filter = { "Title eq 'SPFx'" } orderBy = { 'Title desc' } itemLimit = { 5 } context = { this . props . context } placeholder = { 'Select list items' } onSelectedItem = { this . listItemPickerDataSelected } / > < /div> < div > Icon Picker < /div> < div > < IconPicker renderOption = "panel" onSave = { ( value ) => { console . log ( value ) ; } } currentIcon = { 'Warning' } buttonLabel = "Icon Picker" > < /IconPicker> < /div> < div className = "ms-font-m" > ComboBoxListItemPicker : < ComboBoxListItemPicker listId = { this . state . comboBoxListItemPickerListId } columnInternalName = 'Title' keyColumnInternalName = 'Id' orderBy = 'Title desc' multiSelect = { true } onSelectedItem = { ( data ) => { console . log ( `Item(s):` , data ) ; } } defaultSelectedItems = { this . state . comboBoxListItemPickerIds } webUrl = { this . props . context . pageContext . web . absoluteUrl } spHttpClient = { this . props . context . spHttpClient } / > < PrimaryButton text = "Change List" onClick = { ( ) => { this . setState ( { comboBoxListItemPickerListId : '71210430-8436-4962-a14d-5525475abd6b' } ) ; } } /> < PrimaryButton text = "Change default items" onClick = { ( ) => { this . setState ( { comboBoxListItemPickerIds : [ { Id : 2 , Title : '222' } ] } ) ; } } /> < /div> < div className = "ms-font-m" > iframe dialog tester : < PrimaryButton text = "Open iframe Dialog" onClick = { ( ) => { this . setState ( { iFrameDialogOpened : true } ) ; } } /> < IFrameDialog url = { iframeUrl } iframeOnLoad = { ( iframe ) => { console . log ( 'iframe loaded' ) ; } } hidden = { ! this . state . iFrameDialogOpened } onDismiss = { ( ) => { this . setState ( { iFrameDialogOpened : false } ) ; } } modalProps = { { isBlocking : true , styles : { root : { backgroundColor : '#00ff00' } , main : { backgroundColor : '#ff0000' } } } } dialogContentProps = { { type : DialogType . close , showCloseButton : true } } width = { '570px' } height = { '315px' } / > < /div> < div className = "ms-font-m" > iframe Panel tester : < PrimaryButton text = "Open iframe Panel" onClick = { ( ) => { this . setState ( { iFramePanelOpened : true } ) ; } } /> < IFramePanel url = { iframeUrl } type = { PanelType . medium } headerText = "iframe panel title" closeButtonAriaLabel = "Close" isOpen = { this . state . iFramePanelOpened } onDismiss = { ( ) => { this . setState ( { iFramePanelOpened : false } ) ; } } iframeOnLoad = { ( iframe ) => { console . log ( 'iframe loaded' ) ; } } /> < /div> < div > < FolderPicker context = { this . props . context } rootFolder = { { Name : 'Documents' , ServerRelativeUrl : `${ this . props . context . pageContext . web . serverRelativeUrl === '/' ? '' : this . props . context . pageContext . web . serverRelativeUrl }/Shared Documents` } } onSelect = { this . _onFolderSelect } label = 'Folder Picker' required = { true } canCreateFolders = { true } > < /FolderPicker> < /div> < /div> < /div> < /div> < div > < h3 > Carousel with fixed elements : < /h3> < Carousel buttonsLocation = { CarouselButtonsLocation . top } buttonsDisplay = { CarouselButtonsDisplay . block } contentContainerStyles = { styles . carouselContent } containerButtonsStyles = { styles . carouselButtonsContainer } isInfinite = { true } element = { this . carouselElements } onMoveNextClicked = { ( index ) => { console . log ( `Next button clicked: ${ index }` ) ; } } onMovePrevClicked = { ( index ) => { console . log ( `Prev button clicked: ${ index }` ) ; } } /> < /div> < div > < h3 > Carousel with CarouselImage elements : < /h3> < Carousel buttonsLocation = { CarouselButtonsLocation . center } buttonsDisplay = { CarouselButtonsDisplay . buttonsOnly } contentContainerStyles = { styles . carouselImageContent } isInfinite = { true } indicatorShape = { CarouselIndicatorShape . circle } indicatorsDisplay = { CarouselIndicatorsDisplay . block } pauseOnHover = { true } element = { [ { imageSrc : 'https://images.unsplash.com/photo-1588614959060-4d144f28b207?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3078&q=80' , title : 'Colosseum' , description : 'This is Colosseum' , url : 'https://en.wikipedia.org/wiki/Colosseum' , showDetailsOnHover : true , imageFit : ImageFit . cover } , { imageSrc : 'https://www.telegraph.co.uk/content/dam/science/2018/06/20/stonehenge-2326750_1920_trans%2B%2BZgEkZX3M936N5BQK4Va8RWtT0gK_6EfZT336f62EI5U.jpg' , title : 'Stonehenge' , description : 'This is Stonehendle' , url : 'https://en.wikipedia.org/wiki/Stonehenge' , showDetailsOnHover : true , imageFit : ImageFit . cover } , { imageSrc : 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/All_Gizah_Pyramids.jpg/2560px-All_Gizah_Pyramids.jpg' , title : 'Pyramids of Giza' , description : 'This are Pyramids of Giza (Egypt)' , url : 'https://en.wikipedia.org/wiki/Egyptian_pyramids' , showDetailsOnHover : true , imageFit : ImageFit . cover } ] } onMoveNextClicked = { ( index ) => { console . log ( `Next button clicked: ${ index }` ) ; } } onMovePrevClicked = { ( index ) => { console . log ( `Prev button clicked: ${ index }` ) ; } } rootStyles = { mergeStyles ( { backgroundColor : '#C3C3C3' } ) } / > < /div> < div > < h3 > Carousel with triggerPageElement : < /h3> < Carousel buttonsLocation = { CarouselButtonsLocation . bottom } buttonsDisplay = { CarouselButtonsDisplay . buttonsOnly } contentContainerStyles = { styles . carouselContent } canMoveNext = { this . state . canMoveNext } canMovePrev = { this . state . canMovePrev } triggerPageEvent = { this . triggerNextElement } element = { this . state . currentCarouselElement } / > < /div> < div className = { styles . siteBreadcrumb } > < SiteBreadcrumb context = { this . props . context } /> < /div> < div > < h3 > File Picker < /h3> < TextField label = "Default SiteFileTab Folder" onChange = { debounce ( ( ev , newVal ) => { this . setState ( { filePickerDefaultFolderAbsolutePath : newVal } ) ; } , 500 ) } styles = { { root : { marginBottom : 10 } } } /> < FilePicker bingAPIKey = "<BING API KEY>" defaultFolderAbsolutePath = { this . state . filePickerDefaultFolderAbsolutePath } buttonLabel = "Add File" buttonIconProps = { { iconName : 'Add' , styles : { root : { fontSize : 42 } } } } onSave = { this . _onFilePickerSave } onChange = { ( filePickerResult ) => { console . log ( filePickerResult ) ; } } context = { this . props . context } hideRecentTab = { false } includePageLibraries = { true } / > { this . state . filePickerResult && < div > < div > FileName : { this . state . filePickerResult [ 0 ] . fileName } < /div> < div > File size : { this . state . filePickerResult [ 0 ] . fileSize } < /div> < /div>} < /div> < div > < h3 > File Picker with target folder browser < /h3> < FilePicker bingAPIKey = "<BING API KEY>" buttonLabel = "Upload image" buttonIcon = "FileImage" onSave = { this . _onFilePickerSave } onChange = { ( filePickerResult ) => { console . log ( filePickerResult ) ; } } context = { this . props . context } hideRecentTab = { false } renderCustomUploadTabContent = { ( ) => ( < FolderExplorer context = { this . props . context } rootFolder = { this . rootFolder } defaultFolder = { this . rootFolder } onSelect = { this . _onFolderSelect } canCreateFolders = { true } / > ) } /> < /div> < p > < a href = "javascript:;" onClick = { this . deleteItem } > Deletes second item < /a></p > < div > < Progress title = { 'Progress Test' } showOverallProgress = { true } showIndeterminateOverallProgress = { false } hideNotStartedActions = { false } actions = { this . state . progressActions } currentActionIndex = { this . state . currentProgressActionIndex } longRunningText = { 'This operation takes longer than expected' } longRunningTextDisplayDelay = { 7000 } height = { '350px' } inProgressIconName = { 'ChromeBackMirrored' } / > < PrimaryButton text = { 'Start Progress' } onClick = { this . _startProgress } / > < /div> < div className = "ms-font-l" > Grid Layout < /div> < GridLayout ariaLabel = { "List of content, use right and left arrow keys to navigate, arrow down to access details." } items = { sampleGridData } onRenderGridItem = { ( item , finalSize , isCompact ) => this . _onRenderGridItem ( item , finalSize , isCompact ) } /> < IconPicker buttonLabel = { 'Icon' } onChange = { ( iconName ) => { console . log ( iconName ) ; } } onCancel = { ( ) => { console . log ( "Panel closed" ) ; } } onSave = { ( iconName ) => { console . log ( iconName ) ; } } /> < div > < FolderExplorer context = { this . props . context } rootFolder = { { Name : 'Documents' , ServerRelativeUrl : `${ this . props . context . pageContext . web . serverRelativeUrl === '/' ? '' : this . props . context . pageContext . web . serverRelativeUrl }/Shared Documents` } } defaultFolder = { { Name : 'Documents' , ServerRelativeUrl : `${ this . props . context . pageContext . web . serverRelativeUrl === '/' ? '' : this . props . context . pageContext . web . serverRelativeUrl }/Shared Documents` } } onSelect = { this . _onFolderSelect } canCreateFolders = { true } orderby = 'Name' orderAscending = { true } / > < /div> < div > < h3 > Tree View < /h3> < TreeView items = { this . treeitems } defaultExpanded = { false } selectionMode = { TreeViewSelectionMode . Multiple } showCheckboxes = { true } treeItemActionsDisplayMode = { TreeItemActionsDisplayMode . ContextualMenu } defaultSelectedKeys = { this . state . treeViewSelectedKeys } onExpandCollapse = { this . onExpandCollapseTree } onSelect = { this . onItemSelected } defaultExpandedChildren = { true } / > < PrimaryButton onClick = { ( ) => { this . setState ( { treeViewSelectedKeys : [ ] } ) ; } } > Clear selection < /PrimaryButton> < /div> < div > < Pagination currentPage = { 3 } onChange = { ( page ) => ( this . _getPage ( page ) ) } totalPages = { this . props . totalPages || 13 } / > < /div> < div > < FieldCollectionData key = { "FieldCollectionData" } label = { "Fields Collection" } itemsPerPage = { 3 } manageBtnLabel = { "Manage" } onChanged = { ( value ) => { console . log ( value ) ; } } panelHeader = { "Manage values" } enableSorting = { true } fields = { [ { id : "Field1" , title : "String field" , type : CustomCollectionFieldType . string , required : true } , { id : "Field2" , title : "Number field" , type : CustomCollectionFieldType . number } , { id : "Field3" , title : "URL field" , type : CustomCollectionFieldType . url } , { id : "Field4" , title : "Boolean field" , type : CustomCollectionFieldType . boolean } , ] } value = { this . getRandomCollectionFieldData ( ) } / > < /div> < Dashboard widgets = { [ { title : "Card 1" , desc : "Last updated Monday, April 4 at 11:15 AM (PT)" , widgetActionGroup : calloutItemsExample , size : WidgetSize . Triple , body : [ { id : "t1" , title : "Tab 1" , content : ( < Flex vAlign = "center" hAlign = "center" styles = { { height : "100%" , border : "1px dashed rgb(179, 176, 173)" } } > < NorthstarText size = "large" weight = "semibold" > Content # 1 < /NorthstarText> < /Flex>), } , { id : "t2" , title : "Tab 2" , content : ( < Flex vAlign = "center" hAlign = "center" styles = { { height : "100%" , border : "1px dashed rgb(179, 176, 173)" } } > < NorthstarText size = "large" weight = "semibold" > Content # 2 < /NorthstarText> < /Flex>), } , { id : "t3" , title : "Tab 3" , content : ( < Flex vAlign = "center" hAlign = "center" styles = { { height : "100%" , border : "1px dashed rgb(179, 176, 173)" } } > < NorthstarText size = "large" weight = "semibold" > Content # 3 < /NorthstarText> < /Flex>), } , ] , link : linkExample , } , { title : "Card 2" , size : WidgetSize . Single , link : linkExample , } , { title : "Card 3" , size : WidgetSize . Double , link : linkExample , } , { title : "Card 4" , size : WidgetSize . Single , link : linkExample , } , { title : "Card 5" , size : WidgetSize . Single , link : linkExample , } , { title : "Card 6" , size : WidgetSize . Single , link : linkExample , } ] } /> < Toolbar actionGroups = { { 'group1' : { 'action1' : { title : 'Edit' , iconName : 'Edit' , onClick : ( ) => { console . log ( 'Edit action click' ) ; } } , 'action2' : { title : 'New' , iconName : 'Add' , onClick : ( ) => { console . log ( 'New action click' ) ; } } } } } /> < div > < h3 > Animated Dialogs < /h3> { } < PrimaryButton text = 'Show animated dialog' onClick = { ( ) => { this . setState ( { showAnimatedDialog : true } ) ; } } /> { } < AnimatedDialog hidden = { ! this . state . showAnimatedDialog } onDismiss = { ( ) => { this . setState ( { showAnimatedDialog : false } ) ; } } dialogContentProps = { animatedDialogContentProps } modalProps = { animatedModalProps } > < DialogFooter > < PrimaryButton onClick = { ( ) => { this . setState ( { showAnimatedDialog : false } ) ; } } text = "Yes" / > < DefaultButton onClick = { ( ) => { this . setState ( { showAnimatedDialog : false } ) ; } } text = "No" / > < /DialogFooter> < /AnimatedDialog> < br / > < br /> < PrimaryButton text = 'Show animated dialog with icon' onClick = { ( ) => { this . setState ( { showCustomisedAnimatedDialog : true } ) ; } } /> { } < AnimatedDialog hidden = { ! this . state . showCustomisedAnimatedDialog } onDismiss = { ( ) => { this . setState ( { showCustomisedAnimatedDialog : false } ) ; } } dialogContentProps = { customizedAnimatedDialogContentProps } modalProps = { customizedAnimatedModalProps } dialogAnimationInType = 'fadeInDown' dialogAnimationOutType = 'fadeOutDown' iconName = 'UnknownSolid' iconAnimationType = 'zoomInDown' showAnimatedDialogFooter = { true } okButtonText = "Yes" cancelButtonText = "No" onOkClick = { ( ) => timeout ( 1500 ) } onSuccess = { ( ) => { this . setState ( { showCustomisedAnimatedDialog : false } ) ; this . setState ( { showSuccessDialog : true } ) ; } } onError = { ( ) => { this . setState ( { showCustomisedAnimatedDialog : false } ) ; this . setState ( { showErrorDialog : true } ) ; } } > < div className = { styles . dialogContent } > < span > Do you like the animated dialog ? < /span> < /div> < /AnimatedDialog> { } < AnimatedDialog hidden = { ! this . state . showSuccessDialog } onDismiss = { ( ) => { this . setState ( { showSuccessDialog : false } ) ; } } dialogContentProps = { successDialogContentProps } modalProps = { customizedAnimatedModalProps } iconName = 'CompletedSolid' > < div className = { styles . dialogContent } > < span > Thank you . < /span></div > < div className = { styles . dialogFooter } > < PrimaryButton onClick = { ( ) => { this . setState ( { showSuccessDialog : false } ) ; } } text = "OK" > < /PrimaryButton> < /div> < /AnimatedDialog> { } < AnimatedDialog hidden = { ! this . state . showErrorDialog } onDismiss = { ( ) => { this . setState ( { showErrorDialog : false } ) ; } } dialogContentProps = { errorDialogContentProps } modalProps = { customizedAnimatedModalProps } iconName = 'StatusErrorFull' > < div className = { styles . dialogContent } > < span > Ther was an error . < /span></div > < div className = { styles . dialogFooter } > < PrimaryButton onClick = { ( ) => { this . setState ( { showErrorDialog : false } ) ; } } text = "OK" > < /PrimaryButton> < /div> < /AnimatedDialog> < LocationPicker context = { this . props . context } label = "Location" onChange = { ( locValue ) => { console . log ( locValue . DisplayName + ", " + locValue . Address . Street ) ; } } > < /LocationPicker> < ModernTaxonomyPicker allowMultipleSelections = { true } termSetId = { "7b84b0b6-50b8-4d26-8098-029eba42fe8a" } panelTitle = "Panel title" label = { "Modern Taxonomy Picker" } context = { this . props . context } required = { false } disabled = { false } customPanelWidth = { 400 } / > < /div> < /div>); } private getRandomCollectionFieldData = ( ) => { let result = [ ] ; for ( let i = 1 ; i < 16 ; i ++ ) { result . push ( { "Field1" : `String${ i }` , "Field2" : i , "Field3" : "https://pnp.github.io/" , "Field4" : true } ) ; } return result ; } ; private onExpandCollapseTree ( item , isExpanded ) { console . log ( ( isExpanded ? "item expanded: " : "item collapsed: " ) + item ) ; } private onItemSelected ( items ) { console . log ( "items selected: " + items . length ) ; } private renderCustomTreeItem ( item ) { return ( < span > { item . iconProps && < i className = { "ms-Icon ms-Icon--" + item . iconProps . iconName } style = { { paddingRight : '4px' } } />} { item . label } < /span>); } private _getPage ( page ) { console . log ( 'Page:' , page ) ; } }