@mikezimm/npmfunctions
Version:
Functions used in my SPFx webparts
188 lines • 10.3 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var Icon_1 = require("office-ui-fabric-react/lib/Icon");
var PageArrows = /** @class */ (function (_super) {
__extends(PageArrows, _super);
function PageArrows(props) {
var _this = _super.call(this, props) || this;
_this._maxFirst = 0;
_this._maxLast = 0;
_this.state = {
firstVisible: 0,
lastVisible: _this.props.itemsPerPage - 1,
};
return _this;
}
PageArrows.prototype._updateMaxFirst = function () {
this._maxFirst = this.props.itemsPerPage === 0 ? 0 : Math.floor(this.props.itemCount / this.props.itemsPerPage) * this.props.itemsPerPage;
};
PageArrows.prototype._updateMaxLast = function () {
this._maxLast = this._maxFirst + this.props.itemsPerPage;
};
PageArrows.prototype.componentDidMount = function () {
this._updateMaxFirst();
this._updateMaxLast();
};
PageArrows.prototype.componentDidUpdate = function (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 {
var 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
*
*
*/
PageArrows.prototype.render = function () {
var arrowSize = this.props.fontSize ? "".concat(this.props.fontSize, "px") : '28px';
var fontSize = this.props.fontSize ? "".concat(this.props.fontSize - 4, "px") : '24px';
var leftActive = this.state.firstVisible === 0 ? false : true;
var rightActive = this.state.lastVisible === this.props.itemCount - 1 ? false : true;
var leftArrowStyles = { root: { padding: '5px 10px', fontSize: arrowSize, cursor: leftActive === true ? 'pointer' : 'default', opacity: leftActive === true ? 1 : .2 } };
var rightArrowStyles = { root: { padding: '5px 10px', fontSize: arrowSize, cursor: rightActive === true ? 'pointer' : 'default', opacity: rightActive === true ? 1 : .2 } };
var bigLeftActive = this.state.firstVisible === 0 ? false : true;
var bigRightActive = this.state.firstVisible >= this._maxFirst || this.state.lastVisible === this.props.itemCount - 1 ? false : true;
var bigLeftArrowStyles = { root: { padding: '5px 10px', fontSize: arrowSize, cursor: bigLeftActive === true ? 'pointer' : 'default', opacity: bigLeftActive === true ? 1 : .2 } };
var bigRightArrowStyles = { root: { padding: '5px 10px', fontSize: arrowSize, cursor: bigRightActive === true ? 'pointer' : 'default', opacity: bigRightActive === true ? 1 : .2 } };
var pageArrowStyles = __assign({ paddingLeft: '30px', display: 'flex', flexWrap: 'nowrap', flexDirection: 'row', alignItems: 'center' }, this.props.pageArrowStyles);
var maxFirstDebug = this.props.debugMode !== true ? null : React.createElement("div", { style: { paddingLeft: '30px' } },
"_maxFirst: ",
this._maxFirst);
var maxLastDebug = this.props.debugMode !== true ? null : React.createElement("div", { style: { paddingLeft: '30px' } },
"_maxLast: ",
this._maxLast);
var PageArrowsComponent = this.props.itemCount <= this.props.itemsPerPage ?
React.createElement("div", null,
"Showing all ",
this.props.itemCount,
" items.")
: React.createElement("div", { style: pageArrowStyles },
React.createElement(Icon_1.Icon, { iconName: 'DoubleChevronLeftMed', onClick: this._bigLeftPage.bind(this), title: "Jump backward ".concat(this.props.itemsPerPage * 5, " items"), styles: bigLeftArrowStyles }),
React.createElement(Icon_1.Icon, { iconName: 'ChevronLeftMed', onClick: this._leftPage.bind(this), title: "Show previous ".concat(this.props.itemsPerPage, " items"), styles: leftArrowStyles }),
React.createElement("span", { style: { fontSize: fontSize, textAlign: 'center' } },
" ",
React.createElement("span", null,
" ", "".concat(this.props.fontSize && this.props.fontSize >= 32 ? 'showing' : '', " items: ")),
React.createElement("span", { style: { whiteSpace: 'nowrap' } }, "".concat(this.state.firstVisible + 1, " - ").concat(this.state.lastVisible + 1))),
React.createElement(Icon_1.Icon, { iconName: 'ChevronRightMed', onClick: this._rightPage.bind(this), title: "Show next ".concat(this.props.itemsPerPage, " items"), styles: rightArrowStyles }),
React.createElement(Icon_1.Icon, { iconName: 'DoubleChevronRight12', onClick: this._bigRightPage.bind(this), title: "Jump forward ".concat(this.props.itemsPerPage * 5, " items"), styles: bigRightArrowStyles }),
maxFirstDebug,
maxLastDebug);
return (PageArrowsComponent);
};
PageArrows.prototype._rightPage = function () {
this._updatePage(this.state.firstVisible + this.props.itemsPerPage);
};
PageArrows.prototype._leftPage = function () {
this._updatePage(this.state.firstVisible - this.props.itemsPerPage);
};
PageArrows.prototype._bigRightPage = function () {
if (this.state.firstVisible < this._maxFirst) {
this._updatePage(this.state.firstVisible + this.props.itemsPerPage * 5);
}
};
PageArrows.prototype._bigLeftPage = function () {
this._updatePage(this.state.firstVisible - this.props.itemsPerPage * 5);
};
PageArrows.prototype._updatePage = function (firstVisible) {
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
var lastVisible = firstVisible + this.props.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 - this.props.itemsPerPage;
}
this.setState({
firstVisible: firstVisible,
lastVisible: lastVisible,
});
this.props.setParentStateFirstLast(firstVisible, lastVisible);
};
return PageArrows;
}(React.Component));
exports.default = PageArrows;
//# sourceMappingURL=PageArrows.js.map