techsbcn-storybook 0.12.5 → 0.12.9
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/fields/ButtonComponent/ButtonComponent.d.ts +1 -1
- package/dist/components/tables/SimpleTableComponent/SimpleTableComponent.d.ts +1 -0
- package/dist/techsbcn-storybook.cjs.development.js +32 -18
- 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 +33 -19
- package/dist/techsbcn-storybook.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/fields/ButtonComponent/ButtonComponent.tsx +1 -1
- package/src/components/fields/TextFieldComponent/TextFieldComponent.tsx +1 -0
- package/src/components/fields/TextSimpleComponent/TextSimpleComponent.tsx +1 -1
- package/src/components/tables/SearchComponent/SearchComponent.tsx +22 -20
- package/src/components/tables/SimpleTableComponent/SimpleTableComponent.scss +6 -3
- package/src/components/tables/SimpleTableComponent/SimpleTableComponent.tsx +6 -3
- package/src/components/tables/TableComponent/TableComponent.scss +9 -3
- package/src/components/tables/TableComponent/TableComponent.tsx +8 -1
- package/src/components/wrappers/TabsComponent/TabsComponent.tsx +6 -1
- package/src/stories/Tables/Tables.stories.tsx +8 -1
- package/src/styles/Globals.scss +1 -6
|
@@ -14,6 +14,7 @@ interface SimpleTableComponentProps {
|
|
|
14
14
|
loading?: boolean;
|
|
15
15
|
onClickRow?: (id: number) => void;
|
|
16
16
|
isCheckTable?: {
|
|
17
|
+
noCheckAllItems?: boolean;
|
|
17
18
|
rowsChecked?: number[];
|
|
18
19
|
onCheckedAction?: (ids: number[]) => void;
|
|
19
20
|
onCheckedSingleAction?: (id: number) => void;
|
|
@@ -136,7 +136,7 @@ var SearchComponent = function SearchComponent(props) {
|
|
|
136
136
|
}, React__default.createElement(material.Grid, {
|
|
137
137
|
item: true,
|
|
138
138
|
xs: props.actions ? 6 : 12,
|
|
139
|
-
md: 4
|
|
139
|
+
md: props.searchBar ? 4 : props.actions ? 6 : 12
|
|
140
140
|
}, React__default.createElement(material.Box, {
|
|
141
141
|
px: 1,
|
|
142
142
|
className: (props.enableAfter ? 'main-background-color-after' : '') + " title"
|
|
@@ -191,10 +191,10 @@ var SearchComponent = function SearchComponent(props) {
|
|
|
191
191
|
}))) : React__default.createElement(material.Box, {
|
|
192
192
|
ml: "auto",
|
|
193
193
|
className: "wrapper-actions"
|
|
194
|
-
}, ActionsList(props.actions)))), React__default.createElement(material.Grid, {
|
|
194
|
+
}, ActionsList(props.actions)))), (props.searchBar || props.filters || props.actions) && React__default.createElement(material.Grid, {
|
|
195
195
|
item: true,
|
|
196
196
|
xs: 12,
|
|
197
|
-
md: props.actions ? 8 : 7
|
|
197
|
+
md: props.actions && props.searchBar ? 8 : props.actions ? 6 : 7
|
|
198
198
|
}, React__default.createElement(material.Box, {
|
|
199
199
|
display: "flex",
|
|
200
200
|
alignItems: "center"
|
|
@@ -284,7 +284,7 @@ var MainWrapperComponent = function MainWrapperComponent(props) {
|
|
|
284
284
|
})) : React__default.createElement(React__default.Fragment, null))));
|
|
285
285
|
};
|
|
286
286
|
|
|
287
|
-
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 max-height: 68vh;\n border-bottom: 1px solid black;\n}\n.table-component .paper-container .table-container .table-column:first-child {\n border-radius: 5px 0 0 5px;\n}\n.table-component .paper-container .table-container .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-column {\n font-weight: bold;\n font-size: 1rem !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 padding: 0px 10px 0px 10px !important;\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 .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 .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:
|
|
287
|
+
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 max-height: 68vh;\n border-bottom: 1px solid black;\n}\n.table-component .paper-container .table-container .table-column:first-child {\n border-radius: 5px 0 0 5px;\n}\n.table-component .paper-container .table-container .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-column {\n font-weight: bold;\n font-size: 1rem !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 padding: 0px 10px 0px 10px !important;\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.Mui-selected {\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 .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}";
|
|
288
288
|
styleInject(css_248z$4);
|
|
289
289
|
|
|
290
290
|
var css_248z$5 = ".text-field-component .MuiFormLabel-root {\n color: #666666 !important;\n font-size: calc(12pt + (14 - 12) * calc(100vw - 300px)/1300) !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}";
|
|
@@ -324,6 +324,9 @@ var TextFieldComponent = function TextFieldComponent(props) {
|
|
|
324
324
|
disableUnderline: true,
|
|
325
325
|
startAdornment: props.startIcon,
|
|
326
326
|
endAdornment: props.endIcon,
|
|
327
|
+
classes: {
|
|
328
|
+
focused: 'main-border-color'
|
|
329
|
+
},
|
|
327
330
|
inputProps: {
|
|
328
331
|
max: props.maxNumber,
|
|
329
332
|
min: props.minNumber,
|
|
@@ -691,7 +694,7 @@ var TableComponent = function TableComponent(props) {
|
|
|
691
694
|
}, formatValue(value, column)) : column.isBoolean ? React__default.createElement(_.Box, {
|
|
692
695
|
className: (column.isBoolean.hasColor ? (column.isBoolean.enumSuffix ? value.toString().toLowerCase() + "-" + column.isBoolean.enumSuffix.toLowerCase() : value.toString().toLowerCase()) + "-boolean-color" : '') + " format-value"
|
|
693
696
|
}, formatValue(value, column)) : React__default.createElement(_.Box, {
|
|
694
|
-
className: "format-value
|
|
697
|
+
className: "" + (column.isImage ? '' : 'format-value')
|
|
695
698
|
}, formatValue(value, column)));
|
|
696
699
|
}));
|
|
697
700
|
}) : !props.loading ? React__default.createElement(_.TableRow, null, React__default.createElement(_.TableCell, {
|
|
@@ -713,6 +716,7 @@ var TableComponent = function TableComponent(props) {
|
|
|
713
716
|
},
|
|
714
717
|
onRowsPerPageChange: handleChangeRowsPerPage,
|
|
715
718
|
component: "div",
|
|
719
|
+
className: "table-pagination",
|
|
716
720
|
ActionsComponent: function ActionsComponent(_actions) {
|
|
717
721
|
return React__default.createElement(_.Box, {
|
|
718
722
|
flexShrink: 0,
|
|
@@ -727,7 +731,14 @@ var TableComponent = function TableComponent(props) {
|
|
|
727
731
|
hideNextButton: true,
|
|
728
732
|
hidePrevButton: true,
|
|
729
733
|
showFirstButton: true,
|
|
730
|
-
showLastButton: true
|
|
734
|
+
showLastButton: true,
|
|
735
|
+
renderItem: function renderItem(item) {
|
|
736
|
+
return React__default.createElement(_.PaginationItem, Object.assign({
|
|
737
|
+
classes: {
|
|
738
|
+
selected: 'main-background-color'
|
|
739
|
+
}
|
|
740
|
+
}, item));
|
|
741
|
+
}
|
|
731
742
|
}));
|
|
732
743
|
}
|
|
733
744
|
})));
|
|
@@ -736,7 +747,7 @@ TableComponent.defaultProps = {
|
|
|
736
747
|
showTotalCount: true
|
|
737
748
|
};
|
|
738
749
|
|
|
739
|
-
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 max-height: 68vh;\n border-bottom: 1px solid black;\n}\n.table-simple-component .paper-container .table-container .table-column:first-child {\n border-radius: 5px 0 0 5px;\n}\n.table-simple-component .paper-container .table-container .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-column {\n font-weight: bold;\n font-size: 1rem !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 padding: 0px 10px 0px 10px !important;\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 .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 .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:
|
|
750
|
+
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 max-height: 68vh;\n border-bottom: 1px solid black;\n}\n.table-simple-component .paper-container .table-container .table-column:first-child {\n border-radius: 5px 0 0 5px;\n}\n.table-simple-component .paper-container .table-container .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-column {\n font-weight: bold;\n font-size: 1rem !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 padding: 0px 10px 0px 10px !important;\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.Mui-selected {\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 .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}";
|
|
740
751
|
styleInject(css_248z$6);
|
|
741
752
|
|
|
742
753
|
var SimpleTableComponent = function SimpleTableComponent(props) {
|
|
@@ -929,7 +940,7 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
|
|
|
929
940
|
className: "table-simple-component"
|
|
930
941
|
}, React__default.createElement(_.Paper, {
|
|
931
942
|
className: "paper-container"
|
|
932
|
-
}, props.isCheckTable && React__default.createElement(_.Hidden, {
|
|
943
|
+
}, props.isCheckTable && !props.isCheckTable.noCheckAllItems && React__default.createElement(_.Hidden, {
|
|
933
944
|
mdUp: true
|
|
934
945
|
}, React__default.createElement(_.Box, {
|
|
935
946
|
display: "block",
|
|
@@ -948,7 +959,7 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
|
|
|
948
959
|
smDown: true
|
|
949
960
|
}, React__default.createElement(_.TableHead, null, React__default.createElement(_.TableRow, null, props.columns.map(function (column) {
|
|
950
961
|
if (column.id) {
|
|
951
|
-
var _props$isCheckTable13, _props$isCheckTable14, _props$isCheckTable15;
|
|
962
|
+
var _props$isCheckTable13, _props$isCheckTable14, _props$isCheckTable15, _props$isCheckTable16;
|
|
952
963
|
|
|
953
964
|
return React__default.createElement(_.TableCell, {
|
|
954
965
|
className: "table-column",
|
|
@@ -958,11 +969,11 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
|
|
|
958
969
|
minWidth: column.minWidth,
|
|
959
970
|
maxWidth: column.maxWidth
|
|
960
971
|
}
|
|
961
|
-
}, column.isCheck ? React__default.createElement(_.Box, {
|
|
972
|
+
}, column.isCheck && !((_props$isCheckTable13 = props.isCheckTable) != null && _props$isCheckTable13.noCheckAllItems) ? React__default.createElement(_.Box, {
|
|
962
973
|
className: "checkbox-cell"
|
|
963
974
|
}, React__default.createElement(_.Checkbox, {
|
|
964
|
-
indeterminate: props.rows && JSON.parse(JSON.stringify((_props$
|
|
965
|
-
checked: props.rows && props.rows.length > 0 && JSON.parse(JSON.stringify((_props$
|
|
975
|
+
indeterminate: props.rows && JSON.parse(JSON.stringify((_props$isCheckTable14 = props.isCheckTable) == null ? void 0 : _props$isCheckTable14.rowsChecked)).length > 0 && JSON.parse(JSON.stringify((_props$isCheckTable15 = props.isCheckTable) == null ? void 0 : _props$isCheckTable15.rowsChecked)).length < props.rows.length,
|
|
976
|
+
checked: props.rows && props.rows.length > 0 && JSON.parse(JSON.stringify((_props$isCheckTable16 = props.isCheckTable) == null ? void 0 : _props$isCheckTable16.rowsChecked)).length === props.rows.length,
|
|
966
977
|
onChange: handleSelectAllClick
|
|
967
978
|
})) : React__default.createElement(_.Box, {
|
|
968
979
|
className: "table-header-cell"
|
|
@@ -980,11 +991,11 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
|
|
|
980
991
|
}, React__default.createElement(_.CircularProgress, {
|
|
981
992
|
className: "circular-progress-main-color"
|
|
982
993
|
}))), props.rows && props.rows.length > 0 ? props.rows.map(function (row, index) {
|
|
983
|
-
var _props$
|
|
994
|
+
var _props$isCheckTable17;
|
|
984
995
|
|
|
985
996
|
var key = props.rows[index + 1] && props.rows[index + 1].id === row.id ? index : row.id;
|
|
986
997
|
var rowColor = props.rowsColorColumn && ObjectbyString(row, props.rowsColorColumn.columnName) === props.rowsColorColumn.columnValue ? "row-color-" + props.rowsColorColumn.columnValue : '';
|
|
987
|
-
var isRowSelected = ((_props$
|
|
998
|
+
var isRowSelected = ((_props$isCheckTable17 = props.isCheckTable) == null ? void 0 : _props$isCheckTable17.rowsChecked) && isSelected(row.id);
|
|
988
999
|
return React__default.createElement(_.TableRow, {
|
|
989
1000
|
className: "table-rows " + rowColor + " " + (props.onClickRow ? 'row-click' : ''),
|
|
990
1001
|
role: "checkbox",
|
|
@@ -1045,16 +1056,16 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
|
|
|
1045
1056
|
'aria-labelledby': row.id
|
|
1046
1057
|
},
|
|
1047
1058
|
onChange: function onChange(event) {
|
|
1048
|
-
var _props$
|
|
1059
|
+
var _props$isCheckTable18;
|
|
1049
1060
|
|
|
1050
|
-
return (_props$
|
|
1061
|
+
return (_props$isCheckTable18 = props.isCheckTable) != null && _props$isCheckTable18.onCheckedAction ? onCheckAction(event, row.id) : onCheckSingleAction(event, row.id);
|
|
1051
1062
|
}
|
|
1052
1063
|
})) : column.isEditableTableCell ? EditableTableCell(row, value, column.id, column.isEditableTableCell) : column.enumColumn ? React__default.createElement(_.Box, {
|
|
1053
1064
|
className: (column.enumColumn.hasColor ? (column.enumColumn.enumSuffix ? value.toLowerCase() + "-" + column.enumColumn.enumSuffix.toLowerCase() : value.toString().toLowerCase()) + "-type-color" : '') + " format-value"
|
|
1054
1065
|
}, formatValue(value, column)) : column.isBoolean ? React__default.createElement(_.Box, {
|
|
1055
1066
|
className: (column.isBoolean.hasColor ? (column.isBoolean.enumSuffix ? value.toString().toLowerCase() + "-" + column.isBoolean.enumSuffix.toLowerCase() : value.toString().toLowerCase()) + "-boolean-color" : '') + " format-value"
|
|
1056
1067
|
}, formatValue(value, column)) : React__default.createElement(_.Box, {
|
|
1057
|
-
className: "format-value
|
|
1068
|
+
className: "" + (column.isImage ? '' : 'format-value')
|
|
1058
1069
|
}, formatValue(value, column)));
|
|
1059
1070
|
} else return null;
|
|
1060
1071
|
}));
|
|
@@ -1454,7 +1465,7 @@ var TextSimpleComponent = function TextSimpleComponent(props) {
|
|
|
1454
1465
|
display: "flex",
|
|
1455
1466
|
flexDirection: "column"
|
|
1456
1467
|
}, props.label && React__default.createElement(_.FormLabel, null, props.label), React__default.createElement(_.Box, {
|
|
1457
|
-
display: "flex
|
|
1468
|
+
display: "" + (props.startIcon || props.endIcon ? 'flex' : 'block'),
|
|
1458
1469
|
alignItems: "center",
|
|
1459
1470
|
className: "text-simple-box " + (props.className ? props.className : '') + " " + (props.noMargin ? 'no-margin' : '') + " " + (props.noBorders ? 'no-border' : '') + " " + (props.error ? 'has-error-border' : ''),
|
|
1460
1471
|
width: "" + (props.fullWidth ? 'auto' : 'fit-content')
|
|
@@ -2728,6 +2739,9 @@ var TabsComponent = function TabsComponent(props) {
|
|
|
2728
2739
|
return a.value - b.value;
|
|
2729
2740
|
}).map(function (tabLabel) {
|
|
2730
2741
|
return React__default.createElement(material.Tab, {
|
|
2742
|
+
classes: {
|
|
2743
|
+
selected: 'main-background-color'
|
|
2744
|
+
},
|
|
2731
2745
|
key: tabLabel.value,
|
|
2732
2746
|
label: tabLabel.label,
|
|
2733
2747
|
value: tabLabel.value.toString()
|