honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1353 from AbhishekGarg/AbhishekGarg-accordionPaging

This commit is contained in:
Hugo Bernier 2020-06-23 21:51:31 -04:00 committed by GitHub
parent 1fe2cd381b a4c26fc25d
commit e989edf1f4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
samples/react-accordion/src/webparts/reactAccordion/components/IReactAccordionState.ts
View File

@ -2,6 +2,7 @@ import IAccordionListItem from '../models/IAccordionListItem';
export interface IReactAccordionState {
status: string;
pagedItems: IAccordionListItem[];
items: IAccordionListItem[];
listItems: IAccordionListItem[];
isLoading: boolean;

31
samples/react-accordion/src/webparts/reactAccordion/components/ReactAccordion.tsx
View File

@ -26,6 +26,7 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
super(props);
this.state = {
status: this.listNotConfigured(this.props) ? 'Please configure list in Web Part properties' : 'Ready',
pagedItems: [],
items: [],
listItems: [],
isLoading: false,
@ -52,7 +53,10 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
event === null ||
event === "") {
let listItemsCollection = [...this.state.listItems];
this.setState({ items: listItemsCollection.splice(0, this.props.maxItemsPerPage) });
this.setState({
items: listItemsCollection,
pagedItems: listItemsCollection.slice(0, this.props.maxItemsPerPage)
});
}
else {
var updatedList = [...this.state.listItems];
@ -61,7 +65,10 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
event.toLowerCase()) !== -1 || item.Description.toLowerCase().search(
event.toLowerCase()) !== -1;
});
this.setState({ items: updatedList });
this.setState({
items: updatedList,
pagedItems: updatedList.slice(0, this.props.maxItemsPerPage)
});
}
}
@ -83,7 +90,8 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
this.setState({
status: "",
items: listItemsCollection.splice(0, this.props.maxItemsPerPage),
pagedItems: listItemsCollection.slice(0, this.props.maxItemsPerPage),
items: response.value,
listItems: response.value,
isLoading: false,
loaderMessage: ""
@ -91,7 +99,7 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
}, (error: any): void => {
this.setState({
status: 'Loading all items failed with error: ' + error,
items: [],
pagedItems: [],
isLoading: false,
loaderMessage: ""
});
@ -102,18 +110,19 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
public render(): React.ReactElement<IReactAccordionProps> {
let displayLoader;
let faqTitle;
let { listItems } = this.state;
let { items } = this.state;
let pageCountDivisor: number = this.props.maxItemsPerPage;
let pageCount: number;
let pageButtons = [];
let _pagedButtonClick = (pageNumber: number, listData: any) => {
let startIndex: number = (pageNumber - 1) * pageCountDivisor;
let endIndex = startIndex + pageCountDivisor;
let listItemsCollection = [...listData];
this.setState({ items: listItemsCollection.splice(startIndex, pageCountDivisor) });
this.setState({ pagedItems: listItemsCollection.slice(startIndex, endIndex) });
};
const items: JSX.Element[] = this.state.items.map((item: IAccordionListItem, i: number): JSX.Element => {
const pagedItems: JSX.Element[] = this.state.pagedItems.map((item: IAccordionListItem, i: number): JSX.Element => {
return (
<AccordionItem>
<AccordionItemTitle className="accordion__title">
@ -139,11 +148,11 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
displayLoader = (null);
}
if (this.state.listItems.length > 0) {
pageCount = Math.ceil(this.state.listItems.length / pageCountDivisor);
if (items.length > 0) {
pageCount = Math.ceil(items.length / pageCountDivisor);
}
for (let i = 0; i < pageCount; i++) {
pageButtons.push(<PrimaryButton onClick={() => { _pagedButtonClick(i + 1, listItems); }}> {i + 1} </PrimaryButton>);
pageButtons.push(<PrimaryButton onClick={() => { _pagedButtonClick(i + 1, items); }}> {i + 1} </PrimaryButton>);
}
return (
<div className={styles.reactAccordion}>
@ -164,7 +173,7 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
<div className='ms-Grid-col ms-u-lg12'>
{this.state.status}
<Accordion accordion={false}>
{items}
{pagedItems}
</Accordion>
</div>
</div>