frontend-collective/react-sortable-tree-theme-file-explorer

A file explorer theme for React Sortable Tree

react-sortable-tree-theme-file-explorer's Issues

Wrap node label when it's long

I see that nodes are rendered with absolute position:

<div class="rstcustom__node" style="height: 25px; left: 0px; position: absolute; top: 50px; width: 100%;">...</div>
<div class="rstcustom__node" style="height: 25px; left: 0px; position: absolute; top: 75px; width: 100%;">...</div>
<div class="rstcustom__node" style="height: 25px; left: 0px; position: absolute; top: 100px; width: 100%;">...</div>
...
...

Is it possible to wrap the text inside div.rstcustom__rowLabel when it's longer than the width of div.rst__tree in a way that the nodes get pushed down relative to each other?

canDrag not working

Originally with canDrag={false} we stoped showing the drag options. However, with this theme we can drag from anywhere. With that in mind, canDrag should disable dragging all together if its set to false.

sourcemap crash

Incorrect package name in readme

Currently show's

import FileExplorerTheme from 'react-sortable-tree-file-explorer-theme';

Needs to be

import FileExplorerTheme from 'react-sortable-theme-tree-file-explorer';

when i use node-content-renderer to Override the default component has a style problem

when i use the node-content-render to override the default component.
use the code like this
<SortableTree theme={FileExplorerTheme} treeData={treeData} onChange={this.updateTreeData} canDrag={({node}) => !node.dragDisabled} canDrop={({nextParent}) => !nextParent || nextParent.isDirectory} nodeContentRenderer = {FileThemeNodeContentRenderer} generateNodeProps={rowInfo => ({ icons: rowInfo.node.isDirectory ? [ foldImg(rowInfo.node.expanded) ] : [ <img style={{ textAlign: 'center', marginRight: 10, width: '25px', height: '25px', }} src={file} > </img>, ], buttons: [ <button style={{ padding: 0, borderRadius: '100%', backgroundColor: 'gray', color: 'white', width: 16, height: 16, border: 0, fontWeight: 100, }} // onClick={() => alertNodeInfo(rowInfo)} > i </button> , ], })} />
and has the style problem.
please tell me it's right way to override the file-explorer component?
please write back soon...it's emergency...

`treeId` is undefined

Please make treeId not required so we don't constantly get the error:
Warning: Failed prop type: The prop 'treeId' is marked as required in 'FileThemeTreeNodeRenderer', but its value is 'undefined'.

Adding icons

How to add different icons for folders and files?

Not able to install npm react-sortable-tree-theme-file-explorer

While installing it through npm by npm i react-sortable-tree-theme-file-explorer I am getting error bellow error.

error 404 'react-sortable-tree-theme-file-explorer@latest' is not in the npm registry.

error theme when I install file explorer and full node drag

Please add a license file

Can you please add a license file to the repo? I would like to use this theme with React Sortable Tree, but I am not allowed to use it in the project unless it has a license.

Not able to toggle node if there is no children

I am trying to make a component hierarchy with this package. The only problem I am facing is toggling the state if I am not preloading it with children data. I need to asynchronously load children data on toggle action, but the code is checking the length of children array. Is it possible for you add a property like hasChildren or willHaveChildren instead of using the children array length?

Theme not applying on latest version of react-sortable-tree

I am using the following versions :-

• react-sortable-tree 2.8
• react-sortable-tree-theme-file-explorer 2.0.0
• next 9.4.4

I have used it as follows :-

const FileExplorerTheme = dynamic(() => import("react-sortable-tree-theme-file-explorer"), {
  ssr: false
});

<SortableTree
          treeData={treeData}
          onChange={handleChange}
          onMoveNode={handleMove}
          theme={FileExplorerTheme}

  />

I am getting following warning and the theme is not getting applied:-

Warning: Failed prop type: Invalid prop `theme` of type `function` supplied to `ReactSortableTree`, expected `object`.

React 17 fork

I made a fork to solve my own tasks, but if you want, you can use it as an alternative: (For React 17)

https://www.npmjs.com/package/@nosferatu500/theme-file-explorer

yarn add @nosferatu500/theme-file-explorer

Add double click.

Is there any way that I can double click a node and do something with it?

Different behaviour with canDrop.

Hey,

There seems to be different behaviour when using a theme than without.

Using the prop canDrop, the param nextParent returns null when dragged over a location. Without using a theme it would return the parent location

thanks

Scaffold - What is it?

HI There,

Could you please explain what the scaffold is supposed to be? I can't figure out what the comment means and what it's purpose is.

react-sortable-tree-theme-file-explorer/node-content-renderer.js

Lines 54 to 55 in 7e4081c

	// Construct the scaffold representing the structure of the tree
	const scaffold = [];

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

import SortableTree from 'react-sortable-tree';
import theme from 'react-sortable-tree-theme-file-explorer';

const Project = ({project: {label, tree}}) => (
  <div className="project">
    <h2 className="project__title">{label}</h2>
    <SortableTree
      theme={theme}
      treeData={tree}
    />
  </div>
);

Gives:

Warning: React.createElement: type is invalid -- expected a string (for built-in components)
or a class/function (for composite components) but got: undefined. You likely forgot to export
your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `SortableTree`.

When I look in node_modules/react-sortable-tree/dist/index.esm.js, the default export is:

var SortableTree = function SortableTree(props) {
  return React.createElement(DndProvider, {
    backend: HTML5Backend
  }, React.createElement(SortableTreeWithoutDndContext, props));
};

So, I:

> console.log(DndProvider);
undefined

A little more inspection:

$ node
Welcome to Node.js v14.15.1.
Type ".help" for more information.
> require('react-dnd')
{
  DragDropContext: [Getter],
  DragDropContextProvider: [Getter],
  DragLayer: [Getter],
  DragSource: [Getter],
  DropTarget: [Getter]
}
> require('react-dnd/package.json').version
'2.5.4'

...that's a very old version. More inspection:

> require('react-sortable-tree-theme-file-explorer/package.json').dependencies['react-dnd'];
'2.5.4'
> require('react-sortable-tree-theme-file-explorer/package.json').version;
'2.0.0'

It appears this project is badly out of date and completely broken.

How to add onClick to the leaf node label

I read the docs about https://github.com/frontend-collective/react-sortable-tree-theme-file-explorer and https://github.com/frontend-collective/react-sortable-tree, but could not find any configurations to add custom onClick to the leaf node label. I tried to override generateNodeProps, but not works.

Should I modified react-sortable-tree, pass a prop like onLeafNodeClick to it, then modified node-content-renderer.js of react-sortable-tree-theme-file-explorer to use this onLeafNodeClick like the following.

                  <div className={styles.rowLabel}>
                    <span className={styles.rowTitle}>
                      {typeof nodeTitle === 'function'
                        ? nodeTitle({
                            node,
                            path,
                            treeIndex,
                          })
                        : nodeTitle}
                      onClick={onLeafNodeClick}
                    </span>
                  </div>

But I think this is quite complex, so is there some other ways to support it.

I get this error when I use explorer theme

Warning: React does not recognize the rowDirection prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase rowdirection instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in div (created by FileThemeNodeContentRenderer)
in FileThemeNodeContentRenderer (created by DragSource(FileThemeNodeContentRenderer))
in DragSource(FileThemeNodeContentRenderer) (created by Grid)
in div (created by FileThemeTreeNodeRenderer)
in FileThemeTreeNodeRenderer (created by DropTarget(FileThemeTreeNodeRenderer))
in DropTarget(FileThemeTreeNodeRenderer) (created by Grid)
in div (created by Grid)
in div (created by Grid)
in Grid (created by List)
in List (created by Scrolling(List))
in Scrolling(List) (created by AutoSizer)
in div (created by AutoSizer)
in AutoSizer (created by ReactSortableTree)
in div (created by ReactSortableTree)
in ReactSortableTree (created by DragDropContext(ReactSortableTree))

There isn't any problem when I just use the default one. However the app is not breaking. Is there any way to resolve this?

couldn't get theme to work

Im working with typescript and react and for some reason couldnt get theme to properly set to FileExplorerTheme. Any known issues with typescript? Thanks!

I'm Using On Windows 10 But Example Fails

Hello, I am trying to use your library but so far I got only errors. Perhaps you can let me know where I am wrong. My code:

import React, { Component } from 'react';
import SortableTree from 'react-sortable-tree';
import FileExplorerTheme from 'react-sortable-tree-theme-file-explorer';
 
export default class Tree extends Component {
  constructor(props) {
    super(props);
 
    this.state = {
      treeData: [{ title: '.', children: [{ title: 'index.js' }] }],
    };
  }
 
  render() {
    return (
      <div style={{ height: 400 }}>
        <SortableTree
          treeData={this.state.treeData}
          onChange={treeData => this.setState({ treeData })}
          theme={FileExplorerTheme}
        />
      </div>
    );
  }
}

Instead of './src/ I made it '.' since there is no './src'. However, I intend to use this to display a specific folder on the Windows PC so please let me know what to do. Thank you!

Readme image

The drop area is located quite far to the right

Hi fritz-c!

Thank you for creating this theme, it's highly appreciated.

I'm reopening this issue with canDrop. The drop area is located quite far to the right and not where it should be.

No horizontal scrolling

Hello,

I notice that horizontal scrolling is not working with this theme (with default theme, this is done the right way).

Though vertical scrolling is working.

Thanks !

Where should I overwrite the SCSS?

Hey Chris -

I'm definitely going to be creating a theme for your amazing component, but I'm not exactly clear where I should be adding / editing / overwriting your scss? Should I be editing the node-content-renderer.scss or the tree-node-renderer.scss? Or should I be creating my own file?

I apologize for the noob question but I believe a solid point in the right direction will get me a long way. Thanks again for your great work here... Much appreciated!

Outdated react-sortable-tree version

The dependency on react-sortable-tree is set to ^1.4.0. However, with 2.0 released, we should update the required dependency.

npm WARN [email protected] requires a peer of react-sortable-tree@^1.4.0 but none is installed. You must install peer dependencies yourself.

file explorer theme is not working..

There is any error in console but it still default theme...

import * as React from 'react';
import SortableTree,{addNodeUnderParent, removeNodeAtPath} from 'react-sortable-tree';
import {FileExplorerTheme} from 'react-sortable-tree-theme-file-explorer';

 <SortableTree
                    theme={FileExplorerTheme}
                    treeData={this.state.treeData}
                    onChange={treeData => this.setState({treeData})}   ....

click on node must select a node.

Hi @fritz-c
Thanks for creating this Theme.
I am facing a problem, i am not sure it's an CSS issue or what.

Clicking between two nodes doesn't select a node.
I want to remove the space between two nodes in sortable tree.

you can see actual issue here - > https://youtu.be/hvpmRUXkyuI