Skip to content

List: Add a _notifyPageChanges function #3990

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cschleiden merged 4 commits into from
Feb 16, 2018
Merged

List: Add a _notifyPageChanges function #3990

Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1a855a4
Add a _notifyPageChanges function
Feb 15, 2018
81a6ab5
buidl fix
Feb 15, 2018
4395d0a
nit comments
Feb 15, 2018
fa966ca
change file
Feb 15, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 51 additions & 25 deletions packages/office-ui-fabric-react/src/components/List/List.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -435,7 +435,7 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
const {
page: {
items,
startIndex
startIndex
},
...divProps
} = pageProps;
Expand Down Expand Up @@ -572,11 +572,13 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
let newListState = this._buildPages(props);
let oldListPages = this.state.pages;

this._notifyPageChanges(oldListPages as IPage[], newListState.pages as IPage[]);

this.setState(newListState, () => {
// If we weren't provided with the page height, measure the pages
if (!props.getPageHeight) {
// If measured version is invalid since we've updated the DOM
const heightsChanged = this._updatePageMeasurements(oldListPages as IPage[], newListState.pages as IPage[]);
const heightsChanged = this._updatePageMeasurements(newListState.pages as IPage[]);

// On first render, we should re-measure so that we don't get a visual glitch.
if (heightsChanged) {
Expand All @@ -598,7 +600,51 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
});
}

private _updatePageMeasurements(oldPages: IPage[], newPages: IPage[]) {
/**
* Notify consumers that the rendered pages have changed
* @param oldPages The old pages
* @param newPages The new pages

@cschleiden cschleiden Feb 15, 2018

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

add props?

*/
private _notifyPageChanges(oldPages: IPage[], newPages: IPage[], props: IListProps = this.props) {
const {
onPageAdded,
onPageRemoved
} = props;

if (onPageAdded || onPageRemoved) {
const renderedIndexes: {
[index: number]: IPage;
} = {};

for (let i = 0; i < oldPages.length; i++) {

@cschleiden cschleiden Feb 15, 2018

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for (const page of oldPages) {?

let page = oldPages[i];

if (page.items) {
renderedIndexes[page.startIndex] = page;
}
}

for (let i = 0; i < newPages.length; i++) {

@cschleiden cschleiden Feb 15, 2018

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for (const page of newPages) {?

@cschleiden cschleiden Feb 15, 2018

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see, just moved the code. Might be fine then.

let page = newPages[i];

if (page.items) {
if (!renderedIndexes[page.startIndex]) {
this._onPageAdded(page);
} else {
delete renderedIndexes[page.startIndex];
}
}
}

for (let index in renderedIndexes) {
if (renderedIndexes.hasOwnProperty(index)) {
this._onPageRemoved(renderedIndexes[index]);
}
}
}
}

private _updatePageMeasurements(pages: IPage[]) {
const renderedIndexes: {
[index: number]: IPage;
} = {};
Expand All @@ -610,31 +656,11 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
return heightChanged;
}

for (let i = 0; i < oldPages.length; i++) {
let page = oldPages[i];

if (page.items) {
renderedIndexes[page.startIndex] = page;
}
}

for (let i = 0; i < newPages.length; i++) {
let page = newPages[i];
for (let i = 0; i < pages.length; i++) {
let page = pages[i];

if (page.items) {
heightChanged = this._measurePage(page) || heightChanged;

if (!renderedIndexes[page.startIndex]) {
this._onPageAdded(page);
} else {
delete renderedIndexes[page.startIndex];
}
}
}

for (let index in renderedIndexes) {
if (renderedIndexes.hasOwnProperty(index)) {
this._onPageRemoved(renderedIndexes[index]);
}
}

Expand Down