Support for custom React components

django-cms · Jan 5, 2024 · b3ae7b4 · b3ae7b4
1 parent 938f92f
commit b3ae7b4
Show file tree

Hide file tree

Showing 37 changed files with 932 additions and 424 deletions.
diff --git a/client/FileAdmin.tsx b/client/FileAdmin.tsx
@@ -6,7 +6,8 @@ import {FolderTabs} from "./FolderTabs";
 export default function FileAdmin(props) {
 	const settings = useContext(FinderSettings);
 	const editorRef = useRef(null);
-	const FileEditor = lazy(() => import(settings.react_component));
+	const component = `./components/${settings.editor_component}.js`;
+	const FileEditor = settings.editor_component ? lazy(() => import(component)) : null;
 
 	useEffect(() => {
 		editorRef.current.insertAdjacentHTML('afterbegin', settings.mainContent.innerHTML);
@@ -15,7 +16,7 @@ export default function FileAdmin(props) {
 	return (<>
 		<FolderTabs />
 		<div className="detail-editor">
-			{settings.react_component &&
+			{FileEditor &&
 			<Suspense fallback={<span>Loading...</span>}>
 				<FileEditor editorRef={editorRef} />
 			</Suspense>

diff --git a/client/FolderAdmin.tsx b/client/FolderAdmin.tsx
@@ -204,6 +204,7 @@ export default function FolderAdmin(props) {
 						ref={columnRefs[settings.folder_id]}
 						folderId={settings.folder_id}
 						setCurrentFolder={setCurrentFolder}
+						listRef={columnRefs[settings.folder_id]}
 						menuBarRef={menuBarRef}
 						layout={layout}
 					/>
@@ -278,9 +279,6 @@ export default function FolderAdmin(props) {
 		</>);
 	}
 
-	console.log("FilerAdmin", currentFolderId);
-	console.log("draggedInodesStyle", draggedInodesStyle);
-
 	return (<>
 		<MenuBar
 			ref={menuBarRef}

diff --git a/client/InodeList.tsx b/client/InodeList.tsx
@@ -1,13 +1,12 @@
 import React, {
 	createRef,
 	forwardRef,
-	SyntheticEvent,
 	useContext,
 	useEffect,
 	useImperativeHandle,
 	useState,
 } from 'react';
-import {Folder, File, Inode, ListItem} from './Inode';
+import {Folder, File, DraggableItem, ListItem} from './Item';
 import {FinderSettings} from './FinderSettings';
 
 
@@ -131,8 +130,13 @@ export const InodeList = forwardRef((props: any, forwardedRef) => {
 		setSelectedInode(selectedInode);
 	}
 
-	function selectMultipleInodes(selectedInodeIds: Array<string>) {
-		const modifiedInodes = inodes.map(inode => ({...inode, selected: selectedInodeIds.includes(inode.id), cutted: false, copied: false}));
+	function selectMultipleInodes(selectedInodeIds: Array<string>, extend: boolean = false) {
+		const modifiedInodes = inodes.map(inode => ({
+			...inode,
+			selected: extend && inode.selected || selectedInodeIds.includes(inode.id),
+			cutted: false,
+			copied: false,
+		}));
 		setCurrentFolder(folderId);
 		setInodes(modifiedInodes);
 		menuBarRef.current.setSelected(modifiedInodes.filter(inode => inode.selected));
@@ -144,12 +148,6 @@ export const InodeList = forwardRef((props: any, forwardedRef) => {
 		}
 	}
 
-	const deactivateInodes = (event: SyntheticEvent) => {
-		if (event.target instanceof Element && event.target.classList.contains('inode-list')) {
-			deselectInodes();
-		}
-	};
-
 	function cssClasses() {
 		const classes = ['inode-list'];
 		if (settings.is_trash && !searchQuery) {
@@ -174,7 +172,7 @@ export const InodeList = forwardRef((props: any, forwardedRef) => {
 	console.log('InodeList', folderId, inodes);
 
 	return (
-		<ul className={cssClasses()} onClick={deactivateInodes}>
+		<ul className={cssClasses()}>
 			{layout === 'list' &&
 			<li className="header">
 				<div className="inode">
@@ -200,11 +198,11 @@ export function DraggedInodes(props) {
 	return (
 		<ul className="inode-list" style={style}>{
 			inodes.map(inode =>
-			<Inode key={inode.id} {...inode} isDragged={true}>
+			<DraggableItem key={inode.id} {...inode} isDragged={true}>
 				<div className="inode">
 					<ListItem {...inode} layout={layout} />
 				</div>
-			</Inode>)
+			</DraggableItem>)
 		}</ul>
 	);
 }
diff --git a/client/Inode.tsx → client/Item.tsx b/client/Inode.tsx → client/Item.tsx
@@ -1,4 +1,4 @@
-import React, {createRef, useContext, useEffect, useState} from 'react';
+import React, {createRef, lazy, Suspense, useContext, useEffect, useMemo, useState} from 'react';
 import {useDraggable, useDroppable} from '@dnd-kit/core';
 import {FinderSettings} from './FinderSettings';
 
@@ -8,7 +8,7 @@ const dateTimeFormatter = new Intl.DateTimeFormat(
 	{timeStyle: 'short', dateStyle: 'short'} as Intl.DateTimeFormatOptions,
 );
 
-export function Inode(props) {
+export function DraggableItem(props) {
 	const {
 		attributes,
 		listeners,
@@ -18,7 +18,7 @@ export function Inode(props) {
 		data: props,
 		disabled: props.disabled,
 	});
-	const [event, setEvent] = useState<PointerEvent>();
+	const [event, setEvent] = useState<PointerEvent>(null);
 
 	useEffect(
 		() => {
@@ -59,6 +59,7 @@ export function Inode(props) {
 	}
 
 	function activateInode(event) {
+		console.log('activateInode', event, props.id);
 		setEvent(event);
 		event.stopPropagation();
 		event.preventDefault();
@@ -81,15 +82,23 @@ export function Inode(props) {
 }
 
 
+function StaticFigure(props) {
+	return (<>{props.children}</>);
+}
+
+
 export function ListItem(props) {
 	const settings = useContext(FinderSettings);
+	const FigBody = props.editor_component ? useMemo(
+		() => {
+			const component = `./components/${props.editor_component}.js`;
+			const LazyFigure = lazy(() => import(component));
+			return (props) => (<Suspense><LazyFigure {...props}>{props.children}</LazyFigure></Suspense>);
+		},
+		[]
+	) : StaticFigure;
 	const [focusHandler, setFocusHandler] = useState(null);
 
-	function swallowEvent(event) {
-		event.stopPropagation();
-		event.preventDefault();
-	}
-
 	function handleFocus(event) {
 		if (!(event.target.contentEditable))
 			return;
@@ -154,7 +163,7 @@ export function ListItem(props) {
 		case 'tiles': case 'mosaic':
 			return (
 				<figure>
-					<img src={props.thumbnail_url} />
+					<FigBody sampleUrl={props.sample_url}><img src={props.thumbnail_url} /></FigBody>
 					<figcaption>
 						<div className="inode-name" contentEditable={!settings.is_trash} suppressContentEditableWarning={true} onFocus={handleFocus} onBlur={updateName} onKeyDown={updateName}>
 							{props.name}
@@ -165,7 +174,7 @@ export function ListItem(props) {
 		case 'list':
 			return (<>
 				<div>
-					<img src={props.thumbnail_url} />
+					<FigBody sampleUrl={props.sample_url}><img src={props.thumbnail_url} /></FigBody>
 				</div>
 				<div>
 					<div className="inode-name" contentEditable={!settings.is_trash} suppressContentEditableWarning={true} onFocus={handleFocus} onBlur={updateName} onKeyDown={updateName}>
@@ -185,7 +194,7 @@ export function ListItem(props) {
 		case 'columns':
 			return (<>
 				<div>
-					<img src={props.thumbnail_url} />
+					<FigBody sampleUrl={props.sample_url}><img src={props.thumbnail_url} /></FigBody>
 				</div>
 				<div>
 					<div className="inode-name" contentEditable={!settings.is_trash} suppressContentEditableWarning={true} onFocus={handleFocus} onBlur={updateName} onKeyDown={updateName}>
@@ -199,11 +208,11 @@ export function ListItem(props) {
 
 export function File(props) {
 	return (
-		<Inode {...props}>
+		<DraggableItem {...props}>
 			<div className="inode">
 				<ListItem {...props} />
 			</div>
-		</Inode>
+		</DraggableItem>
 	);
 }
 
@@ -233,10 +242,10 @@ export function Folder(props) {
 	}
 
 	return (
-		<Inode {...props}>
+		<DraggableItem {...props}>
 			<div ref={setNodeRef} className={cssClasses()}>
 				<ListItem {...props} />
 			</div>
-		</Inode>
+		</DraggableItem>
 	);
 }