zikaari/react-aspen-demo

Example filetree component for React apps based on `react-aspen`

React Aspen Demo

This repository implements a filetree component on top of low-level API's offered by react-aspen, a library for rendering nested trees in React apps very efficiently.

All the UI features you expect from a filetree are available out-of-the-box, for example:

• Expand/Collapse folders
• Drag and Drop files/folders
• Keyboard shorcuts (Arrow up/down/left/right, Enter, F2, etc.)
• Inline file renaming and creation
• A complete decoration (styling) system
• Context menu interactions

Inline renaming

Inline file creation

Performance

(as of yet, no other implementation has outperformed react-aspen as far as raw numbers are concerned)

A large part of the performance edge comes from the fact that react-aspen uses virtualization/windowing to render trees instead of a nested DOM node structure.

Here's a section taken from reactjs.org that describes windowing in detail:

If your application renders long lists of data (hundreds or thousands of rows), we recommended using a technique known as “windowing”. This technique only renders a small subset of your rows at any given time, and can dramatically reduce the time it takes to re-render the components as well as the number of DOM nodes created.

This also allows browsers to chillout since they no longer have to do extensive bookkeeping of extensive number of DOM nodes.

Usage

This repo lives as a base template for developers who want a filetree in their apps (electron/webapps). Unlike the core engine, react-aspen, this isn't published on npm as a package by design. Part of the reason is to emphasize on the customization part of react-aspen, something we want the developer to be in full control of.

So to integrate a filetree in your app, either extract the contents of src/ to some directory in your codebase and call it a day, or, add this repository as a git submodule. The problem with former option is that you'll loose all the "git'ty" features from that point on, meaning you won't get any changes made in the upstream branch without having to manually copy/paste stuff.

Alternatively (and preferably), you should consider npm package scoping. To do so, fork this repo to your account, make changes as you see fit and then publish you custom filetree on npm under a scopename like @zeit/filetree, @axosoft/filetree-component, etc. and then consume it like a regular npm package.

Speaking of npm, you can also use lerna to "contain" your app in one place while still being separate pieces.

Should you go with the forking method, I suggest you create appropriate branches for the changes you make and then make a PR to this repository. That way the changes you make can be isolated and PR'd back to this repository as community payback. Your contributions will help all of us 🙂

Required/Expected patching

You can port everything except context menu service.

Depending on what setup you're running, or how context menus work in your app. You'll have to unplug some wires here and there to make it work. For the most part you'll most likely need to modify src/services/contextMenu.ts file and change the implementation of #showContextMenu function. After that, you should be all set and ready to deploy 🚀

Just provide the FileTree the API it needs, example of which can be found in demo/ directory, which demonstrates how react-aspen would work with fs-extra, a beautiful Promise based wrapper around Node.js fs module.

Aside from required patching, you'll also need to provide a file watching service service if you want react-aspen to stay in sync with actual filesystem's state. We recommend @atom/watcher if you'll be using this in an electron app. It is the most "futuristic" watcher out of all we tried.

License

This repository is licensed under MIT license. You're free to copy, modify, distribute the code without any restriction (crediting is not required, but highly appreciated)

react-aspen-demo's Issues

Awesome demo, but....

This is a really great demo. It looks quite promising, in that it doesn't render child elements.

Right now, at my work, we have some pages that have recursive structures (e.g. stores with stations), and have our own way of doing it, but it seems (dare I say it, a bit naive). I think your way is better.

However, when testing by expanding the file tree past its container, I saw we were still rendering that other stuff. Is there way to not render anything past the container?

Again, this is awesome plugin and I look forward to using it.

Drag and drop not working in Firefox

File icons

File icons for common extensions like .png, .svg, etc.

How to add Remove function?

First off, thanks for this library, must have been a lot of work.

I tried to add a "Remove" button to the entries (both directory and files) using:

this.props.model.root.inotify({
    type: WatchEvent.Removed,
    path: item.path,
});

But this fails with this exception:

Uncaught (in promise) TypeError: Method WeakMap.prototype.delete called on incompatible receiver undefined
    at delete (<anonymous>)
    at index.js:40
    at Set.forEach (<anonymous>)
    at Notificar.dispatch (index.js:40)
    at Object.notifyDidDispose (Root.js:52)
    at FileEntry.dispose (FileEntry.js:125)
    at FileEntry.mv (FileEntry.js:74)
    at Root.unlinkItem (Directory.js:236)
    at Object.Directory.handleWatchEvent [as callback] (Directory.js:61)
    at Root.dispatchWatchEvent (Root.js:455)

Do you have any idea what's causing this? Or do you have an example of how to properly to Removals?

Repo: https://github.com/graup/react-aspen-demo/tree/delete-button