shunjizhan / react-folder-tree Goto Github PK
View Code? Open in Web Editor NEWA versatile react treeview library that supports custom icons and event handlers
Home Page: https://www.npmjs.com/package/react-folder-tree
A versatile react treeview library that supports custom icons and event handlers
Home Page: https://www.npmjs.com/package/react-folder-tree
How to add more icons to file other than rename, delete.
I wanted to add a custom icon to the file right side (TreeNodeToolBar) for more options.
when I want a pure folder tree, I mean I don't need checkbox before each item
Hi,
When I perform tasks on any branch I can perfectly capture which of them I am referring to, with the "onChange".
But if I try to delete a "branch" (for now I have only tried it in folders) when accessing the "state" through the path of the "event" (these are the parameters that onChange returns and that I used in the other tasks ) the branch in question is gone so I can't use its information.
Is there a way to capture the data (path, "_id",... whatever) so I can tell which branch I was trying to delete before it disappears?
I know you already have something implemented in the line...
handleCheck,
handleRename,
handleDelete,
handleAddNode,
handleToggleOpen,
but I have tried to use it by adding the following to the call to the component....
<FolderTree
handleDelete={() => {console.log("handleDelete!!!!")}}
...
/>
But it's not working,
can i use the handleDelete?
How ?
Thank you,
Ernesto
I am trying to use it in Next.js project and i am getting this error:
Server Error
ReferenceError: self is not defined
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
.next\server\pages\page2.js (1:0) @ Object.react-folder-tree
1 | module.exports = require("react-folder-tree");;
Call Stack
webpack_require
.next\server\webpack-runtime.js (21:0)
How I can implement pop up window to show file name on onNameclick/ hover
I have tried react -popup library but failed.
Const onNameclick=(nodeData) =>{ <> <Popup triggered={nodeData.name} position="right-centre"> <span>{nodeData.name}</span> </Popup> </> } ... <FolderTree data={testData} onNameclick={onNameclick}/> ....
Hey, thanks for cool component!
Is there a way to attach some new logic to single elements when mouse events occur?
For example, I would like to add a tooltip with different contents on top of items when I hover each.
Hi,
I am trying to create a folder tree diff view. I want my users to navigate one tree and if path is found in another tree open it programmatically.
So we have foldertree1 and foldertree2, when a user click the arrow to open the tree, foldertree2 will be alos open the same path. In the screenshot, when I click green , I want to programmatically open 2nd tree (indicated by red arrow).
Please advice.
As I inspected, it is caused by:
Using style-loader in webpack config to include scss file, causing 'document is not defined' error
The global object using self so it can not be used on Node.js, causing 'self is not defined' error
So to fix these in my opinion, we will have to change the webpack config and also usage of this library:
globalObject: 'this'
to output
of webpack, as hereHow to Hide curd operations
for folders, it is common to allow for both the label click and the caret click to expand / contract the folder contents. Is there a way to do this?
This issue is coming when using entries in large number, say 200+. Although with less entries it works fine.
Is there a way to use custom icons per file folder preferably defining them within the initData
itself, like this:-
const initData = {
name: "node",
isOpen: true,
children: [],
icon: SomeComponent
}
We can use onNameClick
to prevent showing the edit UI when the name is clicked, but if they click the icon they'll see it anyways. We can then override the entire icon, but it would be nice to either simply have a prop that doesn't allow any editing, or also allow an onIconClick
prop to override the onClick for icons without making an entire icon to do so.
Please add support for auto selection of an item having same key/_id across the tree at different levels. This way user no need to do it manually.
at the moment by initialisation all the node are having open
state.
is there a way to render then in closed
state?
I want to change the default name when creating a new file. For example "new page" I want to use for new functionality. Thanks very much
Could not resolve dependency: React 18
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0 || ^17" from react-folder-tree@5.0.3
npm ERR! node_modules/react-folder-tree
npm ERR! react-folder-tree@"*" from the root project
I would like to customize the new file icon and the folder icon, so that when I press them I can show my dialog window, instead than creating the default file named "new file" and the default folder.
Also, it would be great if the event state contains the path of the new file/folder created.
Is that possible?
when we are editing the name a black border with 2px appears, I try to edit the css through the detected structure...
`.editableNameContainer {
.EditableName {
.editingName {
input {
&:focus {
}
}
}
}
}`
but I can't change it
someone knows ?
Thank you,
Ernesto
I want to apply different css to each tree node with the property values of the json data that goes into the data property.
(Different colors for each folder node)
Is there any way to implement this functionality?
when I set
initOpenStatus='custom'
and set the corresponding isOpen
property to true or false, I get the following error in the console:
custom open status is invalid! Fell back to all opened.
anything else I need to do to get this working? (using version 5.0.3)
thx - Ole
The question is simple. I am trying to set a dictionary with existing "isOpen" keys, so that I can control which nodes are open/closed.
This is the basic example where I set a dict with "isOpen" keys to false, however, whenever I refresh it the tree renders all nodes expanded.
import FolderTree from "react-folder-tree";
import my-data from "./data-test.json";
import React, { useState} from "react";
const BasicTree = () => {
const [treeState, setTreeState] = useState(my-data);
console.log(treeState);
return (
<>
<FolderTree data={treeState} />
</>
);
};
export default BasicTree;
This comes from a more complex setup, where I receive a JSON from an api and set the new directoryTree using useState. The problem is that the FolderTree does not preserve the open/close status from the previous render, so now I am reading the previous status and manually setting the "isOpen" attributes to maintain that state. However, it still does not work. It renders the whole tree open. Minimal example:
import React, { useState, useEffect, useRef } from "react";
import readValue from "./api";
import FolderTree from "react-folder-tree";
const MyDirectory = () => {
const { dirTree, setDirTree } = useState();
const onValueReceived = (value) => {
console.log("Value recived: " + JSON.stringify(value));
setDirTree(value);
};
const onTreeStateChange = (state, event) => {};
const onNameClick = ({ defaultOnClick, nodeData }) => {
defaultOnClick();
const {
path,
name,
checked,
isOpen,
// custom data
} = nodeData;
readValue(name)
.then((value) => onValueReceived(value))
.catch((e) => {console.log(e)});
};
return( {
dirTree ? (
<FolderTree
data={dirTree}
onNameClick={onNameClick}
onChange={onTreeStateChange}
/>
) : (
<></>
);});
export default MyDirectory;
My question is:
How can I preserve the open/closed state of the nodes when updating the tree state?
On the other hand, would it be possible that when I click on the edit name icon, the focus is already placed at the end of said name and allows me to write directly?
Getting an unexpected token error when the lib is installed using yarn/npm
Component brokes if a data file has a key named path
{
"name": "Проверка",
"title": "Проверка",
"path": "c:/PROJECTS/FileDATA/FileDATA/data",
"fullname": "c:/PROJECTS/FileDATA/FileDATA/data/Проверка",
"isDirectory": true,
"children": [
{
"name": "159.pdf",
"title": "159",
"path": "c:/PROJECTS/FileDATA/FileDATA/data/Проверка",
"fullname": "c:/PROJECTS/FileDATA/FileDATA/data/Проверка/159.pdf",
"isDirectory": false
},
First of all, thanks a lot for this great job !!!
Is it possible to remove the root folder?
Or, in other words, can we define multiple root-level folders?
Thank you.
I need it to get the mouse coordinates when a node is clicked so I can show a menu.
It would be great to have typescript support for typescript programmers, so they don't have to declare their own .d.ts file for this awsome module.
Thanks for putting this package together; it's exactly what I need!
I have it loaded in and implemented so it 'works', however anytime I refresh my browser or navigate to the page I'm using the component on it throws me the following error:
ReferenceError: self is not defined
at Object.<anonymous> (/Users/anthonyzupancic/Documents/GIT/git-connect/node_modules/react-folder-tree/dist/react-folder-tree.bundle.js:1:248)
at Module._compile (node:internal/modules/cjs/loader:1097:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1151:10)
at Module.load (node:internal/modules/cjs/loader:975:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:999:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.react-folder-tree (/Users/anthonyzupancic/Documents/GIT/git-connect/.next/server/pages/sync/create.js:955:18)
at __webpack_require__ (/Users/anthonyzupancic/Documents/GIT/git-connect/.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///./src/components/forms/asset_navigation/FolderTree.tsx:7:75) {
page: '/sync/create'
}
If I remove the component > reload my localhost > add the component/save => it works
Then I refresh my browser or navigate around and the error is thrown.
Potentially using tooling like Uglify to remove console.log statements from the production package on npm.
What is the best way to update the data held in the tree "externally"? I have my data in state and when I setState on that my tree just goes blank. It works for the initial state. Is there a way to call the addNode and deleteNode? Thanks for any help.
Is it possible autoclose opened folders when opening another folder like bootstrap accordion
The current behavior is not convenient when there are a lot of folders and files and complicates navigation
I'd like to highlight the file name being edited currently.
I tried the below css but it didn't work. Could you please guide me on how to add my own css styles.
.TreeNodde .TreeNodeToolBar {
background-color: gray;
}
.TreeNodde .editingName {
background-color: blue;
}
Feature request:
On hover show the inline tool box. Currently the tool box shows only when we click the node item.
Also press enter to add a name and rename the node item.
maybe switch to flex style to make icon align more accurate in the center
For any googlers who would like to use this project with remix:
import { ClientOnly } from 'remix-utils';
import type { Dispatch, ComponentType, LazyExoticComponent } from 'react';
import type { FolderTreeProps } from 'react-folder-tree';
const Tree: LazyExoticComponent<ComponentType<FolderTreeProps>> = lazy(
async () => {
const component = await import('react-folder-tree');
return component.default as any;
}
);
export default function Page() {
return (
<ClientOnly fallback={'Loading...'}>
{() => <Tree data={{ name: 'First' }} showCheckbox={false} />}
</ClientOnly>
)
}
Importing testData
will not work. Your best is directly copying from https://github.com/shunjizhan/react-folder-tree/blob/master/src/utils/testData.js.
Thanks for the awesome project @shunjizhan!
in tsx file, when i'm calling the function
const onNameClick = ({ defaultOnClick, nodeData }) => { console.log(nodeData)}
console is showing " undefined ".
pls tell me, how to solve this.
Hi!
I noticed that the docs mention the reserved keys that you can use to define the nodes. But I think it is missing information on what custom keys you cannot use.
I noticed this because I had a custom key called path
, but it killed the file tree (rendering was all messy) and threw a bunch of Uncaught TypeError: Cannot read property 'children' of undefined
.
Then I realized that both keys path
and _id
are used internally.
I'm suggesting you add that to the readme as well, could help avoid confusion.
Great work on the library though. Thanks!
instead of knowing the new state, it is also useful to know the previous event.
onChange({ newState, e })
how can change child data on demand
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.