react-component / react-component/tree
Need to use custom checkbox but still use the 'out of the box' checking /cascading behavior
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.3k
- Forks
- 490
- Avg merge
- 3d 17h
- Merged PRs (30d)
- 5
Description
hey guys I have a custom checkbox set up but when i click it it doesn't mark its children as 'selected = true' automatically:
<Tree
//showIcon={false}
//showLine={false}
switcherIcon={switcherIcon}
checkable
onExpand={this.onExpand}
expandedKeys={expandedKeys}
autoExpandParent={autoExpandParent}
onCheck={this.onCheck}
checkedKeys={this.state.checkedKeys}
onSelect={this.onSelect}
selectedKeys={this.state.selectedKeys}
filterTreeNode={this.filterTreeNode}
>
{loop(this.props.data)}
</Tree>
const loop = data =>
data.map(item => {
if (this.filterKeys && this.filterFn(item.key)) {
this.filterKeys.push(item.key)
}
if (item.children) {
return (
<TreeNode checkable={false} icon={Icon} style={{fontSize: 16, fontFamily: defaultFont.fontFamily}} key={item.key} title={item.title} disableCheckbox={item.key === 'mydisabledkey'}>
{loop(item.children)}
</TreeNode>
)
}
return <TreeNode checkable={false} icon={Icon} style={{fontSize: 16, fontFamily: defaultFont.fontFamily}} key={item.key} title={item.title} />
})
const Icon = ({ selected }) => {
return selected? <Checked></Checked> : <Unchecked></Unchecked>
}
After I check a parent, i inspect the object and observe that the item i checked has a property of 'selected = true', however, all of its children have a property of 'selected = false'. I would expect them to have selected = true
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the Tree component's checkable and onCheck behavior, then compare checkedKeys with the custom Icon's selected prop and the TreeNode settings shown. Reproduce selecting a parent with the provided data and inspect how child state is represented; done means the expected cascading behavior is confirmed or a narrowly scoped correction is identified.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 32/100