Skip to content

Commit

Permalink
upgrade to version 1.1.0
Browse files Browse the repository at this point in the history 
New Feature:

- new build
- depreciated name 'onDrag' to 'onDrop'
- css changes to hover to supported selected classname
- updated demo
  • Loading branch information
@tharain
tharain committed Nov 4, 2019
1 parent 212fef2 commit 6ac2a49
Show file tree
Hide file tree
Showing 8 changed files with 32 additions and 18 deletions.
Binary file added Demo2.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 6 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ A basic tree file system that allows customisation

### 1 Demo

Version 1.1.0
![](Demo2.gif)

Version 1.0.6
![](Demo.gif)

You can also try out [here](https://tharain.github.io/react-tree-file-system/)
Expand Down Expand Up @@ -230,7 +234,8 @@ interface Node {
| value | The Tree structure given in [point 4](#tree) | Node[] | undefined |
| fileOnClick | Called when file is clicked | (event, indexes: number[], value: Node) => void | undefined |
| folderOnClick | Called when folder is clicked | (event, indexes: number[], state: boolean, value: Node) => void | undefined |
| onDrag | Called when something is dragged on folder | (event, fromIndexes, toIndexes) => void | undefined |
| onDrop | Called when something is dragged on folder [Replace onDrag] | (event, fromIndexes, toIndexes) => void | undefined |
| onDrag | Called when something is dragged on folder [Depreciated] | (event, fromIndexes, toIndexes) => void | undefined |
| folderIcon | Replace the default folder icon | JSX.Element | undefined |
| fileIcon | Replace the default file icon | JSX.Element | undefined |
| style | customize the general style | React.CSSProperties | undefined |
Expand Down
2 changes: 1 addition & 1 deletion index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
white-space: nowrap;
}

.tree_file_system_node:focus {
.tree_file_system_node:hover {
background: #DDD;
}

Expand Down
7 changes: 6 additions & 1 deletion lib/components/Tree/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,24 @@ interface Props {
value: Node[];
fileOnClick: (event: React.SyntheticEvent<EventTarget>, indexes: number[], value: Node) => void;
folderOnClick: (event: React.SyntheticEvent<EventTarget>, indexes: number[], state: boolean, value: Node) => void;
onDrop?: (fromIndexes: number[], toIndexes: number[]) => void;
onDrag?: (fromIndexes: number[], toIndexes: number[]) => void;
folderIcon?: JSX.Element;
fileIcon?: JSX.Element;
style?: React.CSSProperties;
isDraggable?: boolean;
selected?: string;
selectedClassName?: string;
}
interface Node {
title: string;
isOpen?: boolean;
isLocked?: boolean;
isHidden?: boolean;
children?: Node[];
style?: React.CSSProperties;
className?: string;
[extra: string]: any;
}
declare const Tree: ({ value, fileOnClick, folderOnClick, fileIcon, folderIcon, style, isDraggable, onDrag }: Props) => JSX.Element;
declare const Tree: ({ value, fileOnClick, folderOnClick, fileIcon, folderIcon, style, isDraggable, onDrop, onDrag, selected, selectedClassName }: Props) => JSX.Element;
export default Tree;
18 changes: 9 additions & 9 deletions lib/components/Tree/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
var free_regular_svg_icons_1 = require("@fortawesome/free-regular-svg-icons");
var renderChildren = function (children, indexes, fileOnClick, folderOnClick, onDrag, fileIcon, folderIcon, isDraggable) {
return (React.createElement("div", { key: indexes[indexes.length - 1] + "_child", className: "tree_file_system_children" }, renderParent(children, indexes, fileOnClick, folderOnClick, onDrag, fileIcon, folderIcon, isDraggable)));
var renderChildren = function (children, indexes, fileOnClick, folderOnClick, onDrop, onDrag, fileIcon, folderIcon, isDraggable, selected, selectedClassName) {
return (React.createElement("div", { key: indexes[indexes.length - 1] + "_child", className: "tree_file_system_children" }, renderParent(children, indexes, fileOnClick, folderOnClick, onDrop, onDrag, fileIcon, folderIcon, isDraggable, selected, selectedClassName)));
};
var renderParent = function (parent, indexes, fileOnClick, folderOnClick, onDrag, fileIcon, folderIcon, isDraggable) {
var renderParent = function (parent, indexes, fileOnClick, folderOnClick, onDrop, onDrag, fileIcon, folderIcon, isDraggable, selected, selectedClassName) {
if (indexes === void 0) { indexes = []; }
var rend = [];
parent.sort(function (a, b) { return a.title.localeCompare(b.title); }).forEach(function (p, i) {
rend.push(React.createElement("div", { key: i + "_node", draggable: isDraggable, onDragStart: function (e) {
rend.push(React.createElement("div", { key: i + "_node", draggable: isDraggable, style: p.style, onDragStart: function (e) {
var newIndexes = __spreadArrays(indexes, [i]);
e.dataTransfer.setData('react_tree_file_system_from', newIndexes.join(','));
}, onDrop: function (e) {
Expand All @@ -37,12 +37,12 @@ var renderParent = function (parent, indexes, fileOnClick, folderOnClick, onDrag
var ids = e.dataTransfer.getData("react_tree_file_system_from").split(',').filter(function (x) { return x !== ''; }).map(function (x) { return Number(x); });
var newIndexes = __spreadArrays(indexes, [i]);
if (!newIndexes.slice(0, ids.length).join(',').startsWith(ids.join(','))) {
onDrag && onDrag(ids, newIndexes);
onDrop ? onDrop(ids, newIndexes) : onDrag && onDrag(ids, newIndexes);
}
}
}, onDragOver: function (e) {
e.preventDefault();
}, role: "button", className: "tree_file_system_node", onClick: function (event) {
}, role: "button", className: "tree_file_system_node " + (__spreadArrays(indexes, [i]).join(',') === selected && (selectedClassName || 'tree_file_system_node_selected')) + " " + p.className, onClick: function (event) {
var newIndexes = __spreadArrays(indexes, [i]);
if (!p.children || ((p.children && p.children.length === 0) && p.type !== 'folder')) {
fileOnClick && fileOnClick(event, newIndexes, __assign({}, p));
Expand All @@ -57,13 +57,13 @@ var renderParent = function (parent, indexes, fileOnClick, folderOnClick, onDrag
p.title)));
if (p.isOpen) {
var newIndexes = __spreadArrays(indexes, [i]);
rend.push(renderChildren(p.children || [], newIndexes, fileOnClick, folderOnClick, onDrag, fileIcon, folderIcon, isDraggable));
rend.push(renderChildren(p.children || [], newIndexes, fileOnClick, folderOnClick, onDrop, onDrag, fileIcon, folderIcon, isDraggable, selected, selectedClassName));
}
});
return rend;
};
var Tree = function (_a) {
var value = _a.value, fileOnClick = _a.fileOnClick, folderOnClick = _a.folderOnClick, fileIcon = _a.fileIcon, folderIcon = _a.folderIcon, style = _a.style, isDraggable = _a.isDraggable, onDrag = _a.onDrag;
return React.createElement("div", { style: __assign({}, style) }, renderParent(value, [], fileOnClick, folderOnClick, onDrag, fileIcon, folderIcon, isDraggable));
var value = _a.value, fileOnClick = _a.fileOnClick, folderOnClick = _a.folderOnClick, fileIcon = _a.fileIcon, folderIcon = _a.folderIcon, style = _a.style, isDraggable = _a.isDraggable, onDrop = _a.onDrop, onDrag = _a.onDrag, selected = _a.selected, selectedClassName = _a.selectedClassName;
return React.createElement("div", { style: __assign({}, style) }, renderParent(value, [], fileOnClick, folderOnClick, onDrop, onDrag, fileIcon, folderIcon, isDraggable, selected, selectedClassName));
};
exports.default = Tree;
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-tree-file-system",
"version": "1.0.6",
"version": "1.1.0",
"description": "To initialize a simple customizable tree view for file system for React",
"main": "index.js",
"scripts": {
Expand Down
11 changes: 7 additions & 4 deletions src/components/Tree/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ interface Props {
value: Node[],
fileOnClick: (event: React.SyntheticEvent<EventTarget>, indexes: number[], value: Node) => void,
folderOnClick: (event: React.SyntheticEvent<EventTarget>, indexes: number[], state: boolean, value: Node) => void,
onDrop?: (fromIndexes: number[], toIndexes: number[]) => void,
onDrag?: (fromIndexes: number[], toIndexes: number[]) => void,
folderIcon?: JSX.Element,
fileIcon?: JSX.Element,
Expand All @@ -31,6 +32,7 @@ const renderChildren = (
indexes: number[],
fileOnClick?: (event: React.SyntheticEvent<EventTarget>, indexes: number[], value: Node) => void,
folderOnClick?: (event: React.SyntheticEvent<EventTarget>, indexes: number[], state: boolean, value: Node) => void,
onDrop?: (fromIndexes: number[], toIndexes: number[]) => void,
onDrag?: (fromIndexes: number[], toIndexes: number[]) => void,
fileIcon?: JSX.Element,
folderIcon?: JSX.Element,
Expand All @@ -40,7 +42,7 @@ const renderChildren = (
) => {
return (
<div key={`${indexes[indexes.length - 1]}_child`} className="tree_file_system_children">
{renderParent(children, indexes, fileOnClick, folderOnClick, onDrag, fileIcon, folderIcon, isDraggable, selected, selectedClassName)}
{renderParent(children, indexes, fileOnClick, folderOnClick, onDrop, onDrag, fileIcon, folderIcon, isDraggable, selected, selectedClassName)}
</div>
)
}
Expand All @@ -50,6 +52,7 @@ const renderParent = (
indexes: number[] = [],
fileOnClick?: (event: React.SyntheticEvent<EventTarget>, indexes: number[], value: Node) => void,
folderOnClick?: (event: React.SyntheticEvent<EventTarget>, indexes: number[], state: boolean, value: Node) => void,
onDrop?: (fromIndexes: number[], toIndexes: number[]) => void,
onDrag?: (fromIndexes: number[], toIndexes: number[]) => void,
fileIcon?: JSX.Element,
folderIcon?: JSX.Element,
Expand All @@ -74,7 +77,7 @@ const renderParent = (
const ids = e.dataTransfer.getData("react_tree_file_system_from").split(',').filter(x=>x !== '').map(x => Number(x));
const newIndexes = [...indexes, i];
if(!newIndexes.slice(0,ids.length).join(',').startsWith(ids.join(','))) {
onDrag && onDrag(ids, newIndexes);
onDrop ? onDrop(ids, newIndexes) : onDrag && onDrag(ids, newIndexes);
}
}
}}
Expand Down Expand Up @@ -104,12 +107,12 @@ const renderParent = (

if(p.isOpen) {
const newIndexes = [...indexes, i];
rend.push(renderChildren(p.children || [], newIndexes, fileOnClick, folderOnClick, onDrag, fileIcon, folderIcon, isDraggable, selected, selectedClassName));
rend.push(renderChildren(p.children || [], newIndexes, fileOnClick, folderOnClick, onDrop, onDrag, fileIcon, folderIcon, isDraggable, selected, selectedClassName));
}
})
return rend;
}

const Tree = ({ value, fileOnClick, folderOnClick, fileIcon, folderIcon, style, isDraggable, onDrag, selected, selectedClassName }: Props) => <div style={{ ...style }}>{renderParent(value, [], fileOnClick, folderOnClick, onDrag, fileIcon, folderIcon, isDraggable, selected, selectedClassName)}</div>;
const Tree = ({ value, fileOnClick, folderOnClick, fileIcon, folderIcon, style, isDraggable, onDrop, onDrag, selected, selectedClassName }: Props) => <div style={{ ...style }}>{renderParent(value, [], fileOnClick, folderOnClick, onDrop, onDrag, fileIcon, folderIcon, isDraggable, selected, selectedClassName)}</div>;

export default Tree;
3 changes: 2 additions & 1 deletion src/demo/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,12 +139,13 @@ This is a demo of the file system.
isDraggable
style={{ padding: 20, borderTop: '2px solid black' }}
value={this.state.defaultTree}
onDrag={(fromIndexes, toIndexes) => {
onDrop={(fromIndexes, toIndexes) => {
this.setState(prevState => {
const extractData = getRecursiveItem(prevState.defaultTree, fromIndexes, 0);
const extraData = recursivelySetChild(prevState.defaultTree, toIndexes, 0, extractData);
const newData = popRecursiveItem(prevState.defaultTree, fromIndexes, 0);
return {
selected: toIndexes.join(','),
defaultTree: newData
}
})
Expand Down

0 comments on commit 6ac2a49

Please sign in to comment.