techsbcn-storybook 0.25.1 → 0.26.0

package/dist/components/tables/SimpleTableComponent/SimpleTableComponent.d.ts

@@ -29,6 +29,7 @@ interface ColumnProps {
     label?: string;
     minWidth?: number;
     maxWidth?: number;
+    width?: number;
     align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
     alignCell?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
     action?: ActionProps[];
@@ -65,6 +66,7 @@ interface ColumnProps {
         enumSuffix?: string;
     };
     rowViewFormat?: (row: any) => any;
+    cellClassName?: (row: any) => string;
 }
 interface ActionProps {
     children: React.ReactNode;

package/dist/components/tables/TableComponent/TableComponent.d.ts

@@ -26,10 +26,11 @@ interface TableComponentProps {
     isBordered?: boolean;
 }
 interface ColumnProps {
-    id: string;
-    label: string;
+    id?: string;
+    label?: string;
     minWidth?: number;
     maxWidth?: number;
+    width?: number;
     align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
     alignCell?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
     action?: ActionProps[];
@@ -68,6 +69,7 @@ interface ColumnProps {
     };
     orderBy?: string;
     rowViewFormat?: (row: any) => any;
+    cellClassName?: (row: any) => string;
 }
 interface ActionProps {
     children: React.ReactNode;

package/dist/techsbcn-storybook.cjs.development.js

@@ -605,9 +605,9 @@ var TableComponent = function TableComponent(props) {
     }
 
     if (column.isBoolean) {
-      var booleanStr = value ? 'true' : 'false';
+      var booleanStr = value ? value ? 'true' : 'false' : '';
 
-      if (column.isBoolean.enumType) {
+      if (column.isBoolean.enumType && booleanStr) {
         var _column$isBoolean3;
 
         if (column.isBoolean.enumSuffix) {
@@ -615,7 +615,7 @@ var TableComponent = function TableComponent(props) {
 
           return props.values[((_column$isBoolean = column.isBoolean) == null ? void 0 : _column$isBoolean.enumType[booleanStr].toUpperCase()) + "_" + ((_column$isBoolean2 = column.isBoolean) == null ? void 0 : _column$isBoolean2.enumSuffix.toUpperCase())];
         } else return props.values[(_column$isBoolean3 = column.isBoolean) == null ? void 0 : _column$isBoolean3.enumType[booleanStr].toUpperCase()];
-      } else if (column.isBoolean.enumSuffix) {
+      } else if (column.isBoolean.enumSuffix && booleanStr) {
         var _column$isBoolean4;
 
         return props.values[booleanStr.toUpperCase() + "_" + ((_column$isBoolean4 = column.isBoolean) == null ? void 0 : _column$isBoolean4.enumSuffix.toUpperCase())];
@@ -725,17 +725,18 @@ var TableComponent = function TableComponent(props) {
       key: column.isUnique ? guid : column.id,
       align: column.align ? column.align : 'center',
       style: {
+        width: column.width,
         minWidth: column.minWidth,
         maxWidth: column.maxWidth
       }
-    }, column.id !== 'actions' && !column.isCheck && !column.isActiveFunction && !column.noSort ? React__default.createElement(_.TableSortLabel, {
+    }, (column.orderBy || column.id) && column.id !== 'actions' && !column.isCheck && !column.isActiveFunction && !column.noSort ? React__default.createElement(_.TableSortLabel, {
       className: "table-header-cell",
       active: column.orderBy ? filters.orderBy === column.orderBy : filters.orderBy === column.id,
       direction: filters.orderAsc ? 'asc' : 'desc',
       onClick: function onClick() {
-        var _column$orderBy;
+        var _ref, _column$orderBy;
 
-        return createSortHandler((_column$orderBy = column.orderBy) != null ? _column$orderBy : column.id);
+        return createSortHandler((_ref = (_column$orderBy = column.orderBy) != null ? _column$orderBy : column.id) != null ? _ref : '');
       },
       hideSortIcon: true
     }, column.label) : column.isCheck ? React__default.createElement(_.Box, {
@@ -771,69 +772,71 @@ var TableComponent = function TableComponent(props) {
       tabIndex: -1,
       key: index
     }, props.columns.map(function (column) {
-      var value = column.rowViewFormat ? checkFormat(row, column.rowViewFormat) : ObjectbyString(row, column.id);
-      var isItemSelected = column.isCheck && isSelected(row.id);
-      var guid = Math.random().toString(36).substring(7);
-      return React__default.createElement(_.TableCell, {
-        className: "table-cell",
-        key: column.isUnique ? guid : column.id,
-        sx: {
-          textAlign: {
-            xs: 'left',
-            md: column.alignCell ? column.alignCell : column.align ? column.align : 'center'
-          }
-        },
-        onClick: function onClick() {
-          return !column.action && !column.isCheck && !column.isActiveFunction ? handleRowClick(row) : '';
-        }
-      }, React__default.createElement(_.Hidden, {
-        mdUp: true
-      }, column.label !== '-' && React__default.createElement(_.Box, {
-        display: "inline-block",
-        className: "label-cell"
-      }, column.label)), column.rowViewFormat ? React__default.createElement(_.Box, {
-        className: "format-value"
-      }, value) : column.action ? React__default.createElement(_.Box, null, React__default.createElement(_.Box, {
-        display: "flex",
-        className: "actions"
-      }, column.action && column.action.map(function (action, i) {
-        return React__default.createElement(_.Box, {
-          key: i
-        }, action.onClick && React__default.createElement(_.Box, {
-          className: "btn-action main-color-hover",
+      if (column.id) {
+        var value = column.rowViewFormat ? checkFormat(row, column.rowViewFormat) : ObjectbyString(row, column.id);
+        var isItemSelected = column.isCheck && isSelected(row.id);
+        var guid = Math.random().toString(36).substring(7);
+        return React__default.createElement(_.TableCell, {
+          className: "table-cell " + (column.cellClassName ? column.cellClassName(row) : ''),
+          key: column.isUnique ? guid : column.id,
+          sx: {
+            textAlign: {
+              xs: 'left',
+              md: column.alignCell ? column.alignCell : column.align ? column.align : 'center'
+            }
+          },
           onClick: function onClick() {
-            return action.onClick && action.onClick(row);
+            return !column.action && !column.isCheck && !column.isActiveFunction ? handleRowClick(row) : '';
           }
-        }, action.children), action.onClickId && React__default.createElement(_.Box, {
+        }, React__default.createElement(_.Hidden, {
+          mdUp: true
+        }, column.label !== '-' && React__default.createElement(_.Box, {
+          display: "inline-block",
+          className: "label-cell"
+        }, column.label)), column.rowViewFormat ? React__default.createElement(_.Box, {
+          className: "format-value"
+        }, value) : column.action && row.length > 0 ? React__default.createElement(_.Box, null, React__default.createElement(_.Box, {
+          display: "flex",
+          className: "actions"
+        }, column.action && column.action.map(function (action, i) {
+          return React__default.createElement(_.Box, {
+            key: i
+          }, action.onClick && React__default.createElement(_.Box, {
+            className: "btn-action main-color-hover",
+            onClick: function onClick() {
+              return action.onClick && action.onClick(row);
+            }
+          }, action.children), action.onClickId && React__default.createElement(_.Box, {
+            className: "btn-action main-color-hover",
+            onClick: function onClick() {
+              return action.onClickId && action.onClickId(row.id);
+            }
+          }, action.children), !action.onClick && !action.onClickId && React__default.createElement(_.Box, {
+            className: "btn-action"
+          }, action.children));
+        }))) : column.isActiveFunction && row.length > 0 ? React__default.createElement(_.Box, {
           className: "btn-action main-color-hover",
           onClick: function onClick() {
-            return action.onClickId && action.onClickId(row.id);
+            return column.isActiveFunction && column.isActiveFunction.onClickId(row.id);
           }
-        }, action.children), !action.onClick && !action.onClickId && React__default.createElement(_.Box, {
-          className: "btn-action"
-        }, action.children));
-      }))) : column.isActiveFunction ? React__default.createElement(_.Box, {
-        className: "btn-action main-color-hover",
-        onClick: function onClick() {
-          return column.isActiveFunction && column.isActiveFunction.onClickId(row.id);
-        }
-      }, value ? column.isActiveFunction.activeIcon : column.isActiveFunction.disabledIcon) : column.isCheck ? React__default.createElement(_.Box, {
-        className: "checkbox-cell"
-      }, React__default.createElement(_.Checkbox, {
-        checked: isItemSelected,
-        inputProps: {
-          'aria-labelledby': row.id
-        },
-        onChange: function onChange(event) {
-          return onCheckAction(event, row.id);
-        }
-      })) : column.isEditableTableCell ? EditableTableCell(row, value, column.id, column.isEditableTableCell) : column.enumColumn ? React__default.createElement(_.Box, {
-        className: (column.enumColumn.hasColor ? (column.enumColumn.enumSuffix ? value.toLowerCase() + "-" + column.enumColumn.enumSuffix.toLowerCase() : value.toString().toLowerCase()) + "-type-color" : '') + " format-value"
-      }, formatValue(value, column)) : column.isBoolean ? React__default.createElement(_.Box, {
-        className: (column.isBoolean.hasColor ? (column.isBoolean.enumSuffix ? value.toString().toLowerCase() + "-" + column.isBoolean.enumSuffix.toLowerCase() : value.toString().toLowerCase()) + "-boolean-color" : '') + " format-value"
-      }, formatValue(value, column)) : React__default.createElement(_.Box, {
-        className: "" + (column.isImage ? '' : 'format-value')
-      }, formatValue(value, column)));
+        }, value ? column.isActiveFunction.activeIcon : column.isActiveFunction.disabledIcon) : column.isCheck && row.length > 0 ? React__default.createElement(_.Box, {
+          className: "checkbox-cell"
+        }, React__default.createElement(_.Checkbox, {
+          checked: isItemSelected,
+          inputProps: {
+            'aria-labelledby': row.id
+          },
+          onChange: function onChange(event) {
+            return onCheckAction(event, row.id);
+          }
+        })) : column.isEditableTableCell && row.length > 0 ? EditableTableCell(row, value, column.id, column.isEditableTableCell) : column.enumColumn && row.length > 0 ? React__default.createElement(_.Box, {
+          className: (column.enumColumn.hasColor ? (column.enumColumn.enumSuffix ? value.toLowerCase() + "-" + column.enumColumn.enumSuffix.toLowerCase() : value.toString().toLowerCase()) + "-type-color" : '') + " format-value"
+        }, formatValue(value, column)) : column.isBoolean && row.length > 0 ? React__default.createElement(_.Box, {
+          className: (column.isBoolean.hasColor ? (column.isBoolean.enumSuffix ? value.toString().toLowerCase() + "-" + column.isBoolean.enumSuffix.toLowerCase() : value.toString().toLowerCase()) + "-boolean-color" : '') + " format-value"
+        }, formatValue(value, column)) : React__default.createElement(_.Box, {
+          className: "" + (column.isImage ? '' : 'format-value')
+        }, formatValue(value, column)));
+      } else return null;
     }));
   }) : !props.loading ? React__default.createElement(_.TableRow, null, React__default.createElement(_.TableCell, {
     colSpan: props.columns.length
@@ -842,10 +845,10 @@ var TableComponent = function TableComponent(props) {
     count: props.totalCount,
     rowsPerPage: props.baseFilters.limit,
     labelRowsPerPage: props.values.SHOWING,
-    labelDisplayedRows: function labelDisplayedRows(_ref) {
-      var from = _ref.from,
-          to = _ref.to,
-          count = _ref.count;
+    labelDisplayedRows: function labelDisplayedRows(_ref2) {
+      var from = _ref2.from,
+          to = _ref2.to,
+          count = _ref2.count;
       return props.values.TABLE_LABEL_DISPLAY(from, to, count);
     },
     page: props.baseFilters.page - 1,
@@ -1012,9 +1015,9 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
     }
 
     if (column.isBoolean) {
-      var booleanStr = value ? 'true' : 'false';
+      var booleanStr = value ? value ? 'true' : 'false' : '';
 
-      if (column.isBoolean.enumType) {
+      if (column.isBoolean.enumType && booleanStr) {
         var _column$isBoolean3;
 
         if (column.isBoolean.enumSuffix) {
@@ -1022,7 +1025,7 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
 
           return props.values[((_column$isBoolean = column.isBoolean) == null ? void 0 : _column$isBoolean.enumType[booleanStr].toUpperCase()) + "_" + ((_column$isBoolean2 = column.isBoolean) == null ? void 0 : _column$isBoolean2.enumSuffix.toUpperCase())];
         } else return props.values[(_column$isBoolean3 = column.isBoolean) == null ? void 0 : _column$isBoolean3.enumType[booleanStr].toUpperCase()];
-      } else if (column.isBoolean.enumSuffix) {
+      } else if (column.isBoolean.enumSuffix && booleanStr) {
         var _column$isBoolean4;
 
         return props.values[booleanStr.toUpperCase() + "_" + ((_column$isBoolean4 = column.isBoolean) == null ? void 0 : _column$isBoolean4.enumSuffix.toUpperCase())];
@@ -1128,6 +1131,7 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
         key: column.isUnique ? guid : column.id,
         align: column.align ? column.align : 'center',
         style: {
+          width: column.width,
           minWidth: column.minWidth,
           maxWidth: column.maxWidth
         }
@@ -1170,7 +1174,7 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
         var isItemSelected = column.isCheck && isSelected(row.id);
         var guid = Math.random().toString(36).substring(7);
         return React__default.createElement(_.TableCell, {
-          className: "table-cell",
+          className: "table-cell " + (column.cellClassName ? column.cellClassName(row) : ''),
           key: column.isUnique ? guid : column.id,
           sx: {
             textAlign: {
@@ -1186,7 +1190,7 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
         }, column.label !== '-' && React__default.createElement(_.Box, {
           display: "inline-block",
           className: "label-cell"
-        }, column.label)), column.action ? React__default.createElement(_.Box, null, React__default.createElement(_.Box, {
+        }, column.label)), column.action && row.length > 0 ? React__default.createElement(_.Box, null, React__default.createElement(_.Box, {
           display: "flex",
           className: "actions"
         }, column.rowViewFormat ? React__default.createElement(_.Box, {
@@ -1207,12 +1211,12 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
           }, action.children), !action.onClick && !action.onClickId && React__default.createElement(_.Box, {
             className: "btn-action"
           }, action.children));
-        }))) : column.isActiveFunction ? React__default.createElement(_.Box, {
+        }))) : column.isActiveFunction && row.length > 0 ? React__default.createElement(_.Box, {
           className: "btn-action main-color-hover",
           onClick: function onClick() {
             return column.isActiveFunction && column.isActiveFunction.onClickId(row.id);
           }
-        }, value ? column.isActiveFunction.activeIcon : column.isActiveFunction.disabledIcon) : column.isCheck ? React__default.createElement(_.Box, {
+        }, value ? column.isActiveFunction.activeIcon : column.isActiveFunction.disabledIcon) : column.isCheck && row.length > 0 ? React__default.createElement(_.Box, {
           className: "checkbox-cell"
         }, React__default.createElement(_.Checkbox, {
           checked: isItemSelected,
@@ -1224,9 +1228,9 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
 
             return (_props$isCheckTable18 = props.isCheckTable) != null && _props$isCheckTable18.onCheckedAction ? onCheckAction(event, row.id) : onCheckSingleAction(event, row.id);
           }
-        })) : column.isEditableTableCell ? EditableTableCell(row, value, column.id, column.isEditableTableCell) : column.enumColumn ? React__default.createElement(_.Box, {
+        })) : column.isEditableTableCell && row.length > 0 ? EditableTableCell(row, value, column.id, column.isEditableTableCell) : column.enumColumn && row.length > 0 ? React__default.createElement(_.Box, {
           className: (column.enumColumn.hasColor ? (column.enumColumn.enumSuffix ? value.toLowerCase() + "-" + column.enumColumn.enumSuffix.toLowerCase() : value.toString().toLowerCase()) + "-type-color" : '') + " format-value"
-        }, formatValue(value, column)) : column.isBoolean ? React__default.createElement(_.Box, {
+        }, formatValue(value, column)) : column.isBoolean && row.length > 0 ? React__default.createElement(_.Box, {
           className: (column.isBoolean.hasColor ? (column.isBoolean.enumSuffix ? value.toString().toLowerCase() + "-" + column.isBoolean.enumSuffix.toLowerCase() : value.toString().toLowerCase()) + "-boolean-color" : '') + " format-value"
         }, formatValue(value, column)) : React__default.createElement(_.Box, {
           className: "" + (column.isImage ? '' : 'format-value')