Custom style for each listitems element
BastienLairis opened this issue · 1 comments
BastienLairis commented
Hi @minop1205 and thx for your awesome work !
I need to have custom style for each listitems element, currently classes key is actually waiting for an object I need it to waiting for some sort of function to have access to my node props.
I tried several ways but without success 😢
function App() {
return (
<DndProvider backend={MultiBackend} options={getBackendOptions()}>
<Tree
tree={treeData}
rootId={0}
render={(node) => <div>{node.text}</div>}
dragPreviewRender={(monitorProps) => (
<div>{monitorProps.item.text}</div>
)}
// Actual behavior
classes={{
listItem: "bg-red",
}}
// what i would like to have
classes={(node) => {
return {
listItem: `${node.text ? "bg-red" : "bg-blue"}`,
};
}}
/>
</DndProvider>
);
}
export default App;
minop1205 commented
@BastienLairis Thank you for your feature request!
This feature was implemented in v3.5.
It is currently available in the alpha version.
npm i @minoru/react-dnd-treeview@alpha
Among the classes properties, a callback function can be specified for listItem.
<Tree
{...otherProps}
classes={{
listItem: (node, params) => {
return node.data?.fileType ? styles[node.data.fileType] : "";
},
}}
/>
For more information, please refer to the Storybook and CodeSandbox below.
CodeSandbox:
https://codesandbox.io/p/sandbox/dynamic-class-name-ts-thrng9?file=%2Fsrc%2FApp.tsx