imbric-theme 0.1.8 → 0.1.9

package/atoms/Input/Input.js

@@ -21,6 +21,7 @@ export const Input = ({
   isInlineCode,
   isInputFilter,
   isInputSecondary,
+  isDate,
   onChange,
   onFocus,
   onBlur,
@@ -69,6 +70,7 @@ export const Input = ({
             'is-inline-code': isInlineCode,
             'is-input-filter': isInputFilter,
             'is-input-secondary': isInputSecondary,
+            'is-date': isDate,
           })}
           readOnly={readonly}
           type={type}
@@ -102,6 +104,7 @@ export const Input = ({
               'is-inline-code': isInlineCode,
               'is-input-filter': isInputFilter,
               'is-input-secondary': isInputSecondary,
+              'is-date': isDate,
             })}
             readOnly={readonly}
             type={type}
@@ -142,6 +145,7 @@ export const Input = ({
             'is-inline-code': isInlineCode,
             'is-input-filter': isInputFilter,
             'is-input-secondary': isInputSecondary,
+            'is-date': isDate,
           })}
           readOnly={readonly}
           type={type}
@@ -185,6 +189,7 @@ Input.propTypes = {
   isInlineCode: PropTypes.bool,
   isInputFilter: PropTypes.bool,
   isInputSecondary: PropTypes.bool,
+  isDate: PropTypes.bool,
   isViewIcon: PropTypes.bool,
   idIcon: PropTypes.string,
   nameIcon: PropTypes.string,
@@ -210,6 +215,7 @@ Input.defaultProps = {
   isInlineCode: false,
   isInputFilter: false,
   isInputSecondary: false,
+  isDate: false,
   onChange: () => { },
   onFocus: () => { },
   onBlur: () => { },

package/atoms/Input/Input.module.css

@@ -80,4 +80,9 @@
 .box-icon-input {
   display: flex;
   align-items: center;
+}
+
+.is-date {
+  width: 85px;
+  padding: 10px 6px;
 }

package/layout/DynamicTable/DynamicTable.js

@@ -7,10 +7,13 @@ import DynamicSelect from '../../molecules/DynamicSelect'
 import DatePicker from '../../molecules/DatePicker'
 import Label from '../../atoms/Label'
 import Icon from '../../atoms/Icon'
+import Paragraph from '../../atoms/Paragraph'
 import Button from '../../atoms/Button'
 import { Horizontal, Vertical } from '../../layout/Spacer/components'
 import ReactTooltip from 'react-tooltip'
-import Heading from '../../atoms/Heading/Heading'
+import Checkbox from '../../atoms/Checkbox/Checkbox'
+
+
 
 
 export const DynamicTable = ({
@@ -22,6 +25,7 @@ export const DynamicTable = ({
   isLayoutDate,
   isViewRange,
   isViewTitleTable,
+  isViewTitleTableSecundary,
   isViewAddColumn,
   isViewFilterTable,
   isViewBtn,
@@ -41,6 +45,7 @@ export const DynamicTable = ({
   handleAddColumn,
   handleFilterTable,
   handleSelectRange,
+  handleSelectRangeSecundary,
   handleDownloadExcel,
   handleDefaultValue,
   handleDefaultValueFilter,
@@ -52,8 +57,12 @@ export const DynamicTable = ({
   isLoadingDinamicSelectFilter,
   labelSinceDateRange,
   labelTillDateRange,
+  labelSinceDateRangeSecundary,
+  labelTillDateRangeSecundary,
   txtTootipFileDownload,
   titleHeadingTable,
+  titleHeadingTableSecundary,
+  handleChangeCheckboxDate,
 }) => {
 
   const [tableData, setTableData] = useState(optionsData);
@@ -65,6 +74,9 @@ export const DynamicTable = ({
   // STATE TOOLTIP
   const [isToolTipMounted, setIsToolTipMounted] = useState(false)
 
+  const [dataCheckboxCheckboxDate, setCheckboxCheckboxDate] = useState(false)
+  const [dataDisabledDate, setDisabledDate] = useState(true)
+
   // TOOLTIP
   const handleMouseEnter = () => {
     setIsToolTipMounted(true)
@@ -91,7 +103,19 @@ export const DynamicTable = ({
       });
       setTableData(sorted);
     }
-  };
+  }
+
+  const handleChangeCheckboxDateMy = (op) => {
+
+    if (op.target.checked) {
+      setCheckboxCheckboxDate(true)
+      setDisabledDate(false)
+    } else {
+      setCheckboxCheckboxDate(false)
+      setDisabledDate(true)
+    }
+
+  }
 
   return (
 
@@ -102,19 +126,35 @@ export const DynamicTable = ({
       <div className={getStyles('opFunctionBoxTotal2')}>
 
         {isViewTitleTable ? (
+
+          <>
+
+            <div className={getStyles('opFunctionBox1')}>
+
+              <Paragraph weight="semibold" size="md">{titleHeadingTable}</Paragraph>
+
+            </div>
+
+            <Horizontal size="sm" />
+
+          </>
+
+        ) : null}
+
+        {isViewTitleTableSecundary ? (
           <div className={getStyles('opFunctionBox1')}>
-            <Heading
-              size="sm"
-            >
-              {titleHeadingTable}
-            </Heading>
+
+            <Paragraph weight="semibold" size="md">{titleHeadingTableSecundary}</Paragraph>
+
           </div>
         ) : null}
 
+
         {isViewLeftBtn ? (
 
           <>
 
+            <Horizontal size="sm" />
             <div className={getStyles('opFunctionBox3')}>
 
               <Button
@@ -126,10 +166,11 @@ export const DynamicTable = ({
               </Button>
 
             </div>
-          </>
-        ) : null}
 
+            <Horizontal size="sm" />
 
+          </>
+        ) : null}
 
         {isViewLeftBtnSecondary ? (
 
@@ -167,8 +208,6 @@ export const DynamicTable = ({
           </>
         ) : null}
 
-
-
         {isViewRange ? (
           <div className={getStyles('opFunctionBox1')}>
             <DatePicker
@@ -179,10 +218,44 @@ export const DynamicTable = ({
             />
           </div>
         ) : null}
+
       </div>
       <div className={getStyles('opFunctionBox2')}>
 
 
+        {isViewRange ? (
+          <>
+
+            <Checkbox
+              id={'dateSecundary'}
+              name={'dateSecundary'}
+              label={'Fecha creación'}
+              onChange={op => (
+                handleChangeCheckboxDate(op),
+                handleChangeCheckboxDateMy(op)
+              )}
+              value={dataCheckboxCheckboxDate}
+            // handleClick={handleClickCheck(values[name])}
+            // onChange={formikLoginCompany.handleChange}
+            // value={formikLoginCompany.values.terms1}
+            />
+
+            <div className={getStyles('opFunctionBox1')}>
+              <DatePicker
+                isLayoutDate={isLayoutDate}
+                onChangeRange={handleSelectRangeSecundary}
+                sinceDateRange={labelSinceDateRangeSecundary}
+                tillDateRange={labelTillDateRangeSecundary}
+                disabledInputRange={dataDisabledDate}
+              />
+            </div>
+
+            <Horizontal size="sm" />
+
+          </>
+        ) : null}
+
+
         {isViewFilterTable ? (
           <div className={getStyles('opFunctionBox3')}>
             <Label>{labelDinamicSelectFilter}</Label>
@@ -204,8 +277,6 @@ export const DynamicTable = ({
           </div>
         ) : null}
 
-
-
         {isViewAddColumn ? (
           <div className={getStyles('opFunctionBox3')}>
             <Label>{labelDinamicSelect}</Label>
@@ -227,7 +298,6 @@ export const DynamicTable = ({
           </div>
         ) : null}
 
-
         {isViewBtn ? (
 
           <>
@@ -246,7 +316,6 @@ export const DynamicTable = ({
           </>
         ) : null}
 
-
         {isViewDownloadDoc ? (
           <div id='boxFileDownload' className={getStyles('opFunctionBox3')}>
 
@@ -301,6 +370,7 @@ DynamicTable.propTypes = {
   getStyles: PropTypes.func.isRequired,
   isViewRange: PropTypes.bool,
   isViewTitleTable: PropTypes.bool,
+  isViewTitleTableSecundary: PropTypes.bool,
   isViewAddColumn: PropTypes.bool,
   isViewFilterTable: PropTypes.bool,
   isViewDownloadDoc: PropTypes.bool,
@@ -312,6 +382,7 @@ DynamicTable.propTypes = {
   isError: PropTypes.string,
   isLayoutDate: PropTypes.string,
   handleSelectRange: PropTypes.func,
+  handleSelectRangeSecundary: PropTypes.func,
   handleDownloadExcel: PropTypes.func,
   labelDinamicSelect: PropTypes.string,
   placeholderDinamicSelect: PropTypes.string,
@@ -319,6 +390,8 @@ DynamicTable.propTypes = {
   placeholderDinamicSelectFilter: PropTypes.string,
   labelSinceDateRange: PropTypes.string,
   labelTillDateRange: PropTypes.string,
+  labelSinceDateRangeSecundary: PropTypes.string,
+  labelTillDateRangeSecundary: PropTypes.string,
   typeBtn: PropTypes.string,
   titleBtn: PropTypes.string,
   handleBtn: PropTypes.func,
@@ -332,6 +405,7 @@ DynamicTable.propTypes = {
   handleBtnTertiary: PropTypes.func,
   txtTootipFileDownload: PropTypes.string,
   titleHeadingTable: PropTypes.string,
+  titleHeadingTableSecundary: PropTypes.string,
 }
 
 DynamicTable.defaultProps = {
@@ -340,6 +414,7 @@ DynamicTable.defaultProps = {
   handleFilterTable: () => { },
   isViewRange: true,
   isViewTitleTable: false,
+  isViewTitleTableSecundary: false,
   isViewAddColumn: true,
   isViewFilterTable: false,
   isViewDownloadDoc: true,
@@ -347,6 +422,7 @@ DynamicTable.defaultProps = {
   isViewLeftBtn: false,
   isLayoutDate: 'Calendar',
   handleSelectRange: () => { },
+  handleSelectRangeSecundary: () => { },
   handleDownloadExcel: () => { },
   labelDinamicSelect: 'Mostrar u ocultar columnas',
   placeholderDinamicSelect: 'Seleccionar columnas',
@@ -354,6 +430,8 @@ DynamicTable.defaultProps = {
   placeholderDinamicSelectFilter: '',
   labelSinceDateRange: 'Desde',
   labelTillDateRange: 'Hasta',
+  labelSinceDateRangeSecundary: 'Desde',
+  labelTillDateRangeSecundary: 'Hasta',
   typeBtn: 'primary',
   titleBtn: '',
   handleBtn: () => { },
@@ -367,6 +445,7 @@ DynamicTable.defaultProps = {
   handleBtnTertiary: () => { },
   txtTootipFileDownload: '',
   titleHeadingTable: 'Total: 200',
+  titleHeadingTableSecundary: '',
 }
 
 export default withStyles(styles)(DynamicTable)

package/layout/DynamicTable/DynamicTable.module.css

@@ -6,7 +6,7 @@
 }
 
 .opFunctionBox3 {
-  margin-left: 16px;
+  margin-left: 0px;
 }
 
 /* .opFunctionBox1 {
@@ -15,15 +15,16 @@
 
 .opFunctionBoxTotal2 {
   display: inline-flex;
-  align-items: center;
+  align-items: flex-end;
   width: 100%;
   justify-content: flex-start;
 }
 
 .opFunctionBox2 {
+  margin-left: 24px;
   display: inline-flex;
   align-items: flex-end;
-  width: 100%;
+  width: 70%;
   justify-content: flex-end;
 }
 

package/molecules/DatePicker/DatePicker.js

@@ -33,7 +33,7 @@ import {
 
 
 
-export const DatePicker = ({ getStyles, isLayoutDate, onChangeRange, sinceDateRange, tillDateRange }) => {
+export const DatePicker = ({ getStyles, isLayoutDate, onChangeRange, sinceDateRange, tillDateRange, disabledInputRange }) => {
 
   const [isShowCalendar, setShowCalendar] = useState(false);
 
@@ -51,7 +51,7 @@ export const DatePicker = ({ getStyles, isLayoutDate, onChangeRange, sinceDateRa
   // ]);
 
   moment.locale('es')
-  const format = "DD/MMMM/YYYY";
+  const format = "DD/MM/YYYY";
 
 
   const handleSelectRange = (item) => {
@@ -100,22 +100,26 @@ export const DatePicker = ({ getStyles, isLayoutDate, onChangeRange, sinceDateRa
                 <Label>{sinceDateRange}</Label>
                 <Input
                   isInline
+                  isDate
                   id="startDate"
                   onClick={handleClickOpenCalendar}
                   placeholder="Et harum quidem"
                   value={moment(state[0].startDate).format(format).toString()}
+                  disabled={disabledInputRange}
                 />
-                <Vertical size="xs" />
+                {/* <Vertical size="xs" /> */}
               </div>
-
+              <Horizontal size="xs" />
               <div>
                 <Label>{tillDateRange}</Label>
                 <Input
                   isInline
+                  isDate
                   id="endDate"
                   onClick={handleClickOpenCalendar}
                   placeholder="Et harum quidem"
                   value={moment(state[0].endDate).format(format).toString()}
+                  disabled={disabledInputRange}
                 />
               </div>
             </div>
@@ -229,6 +233,7 @@ DatePicker.propTypes = {
   onChangeRange: PropTypes.func,
   sinceDateRange: PropTypes.string,
   tillDateRange: PropTypes.string,
+  disabledInputRange: PropTypes.bool,
 }
 
 DatePicker.defaultProps = {
@@ -237,6 +242,7 @@ DatePicker.defaultProps = {
   onChangeRange: () => { },
   sinceDateRange: 'Desde',
   tillDateRange: 'Hasta',
+  disabledInputRange: false
 }
 
 export default withStyles(styles)(DatePicker)

package/molecules/RowTable/RowTable.js

@@ -44,7 +44,6 @@ export const RowTable = ({
   txtTootipIconLink,
   txtTootipIconClone,
   txtTootipIconCheckbox,
-  colorRow,
 }) => {
 
 
@@ -126,6 +125,7 @@ export const RowTable = ({
                       (
                         <td
                           className={getStyles('td', 'tdacction')}
+                          style={{ color: item.colorTxtRow }}
                           key={[itemTd.accessor] + (indexTd + index)}
                         >
 
@@ -141,6 +141,7 @@ export const RowTable = ({
                       (
                         <td
                           className={getStyles('td', 'tdacction')}
+                          style={{ color: item.colorTxtRow }}
                           key={[itemTd.accessor] + (indexTd + index)}
                         >
                         </td>
@@ -161,6 +162,7 @@ export const RowTable = ({
                         (
                           <td
                             className={getStyles('td', 'tdacction')}
+                            style={{ color: item.colorTxtRow }}
                             key={[itemTd.accessor] + (indexTd + index)}
                           >
 
@@ -172,6 +174,7 @@ export const RowTable = ({
                         (
                           <td
                             className={getStyles('td', 'tdacction')}
+                            style={{ color: item.colorTxtRow }}
                             key={[itemTd.accessor] + (indexTd + index)}
                           >
                             {/* {String(item[itemTd.accessor])} */}
@@ -188,6 +191,7 @@ export const RowTable = ({
                       !loading ? (
                         <td
                           className={getStyles('td', 'tdacction')}
+                          style={{ color: item.colorTxtRow }}
                           key={[itemTd.accessor] + (indexTd + index)}
                         >
 
@@ -211,7 +215,7 @@ export const RowTable = ({
 
                         ?
 
-                        <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
+                        <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
 
                           {console.log('TD: ' + [itemTd.accessor] + (indexTd + index))}
 
@@ -252,7 +256,10 @@ export const RowTable = ({
                         itemTd.isPicture
 
                           ?
-                          <td className={getStyles('td', 'tdacction')} key={[itemTd.accessor] + (indexTd + index)}>
+                          <td
+                            className={getStyles('td', 'tdacction')}
+                            style={{ color: item.colorTxtRow }}
+                            key={[itemTd.accessor] + (indexTd + index)}>
                             <Picture
                               src={item[itemTd.accessor]}
                               width={50}
@@ -264,7 +271,7 @@ export const RowTable = ({
 
                             ?
 
-                            <td className={getStyles('td', 'tdacctionIcons')} key={[itemTd.accessor] + (indexTd + index)}>
+                            <td style={{ color: item.colorTxtRow }} className={getStyles('td', 'tdacctionIcons')} key={[itemTd.accessor] + (indexTd + index)}>
 
 
                               {itemTd.viewListInvoice ?
@@ -951,7 +958,7 @@ export const RowTable = ({
 
                               ?
 
-                              <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor][itemTd.subAccessor]}</td>
+                              <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor][itemTd.subAccessor]}</td>
 
                               :
 
@@ -961,7 +968,7 @@ export const RowTable = ({
 
                                 itemTd.typeFilterSub === 'date_only' ?
 
-                                  <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
+                                  <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
 
                                     {item[itemTd.accessor] ? (
 
@@ -975,7 +982,7 @@ export const RowTable = ({
 
                                   :
 
-                                  <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
+                                  <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
                                     {/* <Moment format="DD/MM/YYYY hh:mm:ss"> */}
                                     {item[itemTd.accessor] ? (
 
@@ -996,7 +1003,7 @@ export const RowTable = ({
 
                                     item[itemTd.accessor] === itemSelect.value ?
 
-                                      <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index) + indexSelect}>
+                                      <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index) + indexSelect}>
                                         {itemSelect.label}
                                       </td>
 
@@ -1017,20 +1024,20 @@ export const RowTable = ({
 
                                       itemTd.characterExtra === 'km'
                                         ?
-                                        <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{(item[itemTd.accessor] / 1000).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
+                                        <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{(item[itemTd.accessor] / 1000).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
                                         :
-                                        <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor].toFixed(2).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
+                                        <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor].toFixed(2).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
                                       :
-                                      <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor]}</td>
+                                      <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor]}</td>
 
                                     :
 
                                     itemTd.subTypeFilter
 
                                       ?
-                                      <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{Number(item[itemTd.accessor]).toFixed(2).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
+                                      <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{Number(item[itemTd.accessor]).toFixed(2).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
                                       :
-                                      <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor]}</td>
+                                      <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor]}</td>
 
                 // <>
 

package/package.json

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