[add] Operation column for Edit, Delete & Check

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mobx-restful-table",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "license": "LGPL-3.0",
   "author": "shiy2008@gmail.com",
   "description": "A super Table component for CRUD operation, which is based on MobX RESTful & React.",
@@ -28,22 +28,29 @@
   "dependencies": {
     "@swc/helpers": "^0.4.14",
     "classnames": "^2.3.2",
-    "mobx-i18n": "^0.3.3",
+    "lodash": "^4.17.21",
+    "mobx-i18n": "^0.3.6",
     "mobx-react": "^6.3.1",
-    "mobx-restful": "^0.6.0-rc.18",
-    "react": ">=16 <18",
-    "react-bootstrap": "^2.6.0",
+    "mobx-restful": "^0.6.0-rc.19",
+    "react-bootstrap": "^2.7.0",
     "regenerator-runtime": "^0.13.11",
     "web-utility": "^3.9.9"
   },
+  "peerDependencies": {
+    "mobx": ">=4 <6",
+    "react": ">=16 <18"
+  },
   "devDependencies": {
     "@parcel/packager-ts": "~2.6.2",
     "@parcel/transformer-typescript-types": "~2.6.2",
+    "@types/lodash": "^4.14.191",
     "@types/react": "^17.0.52",
     "husky": "^8.0.2",
     "lint-staged": "^13.1.0",
+    "mobx": "^5.15.7",
     "parcel": "~2.6.2",
-    "prettier": "^2.8.0",
+    "prettier": "^2.8.1",
+    "react": "^17.0.2",
     "typedoc": "^0.23.21",
     "typedoc-plugin-mdn-links": "^2.0.0",
     "typescript": "~4.7.4"

source/FormField.tsx

@@ -0,0 +1,21 @@
+import { InputHTMLAttributes, FC } from 'react';
+import { FloatingLabelProps, FormControlProps, Form } from 'react-bootstrap';
+
+export type FormFieldProps = InputHTMLAttributes<HTMLInputElement> &
+  FormControlProps &
+  Pick<FloatingLabelProps, 'label'>;
+
+export const FormField: FC<FormFieldProps> = ({
+  className,
+  style,
+  label,
+  id,
+  name,
+  ...controlProps
+}) => (
+  <Form.FloatingLabel {...{ className, style, label }} controlId={name || id}>
+    <Form.Control name={name} placeholder={name || id} {...controlProps} />
+  </Form.FloatingLabel>
+);
+
+FormField.displayName = 'FormField';

source/Pager.tsx

@@ -1,36 +1,77 @@
 import { ListModel } from 'mobx-restful';
 import { FC } from 'react';
-import { Pagination } from 'react-bootstrap';
+import { Pagination, Form } from 'react-bootstrap';
 
-export interface PagerProps
-  extends Pick<ListModel<{}>, 'pageIndex' | 'pageCount'> {
-  onChange?: (index: number) => any;
+export type PageMeta = Pick<ListModel<{}>, 'pageSize' | 'pageIndex'>;
+
+export interface PagerProps extends PageMeta {
+  pageCount: number;
+  onChange?: (meta: PageMeta) => any;
 }
 
-export const Pager: FC<PagerProps> = ({ pageIndex, pageCount, onChange }) => (
-  <Pagination className="my-0">
-    {pageIndex > 1 && (
-      <Pagination.Item onClick={() => onChange?.(1)}>1</Pagination.Item>
-    )}
-    {pageIndex > 3 && <Pagination.Ellipsis />}
-    {pageIndex > 2 && (
-      <Pagination.Item onClick={() => onChange?.(pageIndex - 1)}>
-        {pageIndex - 1}
-      </Pagination.Item>
-    )}
-    <Pagination.Item active>{pageIndex}</Pagination.Item>
-    {pageCount - pageIndex > 1 && (
-      <Pagination.Item onClick={() => onChange?.(pageIndex + 1)}>
-        {pageIndex + 1}
-      </Pagination.Item>
-    )}
-    {pageCount - pageIndex > 2 && <Pagination.Ellipsis />}
-    {pageIndex < pageCount && (
-      <Pagination.Item onClick={() => onChange?.(pageCount)}>
-        {pageCount}
-      </Pagination.Item>
-    )}
-  </Pagination>
+export const Pager: FC<PagerProps> = ({
+  pageSize,
+  pageIndex,
+  pageCount,
+  onChange,
+}) => (
+  <div className="d-flex align-items-center gap-3">
+    <Form.Control
+      type="number"
+      name="pageSize"
+      defaultValue={pageSize}
+      min={1}
+      required
+      onChange={({ currentTarget: input }) =>
+        input.reportValidity() &&
+        onChange?.({ pageSize: +input.value, pageIndex })
+      }
+    />
+    x
+    <Form.Control
+      type="number"
+      name="pageIndex"
+      defaultValue={pageIndex || 1}
+      min={1}
+      max={pageCount}
+      required
+      onChange={({ currentTarget: input }) =>
+        input.reportValidity() &&
+        onChange?.({ pageSize, pageIndex: +input.value })
+      }
+    />
+    <Pagination className="my-0">
+      {pageIndex > 1 && (
+        <Pagination.Item onClick={() => onChange?.({ pageSize, pageIndex: 1 })}>
+          1
+        </Pagination.Item>
+      )}
+      {pageIndex > 3 && <Pagination.Ellipsis />}
+      {pageIndex > 2 && (
+        <Pagination.Item
+          onClick={() => onChange?.({ pageSize, pageIndex: pageIndex - 1 })}
+        >
+          {pageIndex - 1}
+        </Pagination.Item>
+      )}
+      <Pagination.Item active>{pageIndex}</Pagination.Item>
+      {pageCount - pageIndex > 1 && (
+        <Pagination.Item
+          onClick={() => onChange?.({ pageSize, pageIndex: pageIndex + 1 })}
+        >
+          {pageIndex + 1}
+        </Pagination.Item>
+      )}
+      {pageCount - pageIndex > 2 && <Pagination.Ellipsis />}
+      {pageIndex < pageCount && (
+        <Pagination.Item
+          onClick={() => onChange?.({ pageSize, pageIndex: pageCount })}
+        >
+          {pageCount}
+        </Pagination.Item>
+      )}
+    </Pagination>
+  </div>
 );
 
 Pager.displayName = 'Pager';