contextmenu en react-checkbox-tree

[JavierRomualdo]

Hola estoy usando la biblioteca en un proyecto de gis y es muy genial, quisiera ver adicional si se puede agregar un contextmenu en react-checkbox-tree,

[jakezatecky]

Support for a context menu may be added in the future. It will necessitate additional handlers but features such as node insertion, deletion, and renaming could be added. Further options could be "collapse all", "check all", etc. when clicked outside of a node.

Would necessitate the usage of something like react-contextmenu but would certainly possible.

[ghost]

FWIW - I had some success with this. Just adding the context menu directly on the label. Like @jakezatecky said, react-contextmenu worked just fine.

{
    value: key,
    label:
        <>
            <ContextMenuTrigger id={key}>
                {this.getLayerLabel(geoJsonLayer)}
            </ContextMenuTrigger>
            <ContextMenu id={key}>
                <MenuItem data={{id: key, event: 'DeleteNetwork'}} onClick={this.myContextMenu}>Delete Layer</MenuItem>
                <MenuItem data={{id: key, event: 'MoveToTop'}} onClick={this.myContextMenu}>Move To Top</MenuItem>
                <MenuItem data={{id: key, event: 'ZoomToLayer'}} onClick={this.myContextMenu}>Zoom To Layer</MenuItem>
            </ContextMenu>
        </>,
    icon: <FontAwesomeIcon icon="road" color={iconColor} size={iconSize}/>,
}

[jkbehnam]

FWIW - I had some success with this. Just adding the context menu directly on the label. Like @jakezatecky said, react-contextmenu worked just fine.

{
    value: key,
    label:
        <>
            <ContextMenuTrigger id={key}>
                {this.getLayerLabel(geoJsonLayer)}
            </ContextMenuTrigger>
            <ContextMenu id={key}>
                <MenuItem data={{id: key, event: 'DeleteNetwork'}} onClick={this.myContextMenu}>Delete Layer</MenuItem>
                <MenuItem data={{id: key, event: 'MoveToTop'}} onClick={this.myContextMenu}>Move To Top</MenuItem>
                <MenuItem data={{id: key, event: 'ZoomToLayer'}} onClick={this.myContextMenu}>Zoom To Layer</MenuItem>
            </ContextMenu>
        </>,
    icon: <FontAwesomeIcon icon="road" color={iconColor} size={iconSize}/>,
}

thank you. its ok. but after i user this ,an element set padding between nodes