Thanks for the screenshot!
1. The tree component is driven by data, and you can set default data initially.
2. Any interactions with the component will generate updated data, which will be returned via the update function.
You will then need to pass this updated data back to the component.
Please refer to the snippet below for details.
import { React, type AllWidgetProps } from 'jimu-core'
import { type IMConfig } from '../config'
import { Tree, TreeAlignmentType, TreeCollapseStyle, TreeStyle } from 'jimu-ui/basic/list-tree'
const Widget = (props: AllWidgetProps<IMConfig>) => {
const getItemsJson = () => {
const myCommands = [
{
label: 'Edit',
iconProps: () => ({ icon: require('jimu-icons/svg/outlined/editor/edit.svg') }),
action: (options) => { alert(`Edit fired for item: ${JSON.stringify(options.data.itemJsons, null, 2)}`) }
}
]
return {
itemKey: 'root item for tree data entry',
itemStateTitle: 'root item for tree data entry',
itemChildren: [
{
itemKey: 'dummy entity 1',
itemStateTitle: 'dummy entity 1',
isItemSelectable: true,
itemStateChecked: true,
itemStateCommands: myCommands,
itemStateDetailContent: JSON.stringify({ itemStateCommands: myCommands.map(i => i.label) }),
itemStateIcon: () => ({ icon: require('jimu-icons/svg/outlined/gis/map.svg') })
},
{
itemKey: 'dummy entity 2',
itemStateTitle: 'dummy entity 2',
itemStateExpanded: true,
itemStateCommands: myCommands.slice(1),
itemStateDetailContent: JSON.stringify({ itemStateCommands: myCommands.slice(1).map(i => i.label) }),
itemStateIcon: () => ({ icon: require('jimu-icons/svg/outlined/gis/map.svg') }),
itemChildren: [
{
itemKey: 'dummy entity 2.1',
itemStateTitle: 'dummy entity 2.1',
itemChildren: [
{
itemKey: 'dummy entity 2.1.1',
itemStateTitle: 'dummy entity 2.1.1',
itemStateCommands: myCommands.slice(1)
},
{
itemKey: 'dummy entity 2.1.2',
itemStateTitle: 'dummy entity 2.1.2'
}
]
},
{
itemKey: 'dummy entity 2.2',
itemStateTitle: 'dummy entity 2.2 (isItemSelectable = false)',
isItemSelectable: false,
itemChildren: [
{
itemKey: 'dummy entity 2.2.1',
itemStateTitle: 'dummy entity 2.2.1'
}
]
}
]
}
]
}
}
const [rootItemJson, setRootItemJson] = React.useState(getItemsJson())
return (
<div className="widget-demo jimu-widget m-2">
<p>Simple Widget</p>
<p>exampleConfigProperty: {props.config.exampleConfigProperty}</p>
<Tree
size={'default'}
collapseStyle={TreeCollapseStyle.PlusMinus}
dndEnabled={false}
treeAlignmentType={TreeAlignmentType.Typical}
treeStyle={TreeStyle.Card}
isMultiSelection={true}
checkboxLinkage={true}
rootItemJson={rootItemJson}
onUpdateItem={(actionData, refComponent) => {
if (actionData.changeItemJson) {
const [nextRootItemJson] = actionData.itemJsons.slice(-1)
setRootItemJson({ ...nextRootItemJson })
}
}}
/>
</div>
)
}
export default Widget