Hi, created wrappers for <react-checkbox-tree> and...

# javascript

[Nikolai Sviridov]

Hi, created wrappers for react-checkbox-tree and react-folder-tree and this is the first time when I encountered such strange behavior with wrappers. More in thread.

[Nikolai Sviridov]

As you can see checkboxes in react-checkbox-tree not in the right place. Code of wrapper :

@file:JsModule("react-checkbox-tree")
@file:JsNonModule

package wrappers

import kotlinext.js.ReadonlyArray
import react.ComponentClass
import react.PropsWithChildren

external interface TreeProps : PropsWithChildren {
  var checked: ReadonlyArray<String>
  var expanded: ReadonlyArray<String>
  var iconsClass: String
  var nodes: ReadonlyArray<TreeNode>
  var onCheck: (ReadonlyArray<String>) -> Unit
  var onExpand: (ReadonlyArray<String>) -> Unit
  var readOnly: Boolean
}

external interface TreeNode {
  var value: String
  var label: String
  var children: ReadonlyArray<TreeNode>
}

external interface TreeIcons {
  var check: dynamic
  var uncheck: dynamic
  var halfCheck: dynamic
  var expandClose: dynamic
  var expandOpen: dynamic
  var expandAll: dynamic
  var collapseAll: dynamic
  var parentClose: dynamic
  var parentOpen: dynamic
  var leaf: dynamic
}

@JsName("default")
external val CheckboxTree: ComponentClass<TreeProps>

[Nikolai Sviridov]

Code for react-folder-tree

@file:JsModule("react-folder-tree")
@file:JsNonModule

package wrappers

import kotlinext.js.ReadonlyArray
import react.ComponentClass
import react.PropsWithChildren

external interface FolderTreeProps : PropsWithChildren {
  var data: FolderTreeNode
  var indentPixels: Number
  var readOnly: Boolean
}

external interface FolderTreeNode {
  var name: String
  var checked: Number  // half check: some children are checked
  var isOpen: Boolean   // this folder is opened, we can see it's children
  var children: ReadonlyArray<FolderTreeNode>
}

@JsName("default")
external val FolderTree: ComponentClass<FolderTreeProps>

[Nikolai Sviridov]

In both cases nodes are jsObject {} . For react-folder-tree it seems need Font Awesome in webpack and icons will look as intended. But at the moment I don't know how to work with webpack.

[turansky]

webpack.config.d for static patches

[turansky]

Or webpack plugin for dynamic patches