techsbcn-storybook 0.21.7 → 0.22.0
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.
- package/dist/components/tables/SimpleTableComponent/SimpleTableComponent.d.ts +2 -0
- package/dist/components/tables/TableComponent/TableComponent.d.ts +2 -0
- package/dist/data/UserList.d.ts +1 -0
- package/dist/stories/Tables/SimpleTable.stories.d.ts +4 -0
- package/dist/stories/Tables/TableComponent.stories.d.ts +4 -0
- package/dist/techsbcn-storybook.cjs.development.js +24 -8
- package/dist/techsbcn-storybook.cjs.development.js.map +1 -1
- package/dist/techsbcn-storybook.cjs.production.min.js +1 -1
- package/dist/techsbcn-storybook.cjs.production.min.js.map +1 -1
- package/dist/techsbcn-storybook.esm.js +24 -8
- package/dist/techsbcn-storybook.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/tables/SimpleTableComponent/SimpleTableComponent.scss +40 -8
- package/src/components/tables/SimpleTableComponent/SimpleTableComponent.tsx +17 -2
- package/src/components/tables/TableComponent/TableComponent.scss +41 -9
- package/src/components/tables/TableComponent/TableComponent.tsx +21 -2
- package/src/data/UserList.tsx +3 -1
- package/src/stories/Tables/SimpleTable.stories.tsx +114 -0
- package/src/stories/Tables/TableComponent.stories.tsx +119 -0
- package/src/stories/Tables/Tables.stories.tsx +1 -0
package/dist/data/UserList.d.ts
CHANGED
|
@@ -10,6 +10,10 @@ var material = require('@mui/material');
|
|
|
10
10
|
var _ = require('@mui/material/');
|
|
11
11
|
var iconsMaterial = require('@mui/icons-material');
|
|
12
12
|
var lodash = require('lodash');
|
|
13
|
+
var dayjs = _interopDefault(require('dayjs'));
|
|
14
|
+
var localizedFormat = _interopDefault(require('dayjs/plugin/localizedFormat'));
|
|
15
|
+
var timezone = _interopDefault(require('dayjs/plugin/timezone'));
|
|
16
|
+
var utc = _interopDefault(require('dayjs/plugin/utc'));
|
|
13
17
|
var reactRouterDom = require('react-router-dom');
|
|
14
18
|
var MenuIcon = _interopDefault(require('@mui/icons-material/Menu'));
|
|
15
19
|
var Select = _interopDefault(require('react-select'));
|
|
@@ -298,7 +302,7 @@ var MainWrapperComponent = function MainWrapperComponent(props) {
|
|
|
298
302
|
})) : React__default.createElement(React__default.Fragment, null))));
|
|
299
303
|
};
|
|
300
304
|
|
|
301
|
-
var css_248z$4 = ".table-component .paper-container {\n box-shadow: none;\n background-color: transparent !important;\n}\n.table-component .paper-container .checkbox-cell .MuiCheckbox-root {\n padding: 0 !important;\n}\n.table-component .paper-container .checkbox-cell .MuiCheckbox-root:hover {\n background-color: transparent !important;\n}\n.table-component .paper-container .checkbox-cell .Mui-checked {\n color: rgba(0, 0, 0, 0.54) !important;\n}\n.table-component .paper-container .checkbox-cell .MuiCheckbox-indeterminate {\n color: #212529 !important;\n}\n.table-component .paper-container .table-container {\n border-
|
|
305
|
+
var css_248z$4 = ".table-component .paper-container {\n box-shadow: none;\n background-color: transparent !important;\n}\n.table-component .paper-container .checkbox-cell .MuiCheckbox-root {\n padding: 0 !important;\n}\n.table-component .paper-container .checkbox-cell .MuiCheckbox-root:hover {\n background-color: transparent !important;\n}\n.table-component .paper-container .checkbox-cell .Mui-checked {\n color: rgba(0, 0, 0, 0.54) !important;\n}\n.table-component .paper-container .checkbox-cell .MuiCheckbox-indeterminate {\n color: #212529 !important;\n}\n.table-component .paper-container .table-container.with-scroll {\n max-height: 68vh;\n}\n.table-component .paper-container .table-container .table-column {\n font-weight: bold;\n font-size: calc(9pt + (11 - 9) * calc(100vw - 300px)/1300) !important;\n padding: 10px !important;\n border-top: 1px solid #e0e0e0;\n border-right: 1px solid #e0e0e0;\n border-bottom: 2px solid #e0e0e0;\n}\n.table-component .paper-container .table-container .table-column .table-header-cell {\n color: black;\n font-weight: bold;\n padding: 0px 10px 0px 10px !important;\n}\n.table-component .paper-container .table-container.table-simple {\n border-bottom: 1px solid black;\n}\n.table-component .paper-container .table-container.table-simple .table-column:first-child {\n border-radius: 5px 0 0 5px;\n}\n.table-component .paper-container .table-container.table-simple .table-column:last-child {\n border-right: none !important;\n border-radius: 0 5px 5px 0;\n}\n.table-component .paper-container .table-container.table-bordered .table-column:first-child {\n border-left: 1px solid #e0e0e0;\n}\n.table-component .paper-container .table-container.table-bordered .table-rows .table-cell {\n border-right: 1px solid #e0e0e0;\n}\n.table-component .paper-container .table-container.table-bordered .table-rows .table-cell:first-child {\n border-left: 1px solid #e0e0e0;\n}\n.table-component .paper-container .table-container .table-rows.table-striped td {\n background-color: #ffffffe0;\n}\n.table-component .paper-container .table-container .table-rows.row-click {\n cursor: pointer;\n}\n.table-component .paper-container .table-container .table-rows.row-click:hover {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.table-component .paper-container .table-container .table-rows.row-click:hover.table-striped {\n background-color: transparent !important;\n}\n.table-component .paper-container .table-container .table-rows.row-click:hover.table-striped td {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.table-component .paper-container .table-container .table-rows.Mui-selected {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.table-component .paper-container .table-container .table-rows.Mui-selected.table-striped {\n background-color: transparent !important;\n}\n.table-component .paper-container .table-container .table-rows.Mui-selected.table-striped td {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.table-component .paper-container .table-container .table-rows .Mui-selected {\n background-color: transparent !important;\n}\n.table-component .paper-container .table-container .table-rows .MuiTableCell-root {\n padding: 6px !important;\n overflow: hidden;\n}\n.table-component .paper-container .table-container .table-rows .img-table {\n width: 100%;\n height: 110px;\n}\n.table-component .paper-container .table-container .table-rows .img-table img {\n object-fit: contain;\n}\n.table-component .paper-container .table-container .table-rows .actions {\n float: right;\n}\n.table-component .paper-container .table-container .table-rows .btn-action {\n color: rgba(0, 0, 0, 0.54);\n display: inline-block;\n text-decoration: none;\n font-size: 1.6em !important;\n padding: 0px 7px;\n cursor: pointer;\n}\n.table-component .paper-container .table-container .table-rows .format-value {\n font-size: calc(9pt + (11 - 9) * calc(100vw - 300px)/1300) !important;\n}\n.table-component .paper-container .table-container .table-rows .format-value .MuiTypography-root {\n font-size: calc(9pt + (11 - 9) * calc(100vw - 300px)/1300);\n}\n.table-component .paper-container .MuiTable-root.loading {\n opacity: 0.5;\n}\n.table-component .paper-container .MuiTable-root.loading .MuiCircularProgress-root {\n width: 80px !important;\n height: 80px !important;\n position: absolute;\n left: 0;\n right: 0;\n top: 5px;\n margin: auto;\n color: grey;\n}\n.table-component .paper-container .MuiTablePagination-root {\n overflow: unset;\n}\n.table-component .paper-container .MuiTablePagination-root .MuiToolbar-root {\n justify-content: center !important;\n flex-wrap: wrap;\n padding: 0px !important;\n}\n.table-component .paper-container .MuiTablePagination-root .MuiTablePagination-spacer {\n flex: 0 !important;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination .MuiPaginationItem-page {\n border-radius: 0px;\n margin: 1px;\n color: white !important;\n background-color: #3f4d67;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination .MuiPaginationItem-page.Mui-selected {\n background-color: #3299C7;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination li button {\n padding: 14px;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination li:nth-child(2) .MuiPaginationItem-page {\n border-radius: 5px 0 0 5px !important;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination li:nth-last-child(2) .MuiPaginationItem-page {\n border-radius: 0 5px 5px 0 !important;\n}\n@media (max-width: 992px) {\n .table-component .paper-container .table-container {\n max-height: 60vh;\n border-top: 1px solid #cccccc;\n }\n .table-component .paper-container .table-container .MuiTable-root {\n border-collapse: collapse !important;\n }\n .table-component .paper-container .table-container .MuiTableHead-root {\n display: none !important;\n }\n .table-component .paper-container .table-container .table-rows {\n border-bottom: 2px solid #cccccc;\n }\n .table-component .paper-container .table-container .table-rows .MuiTableCell-root {\n width: auto;\n border-bottom: none !important;\n }\n .table-component .paper-container .table-container .table-rows .MuiTableCell-root .label-cell {\n font-size: 1rem;\n vertical-align: top;\n width: 50%;\n height: auto;\n }\n .table-component .paper-container .table-container .table-rows .MuiTableCell-root .label-cell + div {\n display: inline-block;\n }\n .table-component .paper-container .table-container .table-rows .table-cell {\n display: block !important;\n }\n .table-component .paper-container .table-container .table-rows .format-value {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n width: 50%;\n max-width: 299px;\n }\n}";
|
|
302
306
|
styleInject(css_248z$4);
|
|
303
307
|
|
|
304
308
|
var css_248z$5 = ".text-field-component .MuiFormLabel-root {\n color: #666666 !important;\n font-size: 1rem !important;\n transform: translate(0, 0.5px) scale(0.85);\n transform-origin: top left;\n text-overflow: initial !important;\n}\n.text-field-component .MuiFormLabel-root + .MuiInputBase-formControl {\n margin-top: 25px !important;\n}\n.text-field-component .MuiInputBase-root.no-border {\n border: none !important;\n padding: 0 !important;\n width: fit-content !important;\n}\n.text-field-component .MuiInputBase-root {\n color: #666666 !important;\n border: 1px solid grey;\n padding: 0.43rem 0.87rem;\n background-color: white !important;\n border-radius: 3px !important;\n}\n.text-field-component .MuiInputBase-root.Mui-error {\n border: 1px solid #F24726 !important;\n}\n.text-field-component .MuiInputBase-root:not(.Mui-disabled):hover {\n border: 1px solid grey;\n}\n.text-field-component .MuiInputBase-root.Mui-focused {\n border: 1px solid #3299C7;\n}\n.text-field-component .MuiInputBase-root .MuiInputBase-input {\n color: #666666 !important;\n background-color: white !important;\n}\n.text-field-component .MuiInputBase-root .MuiInputBase-input::placeholder {\n text-overflow: ellipsis !important;\n color: #666666 !important;\n opacity: 1;\n}\n.text-field-component .MuiInputBase-root .Mui-disabled {\n -webkit-text-fill-color: #666666 !important;\n}\n.text-field-component .MuiFormHelperText-root {\n padding: 0 !important;\n font-size: 0.85rem !important;\n color: #666666;\n}";
|
|
@@ -454,6 +458,9 @@ var ImageTableComponent = function ImageTableComponent(props) {
|
|
|
454
458
|
var TableComponent = function TableComponent(props) {
|
|
455
459
|
var _props$isCheckTable7, _props$isCheckTable8, _props$isCheckTable9;
|
|
456
460
|
|
|
461
|
+
dayjs.extend(localizedFormat);
|
|
462
|
+
dayjs.extend(utc);
|
|
463
|
+
dayjs.extend(timezone);
|
|
457
464
|
var defaultFilters = JSON.parse(JSON.stringify(props.baseFilters));
|
|
458
465
|
var orderByKeyDefault = 'id';
|
|
459
466
|
|
|
@@ -565,7 +572,7 @@ var TableComponent = function TableComponent(props) {
|
|
|
565
572
|
} else return props.values[value.toUpperCase()];
|
|
566
573
|
}
|
|
567
574
|
|
|
568
|
-
if (column.isDate && value) return
|
|
575
|
+
if (column.isDate && value) return dayjs.utc(value).tz(dayjs.tz.guess()).format('L');
|
|
569
576
|
if (column.isPrice && value) return Number(value).toFixed(2).replace('.', ',').toLocaleString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.') + " " + props.values.SYMBOL_EURO;
|
|
570
577
|
|
|
571
578
|
if (column.isImage && value) {
|
|
@@ -693,7 +700,7 @@ var TableComponent = function TableComponent(props) {
|
|
|
693
700
|
mr: 1,
|
|
694
701
|
alignSelf: "center"
|
|
695
702
|
}, props.totalCount, " ", props.values.RESULTS)), React__default.createElement(_.TableContainer, {
|
|
696
|
-
className: "table-container " + (props.withScroll ? 'with-scroll' : '')
|
|
703
|
+
className: "table-container " + (props.isBordered ? 'table-bordered' : 'table-simple') + " " + (props.withScroll ? 'with-scroll' : '')
|
|
697
704
|
}, React__default.createElement(_.Table, {
|
|
698
705
|
stickyHeader: true,
|
|
699
706
|
"aria-label": "sticky table",
|
|
@@ -743,10 +750,15 @@ var TableComponent = function TableComponent(props) {
|
|
|
743
750
|
}, React__default.createElement(_.CircularProgress, {
|
|
744
751
|
className: "circular-progress-main-color"
|
|
745
752
|
}))), props.rows && props.rows.length > 0 ? props.rows.map(function (row, index) {
|
|
746
|
-
var
|
|
753
|
+
var _props$isCheckTable13;
|
|
754
|
+
|
|
755
|
+
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' : '';
|
|
756
|
+
var isRowSelected = ((_props$isCheckTable13 = props.isCheckTable) == null ? void 0 : _props$isCheckTable13.rowsChecked) && isSelected(row.id);
|
|
747
757
|
return React__default.createElement(_.TableRow, {
|
|
748
758
|
className: "table-rows " + rowColor + " " + (props.onClickRow || props.onClickRowData ? 'row-click' : ''),
|
|
749
759
|
role: "checkbox",
|
|
760
|
+
selected: isRowSelected,
|
|
761
|
+
"aria-checked": isRowSelected,
|
|
750
762
|
tabIndex: -1,
|
|
751
763
|
key: index
|
|
752
764
|
}, props.columns.map(function (column) {
|
|
@@ -864,12 +876,16 @@ TableComponent.defaultProps = {
|
|
|
864
876
|
showTotalCount: true
|
|
865
877
|
};
|
|
866
878
|
|
|
867
|
-
var css_248z$6 = ".table-simple-component .paper-container {\n box-shadow: none;\n background-color: transparent !important;\n}\n.table-simple-component .paper-container .checkbox-cell .MuiCheckbox-root {\n padding: 0 !important;\n}\n.table-simple-component .paper-container .checkbox-cell .MuiCheckbox-root:hover {\n background-color: transparent !important;\n}\n.table-simple-component .paper-container .checkbox-cell .Mui-checked {\n color: rgba(0, 0, 0, 0.54) !important;\n}\n.table-simple-component .paper-container .checkbox-cell .MuiCheckbox-indeterminate {\n color: #212529 !important;\n}\n.table-simple-component .paper-container .table-container {\n border-
|
|
879
|
+
var css_248z$6 = ".table-simple-component .paper-container {\n box-shadow: none;\n background-color: transparent !important;\n}\n.table-simple-component .paper-container .checkbox-cell .MuiCheckbox-root {\n padding: 0 !important;\n}\n.table-simple-component .paper-container .checkbox-cell .MuiCheckbox-root:hover {\n background-color: transparent !important;\n}\n.table-simple-component .paper-container .checkbox-cell .Mui-checked {\n color: rgba(0, 0, 0, 0.54) !important;\n}\n.table-simple-component .paper-container .checkbox-cell .MuiCheckbox-indeterminate {\n color: #212529 !important;\n}\n.table-simple-component .paper-container .table-container.with-scroll {\n max-height: 68vh;\n}\n.table-simple-component .paper-container .table-container .table-column {\n font-weight: bold;\n font-size: calc(9pt + (11 - 9) * calc(100vw - 300px)/1300) !important;\n padding: 10px !important;\n border-top: 1px solid #e0e0e0;\n border-right: 1px solid #e0e0e0;\n border-bottom: 2px solid #e0e0e0;\n}\n.table-simple-component .paper-container .table-container .table-column .table-header-cell {\n color: black;\n font-weight: bold;\n padding: 0px 10px 0px 10px !important;\n}\n.table-simple-component .paper-container .table-container.table-simple {\n border-bottom: 1px solid black;\n}\n.table-simple-component .paper-container .table-container.table-simple .table-column:first-child {\n border-radius: 5px 0 0 5px;\n}\n.table-simple-component .paper-container .table-container.table-simple .table-column:last-child {\n border-right: none !important;\n border-radius: 0 5px 5px 0;\n}\n.table-simple-component .paper-container .table-container.table-bordered .table-column:first-child {\n border-left: 1px solid #e0e0e0;\n}\n.table-simple-component .paper-container .table-container.table-bordered .table-rows .table-cell {\n border-right: 1px solid #e0e0e0;\n}\n.table-simple-component .paper-container .table-container.table-bordered .table-rows .table-cell:first-child {\n border-left: 1px solid #e0e0e0;\n}\n.table-simple-component .paper-container .table-container .table-rows.table-striped td {\n background-color: #ffffffe0;\n}\n.table-simple-component .paper-container .table-container .table-rows.row-click {\n cursor: pointer;\n}\n.table-simple-component .paper-container .table-container .table-rows.row-click:hover {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.table-simple-component .paper-container .table-container .table-rows.row-click:hover.table-striped {\n background-color: transparent !important;\n}\n.table-simple-component .paper-container .table-container .table-rows.row-click:hover.table-striped td {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.table-simple-component .paper-container .table-container .table-rows.Mui-selected {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.table-simple-component .paper-container .table-container .table-rows.Mui-selected.table-striped {\n background-color: transparent !important;\n}\n.table-simple-component .paper-container .table-container .table-rows.Mui-selected.table-striped td {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.table-simple-component .paper-container .table-container .table-rows .Mui-selected {\n background-color: transparent !important;\n}\n.table-simple-component .paper-container .table-container .table-rows .MuiTableCell-root {\n padding: 6px !important;\n overflow: hidden;\n}\n.table-simple-component .paper-container .table-container .table-rows .img-table {\n width: 100%;\n height: 110px;\n}\n.table-simple-component .paper-container .table-container .table-rows .img-table img {\n object-fit: contain;\n}\n.table-simple-component .paper-container .table-container .table-rows .actions {\n float: right;\n}\n.table-simple-component .paper-container .table-container .table-rows .btn-action {\n color: rgba(0, 0, 0, 0.54);\n display: inline-block;\n text-decoration: none;\n font-size: 1.6em !important;\n padding: 0px 7px;\n cursor: pointer;\n}\n.table-simple-component .paper-container .table-container .table-rows .format-value {\n font-size: calc(9pt + (11 - 9) * calc(100vw - 300px)/1300);\n}\n.table-simple-component .paper-container .table-container .table-rows .format-value .MuiTypography-root {\n font-size: calc(9pt + (11 - 9) * calc(100vw - 300px)/1300);\n}\n.table-simple-component .paper-container .MuiTable-root.loading {\n opacity: 0.5;\n}\n.table-simple-component .paper-container .MuiTable-root.loading .MuiCircularProgress-root {\n width: 80px !important;\n height: 80px !important;\n position: absolute;\n left: 0;\n right: 0;\n top: 5px;\n margin: auto;\n color: grey;\n}\n@media (max-width: 992px) {\n .table-simple-component .paper-container .table-container {\n max-height: 60vh;\n border-top: 1px solid #cccccc;\n }\n .table-simple-component .paper-container .table-container .MuiTable-root {\n border-collapse: collapse !important;\n }\n .table-simple-component .paper-container .table-container .MuiTableHead-root {\n display: none !important;\n }\n .table-simple-component .paper-container .table-container .table-rows {\n border-bottom: 2px solid #cccccc;\n }\n .table-simple-component .paper-container .table-container .table-rows .MuiTableCell-root {\n width: auto;\n border-bottom: none !important;\n }\n .table-simple-component .paper-container .table-container .table-rows .MuiTableCell-root .label-cell {\n font-size: 1rem;\n vertical-align: top;\n width: 50%;\n height: auto;\n }\n .table-simple-component .paper-container .table-container .table-rows .MuiTableCell-root .label-cell + div {\n display: inline-block;\n }\n .table-simple-component .paper-container .table-container .table-rows .table-cell {\n display: block !important;\n }\n .table-simple-component .paper-container .table-container .table-rows .format-value {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n width: 50%;\n max-width: 299px;\n }\n}";
|
|
868
880
|
styleInject(css_248z$6);
|
|
869
881
|
|
|
870
882
|
var SimpleTableComponent = function SimpleTableComponent(props) {
|
|
871
883
|
var _props$isCheckTable10, _props$isCheckTable11, _props$isCheckTable12;
|
|
872
884
|
|
|
885
|
+
dayjs.extend(localizedFormat);
|
|
886
|
+
dayjs.extend(utc);
|
|
887
|
+
dayjs.extend(timezone);
|
|
888
|
+
|
|
873
889
|
var isSelected = function isSelected(id) {
|
|
874
890
|
var _props$isCheckTable;
|
|
875
891
|
|
|
@@ -961,7 +977,7 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
|
|
|
961
977
|
} else return props.values[value.toUpperCase()];
|
|
962
978
|
}
|
|
963
979
|
|
|
964
|
-
if (column.isDate && value) return
|
|
980
|
+
if (column.isDate && value) return dayjs.utc(value).tz(dayjs.tz.guess()).format('L');
|
|
965
981
|
if (column.isPrice && value) return Number(value).toFixed(2).replace('.', ',').toLocaleString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.') + " " + props.values.SYMBOL_EURO;
|
|
966
982
|
|
|
967
983
|
if (column.isImage && value) {
|
|
@@ -1084,7 +1100,7 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
|
|
|
1084
1100
|
checked: props.rows && props.rows.length > 0 && JSON.parse(JSON.stringify((_props$isCheckTable12 = props.isCheckTable) == null ? void 0 : _props$isCheckTable12.rowsChecked)).length === props.rows.length,
|
|
1085
1101
|
onChange: handleSelectAllClick
|
|
1086
1102
|
}))), React__default.createElement(_.TableContainer, {
|
|
1087
|
-
className: "table-container " + (props.withScroll ? 'with-scroll' : '')
|
|
1103
|
+
className: "table-container " + (props.isBordered ? 'table-bordered' : 'table-simple') + "\n " + (props.withScroll ? 'with-scroll' : '')
|
|
1088
1104
|
}, React__default.createElement(_.Table, {
|
|
1089
1105
|
stickyHeader: true,
|
|
1090
1106
|
"aria-label": "sticky table",
|
|
@@ -1128,7 +1144,7 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
|
|
|
1128
1144
|
}))), props.rows && props.rows.length > 0 ? props.rows.map(function (row, index) {
|
|
1129
1145
|
var _props$isCheckTable17;
|
|
1130
1146
|
|
|
1131
|
-
var rowColor = props.rowsColorColumn && ObjectbyString(row, props.rowsColorColumn.columnName) === props.rowsColorColumn.columnValue ? "row-color-" + props.rowsColorColumn.columnValue : '';
|
|
1147
|
+
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' : '';
|
|
1132
1148
|
var isRowSelected = ((_props$isCheckTable17 = props.isCheckTable) == null ? void 0 : _props$isCheckTable17.rowsChecked) && isSelected(row.id);
|
|
1133
1149
|
return React__default.createElement(_.TableRow, {
|
|
1134
1150
|
className: "table-rows " + rowColor + " " + (props.onClickRow || props.onClickRowData ? 'row-click' : ''),
|