omiu - add tree

packages/omiu/.babelrc

@@ -0,0 +1,20 @@
+{	
+  "presets": [	
+    [	
+      "env",	
+      {	
+        "loose": true,	
+        "exclude": ["transform-es2015-typeof-symbol"],	
+        "targets": {	
+          "browsers": ["last 2 versions", "IE >= 9"]	
+        }	
+      }	
+    ]	
+  ],	
+  "plugins": [	
+    "transform-class-properties",	
+    ["transform-react-jsx", { "pragma": "Omi.h" }],	
+    "transform-object-rest-spread",	
+    "syntax-dynamic-import"	
+  ]	
+}

packages/omiu/examples/package.json

@@ -18,7 +18,7 @@
     "babel-runtime": "6.26.0",
     "case-sensitive-paths-webpack-plugin": "2.1.1",
     "chalk": "1.1.3",
-    "classnames": "~2.2.1",
+    "classnames": "^2.2.6",
     "css-loader": "0.28.7",
     "dotenv": "4.0.0",
     "dotenv-expand": "4.2.0",

packages/omiu/examples/src/example.js

@@ -23,6 +23,7 @@ import '../../src/equal-space'
 import '../../src/selection'
 import '../../src/slider'
 import '../../src/switch'
+import '../../src/tree'
 
 define('my-app', class extends WeElement {
   onChange = v => {
@@ -45,7 +46,33 @@ define('my-app', class extends WeElement {
   data = {
     selectedIndex: 2,
     selectedIndexs: [0, 1],
-    percentage: 30
+    percentage: 30,
+    //defaultExpandedKeys: keys,   //默认展开 keys节点
+    //defaultSelectedKeys: keys,  //默认选中(高亮) keys节点
+    //defaultCheckedKeys: keys,  //默认Checked keys节点
+    defaultExpandedKeys: [],
+    defaultSelectedKeys: [],
+    defaultCheckedKeys: [],
+    expandedKeys: [],
+    selectedKeys: [],
+    checkedKeys: [],
+    switchIt: true,
+    treeData:[
+        {title: 'dynamic 1', key: '0-0-0' ,level:1},
+        {title: 'dynamic 2', key: '0-0-1' ,level:1}
+    ],
+    treeData2:[
+        {title: 'edit',  key: '0-0-0' ,level:1,child:[
+            {title: '子节点1', key: '0-0-0-0',level:2,child:[
+                {title: '子子节点1', key: '0-0-0-0-1',level:3},
+            ]},
+            {title: '子节点2', key: '0-0-0-1',level:2},
+        ]},
+        {title: '父节点', key: '0-0-1',level:1,child:[
+            {title: '子节点1', key: '0-0-1-0',level:2},
+            {title: '子节点2', key: '0-0-1-1',level:2}
+        ]}
+    ]
   }
 
   onTapMore = () => {
@@ -116,6 +143,60 @@ define('my-app', class extends WeElement {
   }
 
   render(props, data) {
+
+    //先查出根节点
+    function findRoot(treeData) {
+      var nodeStr=treeData.map(function(node){
+        return (
+            <tree-node title={node.title} key={node.key}>{findChild(node)}</tree-node>
+        );
+      });
+      return nodeStr;
+    }
+    //循环递归展开树
+    function findChild(node){
+      if(node!=null){
+        if(node.child!=null){
+          var str=node.child.map(function(n){
+            return(
+                <tree-node title={n.title} key={n.key}>{findChild(n)}</tree-node>
+            );
+          })
+          return str;
+        }
+      }
+    }
+
+    var dynamicNodeList=(
+      <tree-node title="根节点" key="0-0">
+        {findRoot(this.data.treeData)}
+      </tree-node>
+    );
+
+    var treeNodeList=(
+      <tree-node title="根节点" key="0-0">
+        {findRoot(this.data.treeData2)}
+      </tree-node>
+    );
+
+    const animation = {
+      enter(node, done) {
+        return animate(node, true, done);
+      },
+      leave(node, done) {
+        return animate(node, false, done);
+      },
+      appear(node, done) {
+        return animate(node, true, done);
+      }
+    };
+
+    const customLabel = (
+      <span className="cus-label">
+        <span>operations </span>
+      </span>
+    );
+    
     return (
       <div class="ctn">
         <o-button
@@ -346,6 +427,28 @@ define('my-app', class extends WeElement {
           </o-switch>
         </o-equal-space>
 
+        <h2>基础树</h2>
+        <o-tree
+            className="myCls" showLine checkable
+            defaultExpandedKeys={this.data.defaultExpandedKeys}
+            onExpand={this.onExpand}
+            defaultSelectedKeys={this.data.defaultSelectedKeys}
+            defaultCheckedKeys={this.data.defaultCheckedKeys}
+            onSelect={this.onSelect} onCheck={this.onCheck}
+            // openAnimation={animation}
+            >
+            <tree-node title="parent 1" key="0-0">
+                <tree-node title={customLabel} key="0-0-0">
+                    <tree-node title="leaf" key="0-0-0-0" />
+                    <tree-node title="leaf" key="0-0-0-1" />
+                </tree-node>
+                <tree-node title="parent 1-1" key="0-0-1">
+                    <tree-node title="parent 1-1-0" key="0-0-1-0" />
+                    <tree-node title="parent 1-1-1" key="0-0-1-1" />
+                </tree-node>
+            </tree-node>
+        </o-tree>
+
         <br />
         <br />
         <br />

packages/omiu/src/tree/index.js

@@ -6,8 +6,8 @@
  */
 
 import { define } from 'omi';
-import Tree from './Tree';
-import TreeNode from './TreeNode';
+import Tree from './tree';
+import TreeNode from './tree-node';
 
 define('tree-node', TreeNode);
 

packages/omiu/src/tree/tree-node.js

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import style from './_index.css'
 
-import { nodeContextTypes } from './contextTypes';
+import { nodeContextTypes } from './context-types';
 
 import {
     getNodeChildren,

packages/omiu/src/tree/tree.js

@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import warning from 'warning';
 
-import { treeContextTypes } from './contextTypes';
+import { treeContextTypes } from './context-types';
 
 import {
   convertTreeToEntities, 

packages/omiu/src/tree/util.js

@@ -1,7 +1,7 @@
 import {define, WeElement} from 'omi';
 // import toArray from 'rc-util/lib/Children/toArray';
 import warning from 'warning';
-import TreeNode from './TreeNode';
+import TreeNode from './tree-node';
 
 const DRAG_SIDE_RANGE = 0.25;
 const DRAG_MIN_GAP = 2;