+const FlatTree = (props: FlatTreeProps) =>
+ <div
+ onContextMenu={(event) => {
+ const [action, id] = getActionAndId(event, 'CONTEXT_MENU');
+ props.onContextMenu(event, { id } as any);
+ }}
+ onClick={(event) => {
+ const [action, id] = getActionAndId(event);
+
+ if (action && id) {
+ switch (action) {
+ case 'TOGGLE_OPEN':
+ props.handleToggleItemOpen({ id } as any, event);
+ break;
+ case 'TOGGLE_ACTIVE':
+ props.toggleItemActive(event, { id } 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="TOGGLE_OPEN" className={props.classes.toggableIconContainer}>
+ <ListItemIcon className={props.getToggableIconClassNames(item.open, item.active)}>
+ {props.getProperArrowAnimation(item.status, item.items!)}
+ </ListItemIcon>
+ </i>
+ <div data-action="TOGGLE_ACTIVE" className={props.classes.renderContainer}>
+ <span style={{ display: 'flex', alignItems: 'center' }}>
+ <ProjectIcon className={classnames({ [props.classes.active]: item.active }, props.classes.childItemIcon)} />
+ <span style={{ fontSize: '0.875rem' }}>
+ {item.data.name}
+ </span>
+ </span>
+ </div>
+ </div>)
+ }
+ </div>;
+