@mikezimm/fps-library-v2
Version:
Library of reusable typescript/javascript functions, interfaces and constants
147 lines • 8.07 kB
JavaScript
import * as React from 'react';
import { Icon, } from '@fluentui/react/lib/Icon';
export default class PageArrows extends React.Component {
_updateMaxFirst() {
this._maxFirst = this.props.itemsPerPage === 0 ? 0 : Math.floor(this.props.itemCount / this.props.itemsPerPage) * this.props.itemsPerPage;
}
_updateMaxLast() {
this._maxLast = this._maxFirst + this.props.itemsPerPage;
}
constructor(props) {
super(props);
this._maxFirst = 0;
this._maxLast = 0;
this.state = {
firstVisible: 0,
lastVisible: this.props.itemsPerPage - 1,
};
}
componentDidMount() {
this._updateMaxFirst();
this._updateMaxLast();
}
componentDidUpdate(prevProps) {
if (prevProps.resetArrows !== this.props.resetArrows) {
//https://github.com/mikezimm/drilldown7/issues/207
this._updateMaxFirst();
this._updateMaxLast();
this.setState({
firstVisible: 0,
lastVisible: this.props.itemsPerPage - 1,
});
}
else {
let refresh = false;
if (prevProps.itemsPerPage !== this.props.itemsPerPage) {
refresh = true;
}
if (prevProps.itemCount !== this.props.itemCount) {
refresh = true;
}
if (prevProps.debugMode !== this.props.debugMode) {
refresh = true;
}
if (refresh === true) {
this._updateMaxFirst();
this._updateMaxLast();
}
}
}
//
/***
* d8888b. d888888b d8888b. db db d8888b. d8888b. .d8b. d888888b d88888b
* 88 `8D `88' 88 `8D 88 88 88 `8D 88 `8D d8' `8b `~~88~~' 88'
* 88 88 88 88 88 88 88 88oodD' 88 88 88ooo88 88 88ooooo
* 88 88 88 88 88 88 88 88~~~ 88 88 88~~~88 88 88~~~~~
* 88 .8D .88. 88 .8D 88b d88 88 88 .8D 88 88 88 88.
* Y8888D' Y888888P Y8888D' ~Y8888P' 88 Y8888D' YP YP YP Y88888P
*
*
*/
render() {
const { disabled, debugMode, itemsPerPage, itemCount } = this.props;
const { firstVisible, lastVisible } = this.state;
const arrowSize = this.props.fontSize ? `${this.props.fontSize}px` : '28px';
const fontSize = this.props.fontSize ? `${this.props.fontSize - 4}px` : '24px';
const leftActive = disabled === true || firstVisible === 0 ? false : true;
const rightActive = disabled === true || lastVisible === itemCount - 1 ? false : true;
const leftArrowStyles = { root: { padding: '5px 4px', margin: '0px 2px', fontSize: arrowSize, cursor: leftActive === true ? 'pointer' : 'default', opacity: leftActive === true ? 1 : .2 } };
const rightArrowStyles = { root: { padding: '5px 4px', margin: '0px 2px', fontSize: arrowSize, cursor: rightActive === true ? 'pointer' : 'default', opacity: rightActive === true ? 1 : .2 } };
const bigLeftActive = disabled === true || firstVisible === 0 ? false : true;
const bigRightActive = disabled === true || firstVisible >= this._maxFirst || lastVisible === itemCount - 1 ? false : true;
const bigLeftArrowStyles = { root: { padding: '5px 4px', margin: '0px 2px', fontSize: arrowSize, cursor: bigLeftActive === true ? 'pointer' : 'default', opacity: bigLeftActive === true ? 1 : .2 } };
const bigRightArrowStyles = { root: { padding: '5px 4px', margin: '0px 2px', fontSize: arrowSize, cursor: bigRightActive === true ? 'pointer' : 'default', opacity: bigRightActive === true ? 1 : .2 } };
// const pageArrowStyles: React.CSSProperties = { ...{ paddingLeft: '30px', display: 'flex', flexWrap: 'nowrap', flexDirection: 'row', alignItems: 'center'}, ...this.props.pageArrowStyles } ;
// https://github.com/mikezimm/fps-library-v2/issues/64
const pageArrowStyles = { ...{ display: 'flex', flexWrap: 'nowrap', flexDirection: 'row', alignItems: 'center' }, ...this.props.pageArrowStyles };
const maxFirstDebug = debugMode !== true ? null : React.createElement("div", { style: { paddingLeft: '30px' } },
"_maxFirst: ",
this._maxFirst);
const maxLastDebug = debugMode !== true ? null : React.createElement("div", { style: { paddingLeft: '30px' } },
"_maxLast: ",
this._maxLast);
const PageArrowsComponent = itemCount <= itemsPerPage ?
React.createElement("div", null,
"Showing all ",
itemCount,
" items.")
: React.createElement("div", { style: pageArrowStyles },
React.createElement(Icon, { iconName: 'DoubleChevronLeftMed', onClick: this._bigLeftPage.bind(this), title: `Jump backward ${itemsPerPage * 5} items`, styles: bigLeftArrowStyles }),
React.createElement(Icon, { iconName: 'ChevronLeftMed', onClick: this._leftPage.bind(this), title: `Show previous ${itemsPerPage} items`, styles: leftArrowStyles }),
React.createElement("span", { style: { fontSize: fontSize, textAlign: 'center' } },
" ",
React.createElement("span", null,
" ",
`${this.props.fontSize && this.props.fontSize >= 32 ? 'showing' : ''} items: `),
React.createElement("span", { style: { whiteSpace: 'nowrap' } }, `${firstVisible + 1} - ${lastVisible + 1}`)),
React.createElement(Icon, { iconName: 'ChevronRightMed', onClick: this._rightPage.bind(this), title: `Show next ${itemsPerPage} items`, styles: rightArrowStyles }),
React.createElement(Icon, { iconName: 'DoubleChevronRight12', onClick: this._bigRightPage.bind(this), title: `Jump forward ${itemsPerPage * 5} items`, styles: bigRightArrowStyles }),
maxFirstDebug,
maxLastDebug);
return (PageArrowsComponent);
}
_rightPage() {
if (this.props.disabled === true)
return;
this._updatePage(this.state.firstVisible + this.props.itemsPerPage);
}
_leftPage() {
if (this.props.disabled === true)
return;
this._updatePage(this.state.firstVisible - this.props.itemsPerPage);
}
_bigRightPage() {
if (this.props.disabled === true)
return;
if (this.state.firstVisible < this._maxFirst) {
this._updatePage(this.state.firstVisible + this.props.itemsPerPage * 5);
}
}
_bigLeftPage() {
if (this.props.disabled === true)
return;
this._updatePage(this.state.firstVisible - this.props.itemsPerPage * 5);
}
_updatePage(firstVisible) {
const { itemsPerPage } = this.props;
if (firstVisible < 0) {
firstVisible = 0;
} //Make sure firstVisible is always at least 0;
if (firstVisible > this._maxFirst) {
firstVisible = this._maxFirst;
} //Make sure the firstVisible is never more than the _maxFirst
let lastVisible = firstVisible + itemsPerPage - 1; //Must be -1 because the first visible really counts in the total itemsPerPage
if (lastVisible > this.props.itemCount - 1) {
lastVisible = this.props.itemCount - 1;
} //Make sure lastVisible is always <= last item index
if (firstVisible > lastVisible) { // Revert the itemsPerPage update since it would be greater than the lastVisible
firstVisible = firstVisible - itemsPerPage;
}
this.setState({
firstVisible: firstVisible,
lastVisible: lastVisible,
});
this.props.setParentStateFirstLast(firstVisible, lastVisible);
}
}
//# sourceMappingURL=PageArrows.js.map