From be1bad307be66c9563285ce44dfd7ef6cdacccab Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 28 Jan 2016 15:13:17 +0800 Subject: [PATCH] simplify tree demos --- components/tree/demo/basic-controlled.md | 35 +++---- components/tree/demo/basic.md | 29 +----- components/tree/demo/contextmenu.md | 115 ----------------------- components/tree/demo/draggable.md | 41 +++----- components/tree/demo/dynamic.md | 27 ++---- components/tree/index.md | 2 +- 6 files changed, 43 insertions(+), 206 deletions(-) delete mode 100644 components/tree/demo/contextmenu.md diff --git a/components/tree/demo/basic-controlled.md b/components/tree/demo/basic-controlled.md index f462b6ace..cea260fb8 100644 --- a/components/tree/demo/basic-controlled.md +++ b/components/tree/demo/basic-controlled.md @@ -9,7 +9,6 @@ ````jsx import { Tree } from 'antd'; const TreeNode = Tree.TreeNode; -import React, { PropTypes } from 'react'; const x = 3; const y = 2; @@ -73,9 +72,6 @@ function getFilterExpandedKeys(data, expandedKeys) { } const Demo = React.createClass({ - propTypes: { - multiple: PropTypes.bool, - }, getDefaultProps() { return { multiple: true, @@ -100,9 +96,7 @@ const Demo = React.createClass({ expandedKeys.push(treeNode.props.eventKey); } } - this.setState({ - expandedKeys: expandedKeys, - }); + this.setState({ expandedKeys }); }, onCheck(checkedKeys) { this.setState({ @@ -112,30 +106,27 @@ const Demo = React.createClass({ }, onSelect(selectedKeys, info) { console.log('onSelect', info); - this.setState({ - selectedKeys, - }); + this.setState({ selectedKeys }); }, render() { - const loop = data => { - return data.map((item) => { - if (item.children) { - return ( + const loop = data => data.map((item) => { + if (item.children) { + return ( + {loop(item.children)} - ); - } - return ; - }); - }; - return (
-

controlled

+ + ); + } + return ; + }); + return ( {loop(gData)} -
); + ); }, }); diff --git a/components/tree/demo/basic.md b/components/tree/demo/basic.md index 43c05ef63..9fc9101a4 100644 --- a/components/tree/demo/basic.md +++ b/components/tree/demo/basic.md @@ -2,19 +2,15 @@ - order: 0 -最简单的用法。 +最简单的用法，展示可勾选，可选中，禁用，默认展开等功能。 --- ````jsx import { Tree } from 'antd'; const TreeNode = Tree.TreeNode; -import React, { PropTypes } from 'react'; const Demo = React.createClass({ - propTypes: { - keys: PropTypes.array, - }, getDefaultProps() { return { keys: ['0-0-0', '0-0-1'], @@ -26,7 +22,6 @@ const Demo = React.createClass({ defaultExpandedKeys: keys, defaultSelectedKeys: keys, defaultCheckedKeys: keys, - switchIt: true, }; }, onExpand(treeNode, expand, expandedKeys) { @@ -38,18 +33,8 @@ const Demo = React.createClass({ onCheck(info) { console.log('onCheck', info); }, - change() { - const keys = this.props.keys; - this.setState({ - defaultExpandedKeys: ['0-0', keys[this.state.switchIt ? 0 : 1]], - defaultSelectedKeys: [keys[this.state.switchIt ? 0 : 1]], - defaultCheckedKeys: [keys[this.state.switchIt ? 1 : 0]], - switchIt: !this.state.switchIt, - }); - }, render() { - return (
-

simple

+ return ( - sss} key="0-0-1-0" /> + sss} key="0-0-1-0" /> - -
-
- -

defaultXX 的初始化状态不会改变

-
-
); + ); }, }); diff --git a/components/tree/demo/contextmenu.md b/components/tree/demo/contextmenu.md deleted file mode 100644 index 86f74407a..000000000 --- a/components/tree/demo/contextmenu.md +++ /dev/null @@ -1,115 +0,0 @@ -# 右键菜单 - -- order: 0 - -右键菜单示例 - ---- - -````jsx -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; - while (node) { - if (node === root) { - return true; - } - node = node.parentNode; - } - return false; -} - -const Demo = React.createClass({ - propTypes: {}, - componentDidMount() { - this.getContainer(); - // console.log(ReactDOM.findDOMNode(this), this.cmContainer); - console.log(contains(ReactDOM.findDOMNode(this), this.cmContainer)); - }, - componentWillUnmount() { - if (this.cmContainer) { - ReactDOM.unmountComponentAtNode(this.cmContainer); - document.body.removeChild(this.cmContainer); - this.cmContainer = null; - } - }, - onSelect(info) { - console.log('selected', info); - }, - onRightClick(info) { - console.log('right click', info); - this.renderCm(info); - }, - onMouseEnter(info) { - console.log('enter', info); - this.renderCm(info); - }, - onMouseLeave(info) { - console.log('leave', info); - }, - getContainer() { - if (!this.cmContainer) { - this.cmContainer = document.createElement('div'); - document.body.appendChild(this.cmContainer); - } - return this.cmContainer; - }, - renderCm(info) { - if (this.toolTip) { - ReactDOM.unmountComponentAtNode(this.cmContainer); - this.toolTip = null; - } - this.toolTip = ({info.node.props.title}}> - - ); - - const container = this.getContainer(); - assign(this.cmContainer.style, { - position: 'absolute', - left: info.event.pageX + 'px', - top: info.event.pageY + 'px', - }); - - ReactDOM.render(this.toolTip, container); - }, - render() { - return ( -
-

right click contextmenu

- - - - - - - - - - - - -

hover popup contextmenu

- - - - - - - - - - - -
- ); - }, -}); - -ReactDOM.render(, mountNode); -```` diff --git a/components/tree/demo/draggable.md b/components/tree/demo/draggable.md index e7fd3b29b..2a56b6a5e 100644 --- a/components/tree/demo/draggable.md +++ b/components/tree/demo/draggable.md @@ -2,14 +2,13 @@ - order: 2 -拖动示例 +将节点拖拽到其他节点内部或前后。 --- ````jsx import { Tree } from 'antd'; const TreeNode = Tree.TreeNode; -import React from 'react'; const x = 3; const y = 2; @@ -42,14 +41,11 @@ generateData(z); const Demo = React.createClass({ getInitialState() { return { - gData: gData, + gData, expandedKeys: ['0-0', '0-0-0', '0-0-0-0'], }; }, - onDragStart() { - }, onDragEnter(info) { - // console.log(info); this.setState({ expandedKeys: info.expandedKeys, }); @@ -96,26 +92,19 @@ const Demo = React.createClass({ }); }, render() { - const loop = data => { - return data.map((item) => { - if (item.children) { - return {loop(item.children)}; - } - return ; - }); - }; - return (
-

draggable

-

drag a node into another node

-
- - {loop(this.state.gData)} - -
-
); + const loop = data => data.map((item) => { + if (item.children) { + return {loop(item.children)}; + } + return ; + }); + return ( + + {loop(this.state.gData)} + + ); }, }); diff --git a/components/tree/demo/dynamic.md b/components/tree/demo/dynamic.md index 2fa3fe209..40f94d1ce 100644 --- a/components/tree/demo/dynamic.md +++ b/components/tree/demo/dynamic.md @@ -2,14 +2,13 @@ - order: 3 -异步加载数据 +点击展开节点，动态加载数据。 --- ````jsx import { Tree } from 'antd'; const TreeNode = Tree.TreeNode; -import React from 'react'; function generateTreeNodes(treeNode) { const arr = []; @@ -56,7 +55,6 @@ function getNewTreeData(treeData, curKey, child, level) { } const Demo = React.createClass({ - propTypes: {}, getInitialState() { return { treeData: [], @@ -87,22 +85,17 @@ const Demo = React.createClass({ }); }, render() { - const loop = (data) => { - return data.map((item) => { - if (item.children) { - return {loop(item.children)}; - } - return ; - }); - }; + const loop = data => data.map((item) => { + if (item.children) { + return {loop(item.children)}; + } + return ; + }); const treeNodes = loop(this.state.treeData); return ( -
-

dynamic render

- - {treeNodes} - -
+ + {treeNodes} + ); }, }); diff --git a/components/tree/index.md b/components/tree/index.md index a2fde0a6a..80cc93389 100644 --- a/components/tree/index.md +++ b/components/tree/index.md @@ -30,7 +30,7 @@ |onSelect | 点击树节点触发 | function(e:{selected:bool,node,selectedKeys,event}) | - | |filterTreeNode | filter some treeNodes as you need. it should return true | function(node) | - | |loadData | 异步加载数据 | function(node)| - | -|onRightClick | 显示右键菜单 | function({event,node}) | - | +|onRightClick | 响应右键点击 | function({event,node}) | - | |draggable | 设置节点可拖拽（IE>8） | bool | false | |onDragStart | 开始拖拽时调用 | function({event,node}) | - | |onDragEnter | dragenter 触发时调用 | function({event,node,expandedKeys}) | - |