Как настроить заголовок в компоненте GroupedList в библиотеке реагирования ui-fabric - PullRequest
Новая
       11

Как настроить заголовок в компоненте GroupedList в библиотеке реагирования ui-fabric

0 голосов
/ 20 сентября 2018

У меня проблемы с настройкой заголовка компонента GroupedList в библиотеке реагировать на пользовательский интерфейс.То, что я хотел бы сделать, это снять флажок и количество чисел (включая парантез).При щелчке (серой) строки поведение должно быть эквивалентно нажатию на значок шеврона (развернуть / свернуть дочерние элементы).В визуальном плане это то, что я пытаюсь сделать:

enter image description here

Компонент с исходным кодом для этого примера можно найти здесь.

После некоторых исследований я выяснил, что единственный способ добиться того, что я хочу сделать с этим компонентом, - передать groupProps компоненту GroupedList, что-то вроде этого: 

public render(): JSX.Element {
return (
  <FocusZone>
    <SelectionZone selection={this._selection} selectionMode={SelectionMode.multiple}>
      <GroupedList
        items={_items}
        onRenderCell={this._onRenderCell}
        selection={this._selection}
        selectionMode={SelectionMode.multiple}
        groups={_groups}
        // adding this overrides the default header render 
        groupProps={{
            onRenderHeader: this._onRenderHeader
          }}
      />
    </SelectionZone>
  </FocusZone>
);}


private _onRenderHeader(props: IGroupDividerProps): JSX.Element {
// code to change the header goes here
return (
    <div className={css('ms-GroupedListExample-header', FontClassNames.xLarge)}>
        Group1
    </div>
);}

Я просто не могу понять, что написать в _onRenderHeader, чтобы изменить заголовок, чтобы он выглядел и вел себя так, как я описал на картинке.Помощь очень ценится.

1 Ответ

0 голосов
/ 23 сентября 2018

Я делал нечто подобное в прошлом, вот список предложений по настройке заголовка в компоненте GroupedList.

Прежде всего, вы на правильном пути, событие onRenderHeader является подходящей точкой входа для такого рода настройки.Но вместо переопределения существующей разметки заголовка я бы предложил настроить существующий GroupHeader компонент : 

private _onRenderHeader(props: IGroupDividerProps): JSX.Element {

    //your changes goes here..

    return (
            <GroupHeader  {...props} />
    );
}

К скрыть проверить кнопку и информацию счетчика, установитьdisplay:none для имен классов check и headerCount, например: 

const headerCountStyle = {"display":"none"};
const checkButtonStyle = {"display":"none"};

<GroupHeader styles={{ "check": checkButtonStyle, "headerCount": headerCountStyle }}    {...props}   />

К добавить поведение переключения / свертывания для заголовка группы, зарегистрировать следующее событие: 

 const onToggleSelectGroup = () => {
        props.onToggleCollapse!(props.group!);
 }


<GroupHeader  {...props}  onToggleSelectGroup={onToggleSelectGroup} />

Вот демоверсия из оригинального примера

...