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

2024-12-04 04:58:55 +08:00 · 2016-01-16 14:50:45 +08:00 · 2016-01-16 14:50:45 +08:00 · f178e9aa61
commit f178e9aa61
parent 341ad18eb6 fa7bc2629d
10 changed files with 70 additions and 116 deletions
--- a/components/tree-select/demo/basic.md
+++ b/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) {
-    let value;
-    if (e.target) {
-      value = e.target.value;
-    } else {
-      value = e;
-    }
+  onChange(value) {
    this.setState({value});
  },
  render() {
--- a/components/tree-select/demo/checkable.md
+++ b/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>
-  <Demo />
-</div>
-, document.getElementById('components-tree-select-demo-enhance'));
+ReactDOM.render(<Demo />, document.getElementById('components-tree-select-demo-checkable'));
 ````
--- a/components/tree-select/index.md
+++ b/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) |  |
--- a/components/tree/demo/basic-controlled.md
+++ b/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,33 +104,25 @@ const Demo = React.createClass({
      expandedKeys: expandedKeys,
    });
  },
-  onCheck(info) {
-    console.log('check: ', info);
+  onCheck(checkedKeys) {
    this.setState({
-      checkedKeys: getCheckedKeys(info.node, info.checkedKeys, info.allCheckedNodesKeys),
+      checkedKeys,
      selectedKeys: ['0-3', '0-4'],
    });
  },
-  onSelect(info) {
-    console.log('selected: ', 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];
-    }
+  onSelect(selectedKeys, info) {
+    console.log('onSelect', info);
    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}/>;
      });
--- a/components/tree/demo/basic.md
+++ b/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 {
--- a/components/tree/demo/contextmenu.md
+++ b/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(e.target);
-      if (contains(this.cmContainer, e.target)) {
-        return;
-      }
-      this.componentWillUnmount();
-      this.toolTip = null;
-    };
+    // console.log(ReactDOM.findDOMNode(this), this.cmContainer);
+    console.log(contains(ReactDOM.findDOMNode(this), this.cmContainer));
  },
  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">
-        <span>show tooltip</span>
+    this.toolTip = (<Tooltip trigger="click" placement="bottomRight" prefixCls="rc-tree-contextmenu" defaultVisible overlay={<h4>{info.node.props.title}</h4>}>
+        <span></span>
    </Tooltip>);

    const container = this.getContainer();
@ -75,17 +74,14 @@ const Demo = React.createClass({
      top: info.event.pageY + 'px',
    });

-    ReactDOM.render(<div
-      style={{padding: 10, backgroundColor: '#fff', border: '1px solid #ccc'}}>
-      <h4>{info.node.props.title}</h4>
-      {this.toolTip}
-      </div>, container);
+    ReactDOM.render(this.toolTip, 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>
    );
  },
--- a/components/tree/demo/draggable.md
+++ b/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;
--- a/components/tree/demo/dynamic.md
+++ b/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 = [];
--- a/package.json
+++ b/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-select": "~0.3.3",
+    "rc-tree": "^1.0.2",
+    "rc-tree-select": "^1.0.1",
    "rc-trigger": "~1.0.6",
    "rc-upload": "~1.8.0",
    "rc-util": "~3.0.1",
--- a/scripts/demo.js
+++ b/scripts/demo.js
@ -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');
@ -182,7 +182,9 @@ 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}`}>
@ -190,7 +192,8 @@ const PriviewImg = React.createClass({
        </div>
        <div className="preview-image-title">{this.props.alt}</div>
        <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) =>