Skip to content

RSB POC #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: poc-base
Choose a base branch
from
Open

RSB POC #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
07b9bed
RSB POC
Nov 5, 2024
bc3b2a2
RSB alignment
Nov 5, 2024
132b920
LSB adjustments
Nov 5, 2024
9f14fd0
Improvements. Naming fix
Nov 6, 2024
88aeba8
Multi Tree renderer
Nov 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/tree-node.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ class TreeNode extends Component {
<div
key={`pre_${1 + i}`}
style={{ width: scaffoldBlockPxWidth }}
// TODO: find more effective way to do this (without altering the TreeNode component)
className={classnames('rst__lineBlock', lineClass, rowDirectionClass)}
/>
);
Expand Down
145 changes: 0 additions & 145 deletions stories/add-remove.js
View file
Open in desktop

This file was deleted.

82 changes: 43 additions & 39 deletions stories/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,44 +2,48 @@

import { storiesOf } from '@storybook/react';
import React from 'react';
import AddRemoveExample from './add-remove';
import BarebonesExample from './barebones';
import BarebonesExampleNoContext from './barebones-no-context';
import CallbacksExample from './callbacks';
import CanDropExample from './can-drop';
import ChildlessNodes from './childless-nodes';
import DragOutToRemoveExample from './drag-out-to-remove';
import ExternalNodeExample from './external-node';
import GenerateNodePropsExample from './generate-node-props';
import './generic.css';
import ModifyNodesExample from './modify-nodes';
import OnlyExpandSearchedNodesExample from './only-expand-searched-node';
import RowDirectionExample from './rtl-support';
import SearchExample from './search';
import ThemesExample from './themes';
import TouchSupportExample from './touch-support';
import TreeDataIOExample from './tree-data-io';
import TreeToTreeExample from './tree-to-tree';
import RSB from './rsb';
import LSB from './lsb';
import LSBMulti from './lsb-multi';
// import BarebonesExample from './barebones';
// import BarebonesExampleNoContext from './barebones-no-context';
// import CallbacksExample from './callbacks';
// import CanDropExample from './can-drop';
// import ChildlessNodes from './childless-nodes';
// import DragOutToRemoveExample from './drag-out-to-remove';
// import ExternalNodeExample from './external-node';
// import GenerateNodePropsExample from './generate-node-props';
// import './generic.css';
// import ModifyNodesExample from './modify-nodes';
// import OnlyExpandSearchedNodesExample from './only-expand-searched-node';
// import RowDirectionExample from './rtl-support';
// import SearchExample from './search';
// import ThemesExample from './themes';
// import TouchSupportExample from './touch-support';
// import TreeDataIOExample from './tree-data-io';
// import TreeToTreeExample from './tree-to-tree';

storiesOf('Basics', module)
.add('Minimal implementation', () => <BarebonesExample />)
.add('treeData import/export', () => <TreeDataIOExample />)
.add('Add and remove nodes programmatically', () => <AddRemoveExample />)
.add('Modify nodes', () => <ModifyNodesExample />)
.add('Prevent drop', () => <CanDropExample />)
.add('Search', () => <SearchExample />)
.add('Themes', () => <ThemesExample />)
.add('Callbacks', () => <CallbacksExample />)
.add('Row direction support', () => <RowDirectionExample />);
storiesOf('Categories POC', module)
// .add('Minimal implementation', () => <BarebonesExample />)
// .add('treeData import/export', () => <TreeDataIOExample />)
.add('LSB', () => <LSB />)
.add('LSBMulti', () => <LSBMulti />)
.add('RSB', () => <RSB />)
// .add('Modify nodes', () => <ModifyNodesExample />)
// .add('Prevent drop', () => <CanDropExample />)
// .add('Search', () => <SearchExample />)
// .add('Themes', () => <ThemesExample />)
// .add('Callbacks', () => <CallbacksExample />)
// .add('Row direction support', () => <RowDirectionExample />);

storiesOf('Advanced', module)
.add('Drag from external source', () => <ExternalNodeExample />)
.add('Touch support (Experimental)', () => <TouchSupportExample />)
.add('Tree-to-tree dragging', () => <TreeToTreeExample />, 'tree-to-tree.js')
.add('Playing with generateNodeProps', () => <GenerateNodePropsExample />)
.add('Drag out to remove', () => <DragOutToRemoveExample />)
.add('onlyExpandSearchedNodes', () => <OnlyExpandSearchedNodesExample />)
.add('Prevent some nodes from having children', () => <ChildlessNodes />)
.add('Minimal implementation without Dnd Context', () => (
<BarebonesExampleNoContext />
));
// storiesOf('Advanced', module)
// .add('Drag from external source', () => <ExternalNodeExample />)
// .add('Touch support (Experimental)', () => <TouchSupportExample />)
// .add('Tree-to-tree dragging', () => <TreeToTreeExample />, 'tree-to-tree.js')
// .add('Playing with generateNodeProps', () => <GenerateNodePropsExample />)
// .add('Drag out to remove', () => <DragOutToRemoveExample />)
// .add('onlyExpandSearchedNodes', () => <OnlyExpandSearchedNodesExample />)
// .add('Prevent some nodes from having children', () => <ChildlessNodes />)
// .add('Minimal implementation without Dnd Context', () => (
// <BarebonesExampleNoContext />
// ));
151 changes: 151 additions & 0 deletions stories/lsb-multi.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
import React, { Component } from 'react';
import styled from 'styled-components';

