+const getActionAndId = (event: any, initAction: string | undefined = undefined) => {
+ const { nativeEvent: { target } } = event;
+ let currentTarget: HTMLElement = target as HTMLElement;
+ let action: string | undefined = initAction || currentTarget.dataset.action;
+ let id: string | undefined = currentTarget.dataset.id;
+
+ while (action === undefined || id === undefined) {
+ currentTarget = currentTarget.parentElement as HTMLElement;
+
+ if (!currentTarget) {
+ break;
+ }
+
+ action = action || currentTarget.dataset.action;
+ id = id || currentTarget.dataset.id;
+ }
+
+ return [action, id];
+};
+
+interface FlatTreeProps {
+ it: TreeItem<any>;
+ levelIndentation: number;
+ onContextMenu: Function;
+ handleToggleItemOpen: Function;
+ toggleItemActive: Function;
+ getToggableIconClassNames: Function;
+ getProperArrowAnimation: Function;
+ itemsMap?: Map<string, TreeItem<any>>;
+ classes: any;
+ showSelection: any;
+ useRadioButtons?: boolean;
+ handleCheckboxChange: Function;
+}
+
+const FLAT_TREE_ACTIONS = {
+ toggleOpen: 'TOGGLE_OPEN',
+ contextMenu: 'CONTEXT_MENU',
+ toggleActive: 'TOGGLE_ACTIVE',
+};
+
+const ItemIcon = React.memo(({ type, kind, active, groupClass, classes }: any) => {
+ let Icon = ProjectIcon;
+
+ if (groupClass === GroupClass.FILTER) {
+ Icon = FilterGroupIcon;
+ }
+
+ 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 id = getActionAndId(event, FLAT_TREE_ACTIONS.contextMenu)[1];
+ 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>
+ {props.showSelection(item) && !props.useRadioButtons &&
+ <Checkbox
+ checked={item.selected}
+ className={props.classes.checkbox}
+ color="primary"
+ onClick={props.handleCheckboxChange(item)} />}
+ {props.showSelection(item) && props.useRadioButtons &&
+ <Radio
+ checked={item.selected}
+ className={props.classes.checkbox}
+ color="primary" />}
+ <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} groupClass={item.data.kind === ResourceKind.GROUP ? item.data.groupClass : ''} classes={props.classes} />
+ <span style={{ fontSize: '0.875rem' }}>
+ {item.data.name}
+ </span>
+ </span>
+ </div>
+ </div>)
+ }
+ </div>;
+