uiconfig-blueprint 0.1.0-dev.1 → 0.1.0-dev.11

package/src/bpComponents/BPFolderComponent.tsx

@@ -1,10 +1,13 @@
-import React, {DOMAttributes} from "react";
+import React, {ChangeEventHandler, DOMAttributes} from "react";
 import {BPComponentProps, UiConfigRendererContextType} from "./BPComponent";
-import {Button, Collapse, Icon, Intent} from "@blueprintjs/core";
+import {Button, Checkbox, Collapse, Icon, Intent} from "@blueprintjs/core";
 import {ConfigObject} from "../ConfigObject";
 import {PanelActions} from "@blueprintjs/core/lib/esm/components/panel-stack2/panelTypes";
 import {safeSetProperty} from 'ts-browser-helpers'
 import {BPContainerComponent, BPContainerComponentState} from './BPContainerComponent'
+import classNames from "classnames";
+import {Classes} from "@blueprintjs/core/src/common";
+import {AnimationStates} from "@blueprintjs/core/lib/esm/components/collapse/collapse";
 
 export type BPFolderComponentState = BPContainerComponentState & {
 }
@@ -21,31 +24,39 @@ export class BPFolderComponent extends BPContainerComponent<BPFolderComponentSta
             safeSetProperty(this.props.config, "expanded", e, true)
             // if (e) this.state.children.forEach(c => Array.isArray(c) ? null : c.uiRefresh?.("postFrame", true, 1)) // todo: handle array and functions
         }
-
+        const children = this.state.children
+        const enabledToggle = children[0] && this.context.methods.getBinding(children[0])[1] === 'enabled' ? children[0] : undefined
+        enabledToggle && (enabledToggle.hidden = true)
         return !this.state.hidden ? (
             <FolderHeadCard
                 key={this.props.config.uuid}
                 open={this.state.expanded}
                 disabled={this.state.disabled}
+                level={this.props.level ?? 0}
                 minimal={(this.props.level ?? 0) > 0}
                 onClick={() => {
                     if(this.state.readOnly) return
                     setExpanded(!this.state.expanded)
                 }}
                 label={this.state.label}
+                enabled={enabledToggle ? this.context.methods.getRawValue(enabledToggle) : undefined}
+                onEnabledChange={(e) => enabledToggle && this.context.methods.setValue(enabledToggle, e.target.checked, {}).then(() => this.setState(this.state))}
             >
-                <Collapse isOpen={this.state.expanded} keepChildrenMounted={false}>
-                    <div className="folder-children" style={{listStyleType: "none", paddingLeft: "0"}}>
-                        {this.state.children.map((c, i) => <ConfigObject key={'c' + i} {...this.props} config={c}
-                                                                         level={(this.props.level ?? 0) + 1}/>)}
+                <Collapse2 isOpen={this.state.expanded} keepChildrenMounted={true} transitionDuration={300}>
+                    <div className="folder-children" style={{listStyleType: "none", paddingLeft: this.props.level??0 > 2 ? "6px" : 0}}> {/*todo use parameter instead of const 6*/}
+                        {children.map((c, i) =>
+                            <ConfigObject key={'c' + i} {...this.props} config={c}
+                                          level={(this.props.level ?? 0) + 1}/>
+                        )}
                     </div>
-                </Collapse>
+                </Collapse2>
             </FolderHeadCard>
         ) : null
     }
 }
 
