SHARE
TWEET

Untitled

a guest Oct 18th, 2019 78 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from "react";
  2. import './style.css';
  3. import './render.scss';
  4. import './inputsPivots.scss';
  5. //import {treeToHtml} from './drawTreeFunction';
  6. import {loading} from './img RT/loading.gif';
  7. import equal from 'fast-deep-equal'
  8. import { addInputs} from "./changePivot";
  9.  
  10.  
  11.  
  12. export default class RenderTree extends Component {
  13.     constructor(props) {
  14.       super(props);
  15.  
  16.       this.state = {
  17.         isLoading: true,
  18.         counter: -1
  19.       };
  20.  
  21.     }
  22.     componentDidMount() {
  23.         this.setState({isLoading: false});
  24.     }
  25.     //handlePrint()
  26.     componentDidUpdate(prevProps)
  27.     {
  28.       if(!equal(this.props.readyToRender, prevProps.readyToRender)) // Check if it's a new user, you can also use some unique property, like the ID  (this.props.user.id !== prevProps.user.id)
  29.       {
  30.         this.drawTree(this.props.readyToRender);
  31.       }
  32.  
  33.     }
  34.  
  35.     treeToHtml(tree) {
  36.       // only leafs containing category
  37.       if (tree.category) {
  38.           return  ['<ul>',
  39.                       '<li>',
  40.                           '<a href="#">',
  41.                               '<b>', tree.category, '</b>',
  42.                           '</a>',
  43.                       '</li>',
  44.                    '</ul>'].join('');
  45.       }
  46.  
  47.         console.log(this.state.counter)
  48.         this.setState(prevState => {
  49.           return {counter: prevState.counter + 1}
  50.        })
  51.  
  52.  
  53.       return  ['<ul>',
  54.                   '<li>',
  55.                       '<a href="#">',
  56.                           '<b>', tree.attribute, ' ', tree.predicateName, ' ', tree.pivot, ' ?</b>',
  57.                            '<input class="pivots" id=',this.state.counter,' type="text" value="',tree.pivot,'" />',
  58.                            '<input class="pivotal" id=',this.state.counter,' type="submit" value="OK" onclick="',this.updateBranch(this.id),'"/>',
  59.                       '</a>',
  60.                       '<ul>',
  61.                           '<li>',
  62.                               '<a href="#">yes</a>',
  63.                               this.treeToHtml(tree.match),
  64.                           '</li>',
  65.                           '<li>',
  66.                               '<a href="#">no</a>',
  67.                               this.treeToHtml(tree.notMatch),
  68.                           '</li>',
  69.                       '</ul>',
  70.                   '</li>',
  71.                '</ul>'].join('');
  72.   }
  73.  
  74.   updateBranch = (id) => { console.log(id)}
  75.  
  76.     drawTree(prop)
  77.     {
  78.       if(prop!==undefined)
  79.       {
  80.         var tree=prop;
  81.         document.getElementById('displayTree').innerHTML = this.treeToHtml(tree.root);
  82.         addInputs(this.props.categoryAttr,this.props.uniqueID);
  83.       }
  84.     }
  85.     render() {
  86.         return (
  87.           <div className='renderTree'>
  88.             {/* <button className='btn' id="drawBtn" onClick={this.handlePrint}>Draw tree</button> */}
  89.             {this.state.isLoading ?
  90.               <div className='renderTree_loading'>{loading}Loading..</div>
  91.               : // if
  92.               <div className="tree" id="displayTree"></div>
  93.             }
  94.           </div>
  95.         );
  96.       }
  97. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top