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

Question

预期的行为

这就是我想用CommandBar实现的目标.

当物品标签没有足够的空间时,我想隐藏标签,而不是进入溢出菜单.当我调整CommandBar的大小时,如果有足够的空间,我希望标签重新出现.

我可以使用iconOnlyprops和onReduceData回调来隐藏标签.

然后我尝试使用它onGrowData来恢复iconOnlycommandBar调整大小的时间,但由于溢出中没有项目,因此永远不会调用回调.

目前的行为

这是简化代码:

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