UNPKG

@rcsb/rcsb-saguaro-app

Version:
82 lines 3.02 kB
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime"; import { AbstractMenuItemComponent } from "../AbstractMenuItemComponent"; export class PaginationItemComponent extends 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 (_jsxs(_Fragment, { children: [_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" }), _jsxs("div", { className: "d-inline-block text-center", style: { width: 90 }, children: [this.state.after + 1, " - ", this.state.after + this.state.first] }), _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(); } } //# sourceMappingURL=PaginationItemComponent.js.map