TreeView

() => {
	const initialItems = [
		{
			index: 'root',
			children: ['1', '2'],
			data: 'Root Folder',
			isFolder: true,
			isChecked: false
		},
		{
			index: '1',
			children: ['3'],
			data: 'Folder 1',
			isFolder: true,
			isChecked: true
		},
		{
			index: '2',
			children: [],
			data: 'File 1',
			isFolder: false,
			isChecked: false
		},
		{
			index: '3',
			children: [],
			data: 'File 2',
			isFolder: false,
			isChecked: false
		}
	]
	return (<TreeView items={initialItems} />)
}

()=>{
	const initialItems = [
		{
			index: 'root',
			children: ['1', '2'],
			data: 'Root Folder',
			isFolder: true,
			isChecked: false
		},
		{
			index: '1',
			children: ['3'],
			data: 'Folder 1',
			isFolder: true,
			isChecked: true
		},
		{
			index: '2',
			children: [],
			data: 'File 1',
			isFolder: false,
			isChecked: false
		},
		{
			index: '3',
			children: [],
			data: 'File 2',
			isFolder: false,
			isChecked: false
		}
	]
	return (
		<TreeView
			items={initialItems}
			options={{
				canDragAndDrop: false,
				renderItemTitle: ({ title, item, context }) => (
					<div style={{ display: 'flex', alignItems: 'center' }}>
						<input
							type='checkbox'
							checked={item.isChecked}
							onClick={(e) => e.stopPropagation()}
							onChange={() => {
								item.isChecked = !item.isChecked

								context.selectItem()
							}}
						/>
						<span style={{ marginLeft: '8px' }}>{title}</span>
					</div>
				)
			}}
		/>
	)
}

()=>{
	const treeviewRef = React.useRef(null)
	const [exportData, setExportData] = React.useState('')
	const initialItems = [
		{
			index: 'root',
			children: ['1', '2'],
			data: 'Root Folder',
			isFolder: true,
			isChecked: false
		},
		{
			index: '1',
			children: ['3'],
			data: 'Folder 1',
			isFolder: true,
			isChecked: true
		},
		{
			index: '2',
			children: [],
			data: 'File 1',
			isFolder: false,
			isChecked: false
		},
		{
			index: '3',
			children: [],
			data: 'File 2',
			isFolder: false,
			isChecked: false
		}
	]
	const onClickExport = () => {
    setExportData(treeviewRef.current?.getTreeData())
  }
	return (
		<>
			<button onClick={onClickExport}>Export</button>
			<TreeView
				items={initialItems}
				options={{
					renderItemTitle: ({ title, item, context }) => (
						<div style={{ display: 'flex', alignItems: 'center' }}>
							<input
								type='checkbox'
								checked={item.isChecked}
								onClick={(e) => e.stopPropagation()}
								onChange={() => {
									item.isChecked = !item.isChecked

									context.selectItem()
								}}
							/>
							<span style={{ marginLeft: '8px' }}>{title}</span>
						</div>
					)
				}}
				ref={treeviewRef}
			/>
			<pre>
				{JSON.stringify(exportData)}
			</pre>
		</>
	)
}