17114: Code cleanup 17114-side-panel-tree-as-list
authorDaniel Kutyła <daniel.kutyla@contractors.roche.com>
Thu, 26 Nov 2020 20:30:26 +0000 (21:30 +0100)
committerDaniel Kutyła <daniel.kutyla@contractors.roche.com>
Thu, 26 Nov 2020 20:30:26 +0000 (21:30 +0100)
Arvados-DCO-1.1-Signed-off-by: Daniel Kutyła <daniel.kutyla@contractors.roche.com>

src/components/tree/tree.tsx
src/views-components/side-panel-tree/side-panel-tree.tsx
src/views-components/tree-picker/tree-picker.ts

index bdc374213ae3ea3af9d04c28d068f8a91424ee3f..9680e3c0780dc9000fe756c4e7a59375c117a50b 100644 (file)
@@ -153,10 +153,17 @@ interface FlatTreeProps {
     classes: any;
 }
 
+
+const FLAT_TREE_ACTIONS = {
+    toggleOpen: 'TOGGLE_OPEN',
+    contextMenu: 'CONTEXT_MENU',
+    toggleActive: 'TOGGLE_ACTIVE',
+};
+
 const FlatTree = (props: FlatTreeProps) =>
     <div
         onContextMenu={(event) => {
-            const [action, id] = getActionAndId(event, 'CONTEXT_MENU');
+            const [action, id] = getActionAndId(event, FLAT_TREE_ACTIONS.contextMenu);
             props.onContextMenu(event, { id } as any);
         }}
         onClick={(event) => {
@@ -164,10 +171,10 @@ const FlatTree = (props: FlatTreeProps) =>
 
             if (action && id) {
                 switch (action) {
-                    case 'TOGGLE_OPEN':
+                    case FLAT_TREE_ACTIONS.toggleOpen:
                         props.handleToggleItemOpen({ id } as any, event);
                         break;
-                    case 'TOGGLE_ACTIVE':
+                    case FLAT_TREE_ACTIONS.toggleActive:
                         props.toggleItemActive(event, { id } as any);
                         break;
                     default:
@@ -181,12 +188,12 @@ const FlatTree = (props: FlatTreeProps) =>
                 .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}>
+                    <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="TOGGLE_ACTIVE" className={props.classes.renderContainer}>
+                    <div data-action={FLAT_TREE_ACTIONS.toggleActive} 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' }}>
index 8181caf7cc6c98acd0b83e5a01b7e03a66e9851e..e0d9777da006aa317f9684eba4492ffd5934ff48 100644 (file)
@@ -41,7 +41,7 @@ export const SidePanelTree = connect(undefined, mapDispatchToProps)(
     (props: SidePanelTreeActionProps) =>
         <TreePicker {...props} render={renderSidePanelItem} pickerId={SIDE_PANEL_TREE} />);
 
-export const renderSidePanelItem = (item: TreeItem<ProjectResource>) => {
+const renderSidePanelItem = (item: TreeItem<ProjectResource>) => {
     const name = typeof item.data === 'string' ? item.data : item.data.name;
     const warn = typeof item.data !== 'string' && item.data.kind === ResourceKind.PROJECT
         ? <IllegalNamingWarning name={name} />
index 92dd958924de959379d4589b9f591e9f9cac6370..c34b6c37eeb630fc63ca460a53b85c6cf058ba2d 100644 (file)
@@ -21,7 +21,7 @@ export interface TreePickerProps<T> {
 const flatTree = (depth: number, items?: any): [] => {
     return items ? items.reduce((prev: any, next: any) => {
         const { items } = next;
-        // delete next.items;
+
         return [
             ...prev,
             { ...next, depth },