Нужно ли что-то конкретное, чтобы использовать пользовательский интерфейс Fabri c PeoplePicker с React? - PullRequest
1 голос
/ 19 марта 2020

Я пытаюсь использовать Microsoft Control PeoplePicker из пользовательского интерфейса Fabri c, чтобы создать ощущение Office в моем приложении. Я могу использовать элементы управления, такие как Dropdown и button, но когда я хочу использовать PeoplePicker, я получаю сообщение об ошибке в коде, даже если ничего не меняю.

Чтобы запустить код компонента, я скопировал и вставил Normal Выбор людей из https://developer.microsoft.com/en-us/fabric# / controls / web / peoplepicker , и я получаю две ошибки (на данный момент).

  1. Строка 48:66: Ошибка синтаксического анализа: неожиданно токен, ожидаемый "," и моя строка 48:
    return peopleList.filter(item => doesTextStartWith(item.text as string, filterText));
    , указывающая item.text as string. Я предполагаю, что эта ошибка происходит из-за использования as string в JS коде. Когда я заменяю все as string на .toString(), ошибка исчезает.
  2. Неожиданный токен (26:79) и моя строка 26:
    const [mostRecentlyUsed, setMostRecentlyUsed] = React.useState<IPersonaProps[]>(mru);
    указывая [] после IPersonaProps.

Поскольку я беру код от Microsoft, и он не работает на моем компьютере, я предполагаю, что что-то упустил. Я ожидал получить тот же результат, что и образец на их сайте.

У меня есть office-ui-fabri c -react в модуле моего узла.

Вот мой код:

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[]> => {
setMostRecentlyUsed(removeDuplicates(mostRecentlyUsed, currentPersonas));
return filterPromise(mostRecentlyUsed);
  };

  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
    onResolveSuggestions={onFilterChanged}
    onEmptyInputFocus={returnMostRecentlyUsed}
    getTextFromItem={getTextFromItem}
    pickerSuggestionsProps={suggestionProps}
    className={'ms-PeoplePicker'}
    key={'normal'}
    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} onChange={onDisabledButtonClick} styles={checkboxStyles} />
  <Checkbox
    label="Delay Suggestion Results"
    defaultChecked={delayResults}
    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;
}

, и я использую это в своем приложении. Я поставил <...>, чтобы код был коротким. Все работает в этом разделе.

import React from 'react';
import { Fabric } from 'office-ui-fabric-react/lib/Fabric'
import PeoplePickerNormalExample from "./components/MyCustom_Picker.js"

class App extends React.Component {
  render() {
    return ( 
      <Fabric className = "App" >
        <PeoplePickerNormalExample / >
        <...>
      </Fabric>
    );
  }
}

export default App;

1 Ответ

0 голосов
/ 20 марта 2020

Я не думаю, что ваше приложение написано на Typescript (TS). Примеры пользовательского интерфейса Office, которые вы копируете, находятся в TS. Чтобы преобразовать примеры обратно в ваниль JS, удалите типы (например, : string, : number, : IPersonaProps[]).

Проверьте эту ссылку: https://www.typescriptlang.org/play/. Вставьте туда пример кода, чтобы попытаться преобразовать его в JS.

...