imbric-theme 0.9.0 → 1.0.0

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 = ({
@@ -21,7 +24,9 @@ export const DynamicTable = ({
   opFilterTable,
   isLayoutDate,
   isViewRange,
+  isViewRangeSecundary,
   isViewTitleTable,
+  isViewTitleTableSecundary,
   isViewAddColumn,
   isViewFilterTable,
   isViewBtn,
@@ -41,6 +46,7 @@ export const DynamicTable = ({
   handleAddColumn,
   handleFilterTable,
   handleSelectRange,
+  handleSelectRangeSecundary,
   handleDownloadExcel,
   handleDefaultValue,
   handleDefaultValueFilter,
@@ -52,8 +58,12 @@ export const DynamicTable = ({
   isLoadingDinamicSelectFilter,
   labelSinceDateRange,
   labelTillDateRange,
+  labelSinceDateRangeSecundary,
+  labelTillDateRangeSecundary,
   txtTootipFileDownload,
   titleHeadingTable,
+  titleHeadingTableSecundary,
+  handleChangeCheckboxDate,
 }) => {
 
   const [tableData, setTableData] = useState(optionsData);
@@ -65,6 +75,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 +104,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 +127,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 +167,11 @@ export const DynamicTable = ({
               </Button>
 
             </div>
-          </>
-        ) : null}
 
+            <Horizontal size="sm" />
 
+          </>
+        ) : null}
 
         {isViewLeftBtnSecondary ? (
 
@@ -167,8 +209,6 @@ export const DynamicTable = ({
           </>
         ) : null}
 
-
-
         {isViewRange ? (
           <div className={getStyles('opFunctionBox1')}>
             <DatePicker
@@ -179,54 +219,96 @@ export const DynamicTable = ({
             />
           </div>
         ) : null}
+
       </div>
       <div className={getStyles('opFunctionBox2')}>
 
 
-        {isViewFilterTable ? (
-          <div className={getStyles('opFunctionBox3')}>
-            <Label>{labelDinamicSelectFilter}</Label>
-
-            {isLoadingDinamicSelectFilter ?
-              <DynamicSelect
-                isInline
-                onChange={handleFilterTable}
-                optionsSelect={filterTableData}
-                placeholder={placeholderDinamicSelectFilter}
-                defaultValue={handleDefaultValueFilter}
-                closeMenuOnSelect={false}
-                isClearable={false}
-                instanceId={'idFilterTableAll'}
-              // defaultValue= { [{value: 'id', label: 'ID'}, {value: 'idService', label: 'ID Reserva'}] }
-              /> : null
-            }
+        {isViewRangeSecundary ? (
+          <>
 
-          </div>
+            <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 ? (
 
-        {isViewAddColumn ? (
-          <div className={getStyles('opFunctionBox3')}>
-            <Label>{labelDinamicSelect}</Label>
-
-            {isLoadingDinamicSelect ?
-              <DynamicSelect
-                isMulti
-                isInline
-                onChange={handleAddColumn}
-                optionsSelect={addColumsData}
-                placeholder={placeholderDinamicSelect}
-                defaultValue={handleDefaultValue}
-                closeMenuOnSelect={false}
-                instanceId={'idAddColumsTable'}
-              // defaultValue= { [{value: 'id', label: 'ID'}, {value: 'idService', label: 'ID Reserva'}] }
-              /> : null
-            }
+          <>
+            <div className={getStyles('opFunctionBox3')}>
+              <Label>{labelDinamicSelectFilter}</Label>
+
+              {isLoadingDinamicSelectFilter ?
+                <DynamicSelect
+                  isInline
+                  onChange={handleFilterTable}
+                  optionsSelect={filterTableData}
+                  placeholder={placeholderDinamicSelectFilter}
+                  defaultValue={handleDefaultValueFilter}
+                  closeMenuOnSelect={false}
+                  isClearable={false}
+                  instanceId={'idFilterTableAll'}
+                // defaultValue= { [{value: 'id', label: 'ID'}, {value: 'idService', label: 'ID Reserva'}] }
+                /> : null
+              }
 
-          </div>
+            </div>
+
+            <Horizontal size="xs" />
+
+          </>
         ) : null}
 
+        {isViewAddColumn ? (
+
+          <>
+            <div className={getStyles('opFunctionBox3')}>
+              <Label>{labelDinamicSelect}</Label>
+
+              {isLoadingDinamicSelect ?
+                <DynamicSelect
+                  isMulti
+                  isInline
+                  onChange={handleAddColumn}
+                  optionsSelect={addColumsData}
+                  placeholder={placeholderDinamicSelect}
+                  defaultValue={handleDefaultValue}
+                  closeMenuOnSelect={false}
+                  instanceId={'idAddColumsTable'}
+                // defaultValue= { [{value: 'id', label: 'ID'}, {value: 'idService', label: 'ID Reserva'}] }
+                /> : null
+              }
+
+            </div>
+
+            <Horizontal size="xs" />
+          </>
+        ) : null}
 
         {isViewBtn ? (
 
@@ -243,10 +325,12 @@ export const DynamicTable = ({
               </Button>
 
             </div>
+
+            <Horizontal size="xs" />
+
           </>
         ) : null}
 
-
         {isViewDownloadDoc ? (
           <div id='boxFileDownload' className={getStyles('opFunctionBox3')}>
 
@@ -300,7 +384,9 @@ DynamicTable.propTypes = {
   // children: PropTypes.node.isRequired,
   getStyles: PropTypes.func.isRequired,
   isViewRange: PropTypes.bool,
+  isViewRangeSecundary: PropTypes.bool,
   isViewTitleTable: PropTypes.bool,
+  isViewTitleTableSecundary: PropTypes.bool,
   isViewAddColumn: PropTypes.bool,
   isViewFilterTable: PropTypes.bool,
   isViewDownloadDoc: PropTypes.bool,
@@ -312,6 +398,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 +406,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 +421,7 @@ DynamicTable.propTypes = {
   handleBtnTertiary: PropTypes.func,
   txtTootipFileDownload: PropTypes.string,
   titleHeadingTable: PropTypes.string,
+  titleHeadingTableSecundary: PropTypes.string,
 }
 
 DynamicTable.defaultProps = {
@@ -339,7 +429,9 @@ DynamicTable.defaultProps = {
   handleAddColumn: () => { },
   handleFilterTable: () => { },
   isViewRange: true,
+  isViewRangeSecundary: false,
   isViewTitleTable: false,
+  isViewTitleTableSecundary: false,
   isViewAddColumn: true,
   isViewFilterTable: false,
   isViewDownloadDoc: true,
@@ -347,6 +439,7 @@ DynamicTable.defaultProps = {
   isViewLeftBtn: false,
   isLayoutDate: 'Calendar',
   handleSelectRange: () => { },
+  handleSelectRangeSecundary: () => { },
   handleDownloadExcel: () => { },
   labelDinamicSelect: 'Mostrar u ocultar columnas',
   placeholderDinamicSelect: 'Seleccionar columnas',
@@ -354,6 +447,8 @@ DynamicTable.defaultProps = {
   placeholderDinamicSelectFilter: '',
   labelSinceDateRange: 'Desde',
   labelTillDateRange: 'Hasta',
+  labelSinceDateRangeSecundary: 'Desde',
+  labelTillDateRangeSecundary: 'Hasta',
   typeBtn: 'primary',
   titleBtn: '',
   handleBtn: () => { },
@@ -367,6 +462,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;
 }
 
@@ -59,18 +60,4 @@
   font-size: 12px;
   color: var(--color-font-base);
   border-bottom: solid 1px rgba(0, 0, 0, 0.1);
-}
-
-/* for custom scrollbar for webkit browser*/
-
-/* ::-webkit-scrollbar {
-  width: 6px;
-}
-
-::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-}
-
-::-webkit-scrollbar-thumb {
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-} */
+}

package/molecules/ColumnTable/ColumnTable.js

@@ -29,7 +29,7 @@ export const ColumnTable = ({ getStyles, handleSorting, columnUppercase, onChang
     setSortField(accessor)
     setOrder(sortOrder)
     handleSorting(accessor, sortOrder)
-  };
+  }
 
 
   return (
@@ -102,8 +102,9 @@ export const ColumnTable = ({ getStyles, handleSorting, columnUppercase, onChang
                   props.typeFilter === 'select' ?
                     <DynamicSelect
                       isInline
-                      onChange={onChangeSelect}
-                      optionsSelect={opSelect}
+                      // onChange={item => useStateDate([item.selection])}
+                      onChange={item => { onChangeSelect(item, props.idInput) }}
+                      optionsSelect={opSelect || props.optionsSelect}
                       placeholder={props.placeholder}
                       maxMenuHeight={110}
                     />

package/molecules/ColumnTable/ColumnTable.module.css

@@ -48,4 +48,5 @@
   max-width: 80px;
   min-width: 80px;
   width: 80px;
+  display: inline-table;
 }

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)