techsbcn-storybook 0.25.1 → 0.26.1

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())];
@@ -722,20 +722,21 @@ var TableComponent = function TableComponent(props) {
     var guid = Math.random().toString(36).substring(7);
     return React__default.createElement(_.TableCell, {
       className: "table-column",
-      key: column.isUnique ? guid : column.id,
+      key: column.isUnique ? guid : column.id ? guid + '-' + column.id : guid,
       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, {
@@ -763,20 +764,23 @@ var TableComponent = function TableComponent(props) {
 
     var rowColor = props.rowsColorColumn && ObjectbyString(row, props.rowsColorColumn.columnName) === props.rowsColorColumn.columnValue ? "row-color-" + props.rowsColorColumn.columnValue : props.isStriped && props.rows.length > 1 && index % 2 == 0 ? 'main-background-color table-striped' : '';
     var isRowSelected = ((_props$isCheckTable13 = props.isCheckTable) == null ? void 0 : _props$isCheckTable13.rowsChecked) && isSelected(row.id);
+    var guidRow = Math.random().toString(36).substring(7);
     return React__default.createElement(_.TableRow, {
       className: "table-rows " + rowColor + " " + (props.onClickRow || props.onClickRowData ? 'row-click' : ''),
       role: "checkbox",
       selected: isRowSelected,
       "aria-checked": isRowSelected,
       tabIndex: -1,
-      key: index
+      key: index + '-' + guidRow
     }, props.columns.map(function (column) {
-      var value = column.rowViewFormat ? checkFormat(row, column.rowViewFormat) : ObjectbyString(row, column.id);
+      var _column$id;
+
+      var value = column.rowViewFormat ? checkFormat(row, column.rowViewFormat) : ObjectbyString(row, (_column$id = column.id) != null ? _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,
+        className: "table-cell " + (column.cellClassName ? column.cellClassName(row) : ''),
+        key: column.isUnique ? guid : column.id ? guid + '-' + column.id : guid,
         sx: {
           textAlign: {
             xs: 'left',
@@ -793,7 +797,7 @@ var TableComponent = function TableComponent(props) {
         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, {
+      }, 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) {
@@ -812,12 +816,12 @@ var TableComponent = function TableComponent(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,
@@ -827,9 +831,9 @@ var TableComponent = function TableComponent(props) {
         onChange: function onChange(event) {
           return onCheckAction(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')
@@ -842,10 +846,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 +1016,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 +1026,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())];
@@ -1125,9 +1129,10 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
       var guid = Math.random().toString(36).substring(7);
       return React__default.createElement(_.TableCell, {
         className: "table-column",
-        key: column.isUnique ? guid : column.id,
+        key: column.isUnique ? guid : column.id ? guid + '-' + column.id : guid,
         align: column.align ? column.align : 'center',
         style: {
+          width: column.width,
           minWidth: column.minWidth,
           maxWidth: column.maxWidth
         }
@@ -1165,73 +1170,73 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
       "aria-checked": isRowSelected,
       key: index
     }, props.columns.map(function (column) {
-      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",
-          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) : '';
+      var _column$id;
+
+      var value = column.rowViewFormat ? checkFormat(row, column.rowViewFormat) : ObjectbyString(row, (_column$id = column.id) != null ? _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 ? guid + '-' + column.id : guid,
+        sx: {
+          textAlign: {
+            xs: 'left',
+            md: column.alignCell ? column.alignCell : column.align ? column.align : 'center'
           }
-        }, React__default.createElement(_.Hidden, {
-          mdUp: true
-        }, 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, {
-          display: "flex",
-          className: "actions"
-        }, column.rowViewFormat ? React__default.createElement(_.Box, {
-          className: "format-value"
-        }, value) : 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 ? React__default.createElement(_.Box, {
+        },
+        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.action && row.length > 0 ? React__default.createElement(_.Box, null, React__default.createElement(_.Box, {
+        display: "flex",
+        className: "actions"
+      }, column.rowViewFormat ? React__default.createElement(_.Box, {
+        className: "format-value"
+      }, value) : 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 column.isActiveFunction && column.isActiveFunction.onClickId(row.id);
+            return action.onClick && action.onClick(row);
           }
-        }, 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) {
-            var _props$isCheckTable18;
-
-            return (_props$isCheckTable18 = props.isCheckTable) != null && _props$isCheckTable18.onCheckedAction ? onCheckAction(event, row.id) : onCheckSingleAction(event, row.id);
+        }, action.children), action.onClickId && React__default.createElement(_.Box, {
+          className: "btn-action main-color-hover",
+          onClick: function onClick() {
+            return action.onClickId && action.onClickId(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)));
-      } else return null;
+        }, 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 column.isActiveFunction && column.isActiveFunction.onClickId(row.id);
+        }
+      }, 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) {
+          var _props$isCheckTable18;
+
+          return (_props$isCheckTable18 = props.isCheckTable) != null && _props$isCheckTable18.onCheckedAction ? onCheckAction(event, row.id) : onCheckSingleAction(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)));
     }));
   }) : !props.loading ? React__default.createElement(_.TableRow, null, React__default.createElement(_.TableCell, {
     colSpan: props.columns.length