Merge pull request #199 from lowdefy/blocks-antd-modal

feat(blocksAntd): modal examples

packages/blocksAntd/demo/examples/Modal.yaml

@@ -4,10 +4,54 @@
   type: Modal
   properties:
     title: Modal title
-- id: areas.content
+- id: "properties: centered: true"
   type: Modal
-  areas:
-    content:
-      blocks:
-        - id: testArea
-          type: Test
+  properties:
+    centered: true
+- id: "properties: closable: false"
+  type: Modal
+  properties:
+    closable: false
+- id: "properties: footer: false"
+  type: Modal
+  properties:
+    footer: false
+- id: "properties: mask: false"
+  type: Modal
+  properties:
+    mask: false
+- id: "properties: maskClosable: false"
+  type: Modal
+  properties:
+    maskClosable: false
+- id: "properties: okText: Text of the OK button"
+  type: Modal
+  properties:
+    okText: Text of the OK button
+- id: "properties: cancelText: Text of the Cancel button"
+  type: Modal
+  properties:
+    cancelText: Text of the Cancel button
+- id: "properties: width: 350px - 520px is default"
+  type: Modal
+  properties:
+    width: 350
+- id: "properties: zIndex: 1200 - 1000 is the default"
+  type: Modal
+  properties:
+    zIndex: 1200
+- id: "properties: bodyStyle: border: 10px solid blue"
+  type: Modal
+  properties:
+    bodyStyle:
+      border: 10px solid blue
+- id: "properties: maskStyle: border: 10px solid blue"
+  type: Modal
+  properties:
+    maskStyle:
+      border: 10px solid blue
+- id: "properties: wrapperStyle: border: 10px solid blue"
+  type: Modal
+  properties:
+    wrapperStyle:
+      border: 10px solid blue

packages/blocksAntd/src/blocks/Modal/Modal.js

@@ -34,7 +34,6 @@ const ModalBlock = ({ blockId, content, properties, actions, methods }) => {
   }
   return (
     <div id={blockId}>
-      <div id={`${blockId}_popup`} />
       <Modal
         id={`${blockId}_modal`}
         title={properties.title}
@@ -50,7 +49,6 @@ const ModalBlock = ({ blockId, content, properties, actions, methods }) => {
           setOpen(false);
         }}
         afterClose={() => methods.callAction({ action: 'afterClose' })}
-        getContainer={() => document.getElementById(`${blockId}_popup`)}
         confirmLoading={get(actions, 'onOk.loading')}
         okText={properties.okText || 'Ok'}
         cancelText={properties.cancelText || 'Cancel'}

packages/blocksAntd/src/blocks/Modal/Modal.json

@@ -1,6 +1,20 @@
 {
   "category": "container",
   "loading": false,
+  "test": {
+    "methods": [
+      {
+        "name": "toggleOpen",
+        "args": {}
+      },
+      {
+        "name": "setOpen",
+        "args": {
+          "open": true
+        }
+      }
+    ]
+  },
   "schema": {
     "properties": {
       "type": "object",

packages/blocksAntd/tests/Modal.test.js

@@ -14,11 +14,26 @@
   limitations under the License.
 */
 
-import { runBlockSchemaTests, runRenderTests } from '@lowdefy/block-tools';
+import { runBlockSchemaTests, runMethodTests } from '@lowdefy/block-tools';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import { Modal } from 'antd';
 
-import Modal from '../src/blocks/Modal/Modal';
+Enzyme.configure({ adapter: new Adapter() });
+import ModalBlock from '../src/blocks/Modal/Modal';
 import examples from '../demo/examples/Modal.yaml';
 import meta from '../src/blocks/Modal/Modal.json';
 
-runRenderTests({ examples, Block: Modal, meta });
+jest.mock('antd/lib/modal', () => {
+  return jest.fn((props) => props.toString());
+});
+
+const mocks = [
+  {
+    name: 'default',
+    fn: Modal,
+  },
+];
+
+runMethodTests({ examples, Block: ModalBlock, mocks, meta, enzyme: { mount } });
 runBlockSchemaTests({ examples, meta });