update examples

examples/condition-fields/README.md

@@ -0,0 +1,7 @@
+# Simple blog demo
+
+Start dev server:
+
+```
+npm start
+```

examples/condition-fields/canner.schema.js

@@ -2,58 +2,51 @@
 
 import builder, {Condition} from 'canner-script';
 
-const condition = () => (
-  <array keyName="condition" title="Condition" ui="tableRoute">
-    <string keyName="field1" ui="select"
-      uiParams={{
-        options: [{
-          text: 'hidden',
-          value: 'hidden'
-        }, {
-          text: 'normal',
-          value: 'normal'
-        }]
-      }}
-    />
-    <Condition match={data => data.field1 === 'normal'}>
-      <number keyName="field2" />
-    </Condition>
-    <string keyName="field3" ui="select"
-      uiParams={{
-        options: [{
-          text: 'disabled',
-          value: 'disabled'
-        }, {
-          text: 'normal',
-          value: 'normal'
-        }]
-      }}
-    />
-    <Condition match={data => data.field3 === 'normal'} defaultMode="disabled">
-      <number keyName="field4" />
-    </Condition>
-    <array keyName="field5" >
-      <string keyName="field6" ui="select"
+export default (
+  <root>
+    <array keyName="condition" title="Condition" ui="tableRoute">
+      <string keyName="controlField" ui="select"
         uiParams={{
           options: [{
-            text: 'hidden',
-            value: 'hidden'
+            text: 'unmatch',
+            value: 'unmatch'
           }, {
-            text: 'normal',
-            value: 'normal'
+            text: 'match',
+            value: 'match'
           }]
         }}
       />
-      <Condition match={data => data.field6 === 'normal'}>
-        <number keyName="field7" />
+      <Condition match={data => data.controlField === 'match'}>
+        <number keyName="hiddenField" title="Hidden Field"/>
+      </Condition>
+      <Condition match={data => data.controlField === 'match'} defaultMode="disabled">
+        <number keyName="disabledField" title="Disabled Field "/>
+      </Condition>
+
+      <array keyName="nested" >
+        <string keyName="controlField" ui="select"
+          uiParams={{
+            options: [{
+              text: 'unmatch',
+              value: 'unmatch'
+            }, {
+              text: 'match',
+              value: 'match'
+            }]
+          }}
+        />
+        <Condition match={data => data.controlField === 'match'}>
+          <number keyName="hiddenField" />
+        </Condition>
+      </array>
+
+
+      <Condition match={(data, operator) => operator === 'create'}>
+        <string keyName="showOnCreate" title="Show on create"/>
+      </Condition>
+      <Condition match={(data, operator) => operator === 'update'}>
+        <string keyName="showOnUpdate" title="Show on update"/>
       </Condition>
     </array>
-    <Condition match={(data, operator) => operator === 'create'}>
-      <string keyName="showOnCreate" title="show on create"/>
-    </Condition>
-    <Condition match={(data, operator) => operator === 'update'}>
-      <string keyName="showOnUpdate" title="show on update"/>
-    </Condition>
-  </array>
-)
-export default condition;
+  </root>
+);

examples/condition-fields/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "condition-field",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "start": "canner script:serve"
+  },
+  "dependencies": {
+    "@canner/cli": "latest"
+  }
+}

examples/custom-array-tabs-pkg/package.json

@@ -16,7 +16,6 @@
   "license": "ISC",
   "dependencies": {
     "antd": "^3.2.0",
-    "immutable": "4.0.0-rc.9",
     "rc-tabs": "^9.2.5"
   }
 }

examples/custom-array-tabs-pkg/src/index.js

@@ -3,7 +3,6 @@ import Tabs, { TabPane } from "rc-tabs";
 import TabContent from "rc-tabs/lib/TabContent";
 import ScrollableInkTabBar from "rc-tabs/lib/ScrollableInkTabBar";
 import { Button, Icon, Modal } from "antd";
-import { List } from "immutable";
 import {Item} from 'canner-helpers';
 import 'antd/lib/tabs/style';
 
