sccoreui
Version:
ui-sccore
123 lines (122 loc) • 14.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
const paginator_1 = require("primereact/paginator");
const ripple_1 = require("primereact/ripple");
const utils_1 = require("primereact/utils");
const button_1 = require("primereact/button");
require("./pagination.scss");
function TemplateDemo() {
const [first, setFirst] = (0, react_1.useState)([0, 0, 0]);
const [rows, setRows] = (0, react_1.useState)([10, 10, 10]);
const [first1, setFirst1] = (0, react_1.useState)(0);
const [rows1, setRows1] = (0, react_1.useState)(10);
const onPageChange1 = (event) => {
setFirst1(event.first);
setRows1(event.rows);
};
const onPageChange = (e, index) => {
setFirst(first.map((f, i) => (index === i ? e.first : f)));
setRows(rows.map((r, i) => (index === i ? e.rows : r)));
};
const template1 = {
layout: 'PrevPageLink PageLinks CurrentPageReport NextPageLink ',
PrevPageLink: (options) => {
return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-none mr-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-left-gray-700" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Previous" }))] })));
},
PageLinks: (options) => {
if ((options.view.startPage === options.page && options.view.startPage !== 0) || (options.view.endPage === options.page && options.page + 1 !== options.totalPages)) {
const className = (0, utils_1.classNames)(options.className, { 'p-disabled': true });
return ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: className, style: { userSelect: 'none' } }, { children: "..." })));
}
return ((0, jsx_runtime_1.jsxs)("button", Object.assign({ type: "button", className: options.className, onClick: options.onClick }, { children: [options.page + 1, (0, jsx_runtime_1.jsx)(ripple_1.Ripple, {})] })));
},
NextPageLink: (options) => {
return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-none ml-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Next" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-gray-700" })] })));
},
CurrentPageReport: (options) => {
console.log(options);
return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ style: { color: 'var(--gray-700)', userSelect: 'none', width: '120px', textAlign: 'center' }, className: "flex md:hidden line-height-2 text-base" }, { children: ["Page ", options.first, " of ", options.totalRecords] })));
}
};
const template2 = {
layout: 'PrevPageLink PageLinks CurrentPageReport NextPageLink',
PrevPageLink: (options) => {
return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 border-gray-300 mr-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-left-gray-700" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Previous" }))] })));
},
PageLinks: (options) => {
console.log(options);
if ((options.view.startPage === options.page && options.view.startPage !== 0) || (options.view.endPage === options.page && options.page + 1 !== options.totalPages)) {
const className = (0, utils_1.classNames)(options.className, { 'p-disabled': true });
return ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: className }, { children: "..." })));
}
return ((0, jsx_runtime_1.jsxs)("button", Object.assign({ type: "button", className: options.className, onClick: options.onClick }, { children: [options.page + 1, (0, jsx_runtime_1.jsx)(ripple_1.Ripple, {})] })));
},
NextPageLink: (options) => {
return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 px-4 py-2 border-gray-300 ml-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Next" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-gray-700" })] })));
},
CurrentPageReport: (options) => {
console.log(options);
return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ style: { color: 'var(--gray-700)', userSelect: 'none', width: '120px', textAlign: 'center' }, className: "flex md:hidden line-height-2 text-base" }, { children: ["Page ", options.first, " of ", options.totalRecords] })));
}
};
const template3 = {
layout: ' CurrentPageReport PrevPageLink NextPageLink',
PrevPageLink: (options) => {
return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 border-gray-300 ml-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "md:hidden flex" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-left-gray-700" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Previous" }))] })));
},
NextPageLink: (options) => {
return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 px-4 py-2 border-gray-300 ml-3", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Next" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "md:hidden flex" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-gray-700" }) }))] })));
},
CurrentPageReport: (options) => {
return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ style: { color: 'var(--gray-700)', userSelect: 'none', width: '120px', textAlign: 'center' }, className: " line-height-2 text-base" }, { children: ["Page ", options.first, " of ", options.totalRecords] })));
}
};
const template4 = {
layout: 'PrevPageLink NextPageLink CurrentPageReport',
PrevPageLink: (options) => {
return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 border-gray-300 mr-3", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-left-gray-700" }) }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Previous" }))] })));
},
NextPageLink: (options) => {
return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 px-4 py-2 border-gray-300 mr-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Next" })), (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-gray-700" }) })] })));
},
CurrentPageReport: (options) => {
console.log(options);
return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ style: { color: 'var(--gray-700)', userSelect: 'none', width: '120px', textAlign: 'center' }, className: " line-height-2 text-base" }, { children: ["Page ", options.first, " of ", options.totalRecords] })));
}
};
const template5 = {
layout: 'PrevPageLink CurrentPageReport NextPageLink ',
PrevPageLink: (options) => {
return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 border-gray-300 mr-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-left-gray-700" }) }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Previous" }))] })));
},
NextPageLink: (options) => {
return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 px-4 py-2 border-gray-300 ml-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Next" })), (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-gray-700" }) })] })));
},
CurrentPageReport: (options) => {
console.log(options);
return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ style: { color: 'var(--gray-700)', userSelect: 'none', width: '120px', textAlign: 'center' }, className: " line-height-2 text-base" }, { children: ["Page ", options.first, " of ", options.totalRecords] })));
}
};
const template6 = {
layout: 'PrevPageLink PageLinks NextPageLink ',
PrevPageLink: (options) => {
return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 border-noround-right border-gray-300 ", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-left-gray-700" }) }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Previous" }))] })));
},
PageLinks: (options) => {
if ((options.view.startPage === options.page && options.view.startPage !== 0) || (options.view.endPage === options.page && options.page + 1 !== options.totalPages)) {
const className = (0, utils_1.classNames)(options.className, { 'p-disabled': false }, "border-1 border-left-none border-gray-300");
return ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: className, style: { userSelect: 'none' } }, { children: "..." })));
}
return ((0, jsx_runtime_1.jsxs)("button", Object.assign({ type: "button", className: `${options.className} border-1 border-left-none border-gray-300`, onClick: options.onClick }, { children: [options.page + 1, (0, jsx_runtime_1.jsx)(ripple_1.Ripple, {})] })));
},
NextPageLink: (options) => {
return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 border-noround-left border-left-none px-4 py-2 border-gray-300 ", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Next" })), (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-gray-700" }) })] })));
},
};
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mt-0 mb-4" }, { children: "Input" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-10 ml-auto mr-auto grid" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 " }, { children: (0, jsx_runtime_1.jsx)(paginator_1.Paginator, { className: "bg-square", template: template1, first: first[0], rows: rows[0], totalRecords: 100, onPageChange: (e) => onPageChange(e, 0) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 " }, { children: (0, jsx_runtime_1.jsx)(paginator_1.Paginator, { template: template2, first: first[0], rows: rows[0], totalRecords: 100, onPageChange: (e) => onPageChange(e, 0) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 " }, { children: (0, jsx_runtime_1.jsx)(paginator_1.Paginator, { template: template3, first: first[0], rows: rows[0], totalRecords: 100, onPageChange: (e) => onPageChange(e, 0) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 " }, { children: (0, jsx_runtime_1.jsx)(paginator_1.Paginator, { template: template4, first: first[0], rows: rows[0], totalRecords: 100, onPageChange: (e) => onPageChange(e, 0) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 " }, { children: (0, jsx_runtime_1.jsx)(paginator_1.Paginator, { template: template5, first: first[0], rows: rows[0], totalRecords: 100, onPageChange: (e) => onPageChange(e, 0) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 " }, { children: (0, jsx_runtime_1.jsx)(paginator_1.Paginator, { className: "paginator-boxes", template: template6, first: first[0], rows: rows[0], totalRecords: 100, onPageChange: (e) => onPageChange(e, 0) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 " }, { children: (0, jsx_runtime_1.jsx)(paginator_1.Paginator, { first: first1, rows: rows1, totalRecords: 120, rowsPerPageOptions: [10, 20, 30], onPageChange: onPageChange1 }) }))] }))] }));
}
exports.default = TemplateDemo;