import * as React from "react" ; import { TagPicker , IBasePicker , ITag , IBasePickerSuggestionsProps , IPickerItemProps , ISuggestionItemProps , } from "office-ui-fabric-react/lib/Pickers" ; import { useTeams } from "../../hooks" ; import { ITeamChannel } from "../../common/model/ITeamChannel" ; import { ITeamChannelPickerProps } from "./ITeamChannelPickerProps" ; import { IconButton } from "office-ui-fabric-react/lib/Button" ; import { Text } from "office-ui-fabric-react/lib/Text" ; import { Stack } from "office-ui-fabric-react/lib/Stack" ; import { FontIcon } from "office-ui-fabric-react/lib/Icon" ; import { Label } from "office-ui-fabric-react/lib/Label" ; import { ITeamChannelPickerState } from "./ITeamChannelPickerState" ; import { useTeamChannelPickerStyles } from "./TeamChannelPickerStyles" ; import { EMembershipType } from "./EMembersipType" ; import pullAllBy from "lodash/pullAllBy" ; import find from "lodash/find" ; import { Customizer } from "office-ui-fabric-react/lib/Utilities" ; import strings from "ControlStrings" ; const theme = window . __themeState__ . theme ; const initialState = { selectedTeamsChannels : [ ] , } ; const getTextFromItem = ( item ) => item . name . split ( "," ) [ 0 ] ; const reducer = ( state , action ) => { switch ( action . type ) { case "UPDATE_SELECTEDITEM" : return { ... state , selectedTeamsChannels : action . payload } ; default : return state ; } } ; export const TeamChannelPicker = ( props ) => { const [ state , dispatch ] = React . useReducer ( reducer , initialState ) ; const picker = React . useRef < IBasePicker < ITag > > ( null ) ; const { serviceScope } = props . appcontext ; const { getTeamChannels } = useTeams ( serviceScope ) ; const { onSelectedChannels , selectedChannels , itemLimit , label , styles , themeVariant , } = props ; const { renderItemStylesSingle , renderItemStylesMulti , pickerStylesMulti , pickerStylesSingle , renderIconButtonRemoveStyles , componentClasses } = useTeamChannelPickerStyles ( themeVariant ) ; const pickerSuggestionsProps = { suggestionsHeaderText : strings . TeamChannelPickerSugestionHeaderText , noResultsFoundText : strings . TeamsChannelPickerNoresultsFoundText , } ; /**
     *  Get Sugested Teams
     */ const useFilterSuggestedTeamsChannels = React . useCallback ( async ( filterText , teamsChannelList ) : Promise < ITag [ ] > => { let tags = [ ] ; try { const teamsChannels = await getTeamChannels ( props . teamId . toString ( ) , filterText ) ; if ( teamsChannels ?. length ) { for ( const teamChannel of teamsChannels ) { const checkExists = find ( teamsChannelList , { key : teamChannel . id } ) ; if ( checkExists ) continue ; tags . push ( { key : teamChannel . id , name : `${ teamChannel . displayName },${ teamChannel . membershipType },${ teamChannel . isFavoriteByDefault ?? "false" }` , } ) ; } } } catch ( error ) { console . log ( error ) ; } return tags ; } , [ props . teamId ] ) ; React . useEffect ( ( ) => { dispatch ( { type : "UPDATE_SELECTEDITEM" , payload : selectedChannels , } ) ; } , [ props . teamId ] ) ; const _renderChannelInformation = React . useCallback ( ( propsTag ) : JSX . Element [ ] => { let _returnControls = [ ] ; const _splitName = propsTag . name . split ( "," ) ; const _displayName = _splitName [ 0 ] ; const _membershipType = _splitName [ 1 ] ; const _isFavoriteByDefault = _splitName [ 2 ] ; _returnControls . push ( < Text variant = "medium" > { _displayName } < /Text>); if ( _membershipType === EMembershipType . Private ) { _returnControls . push ( < FontIcon title = { strings . TeamChannelPickerFontIconPrivateChannelTitle } iconName = "LockSolid" className = { componentClasses . iconChannelInfoStyles } > < /FontIcon>); } if ( _isFavoriteByDefault && _isFavoriteByDefault === "true" ) { _returnControls . push ( < FontIcon title = { strings . TeamChannelPickerFontIconFavoriteText } iconName = "FavoriteStarFill" className = { componentClasses . iconChannelInfoStyles } > < /FontIcon>); } return _returnControls ; } , [ ] ) ; const _onRenderSuggestionsItem = React . useCallback ( ( propsTag , itemProps ) => { return ( < Stack horizontal horizontalAlign = "stretch" verticalAlign = "center" styles = { { root : { width : "100%" } } } tokens = { { childrenGap : 10 , padding : 10 } } > < FontIcon iconName = "ChatInviteFriend" className = { componentClasses . iconChannelItemStyles } > < /FontIcon> { _renderChannelInformation ( propsTag ) } < /Stack>); } , [ theme , themeVariant ] ) ; const _onRenderItem = React . useCallback ( ( itemProps ) => { const { selectedTeamsChannels } = state ; if ( itemProps . item ) { return ( < Stack horizontal horizontalAlign = "start" verticalAlign = "center" tokens = { { childrenGap : 5 } } styles = { itemLimit && itemLimit > 1 ? renderItemStylesMulti : renderItemStylesSingle } > < FontIcon iconName = "ChatInviteFriend" className = { componentClasses . iconChannelItemStyles } > < /FontIcon> { _renderChannelInformation ( itemProps . item ) } < IconButton styles = { renderIconButtonRemoveStyles } iconProps = { { iconName : "Cancel" } } title = { strings . TeamsChannelPickerButtonRemoveTitle } onClick = { ( ev ) => { const _newSelectedTeamsChannels = pullAllBy ( selectedTeamsChannels , [ itemProps . item ] ) ; dispatch ( { type : "UPDATE_SELECTEDITEM" , payload : _newSelectedTeamsChannels , } ) ; props . onSelectedChannels ( _newSelectedTeamsChannels ) ; } } /> < /Stack>); } else { return null ; } } , [ state . selectedTeamsChannels , props . onSelectedChannels , themeVariant , renderIconButtonRemoveStyles , renderItemStylesMulti , renderItemStylesSingle , ] ) ; return ( < Customizer settings = { { theme : props . themeVariant } } > < div style = { { width : "100%" } } > { props . label && < Label > { props . label } < /Label>} < TagPicker styles = { styles ?? ( itemLimit && itemLimit > 1 ? pickerStylesMulti : pickerStylesSingle ) } selectedItems = { state . selectedTeamsChannels } onRenderItem = { _onRenderItem } onRenderSuggestionsItem = { _onRenderSuggestionsItem } ref = { picker } onResolveSuggestions = { useFilterSuggestedTeamsChannels } getTextFromItem = { getTextFromItem } pickerSuggestionsProps = { pickerSuggestionsProps } onEmptyResolveSuggestions = { ( selectTeams ) => { return useFilterSuggestedTeamsChannels ( "" , selectTeams ) ; } } itemLimit = { itemLimit ?? undefined } onChange = { ( items ) => { dispatch ( { type : "UPDATE_SELECTEDITEM" , payload : items } ) ; onSelectedChannels ( items ) ; } } componentRef = { picker } / > < /div> < /Customizer>); } ;