[fix] Array Field updating & MobX 7 compatibility

Author: TechQuery

ReadMe.md

@@ -54,7 +54,7 @@ npm i react \
 ```html
 <link rel="stylesheet" href="https://unpkg.com/bootstrap@5.3.8/dist/css/bootstrap.min.css" />
 <link rel="stylesheet" href="https://unpkg.com/bootstrap-icons@1.13.1/font/bootstrap-icons.css" />
-<link rel="stylesheet" href="https://unpkg.com/mobx-restful-table@2.6.2/dist/index.css" />
+<link rel="stylesheet" href="https://unpkg.com/mobx-restful-table@2.6.6/dist/index.css" />
 ```
 
 ### `tsconfig.json`
@@ -257,7 +257,7 @@ export const EditorPage = () => (
 [4]: https://mobx.js.org/
 [5]: https://libraries.io/npm/mobx-restful-table
 [6]: https://github.com/idea2app/MobX-RESTful-table/actions/workflows/main.yml
-[7]: https://nodei.co/npm/mobx-restful-table/
+[7]: https://npm.im/mobx-restful-table/
 [8]: https://github.com/idea2app/Next-Bootstrap-TS/blob/main/models/Translation.ts
 [9]: https://github.com/idea2app/Next-Bootstrap-TS/tree/main/translation
 [10]: https://github.com/idea2app/Next-Bootstrap-TS/blob/main/models/Base.ts#L12-L24

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mobx-restful-table",
-  "version": "2.6.5",
+  "version": "2.6.6",
   "license": "LGPL-3.0",
   "author": "shiy2008@gmail.com",
   "description": "A Pagination Table & Scroll List component suite for CRUD operation, which is based on MobX RESTful & React.",
@@ -28,9 +28,9 @@
     "@swc/helpers": "^0.5.23",
     "classnames": "^2.5.1",
     "lodash": "^4.18.1",
-    "mobx": "^6.16.1",
+    "mobx": ">=6",
     "mobx-i18n": ">=0.6",
-    "mobx-react": "^9.2.2",
+    "mobx-react": ">=9",
     "mobx-react-helper": "^0.5.1",
     "mobx-restful": "^2.1.4",
     "react-bootstrap": "^2.10.10",

pnpm-lock.yaml

@@ -1,4 +1,3 @@
-import { toJS } from 'mobx';
 import { observer } from 'mobx-react';
 import { FormComponent, FormComponentProps } from 'mobx-react-helper';
 import { DataObject } from 'mobx-restful';
@@ -20,20 +19,10 @@ export class ArrayField<T extends DataObject = DataObject> extends FormComponent
 > {
   static displayName = 'ArrayField';
 
-  protected readonly rowIds = new WeakMap<object, string>();
+  protected readonly rowIds: string[] = [];
 
-  protected readRowId(item: T) {
-    return this.rowIds.get(item as object);
-  }
-
-  protected writeRowId(item: T, rowId = uniqueID()) {
-    this.rowIds.set(item as object, rowId);
-
-    return rowId;
-  }
-
-  protected getRowId(item: T) {
-    return this.readRowId(item) || this.writeRowId(item);
+  protected getRowId(index: number) {
+    return (this.rowIds[index] ||= uniqueID());
   }
 
   componentDidMount() {
@@ -46,46 +35,49 @@ export class ArrayField<T extends DataObject = DataObject> extends FormComponent
     const { innerValue = [] } = this,
       item = {} as T;
 
-    this.writeRowId(item);
+    this.rowIds.splice(index, 0, uniqueID());
     this.innerValue = [...innerValue.slice(0, index), item, ...innerValue.slice(index)];
   };
 
-  remove = (index: number) => (this.innerValue = this.innerValue?.filter((_, i) => i !== index));
+  remove = (index: number) => {
+    this.rowIds.splice(index, 1);
+
+    this.innerValue = this.innerValue?.filter((_, i) => i !== index);
+  };
 
   handleChange =
     (index: number) =>
     ({ currentTarget }: ChangeEvent<EventTarget>) => {
       const item = formToJSON<T>(currentTarget as HTMLFieldSetElement),
         { innerValue = [] } = this;
-      const currentItem = innerValue[index];
-
-      this.writeRowId(item, this.readRowId(currentItem));
 
       this.innerValue = [...innerValue.slice(0, index), item, ...innerValue.slice(index + 1)];
     };
 
   handleUpdate =
     (index: number) =>
     ({ currentTarget }: ChangeEvent<EventTarget>) => {
-      const item = formToJSON<T>(currentTarget as HTMLFieldSetElement),
-        currentItem = this.innerValue![index];
+      const item = formToJSON<T>(currentTarget as HTMLFieldSetElement);
 
-      this.writeRowId(item, this.readRowId(currentItem));
       this.innerValue![index] = item;
     };
 
   render() {
-    const { className = '', style, name, renderItem } = this.props;
+    const { className = '', style, name, renderItem } = this.props,
+      { value, rowIds } = this;
+    const length = value?.length || 0;
+
+    if (rowIds.length > length) rowIds.length = length;
 
     return (
       <>
-        {this.value?.map((item, index, { length }) => (
+        {value?.map((item, index, { length }) => (
           <fieldset
-            key={this.getRowId(item)}
+            key={this.getRowId(index)}
             className={`d-flex align-items-center my-2 gap-2 ${className}`}
             {...{ style, name }}
-            onChange={this.handleChange(index)}
-            onBlur={this.handleUpdate(index)}
+            onBlur={this.handleChange(index)}
+            onChange={this.handleUpdate(index)}
           >
             <div className="flex-fill">{renderItem(item, index)}</div>
             <ButtonGroup>

source/ArrayField.tsx

@@ -31,16 +31,19 @@ export const FormField: FC<FormFieldProps> = ({
   <Form.FloatingLabel
     {...{ className, style, label }}
     controlId={id}
-    onBlur={event => {
-      if ((event.target as HTMLInputElement).checkValidity()) {
-        event.target.classList.remove('is-invalid');
-        event.currentTarget.classList.remove('is-invalid');
-      } else {
-        event.target.classList.add('is-invalid');
-        event.currentTarget.classList.add('is-invalid');
-      }
-      onBlur?.(event as Parameters<FormControlProps['onBlur']>[0]);
-    }}
+    onBlur={
+      onBlur &&
+      (event => {
+        if ((event.target as HTMLInputElement).checkValidity()) {
+          event.target.classList.remove('is-invalid');
+          event.currentTarget.classList.remove('is-invalid');
+        } else {
+          event.target.classList.add('is-invalid');
+          event.currentTarget.classList.add('is-invalid');
+        }
+        onBlur(event as Parameters<FormControlProps['onBlur']>[0]);
+      })
+    }
   >
     {options ? (
       <Form.Select

source/FormField.tsx

@@ -322,6 +322,7 @@ export class RestTable<
         hover,
         editable,
         deletable,
+        filter,
         filterFields,
         store,
         translator,