Comments (5)
Searching through closed items isn't really the scope of the search bar, it's mostly intended as an accessibility feature to more quickly traverse the tree DOM. Finding a specific item in the tree structure depends on the way how the tree data is structured, and this structure can vary greatly between use cases.
However, I added a function "tree.expandSubsequently" that can be used to expand a path of folders, to be able to more easily expand to a certain item. With that, and custom search implementation, something like this shouldn't be that hard to implement. I built a sample in the documentation, alongside an explanation of the idea: https://rct.lukasbach.com/docs/guides/search#finding-items-that-are-not-loaded-in
from react-complex-tree.
I manually wrote a workaround, that essentially does this.
My 2cents is that the ideal API would be to optionally search the whole tree and auto expand any branches that contain matches, and then as the search changes, close any branches that were auto-opened, should they no longer contain a match ... this is what I built, as it works for my personal use case, for accessibility, and I am just guessing that it would be a common one. I will look at what you added, thank you very much! I appreciate the response and effort!
from react-complex-tree.
Yes I agree. I might add a more direct interface for directly finding items in the future, but as I mentioned the kind of data structure can vary by use case, and the user can essentially provide an incomplete tree, though I guess this would still be doable with the onMissingItems handler. But maybe this new handler makes building a custom search easy enough.
from react-complex-tree.
This feature would be extremely useful. In fact that's how I thought search would work by default.
@marchingband Would it be possible for you to share the workaround you implemented?
from react-complex-tree.
@justchaying Here is a snippet, I basically manually do a search:
const handleChangeSearch = useCallback(search=>{
console.log(search.length)
setSearchText(search)
if(!search.length) return
const files = Object.values(items)
const children = files.filter(item=>(item.data.name || "").includes(search.toLowerCase())).map(item=>item.index)
// const parents = files.filter(item=>item.children.some(c=>children.includes(c))).map(item=>item.index)
const parents = files.filter(item=>hasDescendantIn(item, files, children)).map(item=>item.index)
setExpandedItems([...expandedItems, ...parents])
}, [expandedItems, searchText, items])
and update expandedItems
in the viewState
.
<ControlledTreeEnvironment
...
viewState={{
["tree-1"]: {
focusedItem,
expandedItems : expandedItems,
// expandedItems: [...expandedItems, ...expandedInSearch],
selectedItems
}
}}
...
>
And I have a custom search bar to do the work
const Search = ({ props, handleChangeSearch, close }) => {
console.log(props)
const [text, setText] = useState()
const dummy = useRef()
return(
<div className={'search-input-container'}>
{/* <div className={'rct-tree-search-input-container'}> */}
{/* <span className="rct-tree-input-icon" /> */}
<input
{...props}
value={text}
className={'rct-tree-search-input'}
onChange={e=>{
handleChangeSearch(e.target.value)
props.onChange(e)
setText(e.target.value)
}}
onBlur={()=>{
setTimeout(()=>{
handleChangeSearch("")
props.onBlur()
}, 100)
close()
}}
/>
</div>
)
}
I don't know if that will help but good luck.
from react-complex-tree.
Related Issues (20)
- Expose treeItem internals HOT 1
- Item sort order is not maintained when reparenting multiselections HOT 1
- can make overrideOldSelection is customizable when calling selectUpTo? HOT 1
- Data fetching & virtualization HOT 3
- Can't focus tree by using just keyboard. HOT 4
- Enable setting custom `TreeItemElement` component HOT 1
- Indirectly selecting the starting item in a `shift` multiselect action results in an incorrect multiselection HOT 3
- custom styling causing drag between line in incorrect position HOT 4
- How to update the browser history / url in the address bar when triggering onPrimaryAction={onSelect} in order to be able to reload the page selecting the same tree item? HOT 3
- OnDrop returns not correct childIndex for target.targetType = 'between-items' HOT 3
- Drag and Drop does not work when title is Anchor <a> tag HOT 5
- Context Menu For Each Folder And Item HOT 3
- Multiple drag an drop items get inserted in wrong order HOT 1
- UncontrolledTreeEnvironment is throwing error HOT 2
- a.createContext is not a function HOT 4
- no nodes in the tabOrder after drop on non-expanded parent HOT 1
- Illegal drag-between and drag-over is allowed with key commands HOT 12
- Custom renderers prevent automatic renaming abort on outside click HOT 3
- Arrow Direction Not Changing Based on Language/Orientation (RTL/LTR) HOT 2
- [Question] How does it work with reactflow? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-complex-tree.