File size: 3,008 Bytes
84c1942 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 | import React from 'react';
import * as Icons from './icons';
import { FileContainer, IconContainer, FileName } from './elements';
import {
sortingFunction,
isRootLevel,
getDepth,
isChildSelected,
} from './utils';
function FileTree({ sandbox, currentModuleId, setCurrentModuleId }) {
const { modules, directories } = sandbox;
const allFiles = [...directories, ...modules].map(file => ({
id: file.shortid,
longid: file.id,
title: file.title,
directory: file.directoryShortid,
// this line is so silly because we already know directories
type: file.code ? 'file' : 'directory',
}));
const selectedFile = allFiles.find(file => file.longid === currentModuleId);
const onSelect = file => setCurrentModuleId(file.longid);
return (
<SubTree
files={allFiles}
allFiles={allFiles}
selectedFile={selectedFile}
onSelect={onSelect}
/>
);
}
export default FileTree;
function SubTree({ files, allFiles, selectedFile, onSelect }) {
return (
<div>
{files
.filter(child => isRootLevel(files, child))
.sort(sortingFunction)
.map(child => (
<React.Fragment key={child.id}>
{child.type === 'directory' ? (
<Directory
className="directory"
files={files}
allFiles={allFiles}
selectedFile={selectedFile}
onSelect={onSelect}
{...child}
/>
) : (
<File
selectedFile={selectedFile}
allFiles={allFiles}
onClick={() => onSelect(child)}
{...child}
/>
)}
</React.Fragment>
))}
</div>
);
}
function Directory(props) {
const children = props.allFiles.filter(file => file.directory === props.id);
const defaultOpen = isChildSelected({
allFiles: props.allFiles,
directory: props,
selectedFile: props.selectedFile,
});
const [open, setOpen] = React.useState(defaultOpen);
const toggle = () => setOpen(!open);
return (
<>
<File
selectedFile={props.selectedFile}
allFiles={props.allFiles}
onClick={toggle}
{...props}
/>
{open ? (
<SubTree
files={children}
allFiles={props.allFiles}
selectedFile={props.selectedFile}
onSelect={props.onSelect}
/>
) : null}
</>
);
}
function FileIcon(props) {
return (
<IconContainer>
{props.type === 'directory' ? (
<Icons.Directory />
) : (
<Icons.File {...props} />
)}
</IconContainer>
);
}
function File(props) {
const selected = props.selectedFile.id === props.id;
const depth = getDepth(props.allFiles, props);
return (
<FileContainer depth={depth} isSelected={selected} onClick={props.onClick}>
<FileIcon {...props} />
<FileName>{props.title}</FileName>
</FileContainer>
);
}
|