feat: indentation prop, syntax

src/ContentTree.tsx

@@ -12,32 +12,42 @@ export interface ContentTreeProps {
 	nodeContentTypes: string[];
 	titleFields: string[];
 	locales: string[]; // the first is the default locale
+	indentation?: number;
 	iconRegistry?: { [index: string]: string };
 }
 
-export const ContentTree = (props: ContentTreeProps): ReactElement => {
+export const ContentTree = ({
-	const [stLocale] = useState(props.locales[0]);
+	sdkInstance,
+	cma,
+	rootType,
+	nodeContentTypes,
+	titleFields,
+	locales,
+	indentation = 1,
+	iconRegistry,
+}: ContentTreeProps): ReactElement => {
+	const [stLocale] = useState(locales[0]);
 	const [rootNodes, setRootNodes] = useImmer([emptyNodeProps()]);
 
 	useEffect(() => {
-		if (props.sdkInstance) {
+		if (sdkInstance) {
 			loadData().catch((err) => {
 				throw new Error('loadRootData', err);
 			});
 		}
-	}, [props.sdkInstance]);
+	}, [sdkInstance]);
 
 	const loadData = async (): Promise<void> => {
-		const CfRootData = await props.cma.entry.getMany({
+		const CfRootData = await cma.entry.getMany({
-			query: { content_type: props.rootType },
+			query: { content_type: rootType },
 		});
 		const nodes = cfEntriesToNodes(
 			CfRootData.items,
-			props.titleFields,
+			titleFields,
 			stLocale,
-			props.locales,
+			locales,
-			props.nodeContentTypes,
+			nodeContentTypes,
-			props.iconRegistry
+			iconRegistry
 		);
 		setRootNodes(nodes);
 	};
@@ -48,12 +58,13 @@ export const ContentTree = (props: ContentTreeProps): ReactElement => {
 				<ContentTreeRoot
 					key={i.toString()}
 					node={node}
-					locales={props.locales}
+					locales={locales}
-					nodeContentTypes={props.nodeContentTypes}
+					nodeContentTypes={nodeContentTypes}
-					iconRegistry={props.iconRegistry}
+					iconRegistry={iconRegistry}
-					cma={props.cma}
+					cma={cma}
-					titleFields={props.titleFields}
+					titleFields={titleFields}
-					sdkInstance={props.sdkInstance}
+					sdkInstance={sdkInstance}
+					depth={indentation}
 				/>
 			))}
 		</>

src/ContentTreeRoot.tsx

@@ -19,20 +19,30 @@ export interface ContentTreeRootProps {
 	nodeContentTypes: string[];
 	titleFields: string[];
 	locales: string[]; // the first is the default locale
+	depth: number;
 	iconRegistry?: { [index: string]: string };
 }
 
-export const ContentTreeRoot = (props: ContentTreeRootProps): ReactElement => {
+export const ContentTreeRoot = ({
-	const [stLocale] = useState(props.locales[0]);
+	node,
+	sdkInstance,
+	cma,
+	nodeContentTypes,
+	titleFields,
+	locales,
+	depth,
+	iconRegistry,
+}: ContentTreeRootProps): ReactElement => {
+	const [stLocale] = useState(locales[0]);
 	const [stRoot, setStRoot] = useImmer(emptyNodeProps());
 
 	useEffect(() => {
-		if (props.node.id) {
+		if (node.id) {
-			loadRootData(props.node).catch((err) => {
+			loadRootData(node).catch((err) => {
 				throw new Error('loadRootData', err);
 			});
 		}
-	}, [props.node]);
+	}, [node]);
 
 	const loadRootData = async (
 		rootNode: ContentTreeNodeProps
@@ -40,11 +50,11 @@ export const ContentTreeRoot = (props: ContentTreeRootProps): ReactElement => {
 		const childEntries = await getContentfulChildEntries(rootNode.id);
 		const childNodes = cfEntriesToNodes(
 			childEntries,
-			props.titleFields,
+			titleFields,
 			stLocale,
-			props.locales,
+			locales,
-			props.nodeContentTypes,
+			nodeContentTypes,
-			props.iconRegistry,
+			iconRegistry,
 			rootNode.id
 		);
 		const nodes = [rootNode, ...childNodes];
@@ -76,11 +86,11 @@ export const ContentTreeRoot = (props: ContentTreeRootProps): ReactElement => {
 		const cfChildren = await getContentfulChildEntries(node.id);
 		childNodes = cfEntriesToNodes(
 			cfChildren,
-			props.titleFields,
+			titleFields,
 			stLocale,
-			props.locales,
+			locales,
-			props.nodeContentTypes,
+			nodeContentTypes,
-			props.iconRegistry,
+			iconRegistry,
 			node.id
 		);
 		setStRoot((draft) => {
@@ -111,16 +121,16 @@ export const ContentTreeRoot = (props: ContentTreeRootProps): ReactElement => {
 	};
 
 	const editEntry = async (entryId: string): Promise<void> => {
-		await props.sdkInstance.navigator.openEntry(entryId, { slideIn: true });
+		await sdkInstance.navigator.openEntry(entryId, { slideIn: true });
 	};
 
 	const getContentfulChildEntries = async (
 		parentId: string
 	): Promise<Array<EntryProps<KeyValueMap>>> => {
-		const parentItem = await props.cma.entry.get({ entryId: parentId });
+		const parentItem = await cma.entry.get({ entryId: parentId });
 		const allChildIds: string[] = [];
 		for (const key of Object.keys(parentItem.fields)) {
-			if (props.nodeContentTypes.includes(key)) {
+			if (nodeContentTypes.includes(key)) {
 				const childNodeRefs = parentItem.fields[key][stLocale] as
 					| Link<string>
 					| Array<Link<string>>;
@@ -137,7 +147,7 @@ export const ContentTreeRoot = (props: ContentTreeRootProps): ReactElement => {
 		let done = false;
 		let skip = 0;
 		while (!done) {
-			const col = await props.cma.entry.getMany({
+			const col = await cma.entry.getMany({
 				query: {
 					'sys.id[in]': allChildIds.join(','),
 					skip,
@@ -192,7 +202,7 @@ export const ContentTreeRoot = (props: ContentTreeRootProps): ReactElement => {
 					</tr>
 					<ContentTreeNode
 						node={stRoot}
-						depth={1}
+						depth={depth}
 						addChildNodes={addChildNodes}
 						removeChildNodes={removeChildNodes}
 						editEntry={editEntry}