From 655e6c91222fc293d134ddd4c0ca62bc364daedf Mon Sep 17 00:00:00 2001 From: Su Su Date: Tue, 27 Feb 2018 20:25:16 +0800 Subject: [PATCH 1/2] Make ScrollablePane._sortStickies change elements only when needed --- .../ScrollablePane/ScrollablePane.base.tsx | 21 ++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.base.tsx b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.base.tsx index bc6f994b89434..b1a5a3ebed916 100644 --- a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.base.tsx +++ b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.base.tsx @@ -217,12 +217,23 @@ export class ScrollablePaneBase extends BaseComponent const bOffset = this._calculateOffsetParent(b.root); return aOffset - bOffset; }); - while (container.lastChild) { - container.removeChild(container.lastChild); + // Get number of elements that is already in order. + let elementsInOrder = 0; + while (elementsInOrder < container.children.length && elementsInOrder < stickyArr.length) { + if (container.children[elementsInOrder] === stickyArr[elementsInOrder].content) { + ++elementsInOrder; + } else { + break; + } + } + // Remove elements that is not in order if exist. + for (let i = container.children.length - 1; i >= elementsInOrder; --i) { + container.removeChild(container.children[i]); + } + // Append further elements if needed. + for (let i = elementsInOrder; i < stickyArr.length; ++i) { + container.appendChild(stickyArr[i].content); } - stickyArr.forEach((sticky) => { - container.appendChild(sticky.content); - }); } private _calculateOffsetParent(ele: HTMLElement): number { From a375722d7d617d4bb7b4b923ace181173479d364 Mon Sep 17 00:00:00 2001 From: Su Su Date: Tue, 27 Feb 2018 20:25:37 +0800 Subject: [PATCH 2/2] Add change file. --- .../ScrollablePane-sortStickies_2018-02-27-12-25.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/office-ui-fabric-react/ScrollablePane-sortStickies_2018-02-27-12-25.json diff --git a/common/changes/office-ui-fabric-react/ScrollablePane-sortStickies_2018-02-27-12-25.json b/common/changes/office-ui-fabric-react/ScrollablePane-sortStickies_2018-02-27-12-25.json new file mode 100644 index 0000000000000..5e7f93f614198 --- /dev/null +++ b/common/changes/office-ui-fabric-react/ScrollablePane-sortStickies_2018-02-27-12-25.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Make ScrollablePane._sortStickies change elements only when needed.", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "s@warmsea.net" +} \ No newline at end of file