@unbxd-ui/unbxd-react-components 0.2.145-beta.1 → 0.2.145-beta.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (66) hide show
  1. package/README.md +14 -2
  2. package/components/Accordian/Accordian.stories.js +140 -116
  3. package/components/Button/Button.stories.js +166 -59
  4. package/components/DataLoader/DataLoader.stories.js +239 -52
  5. package/components/Form/Checkbox.js +4 -2
  6. package/components/Form/SearchableDropdown.js +7 -4
  7. package/components/Form/formCore.css +1 -1
  8. package/components/Form/stories/Checkbox.stories.js +138 -38
  9. package/components/Form/stories/Dropdown.stories.js +322 -91
  10. package/components/Form/stories/FileUploader.stories.js +177 -18
  11. package/components/Form/stories/Input.stories.js +115 -0
  12. package/components/Form/stories/RangeSlider.stories.js +161 -62
  13. package/components/Form/stories/SearchableDropdown.stories.js +189 -0
  14. package/components/Form/stories/ServerPaginatedDropdown.stories.js +365 -0
  15. package/components/Form/stories/Textarea.stories.js +112 -32
  16. package/components/Form/stories/Toggle.stories.js +192 -13
  17. package/components/Form/variables.css +0 -0
  18. package/components/InlineModal/InlineModal.stories.js +238 -43
  19. package/components/InlineModal/inlineModalCore.css +1 -1
  20. package/components/List/List.stories.js +238 -0
  21. package/components/Modal/Modal.stories.js +256 -36
  22. package/components/Modal/modalCore.css +1 -1
  23. package/components/NotificationComponent/NotificationComponent.stories.js +170 -18
  24. package/components/PageLoader/PageLoader.js +84 -0
  25. package/components/PageLoader/PageLoader.stories.js +276 -0
  26. package/components/PageLoader/index.js +9 -0
  27. package/components/PageLoader/pageLoaderCore.css +1 -0
  28. package/components/ProgressBar/ProgressBar.css +0 -0
  29. package/components/ProgressBar/ProgressBar.stories.js +202 -9
  30. package/components/ProgressBar/progressBarCore.css +1 -1
  31. package/components/Table/BaseTable.js +84 -353
  32. package/components/Table/Table.js +5 -357
  33. package/components/Table/Table.stories.js +2108 -148
  34. package/components/Table/TableChild.js +379 -0
  35. package/components/Table/TableConstants.js +15 -0
  36. package/components/Table/hooks/usePrevious.js +14 -0
  37. package/components/Table/index.js +13 -0
  38. package/components/Table/tableCore.css +1 -1
  39. package/components/TableOld/BaseTable.js +373 -0
  40. package/components/TableOld/PaginationComponent.js +86 -0
  41. package/components/TableOld/TableOld.js +367 -0
  42. package/components/TableOld/index.js +15 -0
  43. package/components/TabsComponent/TabsComponent.stories.js +290 -52
  44. package/components/ToastNotification/ToastNotificationWrapper.js +212 -0
  45. package/components/ToastNotification/ToastNotificationWrapper.stories.js +554 -0
  46. package/components/ToastNotification/index.js +40 -0
  47. package/components/ToastNotification/toastNotificationCore.css +1 -0
  48. package/components/Tooltip/Tooltip.js +219 -80
  49. package/components/Tooltip/Tooltip.stories.js +379 -14
  50. package/components/Tooltip/tooltipCore.css +1 -1
  51. package/components/Tooltip/tooltipTheme.css +1 -1
  52. package/components/core.css +2 -2
  53. package/components/core.scss +17 -0
  54. package/components/index.js +51 -0
  55. package/components/theme.css +2 -2
  56. package/core/dataLoader.js +5 -2
  57. package/index.js +48 -0
  58. package/package.json +30 -19
  59. package/components/Button/DropdownButton.stories.js +0 -48
  60. package/components/Form/stories/DragDropFileUploader.stories.js +0 -25
  61. package/components/Form/stories/FormDefault.stories.js +0 -114
  62. package/components/Form/stories/RadioList.stories.js +0 -52
  63. package/components/Form/stories/TextInput.stories.js +0 -75
  64. package/components/Form/stories/form.stories.js +0 -232
  65. package/components/List/list.stories.js +0 -35
  66. package/core/dataLoader.stories.js +0 -118
