@unbxd-ui/unbxd-react-components 0.2.119 → 0.2.121

package/components/Form/ServerPaginatedDDList.js

@@ -11,7 +11,7 @@ var _reactWindow = require("react-window");
 var _reactWindowInfiniteLoader = _interopRequireDefault(require("react-window-infinite-loader"));
 var _dataLoader = _interopRequireDefault(require("../../core/dataLoader"));
 var _utils = _interopRequireDefault(require("../../core/utils"));
-var _excluded = ["selectedItems", "selectItem", "idAttribute", "nameAttribute", "DropdownItem", "requestId", "requestParams", "responseFormatter", "pageNoKey", "perPageKey", "pageSize", "maxHeight", "searchAttribute", "searchQuery", "getUrlParams", "serverListClassName", "ddItemHeight", "minPageNo", "delay", "loadImmediately", "showClippedContentTitle", "abortPrevious", "LoaderComponent"];
+var _excluded = ["selectedItems", "selectItem", "idAttribute", "nameAttribute", "DropdownItem", "requestId", "requestParams", "responseFormatter", "pageNoKey", "perPageKey", "pageSize", "maxHeight", "searchAttribute", "searchQuery", "getUrlParams", "serverListClassName", "ddItemHeight", "minPageNo", "delay", "loadImmediately", "showClippedContentTitle", "LoaderComponent"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 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); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -93,8 +93,6 @@ var ServerPaginatedDDList = function ServerPaginatedDDList(props) {
     _props$loadImmediatel = props.loadImmediately,
     loadImmediately = _props$loadImmediatel === void 0 ? true : _props$loadImmediatel,
     showClippedContentTitle = props.showClippedContentTitle,
-    _props$abortPrevious = props.abortPrevious,
-    abortPrevious = _props$abortPrevious === void 0 ? false : _props$abortPrevious,
     LoaderComponent = props.LoaderComponent,
     restProps = _objectWithoutProperties(props, _excluded);
   var _useState = (0, _react.useState)([]),
@@ -117,6 +115,10 @@ var ServerPaginatedDDList = function ServerPaginatedDDList(props) {
     _useState10 = _slicedToArray(_useState9, 2),
     isNextPageLoading = _useState10[0],
     setIsNextPageLoading = _useState10[1];
+  var _useState11 = (0, _react.useState)(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    isApiLoading = _useState12[0],
+    setIsApiLoading = _useState12[1];
   var debouncedFn = (0, _react.useRef)();
   var getDefaultPageNo = function getDefaultPageNo() {
     return minPageNo !== null && minPageNo !== void 0 ? minPageNo : 1;
@@ -124,7 +126,6 @@ var ServerPaginatedDDList = function ServerPaginatedDDList(props) {
   var pageNoRef = (0, _react.useRef)(getDefaultPageNo());
   var searchRef = (0, _react.useRef)(searchQuery);
   var apiCallRef = (0, _react.useRef)(false);
-  var abortController = (0, _react.useRef)(null);
   var onDataLoaded = function onDataLoaded(response) {
     apiCallRef.current = false;
     var apiResponse = response;
@@ -154,18 +155,17 @@ var ServerPaginatedDDList = function ServerPaginatedDDList(props) {
     setTotal(total);
   };
   var makeAPICall = function makeAPICall() {
-    var _objectSpread2;
+    setIsApiLoading(true);
     apiCallRef.current = true;
-    abortController.current = new AbortController();
     setIsNextPageLoading(true);
     var def = _dataLoader["default"].getRequestDef({
       requestId: requestId,
-      params: _objectSpread(_objectSpread((_objectSpread2 = {}, _defineProperty(_objectSpread2, pageNoKey, pageNoRef.current), _defineProperty(_objectSpread2, perPageKey, pageSize), _objectSpread2), searchRef.current && _defineProperty({}, searchAttribute, searchRef.current)), requestParams),
-      urlParams: getUrlParams(),
-      signal: abortController.current.signal
+      params: _objectSpread(_objectSpread(_defineProperty(_defineProperty({}, pageNoKey, pageNoRef.current), perPageKey, pageSize), searchRef.current && _defineProperty({}, searchAttribute, searchRef.current)), requestParams),
+      urlParams: getUrlParams()
     });
     def.done(function (response) {
       onDataLoaded(response);
+      setIsApiLoading(false);
     });
     return def;
   };
@@ -175,17 +175,13 @@ var ServerPaginatedDDList = function ServerPaginatedDDList(props) {
    */
   var loadNextPage = function loadNextPage() {
     pageNoRef.current = pageNoRef.current + 1;
-    if (abortPrevious && apiCallRef.current) {
-      abortController.current.abort();
-    }
+    _dataLoader["default"].abortPreviousCall(requestId);
     return makeAPICall();
   };
   (0, _react.useEffect)(function () {
     /* not the first call */
     if (itemsResetCounter > 0) {
-      if (abortPrevious && apiCallRef.current) {
-        abortController.current.abort();
-      }
+      _dataLoader["default"].abortPreviousCall(requestId);
       makeAPICall();
     }
   }, [itemsResetCounter]);
@@ -235,7 +231,7 @@ var ServerPaginatedDDList = function ServerPaginatedDDList(props) {
     showClippedContentTitle: showClippedContentTitle
   }, restProps);
   if (total === null) {
-    if (LoaderComponent) {
+    if (LoaderComponent && isApiLoading) {
       return LoaderComponent;
     }
     return [];
@@ -274,7 +270,6 @@ var ServerPaginatedDDList = function ServerPaginatedDDList(props) {
   });
   // }
 };
-
 ServerPaginatedDDList.propTypes = {
   ddItemHeight: _propTypes["default"].number,
   LoaderComponent: _propTypes["default"].any

package/components/Table/BaseTable.js

@@ -137,7 +137,6 @@ var ExpandableTR = function ExpandableTR(props) {
 ExpandableTR.propTypes = {
   ExpandedRowComponent: _propTypes["default"].any.isRequired // TODO : check for a React Component
 };
-
 var TR = function TR(props) {
   var rowIndex = props.rowIndex,
     rowData = props.rowData,
@@ -188,7 +187,9 @@ var BaseTable = function BaseTable(props, ref) {
     ExpandedRowComponent = props.ExpandedRowComponent,
     noDataComponent = props.noDataComponent,
     sortByConfig = props.sortByConfig,
-    resetPageNo = props.resetPageNo;
+    resetPageNo = props.resetPageNo,
+    pageNo = props.pageNo,
+    tbodyClassName = props.tbodyClassName;
   var _DEFAULT_CHECKBOX_CON = _objectSpread(_objectSpread({}, DEFAULT_CHECKBOX_CONFIG), checkboxConfig || {}),
     showCheckbox = _DEFAULT_CHECKBOX_CON.enabled,
     showInHeader = _DEFAULT_CHECKBOX_CON.showInHeader;
@@ -247,7 +248,12 @@ var BaseTable = function BaseTable(props, ref) {
     };
   });
   if (records.length === 0) {
-    return noDataComponent;
+    if (pageNo === 1) {
+      return noDataComponent;
+    } else {
+      var LoaderComponent = _utils["default"].getDefaultConfig("DefaultLoader") || "";
+      return /*#__PURE__*/_react["default"].createElement(LoaderComponent, null);
+    }
   } else {
     return /*#__PURE__*/_react["default"].createElement("table", {
       className: "RCB-table ".concat(className)
@@ -289,7 +295,9 @@ var BaseTable = function BaseTable(props, ref) {
         className: className,
         key: key
       }, thAttrs), label);
-    }))), /*#__PURE__*/_react["default"].createElement("tbody", null, records.map(function (rowData, index) {
+    }))), /*#__PURE__*/_react["default"].createElement("tbody", {
+      className: tbodyClassName
+    }, records.map(function (rowData, index) {
       return /*#__PURE__*/_react["default"].createElement(RowComponent, {
         key: rowData[idAttribute],
         isEven: _utils["default"].isEven(index),

package/components/Table/Table.js

@@ -10,7 +10,7 @@ var _BaseTable = _interopRequireDefault(require("./BaseTable"));
 var _DataLoader = _interopRequireDefault(require("../DataLoader"));
 var _PaginationComponent = _interopRequireDefault(require("./PaginationComponent"));
 var _utils = _interopRequireDefault(require("../../core/utils"));
-var _excluded = ["className", "wrapperClassName", "records", "columnConfigs", "idAttribute", "searchBy", "getRequestKeys", "showPaginateBar", "paginationPosition", "paginationType", "paginationBar", "requestId", "pageNoKey", "perPageKey", "pageSizeList", "isExpandableTable", "ExpandedRowComponent", "responseFormatter", "noDataComponent", "omitProps", "getUrlParams", "getRequestParams", "checkboxConfig"];
+var _excluded = ["className", "wrapperClassName", "records", "columnConfigs", "idAttribute", "searchBy", "getRequestKeys", "showPaginateBar", "paginationPosition", "paginationType", "paginationBar", "requestId", "pageNoKey", "perPageKey", "pageSizeList", "isExpandableTable", "ExpandedRowComponent", "responseFormatter", "noDataComponent", "omitProps", "getUrlParams", "getRequestParams", "checkboxConfig", "tbodyClassName"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 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); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -99,7 +99,6 @@ var REQUEST_KEYS = exports.REQUEST_KEYS = {
   sortDSC: "DSC"
 };
 var Table = function Table(props, ref) {
-  var _objectSpread2;
   var className = props.className,
     wrapperClassName = props.wrapperClassName,
     records = props.records,
@@ -123,6 +122,7 @@ var Table = function Table(props, ref) {
     getUrlParams = props.getUrlParams,
     getRequestParams = props.getRequestParams,
     checkboxConfig = props.checkboxConfig,
+    tbodyClassName = props.tbodyClassName,
     restProps = _objectWithoutProperties(props, _excluded);
   /* variables for server data */
   var _useState = (0, _react.useState)([]),
@@ -164,7 +164,7 @@ var Table = function Table(props, ref) {
     ASCEnum = _REQUEST_KEYS$getRequ.sortASC,
     DSCEnum = _REQUEST_KEYS$getRequ.sortDSC;
   var extraParams = _utils["default"].omit(restProps, omitParams);
-  var requestParams = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, getRequestParams()), extraParams), {}, (_objectSpread2 = {}, _defineProperty(_objectSpread2, pageNoKey, pageNo), _defineProperty(_objectSpread2, perPageKey, perPageCount), _objectSpread2), searchQuery && _defineProperty({}, searchByKey, searchQuery)), sortBy && _defineProperty({}, sortByKey, sortBy)), sortOrder && _defineProperty({}, sortOrderKey, sortOrder === "DSC" ? DSCEnum : ASCEnum));
+  var requestParams = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, getRequestParams()), extraParams), {}, _defineProperty(_defineProperty({}, pageNoKey, pageNo), perPageKey, perPageCount), searchQuery && _defineProperty({}, searchByKey, searchQuery)), sortBy && _defineProperty({}, sortByKey, sortBy)), sortOrder && _defineProperty({}, sortOrderKey, sortOrder === "DSC" ? DSCEnum : ASCEnum));
   var requests = [{
     requestId: requestId,
     params: requestParams,
@@ -238,6 +238,8 @@ var Table = function Table(props, ref) {
     checkboxConfig: checkboxConfig,
     idAttribute: idAttribute,
     noDataComponent: noDataComponent,
+    pageNo: pageNo,
+    tbodyClassName: tbodyClassName,
     sortByConfig: sortByConfig,
     onSort: onSort,
     resetPageNo: resetPageNo,

package/core/dataLoader.js

@@ -34,6 +34,9 @@ var DataLoader = /*#__PURE__*/function () {
       return x;
     });
     _defineProperty(this, "_middlewares", {});
+    _defineProperty(this, "apiCallRef", false);
+    _defineProperty(this, "abortController", null);
+    _defineProperty(this, "previousUrlData", {});
   }
   _createClass(DataLoader, [{
     key: "setCommonHeaders",
@@ -99,29 +102,53 @@ var DataLoader = /*#__PURE__*/function () {
       response = typeof commonParser === "function" ? commonParser(response, requestId, headers, status) : response;
       return responseParser(response, requestId, headers, status);
     }
+  }, {
+    key: "setPreviousUrlData",
+    value: function setPreviousUrlData(url, method) {
+      this.previousUrlData = {
+        url: url,
+        method: method
+      };
+    }
+  }, {
+    key: "abortPreviousCall",
+    value: function abortPreviousCall(requestId) {
+      var requestConfig = this._requestsMap[requestId];
+      var url = requestConfig.url,
+        _requestConfig$method = requestConfig.method,
+        method = _requestConfig$method === void 0 ? "GET" : _requestConfig$method;
+      if (this.apiCallRef && this.abortController) {
+        if (this.previousUrlData.url === url && this.previousUrlData.method === method) {
+          this.abortController.abort();
+        }
+      }
+      this.apiCallRef = true;
+      this.abortController = new AbortController();
+    }
   }, {
     key: "getRequestDef",
     value: function getRequestDef(_ref) {
-      var _this = this;
+      var _this$abortController,
+        _this = this;
       var requestId = _ref.requestId,
         _ref$urlParams = _ref.urlParams,
         urlParams = _ref$urlParams === void 0 ? {} : _ref$urlParams,
         _ref$params = _ref.params,
         params = _ref$params === void 0 ? {} : _ref$params,
         _ref$headers = _ref.headers,
-        headers = _ref$headers === void 0 ? {} : _ref$headers,
-        signal = _ref.signal;
+        headers = _ref$headers === void 0 ? {} : _ref$headers;
       var requestConfig = this._requestsMap[requestId];
       var url = requestConfig.url,
-        _requestConfig$method = requestConfig.method,
-        method = _requestConfig$method === void 0 ? "GET" : _requestConfig$method;
+        _requestConfig$method2 = requestConfig.method,
+        method = _requestConfig$method2 === void 0 ? "GET" : _requestConfig$method2;
+      this.setPreviousUrlData(url, method);
       var finalRequestParams = this.getRequestParams(requestId, params);
       var requestUrl = typeof url === "function" ? url(urlParams) : url;
       var reqMethod = method.toLowerCase();
       var requestMetadata = {
         method: reqMethod === "form_post" || reqMethod === "upload" ? "post" : method,
         headers: _objectSpread(_objectSpread({}, this._commonHeaders), headers),
-        signal: signal
+        signal: (_this$abortController = this.abortController) === null || _this$abortController === void 0 ? void 0 : _this$abortController.signal
       };
       var requestHeaders = requestMetadata.headers;
       for (var header in requestHeaders) {
@@ -144,6 +171,8 @@ var DataLoader = /*#__PURE__*/function () {
       }
       return new _bluebird.Promise(function (resolve, reject) {
         return (0, _whatwgFetch.fetch)(requestUrl, requestMetadata).then(function (response) {
+          _this.apiCallRef = false;
+          _this.abortController = null;
           var status = response.status,
             statusText = response.statusText,
             headers = response.headers;
@@ -170,9 +199,13 @@ var DataLoader = /*#__PURE__*/function () {
           var headers = _ref2.headers,
             json = _ref2.json,
             status = _ref2.status;
+          _this.apiCallRef = false;
+          _this.abortController = null;
           var parsedResponse = _this.parseResponseData(requestId, json, headers, status);
           resolve(parsedResponse);
         })["catch"](function (exception) {
+          _this.apiCallRef = false;
+          _this.abortController = null;
           _this._exceptionHandler(exception);
           reject(exception);
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unbxd-ui/unbxd-react-components",
-  "version": "0.2.119",
+  "version": "0.2.121",
   "description": "React components library",
   "keywords": [
     "react components",