Merge branch 'develop-0.12.0' of github.com:ant-design/ant-design into develop-0.12.0

components/tree-select/demo/basic.md

@@ -9,6 +9,7 @@
 ````jsx
 import { TreeSelect } from 'antd';
 const TreeNode = TreeSelect.TreeNode;
+import React from 'react';
 
 const Demo = React.createClass({
   getInitialState() {
@@ -16,13 +17,7 @@ const Demo = React.createClass({
       value: 'leaf1',
     };
   },
-  onChange(e) {
+  onChange(value) {
-    let value;
-    if (e.target) {
-      value = e.target.value;
-    } else {
-      value = e;
-    }
     this.setState({value});
   },
   render() {

components/tree-select/demo/checkable.md

@@ -9,6 +9,7 @@
 ````jsx
 import { TreeSelect } from 'antd';
 const TreeNode = TreeSelect.TreeNode;
+import React from 'react';
 
 const x = 3;
 const y = 2;
@@ -43,14 +44,8 @@ const Demo = React.createClass({
       value: ['0-0'],
     };
   },
-  onSelect(selectedKey, node, selectedKeys) {
-    console.log('selected: ', selectedKey, selectedKeys);
-    this.setState({
-      value: selectedKeys,
-    });
-  },
   onChange(value) {
-    console.log('selected ' + value);
+    console.log('onChange ' + value);
     this.setState({
       value: value,
     });
@@ -65,12 +60,10 @@ const Demo = React.createClass({
       });
     };
     const tProps = {
-      // defaultValue: this.state.value,
       value: this.state.value,
       onChange: this.onChange,
-      onSelect: this.onSelect,
       multiple: true,
-      // treeCheckable: true,
+      treeCheckable: true,
       treeDefaultExpandAll: true,
     };
     return (<div style={{padding: '10px 30px'}}>
@@ -82,8 +75,5 @@ const Demo = React.createClass({
   },
 });
 
-ReactDOM.render(<div>
+ReactDOM.render(<Demo />, document.getElementById('components-tree-select-demo-checkable'));
-  <Demo />
-</div>
-, document.getElementById('components-tree-select-demo-enhance'));
 ````

components/tree-select/index.md

@@ -22,7 +22,7 @@
 | defaultValue | 指定默认选中的条目 | string/Array<String>   |  无  |
 | multiple   | 支持多选 | boolean | false |
 | tags | 可以把随意输入的条目作为 tag，输入项不需要与下拉选项匹配 | boolean |false |
-| onSelect | 被选中时调用，参数为选中项的 value 值 | function(value, option) | 无   |
+| onSelect | 被选中时调用，参数为选中项的 value 值 | function(value) | 无   |
 | onChange | 选中option，或input的value变化(combobox 模式下)时，调用此函数 | function(value, label) | 无 |
 | allowClear | 显示清除按钮 | boolean | false |
 | onSearch | 文本框值变化时回调 | function(value: String) |  |

components/tree/demo/basic-controlled.md

@@ -9,6 +9,7 @@
 ````jsx
 import { Tree } from 'antd';
 const TreeNode = Tree.TreeNode;
+import React, {PropTypes} from 'react';
 
 const x = 3;
 const y = 2;
@@ -38,44 +39,6 @@ const generateData = (_level, _preKey, _tns) => {
 };
 generateData(z);
 
-
-function isInclude(smallArray, bigArray) {
-  return smallArray.every((ii, i) => {
-    return ii === bigArray[i];
-  });
-}
-// console.log(isInclude(['0', '1'], ['0', '10', '1']));
-
-function getCheckedKeys(node, checkedKeys, allCheckedNodesKeys) {
-  const nodeKey = node.props.eventKey;
-  let newCks = [...checkedKeys];
-  let nodePos;
-  const unCheck = allCheckedNodesKeys.some(item => {
-    if (item.key === nodeKey) {
-      nodePos = item.pos;
-      return true;
-    }
-  });
-  if (unCheck) {
-    const nArr = nodePos.split('-');
-    newCks = [];
-    allCheckedNodesKeys.forEach(item => {
-      const iArr = item.pos.split('-');
-      if (item.pos === nodePos ||
-        nArr.length > iArr.length && isInclude(iArr, nArr) ||
-        nArr.length < iArr.length && isInclude(nArr, iArr)) {
-        // 过滤掉 非父级节点 和 所有子节点。
-        // 因为 node节点 不选时，其 非父级节点 和 所有子节点 都不选。
-        return;
-      }
-      newCks.push(item.key);
-    });
-  } else {
-    newCks.push(nodeKey);
-  }
-  return newCks;
-}
-
 function loopData(data, callback) {
   const loop = (d, level = 0) => {
     d.forEach((item, index) => {
@@ -111,11 +74,11 @@ function getFilterExpandedKeys(data, expandedKeys) {
 
 const Demo = React.createClass({
   propTypes: {
-    multiple: React.PropTypes.bool,
+    multiple: PropTypes.bool,
   },
   getDefaultProps() {
     return {
-      multiple: false,
+      multiple: true,
     };
   },
   getInitialState() {
@@ -141,35 +104,27 @@ const Demo = React.createClass({
       expandedKeys: expandedKeys,
     });
   },
-  onCheck(info) {
+  onCheck(checkedKeys) {
-    console.log('check: ', info);
     this.setState({
-      checkedKeys: getCheckedKeys(info.node, info.checkedKeys, info.allCheckedNodesKeys),
+      checkedKeys,
       selectedKeys: ['0-3', '0-4'],
     });
   },
-  onSelect(info) {
+  onSelect(selectedKeys, info) {
-    console.log('selected: ', info);
+    console.log('onSelect', info);
-    let selectedKeys = [...this.state.selectedKeys];
-    const index = selectedKeys.indexOf(info.node.props.eventKey);
-    if (index > -1) {
-      selectedKeys.splice(index, 1);
-    } else if (this.props.multiple) {
-      selectedKeys.push(info.node.props.eventKey);
-    } else {
-      selectedKeys = [info.node.props.eventKey];
-    }
     this.setState({
-      selectedKeys: selectedKeys,
+      selectedKeys,
     });
   },
   render() {
     const loop = data => {
       return data.map((item) => {
         if (item.children) {
-          return <TreeNode key={item.key} title={item.key} disableCheckbox={item.key === '0-0-0' ? true : false}>{loop(item.children)}</TreeNode>;
+          return (<TreeNode key={item.key} title={item.key} disableCheckbox={item.key === '0-0-0' ? true : false}>
+            {loop(item.children)}
+          </TreeNode>);
         }
-        return <TreeNode key={item.key} title={item.key} />;
+        return <TreeNode key={item.key} title={item.key}/>;
       });
     };
     return (<div>

components/tree/demo/basic.md

@@ -9,10 +9,11 @@
 ````jsx
 import { Tree } from 'antd';
 const TreeNode = Tree.TreeNode;
+import React, {PropTypes} from 'react';
 
 const Demo = React.createClass({
   propTypes: {
-    keys: React.PropTypes.array,
+    keys: PropTypes.array,
   },
   getDefaultProps() {
     return {

components/tree/demo/contextmenu.md

@@ -10,6 +10,7 @@
 import { Tree, Tooltip } from 'antd';
 import assign from 'object-assign';
 const TreeNode = Tree.TreeNode;
+import React from 'react';
 
 function contains(root, n) {
   let node = n;
@@ -26,14 +27,8 @@ const Demo = React.createClass({
   propTypes: {},
   componentDidMount() {
     this.getContainer();
-    document.body.onclick = (e) => {
+    // console.log(ReactDOM.findDOMNode(this), this.cmContainer);
-      // console.log(e.target);
+    console.log(contains(ReactDOM.findDOMNode(this), this.cmContainer));
-      if (contains(this.cmContainer, e.target)) {
-        return;
-      }
-      this.componentWillUnmount();
-      this.toolTip = null;
-    };
   },
   componentWillUnmount() {
     if (this.cmContainer) {
@@ -49,6 +44,10 @@ const Demo = React.createClass({
     console.log('right click', info);
     this.renderCm(info);
   },
+  onMouseEnter(info) {
+    console.log('enter', info);
+    this.renderCm(info);
+  },
   onMouseLeave(info) {
     console.log('leave', info);
   },
@@ -64,8 +63,8 @@ const Demo = React.createClass({
       ReactDOM.unmountComponentAtNode(this.cmContainer);
       this.toolTip = null;
     }
-    this.toolTip = (<Tooltip placement="bottomRight" title="tooltip">
+    this.toolTip = (<Tooltip trigger="click" placement="bottomRight" prefixCls="rc-tree-contextmenu" defaultVisible overlay={<h4>{info.node.props.title}</h4>}>
-        <span>show tooltip</span>
+        <span></span>
     </Tooltip>);
 
     const container = this.getContainer();
@@ -75,17 +74,14 @@ const Demo = React.createClass({
       top: info.event.pageY + 'px',
     });
 
-    ReactDOM.render(<div
+    ReactDOM.render(this.toolTip, container);
-      style={{padding: 10, backgroundColor: '#fff', border: '1px solid #ccc'}}>
-      <h4>{info.node.props.title}</h4>
-      {this.toolTip}
-      </div>, container);
   },
   render() {
     return (
       <div>
         <h2>right click contextmenu</h2>
         <Tree onRightClick={this.onRightClick} onSelect={this.onSelect}
+          defaultSelectedKeys={['0-1', '0-1-1']}
           multiple defaultExpandAll showLine>
           <TreeNode title="parent 1" key="0-1">
             <TreeNode title="parent 1-0" key="0-1-1">
@@ -98,6 +94,18 @@ const Demo = React.createClass({
             </TreeNode>
           </TreeNode>
         </Tree>
+        <h2>hover popup contextmenu</h2>
+        <Tree onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onSelect={this.onSelect} multiple defaultExpandAll showLine>
+          <TreeNode title="parent 1" key="0-1">
+            <TreeNode title="parent 1-0" key="0-1-1">
+              <TreeNode title="leaf" />
+              <TreeNode title="leaf" />
+            </TreeNode>
+            <TreeNode title="parent 1-1">
+              <TreeNode title="leaf" />
+            </TreeNode>
+          </TreeNode>
+        </Tree>
       </div>
     );
   },

components/tree/demo/draggable.md

@@ -9,6 +9,7 @@
 ````jsx
 import { Tree } from 'antd';
 const TreeNode = Tree.TreeNode;
+import React from 'react';
 
 const x = 3;
 const y = 2;

components/tree/demo/dynamic.md

@@ -9,6 +9,7 @@
 ````jsx
 import { Tree } from 'antd';
 const TreeNode = Tree.TreeNode;
+import React from 'react';
 
 function generateTreeNodes(treeNode) {
   const arr = [];

package.json

@@ -61,8 +61,8 @@
     "rc-tabs": "~5.6.0",
     "rc-time-picker": "~1.1.0",
     "rc-tooltip": "~3.3.0",
-    "rc-tree": "~0.26.1",
+    "rc-tree": "^1.0.2",
-    "rc-tree-select": "~0.3.3",
+    "rc-tree-select": "^1.0.1",
     "rc-trigger": "~1.0.6",
     "rc-upload": "~1.8.0",
     "rc-util": "~3.0.1",

scripts/demo.js

@@ -1,6 +1,6 @@
 function camelize(str) {
-  return str.replace (/(?:^|[-_])(\w)/g, function (_, c) {
+  return str.replace(/(?:^|[-_])(\w)/g, function (_, c) {
-    return c ? c.toUpperCase () : '';
+    return c ? c.toUpperCase() : '';
   });
 }
 
@@ -32,7 +32,7 @@ var React = require('react');
 var ReactDOM = require('react-dom');
 var semver = require('semver');
 window.antd = antd;
-window.React = React;
+window.React = window.react = React;
 window.ReactDOM = ReactDOM;
 window['object-assign'] = require('object-assign');
 window['classnames'] = require('classnames');
@@ -166,15 +166,15 @@ const PriviewImg = React.createClass({
     });
   },
   handleImgChange(current) {
-    this.setState({ current });
+    this.setState({current});
   },
   render() {
     const goodCls = this.props.good ? 'good' : '';
     const badCls = this.props.bad ? 'bad' : '';
     const imgsPack = this.props.imgsPack || [{
-      src: this.props.src,
+        src: this.props.src,
-      alt: this.props.alt,
+        alt: this.props.alt,
-    }];
+      }];
     const imgStyle = {};
     if (this.props.noPadding) {
       imgStyle.padding = '0';
@@ -182,21 +182,24 @@ const PriviewImg = React.createClass({
     }
     const current = this.state.current;
     const arrows = imgsPack.length > 1;
-    const createMarkup = () => { return { __html: this.props.description } };
+    const createMarkup = () => {
+      return {__html: this.props.description}
+    };
     return (
       <div className="preview-image-box" style={{ width: this.props.width }}>
         <div className={`preview-image-wrapper ${goodCls} ${badCls}`}>
-          <img src={this.props.src} onClick={this.showImageModal} style={imgStyle} alt="Sample Picture" />
+          <img src={this.props.src} onClick={this.showImageModal} style={imgStyle} alt="Sample Picture"/>
         </div>
         <div className="preview-image-title">{this.props.alt}</div>
-        <div className="preview-image-description" dangerouslySetInnerHTML={createMarkup()} />
+        <div className="preview-image-description" dangerouslySetInnerHTML={createMarkup()}/>
-        <Modal className="image-modal" width="960" visible={this.state.visible} onCancel={this.handleCancel} footer="" title="">
+        <Modal className="image-modal" width="960" visible={this.state.visible} onCancel={this.handleCancel} footer=""
+               title="">
           <Carousel afterChange={this.handleImgChange} adaptiveHeight arrows={arrows}>
             {
               imgsPack.map((img, i) =>
                 <div key={i}>
                   <div className="image-modal-container">
-                    <img src={img.src} />
+                    <img src={img.src}/>
                   </div>
                 </div>
               )
@@ -209,9 +212,9 @@ const PriviewImg = React.createClass({
   }
 });
 
-InstantClickChangeFns.push(function() {
+InstantClickChangeFns.push(function () {
   const previewImageBoxes = $('.preview-img').parent();
-  previewImageBoxes.each(function(i, box) {
+  previewImageBoxes.each(function (i, box) {
     box = $(box);
     let priviewImgs = [];
     const priviewImgNodes = box.find('.preview-img');
@@ -219,7 +222,7 @@ InstantClickChangeFns.push(function() {
     // 判断是否要做成图片集合
     // 指定了封面图片就是
     let coverImg;
-    priviewImgNodes.each(function(i, img) {
+    priviewImgNodes.each(function (i, img) {
       if (img.hasAttribute('as-cover')) {
         coverImg = img;
         return false;
@@ -229,13 +232,13 @@ InstantClickChangeFns.push(function() {
     if (coverImg) {
       const imgs = [];
       priviewImgNodes.each((i, img) => imgs.push(img));
-      priviewImgs = <PriviewImg src={coverImg.src} alt={coverImg.alt} imgsPack={imgs} />;
+      priviewImgs = <PriviewImg src={coverImg.src} alt={coverImg.alt} imgsPack={imgs}/>;
     } else {
-      priviewImgNodes.each(function(i, img) {
+      priviewImgNodes.each(function (i, img) {
         priviewImgs.push(
           <PriviewImg key={i} src={img.src} width={100.0/priviewImgNodes.length + '%'} alt={img.alt}
-            noPadding={img.hasAttribute('noPadding')} description={img.getAttribute('description')}
+                      noPadding={img.hasAttribute('noPadding')} description={img.getAttribute('description')}
-            good={!!img.hasAttribute('good')} bad={!!img.hasAttribute('bad')} />
+                      good={!!img.hasAttribute('good')} bad={!!img.hasAttribute('bad')}/>
         );
       });
     }