问题描述
我正在使用https://developer.microsoft.com/en-us/fluentui#/controls/web/peoplepicker#IPeoplePickerProps中的normalPeoplePicker的默认示例。 当下拉列表显示时,它将截断更长的项目(例如:“ Soft ..的初级经理Any Lundqvist”。)。如何扩大它的范围,以便显示整个项目的文本?
import * as React from 'react';
import { CheckBox } from 'office-ui-fabric-react/lib/CheckBox';
import { IPersonaProps } from 'office-ui-fabric-react/lib/Persona';
import { IBasePickerSuggestionsprops,normalPeoplePicker,ValidationState } from 'office-ui-fabric-react/lib/Pickers';
import { people,mru } from '@uifabric/example-data';
const suggestionProps: IBasePickerSuggestionsprops = {
suggestionsHeaderText: 'Suggested People',mostRecentlyUsedHeaderText: 'Suggested Contacts',noresultsFoundText: 'No results found',loadingText: 'Loading',showRemoveButtons: true,suggestionsAvailableAlertText: 'People Picker Suggestions available',suggestionsContainerAriaLabel: 'Suggested contacts',};
const checkBoxStyles = {
root: {
marginTop: 10,},};
export const PeoplePickernormalExample: React.FunctionComponent = () => {
const [delayResults,setDelayResults] = React.useState(false);
const [isPickerdisabled,setIsPickerdisabled] = React.useState(false);
const [mostRecentlyUsed,setMostRecentlyUsed] = React.useState<IPersonaProps[]>(mru);
const [peopleList,setPeopleList] = React.useState<IPersonaProps[]>(people);
const picker = React.useRef(null);
const onFilterChanged = (
filterText: string,currentPersonas: IPersonaProps[],limitResults?: number,): IPersonaProps[] | Promise<IPersonaProps[]> => {
if (filterText) {
let filteredPersonas: IPersonaProps[] = filterPersonasByText(filterText);
filteredPersonas = removeDuplicates(filteredPersonas,currentPersonas);
filteredPersonas = limitResults ? filteredPersonas.slice(0,limitResults) : filteredPersonas;
return filterPromise(filteredPersonas);
} else {
return [];
}
};
const filterPersonasByText = (filterText: string): IPersonaProps[] => {
return peopleList.filter(item => doesTextStartWith(item.text as string,filterText));
};
const filterPromise = (personasToReturn: IPersonaProps[]): IPersonaProps[] | Promise<IPersonaProps[]> => {
if (delayResults) {
return convertResultsToPromise(personasToReturn);
} else {
return personasToReturn;
}
};
const returnMostRecentlyUsed = (currentPersonas: IPersonaProps[]): IPersonaProps[] | Promise<IPersonaProps[]> => {
return filterPromise(removeDuplicates(mostRecentlyUsed,currentPersonas));
};
const onRemoveSuggestion = (item: IPersonaProps): void => {
const indexPeopleList: number = peopleList.indexOf(item);
const indexMostRecentlyUsed: number = mostRecentlyUsed.indexOf(item);
if (indexPeopleList >= 0) {
const newPeople: IPersonaProps[] = peopleList
.slice(0,indexPeopleList)
.concat(peopleList.slice(indexPeopleList + 1));
setPeopleList(newPeople);
}
if (indexMostRecentlyUsed >= 0) {
const newSuggestedPeople: IPersonaProps[] = mostRecentlyUsed
.slice(0,indexMostRecentlyUsed)
.concat(mostRecentlyUsed.slice(indexMostRecentlyUsed + 1));
setMostRecentlyUsed(newSuggestedPeople);
}
};
const ondisabledButtonClick = (): void => {
setIsPickerdisabled(!isPickerdisabled);
};
const onToggleDelayResultsChange = (): void => {
setDelayResults(!delayResults);
};
return (
<div>
<normalPeoplePicker
// eslint-disable-next-line react/jsx-no-bind
onResolveSuggestions={onFilterChanged}
// eslint-disable-next-line react/jsx-no-bind
onEmptyInputFocus={returnMostRecentlyUsed}
getTextFromItem={getTextFromItem}
pickerSuggestionsprops={suggestionProps}
className={'ms-PeoplePicker'}
key={'normal'}
// eslint-disable-next-line react/jsx-no-bind
onRemoveSuggestion={onRemoveSuggestion}
onValidateInput={validateInput}
removeButtonAriaLabel={'Remove'}
inputProps={{
onBlur: (ev: React.FocusEvent<HTMLInputElement>) => console.log('onBlur called'),onFocus: (ev: React.FocusEvent<HTMLInputElement>) => console.log('onFocus called'),'aria-label': 'People Picker',}}
componentRef={picker}
onInputChange={onInputChange}
resolveDelay={300}
disabled={isPickerdisabled}
/>
<CheckBox
label="disable People Picker"
checked={isPickerdisabled}
// eslint-disable-next-line react/jsx-no-bind
onChange={ondisabledButtonClick}
styles={checkBoxStyles}
/>
<CheckBox
label="Delay Suggestion Results"
defaultChecked={delayResults}
// eslint-disable-next-line react/jsx-no-bind
onChange={onToggleDelayResultsChange}
styles={checkBoxStyles}
/>
</div>
);
};
function doesTextStartWith(text: string,filterText: string): boolean {
return text.toLowerCase().indexOf(filterText.toLowerCase()) === 0;
}
function removeDuplicates(personas: IPersonaProps[],possibleDupes: IPersonaProps[]) {
return personas.filter(persona => !listContainsPersona(persona,possibleDupes));
}
function listContainsPersona(persona: IPersonaProps,personas: IPersonaProps[]) {
if (!personas || !personas.length || personas.length === 0) {
return false;
}
return personas.filter(item => item.text === persona.text).length > 0;
}
function convertResultsToPromise(results: IPersonaProps[]): Promise<IPersonaProps[]> {
return new Promise<IPersonaProps[]>((resolve,reject) => setTimeout(() => resolve(results),2000));
}
function getTextFromItem(persona: IPersonaProps): string {
return persona.text as string;
}
function validateInput(input: string): ValidationState {
if (input.indexOf('@') !== -1) {
return ValidationState.valid;
} else if (input.length > 1) {
return ValidationState.warning;
} else {
return ValidationState.invalid;
}
}
/**
* Takes in the picker input and modifies it in whichever way
* the caller wants,i.e. parsing entries copied from Outlook (sample
* input: "Aaron Reid <aaron>").
*
* @param input The text entered into the picker.
*/
function onInputChange(input: string): string {
const outlookRegEx = /<.*>/g;
const emailAddress = outlookRegEx.exec(input);
if (emailAddress && emailAddress[0]) {
return emailAddress[0].substring(1,emailAddress[0].length - 1);
}
return input;
}
解决方法
呈现建议列表的组件的固定宽度为180px。看看PeoplePickerItemSuggestion.styles.ts。
您可以做的是修改此类.ms-PeoplePicker-Persona
:
.ms-PeoplePicker-Persona {
width: 260px; // Or what ever you want
}
更新-评论解决方案
更改{em> PeoplePickerItemSuggestion组件
的width
槽styles
属性
const onRenderSuggestionsItem = (personaProps,suggestionsProps) => (
<PeoplePickerItemSuggestion
personaProps={personaProps}
suggestionsProps={suggestionsProps}
styles={{ personaWrapper: { width: '100%' }}}
/>
);
<NormalPeoplePicker
onRenderSuggestionsItem={onRenderSuggestionsItem}
pickerCalloutProps={{ calloutWidth: 500 }}
...restProps
/>
有关如何自定义组件的更多信息,请阅读Component Styling。