[ARVADOS-WORKBENCH2] updated: 2.1.0-79-g8fd2c927
Git user
git at public.arvados.org
Tue Nov 24 17:05:25 UTC 2020
Summary of changes:
src/components/tree/tree.tsx | 60 +++++++++-------------
.../side-panel-tree/side-panel-tree.tsx | 3 +-
src/views-components/tree-picker/tree-picker.ts | 16 ++++++
3 files changed, 40 insertions(+), 39 deletions(-)
via 8fd2c927929859ec4905d7c50c83d9dd170cc6d9 (commit)
from bf8c821490525bc063ffcc9ceeef06c525696e0c (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
commit 8fd2c927929859ec4905d7c50c83d9dd170cc6d9
Author: Daniel Kutyła <daniel.kutyla at contractors.roche.com>
Date: Tue Nov 24 18:04:31 2020 +0100
17114: Code cleanup, style cleanup
Arvados-DCO-1.1-Signed-off-by: Daniel Kutyła <daniel.kutyla at contractors.roche.com>01~
diff --git a/src/components/tree/tree.tsx b/src/components/tree/tree.tsx
index 7371654b..25398288 100644
--- a/src/components/tree/tree.tsx
+++ b/src/components/tree/tree.tsx
@@ -5,6 +5,7 @@
import * as React from 'react';
import { List, ListItem, ListItemIcon, Checkbox, Radio } from "@material-ui/core";
import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
+import { ProjectIcon } from '~/components/icon/icon';
import { ReactElement } from "react";
import CircularProgress from '@material-ui/core/CircularProgress';
import classnames from "classnames";
@@ -22,7 +23,8 @@ type CssRules = 'list'
| 'iconOpen'
| 'toggableIcon'
| 'checkbox'
- | 'childItem';
+ | 'childItem'
+ | 'childItemIcon';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
list: {
@@ -47,9 +49,6 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
renderContainer: {
flex: 1
},
- active: {
- color: theme.palette.primary.main,
- },
iconClose: {
transition: 'all 0.1s ease',
},
@@ -69,10 +68,19 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
display: 'flex',
padding: '3px 20px',
fontSize: '0.875rem',
+ alignItems: 'center',
'&:hover': {
backgroundColor: 'rgba(0, 0, 0, 0.08)',
}
},
+ childItemIcon: {
+ marginLeft: '8px',
+ marginRight: '16px',
+ color: 'rgba(0, 0, 0, 0.54)',
+ },
+ active: {
+ color: theme.palette.primary.main,
+ },
});
export enum TreeItemStatus {
@@ -113,18 +121,6 @@ export interface TreeProps<T> {
useRadioButtons?: boolean;
}
-const flatTree = (depth: number, items?: any): [] => {
- return items ? items.reduce((prev: any, next: any) => {
- const { items } = next;
- // delete next.items;
- return [
- ...prev,
- { ...next, depth },
- ...(next.open ? flatTree(depth + 1, items) : []),
- ];
- }, []) : [];
-};
-
const getActionAndId = (event: any, initAction: string | undefined = undefined) => {
const { nativeEvent: { target } } = event;
let currentTarget: HTMLElement = target as HTMLElement;
@@ -150,21 +146,15 @@ export const Tree = withStyles(styles)(
render(): ReactElement<any> {
const level = this.props.level ? this.props.level : 0;
const { classes, render, items, toggleItemActive, disableRipple, currentItemUuid, useRadioButtons } = this.props;
- const { list, listItem, loader, toggableIconContainer, renderContainer, childItem, active } = classes;
+ const { list, listItem, loader, toggableIconContainer, renderContainer, childItem, active, childItemIcon } = classes;
const showSelection = typeof this.props.showSelection === 'function'
? this.props.showSelection
: () => this.props.showSelection ? true : false;
const { levelIndentation = 20, itemRightPadding = 20 } = this.props;
- const flatItems = (items || [])
- .map(parentItem => ({
- ...parentItem,
- items: flatTree(2, parentItem.items || []),
- }));
-
return <List className={list}>
- {flatItems && flatItems.map((it: TreeItem<T>, idx: number) =>
+ {items && items.map((it: TreeItem<T>, idx: number) =>
<div key={`item/${level}/${it.id}`}>
<ListItem button className={listItem}
style={{
@@ -198,7 +188,7 @@ export const Tree = withStyles(styles)(
{render(it, level)}
</div>
</ListItem>
- {it.items && it.items.length > 0 &&
+ {it.open && it.items && it.items.length > 0 &&
<div
onContextMenu={(event) => {
const [action, id] = getActionAndId(event, 'CONTEXT_MENU');
@@ -223,6 +213,7 @@ export const Tree = withStyles(styles)(
>
{
it.items
+ .slice(0, 30)
.map((item: any) => <div key={item.id} data-id={item.id}
className={classnames(childItem, { [active]: item.active })}
style={{ paddingLeft: `${item.depth * levelIndentation}px`}}>
@@ -231,21 +222,16 @@ export const Tree = withStyles(styles)(
{this.getProperArrowAnimation(item.status, item.items!)}
</ListItemIcon>
</i>
- <div style={{ marginLeft: '8px' }} data-action="TOGGLE_ACTIVE" className={renderContainer}>
- {item.data.name}
+ <div data-action="TOGGLE_ACTIVE" className={renderContainer}>
+ <span style={{ display: 'flex', alignItems: 'center' }}>
+ <ProjectIcon className={classnames({ [active]: item.active }, childItemIcon)} />
+ <span style={{ fontSize: '0.875rem' }}>
+ {item.data.name}
+ </span>
+ </span>
</div>
</div>)
}
- {/* <Tree
- showSelection={this.props.showSelection}
- items={it.items}
- render={render}
- disableRipple={disableRipple}
- toggleItemOpen={toggleItemOpen}
- toggleItemActive={toggleItemActive}
- level={level + 1}
- onContextMenu={onContextMenu}
- toggleItemSelection={this.props.toggleItemSelection} /> */}
</div>}
</div>)}
</List>;
diff --git a/src/views-components/side-panel-tree/side-panel-tree.tsx b/src/views-components/side-panel-tree/side-panel-tree.tsx
index d96a3c83..8181caf7 100644
--- a/src/views-components/side-panel-tree/side-panel-tree.tsx
+++ b/src/views-components/side-panel-tree/side-panel-tree.tsx
@@ -41,7 +41,7 @@ export const SidePanelTree = connect(undefined, mapDispatchToProps)(
(props: SidePanelTreeActionProps) =>
<TreePicker {...props} render={renderSidePanelItem} pickerId={SIDE_PANEL_TREE} />);
-const renderSidePanelItem = (item: TreeItem<ProjectResource>) => {
+export 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} />
@@ -52,7 +52,6 @@ const renderSidePanelItem = (item: TreeItem<ProjectResource>) => {
nameDecorator={warn}
isActive={item.active}
hasMargin={true}
- iconSize={1.25}
/>;
};
diff --git a/src/views-components/tree-picker/tree-picker.ts b/src/views-components/tree-picker/tree-picker.ts
index cb829059..e7dc2a84 100644
--- a/src/views-components/tree-picker/tree-picker.ts
+++ b/src/views-components/tree-picker/tree-picker.ts
@@ -18,6 +18,18 @@ export interface TreePickerProps<T> {
toggleItemSelection: Callback<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 },
+ ...(next.open ? flatTree(depth + 1, items) : []),
+ ];
+ }, []) : [];
+};
+
const memoizedMapStateToProps = () => {
let prevTree: Ttree<any>;
let mappedProps: Pick<TreeProps<any>, 'items' | 'disableRipple'>;
@@ -29,6 +41,10 @@ const memoizedMapStateToProps = () => {
disableRipple: true,
items: getNodeChildrenIds('')(tree)
.map(treePickerToTreeItems(tree))
+ .map(parentItem => ({
+ ...parentItem,
+ items: flatTree(2, parentItem.items || []),
+ }))
};
}
return mappedProps;
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list