Новый пользовательский интерфейс Office React TagPicker - PullRequest
Новая
       9

Новый пользовательский интерфейс Office React TagPicker

0 голосов
/ 21 мая 2018

Сводка

Кто-нибудь знает, как сделать так, чтобы TagPicker UI Fabric React добавлял новый элемент, когда в предложениях ничего не введено?

IЯ также хочу отправить AJAX-запрос в службу для добавления нового элемента в бэкэнд.

Желаемая функциональность

Когда кто-то что-то печатаетв средстве выбора, которого нет в опциях, они должны иметь возможность добавить его в качестве новой опции и вызвать некоторый другой код, чтобы добавить эту новую опцию в внутренний API.

То, что я пробовал до сих пор

Мне удалось добавить кнопку на pickerSuggestionsProps.onRenderNoResultFound с обработчиком кликов, который запустит некоторый код для добавления ключевого слова, но это включает в себя onChange для отслеживания того, что набрал пользователь, но это нарушает выбор предложений (когда обрабатывается onChange, пользователь не может выбирать предложения из списка, который появляется под средством выбора).

Ответы [ 2 ]

0 голосов
/ 16 мая 2019

Оказывается, это было довольно просто.Вы просто должны установить для свойства createGenericItem метод, который возвращает фиктивный элемент: 

createGenericItem={(input: string) => {
  return { key: '', name: input} as ITag;
}}
0 голосов
/ 09 мая 2019

Я предположил, что этот элемент управления улучшен на GitHub .

Этот codepen Я получил ответ из полученного там ответа, показывает, как это делается намомент ... 

const {
TagPicker,  Fabric, mergeStyles
} = window.Fabric;

const _testTags: ITag[] = [
  'black',
  'blue',
  'brown',
  'cyan',
  'green',
  'magenta',
  'mauve',
  'orange',
  'pink',
  'purple',
  'red',
  'rose',
  'violet',
  'white',
  'yellow'
].map(item => ({ key: item, name: item, isNewItem: false }));

const newItem = mergeStyles({ color: '#f00', background: '#ddf', padding: '10px' });
const existingItem = mergeStyles({ color: '#222', padding: '10px' });

class TagPickerBasicExample extends React.Component<{}, {}> {
  private picker = React.createRef<IBasePicker<ITag>>();

  public render() {
    return <TagPicker
              onResolveSuggestions={this.onResolveSuggestions}
              componentRef={this.picker}
              onRenderSuggestionsItem={this.onRenderSuggestionsItem}
              onItemSelected={this.onItemSelected}
            />;
  }

  private onRenderSuggestionsItem = (props: any, itemProps: any): JSX.Element => {
    console.log({props, itemProps})
    return <div className={props.isNewItem ? newItem : existingItem} key={props.key}>
      {props.name}
      </div>;
  };

  private onResolveSuggestions = (filterText: string, tagList: ITag[]): ITag[] => {
     console.log({filterText, tagList});

    const existingMatches = filterText
      ? _testTags
          .filter(tag => tag.name.toLowerCase().indexOf(filterText.toLowerCase()) === 0)
          .filter(tag => !this.listContainsDocument(tag, tagList))
      : [];

    return existingMatches.some(a=> a.key === filterText) ? 
    existingMatches :
    [{ key: filterText, name: filterText, isNewItem: true } as ITag].concat(existingMatches);
  };

  private onItemSelected = (item: ITag): ITag | null => {
    if(item && item.isNewItem) {
      alert("New item added, make any necessary backend calls.");
    }
    return item;
  };

  private listContainsDocument(tag: ITag, tagList?: ITag[]) {
    if (!tagList || !tagList.length || tagList.length === 0) {
      return false;
    }
    return tagList.filter(compareTag => compareTag.key === tag.key).length > 0;
  }
}

ReactDOM.render(
  <Fabric>
    <TagPickerBasicExample />
  </Fabric>,
  document.getElementById('content')
);

Надеюсь, это поможет - это действительно помогло мне.

...