primereact 10.6.5 → 10.7.0

package/treetable/treetable.esm.js

@@ -156,6 +156,7 @@ var ColumnBase = ComponentBase.extend({
     body: null,
     bodyClassName: null,
     bodyStyle: null,
+    cellEditValidateOnClose: false,
     cellEditValidator: null,
     cellEditValidatorEvent: 'click',
     className: null,
@@ -349,6 +350,8 @@ var TreeTableBase = ComponentBase.extend({
     columnResizeMode: 'fit',
     contextMenuSelectionKey: null,
     currentPageReportTemplate: '({currentPage} of {totalPages})',
+    customRestoreState: null,
+    customSaveState: null,
     defaultSortOrder: 1,
     emptyMessage: null,
     expandedKeys: null,
@@ -386,6 +389,8 @@ var TreeTableBase = ComponentBase.extend({
     onSelect: null,
     onSelectionChange: null,
     onSort: null,
+    onStateRestore: null,
+    onStateSave: null,
     onToggle: null,
     onUnselect: null,
     onValueChange: null,
@@ -418,6 +423,8 @@ var TreeTableBase = ComponentBase.extend({
     sortIcon: null,
     sortMode: 'single',
     sortOrder: null,
+    stateKey: null,
+    stateStorage: null,
     stripedRows: false,
     style: null,
     tabIndex: 0,
@@ -731,8 +738,15 @@ var Checkbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   var mergeProps = useMergeProps();
   var context = React.useContext(PrimeReactContext);
   var props = CheckboxBase.getProps(inProps, context);
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    focusedState = _React$useState2[0],
+    setFocusedState = _React$useState2[1];
   var _CheckboxBase$setMeta = CheckboxBase.setMetaData({
       props: props,
+      state: {
+        focused: focusedState
+      },
       context: {
         checked: props.checked === props.trueValue,
         disabled: props.disabled
@@ -786,10 +800,12 @@ var Checkbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   };
   var _onFocus = function onFocus() {
     var _props$onFocus;
+    setFocusedState(true);
     props === null || props === void 0 || (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props);
   };
   var _onBlur = function onBlur() {
     var _props$onBlur;
+    setFocusedState(false);
     props === null || props === void 0 || (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props);
   };
   React.useImperativeHandle(ref, function () {
@@ -1469,7 +1485,6 @@ var TreeTableRow = /*#__PURE__*/React.memo(function (props) {
   }, getRowPTOptions('row'), {
     className: classNames(rowClassName, props.node.className) // #5983 must be last so all unstyled merging takes place first
   });
-
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("tr", _extends({
     ref: elementRef
   }, rowProps), cells), children);
@@ -2372,6 +2387,19 @@ var TreeTableScrollableView = /*#__PURE__*/React.memo(function (props) {
 });
 TreeTableScrollableView.displayName = 'TreeTableScrollableView';
 
+var getStorage = function getStorage(stateStorageProp) {
+  switch (stateStorageProp) {
+    case 'local':
+      return window.localStorage;
+    case 'session':
+      return window.sessionStorage;
+    case 'custom':
+      return null;
+    default:
+      throw new Error(stateStorageProp + ' is not a valid value for the state storage, supported values are "local", "session" and "custom".');
+  }
+};
+
 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; }
 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; }
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
@@ -2474,6 +2502,152 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     _useEventListener4 = _slicedToArray(_useEventListener3, 2),
     bindDocumentMouseUpListener = _useEventListener4[0],
     unbindDocumentMouseUpListener = _useEventListener4[1];
+  var isCustomStateStorage = function isCustomStateStorage() {
+    return props.stateStorage === 'custom';
+  };
+  var isStateful = function isStateful() {
+    return props.stateKey != null || isCustomStateStorage();
+  };
+  var saveState = function saveState() {
+    var state = {};
+    if (props.paginator) {
+      state.first = getFirst();
+      state.rows = getRows();
+    }
+    var sortField = getSortField();
+    if (sortField) {
+      state.sortField = sortField;
+      state.sortOrder = getSortOrder();
+    }
+    var multiSortMeta = getMultiSortMeta();
+    if (multiSortMeta) {
+      state.multiSortMeta = multiSortMeta;
+    }
+    if (hasFilter()) {
+      state.filters = getFilters();
+    }
+    if (props.reorderableColumns) {
+      state.columnOrder = columnOrderState;
+    }
+    state.expandedKeysState = expandedKeysState;
+    if (props.selectionKeys && props.onSelectionChange) {
+      state.selectionKeys = props.selectionKeys;
+    }
+    if (isCustomStateStorage()) {
+      if (props.customSaveState) {
+        props.customSaveState(state);
+      }
+    } else {
+      var storage = getStorage(props.stateStorage);
+      if (ObjectUtils.isNotEmpty(state)) {
+        storage.setItem(props.stateKey, JSON.stringify(state));
+      }
+    }
+    if (props.onStateSave) {
+      props.onStateSave(state);
+    }
+  };
+  var clearState = function clearState() {
+    var storage = getStorage(props.stateStorage);
+    if (storage && props.stateKey) {
+      storage.removeItem(props.stateKey);
+    }
+  };
+  var restoreState = function restoreState() {
+    var restoredState = {};
+    if (isCustomStateStorage()) {
+      if (props.customRestoreState) {
+        restoredState = props.customRestoreState();
+      }
+    } else {
+      var storage = getStorage(props.stateStorage);
+      var stateString = storage.getItem(props.stateKey);
+      var dateFormat = /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/;
+      var reviver = function reviver(key, value) {
+        return typeof value === 'string' && dateFormat.test(value) ? new Date(value) : value;
+      };
+      if (stateString) {
+        restoredState = JSON.parse(stateString, reviver);
+      }
+    }
+    _restoreState(restoredState);
+  };
+  var restoreTableState = function restoreTableState(restoredState) {
+    _restoreState(restoredState);
+  };
+  var _restoreState = function _restoreState() {
+    var restoredState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    if (ObjectUtils.isNotEmpty(restoredState)) {
+      if (props.paginator) {
+        if (props.onPage) {
+          var getOnPageParams = function getOnPageParams(first, rows) {
+            var totalRecords = getTotalRecords(processedData());
+            var pageCount = Math.ceil(totalRecords / rows) || 1;
+            var page = Math.floor(first / rows);
+            return {
+              first: first,
+              rows: rows,
+              page: page,
+              pageCount: pageCount
+            };
+          };
+          props.onPage(createEvent(getOnPageParams(restoredState.first, restoredState.rows)));
+        } else {
+          setFirstState(restoredState.first);
+          setRowsState(restoredState.rows);
+        }
+      }
+      if (restoredState.sortField) {
+        if (props.onSort) {
+          props.onSort(createEvent({
+            sortField: restoredState.sortField,
+            sortOrder: restoredState.sortOrder
+          }));
+        } else {
+          setSortFieldState(restoredState.sortField);
+          setSortOrderState(restoredState.sortOrder);
+        }
+      }
+      if (restoredState.multiSortMeta) {
+        if (props.onSort) {
+          props.onSort(createEvent({
+            multiSortMeta: restoredState.multiSortMeta
+          }));
+        } else {
+          setMultiSortMetaState(restoredState.multiSortMeta);
+        }
+      }
+      if (restoredState.filters) {
+        if (props.onFilter) {
+          props.onFilter(createEvent({
+            filters: restoredState.filters
+          }));
+        } else {
+          setFiltersState(cloneFilters(restoredState.filters));
+        }
+      }
+      if (props.reorderableColumns) {
+        setColumnOrderState(restoredState.columnOrder);
+      }
+      if (restoredState.expandedKeysState) {
+        if (props.onToggle) {
+          props.onRowToggle({
+            data: restoredState.expandedKeysState
+          });
+        } else {
+          setExpandedKeysState(restoredState.expandedKeysState);
+        }
+      }
+      if (restoredState.selectionKeys && props.onSelectionChange) {
+        props.onSelectionChange({
+          value: restoredState.selectionKeys
+        });
+      }
+      if (props.onStateRestore) {
+        props.onStateRestore(restoredState);
+      }
+    }
+  };
   var onToggle = function onToggle(event) {
     var originalEvent = event.originalEvent,
       value = event.value,
@@ -2698,6 +2872,46 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       }));
     }
   };
+  var cloneFilters = function cloneFilters(filters) {
+    filters = filters || props.filters;
+    var cloned = {};
+    if (filters) {
+      Object.entries(filters).forEach(function (_ref) {
+        var _ref2 = _slicedToArray(_ref, 2),
+          prop = _ref2[0],
+          value = _ref2[1];
+        cloned[prop] = value;
+      });
+    } else {
+      var columns = getColumns();
+      cloned = columns.reduce(function (filters, col) {
+        var field = getColumnProp(col, 'filterField') || getColumnProp(col, 'field');
+        var filterFunction = getColumnProp(col, 'filterFunction');
+        var dataType = getColumnProp(col, 'dataType');
+        var matchMode = getColumnProp(col, 'filterMatchMode') || (context && context.filterMatchModeOptions[dataType] || PrimeReact.filterMatchModeOptions[dataType] ? context && context.filterMatchModeOptions[dataType][0] || PrimeReact.filterMatchModeOptions[dataType][0] : FilterMatchMode.STARTS_WITH);
+        var constraint = {
+          value: null,
+          matchMode: matchMode
+        };
+        if (filterFunction) {
+          FilterService.register("custom_".concat(field), function () {
+            for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+              args[_key] = arguments[_key];
+            }
+            return filterFunction.apply(void 0, args.concat([{
+              column: col
+            }]));
+          });
+        }
+        filters[field] = constraint;
+        return filters;
+      }, {});
+    }
+    return cloned;
+  };
+  var hasFilter = function hasFilter() {
+    return ObjectUtils.isNotEmpty(getFilters());
+  };
   var isFilterBlank = function isFilterBlank(filter) {
     if (filter !== null && filter !== undefined) {
       if (typeof filter === 'string' && filter.trim().length === 0 || filter instanceof Array && filter.length === 0) {
@@ -2776,6 +2990,9 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
           delta: delta
         });
       }
+      if (isStateful()) {
+        saveState();
+      }
     }
     resizerHelperRef.current.style.display = 'none';
     resizeColumn.current = null;
@@ -2829,7 +3046,6 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     draggedColumn.current = column;
     event.dataTransfer.setData('text', 'b'); // Firefox requires this to make dragging possible
   };
-
   var onColumnDragOver = function onColumnDragOver(e) {
     var event = e.originalEvent,
       column = e.column;
@@ -3162,12 +3378,12 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       }
     }
   };