import SortableTree, { addNodeUnderParent, removeNodeAtPath } from '../src';
import NodeRendererRSB from '../themes/lsb/node-renderer';
// In your own app, you would need to use import styles once in the app
// import 'react-sortable-tree/styles.css';

const WrapperStyled = styled.div`
// Hide lines between nodes
.rst__lineBlock,
.rst__absoluteLineBlock {
display: none;
}
// Hide lines from child nodes
.rst__lineChildren {
display: none;
}

// Full width borders
.rst__node {
border: solid #bbb 1px;
border-bottom: none;
}
.rst__node:last-child {
border-bottom: solid #bbb 1px;
}

// .rst__tree > div > div > .rst__node {
// left: 15px;
// }
`;

export default class App extends Component {
constructor(props) {
super(props);

this.state = {
treeDataFolders: [
{
title: 'Folder 1',
expanded: true,
children: [
{ title: 'Category 1.1' },
{
title: 'Category 1.2',
expanded: true,
children: [
{ title: 'Category 1.2.1' },
{ title: 'Category 1.2.2' },
]
},
{ title: 'Category 1.3' },
],
type: 'folder',
},
{
title: 'Folder 2',
type: 'folder',
children: [
{ title: 'Category 2.1' },
{ title: 'Category 2.2' },
],
},
{ title: 'Folder 3', type: 'folder', },
],
treeDataCategories: [
{ title: 'Root Category 1', type: 'category', },
{ title: 'Root Category 2', type: 'category', },
{ title: 'Root Category 3', type: 'category', },
{ title: 'Root Category 4', type: 'category', },
{ title: 'Root Category 5', type: 'category', },
{ title: 'Root Category 6', type: 'category', },
{ title: 'Root Category 7', type: 'category', },
{ title: 'Root Category 8', type: 'category', },
{ title: 'Root Category 9', type: 'category', },
{ title: 'Root Category 10', type: 'category', },
{ title: 'Root Category 11', type: 'category', },
{ title: 'Root Category 12', type: 'category', },
{ title: 'Root Category 13', type: 'category', },
{ title: 'Root Category 14', type: 'category', },
{ title: 'Root Category 15', type: 'category', },
{ title: 'Root Category 16', type: 'category', },
{ title: 'Root Category 17', type: 'category', },
{ title: 'Root Category 18', type: 'category', },
{ title: 'Root Category 19', type: 'category', },
{ title: 'Root Category 20', type: 'category', },
],
// addAsFirstChild: false,
};
}


render() {
return (
<WrapperStyled>
<div style={{
padding: 15,
fontWeight: 'bold',
border: 'solid 1px #bbb',
borderBottom: 'none',
}}>
<span
className="material-icons"
style={{ verticalAlign: 'sub', marginRight: 5 }}
>folder_copy</span>
Visible Categories
</div>
<div style={{ height: 500 }}>
<SortableTree
maxDepth={5}
treeData={this.state.treeDataFolders}
onChange={treeData => {
const updatedState = {
treeDataFolders: treeData
};
// Move any root categories to the categories tree
const rootCategories = treeData.filter(node => node.type !== 'folder');
if (rootCategories.length) {
updatedState.treeDataCategories = rootCategories.concat(updatedState.treeDataCategories);
updatedState.treeDataFolders = treeData.filter(node => node.type === 'folder');
}
this.setState(updatedState);
}}
scaffoldBlockPxWidth={20}
theme={{
nodeContentRenderer: NodeRendererRSB
}}
dndType={'my-dnd-type'}
/>
</div>
<div style={{ height: 500 }}>
<SortableTree
maxDepth={4}
treeData={this.state.treeDataCategories}
onChange={treeData => {
this.setState({
treeDataCategories: treeData
});
}}
scaffoldBlockPxWidth={20}
theme={{
nodeContentRenderer: NodeRendererRSB
}}
dndType={'my-dnd-type'}
/>
</div>
</WrapperStyled>
);
}
}
Loading