drcmda / react-animated-tree Goto Github PK

Open the example provided in the readme.

Set "treeStyle" to the following:

const treeStyles = {
  color: 'white',
  fill: 'white',
  width: '50%'
}

You'll see a scrollbar on collapsed nodes:

Collapsed elements are scrollable. Scrollbar disappears after expanding element.

Modified example, which reproduces the problem: https://codesandbox.io/s/y0rozoy2yx

cant style Tree Component using Style prop

Hello, it is a good react tree component, but I need to use a custom toggle icon (plus, minus) with my own styles. I can't do it, these icons are hardcoded. Are you plan to add this functionality?

Add d.ts file in order to use this project with types when Typescript language is used.

The dashed line on the left side of the tree remains white while I can change colors of the svgs with 'fill'. I added the following to a css file but neither worked:

.treeview > .contents {
  border-left: '1px dashed rgba(0,255,0,0.4)',
}

.contents {
  border-left: '1px dashed rgba(0,255,0,0.4)',
}

Not possible to build due to missing rollup

logs hello on page load instead of waiting for click
also how to remove the x marked box on the left side.

      <Tree content="sub-subtree with children"  type="ITEM" canHide  onClick={console.log("hello")} open >

When using canHide only the true value is passed. How do we know which node was clicked?

Sample code

export const CustomLayerList = () => {

    const onClick = (evt: any) => {
        // only a true value is passed. Which node was clicked? 'this' is the current 
        console.log(evt);
    }

    return <Tree content="Apple" type="Fruit" open visible onClick={console.log}>
        <Tree content="Contents">
            <Tree  key='001' canHide content="Seeds" onClick={onClick}/>
            <Tree  key='002' canHide content="Pie" onClick={onClick}/>
        </Tree>
    </Tree>
}

I have noticed the styles have been written in-line with the code but no mouse hover change the color or mouse point

how to change the icon?

There should be a prop to hide or show the plus/minus icon.

Same as the eye can be hidden or shown.

The icon is visible in last child as well which is useless.

I got this error.

This is my code

import React from 'react'
import PropTypes from 'prop-types'
import { config, animated } from 'react-spring'
import { Spring } from 'react-spring/renderprops'
import * as Icons from './icons'

When I'm trying to add onClick methods in component is not working. I've seen documentation and prop onClick is not there

Currently the package.json file specifies "typings": "index.d.ts" as well as referencing "index.d.ts" in the files property, but there is no index.d.ts in either the repo or in the final npm package currently.

If you're open to it, I'd be happy to create a PR for a simple d.ts file either here or to DefinitelyTyped.