[add] Array Field component & HTML Editor field in REST Form component

ReadMe.md

@@ -27,12 +27,13 @@ A **Pagination Table** & **Scroll List** component suite for [CRUD operation][1]
 5. [Form Field](https://idea2app.github.io/MobX-RESTful-table/functions/FormField-1.html)
 6. [Range Input](https://idea2app.github.io/MobX-RESTful-table/classes/RangeInput.html)
 7. [Badge Input](https://idea2app.github.io/MobX-RESTful-table/classes/BadgeInput.html)
-8. [REST Form](https://idea2app.github.io/MobX-RESTful-table/classes/RestForm.html)
-9. [Pager](https://idea2app.github.io/MobX-RESTful-table/functions/Pager-1.html)
-10. [REST Table](https://idea2app.github.io/MobX-RESTful-table/classes/RestTable.html)
-11. [Scroll Boundary](https://idea2app.github.io/MobX-RESTful-table/functions/ScrollBoundary-1.html)
-12. [Scroll List](https://idea2app.github.io/MobX-RESTful-table/classes/ScrollList.html)
-13. [Searchable Input](https://idea2app.github.io/MobX-RESTful-table/classes/SearchableInput.html)
+8. [Array Field](https://idea2app.github.io/MobX-RESTful-table/classes/ArrayField.html)
+9. [REST Form](https://idea2app.github.io/MobX-RESTful-table/classes/RestForm.html)
+10. [Pager](https://idea2app.github.io/MobX-RESTful-table/functions/Pager-1.html)
+11. [REST Table](https://idea2app.github.io/MobX-RESTful-table/classes/RestTable.html)
+12. [Scroll Boundary](https://idea2app.github.io/MobX-RESTful-table/functions/ScrollBoundary-1.html)
+13. [Scroll List](https://idea2app.github.io/MobX-RESTful-table/classes/ScrollList.html)
+14. [Searchable Input](https://idea2app.github.io/MobX-RESTful-table/classes/SearchableInput.html)
 
 ## Installation
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mobx-restful-table",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "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.",
@@ -34,6 +34,7 @@
     "mobx-react-helper": "^0.4.1",
     "mobx-restful": "^2.1.0",
     "react-bootstrap": "^2.10.10",
+    "react-bootstrap-editor": "^2.1.1",
     "regenerator-runtime": "^0.14.1",
     "web-utility": "^4.4.3"
   },

preview/content.tsx

@@ -1,9 +1,10 @@
 import { text2color } from 'idea-react';
 import { GitRepository } from 'mobx-github';
 import { FC } from 'react';
-import { Badge } from 'react-bootstrap';
+import { Badge, Form, InputGroup } from 'react-bootstrap';
 
 import {
+  ArrayField,
   BadgeInput,
   Column,
   FileModel,
@@ -20,6 +21,11 @@ import {
 import { i18n, repositoryStore, topicStore } from './model';
 import { CodeExample, Section } from './utility';
 
+interface Price {
+  currency: 'USD' | 'CNY';
+  amount: number;
+}
+
 class MyFileModel extends FileModel {}
 
 const columns: Column<GitRepository>[] = [
@@ -55,6 +61,16 @@ const columns: Column<GitRepository>[] = [
     ),
   },
   { key: 'stargazers_count', type: 'number', renderHead: 'Star Count' },
+  {
+    key: 'description',
+    contentEditable: true,
+    renderHead: 'Description',
+    renderBody: ({ description }) => (
+      <p className="m-0 text-truncate" style={{ maxWidth: '10rem' }} title={description}>
+        {description}
+      </p>
+    ),
+  },
 ];
 
 export const Content: FC = () => (
@@ -117,6 +133,31 @@ export const Content: FC = () => (
       </CodeExample>
     </Section>
 
+    <Section title="Array Field">
+      <CodeExample>
+        <ArrayField
+          name="prices"
+          renderItem={({ currency, amount }: Price) => (
+            <InputGroup>
+              <Form.Select name="currency" defaultValue={currency}>
+                <option value="USD">USD $</option>
+                <option value="CNY">CNY ¥</option>
+              </Form.Select>
+              <Form.Control
+                placeholder="Amount"
+                type="number"
+                name="amount"
+                required
+                min={0}
+                defaultValue={amount}
+              />
+            </InputGroup>
+          )}
+          onChange={console.log}
+        />
+      </CodeExample>
+    </Section>
+
     <Section title="Image Preview">
       <CodeExample>
         <ImagePreview src="https://github.com/idea2app.png" />

source/ArrayField.tsx

@@ -0,0 +1,81 @@
+import { toJS } from 'mobx';
+import { observer } from 'mobx-react';
+import { FormComponent, FormComponentProps } from 'mobx-react-helper';
+import { DataObject } from 'mobx-restful';
+import { ChangeEvent, HTMLAttributes, ReactNode } from 'react';
+import { Button, ButtonGroup } from 'react-bootstrap';
+import { formToJSON, isEmpty } from 'web-utility';
+
+export type ArrayFieldProps<T extends DataObject = DataObject> = Pick<
+  HTMLAttributes<HTMLFieldSetElement>,
+  'className' | 'style'
+> &
+  FormComponentProps<T[]> & {
+    renderItem: (item: T, index: number) => ReactNode;
+  };
+
+@observer
+export class ArrayField<T extends DataObject = DataObject> extends FormComponent<
+  ArrayFieldProps<T>
+> {
+  componentDidMount() {
+    super.componentDidMount();
+
+    if (isEmpty(this.value)) this.add();
+  }
+
+  add = () => (this.innerValue = [...(this.innerValue || []), {} as T]);
+
+  remove = (index: number) => (this.innerValue = this.innerValue?.filter((_, i) => i !== index));
+
+  handleChange =
+    (index: number) =>
+    ({ currentTarget }: ChangeEvent<EventTarget>) => {
+      const item = formToJSON<T>(currentTarget as HTMLFieldSetElement),
+        { innerValue } = this;
+
+      const list = [...innerValue!.slice(0, index), item, ...innerValue!.slice(index + 1)].map(
+        item => toJS(item),
+      );
+      this.props.onChange?.(list);
+    };
+
+  handleUpdate =
+    (index: number) =>
+    ({ currentTarget }: ChangeEvent<EventTarget>) =>
+      (this.innerValue![index] = formToJSON<T>(currentTarget as HTMLFieldSetElement));
+
+  render() {
+    const { className = '', style, name, renderItem } = this.props;
+
+    return (
+      <>
+        {this.value?.map((item, index, { length }) => (
+          <fieldset
+            key={JSON.stringify(item)}
+            className={`d-flex align-items-center my-2 gap-2 ${className}`}
+            {...{ style, name }}
+            onChange={this.handleChange(index)}
+            onBlur={this.handleUpdate(index)}
+          >
+            <div className="flex-fill">{renderItem(item, index)}</div>
+            <ButtonGroup>
+              <Button type="button" size="sm" variant="warning" onClick={this.add}>
+                +
+              </Button>
+              <Button
+                type="button"
+                size="sm"
+                variant="danger"
+                disabled={length < 2}
+                onClick={() => this.remove(index)}
+              >
+                -
+              </Button>
+            </ButtonGroup>
+          </fieldset>
+        ))}
+      </>
+    );
+  }
+}