如何更改NormalPeoplePicker下拉菜单的宽度

如何解决如何更改NormalPeoplePicker下拉菜单的宽度

我正在使用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
/>

工作Codepen example

有关如何自定义组件的更多信息，请阅读Component Styling。