techsbcn-storybook 0.14.2 → 0.14.6
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/TextFieldComponent/TextFieldComponent.d.ts +1 -1
- package/dist/components/tables/SimpleTableComponent/SimpleTableComponent.d.ts +1 -0
- package/dist/components/tables/TableComponent/TableComponent.d.ts +1 -0
- package/dist/techsbcn-storybook.cjs.development.js +8 -14
- 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 +8 -14
- package/dist/techsbcn-storybook.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/fields/TextFieldComponent/TextFieldComponent.tsx +16 -6
- package/src/components/tables/SimpleTableComponent/SimpleTableComponent.scss +3 -1
- package/src/components/tables/SimpleTableComponent/SimpleTableComponent.tsx +4 -5
- package/src/components/tables/TableComponent/TableComponent.scss +3 -1
- package/src/components/tables/TableComponent/TableComponent.tsx +4 -5
- package/src/data/UserList.tsx +6 -7
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import './TextFieldComponent.scss';
|
|
3
|
-
export declare type InputType = '
|
|
3
|
+
export declare type InputType = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week';
|
|
4
4
|
export interface TextFieldComponentProps {
|
|
5
5
|
id?: string;
|
|
6
6
|
label?: string;
|
|
@@ -292,7 +292,7 @@ var MainWrapperComponent = function MainWrapperComponent(props) {
|
|
|
292
292
|
})) : React__default.createElement(React__default.Fragment, null))));
|
|
293
293
|
};
|
|
294
294
|
|
|
295
|
-
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
|
|
295
|
+
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-bottom: 1px solid black;\n}\n.table-component .paper-container .table-container.with-scroll {\n max-height: 68vh;\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}";
|
|
296
296
|
styleInject(css_248z$4);
|
|
297
297
|
|
|
298
298
|
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}";
|
|
@@ -508,12 +508,9 @@ var TableComponent = function TableComponent(props) {
|
|
|
508
508
|
}
|
|
509
509
|
|
|
510
510
|
if (column.isDate && value) return new Date(value).toLocaleDateString('es-ES');
|
|
511
|
+
if (column.isPrice && value) return Number(value).toFixed(2).replace('.', ',') + " " + props.values.SYMBOL_EURO;
|
|
511
512
|
|
|
512
|
-
if (column.
|
|
513
|
-
if (value !== null) return value.toLocaleString() + " " + props.values.SYMBOL_EURO;
|
|
514
|
-
}
|
|
515
|
-
|
|
516
|
-
if (column.isImage) {
|
|
513
|
+
if (column.isImage && value) {
|
|
517
514
|
if (column.isImage.isUrl) {
|
|
518
515
|
return React__default.createElement(_.Avatar, {
|
|
519
516
|
alt: "-",
|
|
@@ -626,7 +623,7 @@ var TableComponent = function TableComponent(props) {
|
|
|
626
623
|
mr: 1,
|
|
627
624
|
alignSelf: "center"
|
|
628
625
|
}, props.totalCount, " ", props.values.RESULTS)), React__default.createElement(_.TableContainer, {
|
|
629
|
-
className: "table-container"
|
|
626
|
+
className: "table-container " + (props.withScroll ? 'with-scroll' : '')
|
|
630
627
|
}, React__default.createElement(_.Table, {
|
|
631
628
|
stickyHeader: true,
|
|
632
629
|
"aria-label": "sticky table",
|
|
@@ -791,7 +788,7 @@ TableComponent.defaultProps = {
|
|
|
791
788
|
showTotalCount: true
|
|
792
789
|
};
|
|
793
790
|
|
|
794
|
-
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
|
|
791
|
+
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-bottom: 1px solid black;\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: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}";
|
|
795
792
|
styleInject(css_248z$6);
|
|
796
793
|
|
|
797
794
|
var SimpleTableComponent = function SimpleTableComponent(props) {
|
|
@@ -889,12 +886,9 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
|
|
|
889
886
|
}
|
|
890
887
|
|
|
891
888
|
if (column.isDate && value) return new Date(value).toLocaleDateString('es-ES');
|
|
889
|
+
if (column.isPrice && value) return Number(value).toFixed(2).replace('.', ',') + " " + props.values.SYMBOL_EURO;
|
|
892
890
|
|
|
893
|
-
if (column.
|
|
894
|
-
if (value !== null) return value.toLocaleString() + " " + props.values.SYMBOL_EURO;
|
|
895
|
-
}
|
|
896
|
-
|
|
897
|
-
if (column.isImage) {
|
|
891
|
+
if (column.isImage && value) {
|
|
898
892
|
if (column.isImage.isUrl) {
|
|
899
893
|
return React__default.createElement(_.Avatar, {
|
|
900
894
|
alt: "-",
|
|
@@ -1000,7 +994,7 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
|
|
|
1000
994
|
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,
|
|
1001
995
|
onChange: handleSelectAllClick
|
|
1002
996
|
}))), React__default.createElement(_.TableContainer, {
|
|
1003
|
-
className: "table-container"
|
|
997
|
+
className: "table-container " + (props.withScroll ? 'with-scroll' : '')
|
|
1004
998
|
}, React__default.createElement(_.Table, {
|
|
1005
999
|
stickyHeader: true,
|
|
1006
1000
|
"aria-label": "sticky table",
|