reactで木構造のSortableなやつのメモ

目的

ReactでSotable木構造を作成し、それぞれの要素に上から順に順序をつける。

方法

reactには数多くのSortable List Componentがある。Sortable木構造を実装するのに使えるComponentを自分の知っている範囲を挙げると、

1. react-dnd
2. react-sortable-hoc
3. RubaXa/Sortable
4. Dragula

この中で、react-dndは一番、柔軟にDNDを扱うことができるライブラリであるが、うまく使えるようになるまでに必要な学習時間が尋常ではない。(気がする。自分は直ぐやめた。)

そこで、2を利用してみて、アニメーション的に2が非常に優秀であることがわかった。しかし、自分の目的は木構造のSortableを作成/利用することであったので、2は使用できないと考えた。

さらに、あらゆるSotrable Treeのライブラリの存在をグーグル先生に聞いた結果、最も自分の気持ちにFittingしているのは、

react-ui-tree

であることが判明した。

このReact-Ui-Treeでそれぞれの要素に対するIndexを手に入れるのに考えられる手段が次の２つ。

1. このライブラリの中身を少し手入れする
2. 木構造リストからIndexを算出

1は面倒だし、2でやるか（パフォーマンスはいいか。。。）ということで、結果的に、要素のIndexを手に入れるのに２の手段を選択した。

結果

1. 木構造リストから再帰的に総要素数を算出。
2. なんかやった

function calcAllNodeNumber(node) {
  if (node.children == null) return 1;
  let index = 1;
  for (var i in node.children) {
    index = index + calcAllNodeNumber(node.children[i]);
  }
  return index;
}
// ...
renderNode(node) {
  if (this.index == null) {
    this.maxNumber = calcAllNodeNumber(node);
  }
  let index = (this.index == null) ? 0 : this.index + 1;
  this.index = index;
  if (this.index == this.maxNumber - 1) this.index = null;
    
  return (...);  
}

最後に

できた。

Object.keys(rensouhairetu).length

で要素の数を取れるっぽい。。。。