命令栏太小时隐藏操作标签

Question

预期行为

这是我要通过CommandBar实现的目标。

当项目标签没有足够的空间时，我想隐藏标签，而不要进入溢出菜单。调整CommandBar的大小时，如果有足够的空间，我希望重新显示标签。

我可以使用iconOnly道具和onReduceData回调来隐藏标签。

然后，我尝试在调整CommandBar的大小时使用onGrowData恢复iconOnly，但是由于溢出中没有任何项目，因此永远不会调用回调。

当前行为

这是简化代码：

<CommandBar
className='CommandBar'
items={[{
    iconProps: { iconName: 'Previous' },
    key: 'FindPrevious',
    onClick: () => { this.findPrevious() },
    text: 'Find Previous',
},
{
    iconProps: { iconName: 'Next' },
    key: 'FindNext',
    onClick: () => { this.findNext() },
    text: 'Find Next',
}]}
farItems={[{
    iconProps: { iconName: 'Search' },
    key: 'FindAll',
    onClick: this.findAll,
    text: 'Find All',
}]}

onReduceData={this.onReduceData}
/>

private onReduceData = (data: ICommandBarData): any => {
    data.primaryItems[0].iconOnly = true;
    data.primaryItems[1].iconOnly = true;
    return data;
}