From b6eaea811e4a5410cfc0f672718a4ab634035b39 Mon Sep 17 00:00:00 2001 From: Stauffer Taylor Date: Fri, 19 Jan 2018 15:47:35 -0800 Subject: [PATCH 1/2] Add callbacks for onDataReduced and onDataGrown --- .../src/components/CommandBar/CommandBar.base.tsx | 12 ++++++++++-- .../src/components/CommandBar/CommandBar.types.ts | 10 ++++++++++ 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/packages/experiments/src/components/CommandBar/CommandBar.base.tsx b/packages/experiments/src/components/CommandBar/CommandBar.base.tsx index efb96a9b73c7a..9161424602709 100644 --- a/packages/experiments/src/components/CommandBar/CommandBar.base.tsx +++ b/packages/experiments/src/components/CommandBar/CommandBar.base.tsx @@ -155,7 +155,7 @@ export class CommandBarBase extends BaseComponent implemen @autobind private _onReduceData(data: ICommandBarData): ICommandBarData | undefined { - const { endAligned } = this.props; + const { endAligned, onDataReduced } = this.props; let { primaryItems, overflowItems, cacheKey, farItems } = data; // Use first item if endAligned, otherwise use last item @@ -168,6 +168,10 @@ export class CommandBarBase extends BaseComponent implemen primaryItems = endAligned ? primaryItems.slice(1) : primaryItems.slice(0, -1); cacheKey = this._computeCacheKey(primaryItems, farItems!, !!overflowItems.length); + if (onDataReduced) { + onDataReduced(movedItem); + } + return { ...data, primaryItems, overflowItems, cacheKey }; } @@ -176,7 +180,7 @@ export class CommandBarBase extends BaseComponent implemen @autobind private _onGrowData(data: ICommandBarData): ICommandBarData | undefined { - const { endAligned } = this.props; + const { endAligned, onDataGrown } = this.props; let { primaryItems, overflowItems, cacheKey, minimumOverflowItems, farItems } = data; const movedItem = overflowItems[0]; @@ -189,6 +193,10 @@ export class CommandBarBase extends BaseComponent implemen primaryItems = endAligned ? [movedItem, ...primaryItems] : [...primaryItems, movedItem]; cacheKey = this._computeCacheKey(primaryItems, farItems!, !!overflowItems.length); + if (onDataGrown) { + onDataGrown(movedItem); + } + return { ...data, primaryItems, overflowItems, cacheKey }; } diff --git a/packages/experiments/src/components/CommandBar/CommandBar.types.ts b/packages/experiments/src/components/CommandBar/CommandBar.types.ts index 494f85ed0f4a9..53ead53555ebf 100644 --- a/packages/experiments/src/components/CommandBar/CommandBar.types.ts +++ b/packages/experiments/src/components/CommandBar/CommandBar.types.ts @@ -89,6 +89,16 @@ export interface ICommandBarProps extends React.HTMLAttributes { */ onGrowData?: (data: ICommandBarData) => ICommandBarData; + /** + * Function callback invoked when data has been reduced. + */ + onDataReduced?: (movedItem: ICommandBarItemProps) => void; + + /** + * Function callback invoked when data has been grown. + */ + onDataGrown?: (movedItem: ICommandBarItemProps) => void; + /** * Additional css class to apply to the command bar * @defaultvalue undefined From a1c4a78d94e19b756c959ec7ac105434068d7e3c Mon Sep 17 00:00:00 2001 From: Stauffer Taylor Date: Fri, 19 Jan 2018 15:49:06 -0800 Subject: [PATCH 2/2] Add change file --- .../AddPostReduceGrowCallbacks_2018-01-19-23-48.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/@uifabric/experiments/AddPostReduceGrowCallbacks_2018-01-19-23-48.json diff --git a/common/changes/@uifabric/experiments/AddPostReduceGrowCallbacks_2018-01-19-23-48.json b/common/changes/@uifabric/experiments/AddPostReduceGrowCallbacks_2018-01-19-23-48.json new file mode 100644 index 0000000000000..2f6089719fc9d --- /dev/null +++ b/common/changes/@uifabric/experiments/AddPostReduceGrowCallbacks_2018-01-19-23-48.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/experiments", + "comment": "Add callbacks for onDataReduced and onDataGrown", + "type": "minor" + } + ], + "packageName": "@uifabric/experiments", + "email": "staylo@microsoft.com" +} \ No newline at end of file