import * as React from 'react' ; import { WebPartContext } from '@microsoft/sp-webpart-base' ; import { List } from 'office-ui-fabric-react/lib/List' ; import LinkPickerPanel from '../../../common/components/LinkPickerPanel/LinkPickerPanel' ; import { LinkType } from '../../../common/components/LinkPickerPanel/ILinkPickerPanelProps' ; import { IMap , IRoute , Route , ILanguage } from '../../../common/models/Models' ; import styles from './MultilingualRedirector.module.scss' ; import { TextField } from 'office-ui-fabric-react/lib/TextField' ; import { IconButton } from 'office-ui-fabric-react/lib/Button' ; export interface IRouteListProps { label : string ; loadLanguages : ( ) => Promise < Array < ILanguage > > ; map : IMap ; onChanged : ( map : IMap ) => void ; context : WebPartContext ; stateKey : string ; } export interface IRouteListState { languages : Array < ILanguage > ; map : IMap ; stateKey : string ; } export class RouteList extends React . Component < IRouteListProps , IRouteListState > { private linkPickerPanel : LinkPickerPanel ; constructor ( props ) { super ( props ) ; this . onRenderCell = this . onRenderCell . bind ( this ) ; this . state = { languages : [ ] , map : this . props . map , stateKey : this . props . stateKey } ; } public componentDidMount ( ) { this . props . loadLanguages ( ) . then ( ( languages ) => { let majorLanguages = [ ] ; let tempRoutes = this . props . map . routes ; let majorRoutes = [ ] ; for ( let l = 0 ; l < languages . length ; l ++ ) { majorLanguages . push ( { code : languages [ l ] . code . split ( '-' ) [ 0 ] , description : languages [ l ] . description } ) ; let routeExists = false ; for ( let r = 0 ; r < tempRoutes . length ; r ++ ) { if ( tempRoutes [ r ] . language == majorLanguages [ l ] . description ) { routeExists = true ; break ; } } if ( ! routeExists ) { tempRoutes . push ( new Route ( majorLanguages [ l ] . code , majorLanguages [ l ] . description , "{not set}" ) ) ; } } let languageExists = false ; for ( let r = 0 ; r < tempRoutes . length ; r ++ ) { for ( let l = 0 ; l < majorLanguages . length ; l ++ ) { if ( tempRoutes [ r ] . language == majorLanguages [ l ] . description ) { languageExists = true ; break ; } } if ( languageExists ) { majorRoutes . push ( tempRoutes [ r ] ) ; } } this . setState ( { languages : JSON . parse ( JSON . stringify ( majorLanguages ) ) , map : { routes : JSON . parse ( JSON . stringify ( majorRoutes ) ) } } ) ; } ) ; } public render ( ) { return ( < div className = { styles . multilingualRedirector } > < LinkPickerPanel webAbsUrl = { this . props . context . pageContext . web . absoluteUrl } webPartContext = { this . props . context } linkType = { LinkType . any } ref = { ( ref ) => { this . linkPickerPanel = ref ; } } /> < div > < div data - is - scrollable = "true" > < List renderedWindowsAhead = { 2 } items = { this . state . map . routes } onRenderCell = { this . onRenderCell } / > < /div> < /div> < /div>); } private onRenderCell = ( item , index ) : JSX . Element => { let route = item as Route ; return ( < div className = { styles . propLanguage } > < TextField className = { styles . propLangValue } label = { route . language } placeholder = "Not Set" multiline = { ( route . destination . length > 38 ) ? true : false } value = { ( route . destination === '{not set}' ) ? "" : route . destination } /> < IconButton className = { styles . propLangButton } disabled = { false } iconProps = { { iconName : 'MiniLink' } } title = "Link to Page" ariaLabel = "LinkPage" onClick = { ( ) => this . onRouteChanged ( route . language ) } /> < /div>); } ; private onRouteChanged = ( language ) : void => { var that = this ; let routes = JSON . parse ( JSON . stringify ( this . state . map . routes ) ) ; this . linkPickerPanel . pickLink ( ) . then ( ( link ) => { for ( let l = 0 ; l < routes . length ; l ++ ) { if ( routes [ l ] . language == language ) { routes [ l ] . destination = link . url ; } } console . log ( "Route List changed!" ) ; console . log ( { routes : routes } ) ; that . props . onChanged ( { routes : routes } ) ; that . setState ( { map : { routes : routes } } ) ; } ) . catch ( ( ) => { console . log ( "Nothing picked!" ) ; } ) ; } ; }