Multiselect for folders

pull/5370/head
ioedeveloper 4 years ago
parent 3f648f028e
commit b7e759b6fe
  1. 23
      libs/remix-ui/file-explorer/src/lib/file-explorer.tsx
  2. 4
      libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.tsx
  3. 3
      libs/remix-ui/tree-view/src/types/index.ts

@ -368,11 +368,23 @@ export const FileExplorer = (props: FileExplorerProps) => {
}
const handleClickFolder = async (path) => {
const files = await resolveDirectory(path, state.files)
if (state.ctrlKey) {
if (state.focusElement.findIndex(item => item === path) !== -1) {
setState(prevState => {
return { ...prevState, focusElement: [...prevState.focusElement.filter(item => item !== path)] }
})
} else {
setState(prevState => {
return { ...prevState, focusElement: [...prevState.focusElement, path] }
})
}
} else {
const files = await resolveDirectory(path, state.files)
setState(prevState => {
return { ...prevState, focusElement: [path], files }
})
setState(prevState => {
return { ...prevState, focusElement: [path], files }
})
}
}
const renderMenuItems = () => {
@ -436,6 +448,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
handleClickFolder(file.path)
}}
labelClass={ state.focusElement.findIndex(item => item === file.path) !== -1 ? 'bg-secondary' : '' }
controlBehaviour={ state.ctrlKey }
>
{
file.child ? <TreeView id={`treeView${file.path}`} key={index}>{
@ -472,7 +485,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
ref={containerRef}
tabIndex={-1}
onKeyDown={(e) => {
if (e.ctrlKey) {
if (e.shiftKey) {
console.log('TRUE')
setState(prevState => {
return { ...prevState, ctrlKey: true }

@ -4,7 +4,7 @@ import { TreeViewItemProps } from '../../types'
import './tree-view-item.css'
export const TreeViewItem = (props: TreeViewItemProps) => {
const { id, children, label, labelClass, expand, iconX = 'fas fa-caret-right', iconY = 'fas fa-caret-down', icon, ...otherProps } = props
const { id, children, label, labelClass, expand, iconX = 'fas fa-caret-right', iconY = 'fas fa-caret-down', icon, controlBehaviour = false, ...otherProps } = props
const [isExpanded, setIsExpanded] = useState(false)
useEffect(() => {
@ -13,7 +13,7 @@ export const TreeViewItem = (props: TreeViewItemProps) => {
return (
<li key={`treeViewLi${id}`} data-id={`treeViewLi${id}`} className='li_tv' {...otherProps}>
<div key={`treeViewDiv${id}`} data-id={`treeViewDiv${id}`} className={`d-flex flex-row align-items-center ${labelClass}`} onClick={() => setIsExpanded(!isExpanded)}>
<div key={`treeViewDiv${id}`} data-id={`treeViewDiv${id}`} className={`d-flex flex-row align-items-center ${labelClass}`} onClick={() => !controlBehaviour && setIsExpanded(!isExpanded)}>
{ children ? <div className={isExpanded ? `px-1 ${iconY} caret caret_tv` : `px-1 ${iconX} caret caret_tv`} style={{ visibility: children ? 'visible' : 'hidden' }}></div> : icon ? <div className={`pr-3 pl-1 ${icon} caret caret_tv`}></div> : null }
<span className='w-100 pl-1'>
{ label }

@ -13,5 +13,6 @@ export interface TreeViewItemProps {
iconX?: string,
iconY?: string,
icon?: string,
labelClass?: string
labelClass?: string,
controlBehaviour?: boolean
}

Loading…
Cancel
Save