From e13e630cd6e4fc0b1ff92098a28a770794c7bb9a Mon Sep 17 00:00:00 2001
From: gabrhr <73925454+gabrhr@users.noreply.github.com>
Date: Wed, 20 Apr 2022 10:19:29 -0500
Subject: =?UTF-8?q?A=C3=B1adir=20plantilla?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Base para front
---
 .../app/components/Pagination/Pagination.js        | 189 +++++++++++++++++++++
 1 file changed, 189 insertions(+)
 create mode 100644 front/odiparpack/app/components/Pagination/Pagination.js

(limited to 'front/odiparpack/app/components/Pagination/Pagination.js')

diff --git a/front/odiparpack/app/components/Pagination/Pagination.js b/front/odiparpack/app/components/Pagination/Pagination.js
new file mode 100644
index 0000000..2ac2e29
--- /dev/null
+++ b/front/odiparpack/app/components/Pagination/Pagination.js
@@ -0,0 +1,189 @@
+import React from 'react';
+import { createUltimatePagination, ITEM_TYPES } from 'react-ultimate-pagination';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import NavigationFirstPage from '@material-ui/icons/FirstPage';
+import NavigationLastPage from '@material-ui/icons/LastPage';
+import NavigationChevronLeft from '@material-ui/icons/ChevronLeft';
+import NavigationChevronRight from '@material-ui/icons/ChevronRight';
+
+import { Button, Hidden, IconButton } from '@material-ui/core';
+
+const flatButtonStyle = {
+  minWidth: 36
+};
+
+const styles = {
+  paging: {
+    marginTop: 10,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+};
+
+const Page = ({
+  value,
+  isActive,
+  onClick,
+  isDisabled
+}) => (
+  <Button
+    style={flatButtonStyle}
+    color={isActive ? 'primary' : 'default'}
+    onClick={onClick}
+    disabled={isDisabled}
+  >
+    {value.toString()}
+  </Button>
+);
+
+Page.propTypes = {
+  value: PropTypes.number.isRequired,
+  isActive: PropTypes.bool.isRequired,
+  onClick: PropTypes.func.isRequired,
+  isDisabled: PropTypes.bool.isRequired,
+};
+
+const Ellipsis = ({ onClick, isDisabled }) => (
+  <Button
+    style={flatButtonStyle}
+    onClick={onClick}
+    disabled={isDisabled}
+  >
+    ...
+  </Button>
+);
+
+Ellipsis.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  isDisabled: PropTypes.bool.isRequired,
+};
+
+const FirstPageLink = ({ onClick, isDisabled }) => (
+  <IconButton
+    style={flatButtonStyle}
+    onClick={onClick}
+    disabled={isDisabled}
+  >
+    <NavigationFirstPage />
+  </IconButton>
+);
+
+
+FirstPageLink.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  isDisabled: PropTypes.bool.isRequired,
+};
+
+const PreviousPageLink = ({ onClick, isDisabled }) => (
+  <IconButton
+    style={flatButtonStyle}
+    onClick={onClick}
+    disabled={isDisabled}
+  >
+    <NavigationChevronLeft />
+  </IconButton>
+);
+
+PreviousPageLink.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  isDisabled: PropTypes.bool.isRequired,
+};
+
+const NextPageLink = ({ onClick, isDisabled }) => (
+  <IconButton
+    style={flatButtonStyle}
+    onClick={onClick}
+    disabled={isDisabled}
+  >
+    <NavigationChevronRight />
+  </IconButton>
+);
+
+NextPageLink.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  isDisabled: PropTypes.bool.isRequired,
+};
+
+const LastPageLink = ({ onClick, isDisabled }) => (
+  <IconButton
+    style={flatButtonStyle}
+    onClick={onClick}
+    disabled={isDisabled}
+  >
+    <NavigationLastPage />
+  </IconButton>
+);
+
+LastPageLink.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  isDisabled: PropTypes.bool.isRequired,
+};
+
+
+const itemTypeToComponent = {
+  [ITEM_TYPES.PAGE]: Page,
+  [ITEM_TYPES.ELLIPSIS]: Ellipsis,
+  [ITEM_TYPES.FIRST_PAGE_LINK]: FirstPageLink,
+  [ITEM_TYPES.PREVIOUS_PAGE_LINK]: PreviousPageLink,
+  [ITEM_TYPES.NEXT_PAGE_LINK]: NextPageLink,
+  [ITEM_TYPES.LAST_PAGE_LINK]: LastPageLink
+};
+
+const UltmPagination = createUltimatePagination({ itemTypeToComponent });
+
+class Pagination extends React.Component {
+  constructor(props) {
+    super();
+    this.state = {
+      totalPages: props.totpages
+    };
+  }
+
+  render() {
+    const hide = true;
+    const { totalPages } = this.state;
+    const {
+      classes,
+      curpage,
+      onChange,
+      onGoFirst,
+      onPrev,
+      onNext,
+      onGoLast,
+      ...rest
+    } = this.props;
+    return (
+      <div className={classes.paging}>
+        <FirstPageLink isDisabled={curpage <= 1} onClick={onGoFirst} />
+        <PreviousPageLink isDisabled={curpage <= 1} onClick={onPrev} />
+        <Hidden xsDown>
+          <UltmPagination
+            currentPage={curpage}
+            totalPages={totalPages}
+            onChange={onChange}
+            hidePreviousAndNextPageLinks={hide}
+            hideFirstAndLastPageLinks={hide}
+            {...rest}
+          />
+        </Hidden>
+        <NextPageLink isDisabled={curpage >= totalPages} onClick={onNext} />
+        <LastPageLink isDisabled={curpage >= totalPages} onClick={onGoLast} />
+      </div>
+    );
+  }
+}
+
+Pagination.propTypes = {
+  curpage: PropTypes.number.isRequired,
+  totpages: PropTypes.number.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onPrev: PropTypes.func.isRequired,
+  onNext: PropTypes.func.isRequired,
+  onGoFirst: PropTypes.func.isRequired,
+  onGoLast: PropTypes.func.isRequired,
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(Pagination);
-- 
cgit v1.2.3