@@ -0,0 +1,379 @@
1
+ "use strict";
2
+
3
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports["default"] = void 0;
8
+ var _react = _interopRequireWildcard(require("react"));
9
+ var _BaseTable = _interopRequireDefault(require("./BaseTable"));
10
+ var _propTypes = _interopRequireDefault(require("prop-types"));
11
+ var _lodash = _interopRequireDefault(require("lodash.isequal"));
12
+ var _usePrevious = require("./hooks/usePrevious");
13
+ var _dataLoader = _interopRequireDefault(require("../../core/dataLoader"));
14
+ var _excluded = ["records", "columnConfigs", "paginationType", "sortOrder", "apiInfo", "onApiError", "noDataDescription", "noDataHeading", "customClassName", "pagination", "refreshData", "showSelectableRows", "setSelectedRow", "clearData", "expandableRows", "selectableRows", "CustomLoading", "CustomNoDataComponent", "CustomAPIErrorComponent", "CheckBoxRow", "page", "perPage", "onPageChangeCB", "onRowsPerPageChangeCB", "requestKeys", "paginationRowsPerPageOptions"];
15
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
16
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
17
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
18
+ function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
19
+ 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."); }
20
+ function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
21
+ function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
22
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
23
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
24
+ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
25
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
26
+ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
27
+ function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
28
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
29
+ 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; } }
30
+ 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; }
31
+ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
32
+ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
33
+ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
34
+ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
35
+ var TableChild = function TableChild() {
36
+ var _columnConfigs$, _columnConfigs;
37
+ var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
38
+ var _props$records = props.records,
39
+ records = _props$records === void 0 ? [] : _props$records,
40
+ _props$columnConfigs = props.columnConfigs,
41
+ columnConfigs = _props$columnConfigs === void 0 ? [] : _props$columnConfigs,
42
+ _props$paginationType = props.paginationType,
43
+ paginationType = _props$paginationType === void 0 ? "" : _props$paginationType,
44
+ _props$sortOrder = props.sortOrder,
45
+ sortOrder = _props$sortOrder === void 0 ? "" : _props$sortOrder,
46
+ _props$apiInfo = props.apiInfo,
47
+ apiInfo = _props$apiInfo === void 0 ? {} : _props$apiInfo,
48
+ onApiError = props.onApiError,
49
+ _props$noDataDescript = props.noDataDescription,
50
+ noDataDescription = _props$noDataDescript === void 0 ? "" : _props$noDataDescript,
51
+ _props$noDataHeading = props.noDataHeading,
52
+ noDataHeading = _props$noDataHeading === void 0 ? "" : _props$noDataHeading,
53
+ _props$customClassNam = props.customClassName,
54
+ customClassName = _props$customClassNam === void 0 ? "" : _props$customClassNam,
55
+ _props$pagination = props.pagination,
56
+ pagination = _props$pagination === void 0 ? true : _props$pagination,
57
+ refreshData = props.refreshData,
58
+ showSelectableRows = props.showSelectableRows,
59
+ setSelectedRow = props.setSelectedRow,
60
+ _props$clearData = props.clearData,
61
+ clearData = _props$clearData === void 0 ? false : _props$clearData,
62
+ _props$expandableRows = props.expandableRows,
63
+ expandableRows = _props$expandableRows === void 0 ? false : _props$expandableRows,
64
+ _props$selectableRows = props.selectableRows,
65
+ selectableRows = _props$selectableRows === void 0 ? false : _props$selectableRows,
66
+ CustomLoading = props.CustomLoading,
67
+ CustomNoDataComponent = props.CustomNoDataComponent,
68
+ CustomAPIErrorComponent = props.CustomAPIErrorComponent,
69
+ CheckBoxRow = props.CheckBoxRow,
70
+ pageNumber = props.page,
71
+ perPageCount = props.perPage,
72
+ onPageChangeCB = props.onPageChangeCB,
73
+ onRowsPerPageChangeCB = props.onRowsPerPageChangeCB,
74
+ requestKeys = props.requestKeys,
75
+ _props$paginationRows = props.paginationRowsPerPageOptions,
76
+ paginationRowsPerPageOptions = _props$paginationRows === void 0 ? [10, 20, 50, 100] : _props$paginationRows,
77
+ restProps = _objectWithoutProperties(props, _excluded);
78
+ var isServerPagination = paginationType === "SERVER";
79
+
80
+ // Check which column has stickyColumn prop
81
+ var isFirstColumnSticky = columnConfigs.length > 0 && ((_columnConfigs$ = columnConfigs[0]) === null || _columnConfigs$ === void 0 ? void 0 : _columnConfigs$.stickyColumn) === true;
82
+ var isLastColumnSticky = columnConfigs.length > 0 && ((_columnConfigs = columnConfigs[columnConfigs.length - 1]) === null || _columnConfigs === void 0 ? void 0 : _columnConfigs.stickyColumn) === true;
83
+ var _apiInfo$pageNoKey = apiInfo.pageNoKey,
84
+ pageNoKey = _apiInfo$pageNoKey === void 0 ? "page_number" : _apiInfo$pageNoKey,
85
+ _apiInfo$perPageKey = apiInfo.perPageKey,
86
+ perPageKey = _apiInfo$perPageKey === void 0 ? "per_page" : _apiInfo$perPageKey,
87
+ _apiInfo$searchBy = apiInfo.searchBy,
88
+ searchBy = _apiInfo$searchBy === void 0 ? "" : _apiInfo$searchBy,
89
+ _apiInfo$getUrlParams = apiInfo.getUrlParams,
90
+ getUrlParams = _apiInfo$getUrlParams === void 0 ? function () {} : _apiInfo$getUrlParams,
91
+ _apiInfo$requestId = apiInfo.requestId,
92
+ requestId = _apiInfo$requestId === void 0 ? "" : _apiInfo$requestId,
93
+ responseFormatter = apiInfo.responseFormatter,
94
+ _apiInfo$requestParam = apiInfo.requestParam,
95
+ requestParam = _apiInfo$requestParam === void 0 ? {} : _apiInfo$requestParam,
96
+ _apiInfo$sortBy = apiInfo.sortBy,
97
+ sortBy = _apiInfo$sortBy === void 0 ? "" : _apiInfo$sortBy;
98
+ var _requestParam$searchB = requestParam[searchBy],
99
+ searchQuery = _requestParam$searchB === void 0 ? "" : _requestParam$searchB;
100
+ // const { [SM_PAGE_PARAM]: stateMachinePage, [SM_ROWS_PER_PAGE_PARAM]: stateMachinePerPageCount } = getStateMachine([SM_PAGE_PARAM, SM_ROWS_PER_PAGE_PARAM]);
101
+
102
+ var _useState = (0, _react.useState)([]),
103
+ _useState2 = _slicedToArray(_useState, 2),
104
+ data = _useState2[0],
105
+ setData = _useState2[1];
106
+ var _useState3 = (0, _react.useState)(true),
107
+ _useState4 = _slicedToArray(_useState3, 2),
108
+ loading = _useState4[0],
109
+ setLoading = _useState4[1];
110
+ var _useState5 = (0, _react.useState)(0),
111
+ _useState6 = _slicedToArray(_useState5, 2),
112
+ totalRows = _useState6[0],
113
+ setTotalRows = _useState6[1];
114
+ var _useState7 = (0, _react.useState)(pageNumber),
115
+ _useState8 = _slicedToArray(_useState7, 2),
116
+ page = _useState8[0],
117
+ setPage = _useState8[1];
118
+ var _useState9 = (0, _react.useState)(perPageCount),
119
+ _useState0 = _slicedToArray(_useState9, 2),
120
+ perPage = _useState0[0],
121
+ setPerPage = _useState0[1];
122
+ var _useState1 = (0, _react.useState)([]),
123
+ _useState10 = _slicedToArray(_useState1, 2),
124
+ selectedData = _useState10[0],
125
+ setSelectedData = _useState10[1];
126
+ var _useState11 = (0, _react.useState)(false),
127
+ _useState12 = _slicedToArray(_useState11, 2),
128
+ paginationTriggered = _useState12[0],
129
+ setPaginationTriggered = _useState12[1];
130
+ var _useState13 = (0, _react.useState)(false),
131
+ _useState14 = _slicedToArray(_useState13, 2),
132
+ apiError = _useState14[0],
133
+ setApiError = _useState14[1];
134
+ var _useState15 = (0, _react.useState)(),
135
+ _useState16 = _slicedToArray(_useState15, 2),
136
+ apiErrorMessage = _useState16[0],
137
+ setApiErrorMessage = _useState16[1];
138
+ var prevParamsRef = (0, _react.useRef)();
139
+ var prevPageNo = (0, _usePrevious.usePrevious)(page);
140
+ // const [newRecords, setNewRecords] = useState([]);
141
+
142
+ var _requestKeys$apiInfo = _objectSpread(_objectSpread({}, requestKeys), apiInfo),
143
+ sortByKey = _requestKeys$apiInfo.sortBy,
144
+ sortOrderKey = _requestKeys$apiInfo.sortOrder,
145
+ ASCEnum = _requestKeys$apiInfo.sortASC,
146
+ DSCEnum = _requestKeys$apiInfo.sortDSC;
147
+ var requestParams = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, requestParam), searchQuery && _defineProperty({}, searchBy, searchQuery)), sortBy && _defineProperty({}, sortByKey, sortBy)), sortOrder && _defineProperty({}, sortOrderKey, sortOrder === "DSC" ? DSCEnum : ASCEnum)), {}, _defineProperty(_defineProperty({}, pageNoKey, page !== prevPageNo ? page : 1), perPageKey, perPage));
148
+ var NewRequestParams = _react["default"].useMemo(function () {
149
+ if (prevParamsRef.current && (0, _lodash["default"])(prevParamsRef.current, requestParam)) {
150
+ return prevParamsRef.current;
151
+ } else {
152
+ prevParamsRef.current = requestParam;
153
+ return requestParam;
154
+ }
155
+ }, [requestParam]);
156
+ var onAllSelectionChange = function onAllSelectionChange(row, selected) {
157
+ var newSelectedData = "";
158
+ if (selected) {
159
+ newSelectedData = [].concat(_toConsumableArray(selectedData), _toConsumableArray(data.filter(function (item) {
160
+ return !selectedData.some(function (selectedItem) {
161
+ return selectedItem.id === item.id;
162
+ });
163
+ })));
164
+ } else {
165
+ newSelectedData = selectedData.filter(function (selectedItem) {
166
+ return !data.some(function (item) {
167
+ return item.id === selectedItem.id;
168
+ });
169
+ });
170
+ }
171
+ setSelectedData(newSelectedData);
172
+ setSelectedRow(newSelectedData);
173
+ };
174
+
175
+ // const clientPaginate = (array, pageSize, page, facet) => {
176
+ // const totalRows = array.length;
177
+ // setTotalRows(totalRows);
178
+ // const pages = [];
179
+ // for (let i = 0; i < array.length; i += pageSize) {
180
+ // pages.push(array.slice(i, i + pageSize));
181
+ // }
182
+ // if (page < 1) page = 1;
183
+ // if (page > pages.length) page = pages.length;
184
+
185
+ // return pages[page - 1];
186
+ // };
187
+
188
+ var fetchData = function fetchData() {
189
+ // if (paginationType === "CLIENT") {
190
+ // setNewRecords(clientPaginate(records, perPage, page, facet));
191
+ // }
192
+
193
+ if (paginationType === "SERVER") {
194
+ setLoading(true);
195
+ var def = _dataLoader["default"].getRequestDef({
196
+ requestId: requestId,
197
+ params: requestParams,
198
+ urlParams: getUrlParams() || {}
199
+ });
200
+ def.done(function () {
201
+ var _apiResponse;
202
+ var response = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
203
+ var apiResponse = response;
204
+ if (((_apiResponse = apiResponse) === null || _apiResponse === void 0 || (_apiResponse = _apiResponse.errors) === null || _apiResponse === void 0 ? void 0 : _apiResponse.length) > 0) {
205
+ setApiErrorMessage("Something went wrong");
206
+ setApiError(true);
207
+ setLoading(false);
208
+ return;
209
+ }
210
+ if (typeof responseFormatter === "function") {
211
+ apiResponse = responseFormatter(response);
212
+ }
213
+ var _apiResponse2 = apiResponse,
214
+ entries = _apiResponse2.entries,
215
+ total = _apiResponse2.total;
216
+ entries = entries || [];
217
+ setData(entries);
218
+ setTotalRows(total);
219
+ setLoading(false);
220
+ });
221
+ def["catch"](function (error) {
222
+ onApiError && onApiError(error);
223
+ setApiErrorMessage("Something went wrong");
224
+ setApiError(true);
225
+ setLoading(false);
226
+ });
227
+ }
228
+ };
229
+ (0, _react.useEffect)(function () {
230
+ fetchData();
231
+ setPage(page !== prevPageNo ? page : 1);
232
+ setPaginationTriggered(false);
233
+ }, [perPage, searchQuery, NewRequestParams, refreshData]);
234
+ var columnConfigsWithCheckbox = _react["default"].useMemo(function () {
235
+ if (showSelectableRows) {
236
+ return [{
237
+ name: /*#__PURE__*/_react["default"].createElement(CheckBoxRow, {
238
+ selected: data.length > 0 && data.every(function (row) {
239
+ return selectedData.some(function (selectedItem) {
240
+ return selectedItem.id === row.id;
241
+ });
242
+ }),
243
+ onSelectionChange: onAllSelectionChange
244
+ }),
245
+ width: "50px",
246
+ height: "60px",
247
+ cell: function cell(row) {
248
+ return /*#__PURE__*/_react["default"].createElement("div", {
249
+ className: "tbl-content"
250
+ }, /*#__PURE__*/_react["default"].createElement(CheckBoxRow, {
251
+ isCell: true,
252
+ selected: selectedData.some(function (item) {
253
+ return item.id === row.id;
254
+ }),
255
+ onSelectionChange: onRowSelectionChange,
256
+ row: row
257
+ }));
258
+ }
259
+ }].concat(_toConsumableArray(columnConfigs));
260
+ }
261
+ return columnConfigs;
262
+ }, [data, selectedData, columnConfigs, showSelectableRows, clearData, requestParam.refreshCount]);
263
+ (0, _react.useEffect)(function () {
264
+ if (showSelectableRows) {
265
+ setSelectedData([]);
266
+ setSelectedRow([]);
267
+ }
268
+ }, [requestParam.refreshCount]);
269
+ (0, _react.useEffect)(function () {
270
+ if (paginationTriggered) {
271
+ fetchData();
272
+ }
273
+ }, [page]);
274
+ var handlePageChange = function handlePageChange(newPage) {
275
+ if (newPage !== prevPageNo) {
276
+ setPaginationTriggered(true);
277
+ setPage(newPage);
278
+ onPageChangeCB && onPageChangeCB(newPage);
279
+ //updateStateMachine("PAGE_NO", { [SM_PAGE_PARAM]: newPage });
280
+ }
281
+ };
282
+ var onRowSelectionChange = function onRowSelectionChange(row, selected) {
283
+ var selectedRows = selected ? [].concat(_toConsumableArray(selectedData), [row]) : selectedData.filter(function (item) {
284
+ return item.id !== row.id;
285
+ });
286
+ setSelectedData(selectedRows);
287
+ setSelectedRow(selectedRows);
288
+ };
289
+ var handlePerRowsChange = function handlePerRowsChange(newPerPage, page) {
290
+ setLoading(true);
291
+ setPerPage(newPerPage);
292
+ setPage(1);
293
+ setLoading(false);
294
+ onRowsPerPageChangeCB && onRowsPerPageChangeCB(newPerPage);
295
+ // updateStateMachine("COUNT", { [SM_ROWS_PER_PAGE_PARAM]: newPerPage });
296
+ // updateStateMachine("PAGE_NO", { [SM_PAGE_PARAM]: 1 });
297
+ };
298
+ (0, _react.useEffect)(function () {
299
+ if (clearData) {
300
+ setSelectedData([]);
301
+ }
302
+ }, [clearData]);
303
+ return /*#__PURE__*/_react["default"].createElement(_BaseTable["default"], _extends({
304
+ columns: showSelectableRows ? columnConfigsWithCheckbox : columnConfigs,
305
+ data: isServerPagination ? data : records,
306
+ progressPending: isServerPagination && loading,
307
+ pagination: pagination,
308
+ paginationServer: isServerPagination,
309
+ paginationPerPage: perPage,
310
+ paginationTotalRows: totalRows,
311
+ progressComponent: CustomLoading ? /*#__PURE__*/_react["default"].createElement(CustomLoading, {
312
+ columns: columnConfigs,
313
+ expandableRows: expandableRows,
314
+ selectableRows: selectableRows || showSelectableRows
315
+ }) : /*#__PURE__*/_react["default"].createElement("div", null, "Loading..."),
316
+ onChangeRowsPerPage: handlePerRowsChange,
317
+ onChangePage: handlePageChange,
318
+ noDataComponent: apiError ? CustomAPIErrorComponent ? /*#__PURE__*/_react["default"].createElement(CustomAPIErrorComponent, {
319
+ status: apiErrorMessage
320
+ }) : /*#__PURE__*/_react["default"].createElement("div", null, "Error") : CustomNoDataComponent ? /*#__PURE__*/_react["default"].createElement(CustomNoDataComponent, {
321
+ description: noDataDescription,
322
+ heading: noDataHeading
323
+ }) : /*#__PURE__*/_react["default"].createElement("div", null, "No Data"),
324
+ paginationDefaultPage: page,
325
+ className: "".concat(customClassName, " nutana-table ").concat(isServerPagination ? 'pagination' : 'no-pagination', " ").concat(isFirstColumnSticky ? 'first-clm-sticky' : '', " ").concat(isLastColumnSticky ? 'last-clm-sticky' : '', " ").concat(expandableRows ? 'expandable-rows' : ''),
326
+ paginationRowsPerPageOptions: paginationRowsPerPageOptions,
327
+ paginationResetDefaultPage: true,
328
+ sortServer: true,
329
+ selectedData: selectedData,
330
+ expandableRows: expandableRows,
331
+ selectableRows: selectableRows
332
+ }, restProps));
333
+ };
334
+ TableChild.propTypes = {
335
+ records: _propTypes["default"].array,
336
+ columnConfigs: _propTypes["default"].array,
337
+ paginationType: _propTypes["default"].oneOf(["", "CLIENT", "SERVER"]),
338
+ sortOrder: _propTypes["default"].string,
339
+ apiInfo: _propTypes["default"].shape({
340
+ pageNoKey: _propTypes["default"].string,
341
+ perPageKey: _propTypes["default"].string,
342
+ searchBy: _propTypes["default"].string,
343
+ getUrlParams: _propTypes["default"].func,
344
+ requestId: _propTypes["default"].string,
345
+ responseFormatter: _propTypes["default"].func,
346
+ requestParam: _propTypes["default"].object,
347
+ sortBy: _propTypes["default"].string
348
+ }),
349
+ onApiError: _propTypes["default"].func,
350
+ noDataDescription: _propTypes["default"].string,
351
+ noDataHeading: _propTypes["default"].string,
352
+ customClassName: _propTypes["default"].string,
353
+ pagination: _propTypes["default"].bool,
354
+ refreshData: _propTypes["default"].bool,
355
+ showSelectableRows: _propTypes["default"].bool,
356
+ setSelectedRow: _propTypes["default"].func,
357
+ clearData: _propTypes["default"].bool,
358
+ expandableRows: _propTypes["default"].bool,
359
+ selectableRows: _propTypes["default"].bool,
360
+ CustomLoading: _propTypes["default"].func,
361
+ CustomNoDataComponent: _propTypes["default"].func,
362
+ CustomAPIErrorComponent: _propTypes["default"].func,
363
+ CheckBoxRow: _propTypes["default"].func
364
+ };
365
+ TableChild.defaultProps = {
366
+ records: [],
367
+ columnConfigs: [],
368
+ paginationType: "",
369
+ sortOrder: "",
370
+ apiInfo: {},
371
+ noDataDescription: "",
372
+ noDataHeading: "",
373
+ customClassName: "",
374
+ pagination: true,
375
+ clearData: false,
376
+ expandableRows: false,
377
+ selectableRows: false
378
+ };
379
+ var _default = exports["default"] = TableChild;
@@ -0,0 +1,15 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.SM_ROWS_PER_PAGE_PARAM = exports.SM_PAGE_PARAM = exports.REQUEST_KEYS = void 0;
7
+ var SM_PAGE_PARAM = exports.SM_PAGE_PARAM = "page";
8
+ var SM_ROWS_PER_PAGE_PARAM = exports.SM_ROWS_PER_PAGE_PARAM = "count";
9
+ var REQUEST_KEYS = exports.REQUEST_KEYS = {
10
+ searchBy: "search",
11
+ sortBy: "sortBy",
12
+ sortOrder: "sortOrder",
13
+ sortASC: "ASC",
14
+ sortDSC: "DSC"
15
+ };
@@ -0,0 +1,14 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.usePrevious = void 0;
7
+ var _react = require("react");
8
+ var usePrevious = exports.usePrevious = function usePrevious(value) {
9
+ var ref = (0, _react.useRef)();
10
+ (0, _react.useEffect)(function () {
11
+ ref.current = value;
12
+ }, [value]);
13
+ return ref.current;
14
+ };
@@ -9,8 +9,21 @@ Object.defineProperty(exports, "PaginationComponent", {
9
9
  return _PaginationComponent["default"];
10
10
  }
11
11
  });
