brimdata / react-arborist

The complete tree view component for React
MIT License
3.07k stars 140 forks source link

how to set the click node not to expand? #279

Closed zhangwei900808 closed 1 month ago

zhangwei900808 commented 1 month ago

nice work! I want to set the click node not to expand and only click the prev icon can expand, how to set it?

zhangwei900808 commented 1 month ago

I resolve it before:

   function renderTreeNode({ node, style, dragHandle }) {
        /* This node instance can do many things. See the API reference. */
        return (
            <div style={style} className={classNames({
                'bg-[#D4CEF1] rounded-md': node.isSelected
            })} ref={dragHandle} onClick={() => node.toggle()}>
                <div className={'pl-2 py-2 text-sm'}>
                    <span className={'text-xs'}>
                        {
                            node.isLeaf?null:!node.isOpen ? <CaretRightOutlined /> : <CaretDownOutlined />
                        }
                    </span>
                    {node.data.icon?node.data.icon:null}
                    <span className={'pl-2'}>{node.data.name}</span>
                </div>
            </div>
        );
    }

after:

   function renderTreeNode({ node, style, dragHandle }) {
        /* This node instance can do many things. See the API reference. */
        return (
            <div style={style} className={classNames({
                'bg-[#D4CEF1] rounded-md': node.isSelected
            })} ref={dragHandle}>
                <div className={'pl-2 py-2 text-sm'}>
                    <span className={'text-xs'}>
                        {
                            node.isLeaf?null:!node.isOpen ? <CaretRightOutlined onClick={() => node.toggle()}/> : <CaretDownOutlined onClick={() => node.toggle()}/>
                        }
                    </span>
                    {node.data.icon?node.data.icon:null}
                    <span className={'pl-2'}>{node.data.name}</span>
                </div>
            </div>
        );
    }