@rcsb/rcsb-saguaro-app
Version:
RCSB 1D Saguaro Web App
86 lines (85 loc) • 3.22 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PaginationItemComponent = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const AbstractMenuItemComponent_1 = require("../AbstractMenuItemComponent");
class PaginationItemComponent extends AbstractMenuItemComponent_1.AbstractMenuItemComponent {
constructor() {
super(...arguments);
this.state = {
after: this.props.after,
first: this.props.first > this.props.count ? this.props.count : this.props.first
};
}
render() {
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { onClick: () => this.next(-this.state.first), role: this.role(-this.state.first), className: "d-inline-block text-center" + " " + this.textColor(-this.state.first), style: { width: 20 }, children: "\u276E" }), (0, jsx_runtime_1.jsxs)("div", { className: "d-inline-block text-center", style: { width: 90 }, children: [this.state.after + 1, " - ", this.state.after + this.state.first] }), (0, jsx_runtime_1.jsx)("div", { onClick: () => this.next(this.state.first), role: this.role(this.state.first), className: "d-inline-block text-center" + " " + this.textColor(this.state.first), style: { width: 20 }, children: "\u276F" })] }));
}
componentDidUpdate(prevProps, prevState, snapshot) {
super.componentDidUpdate(prevProps, prevState, snapshot);
}
next(n) {
this.switchAction({
middle: () => {
this.setState({ after: (this.state.after + n) });
return undefined;
},
end: () => {
this.setState({ after: this.props.count - n });
return undefined;
},
start: () => {
this.setState({ after: 0 });
return undefined;
},
out: () => {
return undefined;
},
}, n);
}
role(n) {
return this.switchAction({
middle: () => {
return "button";
},
end: () => {
return "button";
},
start: () => {
return "button";
},
out: () => {
return undefined;
},
}, n);
}
textColor(n) {
return this.switchAction({
middle: () => {
return "text-white";
},
end: () => {
return "text-white";
},
start: () => {
return "text-white";
},
out: () => {
return "text-opacity-25 text-primary";
},
}, n);
}
switchAction(x, n) {
const O = n > 0 ? this.state.after + n : this.state.after;
if ((O + n) >= 0 && (O + n) <= this.props.count) {
return x.middle();
}
else if ((O + n) >= 0 && O != this.props.count) {
return x.end();
}
else if (O != 0 && n < 0) {
return x.start();
}
return x.out();
}
}
exports.PaginationItemComponent = PaginationItemComponent;