@@ -19,7 +18,7 @@ export default class TabUi extends Component {
 
   static defaultProps = {
     uiParams: {},
-    value: new List()
+    value: []
   };
 
   handleTabChange = (key) => {
@@ -32,7 +31,7 @@ export default class TabUi extends Component {
       refId,
       onChange,
     } = this.props;
-    const size = value.size;
+    const size = value.length;
     onChange(refId, 'create');
     this.setState({ activeKey: `${size}` });
   };
@@ -46,7 +45,7 @@ export default class TabUi extends Component {
         onChange(refId.child(index), "delete")
           .then(() => {
             that.setState({
-              activeKey: `${value.size - 2}`
+              activeKey: `${value.length - 2}`
             });
           });
       }

examples/custom-object-fields-pkg/src/index.js

@@ -1,15 +1,14 @@
 import React, { Component } from "react";
-import {Map} from 'immutable';
 
 export default class Fields extends Component {
   static defaultProps = {
-    value: new Map()
+    value: {}
   };
 
   onChange = (e, type) => {
     const { refId, value } = this.props;
     const newValue = e.target.value;
-    this.props.onChange(refId, "update", value.setIn([type], newValue));
+    this.props.onChange(refId, "update", {...value, [type]: newValue});
   }
 
   render() {
@@ -19,12 +18,12 @@ export default class Fields extends Component {
         <h1>Your name</h1>
         <input
           type="text"
-          value={value.get('name')}
+          value={value.name}
           onChange={(e) => this.onChange(e, 'name')}
         />
         <h1>Content</h1>
         <textarea
-          value={value.get('content')}
+          value={value.content}
           onChange={(e) => this.onChange(e, 'content')}
         />
       </div>

examples/simple-blog/package.json

@@ -7,7 +7,6 @@
     "start": "canner script:serve"
   },
   "dependencies": {
-    "@canner/cli": "2.3.2",
-    "canner-script": "^1.2.0"
+    "@canner/cli": "latest"
   }
 }

examples/simple-ecommerce/customize/custom-relation-tree_toOne.js

@@ -1,8 +1,7 @@
 import React, { PureComponent } from "react";
 import { Tree } from "antd";
-import { fromJS } from 'immutable';
-import template from 'lodash/template';
 import update from 'lodash/update';
+import get from 'lodash/get';
 import 'antd/lib/tree/style/index.css';
 const TreeNode = Tree.TreeNode;
 
@@ -14,11 +13,11 @@ export default class RelationTree extends PureComponent {
       autoExpandParent: true,
       checkedKeys: [],
       treeData: [],
-      data: fromJS({
+      data: {
         [props.relation.to]: {
           edges: []
         }
-      })
+      }
     }
   }
 
@@ -60,7 +59,7 @@ export default class RelationTree extends PureComponent {
 
   updateData = (data) => {
     const {relation, uiParams: {textCol}} = this.props;
-    const treeData = genRelationTree(data.getIn([relation.to, 'edges']).map(edge => edge.get('node')).toJS(), textCol);
+    const treeData = genRelationTree(get(data, [relation.to, 'edges']).map(edge => edge.node), textCol);
     this.setState({
       treeData,
       data
@@ -73,14 +72,12 @@ export default class RelationTree extends PureComponent {
     const {onChange, refId, value, relation} = this.props;
     const {data} = this.state;
     if (checkedKeys.length > 1 && !nodes[1].props.disableCheckbox) {
-      const checked = data.getIn([relation.to, 'edges'])
-        .find(edge => edge.get('cursor') === checkedKeys[1])
-        .get('node');
+      const checked = get(data, [relation.to, 'edges'], [])
+        .find(edge => edge.cursor === checkedKeys[1]).node;
       onChange(refId, 'connect', checked);
     } else if (checkedKeys[0] && !nodes[0].props.disableCheckbox) {
-      const checked = data.getIn([relation.to, 'edges'])
-        .find(edge => edge.get('cursor') === checkedKeys[0])
-        .get('node');
+      const checked = get(data, [relation.to, 'edges'])
+        .find(edge => edge.cursor === checkedKeys[0]).node;
       onChange(refId, 'connect', checked);
     } else {
       onChange(refId, 'disconnect', value);
@@ -98,27 +95,27 @@ export default class RelationTree extends PureComponent {
           </TreeNode>
         );
       }
-      return <TreeNode {...item} disableCheckbox={isSelf || disableCheckbox}/>;
+      return <TreeNode {...item} key={item.key} disableCheckbox={isSelf || disableCheckbox}/>;
     });
   }
 
   render() {
     const { treeData, data } = this.state;
     const { value, refId, relation } = this.props;
     const [key, index] = refId.getPathArr();
-    const checkedId = value && value.get('id');
+    const checkedId = value && value.id;
     let selfId = null;
     if (key === relation.to) {
       // self relation
-      selfId = data.getIn([key, 'edges', index, 'cursor']);
+      selfId = get(data, [key, 'edges', index, 'cursor']);
     }
     return (
       <Tree
         defaultExpandAll
         checkStrictly
         checkable
         onCheck={this.onCheck}
-        checkedKeys={value ? [value.get('id')] : []}
+        checkedKeys={value ? [value.id] : []}
       >
         {this.renderTreeNodes(treeData, checkedId, selfId)}
       </Tree>
@@ -162,24 +159,3 @@ function genRelationTree(data, textCol, treeData, treeMap) {
   return treeData;
 
 }
-
-function getTag(v, uiParams) {
-  // use value and uiParams to generateTagName
-  const {textCol, subtextCol, renderText} = uiParams;
-  let tag = '';
-  if (renderText) {
-    // if there is renderText, textCol and subtextCol will be ignored;
-    const compiler = template(renderText);
-    try {
-      tag = compiler(v);
-    } catch (e) {
-      throw e;
-    }
-  } else {
-    const text = v[textCol];
-    const subtext = v[subtextCol];
-    tag = text + (subtext ? `(${subtext})` : '');
-  }
-
-  return tag;
-}

examples/simple-ecommerce/package.json

@@ -6,10 +6,8 @@
     "start": "canner script:serve"
   },
   "dependencies": {
-    "@canner/cli": "^2.3.2",
+    "@canner/cli": "latest",
     "antd": "^3.7.1",
-    "canner-script": "^1.2.0",
-    "immutable": "^3.8.2",
     "lodash": "^4.17.10",
     "react": "^16.4.1"
   }