@rcsb/rcsb-saguaro-app
Version:
RCSB 1D Saguaro Web App
26 lines (25 loc) • 1.8 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Slider = void 0;
exports.actionIcon = actionIcon;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const react_bootstrap_1 = require("react-bootstrap");
const Operator_1 = require("../../../../RcsbUtils/Helpers/Operator");
class Slider extends react_1.default.Component {
render() {
return ((0, jsx_runtime_1.jsxs)("div", { className: "border", children: [(0, jsx_runtime_1.jsx)(react_bootstrap_1.Container, { fluid: "md", children: (0, jsx_runtime_1.jsxs)(react_bootstrap_1.Row, { className: "bg-secondary text-white", style: { height: 50 }, children: [(0, jsx_runtime_1.jsx)(react_bootstrap_1.Col, { md: 2, className: "text-md-start my-auto", onClick: () => { this.slide("prev"); }, children: actionIcon("prev") }), (0, jsx_runtime_1.jsxs)(react_bootstrap_1.Col, { className: "text-md-center my-auto", children: ["Member ", this.displayNumber(this.props.currentPage), " of ", this.displayNumber(this.props.pages)] }), (0, jsx_runtime_1.jsx)(react_bootstrap_1.Col, { md: 2, className: "text-md-end my-auto", onClick: () => { this.slide("next"); }, children: actionIcon("next") })] }) }), (0, jsx_runtime_1.jsx)("div", { children: this.props.children })] }));
}
slide(action) {
this.props.slide(action);
}
displayNumber(x) {
var _a;
return ((_a = this.props.displayNumber) !== null && _a !== void 0 ? _a : Operator_1.Operator.digitGrouping)(x);
}
}
exports.Slider = Slider;
function actionIcon(action) {
return ((0, jsx_runtime_1.jsx)("span", { style: { cursor: "pointer" }, className: "h1 user-select-none", children: action == "prev" ? "❮" : "❯" }));
}