imbric-theme 0.8.3 → 0.8.5

package/atoms/Checkbox/Checkbox.js

@@ -14,13 +14,14 @@ export const Checkbox = ({
   linkCheck,
   nameLinkCheck,
   handleClick,
+  disabled,
 }) => {
   const [checked, setChecked] = useState(value)
 
   return (
     <div className={getStyles('checkbox')}>
       <input
-        className={getStyles('checkbox-custom')}
+        className={getStyles('checkbox-custom', { 'is-disabled': disabled })}
         type="checkbox"
         id={id}
         name={name}
@@ -31,6 +32,7 @@ export const Checkbox = ({
           onChange(e)
         }}
         onClick={handleClick}
+        disabled={disabled}
       />
       <label htmlFor={name} className={getStyles('checkbox-custom-label')}>
         {label}
@@ -56,18 +58,20 @@ Checkbox.propTypes = {
   label: PropTypes.string,
   nameLinkCheck: PropTypes.string,
   linkCheck: PropTypes.string,
+  disabled: PropTypes.bool,
 }
 
 Checkbox.defaultProps = {
-  getStyles: () => {},
-  onChange: () => {},
+  getStyles: () => { },
+  onChange: () => { },
   id: 'checkbox',
   name: 'checkbox',
   value: true,
   label: 'Aceptas los terminos',
   nameLinkCheck: '',
   linkCheck: '',
-  handleClick: () => {},
+  handleClick: () => { },
+  disabled: false,
 }
 
 export default withStyles(styles)(Checkbox)

package/atoms/Checkbox/Checkbox.module.css

@@ -7,10 +7,11 @@
 
 .checkbox-custom {
   opacity: 0;
-  position: absolute;   
+  position: absolute;
 }
 
-.checkbox-custom, .checkbox-custom-label {
+.checkbox-custom,
+.checkbox-custom-label {
   display: inline-block;
   vertical-align: middle;
   margin: 5px;
@@ -19,7 +20,7 @@
   font-weight: var(--font-weight-light);
 }
 
-.checkbox-custom + .checkbox-custom-label:before {
+.checkbox-custom+.checkbox-custom-label:before {
   content: '';
   background: #fff;
   border-radius: 5px;
@@ -33,7 +34,7 @@
   text-align: center;
 }
 
-.checkbox-custom:checked + .checkbox-custom-label:before {
+.checkbox-custom:checked+.checkbox-custom-label:before {
   content: "";
   display: inline-block;
   width: 1px;
@@ -47,8 +48,13 @@
   margin: 0px 15px 5px 5px;
 }
 
-.checkbox-custom, .checkbox-custom-link {
+.checkbox-custom,
+.checkbox-custom-link {
   font-weight: var(--font-weight-normal);
   color: var(--color-primary);
   text-decoration: underline;
+}
+
+.is-disabled {
+  cursor: no-drop;
 }

package/atoms/Textarea/Textarea.module.css

@@ -1,7 +1,7 @@
 .textarea {
   display: flex;
   width: 100%;
-  min-height: 100px;
+  /* min-height: 100px; */
   padding: 20px;
   border: var(--border-width-thin) solid var(--color-cool-gray-200);
   background: var(--input-background);

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, useContador, useAvancesCeil, setPositionPag, setContador }) => {
 
 
   // const [positionPag, setPositionPag] = useState(0)
@@ -17,7 +17,11 @@ export const FooterTable = ({ getStyles, range, setPage, setDataPage, setScrollP
     if (slice.length < 1 && page !== 1) {
       setPage(page - 1);
     }
-  }, [slice, page, setPage]);
+
+    console.log(useContador)
+    console.log(useAvancesCeil * 1)
+
+  }, [slice, page, setPage, positionPag, useContador, useAvancesCeil]);
 
   // const nextPagScroll = (page) => {
 
@@ -38,13 +42,34 @@ export const FooterTable = ({ getStyles, range, setPage, setDataPage, setScrollP
       <div className={styles.tableFooter}>
 
 
-        <Icon
-          name="angleLeft"
-          onClick={() => { setScrollPage('angleLeft') }}
-        />
+        {positionPag !== 0 ?
+
+          <>
+
+            <Icon
+              name="angleLeft"
+              onClick={() => { setScrollPage('angleLeft') }}
+            />
+
+            <button
+              className={`${styles.button} ${styles.inactiveButton}`}
+              onClick={() => { setPage(1); setDataPage(1); setPositionPag(0); setContador(1) }}
+            >
+              1
+            </button>
+
+            <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 +83,37 @@ export const FooterTable = ({ getStyles, range, setPage, setDataPage, setScrollP
               </button>
 
             ))}
+
           </div>
         </div>
 
-        <Icon
-          name="angleRight"
-          onClick={() => { setScrollPage('angleRight') }}
-        // onChange={item => { handleSelectRange(item); onChangeRange(item); }}
-        />
+        {useContador < useAvancesCeil && useContador !== useAvancesCeil || useContador === 1 ?
+
+          <>
+
+            <button
+              disabled
+              className={`${styles.button} ${styles.disabled}`}
+            >
+              ...
+            </button>
+
+            <button
+              onClick={() => { setPage(range.length); setDataPage(range.length); setPositionPag('-' + (190 * (useAvancesCeil - 1))); setContador(useAvancesCeil * 1) }}
+              className={`${styles.button} ${styles.inactiveButton}`}
+            >
+              {range.length}
+            </button>
+
+            < Icon
+              name="angleRight"
+              onClick={() => { setScrollPage('angleRight') }}
+            // onChange={item => { handleSelectRange(item); onChangeRange(item); }}
+            />
+
+          </> : null}
+
+
 
 
       </div>
@@ -94,7 +142,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 +152,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.3",
+  "version": "0.8.5",
   "description": "Components library IMBRIC",
   "private": false,
   "main": "index.js",