1 files changed, 37 insertions, 37 deletions

diff --git a/sdnr/wt/odlux/framework/src/components/material-ui/treeView.tsx b/sdnr/wt/odlux/framework/src/components/material-ui/treeView.tsx
index 7f2f73926..e4eb3a794 100644
--- a/sdnr/wt/odlux/framework/src/components/material-ui/treeView.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-ui/treeView.tsx
@@ -103,21 +103,21 @@ class TreeViewComponent<TData extends ITreeItem> extends React.Component<TreeVie
         ...this.props.style
       },
       search: {
-        padding: `0px ${ this.props.theme.spacing.unit }px`
+        padding: `0px ${this.props.theme.spacing(1)}px`
       }
     };
     return (
-      <div style={ styles.root }>
-        { children }
-        { enableSearchBar && <TextField label={ "Search" } fullWidth={ true } style={ styles.search } value={ searchTerm } onChange={ this.onChangeSearchText } /> || null }
+      <div style={styles.root}>
+        {children}
+        {enableSearchBar && <TextField label={"Search"} fullWidth={true} style={styles.search} value={searchTerm} onChange={this.onChangeSearchText} /> || null}
         <List>
-            { this.renderItems(items, searchTerm && searchTerm.toLowerCase()) }
+          {this.renderItems(items, searchTerm && searchTerm.toLowerCase())}
         </List>
       </div>
     );
   }
 
-  private itemIndex: number = 0; 
+  private itemIndex: number = 0;
   private renderItems = (items: TData[], searchTerm: string | undefined, depth: number = 1) => {
     return items.reduce((acc, item) => {
 
@@ -144,7 +144,7 @@ class TreeViewComponent<TData extends ITreeItem> extends React.Component<TreeVie
   private renderItem = (item: TData, searchTerm: string | undefined, depth: number, isFolder: boolean, expanded: boolean): JSX.Element | null => {
     const styles = {
       item: {
-        paddingLeft: (((this.props.depthOffset || 0) + depth) * this.props.theme.spacing.unit * 3),
+        paddingLeft: (((this.props.depthOffset || 0) + depth) * this.props.theme.spacing(3)),
         backgroundColor: this.state.activeItem === item ? this.props.theme.palette.action.selected : undefined,
         height: this.props.itemHeight || undefined,
         cursor: item.disabled ? 'not-allowed' : 'pointer',
@@ -159,47 +159,47 @@ class TreeViewComponent<TData extends ITreeItem> extends React.Component<TreeVie
     const searchTermLength = searchTerm && searchTerm.length || 0;
 
     const handleClickCreator = (isIcon: boolean) => (event: React.SyntheticEvent) => {
-          if (item.disabled) return;
-          event.preventDefault();
-          event.stopPropagation();
-          if (isFolder && (this.props.autoExpandFolder || isIcon)) {
-            this.props.onFolderClick ? this.props.onFolderClick(item) : this.onFolderClick(item); 
-          } else {
-            this.props.onItemClick ? this.props.onItemClick(item) : this.onItemClick(item);
-          }
-        };
+      if (item.disabled) return;
+      event.preventDefault();
+      event.stopPropagation();
+      if (isFolder && (this.props.autoExpandFolder || isIcon)) {
+        this.props.onFolderClick ? this.props.onFolderClick(item) : this.onFolderClick(item);
+      } else {
+        this.props.onItemClick ? this.props.onItemClick(item) : this.onItemClick(item);
+      }
+    };
 
     return ((searchTerm && (matchIndex > -1 || expanded) || !searchTerm)
       ? (
-        <ListItem key={ `tree-list-${ this.itemIndex++ }` } style={ styles.item } onClick={ handleClickCreator(false) } button >
+        <ListItem key={`tree-list-${this.itemIndex++}`} style={styles.item} onClick={handleClickCreator(false)} button >
 
           { // display the left icon
-            (this.props.useFolderIcons && <ListItemIcon>{ isFolder ? <FolderIcon /> : <FileIcon /> }</ListItemIcon>) ||
-            (item.icon && (<ListItemIcon><item.icon /></ListItemIcon>)) }
+            (this.props.useFolderIcons && <ListItemIcon>{isFolder ? <FolderIcon /> : <FileIcon />}</ListItemIcon>) ||
+            (item.icon && (<ListItemIcon><item.icon /></ListItemIcon>))}
+
 
-          
           { // highlight search result
             matchIndex > -1
-            ? (<span>
-                { text.substring(0, matchIndex) }
-              <span
-                style={ {
-                  display: 'inline-block',
-                  backgroundColor: 'rgba(255,235,59,0.5)',
-                  padding: '3px',
-                } }
-              >
-                  { text.substring(matchIndex, matchIndex + searchTermLength) }
-              </span>
-                { text.substring(matchIndex + searchTermLength) }
-            </span>)
-            : (<ListItemText primary={ text } />)
+              ? (<span>
+                {text.substring(0, matchIndex)}
+                <span
+                  style={{
+                    display: 'inline-block',
+                    backgroundColor: 'rgba(255,235,59,0.5)',
+                    padding: '3px',
+                  }}
+                >
+                  {text.substring(matchIndex, matchIndex + searchTermLength)}
+                </span>
+                {text.substring(matchIndex + searchTermLength)}
+              </span>)
+              : (<ListItemText primary={text} />)
           }
 
           { // display the right icon, depending on the state 
-            !isFolder ? null : expanded ? (<OpenIcon onClick={ handleClickCreator(true) } />) : (<CloseIcon onClick={ handleClickCreator(true) } />) }
+            !isFolder ? null : expanded ? (<OpenIcon onClick={handleClickCreator(true)} />) : (<CloseIcon onClick={handleClickCreator(true)} />)}
         </ListItem>
-       )
+      )
       : null
     );
   }
@@ -264,5 +264,5 @@ class TreeViewComponent<TData extends ITreeItem> extends React.Component<TreeVie
 
 export type TreeViewCtorType<TData extends ITreeItem = ITreeItem> = new () => React.Component<Omit<TreeViewComponentProps<TData>, 'theme'>>;
 
-export const TreeView = withTheme()(TreeViewComponent);
+export const TreeView = withTheme(TreeViewComponent);
 export default TreeView;
\ No newline at end of file