Musím něco konkrétního použití UI Fabric PeoplePicker s Reagovat?

hlasů
1

Snažím se používat Microsoft ovládací PeoplePicker od UI Fabric získat Office-pocit v mé aplikaci. Jsem schopen použít ovladač jako rozevíracího a knoflík, ale když chci použít PeoplePicker, dostanu chybu v kódu, i když jsem se nic nezmění.

Chcete-li spustit svůj kód komponent, jsem copy-paste normálními lidmi Picker od https://developer.microsoft.com/en-us/fabric#/controls/web/peoplepicker a mám dvě chyby (prozatím).

  1. Linka 48:66: chyba při zpracovávání: Neočekávaný token očekává „“ a moje linka 48:
    return peopleList.filter(item => doesTextStartWith(item.text as string, filterText));
    polohovací item.text as string. Myslím, že tato chyba pochází z použití as stringv JS kódu. Když jsem nahradit všechny as stringse .toString(), chybové disapear.
  2. Neočekávaný token (26:79) a moje linka 26:
    const [mostRecentlyUsed, setMostRecentlyUsed] = React.useState<IPersonaProps[]>(mru);
    polohovací []po IPersonaProps.

Vzhledem k tomu, beru kód od společnosti Microsoft, a to nefunguje na mém počítači, myslím, že něco chybí. Čekal jsem, že se dostat stejný výsledek jako vzorek na svých internetových stránkách.

Mám kancelář-ui-textilie reagují modul mého uzlu.

Tady je můj kód:

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;
}

a používám ho takhle ve svém App. Já jsem dal <...>, aby kód krátký. Vše funguje v tomto oddíle.

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;

Položena 19/03/2020 v 21:21
zdroj uživatelem
V jiných jazycích...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more