imbric-theme 1.1.4 → 1.1.6

package/molecules/CardServiceDetail/CardServiceDetail.js

@@ -1,12 +1,13 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import ReactTooltip from 'react-tooltip'
-import { Horizontal, Vertical } from '../../layout/Spacer/components'
+// import { Horizontal, Vertical } from '../../layout/Spacer/components'
 import Label from '../../atoms/Label'
 import Icon from '../../atoms/Icon'
+import Button from '../../atoms/Button'
 
 import styles from './CardServiceDetail.module.css'
-import { options } from './constants'
+// import { options } from './constants'
 import withStyles from '../../hocs/withStyles'
 
 export const handleClick = ({ onClick }) => (event) => {
@@ -20,8 +21,8 @@ export const CardServiceDetail = ({
   txtInfoLabel,
   txtUserService,
   statusService,
-  txtZoneService,
-  txtTimeTotalService,
+  // txtZoneService,
+  // txtTimeTotalService,
   txtDistanceService,
   txtServiceService,
   txtPayService,
@@ -30,13 +31,12 @@ export const CardServiceDetail = ({
   txtModelCarService,
   txtCarNumberService,
   txtNumberDriverService,
-  viewNumberDriverService,
   txtSmsDriverService,
   onClickCross,
   txtTootipCross,
   labelUserService,
-  labelZoneService,
-  labelTimeTotalService,
+  // labelZoneService,
+  // labelTimeTotalService,
   labelDistanceService,
   labelServiceService,
   labelPayService,
@@ -46,6 +46,12 @@ export const CardServiceDetail = ({
   labelCarNumberService,
   labelNumberDriverService,
   labelSmsDriverService,
+  labelPhoneNumberSupplierService,
+  txtPhoneNumberSupplierService,
+  labelPhoneNumberTaxiDriverService,
+  txtPhoneNumberTaxiDriverService,
+  canRequestCallFromDriver,
+  onClickBtnCanRequestCallFromDriver,
 }) => {
   // STATE TOOLTIP
   const [isToolTipMounted, setIsToolTipMounted] = useState(false)
@@ -96,16 +102,32 @@ export const CardServiceDetail = ({
         </div>
 
         <div className={getStyles('card-content')}>
-          <div className={getStyles('card-subcontent')}>
+          <div className={getStyles('card-subcontent-inLine')}>
             <Label>
               <Icon name="reference" size="xs" color="highlight" />
               &nbsp;
               {labelRefService}
             </Label>
 
-            <p className={getStyles('card-content-p')}>{txtRefService}</p>
+            <p className={getStyles('card-content-p')}>
+              &nbsp; {txtRefService}
+            </p>
           </div>
+        </div>
 
+        {txtPhoneNumberSupplierService ? (
+          <div className={getStyles('card-content')}>
+            <div className={getStyles('card-subcontent-inLine')}>
+              <Label>{labelPhoneNumberSupplierService}</Label>
+
+              <p className={getStyles('card-content-p')}>
+                &nbsp; {txtPhoneNumberSupplierService}
+              </p>
+            </div>
+          </div>
+        ) : null}
+
+        <div className={getStyles('card-content')}>
           <div className={getStyles('card-subcontent')}>
             <Label>
               <Icon name="userNumber" size="xs" color="highlight" />
@@ -127,6 +149,31 @@ export const CardServiceDetail = ({
           </div>
         </div>
 
+        {txtPhoneNumberTaxiDriverService ? (
+          <div className={getStyles('card-content')}>
+            <div className={getStyles('card-subcontent-inLine')}>
+              <Label>{labelPhoneNumberTaxiDriverService}</Label>
+
+              <p className={getStyles('card-content-p')}>
+                &nbsp; {txtPhoneNumberTaxiDriverService}
+              </p>
+            </div>
+          </div>
+        ) : null}
+
+        {canRequestCallFromDriver ? (
+          <div className={getStyles('card-content-btn')}>
+            <div className={getStyles('card-subcontent-inLine')}>
+              <Button
+                type="primary"
+                onClick={onClickBtnCanRequestCallFromDriver}
+              >
+                Solicitar que el conductor me llame
+              </Button>
+            </div>
+          </div>
+        ) : null}
+
         <div className={getStyles('card-content')}>
           {/* <div className={getStyles('card-subcontent')}>
             <Label>
@@ -138,21 +185,19 @@ export const CardServiceDetail = ({
             <p className={getStyles('card-content-p')}>{txtZoneService}</p>
           </div> */}
 
-          {viewNumberDriverService ? (
-            <div className={getStyles('card-subcontent')}>
-              <Label>
-                <Icon name="userNumber" size="xs" color="highlight" />
-                &nbsp;
-                {labelNumberDriverService}
-              </Label>
+          <div className={getStyles('card-subcontent')}>
+            <Label>
+              {/* <Icon name="userNumber" size="xs" color="highlight" />
+                &nbsp; */}
+              {labelNumberDriverService}
+            </Label>
 
-              <p className={getStyles('card-content-p')}>
-                {txtNumberDriverService}
-              </p>
-            </div>
-          ) : null}
+            <p className={getStyles('card-content-p')}>
+              {txtNumberDriverService}
+            </p>
+          </div>
 
-          <div className={getStyles('card-subcontent')}>
+          {/* <div className={getStyles('card-subcontent')}>
             <Label>
               <Icon name="clock" size="xs" color="highlight" />
               &nbsp;
@@ -160,7 +205,7 @@ export const CardServiceDetail = ({
             </Label>
 
             <p className={getStyles('card-content-p')}>{txtTimeTotalService}</p>
-          </div>
+          </div> */}
 
           <div className={getStyles('card-subcontent')}>
             <Label>
@@ -193,7 +238,9 @@ export const CardServiceDetail = ({
 
             <p className={getStyles('card-content-p')}>{txtPayService}</p>
           </div>
+        </div>
 
+        <div className={getStyles('card-content')}>
           <div className={getStyles('card-subcontent')}>
             <Label>
               <Icon name="userNumber" size="xs" color="highlight" />
@@ -203,9 +250,7 @@ export const CardServiceDetail = ({
 
             <p className={getStyles('card-content-p')}>{txtServiceService}</p>
           </div>
-        </div>
 
-        <div className={getStyles('card-content')}>
           <div className={getStyles('card-subcontent')}>
             <Label>
               <Icon name="messageDriver" size="xs" color="highlight" />
@@ -253,8 +298,8 @@ CardServiceDetail.propTypes = {
   txtInfoLabel: PropTypes.any,
   statusService: PropTypes.number,
   txtUserService: PropTypes.string,
-  txtZoneService: PropTypes.string,
-  txtTimeTotalService: PropTypes.string,
+  // txtZoneService: PropTypes.string,
+  // txtTimeTotalService: PropTypes.string,
   txtDistanceService: PropTypes.string,
   txtServiceService: PropTypes.string,
   txtPayService: PropTypes.string,
@@ -263,14 +308,13 @@ CardServiceDetail.propTypes = {
   txtModelCarService: PropTypes.string,
   txtCarNumberService: PropTypes.string,
   txtNumberDriverService: PropTypes.string,
-  viewNumberDriverService: PropTypes.bool,
   txtSmsDriverService: PropTypes.string,
   onClickCross: PropTypes.func,
   txtTootipCross: PropTypes.string,
   selectCard: PropTypes.bool,
   labelUserService: PropTypes.string,
-  labelZoneService: PropTypes.string,
-  labelTimeTotalService: PropTypes.string,
+  // labelZoneService: PropTypes.string,
+  // labelTimeTotalService: PropTypes.string,
   labelDistanceService: PropTypes.string,
   labelServiceService: PropTypes.string,
   labelPayService: PropTypes.string,
@@ -280,6 +324,12 @@ CardServiceDetail.propTypes = {
   labelCarNumberService: PropTypes.string,
   labelNumberDriverService: PropTypes.string,
   labelSmsDriverService: PropTypes.string,
+  txtPhoneNumberSupplierService: PropTypes.string,
+  labelPhoneNumberSupplierService: PropTypes.string,
+  labelPhoneNumberTaxiDriverService: PropTypes.string,
+  txtPhoneNumberTaxiDriverService: PropTypes.string,
+  onClickBtnCanRequestCallFromDriver: PropTypes.func,
+  canRequestCallFromDriver: PropTypes.bool,
 }
 
 CardServiceDetail.defaultProps = {
@@ -287,8 +337,8 @@ CardServiceDetail.defaultProps = {
   txtInfoLabel: '',
   statusService: 10,
   txtUserService: '',
-  txtZoneService: '',
-  txtTimeTotalService: '',
+  // txtZoneService: '',
+  // txtTimeTotalService: '',
   txtDistanceService: '',
   txtServiceService: '',
   txtPayService: '',
@@ -297,14 +347,13 @@ CardServiceDetail.defaultProps = {
   txtModelCarService: '',
   txtCarNumberService: '',
   txtNumberDriverService: '',
-  viewNumberDriverService: false,
   txtSmsDriverService: '',
   onClickCross: () => {},
   txtTootipCross: 'Cerrar',
   selectCard: false,
   labelUserService: 'Creado por:',
-  labelZoneService: 'Recogida',
-  labelTimeTotalService: 'Tiempo estimado',
+  // labelZoneService: 'Recogida',
+  // labelTimeTotalService: 'Tiempo estimado',
   labelDistanceService: 'Distancia',
   labelServiceService: 'Servicio',
   labelPayService: 'Método de pago',
@@ -314,6 +363,12 @@ CardServiceDetail.defaultProps = {
   labelCarNumberService: ' Matrícula',
   labelNumberDriverService: ' Telefono conductor',
   labelSmsDriverService: 'Mensaje al conductor',
+  txtPhoneNumberSupplierService: '',
+  labelPhoneNumberSupplierService: 'Teléfono de la flota',
+  txtPhoneNumberTaxiDriverService: '',
+  labelPhoneNumberTaxiDriverService: 'Teléfono del conductor',
+  onClickBtnCanRequestCallFromDriver: () => {},
+  canRequestCallFromDriver: false,
 }
 
 export default withStyles(styles)(CardServiceDetail)

package/molecules/CardServiceDetail/CardServiceDetail.module.css

@@ -1,4 +1,4 @@
-.card-service-detail  {
+.card-service-detail {
   /* display: flex; */
   width: 100%;
   align-items: center;
@@ -35,6 +35,17 @@
   margin-left: 4px;
 }
 
+.card-content-btn {
+  display: flex;
+  align-items: center;
+  align-content: center;
+  border-top: 1px solid #dfe8f2;
+  padding: 6px 6px;
+  justify-content: center;
+  flex-wrap: nowrap;
+}
+
+
 .card-content-action {
   padding-right: 4px;
 }
@@ -143,7 +154,7 @@
   -webkit-background-size: 4px 100%;
   -moz-background-size: 4px 100%;
   background-size: 4px 100%;
-  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=),url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
+  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=), url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
   background-image: -webkit-linear-gradient(top, #39b54a 0%, #00a3ff 100%), -webkit-linear-gradient(top, #39b54a 0%, #00a3ff 100%);
   background-image: -moz-linear-gradient(top, #39b54a 0%, #00a3ff 100%), -moz-linear-gradient(top, #39b54a 0%, #00a3ff 100%);
   background-image: -o-linear-gradient(top, #39b54a 0%, #00a3ff 100%), -o-linear-gradient(top, #39b54a 0%, #00a3ff 100%);
@@ -151,13 +162,13 @@
 }
 
 .flip-out-hor-bottom {
-	-webkit-animation: flip-out-hor-bottom 0.45s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
-	        animation: flip-out-hor-bottom 0.45s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
+  -webkit-animation: flip-out-hor-bottom 0.45s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
+  animation: flip-out-hor-bottom 0.45s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
 }
 
 .flip-in-hor-bottom {
-	-webkit-animation: flip-in-hor-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
-	        animation: flip-in-hor-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+  -webkit-animation: flip-in-hor-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+  animation: flip-in-hor-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
 }
 
 /**
@@ -165,27 +176,30 @@
  * animation flip-out-hor-bottom
  * ----------------------------------------
  */
- @-webkit-keyframes flip-out-hor-bottom {
+@-webkit-keyframes flip-out-hor-bottom {
   0% {
     -webkit-transform: rotateX(0);
-            transform: rotateX(0);
+    transform: rotateX(0);
     opacity: 1;
   }
+
   100% {
     -webkit-transform: rotateX(-70deg);
-            transform: rotateX(-70deg);
+    transform: rotateX(-70deg);
     opacity: 0;
   }
 }
+
 @keyframes flip-out-hor-bottom {
   0% {
     -webkit-transform: rotateX(0);
-            transform: rotateX(0);
+    transform: rotateX(0);
     opacity: 1;
   }
+
   100% {
     -webkit-transform: rotateX(-70deg);
-            transform: rotateX(-70deg);
+    transform: rotateX(-70deg);
     opacity: 0;
   }
 }
@@ -196,27 +210,30 @@
  * animation flip-in-hor-bottom
  * ----------------------------------------
  */
- @-webkit-keyframes flip-in-hor-bottom {
+@-webkit-keyframes flip-in-hor-bottom {
   0% {
     -webkit-transform: rotateX(80deg);
-            transform: rotateX(80deg);
+    transform: rotateX(80deg);
     opacity: 0;
   }
+
   100% {
     -webkit-transform: rotateX(0);
-            transform: rotateX(0);
+    transform: rotateX(0);
     opacity: 1;
   }
 }
+
 @keyframes flip-in-hor-bottom {
   0% {
     -webkit-transform: rotateX(80deg);
-            transform: rotateX(80deg);
+    transform: rotateX(80deg);
     opacity: 0;
   }
+
   100% {
     -webkit-transform: rotateX(0);
-            transform: rotateX(0);
+    transform: rotateX(0);
     opacity: 1;
   }
-}
+}

package/molecules/ColumnTable/ColumnTable.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useState } from "react";
+import { useState } from 'react'
 import PropTypes from 'prop-types'
 import styles from './ColumnTable.module.css'
 import { options } from './constants'
@@ -10,145 +10,123 @@ import Icon from '../../atoms/Icon'
 import DynamicSelect from '../../molecules/DynamicSelect'
 import { Horizontal, Vertical } from '../../layout/Spacer/components'
 
-
-export const ColumnTable = ({ getStyles, handleSorting, columnUppercase, onChangeInput, onChangeSelect, columnsData, opSelect }) => {
-
+export const ColumnTable = ({
+  getStyles,
+  handleSorting,
+  columnUppercase,
+  onChangeInput,
+  onChangeSelect,
+  columnsData,
+  opSelect,
+}) => {
   // const [sortable, setSortable] = useState(true)
   // const [accessor, setAccessor] = useState("")
 
-  const [sortField, setSortField] = useState("")
-  const [order, setOrder] = useState("asc")
+  const [sortField, setSortField] = useState('')
+  const [order, setOrder] = useState('asc')
 
   // const [optionsSelect, setOptionsSelect] = useState(opSelect);
 
-
   const handleSortingChange = (accessor) => {
-    const sortOrder =
-      accessor === sortField && order === "asc" ? "desc" : "asc"
+    const sortOrder = accessor === sortField && order === 'asc' ? 'desc' : 'asc'
 
     setSortField(accessor)
     setOrder(sortOrder)
     handleSorting(accessor, sortOrder)
   }
 
-
   return (
-
     // <div className={getStyles('tbl-header')}>
     //   <table className={getStyles('table')} cellPadding="0" cellSpacing="0" border="0">
     <thead>
       <tr>
-
         {columnsData.map(({ accessor, sortable, ...props }) => {
-
           const cl = sortable
-            ? sortField && sortField === accessor && order === "asc"
-              ? "up"
-              : sortField && sortField === accessor && order === "desc"
-                ? "down"
-                : "default"
-            : "";
-
-          return (
-            props.activeView ?
-              // setSortable(props.sortable)
-              // setAccessor()
-              (<th
-                key={props.idInput}
-                className={getStyles('column-table',
-                  { 'column-uppercase': columnUppercase },
-                  { 'thacction': accessor === 'iconUrl' },
-                  { 'thcheckbox': props.isCheckbox }
-                )}>
-
-                <span className={getStyles('tbl-txtTh')} onClick={sortable ? () => handleSortingChange(accessor) : null}>
-                  <Paragraph
-                    size="xs"
-                    isInline
-                  >
-                    {props.title}
-                  </Paragraph>
-
-                  <Horizontal size="xs" />
-
-                  {sortable ?
-
-                    cl === "default" ?
-                      <Icon
-                        name="angleUpDown"
-                        size="xs"
-                      />
-                      : cl === "" ? null
-
-                        : cl === "up"
-                          ? <Icon
-                            name="angleDown"
-                            size="xs"
-                          />
-
-                          : <Icon
-                            name="angleUp"
-                            size="xs"
-                          />
-                    : null
-                  }
-                </span>
-
-
-                <Vertical size="xs" />
-
-                {props.viewIsFilter ? (
-
-                  props.typeFilter === 'select' ?
-
-
-                    props.opSelectSecundary ?
-
-                      <DynamicSelect
-                        isInline
-                        // onChange={item => useStateDate([item.selection])}
-                        onChange={item => { onChangeSelect(item, props.idInput) }}
-                        optionsSelect={props.optionsSelect}
-                        placeholder={props.placeholder}
-                        maxMenuHeight={110}
-                      />
-
-                      :
-
-                      <DynamicSelect
-                        isInline
-                        // onChange={item => useStateDate([item.selection])}
-                        onChange={item => { onChangeSelect(item, props.idInput) }}
-                        optionsSelect={opSelect || props.optionsSelect}
-                        placeholder={props.placeholder}
-                        maxMenuHeight={110}
-                      />
-
-                    :
-                    <Input
-                      isInputFilter
-                      id={props.idInput}
-                      type={props.typeFilter}
-                      name={props.nameInput}
-                      onChange={onChangeInput}
+            ? sortField && sortField === accessor && order === 'asc'
+              ? 'up'
+              : sortField && sortField === accessor && order === 'desc'
+              ? 'down'
+              : 'default'
+            : ''
+
+          return props.activeView ? (
+            // setSortable(props.sortable)
+            // setAccessor()
+            <th
+              key={props.idInput}
+              className={getStyles(
+                'column-table',
+                { 'column-uppercase': columnUppercase },
+                { thacction: accessor === 'iconUrl' },
+                { thcheckbox: props.isCheckbox }
+              )}
+            >
+              <span
+                className={getStyles('tbl-txtTh')}
+                onClick={sortable ? () => handleSortingChange(accessor) : null}
+              >
+                <Paragraph size="xs" isInline>
+                  {props.title}
+                </Paragraph>
+
+                <Horizontal size="xs" />
+
+                {sortable ? (
+                  cl === 'default' ? (
+                    <Icon name="angleUpDown" size="xs" />
+                  ) : cl === '' ? null : cl === 'up' ? (
+                    <Icon name="angleDown" size="xs" />
+                  ) : (
+                    <Icon name="angleUp" size="xs" />
+                  )
+                ) : null}
+              </span>
+
+              <Vertical size="xs" />
+
+              {props.viewIsFilter ? (
+                props.typeFilter === 'select' ? (
+                  props.opSelectSecundary ? (
+                    <DynamicSelect
+                      isInline
+                      // onChange={item => useStateDate([item.selection])}
+                      onChange={(item) => {
+                        onChangeSelect(item, props.idInput)
+                      }}
+                      optionsSelect={props.optionsSelect}
                       placeholder={props.placeholder}
+                      maxMenuHeight={110}
                     />
+                  ) : (
+                    <DynamicSelect
+                      isInline
+                      // onChange={item => useStateDate([item.selection])}
+                      onChange={(item) => {
+                        onChangeSelect(item, props.idInput)
+                      }}
+                      optionsSelect={opSelect || props.optionsSelect}
+                      placeholder={props.placeholder}
+                      maxMenuHeight={110}
+                    />
+                  )
+                ) : (
+                  <Input
+                    isInputFilter
+                    id={props.idInput}
+                    type={props.typeFilter}
+                    name={props.nameInput}
+                    onChange={onChangeInput}
+                    placeholder={props.placeholder}
+                  />
                 )
-
-                  : null
-                }
-
-              </th>
-              ) : null
-          )
-
+              ) : null}
+            </th>
+          ) : null
         })}
-
       </tr>
     </thead>
     // </table>
     // </div>
-
   )
 }
 
@@ -161,11 +139,11 @@ ColumnTable.propTypes = {
 }
 
 ColumnTable.defaultProps = {
-  getStyles: () => { },
-  handleSorting: () => { },
+  getStyles: () => {},
+  handleSorting: () => {},
   columnUppercase: false,
-  onChangeInput: () => { },
-  onChangeSelect: () => { },
+  onChangeInput: () => {},
+  onChangeSelect: () => {},
 }
 
 export default withStyles(styles)(ColumnTable)