ecomlab-components-next 0.1.103 → 0.1.104
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/Loader/SceletonChart/SceletonChart.js +57 -0
- package/dist/components/Loader/SceletonChart/SceletonChart.scss +20 -0
- package/dist/components/Loader/SceletonTable/SceletonTable.js +55 -0
- package/dist/components/Loader/SceletonTable/SceletonTable.scss +27 -0
- package/dist/components/Table/Table/Table.js +7 -4
- package/dist/components/Table/TableBox/TableBox.js +118 -42
- package/dist/components/Table/TableBox/TableBox.scss +40 -7
- package/dist/components/Table/TableBox/TableBox.stories.js +0 -12
- package/package.json +1 -1
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
'use client';
|
|
3
|
+
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.SceletonChart = void 0;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));
|
|
10
|
+
var _Stack = _interopRequireDefault(require("@mui/material/Stack"));
|
|
11
|
+
require("./SceletonChart.scss");
|
|
12
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
13
|
+
function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
|
|
14
|
+
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
15
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
16
|
+
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
|
|
17
|
+
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
|
|
18
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
19
|
+
var SceletonChart = exports.SceletonChart = function SceletonChart(_ref) {
|
|
20
|
+
var _ref$height = _ref.height,
|
|
21
|
+
height = _ref$height === void 0 ? '400' : _ref$height;
|
|
22
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
23
|
+
className: "sceleton-chart"
|
|
24
|
+
}, /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
|
|
25
|
+
className: "sceleton-chart__content"
|
|
26
|
+
}, _toConsumableArray(Array(5)).map(function (el) {
|
|
27
|
+
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Skeleton["default"], {
|
|
28
|
+
variant: "rectangular",
|
|
29
|
+
width: 45,
|
|
30
|
+
height: height * 0.9
|
|
31
|
+
}), /*#__PURE__*/_react["default"].createElement(_Skeleton["default"], {
|
|
32
|
+
variant: "rectangular",
|
|
33
|
+
width: 45,
|
|
34
|
+
height: height * 0.7
|
|
35
|
+
}), /*#__PURE__*/_react["default"].createElement(_Skeleton["default"], {
|
|
36
|
+
variant: "rectangular",
|
|
37
|
+
width: 45,
|
|
38
|
+
height: height * 0.8
|
|
39
|
+
}), /*#__PURE__*/_react["default"].createElement(_Skeleton["default"], {
|
|
40
|
+
variant: "rectangular",
|
|
41
|
+
width: 45,
|
|
42
|
+
height: height * 0.3
|
|
43
|
+
}), /*#__PURE__*/_react["default"].createElement(_Skeleton["default"], {
|
|
44
|
+
variant: "rectangular",
|
|
45
|
+
width: 45,
|
|
46
|
+
height: height * 0.4
|
|
47
|
+
}), /*#__PURE__*/_react["default"].createElement(_Skeleton["default"], {
|
|
48
|
+
variant: "rectangular",
|
|
49
|
+
width: 45,
|
|
50
|
+
height: height * 0.7
|
|
51
|
+
}), /*#__PURE__*/_react["default"].createElement(_Skeleton["default"], {
|
|
52
|
+
variant: "rectangular",
|
|
53
|
+
width: 45,
|
|
54
|
+
height: height * 0.2
|
|
55
|
+
}));
|
|
56
|
+
})));
|
|
57
|
+
};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
.sceleton-chart {
|
|
2
|
+
display: flex;
|
|
3
|
+
width: 100%;
|
|
4
|
+
padding: 20px;
|
|
5
|
+
background: #EAEAEA;
|
|
6
|
+
justify-content: center;
|
|
7
|
+
overflow: hidden;
|
|
8
|
+
border-radius: 8px;
|
|
9
|
+
|
|
10
|
+
&__content {
|
|
11
|
+
display: flex;
|
|
12
|
+
align-items: flex-end;
|
|
13
|
+
flex-direction: row !important;
|
|
14
|
+
gap: 20px;
|
|
15
|
+
|
|
16
|
+
span {
|
|
17
|
+
border-radius: 8px;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
'use client';
|
|
3
|
+
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.SceletonTable = void 0;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));
|
|
10
|
+
var _Stack = _interopRequireDefault(require("@mui/material/Stack"));
|
|
11
|
+
require("./SceletonTable.scss");
|
|
12
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
13
|
+
function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
|
|
14
|
+
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
15
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
16
|
+
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
|
|
17
|
+
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
|
|
18
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
19
|
+
var SceletonTable = exports.SceletonTable = function SceletonTable(_ref) {
|
|
20
|
+
var _ref$height = _ref.height,
|
|
21
|
+
height = _ref$height === void 0 ? 400 : _ref$height;
|
|
22
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
23
|
+
className: "sceleton-table"
|
|
24
|
+
}, /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
|
|
25
|
+
className: "sceleton-table__content"
|
|
26
|
+
}, _toConsumableArray(Array(50)).map(function (el, ind) {
|
|
27
|
+
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Skeleton["default"], {
|
|
28
|
+
key: ind,
|
|
29
|
+
variant: "text",
|
|
30
|
+
sx: {
|
|
31
|
+
fontSize: '27px'
|
|
32
|
+
}
|
|
33
|
+
}));
|
|
34
|
+
})), /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
|
|
35
|
+
className: "sceleton-table__content"
|
|
36
|
+
}, _toConsumableArray(Array(50)).map(function (el, ind) {
|
|
37
|
+
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Skeleton["default"], {
|
|
38
|
+
key: ind,
|
|
39
|
+
variant: "text",
|
|
40
|
+
sx: {
|
|
41
|
+
fontSize: '27px'
|
|
42
|
+
}
|
|
43
|
+
}));
|
|
44
|
+
})), /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
|
|
45
|
+
className: "sceleton-table__content"
|
|
46
|
+
}, _toConsumableArray(Array(50)).map(function (el, ind) {
|
|
47
|
+
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Skeleton["default"], {
|
|
48
|
+
key: ind,
|
|
49
|
+
variant: "text",
|
|
50
|
+
sx: {
|
|
51
|
+
fontSize: '27px'
|
|
52
|
+
}
|
|
53
|
+
}));
|
|
54
|
+
})));
|
|
55
|
+
};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
.sceleton-table {
|
|
2
|
+
display: flex;
|
|
3
|
+
width: 100%;
|
|
4
|
+
height: 100%;
|
|
5
|
+
padding: 20px;
|
|
6
|
+
background: #EAEAEA;
|
|
7
|
+
justify-content: center;
|
|
8
|
+
overflow: hidden;
|
|
9
|
+
border-radius: 8px;
|
|
10
|
+
gap: 16px;
|
|
11
|
+
|
|
12
|
+
&__content {
|
|
13
|
+
display: flex;
|
|
14
|
+
width: 100%;
|
|
15
|
+
align-items: flex-start;
|
|
16
|
+
gap: 20px;
|
|
17
|
+
|
|
18
|
+
span {
|
|
19
|
+
width: 100%;
|
|
20
|
+
border-radius: 8px;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.table-paginator-box:has(.sceleton-table) {
|
|
26
|
+
width: 100% !important;
|
|
27
|
+
}
|
|
@@ -25,6 +25,7 @@ var _TableInput = _interopRequireDefault(require("../TableInput/TableInput"));
|
|
|
25
25
|
var _CheckboxToggle = _interopRequireDefault(require("../CheckboxToggle/CheckboxToggle"));
|
|
26
26
|
var _SliderCarousel = _interopRequireDefault(require("../../Slider/SliderCarousel/SliderCarousel"));
|
|
27
27
|
var _AuthorAvatar = require("../../AuthorAvatar/AuthorAvatar");
|
|
28
|
+
var _SceletonTable = require("../../Loader/SceletonTable/SceletonTable");
|
|
28
29
|
require("./Table.scss");
|
|
29
30
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
30
31
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
@@ -128,7 +129,8 @@ var Table = function Table(_ref) {
|
|
|
128
129
|
setLang(localStorage.getItem('lang'));
|
|
129
130
|
}, [localStorage.getItem('lang')]);
|
|
130
131
|
var translateNoData = function translateNoData() {
|
|
131
|
-
if (lang == 'en') return 'Select
|
|
132
|
+
if (lang == 'en') return 'Select the parameters for loading table data';
|
|
133
|
+
if (lang == 'th') return 'เลือกพารามิเตอร์สำหรับการโหลดข้อมูลตาราง';
|
|
132
134
|
return 'Выберите параметры для загрузки данных таблицы';
|
|
133
135
|
};
|
|
134
136
|
var translateTextСopied = function translateTextСopied() {
|
|
@@ -170,8 +172,9 @@ var Table = function Table(_ref) {
|
|
|
170
172
|
}
|
|
171
173
|
};
|
|
172
174
|
var translateNoParametr = function translateNoParametr() {
|
|
173
|
-
if (lang == 'en') return 'No data found, try
|
|
175
|
+
if (lang == 'en') return 'No data was found, try changing the parameters';
|
|
174
176
|
if (lang == 'tr') return 'Veri bulunmadı, filtreleri sıfırlamaya deneyin';
|
|
177
|
+
if (lang == 'th') return 'ไม่พบข้อมูล ลองเปลี่ยนพารามิเตอร์ดู';
|
|
175
178
|
return 'По заданым параметрам не найдено данных, попробуйте поменять параметры';
|
|
176
179
|
};
|
|
177
180
|
var refTable = (0, _react.useRef)();
|
|
@@ -1918,7 +1921,7 @@ var Table = function Table(_ref) {
|
|
|
1918
1921
|
var _fetchedData$;
|
|
1919
1922
|
return loading && !(headers !== null && headers !== void 0 && headers.header) ? /*#__PURE__*/_react["default"].createElement("div", {
|
|
1920
1923
|
className: "loader-table"
|
|
1921
|
-
}, /*#__PURE__*/_react["default"].createElement(SceletonTable, {
|
|
1924
|
+
}, /*#__PURE__*/_react["default"].createElement(_SceletonTable.SceletonTable, {
|
|
1922
1925
|
height: 400
|
|
1923
1926
|
})) : headers !== null && headers !== void 0 && headers.header ? !nestedTable ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("table", {
|
|
1924
1927
|
className: "table-ver-3",
|
|
@@ -1940,7 +1943,7 @@ var Table = function Table(_ref) {
|
|
|
1940
1943
|
//style={{ position: 'relative' }}
|
|
1941
1944
|
}, headers !== null && headers !== void 0 && headers.header && loading ? /*#__PURE__*/_react["default"].createElement("div", {
|
|
1942
1945
|
className: "loader-table"
|
|
1943
|
-
}, /*#__PURE__*/_react["default"].createElement(SceletonTable, {
|
|
1946
|
+
}, /*#__PURE__*/_react["default"].createElement(_SceletonTable.SceletonTable, {
|
|
1944
1947
|
height: 400
|
|
1945
1948
|
})) : ((_fetchedData$ = fetchedData[0]) === null || _fetchedData$ === void 0 ? void 0 : _fetchedData$.length) > 0 ? bodyRowsList : /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", {
|
|
1946
1949
|
className: "loader-box-tr",
|
|
@@ -26,8 +26,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
|
|
|
26
26
|
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
27
27
|
var TableBox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, paginatorRef) {
|
|
28
28
|
var _headers$header, _headers$header2;
|
|
29
|
-
var
|
|
30
|
-
noDataText = _ref.noDataText,
|
|
29
|
+
var noDataText = _ref.noDataText,
|
|
31
30
|
_ref$hideColumn = _ref.hideColumn,
|
|
32
31
|
hideColumn = _ref$hideColumn === void 0 ? false : _ref$hideColumn,
|
|
33
32
|
_ref$hideUpload = _ref.hideUpload,
|
|
@@ -43,6 +42,7 @@ var TableBox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, paginatorRef)
|
|
|
43
42
|
paginatorDependencies = _ref.paginatorDependencies,
|
|
44
43
|
onCheck = _ref.onCheck,
|
|
45
44
|
onInputHandler = _ref.onInputHandler,
|
|
45
|
+
_onInputAction = _ref.onInputAction,
|
|
46
46
|
_ref$setCheckedStateE = _ref.setCheckedStateEmpty,
|
|
47
47
|
setCheckedStateEmpty = _ref$setCheckedStateE === void 0 ? false : _ref$setCheckedStateE,
|
|
48
48
|
sortableColumns = _ref.sortableColumns,
|
|
@@ -55,7 +55,8 @@ var TableBox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, paginatorRef)
|
|
|
55
55
|
onAddAcc = _ref$onAddAcc === void 0 ? false : _ref$onAddAcc,
|
|
56
56
|
_ref$onBooleanCheckbo = _ref.onBooleanCheckbox,
|
|
57
57
|
onBooleanCheckbox = _ref$onBooleanCheckbo === void 0 ? false : _ref$onBooleanCheckbo,
|
|
58
|
-
sort = _ref.sort,
|
|
58
|
+
_ref$sort = _ref.sort,
|
|
59
|
+
sort = _ref$sort === void 0 ? false : _ref$sort,
|
|
59
60
|
isSortable = _ref.isSortable,
|
|
60
61
|
_onAction = _ref.onAction,
|
|
61
62
|
_ref$onActionInfo = _ref.onActionInfo,
|
|
@@ -74,6 +75,8 @@ var TableBox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, paginatorRef)
|
|
|
74
75
|
date = _ref.date,
|
|
75
76
|
_ref$statistic = _ref.statistic,
|
|
76
77
|
statistic = _ref$statistic === void 0 ? false : _ref$statistic,
|
|
78
|
+
_ref$metrics = _ref.metrics,
|
|
79
|
+
metrics = _ref$metrics === void 0 ? false : _ref$metrics,
|
|
77
80
|
child = _ref.child,
|
|
78
81
|
_ref$hideExport = _ref.hideExport,
|
|
79
82
|
hideExport = _ref$hideExport === void 0 ? false : _ref$hideExport,
|
|
@@ -90,8 +93,15 @@ var TableBox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, paginatorRef)
|
|
|
90
93
|
contextMenuArr = _ref.contextMenuArr,
|
|
91
94
|
tableBody = _ref.tableBody,
|
|
92
95
|
tableUrl = _ref.tableUrl,
|
|
93
|
-
|
|
94
|
-
|
|
96
|
+
tableQuery = _ref.tableQuery,
|
|
97
|
+
tableHeaders = _ref.tableHeaders,
|
|
98
|
+
onUncheckAllDependence = _ref.onUncheckAllDependence,
|
|
99
|
+
showFilter = _ref.showFilter,
|
|
100
|
+
maxSelectedCount = _ref.maxSelectedCount,
|
|
101
|
+
isEditing = _ref.isEditing,
|
|
102
|
+
tableIdCRM = _ref.tableIdCRM,
|
|
103
|
+
fetchHead = _ref.fetchHead;
|
|
104
|
+
var lang = localStorage.getItem('lang');
|
|
95
105
|
var _useState = (0, _react.useState)(headers === null || headers === void 0 ? void 0 : headers.filters),
|
|
96
106
|
_useState2 = _slicedToArray(_useState, 2),
|
|
97
107
|
fileFilters = _useState2[0],
|
|
@@ -108,6 +118,10 @@ var TableBox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, paginatorRef)
|
|
|
108
118
|
_useState8 = _slicedToArray(_useState7, 2),
|
|
109
119
|
checkedHeaders = _useState8[0],
|
|
110
120
|
_setCheckedHeaders = _useState8[1];
|
|
121
|
+
var _useState9 = (0, _react.useState)(0),
|
|
122
|
+
_useState10 = _slicedToArray(_useState9, 2),
|
|
123
|
+
rowCount = _useState10[0],
|
|
124
|
+
_setRowCount = _useState10[1];
|
|
111
125
|
var _usePagination = (0, _Paginator.usePagination)(function (e) {
|
|
112
126
|
return fetchCallback(e);
|
|
113
127
|
}, paginatorDependencies, params, lang, _setParams),
|
|
@@ -127,47 +141,80 @@ var TableBox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, paginatorRef)
|
|
|
127
141
|
reset: reset
|
|
128
142
|
};
|
|
129
143
|
});
|
|
130
|
-
var
|
|
131
|
-
|
|
132
|
-
width =
|
|
133
|
-
setWidth =
|
|
134
|
-
var
|
|
144
|
+
var _useState11 = (0, _react.useState)(),
|
|
145
|
+
_useState12 = _slicedToArray(_useState11, 2),
|
|
146
|
+
width = _useState12[0],
|
|
147
|
+
setWidth = _useState12[1];
|
|
148
|
+
var _useState13 = (0, _react.useState)({
|
|
135
149
|
name: 'Обычные',
|
|
136
150
|
value: 1
|
|
137
151
|
}),
|
|
138
|
-
_useState12 = _slicedToArray(_useState11, 2),
|
|
139
|
-
selectedColumnWidth = _useState12[0],
|
|
140
|
-
setSelectedColumnWidth = _useState12[1];
|
|
141
|
-
var _useState13 = (0, _react.useState)(null),
|
|
142
152
|
_useState14 = _slicedToArray(_useState13, 2),
|
|
143
|
-
|
|
144
|
-
|
|
153
|
+
selectedColumnWidth = _useState14[0],
|
|
154
|
+
setSelectedColumnWidth = _useState14[1];
|
|
155
|
+
var _useState15 = (0, _react.useState)(null),
|
|
156
|
+
_useState16 = _slicedToArray(_useState15, 2),
|
|
157
|
+
positionPaginator = _useState16[0],
|
|
158
|
+
setPositionPaginator = _useState16[1];
|
|
145
159
|
var refContainer = (0, _react.useRef)();
|
|
146
160
|
var paginatorBoxRef = (0, _react.useRef)();
|
|
147
161
|
var refDiv = (0, _react.useRef)();
|
|
148
162
|
(0, _react.useEffect)(function () {
|
|
149
|
-
|
|
150
|
-
var
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
};
|
|
160
|
-
}
|
|
163
|
+
var event = function event() {
|
|
164
|
+
var _document$querySelect;
|
|
165
|
+
var tableWidth = (_document$querySelect = document.querySelector('.table-box-component')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.offsetWidth;
|
|
166
|
+
setWidth(tableWidth);
|
|
167
|
+
};
|
|
168
|
+
event();
|
|
169
|
+
window.addEventListener('resize', event);
|
|
170
|
+
return function () {
|
|
171
|
+
window.removeEventListener('resize', event);
|
|
172
|
+
};
|
|
161
173
|
}, []);
|
|
162
174
|
var scroll = function scroll() {
|
|
163
175
|
var _paginatorBoxRef$curr;
|
|
164
176
|
setPositionPaginator((_paginatorBoxRef$curr = paginatorBoxRef.current) === null || _paginatorBoxRef$curr === void 0 ? void 0 : _paginatorBoxRef$curr.scrollLeft);
|
|
165
177
|
};
|
|
178
|
+
var refHeader = (0, _react.useRef)();
|
|
179
|
+
var refTableContainer = (0, _react.useRef)();
|
|
180
|
+
var refBody = (0, _react.useRef)();
|
|
181
|
+
// const [rowCountHeader, setRowCountHeader] = useState(0)
|
|
182
|
+
|
|
183
|
+
// const scrollHeader = () => {
|
|
184
|
+
|
|
185
|
+
// const tbody = refTableContainer?.current?.getBoundingClientRect();
|
|
186
|
+
// const thead = refHeader?.current;
|
|
187
|
+
|
|
188
|
+
// const top = tbody?.top;
|
|
189
|
+
// const height = thead?.getBoundingClientRect().height;
|
|
190
|
+
// console.log((-top + height))
|
|
191
|
+
// if (true) {
|
|
192
|
+
// setRowCountHeader(-top + height);
|
|
193
|
+
// } else {
|
|
194
|
+
// setRowCountHeader(0);
|
|
195
|
+
// }
|
|
196
|
+
// };
|
|
197
|
+
|
|
198
|
+
// useEffect(() => {
|
|
199
|
+
// window.addEventListener('scroll', scrollHeader);
|
|
200
|
+
|
|
201
|
+
// return () => window.removeEventListener('scroll', scrollHeader);
|
|
202
|
+
// }, []);
|
|
203
|
+
|
|
166
204
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
167
205
|
className: "table-box-component ".concat((headers === null || headers === void 0 || (_headers$header = headers.header) === null || _headers$header === void 0 ? void 0 : _headers$header.length) > 0 ? '' : 'table-box-component_no-data'),
|
|
168
|
-
|
|
206
|
+
style: {
|
|
207
|
+
maxWidth: loading ? '100%' : ''
|
|
208
|
+
}
|
|
169
209
|
}, !hideHeader && /*#__PURE__*/_react["default"].createElement("div", {
|
|
170
|
-
className: "table-box-component__header"
|
|
210
|
+
className: "table-box-component__header",
|
|
211
|
+
ref: refHeader
|
|
212
|
+
// style={{
|
|
213
|
+
// backgroundColor: 'white',
|
|
214
|
+
// transform: `translateY(${rowCountHeader + (topHeader ? topHeader : 0)
|
|
215
|
+
// }px)`,
|
|
216
|
+
// transition: '.3s',
|
|
217
|
+
// }}
|
|
171
218
|
}, selectRange && /*#__PURE__*/_react["default"].createElement(_DownSelector["default"], {
|
|
172
219
|
options_prop: [],
|
|
173
220
|
setState: function setState(e) {
|
|
@@ -193,15 +240,31 @@ var TableBox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, paginatorRef)
|
|
|
193
240
|
disabled: true
|
|
194
241
|
})), /*#__PURE__*/_react["default"].createElement("div", {
|
|
195
242
|
className: "child-box"
|
|
196
|
-
}, statistic && /*#__PURE__*/_react["default"].createElement("div", {
|
|
243
|
+
}, child, statistic && /*#__PURE__*/_react["default"].createElement("div", {
|
|
197
244
|
className: "statistic-items"
|
|
198
|
-
}, statistic.map(function (_ref2) {
|
|
245
|
+
}, statistic === null || statistic === void 0 ? void 0 : statistic.map(function (_ref2, ind) {
|
|
199
246
|
var label = _ref2.label,
|
|
200
247
|
sum = _ref2.sum;
|
|
201
248
|
return /*#__PURE__*/_react["default"].createElement("p", {
|
|
202
|
-
className: "text_violet"
|
|
249
|
+
className: "text_violet",
|
|
250
|
+
key: label + ind
|
|
203
251
|
}, label + ' ', " ", /*#__PURE__*/_react["default"].createElement("span", null, sum));
|
|
204
|
-
})),
|
|
252
|
+
})), metrics && /*#__PURE__*/_react["default"].createElement("div", {
|
|
253
|
+
className: "metrics-items"
|
|
254
|
+
}, metrics === null || metrics === void 0 ? void 0 : metrics.map(function (_ref3, ind) {
|
|
255
|
+
var label = _ref3.label,
|
|
256
|
+
value = _ref3.value,
|
|
257
|
+
unit = _ref3.unit,
|
|
258
|
+
color = _ref3.color;
|
|
259
|
+
return /*#__PURE__*/_react["default"].createElement("p", {
|
|
260
|
+
className: "metrics-items__text",
|
|
261
|
+
key: label + ind
|
|
262
|
+
}, label + ' ', ' ', /*#__PURE__*/_react["default"].createElement("span", {
|
|
263
|
+
style: {
|
|
264
|
+
color: color ? color : ''
|
|
265
|
+
}
|
|
266
|
+
}, value === null || value === void 0 ? void 0 : value.toLocaleString()), /*#__PURE__*/_react["default"].createElement("span", null, " ", unit ? ' ' + unit : ''));
|
|
267
|
+
}))), (!hideExport || !hideUpload || !hideColumn) && /*#__PURE__*/_react["default"].createElement("div", {
|
|
205
268
|
className: "panel-with-buttons-right"
|
|
206
269
|
}, !hideColumn && /*#__PURE__*/_react["default"].createElement(_ButtonColumn.ButtonColumn, {
|
|
207
270
|
lang: lang,
|
|
@@ -216,7 +279,10 @@ var TableBox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, paginatorRef)
|
|
|
216
279
|
}), !hideExport && /*#__PURE__*/_react["default"].createElement(_ButtonExport.ButtonExport, {
|
|
217
280
|
lang: lang,
|
|
218
281
|
tableBody: tableBody,
|
|
219
|
-
tableUrl: tableUrl
|
|
282
|
+
tableUrl: tableUrl,
|
|
283
|
+
tableQuery: tableQuery,
|
|
284
|
+
tableHeaders: tableHeaders,
|
|
285
|
+
showFilter: showFilter
|
|
220
286
|
}), !hideUpload && /*#__PURE__*/_react["default"].createElement(_ButtonUpload.ButtonUpload, {
|
|
221
287
|
lang: lang
|
|
222
288
|
}))), /*#__PURE__*/_react["default"].createElement("div", {
|
|
@@ -233,14 +299,19 @@ var TableBox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, paginatorRef)
|
|
|
233
299
|
minHeight: maxHeight ? maxHeight : ''
|
|
234
300
|
}
|
|
235
301
|
}, /*#__PURE__*/_react["default"].createElement(_Table["default"], {
|
|
302
|
+
maxSelectedCount: maxSelectedCount,
|
|
236
303
|
noDataText: noDataText,
|
|
237
304
|
selectedColumnWidth: selectedColumnWidth === null || selectedColumnWidth === void 0 ? void 0 : selectedColumnWidth.value,
|
|
305
|
+
onUncheckAllDependence: onUncheckAllDependence,
|
|
238
306
|
loading: loading,
|
|
239
307
|
fetchedData: fetchedData,
|
|
240
308
|
headers: headers,
|
|
241
309
|
selectedHeaders: selectedHeaders,
|
|
242
310
|
onCheck: onCheck,
|
|
243
311
|
onInputHandler: onInputHandler,
|
|
312
|
+
onInputAction: function onInputAction(e) {
|
|
313
|
+
return _onInputAction(e);
|
|
314
|
+
},
|
|
244
315
|
sortableColumns: sortableColumns,
|
|
245
316
|
setActiveSortColumn: setActiveSortColumn,
|
|
246
317
|
isSortable: isSortable,
|
|
@@ -300,12 +371,17 @@ var TableBox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, paginatorRef)
|
|
|
300
371
|
hideFilters: hideFilters,
|
|
301
372
|
hideSorting: hideSorting,
|
|
302
373
|
contextMenuArr: contextMenuArr,
|
|
303
|
-
maxHeight: maxHeight
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
374
|
+
maxHeight: maxHeight,
|
|
375
|
+
tableBody: tableBody,
|
|
376
|
+
rowCount: rowCount,
|
|
377
|
+
setRowCount: function setRowCount(e) {
|
|
378
|
+
return _setRowCount(e);
|
|
379
|
+
},
|
|
380
|
+
refBody: refBody,
|
|
381
|
+
refHeader: refHeader,
|
|
382
|
+
isEditing: isEditing,
|
|
383
|
+
tableIdCRM: tableIdCRM,
|
|
384
|
+
fetchHead: fetchHead
|
|
385
|
+
}))), paginator && Paginator);
|
|
310
386
|
});
|
|
311
387
|
var _default = exports["default"] = TableBox;
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
// @import 'src/common/styles/svg_img.scss';
|
|
2
|
-
|
|
3
1
|
.table-box-component,
|
|
4
2
|
.table-box-component_no-data {
|
|
5
3
|
display: flex;
|
|
@@ -155,7 +153,7 @@
|
|
|
155
153
|
height: 100%;
|
|
156
154
|
border: none;
|
|
157
155
|
background-color: white;
|
|
158
|
-
opacity: 0.6;
|
|
156
|
+
// opacity: 0.6;
|
|
159
157
|
z-index: 10;
|
|
160
158
|
}
|
|
161
159
|
|
|
@@ -166,6 +164,12 @@
|
|
|
166
164
|
width: 100%;
|
|
167
165
|
gap: 12px;
|
|
168
166
|
margin-bottom: 12px;
|
|
167
|
+
transition: 0.3s;
|
|
168
|
+
position: sticky;
|
|
169
|
+
background-color: #F6F7F6;
|
|
170
|
+
border-radius: 8px;
|
|
171
|
+
z-index: 5;
|
|
172
|
+
top: 0;
|
|
169
173
|
|
|
170
174
|
.name-box {
|
|
171
175
|
display: flex;
|
|
@@ -174,7 +178,7 @@
|
|
|
174
178
|
font-weight: 400;
|
|
175
179
|
width: auto;
|
|
176
180
|
background-color: #ffffff;
|
|
177
|
-
font-size:
|
|
181
|
+
font-size: 13px;
|
|
178
182
|
height: 32px;
|
|
179
183
|
border-radius: 8px;
|
|
180
184
|
padding-left: 16px;
|
|
@@ -204,7 +208,7 @@
|
|
|
204
208
|
color: #636D65;
|
|
205
209
|
text-align: center;
|
|
206
210
|
font-family: NunitoSans;
|
|
207
|
-
font-size:
|
|
211
|
+
font-size: 11px;
|
|
208
212
|
font-style: normal;
|
|
209
213
|
font-weight: 600;
|
|
210
214
|
line-height: 14px;
|
|
@@ -216,6 +220,35 @@
|
|
|
216
220
|
}
|
|
217
221
|
}
|
|
218
222
|
}
|
|
223
|
+
|
|
224
|
+
.metrics-items {
|
|
225
|
+
display: flex;
|
|
226
|
+
width: fit-content;
|
|
227
|
+
align-items: center;
|
|
228
|
+
height: 100%;
|
|
229
|
+
justify-content: flex-start;
|
|
230
|
+
column-gap: 24px;
|
|
231
|
+
row-gap: 16px;
|
|
232
|
+
flex-wrap: wrap;
|
|
233
|
+
padding: 8px;
|
|
234
|
+
|
|
235
|
+
&__text {
|
|
236
|
+
color: #0C2037;
|
|
237
|
+
font-family: "Golos Text";
|
|
238
|
+
font-size: 10px;
|
|
239
|
+
font-style: normal;
|
|
240
|
+
font-weight: 400;
|
|
241
|
+
line-height: 24px;
|
|
242
|
+
|
|
243
|
+
span {
|
|
244
|
+
color: #0C2037;
|
|
245
|
+
font-size: 12px;
|
|
246
|
+
font-weight: 500;
|
|
247
|
+
line-height: 24px;
|
|
248
|
+
/* 184.615% */
|
|
249
|
+
}
|
|
250
|
+
}
|
|
251
|
+
}
|
|
219
252
|
}
|
|
220
253
|
|
|
221
254
|
.extra_wrapper {
|
|
@@ -230,11 +263,11 @@
|
|
|
230
263
|
display: flex;
|
|
231
264
|
flex-direction: column;
|
|
232
265
|
border-radius: 8px;
|
|
233
|
-
border: 2px solid rgba(170, 178, 246, 0.12);
|
|
234
266
|
overflow-x: auto;
|
|
235
267
|
overflow-y: hidden;
|
|
236
268
|
background-color: white;
|
|
237
|
-
|
|
269
|
+
position: relative;
|
|
270
|
+
border: 1px solid #EDEFED;
|
|
238
271
|
|
|
239
272
|
&::-webkit-scrollbar {
|
|
240
273
|
width: 0;
|
|
@@ -70,15 +70,6 @@ var _default = exports["default"] = {
|
|
|
70
70
|
}, {
|
|
71
71
|
label: 'Товаров',
|
|
72
72
|
sum: 50
|
|
73
|
-
}, {
|
|
74
|
-
label: 'Заказов',
|
|
75
|
-
sum: 50
|
|
76
|
-
}, {
|
|
77
|
-
label: 'Товаров',
|
|
78
|
-
sum: 50
|
|
79
|
-
}, {
|
|
80
|
-
label: 'Заказов',
|
|
81
|
-
sum: 50
|
|
82
73
|
}],
|
|
83
74
|
metrics: [
|
|
84
75
|
// {
|
|
@@ -100,9 +91,6 @@ var _default = exports["default"] = {
|
|
|
100
91
|
}, {
|
|
101
92
|
label: 'Процент отмен, %',
|
|
102
93
|
value: '6'
|
|
103
|
-
}, {
|
|
104
|
-
label: 'Возвраты, шт.',
|
|
105
|
-
value: '16'
|
|
106
94
|
}],
|
|
107
95
|
panelBtn: true
|
|
108
96
|
}
|