public/mailtrain
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Snapshot of incomplete DnD extension to tree.js.

Browse source 
It however is rather unintuitive how nodes can be put to the end. Dropping this direction in favor of https://github.com/fritz-c/react-sortable-tree
This commit is contained in:
Tomas Bures 2017-08-16 12:10:00 +02:00
parent 0bfb30817b
commit 6a7dab52eb
8 changed files with 999 additions and 135 deletions
Download patch file Download diff file Expand all files Collapse all files

119
client/src/lists/segments/CUD.js
View file

@ -3,14 +3,14 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { translate, Trans } from 'react-i18next';
import {requiresAuthenticatedUser, withPageHelpers, Title, NavButton} from '../../lib/page';
import {requiresAuthenticatedUser, withPageHelpers, Title, NavButton, Toolbar} from '../../lib/page';
import {
withForm, Form, FormSendMethod, InputField, ButtonRow, Button
withForm, Form, FormSendMethod, InputField, ButtonRow, Button, Fieldset
} from '../../lib/form';
import { withErrorHandling, withAsyncErrorHandler } from '../../lib/error-handling';
import {DeleteModalDialog} from "../../lib/delete";
import interoperableErrors from '../../../../shared/interoperable-errors';
import {TreeTable} from "../../lib/tree";
import {TreeSelectMode, TreeTable} from "../../lib/tree";
@translate()
@withForm
@ -100,57 +100,131 @@ export default class CUD extends Component {
}
}
async onRuleSelectionChangedAsync(sel) {
this.setState({
selectedRule: sel
});
}
render() {
const t = this.props.t;
const isEdit = !!this.props.entity;
const treeEnd = {
key: '__mt-tree-end-drop__',
icon: false,
unselectable: true,
extraClasses: 'mt-tree-end-drop',
beforeActivate: () => false
};
const treeEndWide = { // This one is used after a non-folder sibling that has no children
key: '__mt-tree-end-drop__',
icon: false,
unselectable: true,
extraClasses: 'mt-tree-end-drop mt-tree-end-drop-wide',
beforeActivate: () => false
}
const sampleTreeData = [
{
key: 'a',
title: 'A',
expanded: true,
folder: true,
children: [
{
key: 'aa',
title: 'AA',
expanded: true,
folder: true,
children: [
{
key: 'aaa',
title: 'AAA',
expanded: true
},
{
key: 'aab',
title: 'AAB',
expanded: true
}
},
{
key: 'aab',
title: 'AAB',
folder: true
},
treeEnd
]
},
{
key: 'ab',
title: 'AB',
expanded: true,
folder: true,
children: [
{
key: 'aba',
title: 'ABA',
expanded: true
title: 'ABA'
},
{
key: 'abb',
title: 'ABB',
expanded: true
}
title: 'ABB'
},
treeEndWide
]
},
treeEnd
]
}
},
{
key: 'b',
title: 'B',
expanded: true,
folder: true,
children: [
{
key: 'ba',
title: 'BA',
expanded: true,
folder: true,
children: [
{
key: 'baa',
title: 'BAA'
},
{
key: 'bab',
title: 'BAB'
},
treeEndWide
]
},
{
key: 'bb',
title: 'BB',
expanded: true,
folder: true,
children: [
{
key: 'bba',
title: 'BBA'
},
{
key: 'bbb',
title: 'BBB'
},
treeEndWide
]
},
treeEnd
]
},
treeEnd
];
return (
<div>
{isEdit &&
<DeleteModalDialog
@ -165,17 +239,28 @@ export default class CUD extends Component {
<Title>{isEdit ? t('Edit Segment') : t('Create Segment')}</Title>
<Form stateOwner={this} onSubmitAsync={::this.submitHandler}>
<InputField id="name" label={t('Name')}/>
<ButtonRow>
<Form stateOwner={this} onSubmitAsync={::this.submitHandler} format="wide">
<ButtonRow format="wide" className="pull-right">
<Button type="submit" className="btn-primary" icon="ok" label={t('Save')}/>
{isEdit && <NavButton className="btn-danger" icon="remove" label={t('Delete')} linkTo={`/lists/fields/${this.props.list.id}/${this.props.entity.id}/delete`}/>}
</ButtonRow>
<h3>{t('Segment Options')}</h3>
<InputField id="name" label={t('Name')} format="wide"/>
<hr />
<TreeTable data={sampleTreeData} />
<div className="row">
<div className="col-sm-6">
<TreeTable data={sampleTreeData} noTable withIcons withDnd format="wide" selectMode={TreeSelectMode.SINGLE} selection={this.state.selectedRule} onSelectionChangedAsync={::this.onRuleSelectionChangedAsync} />
</div>
<div className="col-sm-6">
<h3>{t('Selected Rule Options')}</h3>
<InputField id="name" label={t('Name')} format="wide" />
</div>
</div>
</Form>
</div>
);