honeymoose/sp-dev-fx-webparts
1
0
Fork 0
mirror of https://github.com/pnp/sp-dev-fx-webparts.git synced 2025-02-15 01:15:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1353 from AbhishekGarg/AbhishekGarg-accordionPaging

Browse Source
This commit is contained in:
Hugo Bernier 2020-06-23 21:51:31 -04:00 committed by GitHub
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 { export interface IReactAccordionState {
status: string; status: string;
pagedItems: IAccordionListItem[];
items: IAccordionListItem[]; items: IAccordionListItem[];
listItems: IAccordionListItem[]; listItems: IAccordionListItem[];
isLoading: boolean; 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); super(props);
this.state = { this.state = {
status: this.listNotConfigured(this.props) ? 'Please configure list in Web Part properties' : 'Ready', status: this.listNotConfigured(this.props) ? 'Please configure list in Web Part properties' : 'Ready',
pagedItems: [],
items: [], items: [],
listItems: [], listItems: [],
isLoading: false, isLoading: false,
@ -52,7 +53,10 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
event === null || event === null ||
event === "") { event === "") {
let listItemsCollection = [...this.state.listItems]; 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 { else {
var updatedList = [...this.state.listItems]; 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 || item.Description.toLowerCase().search(
event.toLowerCase()) !== -1; 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({ this.setState({
status: "", status: "",
items: listItemsCollection.splice(0, this.props.maxItemsPerPage), pagedItems: listItemsCollection.slice(0, this.props.maxItemsPerPage),
items: response.value,
listItems: response.value, listItems: response.value,
isLoading: false, isLoading: false,
loaderMessage: "" loaderMessage: ""
@ -91,7 +99,7 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
}, (error: any): void => { }, (error: any): void => {
this.setState({ this.setState({
status: 'Loading all items failed with error: ' + error, status: 'Loading all items failed with error: ' + error,
items: [], pagedItems: [],
isLoading: false, isLoading: false,
loaderMessage: "" loaderMessage: ""
}); });
@ -102,18 +110,19 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
public render(): React.ReactElement<IReactAccordionProps> { public render(): React.ReactElement<IReactAccordionProps> {
let displayLoader; let displayLoader;
let faqTitle; let faqTitle;
let { listItems } = this.state; let { items } = this.state;
let pageCountDivisor: number = this.props.maxItemsPerPage; let pageCountDivisor: number = this.props.maxItemsPerPage;
let pageCount: number; let pageCount: number;
let pageButtons = []; let pageButtons = [];
let _pagedButtonClick = (pageNumber: number, listData: any) => { let _pagedButtonClick = (pageNumber: number, listData: any) => {
let startIndex: number = (pageNumber - 1) * pageCountDivisor; let startIndex: number = (pageNumber - 1) * pageCountDivisor;
let endIndex = startIndex + pageCountDivisor;
let listItemsCollection = [...listData]; 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 ( return (
<AccordionItem> <AccordionItem>
<AccordionItemTitle className="accordion__title"> <AccordionItemTitle className="accordion__title">
@ -139,11 +148,11 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
displayLoader = (null); displayLoader = (null);
} }
if (this.state.listItems.length > 0) { if (items.length > 0) {
pageCount = Math.ceil(this.state.listItems.length / pageCountDivisor); pageCount = Math.ceil(items.length / pageCountDivisor);
} }
for (let i = 0; i < pageCount; i++) { 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 ( return (
<div className={styles.reactAccordion}> <div className={styles.reactAccordion}>
@ -164,7 +173,7 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
<div className='ms-Grid-col ms-u-lg12'> <div className='ms-Grid-col ms-u-lg12'>
{this.state.status} {this.state.status}
<Accordion accordion={false}> <Accordion accordion={false}>
{items} {pagedItems}
</Accordion> </Accordion>
</div> </div>
</div> </div>