techsbcn-storybook 0.26.0 → 0.26.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/techsbcn-storybook.cjs.development.js +126 -125
  2. package/dist/techsbcn-storybook.cjs.development.js.map +1 -1
  3. package/dist/techsbcn-storybook.cjs.production.min.js +1 -1
  4. package/dist/techsbcn-storybook.cjs.production.min.js.map +1 -1
  5. package/dist/techsbcn-storybook.esm.js +126 -125
  6. package/dist/techsbcn-storybook.esm.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/components/tables/SimpleTableComponent/SimpleTableComponent.tsx +116 -118
  9. package/src/components/tables/TableComponent/TableComponent.tsx +114 -115
package/dist/techsbcn-storybook.cjs.development.js CHANGED
@@ -722,7 +722,7 @@ var TableComponent = function TableComponent(props) {
722
722
  var guid = Math.random().toString(36).substring(7);
723
723
  return React__default.createElement(_.TableCell, {
724
724
  className: "table-column",
725
- key: column.isUnique ? guid : column.id,
725
+ key: column.isUnique ? guid : column.id ? guid + '-' + column.id : guid,
726
726
  align: column.align ? column.align : 'center',
727
727
  style: {
728
728
  width: column.width,
@@ -764,79 +764,80 @@ var TableComponent = function TableComponent(props) {
764
764
 
765
765
  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' : '';
766
766
  var isRowSelected = ((_props$isCheckTable13 = props.isCheckTable) == null ? void 0 : _props$isCheckTable13.rowsChecked) && isSelected(row.id);
767
+ var guidRow = Math.random().toString(36).substring(7);
767
768
  return React__default.createElement(_.TableRow, {
768
769
  className: "table-rows " + rowColor + " " + (props.onClickRow || props.onClickRowData ? 'row-click' : ''),
769
770
  role: "checkbox",
770
771
  selected: isRowSelected,
771
772
  "aria-checked": isRowSelected,
772
773
  tabIndex: -1,
773
- key: index
774
+ key: index + '-' + guidRow
774
775
  }, props.columns.map(function (column) {
775
- if (column.id) {
776
- var value = column.rowViewFormat ? checkFormat(row, column.rowViewFormat) : ObjectbyString(row, column.id);
777
- var isItemSelected = column.isCheck && isSelected(row.id);
778
- var guid = Math.random().toString(36).substring(7);
779
- return React__default.createElement(_.TableCell, {
780
- className: "table-cell " + (column.cellClassName ? column.cellClassName(row) : ''),
781
- key: column.isUnique ? guid : column.id,
782
- sx: {
783
- textAlign: {
784
- xs: 'left',
785
- md: column.alignCell ? column.alignCell : column.align ? column.align : 'center'
786
- }
787
- },
788
- onClick: function onClick() {
789
- return !column.action && !column.isCheck && !column.isActiveFunction ? handleRowClick(row) : '';
776
+ var _column$id;
777
+
778
+ var value = column.rowViewFormat ? checkFormat(row, column.rowViewFormat) : ObjectbyString(row, (_column$id = column.id) != null ? _column$id : '');
779
+ var isItemSelected = column.isCheck && isSelected(row.id);
780
+ var guid = Math.random().toString(36).substring(7);
781
+ return React__default.createElement(_.TableCell, {
782
+ className: "table-cell " + (column.cellClassName ? column.cellClassName(row) : ''),
783
+ key: column.isUnique ? guid : column.id ? guid + '-' + column.id : guid,
784
+ sx: {
785
+ textAlign: {
786
+ xs: 'left',
787
+ md: column.alignCell ? column.alignCell : column.align ? column.align : 'center'
790
788
  }
791
- }, React__default.createElement(_.Hidden, {
792
- mdUp: true
793
- }, column.label !== '-' && React__default.createElement(_.Box, {
794
- display: "inline-block",
795
- className: "label-cell"
796
- }, column.label)), column.rowViewFormat ? React__default.createElement(_.Box, {
797
- className: "format-value"
798
- }, value) : column.action && row.length > 0 ? React__default.createElement(_.Box, null, React__default.createElement(_.Box, {
799
- display: "flex",
800
- className: "actions"
801
- }, column.action && column.action.map(function (action, i) {
802
- return React__default.createElement(_.Box, {
803
- key: i
804
- }, action.onClick && React__default.createElement(_.Box, {
805
- className: "btn-action main-color-hover",
806
- onClick: function onClick() {
807
- return action.onClick && action.onClick(row);
808
- }
809
- }, action.children), action.onClickId && React__default.createElement(_.Box, {
810
- className: "btn-action main-color-hover",
811
- onClick: function onClick() {
812
- return action.onClickId && action.onClickId(row.id);
813
- }
814
- }, action.children), !action.onClick && !action.onClickId && React__default.createElement(_.Box, {
815
- className: "btn-action"
816
- }, action.children));
817
- }))) : column.isActiveFunction && row.length > 0 ? React__default.createElement(_.Box, {
789
+ },
790
+ onClick: function onClick() {
791
+ return !column.action && !column.isCheck && !column.isActiveFunction ? handleRowClick(row) : '';
792
+ }
793
+ }, React__default.createElement(_.Hidden, {
794
+ mdUp: true
795
+ }, column.label !== '-' && React__default.createElement(_.Box, {
796
+ display: "inline-block",
797
+ className: "label-cell"
798
+ }, column.label)), column.rowViewFormat ? React__default.createElement(_.Box, {
799
+ className: "format-value"
800
+ }, value) : column.action && Object.keys(row).length > 0 ? React__default.createElement(_.Box, null, React__default.createElement(_.Box, {
801
+ display: "flex",
802
+ className: "actions"
803
+ }, column.action && column.action.map(function (action, i) {
804
+ return React__default.createElement(_.Box, {
805
+ key: i
806
+ }, action.onClick && React__default.createElement(_.Box, {
818
807
  className: "btn-action main-color-hover",
819
808
  onClick: function onClick() {
820
- return column.isActiveFunction && column.isActiveFunction.onClickId(row.id);
809
+ return action.onClick && action.onClick(row);
821
810
  }
822
- }, value ? column.isActiveFunction.activeIcon : column.isActiveFunction.disabledIcon) : column.isCheck && row.length > 0 ? React__default.createElement(_.Box, {
823
- className: "checkbox-cell"
824
- }, React__default.createElement(_.Checkbox, {
825
- checked: isItemSelected,
826
- inputProps: {
827
- 'aria-labelledby': row.id
828
- },
829
- onChange: function onChange(event) {
830
- return onCheckAction(event, row.id);
811
+ }, action.children), action.onClickId && React__default.createElement(_.Box, {
812
+ className: "btn-action main-color-hover",
813
+ onClick: function onClick() {
814
+ return action.onClickId && action.onClickId(row.id);
831
815
  }
832
- })) : column.isEditableTableCell && row.length > 0 ? EditableTableCell(row, value, column.id, column.isEditableTableCell) : column.enumColumn && row.length > 0 ? React__default.createElement(_.Box, {
833
- className: (column.enumColumn.hasColor ? (column.enumColumn.enumSuffix ? value.toLowerCase() + "-" + column.enumColumn.enumSuffix.toLowerCase() : value.toString().toLowerCase()) + "-type-color" : '') + " format-value"
834
- }, formatValue(value, column)) : column.isBoolean && row.length > 0 ? React__default.createElement(_.Box, {
835
- className: (column.isBoolean.hasColor ? (column.isBoolean.enumSuffix ? value.toString().toLowerCase() + "-" + column.isBoolean.enumSuffix.toLowerCase() : value.toString().toLowerCase()) + "-boolean-color" : '') + " format-value"
836
- }, formatValue(value, column)) : React__default.createElement(_.Box, {
837
- className: "" + (column.isImage ? '' : 'format-value')
838
- }, formatValue(value, column)));
839
- } else return null;
816
+ }, action.children), !action.onClick && !action.onClickId && React__default.createElement(_.Box, {
817
+ className: "btn-action"
818
+ }, action.children));
819
+ }))) : column.isActiveFunction && Object.keys(row).length > 0 ? React__default.createElement(_.Box, {
820
+ className: "btn-action main-color-hover",
821
+ onClick: function onClick() {
822
+ return column.isActiveFunction && column.isActiveFunction.onClickId(row.id);
823
+ }
824
+ }, value ? column.isActiveFunction.activeIcon : column.isActiveFunction.disabledIcon) : column.isCheck && Object.keys(row).length > 0 ? React__default.createElement(_.Box, {
825
+ className: "checkbox-cell"
826
+ }, React__default.createElement(_.Checkbox, {
827
+ checked: isItemSelected,
828
+ inputProps: {
829
+ 'aria-labelledby': row.id
830
+ },
831
+ onChange: function onChange(event) {
832
+ return onCheckAction(event, row.id);
833
+ }
834
+ })) : column.isEditableTableCell && Object.keys(row).length > 0 ? EditableTableCell(row, value, column.id, column.isEditableTableCell) : column.enumColumn && Object.keys(row).length > 0 ? React__default.createElement(_.Box, {
835
+ className: (column.enumColumn.hasColor ? (column.enumColumn.enumSuffix ? value.toLowerCase() + "-" + column.enumColumn.enumSuffix.toLowerCase() : value.toString().toLowerCase()) + "-type-color" : '') + " format-value"
836
+ }, formatValue(value, column)) : column.isBoolean && Object.keys(row).length > 0 ? React__default.createElement(_.Box, {
837
+ className: (column.isBoolean.hasColor ? (column.isBoolean.enumSuffix ? value.toString().toLowerCase() + "-" + column.isBoolean.enumSuffix.toLowerCase() : value.toString().toLowerCase()) + "-boolean-color" : '') + " format-value"
838
+ }, formatValue(value, column)) : React__default.createElement(_.Box, {
839
+ className: "" + (column.isImage ? '' : 'format-value')
840
+ }, formatValue(value, column)));
840
841
  }));
841
842
  }) : !props.loading ? React__default.createElement(_.TableRow, null, React__default.createElement(_.TableCell, {
842
843
  colSpan: props.columns.length
@@ -1128,7 +1129,7 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
1128
1129
  var guid = Math.random().toString(36).substring(7);
1129
1130
  return React__default.createElement(_.TableCell, {
1130
1131
  className: "table-column",
1131
- key: column.isUnique ? guid : column.id,
1132
+ key: column.isUnique ? guid : column.id ? guid + '-' + column.id : guid,
1132
1133
  align: column.align ? column.align : 'center',
1133
1134
  style: {
1134
1135
  width: column.width,
@@ -1169,73 +1170,73 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
1169
1170
  "aria-checked": isRowSelected,
1170
1171
  key: index
1171
1172
  }, props.columns.map(function (column) {
1172
- if (column.id) {
1173
- var value = column.rowViewFormat ? checkFormat(row, column.rowViewFormat) : ObjectbyString(row, column.id);
1174
- var isItemSelected = column.isCheck && isSelected(row.id);
1175
- var guid = Math.random().toString(36).substring(7);
1176
- return React__default.createElement(_.TableCell, {
1177
- className: "table-cell " + (column.cellClassName ? column.cellClassName(row) : ''),
1178
- key: column.isUnique ? guid : column.id,
1179
- sx: {
1180
- textAlign: {
1181
- xs: 'left',
1182
- md: column.alignCell ? column.alignCell : column.align ? column.align : 'center'
1183
- }
1184
- },
1185
- onClick: function onClick() {
1186
- return !column.action && !column.isCheck && !column.isActiveFunction ? handleRowClick(row) : '';
1173
+ var _column$id;
1174
+
1175
+ var value = column.rowViewFormat ? checkFormat(row, column.rowViewFormat) : ObjectbyString(row, (_column$id = column.id) != null ? _column$id : '');
1176
+ var isItemSelected = column.isCheck && isSelected(row.id);
1177
+ var guid = Math.random().toString(36).substring(7);
1178
+ return React__default.createElement(_.TableCell, {
1179
+ className: "table-cell " + (column.cellClassName ? column.cellClassName(row) : ''),
1180
+ key: column.isUnique ? guid : column.id ? guid + '-' + column.id : guid,
1181
+ sx: {
1182
+ textAlign: {
1183
+ xs: 'left',
1184
+ md: column.alignCell ? column.alignCell : column.align ? column.align : 'center'
1187
1185
  }
1188
- }, React__default.createElement(_.Hidden, {
1189
- mdUp: true
1190
- }, column.label !== '-' && React__default.createElement(_.Box, {
1191
- display: "inline-block",
1192
- className: "label-cell"
1193
- }, column.label)), column.action && row.length > 0 ? React__default.createElement(_.Box, null, React__default.createElement(_.Box, {
1194
- display: "flex",
1195
- className: "actions"
1196
- }, column.rowViewFormat ? React__default.createElement(_.Box, {
1197
- className: "format-value"
1198
- }, value) : column.action && column.action.map(function (action, i) {
1199
- return React__default.createElement(_.Box, {
1200
- key: i
1201
- }, action.onClick && React__default.createElement(_.Box, {
1202
- className: "btn-action main-color-hover",
1203
- onClick: function onClick() {
1204
- return action.onClick && action.onClick(row);
1205
- }
1206
- }, action.children), action.onClickId && React__default.createElement(_.Box, {
1207
- className: "btn-action main-color-hover",
1208
- onClick: function onClick() {
1209
- return action.onClickId && action.onClickId(row.id);
1210
- }
1211
- }, action.children), !action.onClick && !action.onClickId && React__default.createElement(_.Box, {
1212
- className: "btn-action"
1213
- }, action.children));
1214
- }))) : column.isActiveFunction && row.length > 0 ? React__default.createElement(_.Box, {
1186
+ },
1187
+ onClick: function onClick() {
1188
+ return !column.action && !column.isCheck && !column.isActiveFunction ? handleRowClick(row) : '';
1189
+ }
1190
+ }, React__default.createElement(_.Hidden, {
1191
+ mdUp: true
1192
+ }, column.label !== '-' && React__default.createElement(_.Box, {
1193
+ display: "inline-block",
1194
+ className: "label-cell"
1195
+ }, column.label)), column.action && Object.keys(row).length > 0 ? React__default.createElement(_.Box, null, React__default.createElement(_.Box, {
1196
+ display: "flex",
1197
+ className: "actions"
1198
+ }, column.rowViewFormat ? React__default.createElement(_.Box, {
1199
+ className: "format-value"
1200
+ }, value) : column.action && column.action.map(function (action, i) {
1201
+ return React__default.createElement(_.Box, {
1202
+ key: i
1203
+ }, action.onClick && React__default.createElement(_.Box, {
1215
1204
  className: "btn-action main-color-hover",
1216
1205
  onClick: function onClick() {
1217
- return column.isActiveFunction && column.isActiveFunction.onClickId(row.id);
1206
+ return action.onClick && action.onClick(row);
1218
1207
  }
1219
- }, value ? column.isActiveFunction.activeIcon : column.isActiveFunction.disabledIcon) : column.isCheck && row.length > 0 ? React__default.createElement(_.Box, {
1220
- className: "checkbox-cell"
1221
- }, React__default.createElement(_.Checkbox, {
1222
- checked: isItemSelected,
1223
- inputProps: {
1224
- 'aria-labelledby': row.id
1225
- },
1226
- onChange: function onChange(event) {
1227
- var _props$isCheckTable18;
1228
-
1229
- return (_props$isCheckTable18 = props.isCheckTable) != null && _props$isCheckTable18.onCheckedAction ? onCheckAction(event, row.id) : onCheckSingleAction(event, row.id);
1208
+ }, action.children), action.onClickId && React__default.createElement(_.Box, {
1209
+ className: "btn-action main-color-hover",
1210
+ onClick: function onClick() {
1211
+ return action.onClickId && action.onClickId(row.id);
1230
1212
  }
1231
- })) : column.isEditableTableCell && row.length > 0 ? EditableTableCell(row, value, column.id, column.isEditableTableCell) : column.enumColumn && row.length > 0 ? React__default.createElement(_.Box, {
1232
- className: (column.enumColumn.hasColor ? (column.enumColumn.enumSuffix ? value.toLowerCase() + "-" + column.enumColumn.enumSuffix.toLowerCase() : value.toString().toLowerCase()) + "-type-color" : '') + " format-value"
1233
- }, formatValue(value, column)) : column.isBoolean && row.length > 0 ? React__default.createElement(_.Box, {
1234
- className: (column.isBoolean.hasColor ? (column.isBoolean.enumSuffix ? value.toString().toLowerCase() + "-" + column.isBoolean.enumSuffix.toLowerCase() : value.toString().toLowerCase()) + "-boolean-color" : '') + " format-value"
1235
- }, formatValue(value, column)) : React__default.createElement(_.Box, {
1236
- className: "" + (column.isImage ? '' : 'format-value')
1237
- }, formatValue(value, column)));
1238
- } else return null;
1213
+ }, action.children), !action.onClick && !action.onClickId && React__default.createElement(_.Box, {
1214
+ className: "btn-action"
1215
+ }, action.children));
1216
+ }))) : column.isActiveFunction && Object.keys(row).length > 0 ? React__default.createElement(_.Box, {
1217
+ className: "btn-action main-color-hover",
1218
+ onClick: function onClick() {
1219
+ return column.isActiveFunction && column.isActiveFunction.onClickId(row.id);
1220
+ }
1221
+ }, value ? column.isActiveFunction.activeIcon : column.isActiveFunction.disabledIcon) : column.isCheck && Object.keys(row).length > 0 ? React__default.createElement(_.Box, {
1222
+ className: "checkbox-cell"
1223
+ }, React__default.createElement(_.Checkbox, {
1224
+ checked: isItemSelected,
1225
+ inputProps: {
1226
+ 'aria-labelledby': row.id
1227
+ },
1228
+ onChange: function onChange(event) {
1229
+ var _props$isCheckTable18;
1230
+
1231
+ return (_props$isCheckTable18 = props.isCheckTable) != null && _props$isCheckTable18.onCheckedAction ? onCheckAction(event, row.id) : onCheckSingleAction(event, row.id);
1232
+ }
1233
+ })) : column.isEditableTableCell && Object.keys(row).length > 0 ? EditableTableCell(row, value, column.id, column.isEditableTableCell) : column.enumColumn && Object.keys(row).length > 0 ? React__default.createElement(_.Box, {
1234
+ className: (column.enumColumn.hasColor ? (column.enumColumn.enumSuffix ? value.toLowerCase() + "-" + column.enumColumn.enumSuffix.toLowerCase() : value.toString().toLowerCase()) + "-type-color" : '') + " format-value"
1235
+ }, formatValue(value, column)) : column.isBoolean && Object.keys(row).length > 0 ? React__default.createElement(_.Box, {
1236
+ className: (column.isBoolean.hasColor ? (column.isBoolean.enumSuffix ? value.toString().toLowerCase() + "-" + column.isBoolean.enumSuffix.toLowerCase() : value.toString().toLowerCase()) + "-boolean-color" : '') + " format-value"
1237
+ }, formatValue(value, column)) : React__default.createElement(_.Box, {
1238
+ className: "" + (column.isImage ? '' : 'format-value')
1239
+ }, formatValue(value, column)));
1239
1240
  }));
1240
1241
  }) : !props.loading ? React__default.createElement(_.TableRow, null, React__default.createElement(_.TableCell, {
1241
1242
  colSpan: props.columns.length