feat: add adaptors for design components

alibaba-fusion · Aug 15, 2019 · 1526f4a · 1526f4a
1 parent dbe7e0e
commit 1526f4a
Show file tree

Hide file tree

Showing 5 changed files with 514 additions and 0 deletions.
diff --git a/adaptor/colAdaptor.js b/adaptor/colAdaptor.js
@@ -0,0 +1,50 @@
+import { adaptor, getPropsForLayoutComps } from '../utils';
+
+export default {
+  name: 'Col',
+  editor: () => {
+    return {
+      props: [{
+        name: 'children',
+        type: 'node-list',
+      }]
+    };
+  },
+  adaptor,
+  demos: [
+    {
+      node: {
+        adaptor: 'Col',
+        props: {
+          ...getPropsForLayoutComps('col'),
+          style: { border: 'dashed 1px grey' },
+          children: [
+            {
+              adaptor: 'Row',
+              props: {
+                ...getPropsForLayoutComps('row', 'col'),
+                style: { backgroundColor: 'pink' },
+              },
+            },
+            {
+              adaptor: 'Row',
+              props: {
+                ...getPropsForLayoutComps('row', 'col'),
+                style: { backgroundColor: 'pink' },
+              },
+            },
+            {
+              adaptor: 'Row',
+              props: {
+                ...getPropsForLayoutComps('row', 'col'),
+                style: { backgroundColor: 'pink' },
+              },
+            },
+          ],
+        },
+      },
+      backgroundColor: '#000', // 背景色
+      // height: 200, // 高度 默认 auto
+    },
+  ],
+};
diff --git a/adaptor/flowAdaptor.js b/adaptor/flowAdaptor.js
@@ -0,0 +1,99 @@
+import { adaptor, getPropsForLayoutComps } from '../utils';
+
+export default {
+  name: 'Flow',
+  editor: () => {
+    return {
+      props: [{
+        name: 'children',
+        type: 'node-list',
+      }]
+    };
+  },
+  adaptor,
+  demos: [
+    {
+      node: {
+        adaptor: 'Flow',
+        props: {
+          ...getPropsForLayoutComps('flow'),
+          style: { border: 'dashed 1px grey' },
+          children: [
+            {
+              adaptor: 'Row',
+              props: {
+                ...getPropsForLayoutComps('row', 'flow'),
+                style: { backgroundColor: 'pink' },
+              },
+            },
+            {
+              adaptor: 'Row',
+              props: {
+                ...getPropsForLayoutComps('row', 'flow'),
+                style: { backgroundColor: 'pink' },
+              },
+            },
+            {
+              adaptor: 'Row',
+              props: {
+                ...getPropsForLayoutComps('row', 'flow'),
+                style: { backgroundColor: 'pink' },
+              },
+            },
+            {
+              adaptor: 'Row',
+              props: {
+                ...getPropsForLayoutComps('row', 'flow'),
+                style: { backgroundColor: 'pink' },
+              },
+            },
+            {
+              adaptor: 'Row',
+              props: {
+                ...getPropsForLayoutComps('row', 'flow'),
+                style: { backgroundColor: 'pink' },
+              },
+            },
+            {
+              adaptor: 'Row',
+              props: {
+                ...getPropsForLayoutComps('row', 'flow'),
+                style: { backgroundColor: 'pink' },
+              },
+            },
+            {
+              adaptor: 'Row',
+              props: {
+                ...getPropsForLayoutComps('row', 'flow'),
+                style: { backgroundColor: 'pink' },
+              },
+            },
+            {
+              adaptor: 'Row',
+              props: {
+                ...getPropsForLayoutComps('row', 'flow'),
+                style: { backgroundColor: 'pink' },
+              },
+            },
+            {
+              adaptor: 'Row',
+              props: {
+                ...getPropsForLayoutComps('row', 'flow'),
+                style: { backgroundColor: 'pink' },
+              },
+            },
+            {
+              adaptor: 'Row',
+              props: {
+                ...getPropsForLayoutComps('row', 'flow'),
+                style: { backgroundColor: 'pink' },
+              },
+            },
+          ],
+        },
+      },
+      backgroundColor: '#000', // 背景色
+      // height: 200, // 高度 默认 auto
+    },
+  ],
+};
diff --git a/adaptor/gridAdaptor.js b/adaptor/gridAdaptor.js
@@ -0,0 +1,71 @@
+import { adaptor, getPropsForLayoutComps } from '../utils';
+
+export default {
+  name: 'Grid',
+  editor: () => {
+    return {
+      props: [{
+        name: 'children',
+        type: 'node-list',
+      }]
+    };
+  },
+  adaptor,
+  demos: [
+    {
+      node: {
+        adaptor: 'Grid',
+        props: {
+          ...getPropsForLayoutComps('grid'),
+          style: { border: 'dashed 1px grey' },
+          children: [
+            {
+              adaptor: 'Row',
+              props: {
+                ...getPropsForLayoutComps('row', 'grid'),
+                style: { backgroundColor: 'pink' },
+              },
+            },
+            {
+              adaptor: 'Row',
+              props: {
+                ...getPropsForLayoutComps('row', 'grid'),
+                style: { backgroundColor: 'pink' },
+              },
+            },
+            {
+              adaptor: 'Row',
+              props: {
+                ...getPropsForLayoutComps('row', 'grid'),
+                style: { backgroundColor: 'pink' },
+              },
+            },
+            {
+              adaptor: 'Row',
+              props: {
+                ...getPropsForLayoutComps('row', 'grid'),
+                style: { backgroundColor: 'pink' },
+              },
+            },
+            {
+              adaptor: 'Row',
+              props: {
+                ...getPropsForLayoutComps('row', 'grid'),
+                style: { backgroundColor: 'pink' },
+              },
+            },
+            {
+              adaptor: 'Row',
+              props: {
+                ...getPropsForLayoutComps('row', 'grid'),
+                style: { backgroundColor: 'pink' },
+              },
+            },
+          ],
+        },
+      },
+      backgroundColor: '#000', // 背景色
+      // height: 200, // 高度 默认 auto
+    },
+  ],
+};
diff --git a/adaptor/rowAdaptor.js b/adaptor/rowAdaptor.js
@@ -0,0 +1,50 @@
+import { adaptor, getPropsForLayoutComps } from '../utils';
+
+export default {
+  name: 'Row',
+  editor: () => {
+    return {
+      props: [{
+        name: 'children',
+        type: 'node-list',
+      }]
+    };
+  },
+  adaptor,
+  demos: [
+    {
+      node: {
+        adaptor: 'Row',
+        props: {
+          ...getPropsForLayoutComps('row'),
+          style: { border: 'dashed 1px grey' },
+          children: [
+            {
+              adaptor: 'Row',
+              props: {
+                ...getPropsForLayoutComps('row', 'row'),
+                style: { backgroundColor: 'pink' },
+              },
+            },
+            {
+              adaptor: 'Row',
+              props: {
+                ...getPropsForLayoutComps('row', 'row'),
+                style: { backgroundColor: 'pink' },
+              },
+            },
+            {
+              adaptor: 'Row',
+              props: {
+                ...getPropsForLayoutComps('row', 'row'),
+                style: { backgroundColor: 'pink' },
+              },
+            },
+          ],
+        },
+      },
+      backgroundColor: '#000', // 背景色
+      // height: 200, // 高度 默认 auto
+    },
+  ],
+};