-export const FolderHeadCard: React.FC<React.PropsWithChildren<{ open: boolean, label: string, minimal: boolean, disabled?: boolean, onClick: DOMAttributes<HTMLElement>['onClick'] }>> = (props) => {
+export const FolderHeadCard: React.FC<React.PropsWithChildren<{ open: boolean, label: string, minimal: boolean, level: number, disabled?: boolean, enabled?: boolean, onEnabledChange?: ChangeEventHandler<HTMLInputElement>, onClick: DOMAttributes<HTMLElement>['onClick'] }>> = (props) => {
+    const hasEnabled = (props.enabled !== undefined)
     return (
         <div
             // interactive={!props.open}
@@ -71,21 +82,99 @@ export const FolderHeadCard: React.FC<React.PropsWithChildren<{ open: boolean, l
                 {/*</Button>*/}
 
                 <Button
-                    className="folder-trigger-button" fill={!props.minimal} onClick={props.onClick}
+                    className={"folder-trigger-button " + (props.open ? "folder-trigger-button-expanded" : "")}
+                    // fill={!props.minimal}
+                    fill={true}
+                    onClick={props.onClick}
                     minimal={true}
                     disabled={props.disabled}
                     small={props.minimal}
-                    style={props.minimal ? {} : {fontSize: "0.95rem", paddingTop: "8px", paddingBottom: "8px"}}
+                    style={props.level ? {marginLeft: "6px"} : {fontSize: "0.95rem", paddingTop: "8px", paddingBottom: "8px"}}
                     intent={props.open ? Intent.PRIMARY : Intent.NONE}
-                    rightIcon={(
-                        <Icon icon="chevron-right" style={{
-                            rotate: props.open ? "90deg" : "0deg",
-                            transition: "rotate 0.25s ease-in-out"
-                        }}/>
+                    // icon={props.enabled !== undefined  && <span style={{minWidth: '20px'}}></span>} // adding a span here will center the text in the button
+                    icon={(
+                        <>
+                            <Icon icon="caret-right" style={{
+                                rotate: props.open ? "90deg" : "0deg",
+                                transition: "rotate 0.25s ease-in-out"
+                            }}/>
+                        </>
                     )}>{props.label}
                 </Button>
+                {hasEnabled && <Checkbox
+                    style={{margin: 0, position: 'absolute', left: '10px'}}
+                    large inline
+                    defaultChecked={props.enabled}
+                    onChange={props.onEnabledChange}
+                    disabled={props.disabled}
+                    onClick={(e) => e.stopPropagation()}
+                />}
             </div>
             {props.children}
         </div>
     )
 }
+
+export class Collapse2 extends Collapse{
+    private contentsRefHandler2 = (el: HTMLElement | null) => {
+        // @ts-ignore
+        this.contents = el;
+        // @ts-ignore
+        if (this.contents != null) {
+            // @ts-ignore
+            const height = this.contents.clientHeight;
+            this.setState({
+                animationState: this.props.isOpen ? AnimationStates.OPEN : AnimationStates.CLOSED,
+                height: height === 0 ? undefined : `${height}px`,
+                heightWhenOpen: height === 0 ? undefined : height,
+            });
+        }
+    };
+
+    public render() {
+        const isContentVisible = this.state.animationState !== AnimationStates.CLOSED;
+        const shouldRenderChildren = isContentVisible || this.props.keepChildrenMounted;
+        // const displayWithTransform = isContentVisible && this.state.animationState !== AnimationStates.CLOSING;
+        const isAutoHeight = this.state.height === "auto";
+
+        const containerStyle = {
+            height: isContentVisible ? this.state.height : undefined,
+            overflowY: isAutoHeight ? "visible" : undefined,
+            // transitions don't work with height: auto
+            transition: isAutoHeight ? "none" : undefined,
+        };
+
+        const contentsStyle = {
+            // only use heightWhenOpen while closing
+            // transform: displayWithTransform ? "translateY(0)" : `translateY(-${this.state.heightWhenOpen}px)`,
+            // transitions don't work with height: auto
+            // transition: isAutoHeight ? "none" : undefined,
+            display: "block", // for opacity animation
+            visibility: isContentVisible ? "visible" : "hidden",
+            opacity: this.state.animationState === AnimationStates.CLOSING ||  this.state.animationState === AnimationStates.CLOSED ? 0.1 : 1,
+        } as React.CSSProperties;
+
+        // if(isContentVisible && !isAutoHeight && this.state.heightWhenOpen && this.state.height){
+        //     const h = parseInt(this.state.height)
+        //     contentsStyle.opacity = h / this.state.heightWhenOpen;
+        //     console.log(contentsStyle.opacity)
+        // }
+
+        return React.createElement(
+            this.props.component!,
+            {
+                className: classNames(Classes.COLLAPSE, this.props.className),
+                style: containerStyle,
+            },
+            <div
+                className={Classes.COLLAPSE_BODY}
+                ref={this.contentsRefHandler2}
+                style={contentsStyle}
+                aria-hidden={!isContentVisible}
+            >
+                {shouldRenderChildren ? this.props.children : null}
+            </div>,
+        );
+    }
+
+}

package/src/bpComponents/BPInputComponent.tsx

@@ -2,9 +2,10 @@ import {BPValueComponent, BPValueComponentState} from "./BPValueComponent";
 import {BPComponentProps, UiConfigRendererContextType} from "./BPComponent";
 import {ReactNode} from "react";
 import {FormGroupComponent} from "../components/FormGroupComponent";
+import {PrimitiveVal} from "uiconfig.js";
 
 export abstract class BPInputComponent<
-    TStateValue, TState extends BPValueComponentState<TStateValue> = BPValueComponentState<TStateValue>>
+    TStateValue extends PrimitiveVal, TState extends BPValueComponentState<TStateValue> = BPValueComponentState<TStateValue>>
     extends BPValueComponent<TStateValue, TState, TStateValue> {
 
     protected constructor(props: BPComponentProps<TStateValue>, context: UiConfigRendererContextType, state: TState) {
@@ -25,7 +26,10 @@ export abstract class BPInputComponent<
 
     render() {
         return !this.state.hidden ? (
-            <FormGroupComponent disabled={this.state.disabled} label={this.state.label} flexBasis={this.flexBasis}>
+            <FormGroupComponent disabled={this.state.disabled}
+                                label={this.state.label}
+                                flexBasis={this.state.baseWidth ?? this.flexBasis}
+            >
                 {this.renderInput()}
             </FormGroupComponent>
         ) : null

package/src/bpComponents/BPNumberInputComponent.tsx

@@ -3,8 +3,9 @@ import {BPComponentProps, UiConfigRendererContextType} from "./BPComponent";
 import {BPInputComponent} from "./BPInputComponent";
 import {ExtendedNumericInput} from "../components/ExtendedNumericInput";
 import {BPValueComponentState} from "./BPValueComponent";
+import {getNumberTransformFunctions} from "./GetNumberTransformFunctions";
 
-export class BPNumberInputComponent extends BPInputComponent<number> {
+export class BPNumberInputComponent extends BPInputComponent<number, BPValueComponentState<number>&{unit?: string}> {
     constructor(props: BPComponentProps<number>, context: UiConfigRendererContextType) {
         super(props, context, {value: 0, label: 'Number'});
     }
@@ -21,15 +22,26 @@ export class BPNumberInputComponent extends BPInputComponent<number> {
     }
 
     renderInput() {
+
+        const unit = this.props.config.unit as string|undefined; // todo add to uiconfig, getOrCall
+        const unitType = this.props.config.unitType as string|undefined; // todo add to uiconfig, getOrCall
+        const targetUnit = this.state.unit || unit
+        const {transformValue, invTransformValue} = getNumberTransformFunctions(unit, unitType, targetUnit);
+
         return (
             <ExtendedNumericInput
                 className="numericInput"
                 disabled={this.state.disabled}
                 readOnly={this.state.readOnly}
                 defaultValue={this.state.value}
+                fill={true}
                 ref={this._inputs[0]}
                 key={this.props.config.uuid}
-                onChange2={this._onChange} fill={false}/>
+                onChange2={this._onChange}
+                transformValue={transformValue}
+                invTransformValue={invTransformValue}
+            />
         )
     }
 }
+

package/src/bpComponents/BPPanelComponent.tsx

@@ -42,7 +42,7 @@ export class BPPanelComponent extends BPContainerComponent<BPPanelComponentState
             <div
                 key={this.props.config.uuid}
                 className="folder-children" style={{listStyleType: "none", paddingLeft: "0"}}>
-                {this.state.children.map((c, i) => <ConfigObject key={'c' + i} {...this.props} config={c}/>)}
+                {this.state.children.map((c, i) => c ? <ConfigObject key={'c' + i} {...this.props} config={c}/> : null)}
             </div>
         ) : null
     }

package/src/bpComponents/BPSliderInputComponent.tsx

@@ -1,13 +1,16 @@
 import {BPComponentProps, UiConfigRendererContextType} from "./BPComponent";
-import {NumericInput, Slider} from "@blueprintjs/core";
+import {Slider} from "@blueprintjs/core";
 import {BPInputComponent} from "./BPInputComponent";
 import {BPValueComponentState} from "./BPValueComponent";
 import {getOrCall} from "ts-browser-helpers";
+import {ExtendedNumericInput} from "../components/ExtendedNumericInput";
+import {getNumberTransformFunctions} from "./GetNumberTransformFunctions";
 
 export type BPSliderComponentState = BPValueComponentState<number> & {
     min: number,
     max: number,
     step: number
+    unit?: string,
 }
 
 export class BPSliderInputComponent extends BPInputComponent<number, BPSliderComponentState> {
@@ -35,36 +38,53 @@ export class BPSliderInputComponent extends BPInputComponent<number, BPSliderCom
     flexBasis = "75%"
 
     renderInput() {
-        return [(
-            <Slider
+
+        const unit = this.props.config.unit as string|undefined; // todo add to uiconfig, getOrCall
+        const unitType = this.props.config.unitType as string|undefined; // todo add to uiconfig, getOrCall
+        const targetUnit = this.state.unit || unit
+        const {transformValue, invTransformValue} = getNumberTransformFunctions(unit, unitType, targetUnit);
+
+        const invTransformValue_ = invTransformValue || ((v: number) => v);
+        const transformValue_ = transformValue || ((v: number) => v);
+        return [(<ExtendedNumericInput
+                style={{maxWidth: "4rem", minWidth: "3rem"}}
+                // defaultValue={state}
+                disabled={this.state.disabled} readOnly={this.state.readOnly}
                 value={Math.min(this.state.max, Math.max(this.state.min, this.state.value))}
+                key={this.props.config.uuid + '_input'}
+                min={this.state.min} max={this.state.max}
+                stepSize={this.state.step}
+                minorStepSize={this.state.step/10}
+                majorStepSize={this.state.step*10}
+                buttonPosition="none"
+                draggableIcon={false}
+                transformValue={transformValue}
+                invTransformValue={invTransformValue}
+                onChange2={(v, last) => {
+                    if(this.state.readOnly) return
+                    this.setValue(v, last)
+                }}
+            />), (
+            <Slider
+                value={invTransformValue_(Math.min(this.state.max, Math.max(this.state.min, this.state.value)))}
                 key={this.props.config.uuid + '_slider'}
                 disabled={this.state.disabled}
-                min={this.state.min} max={this.state.max} stepSize={this.state.step}
+                min={invTransformValue_(this.state.min)}
+                max={invTransformValue_(this.state.max)}
+                stepSize={invTransformValue_(this.state.step)}
                 labelRenderer={false}
                 // labelStepSize={(max - min)}
                 // labelValues={[]}
                 onChange={(v) => {
                     if(this.state.readOnly) return
-                    this.setValue(v)
+                    this.setValue(transformValue_(v), false)
                 }}
-            />
-        ),(
-            <NumericInput
-                style={{maxWidth: "4rem", minWidth: "3rem"}}
-                // defaultValue={state}
-                disabled={this.state.disabled}
-                value={Math.min(this.state.max, Math.max(this.state.min, this.state.value))}
-                key={this.props.config.uuid + '_input'}
-                min={this.state.min} max={this.state.max} stepSize={this.state.step}
-                minorStepSize={this.state.step/10}
-                majorStepSize={this.state.step*10}
-                buttonPosition="none"
-                onValueChange={(v) => {
+                onRelease={(v) => {
                     if(this.state.readOnly) return
-                    this.setValue(v)
+                    this.setValue(transformValue_(v), true)
                 }}
-            />)
+            />
+        ),
     ]
     }
 }

package/src/bpComponents/BPTextInputComponent.tsx

@@ -20,6 +20,7 @@ export class BPTextInputComponent extends BPInputComponent<string> {
                 disabled={this.state.disabled}
                 readOnly={this.state.readOnly}
                 key={this.props.config.uuid}
+                fill={true}
                 onChange={this._onChange}/>
         )
     }

package/src/bpComponents/BPToggleInputComponent.tsx

@@ -16,14 +16,17 @@ export class BPToggleInputComponent extends BPInputComponent<boolean> {
         return (
             <Switch alignIndicator="right" defaultChecked={this.state.value}
                     disabled={this.state.disabled} readOnly={this.state.readOnly}
-                    label={this.state.label} onChange={this._onChange}
-                    className="switch" innerLabelChecked="on" innerLabel="off"/>
+                    labelElement={(<span className={"bp5-label"} title={this.state.label}>{this.state.label}</span>)} onChange={this._onChange}
+                    inline={false} large={false}
+                    className="switch"/>
         )
     }
 
     render() {
         return !this.state.hidden ? (
-            <div className="xPaddedContent folderContent" style={{flexBasis: "100%"}}>
+            <div className="xPaddedContent folderContent"
+                 style={{flexBasis: this.state.baseWidth ?? this.flexBasis}}
+            >
                 {this.renderInput()}
             </div>
         ) : null

package/src/bpComponents/BPTreeComponent.tsx

@@ -1,15 +1,17 @@
+import {Tree2} from "../components/Tree2";
 import {BPComponent, BPComponentProps, BPComponentState, UiConfigRendererContextType} from "./BPComponent";
-import {Tree, TreeNodeInfo} from "@blueprintjs/core";
+import {TreeNodeInfo} from "@blueprintjs/core";
+import React from "react";
 
 export type BPTreeComponentState<T = {}> = BPComponentState & {
     nodes: TreeNodeInfo<T>[]
 }
 
 // https://github.com/palantir/blueprint/blob/develop/packages/docs-app/src/examples/core-examples/treeExample.tsx
-type NodePath = number[];
+type NodePath = (string|number)[];
 
-export abstract class BPTreeComponent<T = {}, TConfigVal = void> extends BPComponent<TConfigVal, BPTreeComponentState<T>> {
-    constructor(props: BPComponentProps<TConfigVal>, context: UiConfigRendererContextType) {
+export abstract class BPTreeComponent<T = {}, TConfigVal extends any /*|PrimitiveVal|void*/ = void> extends BPComponent<TConfigVal, BPTreeComponentState<T>, BPComponentProps<TConfigVal> & {className: string}> {
+    constructor(props: BPComponentProps<TConfigVal> & {className: string}, context: UiConfigRendererContextType) {
         super(props, context, {nodes: []});
     }
 
@@ -32,10 +34,10 @@ export abstract class BPTreeComponent<T = {}, TConfigVal = void> extends BPCompo
 
     protected abstract _getRootNodes(): T[]
 
-    protected async _onNodeClick(_id: string | number, _path: number[]) {
+    protected async _onNodeClick(_id: string | number) {
     }
 
-    protected async _onNodeDoubleClick(_id: string | number, _path: number[]) {
+    protected async _onNodeDoubleClick(_id: string | number) {
     }
 
     protected _cloneNodes(callback?: (t:TreeNodeInfo<T>)=>void, state?: TreeNodeInfo<T>[]): TreeNodeInfo<T>[] {
@@ -50,30 +52,39 @@ export abstract class BPTreeComponent<T = {}, TConfigVal = void> extends BPCompo
         })
     }
 
-    protected _forEachNode<T>(nodes: TreeNodeInfo<T>[] | undefined, callback: (node: TreeNodeInfo<T>) => void) {
+    protected _getNodePath(id: string, nodes?: TreeNodeInfo<T>[]): NodePath {
+        let path1: NodePath|null = null
+        this._forEachNode(nodes ?? this.state.nodes, (node, path) => {
+            if (node.id === id) path1 = path
+        })
+        return path1 ?? []
+    }
+
+    protected _forEachNode<T>(nodes: TreeNodeInfo<T>[] | undefined, callback: (node: TreeNodeInfo<T>, path: NodePath) => void, path: NodePath = []) {
         if (nodes === undefined) {
             return nodes;
         }
         for (const node of nodes) {
-            callback(node);
-            this._forEachNode(node.childNodes, callback);
+            callback(node, path);
+            this._forEachNode(node.childNodes, callback, [...path, node.id]);
         }
         return nodes
     }
-    protected _forNodeAtPath<T>(nodes: TreeNodeInfo<T>[], path: NodePath, callback: (node: TreeNodeInfo<T>) => void) {
-        callback(Tree.nodeFromPath(path, nodes));
-    }
 
-    protected async _onNodeExpandCollapse(_id: string | number, _path: number[]) {
+    // protected _forNodeAtPath<T>(nodes: TreeNodeInfo<T>[], path: NodePath, callback: (node: TreeNodeInfo<T>) => void) {
+    //     callback(Tree.nodeFromPath(path, nodes));
+    // }
+
+    protected async _onNodeExpandCollapse(_id: string | number, expanded?: boolean) {
         const nodes = this._cloneNodes()
         const node = this._infoMap.get(_id)
         if (!node) return
-        node.isExpanded = !node.isExpanded
+        node.isExpanded = expanded ?? !node.isExpanded
         // forNodeAtPath(nodes, _path, node => (node.isExpanded = !node.isExpanded));
         await this.setStatePromise({...this.state, nodes})
     }
 
-    protected async _onNodeContextMenu(_id: string | number, _path: number[]) {
+    protected async _onNodeContextMenu(_id: string | number) {
     }
 
     protected buildData(data: TreeNodeInfo<T>[], obj: T, _?: any, _2?: any) {
@@ -103,8 +114,21 @@ export abstract class BPTreeComponent<T = {}, TConfigVal = void> extends BPCompo
         return this.setStatePromise({...this.state, nodes})
     }
 
-    async setSelected(id?: string) {
-        const nodes = this._cloneNodes(n => n.isSelected = n.id === id)
+    async setSelected(id?: string|string[], expand = false) {
+        const nodes =
+            Array.isArray(id) ?
+            this._cloneNodes(n => n.isSelected = id.includes(n.id as any)) :
+            this._cloneNodes(n => n.isSelected = n.id === id)
+        if(expand && id!==undefined){
+            const ids = Array.isArray(id) ? id : [id]
+            for (const id1 of ids) {
+                const parents = this._getNodePath(id1, nodes)
+                for (let i = 0; i < parents.length; i++) {
+                    const node = this._infoMap.get(parents[i])
+                    if(node) node.isExpanded = true
+                }
+            }
+        }
         return this.setStatePromise({...this.state, nodes})
     }
 
@@ -116,28 +140,104 @@ export abstract class BPTreeComponent<T = {}, TConfigVal = void> extends BPCompo
         super.componentWillUnmount();
     }
 
+    findSelectedNode(nodes?: TreeNodeInfo<T>[]): TreeNodeInfo<T> | undefined {
+        if (!nodes) nodes = this.state.nodes
+        for (const node of nodes) {
+            if (node.isSelected) return node
+            if (node.childNodes) {
+                const res = this.findSelectedNode(node.childNodes)
+                if (res) return res
+            }
+        }
+    }
+    getFlatNodes(onlyVisible = false, nodes?: TreeNodeInfo<T>[], res: TreeNodeInfo<T>[] = []): TreeNodeInfo<T>[] {
+        if (!nodes) nodes = this.state.nodes
+        for (const node of nodes) {
+            res.push(node)
+            if (node.childNodes && (!onlyVisible || node.isExpanded)) this.getFlatNodes(onlyVisible, node.childNodes, res)
+        }
+        return res
+    }
+
+    protected _handleKeyDown(e: React.KeyboardEvent) {
+        const nodes = this.getFlatNodes(true)
+        let current, next, previous;
+        for (let i = 0; i < nodes.length; i++) {
+            const node = nodes[i]
+            if (node.isSelected) {
+                current = node
+                next = i < nodes.length - 1 ? nodes[i + 1] : undefined
+                previous = i > 0 ? nodes[i - 1] : undefined
+                break
+            }
+        }
+        switch (e.key) {
+            case "ArrowUp":
+                if (previous) this._onNodeClick(previous.id)
+                break
+            case "ArrowDown":
+                if (next) this._onNodeClick(next.id)
+                break
+            case "ArrowRight":
+                if (current) this._onNodeExpandCollapse(current.id, true)
+                break
+            case "ArrowLeft":
+                if (current) this._onNodeExpandCollapse(current.id, false)
+                break
+            case "Escape":
+                if (current) this._onNodeClick(current.id)
+                break
+            case "Enter":
+                if (current) this._onNodeDoubleClick(current.id)
+                break
+            default:
+                return
+        }
+        e.preventDefault()
+        e.stopPropagation()
+    }
+
+    protected _canDropNode(_sourceNode: TreeNodeInfo<T>, _sourcePath: NodePath, _targetNode: TreeNodeInfo<T>, _targetPath: NodePath, _index?: number) {
+        return true
+    }
+    protected _onDropNode(_sourceNode: TreeNodeInfo<T>, _sourcePath: NodePath, _targetNode: TreeNodeInfo<T>, _targetPath: NodePath, _e?: React.DragEvent, _index?: number) {
+        return
+    }
+
     render() {
-        const TreeT = Tree.ofType<T>()
+        const TreeT = Tree2.ofType<T>()
         return !this.state.hidden ? (
+            <div
+                style={{width: "100%", height: "100%"}}
+                onKeyDown={e => this._handleKeyDown(e)}
+                tabIndex={0}
+            >
             <TreeT
                 contents={this.state.nodes}
-                className="folderContent"
+                className={"folderContent " + (this.props.className||'')}
+                canDropNode={(node, path, targetNode, targetPath, index) => {
+                    return this._canDropNode(node, path, targetNode, targetPath, index)
+                }}
+                onNodeDrop={(node, path, targetNode, targetPath, e, index) => {
+                    // console.log(node, path, targetNode, targetPath, e);
+                    this._onDropNode(node, path, targetNode, targetPath, e, index)
+                }}
                 onNodeExpand={(node, _path, _e) => {
-                    this._onNodeExpandCollapse(node.id, _path)
+                    this._onNodeExpandCollapse(node.id)
                 }}
                 onNodeCollapse={(node, _path, _e) => {
-                    this._onNodeExpandCollapse(node.id, _path)
+                    this._onNodeExpandCollapse(node.id)
                 }}
                 onNodeClick={(node, _path, _e) => {
-                    this._onNodeClick(node.id, _path)
+                    this._onNodeClick(node.id)
                 }}
                 onNodeDoubleClick={(node, _path, _e) => {
-                    this._onNodeDoubleClick(node.id, _path)
+                    this._onNodeDoubleClick(node.id)
                 }}
                 onNodeContextMenu={(node, _path, _e) => {
-                    this._onNodeContextMenu(node.id, _path)
+                    this._onNodeContextMenu(node.id)
                 }}
-            />
+            /></div>
         ) : null
     }
 }

package/src/bpComponents/BPTreeFolderComponent.tsx

@@ -1,13 +1,13 @@
-import {v4} from "uuid";
 import {TreeNodeInfo} from "@blueprintjs/core";
 import {BPTreeComponent} from "./BPTreeComponent";
 import {UiObjectConfig} from 'uiconfig.js'
-import {getOrCall} from 'ts-browser-helpers'
+import {getOrCall, uuidV4} from 'ts-browser-helpers'
 
 export class BPTreeFolderComponent extends BPTreeComponent<UiObjectConfig> {
 
     protected _getNodeId(obj: UiObjectConfig) {
-        return obj.uuid || v4();
+        if(!obj.uuid) obj.uuid = uuidV4();
+        return obj.uuid;
     }
 
     protected _updateNodeInfo(node: TreeNodeInfo<UiObjectConfig>, obj: UiObjectConfig) {