react

test

// client/generateForm/test.jsx

import React, { PropTypes } from 'react';
import $ from 'jquery';
import { Tree, Tooltip } from 'antd';

const TreeNode = Tree.TreeNode;

const x = 3;
const y = 2;
const z = 1;
const gData = [];

const generateData = (_level, _preKey, _tns) => {
  const preKey = _preKey || '0';
  const tns = _tns || gData;

  const children = [];
  for (let i = 0; i < x; i++) {
    const key = `${preKey}-${i}`;
    tns.push({ title: key, key });
    if (i < y) {
      children.push(key);
    }
  }
  if (_level < 0) {
    return tns;
  }
  const level = _level - 1;
  children.forEach((key, index) => {
    tns[index].children = [];
    return generateData(level, key, tns[index].children);
  });
};
generateData(z);

console.log(generateData);
console.log(gData);
console.log(JSON.stringify(gData));

const Folders = React.createClass({
  getInitialState() {
    return {
      expandedKeys: ['0-0-0', '0-0-1'],
      autoExpandParent: true,
      checkedKeys: ['0-0-0'],
      selectedKeys: [],
    };
  },
  onExpand(expandedKeys) {
    console.log('onExpand', arguments);
    // if not set autoExpandParent to false, if children expanded, parent can not collapse.
    // or, you can remove all expanded children keys.
    this.setState({
      expandedKeys,
      autoExpandParent: false,
    });
  },
  onCheck(checkedKeys) {
    this.setState({
      checkedKeys,
      selectedKeys: ['0-3', '0-4'],
    });
  },
  onSelect(selectedKeys, info) {

    console.log('onSelect', info);
    var result = confirm("Want to delete?");
    if (result) {
        //Logic to delete the item
    }
    this.setState({ selectedKeys });
  },
  render() {
    //console.log(this.props['folders']);
    //console.log(this.props.folders);
    //const text = <span>prompt text</span>;
    const loop = data => data.map((item) => {
      if (item.children) {
        return (

          <TreeNode key={item.key} title={item.key} disableCheckbox={item.key === '0-0-0'}>
            {loop(item.children)}

          </TreeNode>

        );
      }
      return (
          <TreeNode key={item.key} title={item.key} />
      );
    });

    return (
      <Tree
        onExpand={this.onExpand} expandedKeys={this.state.expandedKeys}
        autoExpandParent={this.state.autoExpandParent}
        onSelect={this.onSelect} selectedKeys={this.state.selectedKeys}
      >
        {loop(this.props.folders)}
      </Tree>
    );
  },
});

export default Folders;







// FILE: app/Resources/views/generate/test.html.twig

{% extends 'base.html.twig' %}

{% block body %}
        {{ react_component('Folders', {'props': props, 'rendering': 'client_side'}) }}
{% endblock %}

{% block javascripts %}
        <script src='{{ asset('assets/build/test.register.js') }}'></script>
{% endblock %}





// FILE: client/registerComponent/test.register.jsx
import ReactOnRails from 'react-on-rails'
import Test from '../generateForm/test.jsx';

const Folders = (props) => (
        <Test {...props} />
);

ReactOnRails.register({ Folders });










// FILE: src/AppBundle/Controller/TestController.php

<?php
namespace AppBundle\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Symfony\Component\Finder\Finder;
class TestController extends Controller
{
    /**
     * @Route("/hello")
     */
    public function helloAction()
    {
        $finder = new Finder();
        $finder->in('../projects');
        $files = [];
        $directories = [];
        foreach ($finder as $file) {
            $files[$file->getRelativePathname()] =  $file->getRelativePathname();
        }
        $tree = $this->explodeTree($files, "/", false);
        $arr = $this->myiterator($tree);
       $serializer = $this->get('serializer');
       return $this->render('generate/test.html.twig', [
           'props' => $serializer->normalize(
                [
                 'folders' => $arr
                ])
       ]);
    }
    public function myiterator($tree) {
      $arr = [];
      foreach ($tree as $key => $val) {
        $arr[] = [
          'title' => $key,
          'key' => $key,
          'children' => [],
        ];
        if (is_array($val)) {
          $arr[count($arr) - 1]['children'] = $this->myiterator($val);
        }
        else {
          unset($arr[count($arr) - 1]['children']);
        }
      }
      return $arr;
    }

    public function explodeTree($array, $delimiter = '_', $baseval = false)
    {
    	if(!is_array($array)) return false;
    	$splitRE   = '/' . preg_quote($delimiter, '/') . '/';
    	$returnArr = array();
    	foreach ($array as $key => $val) {
    		// Get parent parts and the current leaf
    		$parts	= preg_split($splitRE, $key, -1, PREG_SPLIT_NO_EMPTY);
    		$leafPart = array_pop($parts);
    		// Build parent structure
    		// Might be slow for really deep and large structures
    		$parentArr = &$returnArr;
    		foreach ($parts as $part) {
    			if (!isset($parentArr[$part])) {
    				$parentArr[$part] = array();
    			} elseif (!is_array($parentArr[$part])) {
    				if ($baseval) {
    					$parentArr[$part] = array('__base_val' => $parentArr[$part]);
    				} else {
    					$parentArr[$part] = array();
    				}
    			}
    			$parentArr = &$parentArr[$part];
    		}

    		// Add the final part to the structure
    		if (empty($parentArr[$leafPart])) {
    			$parentArr[$leafPart] = $val;
    		} elseif ($baseval && is_array($parentArr[$leafPart])) {
    			$parentArr[$leafPart]['__base_val'] = $val;
    		}
    	}
    	return $returnArr;
    }
}