diff options
Diffstat (limited to 'sdnr/wt/odlux/framework/src/components/material-ui/treeView.tsx')
-rw-r--r-- | sdnr/wt/odlux/framework/src/components/material-ui/treeView.tsx | 74 |
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 |