ods-component-lib 1.18.53 → 1.18.55

package/dist/index.modern.js

@@ -16,7 +16,7 @@ import jsPDF from 'jspdf';
 import { Workbook } from 'exceljs';
 import { saveAs } from 'file-saver-es';
 import moment from 'moment';
-import { GridIcon, EditIcon, Trash1Icon, CopyIcon, DiscountIcon, KebabMenuIcon, RefreshIcon } from 'ods-icon/react/24/outline';
+import { GridIcon, EditIcon, Trash1Icon, CopyIcon, DiscountIcon, KebabMenuIcon, RefreshIcon, LinkBreakIcon, FloppyDiskIcon, Loop1Icon } from 'ods-icon/react/24/outline';
 import { TreeList, DropDownButton, Lookup } from 'devextreme-react';
 
 function _extends() {
@@ -16285,80 +16285,16 @@ function debounce(func, wait, options) {
 
 var debounce_1 = debounce;
 
-/** Error message constants. */
-var FUNC_ERROR_TEXT$1 = 'Expected a function';
-
-/**
- * Creates a throttled function that only invokes `func` at most once per
- * every `wait` milliseconds. The throttled function comes with a `cancel`
- * method to cancel delayed `func` invocations and a `flush` method to
- * immediately invoke them. Provide `options` to indicate whether `func`
- * should be invoked on the leading and/or trailing edge of the `wait`
- * timeout. The `func` is invoked with the last arguments provided to the
- * throttled function. Subsequent calls to the throttled function return the
- * result of the last `func` invocation.
- *
- * **Note:** If `leading` and `trailing` options are `true`, `func` is
- * invoked on the trailing edge of the timeout only if the throttled function
- * is invoked more than once during the `wait` timeout.
- *
- * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
- * until to the next tick, similar to `setTimeout` with a timeout of `0`.
- *
- * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
- * for details over the differences between `_.throttle` and `_.debounce`.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Function
- * @param {Function} func The function to throttle.
- * @param {number} [wait=0] The number of milliseconds to throttle invocations to.
- * @param {Object} [options={}] The options object.
- * @param {boolean} [options.leading=true]
- *  Specify invoking on the leading edge of the timeout.
- * @param {boolean} [options.trailing=true]
- *  Specify invoking on the trailing edge of the timeout.
- * @returns {Function} Returns the new throttled function.
- * @example
- *
- * // Avoid excessively updating the position while scrolling.
- * jQuery(window).on('scroll', _.throttle(updatePosition, 100));
- *
- * // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.
- * var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
- * jQuery(element).on('click', throttled);
- *
- * // Cancel the trailing throttled invocation.
- * jQuery(window).on('popstate', throttled.cancel);
- */
-function throttle(func, wait, options) {
-  var leading = true,
-      trailing = true;
-
-  if (typeof func != 'function') {
-    throw new TypeError(FUNC_ERROR_TEXT$1);
-  }
-  if (isObject_1(options)) {
-    leading = 'leading' in options ? !!options.leading : leading;
-    trailing = 'trailing' in options ? !!options.trailing : trailing;
-  }
-  return debounce_1(func, wait, {
-    'leading': leading,
-    'maxWait': wait,
-    'trailing': trailing
-  });
-}
-
-var throttle_1 = throttle;
-
 var iconComponents = {
   edit: EditIcon,
   "delete": Trash1Icon,
   copy: CopyIcon,
   discount: DiscountIcon,
   kebabMenu: KebabMenuIcon,
-  refresh: RefreshIcon
+  refresh: RefreshIcon,
+  unmap: LinkBreakIcon,
+  save: FloppyDiskIcon,
+  cancel: Loop1Icon
 };
 var DynamicIcon = function DynamicIcon(_ref) {
   var iconName = _ref.iconName;
@@ -16381,20 +16317,13 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
   var _useState = useState([]),
     data = _useState[0],
     setData = _useState[1];
-  var _useState2 = useState(false),
-    isLoading = _useState2[0],
-    setIsLoading = _useState2[1];
   var fileName = props.exportFileName ? props.exportFileName + moment().format("YYYYMMDD") : "DatagridExportFile" + moment().format("YYYYMMDD");
-  var _useState3 = useState(0),
-    filteredRowCount = _useState3[0],
-    setFilteredRowCount = _useState3[1];
-  var _useState4 = useState(props.columns),
-    columns = _useState4[0],
-    setColumns = _useState4[1];
+  var _useState2 = useState(0),
+    filteredRowCount = _useState2[0],
+    setFilteredRowCount = _useState2[1];
+  var columns = useRef(props.columns);
   var gridRef = useRef(null);
-  var _useState5 = useState(false),
-    filterApplied = _useState5[0],
-    setFilterApplied = _useState5[1];
+  var filterApplied = useRef(false);
   var onCancelEditEvent = new CustomEvent('cancelEdit', {
     bubbles: true,
     detail: {
@@ -16422,13 +16351,8 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
     }
   }, [(_props$axiosRequest2 = props.axiosRequest) === null || _props$axiosRequest2 === void 0 ? void 0 : _props$axiosRequest2.requestData]);
   useEffect(function () {
-    if (props.ref !== undefined) {
-      gridRef = props.ref;
-    }
-  }, [props.ref]);
-  useEffect(function () {
-    if (columns !== undefined && columns.length > 0) {
-      var newColumns = columns.map(function (colItem) {
+    if (columns.current !== undefined && columns.current.length > 0) {
+      var newColumns = columns.current.map(function (colItem) {
         if (colItem.tooltip !== undefined && colItem.tooltip.enable) {
           var headerCellRenderr = function headerCellRenderr() {
             return React.createElement("div", null, React.createElement("span", null, colItem.caption), React.createElement(Tooltip, {
@@ -16443,7 +16367,7 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
         }
         return colItem;
       });
-      setColumns(newColumns);
+      columns.current = newColumns;
     }
   }, [props.columns]);
   useEffect(function () {
@@ -16483,7 +16407,6 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
   var fetchData = useCallback(function () {
     try {
       if (props.axiosRequest == undefined) return Promise.resolve();
-      setIsLoading(true);
       var _temp2 = function () {
         if (props.isServerSide) {
           var apiUrl = props.axiosRequest.environmentUrl + "" + props.axiosRequest.apiUrl;
@@ -16555,30 +16478,20 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
   }, [props.isServerSide]);
   var getServerSide = useCallback(function (type) {
     try {
-      var run = throttle_1(function (type) {
-        try {
-          return Promise.resolve(function () {
-            if (type === "reachedBottom") {
-              return function () {
-                if (totalPageCount <= loadedPageCount) {} else {
-                  loadedPageCount = loadedPageCount + 1;
-                  return Promise.resolve(fetchData()).then(function () {});
-                }
-              }();
+      return Promise.resolve(function () {
+        if (type === "reachedBottom") {
+          return function () {
+            if (totalPageCount <= loadedPageCount) {} else {
+              loadedPageCount = loadedPageCount + 1;
+              return Promise.resolve(fetchData()).then(function () {});
             }
-          }());
-        } catch (e) {
-          return Promise.reject(e);
+          }();
         }
-      }, 5000, {
-        trailing: false
-      });
-      run(type);
-      return Promise.resolve();
+      }());
     } catch (e) {
       return Promise.reject(e);
     }
-  }, [totalPageCount, loadedPageCount, fetchData]);
+  }, [totalPageCount]);
   var onExporting = useCallback(function (e) {
     if (e.format === 'xlsx') {
       var workbook = new Workbook();
@@ -16682,9 +16595,9 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
       result = result + " - " + props.customSummary.summaryTotalPageCountLabel + "  " + loadedPageCount + " / " + totalPageCount;
     }
     return result;
-  }, [data, filteredRowCount, loadedPageCount, props.pageSize, totalRecordCount, filterApplied]);
+  }, [data, filteredRowCount, loadedPageCount, props.pageSize, totalRecordCount, filterApplied.current]);
   var concatFilteredLabel = function concatFilteredLabel(result, totalloaded) {
-    if (filteredRowCount > 0 && totalloaded !== filteredRowCount && filterApplied) {
+    if (filteredRowCount > 0 && totalloaded !== filteredRowCount && filterApplied.current) {
       var filteredLabel = filteredRowCount + " " + props.customSummary.summaryFilteredDataLabel + "- ";
       result = filteredLabel + " " + result + "     ";
     }
@@ -16734,10 +16647,13 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
   var handleContentReady = function handleContentReady(e) {
     var dataGridInstance = e.component;
     var filteredDataCount = dataGridInstance.totalCount();
-    setFilteredRowCount(filteredDataCount);
+    if (filterApplied.current && filteredDataCount > 0) setFilteredRowCount(filteredDataCount);
   };
   var onFilterValueChange = function onFilterValueChange(e) {
-    if (e !== null) setFilterApplied(true);else setFilterApplied(false);
+    if (e !== null) filterApplied.current = true;else {
+      filterApplied.current = false;
+      setFilteredRowCount(0);
+    }
   };
   return React.createElement(React.Fragment, null, React.createElement(DataGrid$1, {
     keyExpr: props.keyExpr,
@@ -16775,7 +16691,7 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
     onEditCanceling: props.onEditCanceling,
     onContentReady: handleContentReady,
     onFilterValueChange: onFilterValueChange
-  }, columns.map(function (col) {
+  }, columns.current.map(function (col) {
     return React.createElement(Column, Object.assign({
       key: col.dataField
     }, col, {
@@ -16802,8 +16718,21 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
     caption: props.actionButtonGroupCaption,
     type: "buttons",
     showInColumnChooser: false
-  }, !props.edit && actionButtons.map(function (buttonItem) {
+  }, !props.edit && actionButtons.map(function (buttonItem, index) {
     return React.createElement(Button$1, {
+      key: "action-button-" + index,
+      hint: buttonItem.hint,
+      visible: buttonItem.visible,
+      disabled: buttonItem.actionPermission == undefined ? false : !buttonItem.actionPermission,
+      icon: server_browser.renderToString(React.createElement(DynamicIcon, {
+        iconName: buttonItem.icon
+      })),
+      onClick: buttonItem.onClick
+    });
+  }), props.edit && actionButtons.map(function (buttonItem, index) {
+    return React.createElement(Button$1, {
+      key: "action-button-" + index,
+      name: buttonItem.name,
       hint: buttonItem.hint,
       visible: buttonItem.visible,
       disabled: buttonItem.actionPermission == undefined ? false : !buttonItem.actionPermission,
@@ -16812,8 +16741,6 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
       })),
       onClick: buttonItem.onClick
     });
-  }), props.edit && actionButtons.map(function (buttonItem) {
-    return React.createElement(Button$1, Object.assign({}, buttonItem));
   })), kebabMenuButtons.length > 0 && React.createElement(Column, {
     dataField: "Actionss",
     fixed: true,
@@ -16860,7 +16787,7 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
     scrollByThumb: true,
     mode: "infinite"
   }), React.createElement(LoadPanel, {
-    enabled: isLoading,
+    enabled: true,
     shadingColor: "rgba(0,0,0,0.4)"
   }), React.createElement(SearchPanel, {
     visible: true
@@ -16906,8 +16833,9 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
       alignSelf: "stretch",
       margin: 0
     }
-  }, props.pageTitle)), props.toolbarButtonGroup && Array.isArray(props.toolbarButtonGroup) && props.toolbarButtonGroup.map(function (buttonGroupItem) {
+  }, props.pageTitle)), props.toolbarButtonGroup && Array.isArray(props.toolbarButtonGroup) && props.toolbarButtonGroup.map(function (buttonGroupItem, index) {
     return React.createElement(Item$1, {
+      key: "toolbar-button-" + index,
       location: "before"
     }, React.createElement(OdsButton, {
       style: {
@@ -16924,11 +16852,12 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
   }), React.createElement(Item$1, {
     name: "exportButton",
     cssClass: 'toolbarPanelItems'
-  })), React.createElement(Summary, null, React.createElement(TotalItem, {
-    column: columns[0].dataField,
+  })), React.createElement(Summary, {
+    calculateCustomSummary: renderTotal
+  }, React.createElement(TotalItem, {
+    column: columns.current[0].dataField,
     summaryType: "custom",
-    displayFormat: "customizeText",
-    customizeText: renderTotal
+    displayFormat: renderTotal()
   })), React.createElement(StateStoring, {
     enabled: true,
     type: "custom",