-
-
Notifications
You must be signed in to change notification settings - Fork 94
onclick is not working if i pass other then button html element on renderItem hook #114
-
I am trying to add a custom treeItem but having issues while expanding. click is not working if I try to add that on other than the button element. Can you help me with what I am missing here, any help is appreciated.
<UncontrolledTreeEnvironment
renderItemTitle={({ title }) => <span>{title}+1</span>}
renderItemArrow={({ item, context }) => (
<TreeIcon
expandIcon={expandIcon}
collapseIcon={collapseIcon}
color={theme.colors.monochrome.label}
item={item}
context={context}
/>
)}
renderItem={(renderItemProps) => <TreeItem {...renderItemProps}/>}
dataProvider={
new StaticTreeDataProvider(treeItem.items, (item, data) => {
return {
...item,
data,
};
})
}
getItemTitle={(item) => item.data}
viewState={{}}
>
<Tree treeId="tree-1" rootItem="root" treeLabel="Tree Listing" />
</UncontrolledTreeEnvironment>
**TreeItem**
export const TreeItem = (props) => {
const { title, arrow, depth, context, children, hasChildren } = props;
const { collapseItem, expandItem } = context
const callback = context.hasChildren
? context.isExpanded
? expandItem
: collapseItem
: '';
const theme: ApexTheme = useTheme();
return (
<Box
width="100%"
margin= "0"
display= 'flex'
flexDirection= 'column'
alignItem= 'flex-start'
padding="8px"
gap="4px"
backgroundColor={theme.colors.monochrome.offWhite}
{...context.itemContainerWithChildrenProps}
>
<Text
name=""
display="flex"
type={ButtonTypes.Text}
fontFamily={theme.fontFamily}
width="72px"
height="22px"
fontWeight={700}
onClick={callback}
fontSize={theme.fontSizes[DeviceTypes.Desktop].bSmall}
color={theme.colors.monochrome.label}
{...context.itemContainerWithoutChildrenProps}
{...context.interactiveElementProps}
>
{arrow}{title}
</Text>
{children}
</Box>
);
};
Beta Was this translation helpful? Give feedback.
All reactions
Hi @iamravisingh. Yes, interactiveElementProps is defining it's own onClick handler and is overwriting your own onclick callback. Try something like this
<Text {/* ... remaining props */} {...context.itemContainerWithoutChildrenProps} {...context.interactiveElementProps} onClick={e => { callback(e); context.interactiveElementProps(e); }} >
Replies: 1 comment 2 replies
-
Hi @iamravisingh. Yes, interactiveElementProps is defining it's own onClick handler and is overwriting your own onclick callback. Try something like this
<Text {/* ... remaining props */} {...context.itemContainerWithoutChildrenProps} {...context.interactiveElementProps} onClick={e => { callback(e); context.interactiveElementProps(e); }} >
Beta Was this translation helpful? Give feedback.
All reactions
-
@lukasbach Thanks for your comment.
I think interactiveElementProps is an object which can be used as
context.interactiveElementProps.onClick(e) ( correct me if I am wrong )
I have added an onclick on Box wrapper against the Text component which is working fine. However, while expanding the children's list it collapses the entire tree. Please check the attached video for your reference.
custom-treeItem.webm
Beta Was this translation helpful? Give feedback.
All reactions
-
@lukasbach Thanks I have resolved this issue.
we can use context.toggleExpandedState() or context.interactiveElementProps.onClick(e). However, I am using toggleExpandedState
Beta Was this translation helpful? Give feedback.