Fork me on GitHub
#reagent
<
2022-07-30
>
vimfun00:07:53

Hi, guys. Is there any problem in using r/create-element with SortableTree? I am got stuck with it. Code:

(ns 
  (:require-macros [cljs.core.async.macros :refer [go]])
  (:require [reagent.core :as r]
            [reagent.dom :as dom]

            ["@nosferatu500/react-sortable-tree" :as rt]

            [cljs-http.client :as http]
            [cljs.core.async :refer [<!]]))

(defn root-component []
  (r/create-element rt/SortableTree
                    #js {:treeData [{:title "Chicken"
                                     :children [{:title "Egg"}]}
                                    {:title "Fish"
                                     :children [{:title "fingerline"}]}
                                    ]
                         :onChange (constantly "hi")}
                    ))
Compile Exception:
Closure compilation failed with 5 errors
--- node_modules/@nosferatu500/react-sortable-tree/index.js:1760
ES6 transpilation of 'Public class fields' is not yet implemented.
--- node_modules/@nosferatu500/react-sortable-tree/index.js:1782
ES6 transpilation of 'Public class fields' is not yet implemented.
--- node_modules/@nosferatu500/react-sortable-tree/index.js:1825
ES6 transpilation of 'Public class fields' is not yet implemented.
--- node_modules/@nosferatu500/react-sortable-tree/index.js:1881
ES6 transpilation of 'Public class fields' is not yet implemented.
--- node_modules/@nosferatu500/react-sortable-tree/index.js:1884
ES6 transpilation of 'Public class fields' is not yet implemented.

To quit, type: :cljs/quit
[:selected :frontend]shadow.user>
cljs.user>

rolt07:07:28

#js is not recursive, clj->js is

thanks 1
rolt07:07:01

but why not use adapt-react-class so that it's easier to use ?

vimfun00:07:14

This is the origin JS code:

import React, { Component } from 'react';
import SortableTree from 'react-sortable-tree';
import 'react-sortable-tree/style.css'; // This only needs to be imported once in your app

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

    this.state = {
      treeData: [
        { title: 'Chicken', children: [{ title: 'Egg' }] },
        { title: 'Fish', children: [{ title: 'fingerline' }] },
      ],
    };
  }

  render() {
    return (
      <div style={{ height: 400 }}>
        <SortableTree
          treeData={this.state.treeData}
          onChange={treeData => this.setState({ treeData })}
        />
      </div>
    );
  }
}