imbric-theme 0.8.4 → 0.8.6

package/molecules/FooterTable/FooterTable.js

@@ -8,7 +8,7 @@ import DynamicSelect from '../../molecules/DynamicSelect'
 import Icon from "../../atoms/Icon/Icon";
 
 
-export const FooterTable = ({ getStyles, range, setPage, setDataPage, setScrollPage, page, slice, placeholderDinamicSelect, handleResultsForPage, defaultValueSelect, positionPag }) => {
+export const FooterTable = ({ getStyles, range, setPage, setDataPage, setScrollPage, page, slice, placeholderDinamicSelect, handleResultsForPage, defaultValueSelect, positionPag, useAvancesCeil, setPositionPag }) => {
 
 
   // const [positionPag, setPositionPag] = useState(0)
@@ -17,7 +17,10 @@ export const FooterTable = ({ getStyles, range, setPage, setDataPage, setScrollP
     if (slice.length < 1 && page !== 1) {
       setPage(page - 1);
     }
-  }, [slice, page, setPage]);
+
+    console.log(page)
+
+  }, [slice, page, setPage, positionPag, useAvancesCeil]);
 
   // const nextPagScroll = (page) => {
 
@@ -37,14 +40,40 @@ export const FooterTable = ({ getStyles, range, setPage, setDataPage, setScrollP
 
       <div className={styles.tableFooter}>
 
+        {page >= 2 ?
+          <Icon
+            name="angleLeft"
+            onClick={() => { setPage(page - 1); setDataPage(page - 1); setScrollPage('angleLeft') }}
+          />
+          : null}
+
+
+        {page >= 4 ?
+
+          <button
+            className={`${styles.button} ${styles.inactiveButton}`}
+            onClick={() => { setPage(1); setDataPage(1); setPositionPag(0); }}
+          >
+            1
+          </button>
 
-        <Icon
-          name="angleLeft"
-          onClick={() => { setScrollPage('angleLeft') }}
-        />
+          : null}
+
+
+        {page >= 5 ?
+
+          <button
+            disabled
+            className={`${styles.button} ${styles.disabled}`}
+          >
+            ...
+          </button>
+          : null}
 
         <div className={getStyles('footer-table-pag-box')}>
+
           <div id="table-pag-scroll" className={getStyles('footer-table-pag')} style={{ marginLeft: positionPag + 'px' }}>
+
             {range.map((el, index) => (
 
               <button
@@ -58,14 +87,41 @@ export const FooterTable = ({ getStyles, range, setPage, setDataPage, setScrollP
               </button>
 
             ))}
+
           </div>
         </div>
 
-        <Icon
-          name="angleRight"
-          onClick={() => { setScrollPage('angleRight') }}
-        // onChange={item => { handleSelectRange(item); onChangeRange(item); }}
-        />
+
+        {page <= (range.length - 4) ?
+
+          <button
+            disabled
+            className={`${styles.button} ${styles.disabled}`}
+          >
+            ...
+          </button>
+
+          : null}
+
+
+        {page <= (range.length - 3) ?
+
+          <button
+            onClick={() => { setPage(range.length); setDataPage(range.length); setPositionPag('-' + (38 * (useAvancesCeil - 1))) }}
+            className={`${styles.button} ${styles.inactiveButton}`}
+          >
+            {range.length}
+          </button>
+
+          : null}
+
+        {page <= (range.length - 1) ?
+          < Icon
+            name="angleRight"
+            onClick={() => { setPage(page + 1); setDataPage(page + 1); setScrollPage('angleRight') }}
+          // onChange={item => { handleSelectRange(item); onChangeRange(item); }}
+          />
+          : null}
 
 
       </div>
@@ -94,7 +150,7 @@ FooterTable.propTypes = {
   setScrollPage: PropTypes.func,
   placeholderDinamicSelect: PropTypes.string,
   handleResultsForPage: PropTypes.func,
-  defaultValueSelect: PropTypes.any
+  defaultValueSelect: PropTypes.any,
   // type: PropTypes.oneOf(options.types),
 }
 
@@ -104,7 +160,7 @@ FooterTable.defaultProps = {
   setScrollPage: () => { },
   handleResultsForPage: () => { },
   placeholderDinamicSelect: 'resultados por pagina',
-  defaultValueSelect: { value: 10, label: '10' }
+  defaultValueSelect: { value: 10, label: '10' },
 }
 
 export default withStyles(styles)(FooterTable)

package/molecules/FooterTable/FooterTable.module.css

@@ -39,6 +39,17 @@
   background: #f9f9f9;
 }
 
+.inactiveButton:hover {
+  color: white;
+  background: rgb(73, 125, 189, .4);
+}
+
+.disabled {
+  color: #2c3e50;
+  background: #f9f9f9;
+  cursor: no-drop;
+}
+
 .footer-table-pag-box {
   display: flex;
   overflow-x: clip;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imbric-theme",
-  "version": "0.8.4",
+  "version": "0.8.6",
   "description": "Components library IMBRIC",
   "private": false,
   "main": "index.js",