fix: checkStrictly
This commit is contained in:
wh
parent
29370a13a9
commit
5fa28b2360
|
|
@ -1,61 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title Tree基本使用事例
|
||||
* @description 事例涵盖 checkbox如何选择，disable状态和部分选择状态。
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
import React, {
|
||||
Component
|
||||
} from 'react';
|
||||
import Tree from '../../src';
|
||||
|
||||
const TreeNode = Tree.TreeNode;
|
||||
|
||||
const defaultProps = {
|
||||
keys: ['0-0-0', '0-0-1']
|
||||
}
|
||||
console.log(Tree);
|
||||
class Demo1 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const keys = this.props.keys;
|
||||
this.state = {
|
||||
defaultExpandedKeys: keys,
|
||||
defaultSelectedKeys: keys,
|
||||
defaultCheckedKeys: keys,
|
||||
};
|
||||
}
|
||||
onSelect(info) {
|
||||
console.log('selected', info);
|
||||
}
|
||||
onCheck(info) {
|
||||
console.log('onCheck', info);
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<Tree className="myCls" showLine checkable
|
||||
defaultExpandedKeys={this.state.defaultExpandedKeys}
|
||||
defaultSelectedKeys={this.state.defaultSelectedKeys}
|
||||
defaultCheckedKeys={this.state.defaultCheckedKeys}
|
||||
onSelect={this.onSelect} onCheck={this.onCheck}
|
||||
>
|
||||
<TreeNode title="parent 1" key="0-0">
|
||||
<TreeNode title="parent 1-0" key="0-0-0" disabled>
|
||||
<TreeNode title="leaf" key="0-0-0-0" disableCheckbox />
|
||||
<TreeNode title="leaf" key="0-0-0-1" />
|
||||
</TreeNode>
|
||||
<TreeNode title="parent 1-1" key="0-0-1">
|
||||
<TreeNode title={<span style={{ color: '#08c' }}>sss</span>} key="0-0-1-0" />
|
||||
</TreeNode>
|
||||
</TreeNode>
|
||||
</Tree>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Demo1.defaultProps = defaultProps;
|
||||
|
||||
|
||||
export default Demo1;
|
||||
160
demo/Demo4.js
160
demo/Demo4.js
|
|
@ -1,160 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title Tree可搜索事例
|
||||
* @description
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
import React, {
|
||||
Component
|
||||
} from 'react';
|
||||
import FormControl from 'bee-form-control';
|
||||
import Tree from '../../src';
|
||||
|
||||
const x = 3;
|
||||
const y = 2;
|
||||
const z = 1;
|
||||
const gData = [];
|
||||
|
||||
const generateData = (_level, _preKey, _tns) => {
|
||||
const preKey = _preKey || '0';
|
||||
const tns = _tns || gData;
|
||||
|
||||
const children = [];
|
||||
for (let i = 0; i < x; i++) {
|
||||
const key = `${preKey}-${i}`;
|
||||
tns.push({
|
||||
title: key,
|
||||
key
|
||||
});
|
||||
if (i < y) {
|
||||
children.push(key);
|
||||
}
|
||||
}
|
||||
if (_level < 0) {
|
||||
return tns;
|
||||
}
|
||||
const level = _level - 1;
|
||||
children.forEach((key, index) => {
|
||||
tns[index].children = [];
|
||||
return generateData(level, key, tns[index].children);
|
||||
});
|
||||
};
|
||||
generateData(z);
|
||||
|
||||
const TreeNode = Tree.TreeNode;
|
||||
|
||||
const dataList = [];
|
||||
const generateList = (data) => {
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const node = data[i];
|
||||
const key = node.key;
|
||||
dataList.push({
|
||||
key,
|
||||
title: key
|
||||
});
|
||||
if (node.children) {
|
||||
generateList(node.children, node.key);
|
||||
}
|
||||
}
|
||||
};
|
||||
generateList(gData);
|
||||
|
||||
const getParentKey = (key, tree) => {
|
||||
let parentKey;
|
||||
for (let i = 0; i < tree.length; i++) {
|
||||
const node = tree[i];
|
||||
if (node.children) {
|
||||
if (node.children.some(item => item.key === key)) {
|
||||
parentKey = node.key;
|
||||
} else if (getParentKey(key, node.children)) {
|
||||
parentKey = getParentKey(key, node.children);
|
||||
}
|
||||
}
|
||||
}
|
||||
return parentKey;
|
||||
};
|
||||
|
||||
|
||||
class Demo4 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
expandedKeys: [],
|
||||
searchValue: '',
|
||||
autoExpandParent: true,
|
||||
}
|
||||
}
|
||||
onExpand = (expandedKeys) => {
|
||||
this.setState({
|
||||
expandedKeys,
|
||||
autoExpandParent: false,
|
||||
});
|
||||
}
|
||||
onChange = (value) => {
|
||||
// const value = e.target.value;
|
||||
const expandedKeys = [];
|
||||
dataList.forEach((item) => {
|
||||
if (item.key.indexOf(value) > -1) {
|
||||
expandedKeys.push(getParentKey(item.key, gData));
|
||||
}
|
||||
});
|
||||
const uniqueExpandedKeys = [];
|
||||
expandedKeys.forEach((item) => {
|
||||
if (item && uniqueExpandedKeys.indexOf(item) === -1) {
|
||||
uniqueExpandedKeys.push(item);
|
||||
}
|
||||
});
|
||||
this.setState({
|
||||
expandedKeys: uniqueExpandedKeys,
|
||||
searchValue: value,
|
||||
autoExpandParent: true,
|
||||
});
|
||||
}
|
||||
render() {
|
||||
const {
|
||||
searchValue,
|
||||
expandedKeys,
|
||||
autoExpandParent
|
||||
} = this.state;
|
||||
const loop = data => data.map((item) => {
|
||||
const index = item.key.search(searchValue);
|
||||
const beforeStr = item.key.substr(0, index);
|
||||
const afterStr = item.key.substr(index + searchValue.length);
|
||||
const title = index > -1 ? (
|
||||
<span>
|
||||
{beforeStr}
|
||||
<span className="u-tree-searchable-filter">{searchValue}</span>
|
||||
{afterStr}
|
||||
</span>
|
||||
) : <span>{item.key}</span>;
|
||||
if (item.children) {
|
||||
return (
|
||||
<TreeNode key={item.key} title={title}>
|
||||
{loop(item.children)}
|
||||
</TreeNode>
|
||||
);
|
||||
}
|
||||
return <TreeNode key={item.key} title={title} />;
|
||||
});
|
||||
return (
|
||||
<div>
|
||||
<FormControl
|
||||
style={{ width: 200 }}
|
||||
placeholder="Search"
|
||||
onChange={this.onChange}
|
||||
/>
|
||||
<Tree
|
||||
onExpand={this.onExpand}
|
||||
expandedKeys={expandedKeys}
|
||||
autoExpandParent={autoExpandParent}
|
||||
>
|
||||
{loop(gData)}
|
||||
</Tree>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo4;
|
||||
|
|
@ -34,12 +34,18 @@ class Demo1 extends Component {
|
|||
console.log('onCheck', info);
|
||||
}
|
||||
render() {
|
||||
let checkedKeys = {
|
||||
checked:this.state.defaultCheckedKeys
|
||||
}
|
||||
return (
|
||||
<Tree className="myCls" showLine checkable
|
||||
defaultExpandedKeys={this.state.defaultExpandedKeys}
|
||||
defaultSelectedKeys={this.state.defaultSelectedKeys}
|
||||
defaultCheckedKeys={this.state.defaultCheckedKeys}
|
||||
onSelect={this.onSelect} onCheck={this.onCheck}
|
||||
defaultSelectedKeys={this.state.defaultSelectedKeys}
|
||||
// defaultCheckedKeys = {this.state.defaultCheckedKeys}
|
||||
checkedKeys={checkedKeys}
|
||||
checkStrictly = {true}
|
||||
onSelect={this.onSelect} onCheck={this.onCheck}
|
||||
|
||||
>
|
||||
<TreeNode title="parent 1" key="0-0">
|
||||
<TreeNode title="parent 1-0" key="0-0-0" disabled>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -227,6 +227,7 @@ class Tree extends React.Component {
|
|||
if (!checked && index > -1) {
|
||||
checkedKeys.splice(index, 1);
|
||||
}
|
||||
this.treeNodesStates[treeNode.props.pos].checked = checked;
|
||||
newSt.checkedNodes = [];
|
||||
loopAllChildren(this.props.children, (item, ind, pos, keyOrPos) => {
|
||||
if (checkedKeys.indexOf(keyOrPos) !== -1) {
|
||||
|
|
@ -264,6 +265,9 @@ class Tree extends React.Component {
|
|||
}
|
||||
this.props.onCheck(checkedKeys, newSt);
|
||||
}
|
||||
this.setState({
|
||||
checkedKeys,
|
||||
});
|
||||
}
|
||||
|
||||
onSelect(treeNode) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue