Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, {Component} from 'react';
- import { connect } from 'react-redux';
- function mapDispatchToProps(dispatch){
- return {
- action: (x) => {
- dispatch(x)
- },
- }
- }
- function mapStateToProps(store) {
- return {
- tree: store.tree
- };
- }
- class Structure extends Component {
- state = {
- update: false,
- drag: false,
- popup: {display:'none', position: 'fixed', left:0, top:0, zIndex: 10}
- }
- componentDidMount(){/*
- let interval = 1500;
- setInterval(()=>{
- this.setState({ update: !this.state.update })
- }, interval);*/
- window.document.addEventListener('click', this.contextMenuHide.bind(this), false);
- this.refs.main.setAttribute('onclick', 'tree_toggle(arguments[0])');
- }
- update(){
- this.setState({ update: !this.state.update })
- }
- contextMenuShow(id, e) {
- e.preventDefault();
- this.refs.create.setAttribute('data-create', id);
- this.refs.edit.setAttribute('data-edit', id);
- this.refs.del.setAttribute('data-del', id);
- let pos = {display:'block', position: 'fixed', left: e.pageX+'px', top: e.pageY-window.scrollY+'px'};
- this.setState({popup: pos})
- }
- contextMenuHide(e) {
- let pos = {display:'none', position: 'fixed', left: e.pageX+'px', top: e.pageY+'px'};
- this.setState({popup: pos})
- }
- getPropId(){
- let id = this.refs.edit.getAttribute('data-edit');
- this.editFree(id)
- }
- editFree(id){
- this.props.action({
- type: 'editId',
- data: id
- })
- this.props.action({
- type: 'newBranch',
- data: null
- })
- }
- addBranch0(){
- this.props.action({
- type: 'editId',
- data: '0'
- })
- this.props.action({
- type: 'newBranch',
- data: '0'
- })
- }
- addBranch(){
- let id = this.refs.create.getAttribute('data-create');
- this.props.action({
- type: 'editId',
- data: id
- })
- this.props.action({
- type: 'newBranch',
- data: id
- })
- }
- delBranch(){
- let id = this.refs.del.getAttribute('data-del');
- this.props.action({
- type: 'delBranch',
- data: { id: id }
- })
- }
- DragStart(el, e){
- let img = e.target.getElementsByClassName('Content')[0];
- e.dataTransfer.effectAllowed = 'move';
- e.dataTransfer.setDragImage(img,10,5);
- e.dataTransfer.setData('application/text', JSON.stringify(el) );
- this.setState({ drag: true });
- e.stopPropagation();
- }
- DragEnter(e){
- if (e.target.className != 'Content') return false;
- e.target.style.color = '#f00';
- }
- DragLeave(e){
- if (e.target.className != 'Content') return false;
- e.target.style.color = '#000'
- }
- DragEnd(e){
- }
- DragOver(e){
- e.preventDefault();
- }
- onDrop(parent, e){
- if (!e) return;
- let elMv = JSON.parse(e.dataTransfer.getData('application/text') );
- if (parent.id == elMv.id) return;
- e.target.style.color = '#000';
- if (parent == 'del') {
- this.props.action({
- type: 'delBranch',
- data: elMv
- })
- }
- else {
- this.props.action({
- type: 'editParent',
- data: {
- parent: parent,
- children: elMv
- }
- })
- }
- this.setState({ drag: false });
- e.preventDefault();
- e.stopPropagation();
- }
- DragSpace(){
- return(
- <div>
- <div className="drag"
- onDragOver={this.DragOver.bind(this)}
- onDrop={this.onDrop.bind(this, { id: 0} )} >
- <strong>Переместить в корень</strong>
- </div>
- <div className="drag"
- onDragOver={this.DragOver.bind(this)}
- onDrop={this.onDrop.bind(this, 'del')} >
- <strong>Удалить</strong>
- </div>
- </div>
- )
- }
- renderTree(id){
- const {tree} = this.props;
- return tree.map((el, i, arr) => {
- if (id == el.parent) {
- let nextPar = arr[i+1] ? arr[i+1].parent : null;
- function Parent(){
- let last = true;
- tree.map(el_2 => {
- if (el.id == el_2.parent) {
- last = false
- }
- })
- if (last) {
- if (el.parent == nextPar) {
- return 'Node ExpandLeaf'
- }
- else {
- return 'Node ExpandLeaf IsLast'
- }
- }
- if (el.parent == nextPar) {
- return 'Node ExpandClosed'
- }
- else {
- return 'Node ExpandClosed IsLast'
- }
- }
- return(
- <ul className="Container" key={el.id} >
- <li className={Parent()} draggable="true"
- onDragStart={this.DragStart.bind(this, el)}
- onDragEnter={this.DragEnter.bind(this)}
- onDragLeave={this.DragLeave.bind(this)}
- onDragEnd={this.DragEnd.bind(this)}
- onDragOver={this.DragOver.bind(this)}
- onDrop={this.onDrop.bind(this, el)} >
- <div className="Expand"></div>
- <div className="Content" onContextMenu={this.contextMenuShow.bind(this, el.id)} onClick={this.editFree.bind(this, el.id)}>{el.key}</div>
- { this.renderTree(el.id) }
- </li>
- </ul>
- )
- }
- })
- }
- renderRoot(){
- let tree = this.props.tree.sort((a, b) => {
- if( a.parent == b.parent ){
- return a.id - b.id
- }
- else{
- return a.parent - b.parent
- }
- });
- return tree.map((el, i, tree) => {
- let nextPar = tree[i+1] ? tree[i+1].parent : null;
- let check = 'ExpandLeaf';
- tree.forEach(el_2 => {
- if(el.id == el_2.parent)
- check = 'ExpandClosed';
- })
- if (!el.parent)
- return(
- <li className={el.parent == nextPar ? 'Node IsRoot '+check : 'Node IsRoot '+check+' IsLast'} key={i}
- draggable="true"
- onDragStart={this.DragStart.bind(this, el)}
- onDragEnter={this.DragEnter.bind(this)}
- onDragLeave={this.DragLeave.bind(this)}
- onDragEnd={this.DragEnd.bind(this)}
- onDragOver={this.DragOver.bind(this)}
- onDrop={this.onDrop.bind(this, el)} >
- <div className="Expand"></div>
- <div className="Content" onContextMenu={this.contextMenuShow.bind(this, el.id)} onClick={this.editFree.bind(this, el.id)}>{el.key}</div>
- {this.renderTree( el.id)}
- </li>
- )
- })
- }
- render(){
- return(
- <div ref="main">
- <div style={{cursor: 'pointer'}} onClick={ function(){this.update(); this.addBranch0() }.bind(this) }>Скрипт диалогов</div>
- <ul className="Container">
- {this.renderRoot()}
- </ul>
- {this.state.drag ? this.DragSpace() : null}
- <ul className="list-ul" style={this.state.popup}>
- <li ref="edit" data-edit="" onClick={this.getPropId.bind(this)}>Редактировать</li>
- <li ref="create" data-create="" onClick={this.addBranch.bind(this)}>Создать дочерний элемент</li>
- <li ref="del" data-del="" onClick={this.delBranch.bind(this)}>Удалить</li>
- </ul>
- </div>
- )
- }
- }
- export default connect(mapStateToProps,mapDispatchToProps)(Structure)
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement