imbric-theme 1.0.1 → 1.0.3

package/atoms/Button/Button.js

@@ -25,10 +25,11 @@ export const Button = ({
   onClick,
   id,
   getStyles,
+  typeButton,
 }) => (
   <button
-  id={id}
-    type="submit"
+    id={id}
+    type={typeButton}
     disabled={isMuted}
     className={getStyles('button', ['type'], {
       'is-inline': isInline || type === 'tertiary',
@@ -68,6 +69,7 @@ Button.propTypes = {
   isFloatRight: PropTypes.bool,
   isFloatLeft: PropTypes.bool,
   id: PropTypes.string,
+  typeButton: PropTypes.string,
 }
 
 Button.defaultProps = {
@@ -78,6 +80,7 @@ Button.defaultProps = {
   isFloatRight: false,
   isFloatLeft: false,
   id: '',
+  typeButton: 'submit'
 }
 
 export default withStyles(styles)(Button)

package/atoms/Input/Input.js

@@ -164,24 +164,24 @@ export const Input = ({
           : isOpenModal
 
             ?
-            <div class="DynamicSelect_dynamic-select__oduOS">
-              <div class="css-1mfvq3n-container">
-                <div style={{ zIndex: 1 }} class="css-mlo5or-control">
-                  <div onClick={(op) => onClickModal(op, id)} style={{ height: '36px' }} class="css-1huup54-ValueContainer">
-                    <div class=" css-qc6sy-singleValue">{value}</div>
+            <div className={getStyles('DynamicSelect_dynamic-select__oduOS')}>
+              <div className={getStyles('css-1mfv3n-container')}>
+                <div style={{ zIndex: 1 }} className={getStyles('css-mlo5or-control')}>
+                  <div onClick={(op) => onClickModal(op, id)} style={{ height: '36px' }} className={getStyles('css-1huup54-ValueContainer')}>
+                    <div className={getStyles('css-qc6sy-singleValue')}>{value}</div>
                   </div>
-                  <div class=" css-1hb7zxy-IndicatorsContainer">
+                  <div className={getStyles('css-1hb7zxy-IndicatorsContainer')}>
 
 
-                    {value !== '' ? <div onClick={(op) => onClickDeleteInput(op, id)} class=" css-tlfecz-indicatorContainer" aria-hidden="true">
-                      <svg height="20" width="20" viewBox="0 0 20 20" aria-hidden="true" focusable="false" class="css-tj5bde-Svg">
+                    {value !== '' ? <div onClick={(op) => onClickDeleteInput(op, id)} className={getStyles('css-tlfecz-indicatorContainer')} aria-hidden="true">
+                      <svg height="20" width="20" viewBox="0 0 20 20" aria-hidden="true" focusable="false" className={getStyles('css-tj5bde-Svg')} >
                         <path d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"></path>
                       </svg>
                     </div> : null}
-                    <span class=" css-1okebmr-indicatorSeparator">
+                    <span className={getStyles('css-1okebmr-indicatorSeparator')}>
                     </span>
-                    <div onClick={(op) => onClickModal(op, id)} class="css-tlfecz-indicatorContainer" aria-hidden="true">
-                      <svg height="20" width="20" viewBox="0 0 20 20" aria-hidden="true" focusable="false" class="css-tj5bde-Svg">
+                    <div onClick={(op) => onClickModal(op, id)} className={getStyles('css-tlfecz-indicatorContainer')} aria-hidden="true">
+                      <svg height="20" width="20" viewBox="0 0 20 20" aria-hidden="true" focusable="false" className={getStyles('css-tj5bde-Svg')}>
                         <path
                           fillRule="evenodd"
                           clipRule="evenodd"

package/atoms/Label/Label.js

@@ -5,10 +5,10 @@ import styles from './Label.module.css'
 import { options } from './constants'
 import withStyles from '../../hocs/withStyles'
 
-export const Label = ({ children, getStyles, isHint }) => {
+export const Label = ({ children, getStyles, isHint, isPointer, onClick }) => {
   return (
 
-    <label className={getStyles('label', ['color'], { 'is-hint': isHint })}>{children}</label>
+    <label onClick={onClick} className={getStyles('label', ['color'], { 'is-hint': isHint, 'is-pointer': isPointer })}>{children}</label>
 
   )
 }
@@ -26,6 +26,7 @@ Label.defaultProps = {
   children: ' ',
   isHint: false,
   color: 'label',
+  onClick: () => { },
 }
 
 export default withStyles(styles)(Label)

package/atoms/Label/Label.module.css

@@ -13,6 +13,10 @@
   font-size: 11px;
 }
 
+.is-pointer {
+  cursor: pointer;
+}
+
 .color-label {
   color: var(--color-brand-eastern-blue);
 }

package/atoms/Modal/Modal.module.css

@@ -106,6 +106,7 @@
     max-height: 700px;
     overflow: auto;
     min-width: 100%;
+    padding: 0px 3px;
   }
 
   .container-full {

package/layout/DynamicTable/DynamicTable.js

@@ -22,6 +22,7 @@ export const DynamicTable = ({
   opColumns,
   opAddColumns,
   opFilterTable,
+  opFilterSecondaryTable,
   isLayoutDate,
   isViewRange,
   isViewRangeSecundary,
@@ -29,6 +30,7 @@ export const DynamicTable = ({
   isViewTitleTableSecundary,
   isViewAddColumn,
   isViewFilterTable,
+  isViewFilterSecondaryTable,
   isViewBtn,
   isViewLeftBtn,
   isViewLeftBtnSecondary,
@@ -45,17 +47,22 @@ export const DynamicTable = ({
   handleBtnTertiary,
   handleAddColumn,
   handleFilterTable,
+  handleFilterSecondaryTable,
   handleSelectRange,
   handleSelectRangeSecundary,
   handleDownloadExcel,
   handleDefaultValue,
   handleDefaultValueFilter,
+  handleDefaultValueFilterSecondary,
   labelDinamicSelect,
   placeholderDinamicSelect,
   isLoadingDinamicSelect,
   labelDinamicSelectFilter,
   placeholderDinamicSelectFilter,
   isLoadingDinamicSelectFilter,
+  labelDinamicSelectFilterSecondary,
+  placeholderDinamicSelectFilterSecondary,
+  isLoadingDinamicSelectFilterSecondary,
   labelSinceDateRange,
   labelTillDateRange,
   labelSinceDateRangeSecundary,
@@ -66,10 +73,11 @@ export const DynamicTable = ({
   handleChangeCheckboxDate,
 }) => {
 
-  const [tableData, setTableData] = useState(optionsData);
-  const [columnsData, setColumnsData] = useState(opColumns);
-  const [addColumsData, setAddColumsData] = useState(opAddColumns);
-  const [filterTableData, setFilterTableData] = useState(opFilterTable);
+  const [tableData, setTableData] = useState(optionsData)
+  const [columnsData, setColumnsData] = useState(opColumns)
+  const [addColumsData, setAddColumsData] = useState(opAddColumns)
+  const [filterTableData, setFilterTableData] = useState(opFilterTable)
+  const [filterSecondaryTableData, setFilterSecondaryTableData] = useState(opFilterSecondaryTable)
 
 
   // STATE TOOLTIP
@@ -155,7 +163,7 @@ export const DynamicTable = ({
 
           <>
 
-            <Horizontal size="sm" />
+
             <div className={getStyles('opFunctionBox3')}>
 
               <Button
@@ -176,7 +184,6 @@ export const DynamicTable = ({
         {isViewLeftBtnSecondary ? (
 
           <>
-
             <div className={getStyles('opFunctionBox3')}>
 
               <Button
@@ -188,6 +195,9 @@ export const DynamicTable = ({
               </Button>
 
             </div>
+
+            <Horizontal size="sm" />
+
           </>
         ) : null}
 
@@ -195,6 +205,8 @@ export const DynamicTable = ({
 
           <>
 
+            <Horizontal size="sm" />
+
             <div className={getStyles('opFunctionBox3')}>
 
               <Button
@@ -284,6 +296,36 @@ export const DynamicTable = ({
           </>
         ) : null}
 
+
+        {isViewFilterSecondaryTable ? (
+
+          <>
+            <div className={getStyles('opFunctionBox3')}>
+              <Label>{labelDinamicSelectFilterSecondary}</Label>
+
+              {isLoadingDinamicSelectFilterSecondary ?
+                <DynamicSelect
+                  isInline
+                  onChange={handleFilterSecondaryTable}
+                  optionsSelect={filterSecondaryTableData}
+                  placeholder={placeholderDinamicSelectFilterSecondary}
+                  defaultValue={handleDefaultValueFilterSecondary}
+                  closeMenuOnSelect={false}
+                  isClearable={false}
+                  instanceId={'idFilterSecondaryTableAll'}
+                // defaultValue= { [{value: 'id', label: 'ID'}, {value: 'idService', label: 'ID Reserva'}] }
+                /> : null
+              }
+
+            </div>
+
+            <Horizontal size="xs" />
+
+          </>
+        ) : null}
+
+
+
         {isViewAddColumn ? (
 
           <>
@@ -389,12 +431,14 @@ DynamicTable.propTypes = {
   isViewTitleTableSecundary: PropTypes.bool,
   isViewAddColumn: PropTypes.bool,
   isViewFilterTable: PropTypes.bool,
+  isViewFilterSecondaryTable: PropTypes.bool,
   isViewDownloadDoc: PropTypes.bool,
   isViewBtn: PropTypes.bool,
   isViewLeftBtn: PropTypes.bool,
   onChangeInput: PropTypes.func,
   handleAddColumn: PropTypes.func,
   handleFilterTable: PropTypes.func,
+  handleFilterSecondaryTable: PropTypes.func,
   isError: PropTypes.string,
   isLayoutDate: PropTypes.string,
   handleSelectRange: PropTypes.func,
@@ -403,7 +447,9 @@ DynamicTable.propTypes = {
   labelDinamicSelect: PropTypes.string,
   placeholderDinamicSelect: PropTypes.string,
   labelDinamicSelectFilter: PropTypes.string,
+  labelDinamicSelectFilterSecondary: PropTypes.string,
   placeholderDinamicSelectFilter: PropTypes.string,
+  placeholderDinamicSelectFilterSecondary: PropTypes.string,
   labelSinceDateRange: PropTypes.string,
   labelTillDateRange: PropTypes.string,
   labelSinceDateRangeSecundary: PropTypes.string,
@@ -428,12 +474,14 @@ DynamicTable.defaultProps = {
   getStyles: () => { },
   handleAddColumn: () => { },
   handleFilterTable: () => { },
+  handleFilterSecondaryTable: () => { },
   isViewRange: true,
   isViewRangeSecundary: false,
   isViewTitleTable: false,
   isViewTitleTableSecundary: false,
   isViewAddColumn: true,
   isViewFilterTable: false,
+  isViewFilterSecondaryTable: false,
   isViewDownloadDoc: true,
   isViewBtn: false,
   isViewLeftBtn: false,
@@ -445,6 +493,8 @@ DynamicTable.defaultProps = {
   placeholderDinamicSelect: 'Seleccionar columnas',
   labelDinamicSelectFilter: '',
   placeholderDinamicSelectFilter: '',
+  labelDinamicSelectFilterSecondary: '',
+  placeholderDinamicSelectFilterSecondary: '',
   labelSinceDateRange: 'Desde',
   labelTillDateRange: 'Hasta',
   labelSinceDateRangeSecundary: 'Desde',

package/molecules/ColumnTable/ColumnTable.module.css

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

package/molecules/RowTable/RowTable.js

@@ -44,6 +44,7 @@ export const RowTable = ({
   txtTootipIconLink,
   txtTootipIconClone,
   txtTootipIconCheckbox,
+  onClickCheckboxRow
 }) => {
 
 
@@ -201,8 +202,8 @@ export const RowTable = ({
                             id={'idToggle' + item.id}
                             checked={item.isSelected}
                             label=""
-                            disabled={[itemTd.disabled]}
-                            onChangeCheckbox={(e) => { handleClickCheckbox(e, item) }}
+                            disabled={itemTd.disabled}
+                            onChangeCheckbox={(e) => { handleClickCheckbox(e, item), onClickCheckboxRow(e, item) }}
                           />
 
                         </td>
@@ -553,68 +554,6 @@ export const RowTable = ({
 
                                 : null}
 
-                              {itemTd.viewTrash ?
-
-                                item.viewTrash === undefined ?
-
-                                  <>
-                                    <span
-                                      data-tip
-                                      data-for='trash'
-                                      onMouseEnter={handleMouseEnter}
-                                      onMouseLeave={handleMouseLeave}
-                                    >
-                                      <>
-                                        <Icon
-                                          background="base"
-                                          name="trash"
-                                          onClick={e => { onClickActionDelete(e, item) }}
-                                        />
-                                        <Horizontal size="xs" />
-                                      </>
-
-                                    </span>
-
-                                    {isToolTipMounted ? (
-                                      <ReactTooltip id='trash' type='error'>
-                                        <span>{txtTootipIconDelete}</span>
-                                      </ReactTooltip>
-                                    ) : null}
-                                  </>
-
-                                  :
-
-                                  item.viewTrash ?
-
-                                    <>
-                                      <span
-                                        data-tip
-                                        data-for='trash'
-                                        onMouseEnter={handleMouseEnter}
-                                        onMouseLeave={handleMouseLeave}
-                                      >
-                                        <>
-                                          <Icon
-                                            background="base"
-                                            name="trash"
-                                            onClick={e => { onClickActionDelete(e, item) }}
-                                          />
-                                          <Horizontal size="xs" />
-                                        </>
-
-                                      </span>
-
-                                      {isToolTipMounted ? (
-                                        <ReactTooltip id='trash' type='error'>
-                                          <span>{txtTootipIconDelete}</span>
-                                        </ReactTooltip>
-                                      ) : null}
-                                    </>
-
-                                    : null
-
-                                : null}
-
 
                               {itemTd.viewLink ?
 
@@ -944,7 +883,67 @@ export const RowTable = ({
                                 : null}
 
 
+                              {itemTd.viewTrash ?
+
+                                item.viewTrash === undefined ?
+
+                                  <>
+                                    <span
+                                      data-tip
+                                      data-for='trash'
+                                      onMouseEnter={handleMouseEnter}
+                                      onMouseLeave={handleMouseLeave}
+                                    >
+                                      <>
+                                        <Icon
+                                          background="base"
+                                          name="trash"
+                                          onClick={e => { onClickActionDelete(e, item) }}
+                                        />
+                                        <Horizontal size="xs" />
+                                      </>
+
+                                    </span>
+
+                                    {isToolTipMounted ? (
+                                      <ReactTooltip id='trash' type='error'>
+                                        <span>{txtTootipIconDelete}</span>
+                                      </ReactTooltip>
+                                    ) : null}
+                                  </>
+
+                                  :
 
+                                  item.viewTrash ?
+
+                                    <>
+                                      <span
+                                        data-tip
+                                        data-for='trash'
+                                        onMouseEnter={handleMouseEnter}
+                                        onMouseLeave={handleMouseLeave}
+                                      >
+                                        <>
+                                          <Icon
+                                            background="base"
+                                            name="trash"
+                                            onClick={e => { onClickActionDelete(e, item) }}
+                                          />
+                                          <Horizontal size="xs" />
+                                        </>
+
+                                      </span>
+
+                                      {isToolTipMounted ? (
+                                        <ReactTooltip id='trash' type='error'>
+                                          <span>{txtTootipIconDelete}</span>
+                                        </ReactTooltip>
+                                      ) : null}
+                                    </>
+
+                                    : null
+
+                                : null}
 
 
 

package/package.json

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