Refactor/modal with form (#317)

* refactor: modalWithForm component

* test: install react-test-renderer

* test: perfect single test

* docs: improve modalWithForm documentation

* feat(modal.form): parameter filtering optimization

* feat(modal.form): modify filterPropsByAntdProps to filterAttrByArrays

* feat(modal.form): modify demos reference mode

* docs(Modal.Form): modifying Document Informationd

* refactor: modal.form component logic

* refactor: modalWithForm component

* test: install react-test-renderer

* test: perfect single test

* docs: improve modalWithForm documentation

* feat(modal.form): parameter filtering optimization

* feat(modal.form): modify filterPropsByAntdProps to filterAttrByArrays

* feat(modal.form): modify demos reference mode

* docs(Modal.Form): modifying Document Informationd

* refactor: modal.form component logic

---------

Co-authored-by: zaoei <[email protected]>

Author: mumiao

package.json

@@ -95,6 +95,7 @@
         "prettier-plugin-packagejson": "^2.2.18",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
+        "react-test-renderer": "^18.2.0",
         "stylelint": "^14.9.1",
         "ts-jest": "^29.0.3",
         "typescript": "~4.5.2"

pnpm-lock.yaml

@@ -12,7 +12,7 @@ export { default as GlobalLoading } from './globalLoading';
 export { default as KeyEventListener } from './keyEventListener';
 export { default as LoadError } from './errorBoundary/loadError';
 export { default as MarkdownRender } from './markdownRender';
-export { default as ModalWithForm } from './modalWithForm';
+export { default as Modal } from './modal';
 export { default as MultiSearchInput } from './multiSearchInput';
 export { default as MxGraphContainer, WIDGETS_PREFIX } from './mxGraph';
 export { default as NotFound } from './notFound';

src/index.ts

@@ -1,12 +1,11 @@
 import React from 'react';
-import ModalWithForm, { useFilterFormProps } from '../index';
+import Modal from '../';
 import { Input, Form } from 'antd';
 import { render, fireEvent, screen, cleanup } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
 import '@testing-library/jest-dom/extend-expect';
 
 const FormItem = Form.Item;
-const EnhancedModal = ModalWithForm((_props: any) => {
+const EnhancedModal = Modal.Form((_props: any) => {
     return (
         <FormItem label="test-label" name="test" rules={[{ max: 10 }]}>
             <Input data-testid="test-input" />
@@ -84,16 +83,3 @@ test('should trigger submit methond when form validate successful', () => {
     fireEvent.click(eleOk);
     expect(eleOk.onclick).toHaveBeenCalled();
 });
-
-test('test useFilterFormProps', () => {
-    const { result } = renderHook(() =>
-        useFilterFormProps({
-            a: 1,
-            onOk: () => {},
-            disabled: false,
-        })
-    );
-    expect(result.current).toEqual({
-        disabled: false,
-    });
-});