-  var isFilterMatched = function isFilterMatched(node, _ref) {
-    var filterField = _ref.filterField,
-      filterValue = _ref.filterValue,
-      filterConstraint = _ref.filterConstraint,
-      isStrictMode = _ref.isStrictMode,
-      options = _ref.options;
+  var isFilterMatched = function isFilterMatched(node, _ref3) {
+    var filterField = _ref3.filterField,
+      filterValue = _ref3.filterValue,
+      filterConstraint = _ref3.filterConstraint,
+      isStrictMode = _ref3.isStrictMode,
+      options = _ref3.options;
     var matched = false;
     var dataFieldValue = ObjectUtils.resolveFieldData(node.data, filterField);
     if (filterConstraint(dataFieldValue, filterValue, props.filterLocale, options)) {
@@ -3215,6 +3431,16 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     }
     return data;
   };
+  useMountEffect(function () {
+    if (isStateful()) {
+      restoreState();
+    }
+  });
+  useUpdateEffect(function () {
+    if (isStateful()) {
+      saveState();
+    }
+  });
   useUpdateEffect(function () {
     if (childFocusEvent.current) {
       var nodeElement = childFocusEvent.current.target;
@@ -3229,12 +3455,26 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   React.useImperativeHandle(ref, function () {
     return {
       props: props,
+      clearState: clearState,
       filter: filter,
       getElement: function getElement() {
         return elementRef.current;
-      }
+      },
+      restoreState: restoreState,
+      restoreTableState: restoreTableState,
+      saveState: saveState
     };
   });
+  var createEvent = function createEvent(event) {
+    return _objectSpread({
+      first: getFirst(),
+      rows: getRows(),
+      sortField: getSortField(),
+      sortOrder: getSortOrder(),
+      multiSortMeta: getMultiSortMeta(),
+      filters: getFilters()
+    }, event);
+  };
   var createTableHeader = function createTableHeader(columns, columnGroup) {
     var sortField = getSortField();
     var sortOrder = getSortOrder();