+const FLAT_TREE_ACTIONS = {
+ toggleOpen: 'TOGGLE_OPEN',
+ contextMenu: 'CONTEXT_MENU',
+ toggleActive: 'TOGGLE_ACTIVE',
+};
+
+const ItemIcon = React.memo(({type, kind, active, classes}: any) => {
+ let Icon = ProjectIcon;
+
+ if (type) {
+ switch (type) {
+ case 'directory':
+ Icon = DirectoryIcon;
+ break;
+ case 'file':
+ Icon = FileIcon;
+ break;
+ default:
+ Icon = DefaultIcon;
+ }
+ }
+
+ if (kind) {
+ switch(kind) {
+ case ResourceKind.COLLECTION:
+ Icon = CollectionIcon;
+ break;
+ default:
+ break;
+ }
+ }
+
+ return <Icon className={classnames({ [classes.active]: active }, classes.childItemIcon)} />;
+});
+
+const FlatTree = (props: FlatTreeProps) =>
+ <div
+ onContextMenu={(event) => {
+ const [action, id] = getActionAndId(event, FLAT_TREE_ACTIONS.contextMenu);
+ props.onContextMenu(event, { id } as any);
+ }}
+ onClick={(event) => {
+ const [action, id] = getActionAndId(event);
+
+ if (action && id) {
+ const item = props.itemsMap ? props.itemsMap[id] : { id };
+
+ switch (action) {
+ case FLAT_TREE_ACTIONS.toggleOpen:
+ props.handleToggleItemOpen(item as any, event);
+ break;
+ case FLAT_TREE_ACTIONS.toggleActive:
+ props.toggleItemActive(event, item as any);
+ break;
+ default:
+ break;
+ }
+ }
+ }}
+ >
+ {
+ (props.it.items || [])
+ .map((item: any) => <div key={item.id} data-id={item.id}
+ className={classnames(props.classes.childItem, { [props.classes.active]: item.active })}
+ style={{ paddingLeft: `${item.depth * props.levelIndentation}px` }}>
+ <i data-action={FLAT_TREE_ACTIONS.toggleOpen} className={props.classes.toggableIconContainer}>
+ <ListItemIcon className={props.getToggableIconClassNames(item.open, item.active)}>
+ {props.getProperArrowAnimation(item.status, item.items!)}
+ </ListItemIcon>
+ </i>
+ <div data-action={FLAT_TREE_ACTIONS.toggleActive} className={props.classes.renderContainer}>
+ <span style={{ display: 'flex', alignItems: 'center' }}>
+ <ItemIcon type={item.data.type} active={item.active} kind={item.data.kind} classes={props.classes} />
+ <span style={{ fontSize: '0.875rem' }}>
+ {item.data.name}
+ </span>
+ </span>
+ </div>
+ </div>)
+ }
+ </div>;
+