Comments (6)
Hi, just upgraded to v4.1.0, which (almost) supports what you need!
Please check out the latest examples (in section Use Custom Icons)
Basically now we can do something like
const FileIcon = ({ onClick: defaultOnClick, className, path, name }) => {
const handleClick = () => {
openFile(name);
// or use 'path', which is the path to the clicked node in the root state
};
return <YourIcon onClick={ handleClick } />;
};
So when user clicks on the icon we can open the file.
If you mean onClick()
on the node name itself, unfortunately we don't seem to support this, but I will probably try to add this functionality in later versions : )
from react-folder-tree.
yup, i also would like to have this feature, when user click on the filename , not only the icon, it should able to trigger a event
from react-folder-tree.
@sunjeen yup this would be a nice one! And indeed this is on the plan
from react-folder-tree.
@sunjeen yup this would be a nice one! And indeed this is on the plan
Look forward to it, currently I have one projects is utilizing file tree components, thanks for adding it!
from react-folder-tree.
@sunjeen Hi, just released a new version that supports custom onClick()
for node name!
this is the doc for how to do it, basically if we want to open a file, we can add filePath
to each node data, then do
const onNameClick = (defaultOnClick, nodeData) => {
const { filePath } = nodeData;
openFile(filePath);
};
alternatively, if we don't want to include extra data, we can choose to derive the filePath using the file name
const onNameClick = (defaultOnClick, nodeData) => {
const { name } = nodeData;
const filePath = getFilePath(name);
openFile(filePath);
};
Please check it out and let me know if there is anything breaking 😃
from react-folder-tree.
@sunjeen Hi, just released a new version that supports custom
onClick()
for node name!this is the doc for how to do it, basically if we want to open a file, we can add
filePath
to each node data, then doconst onNameClick = (defaultOnClick, nodeData) => { const { filePath } = nodeData; openFile(filePath); };alternatively, if we don't want to include extra data, we can choose to derive the filePath using the file name
const onNameClick = (defaultOnClick, nodeData) => { const { name } = nodeData; const filePath = getFilePath(name); openFile(filePath); };Please check it out and let me know if there is anything breaking 😃
Thanks! I will try now!
from react-folder-tree.
Related Issues (20)
- Show toolbar only in clicked folders HOT 1
- The possibility of adding custom icons to add files and add folders
- Add the ability to search on the tree structure
- Remove checkbok only on files
- My hateCheckbox attribute doesn't work
- Usage with remix HOT 1
- Add support for auto selection of an item having same key/_id across the tree at different levels
- Type specification for every child HOT 1
- Cannot set properties of null (setting '_id') HOT 3
- Selection of only single child makes its parent fully checked, is there a way to make it half checked HOT 2
- How can I add new custom params when I add a file or folder.
- delete root folder HOT 2
- Delete a "branch"
- border of name edition
- edit name directly
- Specify css for each TreeNode of each folder tree
- Infinite render loop
- ReferenceError: self is not defined HOT 1
- how can i remove checkbox and add radio button imnstead of them and if this is not possible then how can i make the checkboxes like radio buttons with respect to functionality means only one selectable at a time
- Highlight Filename on Click
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-folder-tree.