12
+ Object.defineProperty(exports, "Table", {
13
+ enumerable: true,
14
+ get: function get() {
15
+ return _Table["default"];
16
+ }
17
+ });
12
18
  exports["default"] = void 0;
19
+ Object.defineProperty(exports, "usePrevious", {
20
+ enumerable: true,
21
+ get: function get() {
22
+ return _usePrevious.usePrevious;
23
+ }
24
+ });
13
25
  var _Table = _interopRequireDefault(require("./Table"));
26
+ var _usePrevious = require("./hooks/usePrevious");
14
27
  var _PaginationComponent = _interopRequireDefault(require("./PaginationComponent"));
15
28
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
16
29
  var _default = exports["default"] = _Table["default"];
@@ -1 +1 @@
1
- .RCB-table{border-collapse:collapse;width:100%}.RCB-th.RCB-expand-column{width:50px}.RCB-th-sortable{cursor:pointer}.RCB-th-sort:after{content:"\2B0D"}.RCB-th-asc:after{content:"\25B2"}.RCB-th-dsc:after{content:"\25BC"}.RCB-tr .expand-open:before{content:"▼"}.RCB-tr .expand-close:before{content:"▶"}.RCB-paginate-wrapper .RCB-per-page-count{display:inline-block}.RCB-paginate-wrapper .RCB-form-el-cont{margin:0}.RCB-paginate-wrapper .RCB-inline-modal-btn{background:transparent;padding:0}.RCB-paginate-nav{display:inline-block;border-radius:12px;border:solid 1px #8399ae;background-color:#f6f7f9;vertical-align:middle;margin-left:15px;overflow:hidden}.RCB-page-nav{padding:0 5px;text-decoration:none;color:inherit}.RCB-page-nav:first-child{border-right:solid 1px #8399ae}.RCB-page-nav.disabled{color:#ccc;pointer-events:none;cursor:not-allowed}.RCB-no-data{text-align:center}
1
+ .RCB-table{border-collapse:collapse;width:100%}.RCB-th.RCB-expand-column{width:50px}.RCB-th-sortable{cursor:pointer}.RCB-th-sort:after{content:"\2B0D"}.RCB-th-asc:after{content:"\25B2"}.RCB-th-dsc:after{content:"\25BC"}.RCB-tr .expand-open:before{content:"▼"}.RCB-tr .expand-close:before{content:"▶"}.RCB-paginate-wrapper .RCB-per-page-count{display:inline-block}.RCB-paginate-wrapper .RCB-form-el-cont{margin:0}.RCB-paginate-wrapper .RCB-inline-modal-btn{background:transparent;padding:0}.RCB-paginate-nav{display:inline-block;border-radius:12px;border:solid 1px #8399ae;background-color:#f6f7f9;vertical-align:middle;margin-left:15px;overflow:hidden}.RCB-page-nav{padding:0 5px;text-decoration:none;color:inherit}.RCB-page-nav:first-child{border-right:solid 1px #8399ae}.RCB-page-nav.disabled{color:#ccc;pointer-events:none;cursor:not-allowed}.RCB-no-data{text-align:center}.nutana-table{font-family:Nunito Sans, Helvetica Neue, Helvetica, Roboto, "sans-serif";letter-spacing:0.42px;max-height:unset !important;min-height:unset !important;overflow:inherit !important;z-index:20}.nutana-table .rdt_TableRow{border-bottom-color:#DDE2EE !important}.nutana-table .rdt_TableRow:hover{background-color:#F4F8FF}.nutana-table .rdt_TableRow:hover .readable{color:#3E71F2;cursor:pointer}.nutana-table .rdt_TableRow:hover .view-one{background-color:#F4F8FF}.nutana-table .rdt_TableRow:hover .view-one .no-metric-wrap{background-color:#F4F8FF !important}.nutana-table .rdt_TableRow:hover .rdt_TableCell:first-child,.nutana-table .rdt_TableRow:hover [aria-label="Expand Row"]{box-shadow:inset 3px 0px 0px 0px #3E71F2}.nutana-table .rdt_TableRow .rdt_TableCell{padding:0;border-right:unset}.nutana-table .rdt_TableRow .rdt_TableCell:first-child{border-left:1px solid #DDE2EE}.nutana-table .rdt_TableRow .rdt_TableCell:last-child{border-right:1px solid #DDE2EE}.nutana-table.first-clm-sticky{overflow-x:auto;overflow-y:hidden}.nutana-table.first-clm-sticky .rdt_TableRow .rdt_TableCell:first-child{background:white;border-right:1px solid #dde2ee;box-shadow:5px 10px 15px 0px #17173A14;position:sticky;left:0;z-index:9}.nutana-table.first-clm-sticky .rdt_TableRow:hover .rdt_TableCell:first-child{background-color:#F4F8FF}.nutana-table.first-clm-sticky .rdt_TableHeadRow .rdt_TableCol:first-child{background:white;border-right:1px solid #dde2ee;position:sticky;left:0;z-index:9}.nutana-table.last-clm-sticky{overflow-x:auto;overflow-y:hidden}.nutana-table.last-clm-sticky .rdt_TableRow .rdt_TableCell:last-child{background:white;border-left:1px solid #dde2ee;box-shadow:-5px 10px 15px 0px #17173A14;position:sticky;left:unset;right:0;z-index:9}.nutana-table.last-clm-sticky .rdt_TableRow:hover .rdt_TableCell:last-child{background-color:#F4F8FF}.nutana-table.last-clm-sticky .rdt_TableHeadRow .rdt_TableCol:last-child{background:white;border-left:1px solid #dde2ee;position:sticky;left:unset;right:0;z-index:9}.nutana-table .tbl-content{padding:18px 24px;width:100%}.nutana-table .header-title{color:#17173A;display:inline;font-weight:600;font-size:16px;text-transform:capitalize}.nutana-table .tbl-title-1{color:#17173A;font-size:16px;font-weight:600;margin-bottom:14px}.nutana-table .tbl-title-2{color:#17173A;font-size:14px;font-weight:600}.nutana-table .tbl-title-3{color:#17173A;font-size:12px;font-weight:600}.nutana-table .tbl-desc-1{color:#6F6F8D;font-size:16px;font-weight:600;margin-bottom:14px}.nutana-table .tbl-desc-2{color:#6F6F8D;font-size:14px;font-weight:600;margin-bottom:14px}.nutana-table .tbl-desc-3{color:#6F6F8D;font-size:12px;font-weight:600;letter-spacing:.42px}.nutana-table .rdt_TableHeadRow{box-shadow:0px 5px 15px 0px #17173A14;border-color:#DDE2EE;z-index:10}.nutana-table .rdt_TableHeadRow .rdt_TableCol:first-child{border-right:unset;border-left:1px solid #dde2ee;border-top:1px solid #dde2ee;border-top-left-radius:8px;margin:0}.nutana-table .rdt_TableHeadRow .rdt_TableCol{border-right:unset;border-color:#DDE2EE;padding:16px 24px}.nutana-table .rdt_TableHeadRow .rdt_TableCol:last-child{border-right:1px solid #DDE2EE;border-top-right-radius:8px}.nutana-table .rdt_TableCol_Sortable [data-column-id]{color:#17173a;display:inline;font-size:16px;font-weight:600;text-transform:capitalize}.nutana-table .rdt_TableCol_Sortable .status-col-tooltip{vertical-align:middle}.nutana-table .rdt_TableCol_Sortable .status-col-tooltip .RCB-tooltip-btn{margin-left:5px;border:unset}.nutana-table .column-kebab-menu .RCB-inline-modal-btn{padding:0}.nutana-table .column-kebab-menu .RCB-inline-modal-body{border-radius:4px;width:max-content}.nutana-table .left-line{border-left:1px solid #dde2ee;height:20px;padding-left:12px}.nutana-table .dd-menu-item{align-items:center;cursor:pointer;color:#6F6F8D;display:flex;font-size:14px;font-weight:600;padding:12px 16px}.nutana-table .dd-menu-item:hover{box-shadow:inset 3px 0 0 0 #3E71F2;background-color:#F4F8FF;color:#17173A}.nutana-table .dd-menu-item:hover .tbl-plus-icon{background-position:-1988px -2777px}.nutana-table .dd-menu-item:hover .tbl-file-icon{background-position:-2031px -2777px}.nutana-table .dd-menu-item .menu-icon{margin-right:8px}.nutana-table .dd-menu-item.no-more-queries-disabled{color:#bfc8ce;text-decoration:none;cursor:no-drop}.nutana-table .status-btn{border:1px solid;border-radius:37px;font-size:12px;font-weight:600;letter-spacing:.42px;padding:3px 8px}.nutana-table .status-btn__active{background-color:#e9f8f3;border-color:#90DCC1;color:#00C48C}.nutana-table .status-btn__draft{background-color:#e1e8fa;border-color:#8BACFF;color:#0A8FFD}.nutana-table .status-btn__upcoming{background-color:#fff5de;border-color:#FEE199;color:#C39C5B}.nutana-table .status-btn__expired{background:#FFE6E6;border-color:#FF8484;color:#F05C5C}.nutana-table .status-btn__stopped{background:#EFEFEF;border-color:#A0A0A0;color:#6F6F8D}.nutana-table .status-btns{margin-bottom:0}.nutana-table .merch-rule-type{border:1px solid #dae1e9;border-radius:12px;background-color:#ffffff;color:#687f8f;font-size:10px;padding:4px 9px}.nutana-table .campaign-type-icon span:first-of-type:before{content:"";margin-right:2px}.nutana-table .vertical-menu-icon{background-position:-1946px -2744px;height:18px;transform:scale(1.3);width:18px}.nutana-table .vertical-menu-icon:hover{background-position:-1946px -2778px}.nutana-table .right-triangle-icon{background-position:-1857px -2745px;height:20px;transform:scale(1);width:20px}.nutana-table .delete-text{color:#F05C5C}.nutana-table .loading-anim-wrap{padding:18px 24px;width:100%}.nutana-table .global{align-items:center;color:#3E71F2;text-transform:capitalize}.nutana-table .global .glob-icon{margin-right:3px;margin-left:-2px}.nutana-table .meta-info-bg{background-color:#F4F8FF;border-radius:6px;padding:16px;width:fit-content}.nutana-table .mb-5{margin-bottom:5px}.nutana-table .mb-0{margin-bottom:0}.nutana-table .mb-3{margin-bottom:3px}.nutana-table .mt-2{margin-top:2px}.nutana-table .pl-3{padding-left:3px}.nutana-table .pl-10{padding-left:10px}.RCB-table{font-size:14px}.RCB-table thead{border:1px solid #DADFE6}.RCB-table th{color:#FFF;background-color:#5C7185;padding:10px 8px;text-align:left}.RCB-table .RCB-tr{height:41px}.RCB-table td{padding:6px;background-color:#FFF;border-bottom:1px solid #E8EDEF}.RCB-table .RCB-form-el-cont{margin:0}.RCB-th-sortable:after{content:" ";margin-left:7px}.RCB-paginate-bar{color:#445870;font-size:14px;padding:7px 18px;border:1px solid #DADFE6;border-radius:7px 7px 0 0;background-color:#eef2fc}.RCB-paginate-bar .RCB-dropdown .RCB-inline-modal{border:none}.RCB-paginate-bar .RCB-inline-modal-btn{background:transparent;padding:0}.rdt_Pagination{border-color:#DDE2EE !important;border-bottom-left-radius:8px;border-bottom-right-radius:8px}