Align files and folders, install library for drag and drop

pull/668/head
ioedeveloper 4 years ago
parent d40cf2210d
commit 59352cee6e
  1. 3
      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. 14
      package-lock.json
  4. 3
      package.json

@ -401,7 +401,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
const renderFiles = (file, index) => {
if (file.isDirectory) {
return (
<TreeViewItem id={`treeViewItem${file.path}`} iconX='px-3 far fa-folder' iconY='px-3 far fa-folder-open' key={index} label={label(file)} onClick={() => { resolveDirectory(file.path) }}>
<TreeViewItem id={`treeViewItem${file.path}`} iconX='pr-3 far fa-folder' iconY='pr-3 far fa-folder-open' key={index} label={label(file)} onClick={() => { resolveDirectory(file.path) }}>
{
file.child ? <TreeView id={`treeView${file.path}`} key={index}>{
file.child.map((file, index) => {
@ -419,6 +419,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
key={index}
label={label(file)}
onClick={() => { state.fileManager.open(file.path) }}
icon='fa fa-file'
/>
)
}

@ -4,7 +4,7 @@ import { TreeViewItemProps } from '../../types'
import './tree-view-item.css'
export const TreeViewItem = (props: TreeViewItemProps) => {
const { id, children, label, expand, iconX = 'fas fa-caret-right', iconY = 'fas fa-caret-down', icon = 'fa fa-file', ...otherProps } = props
const { id, children, label, expand, iconX = 'fas fa-caret-right', iconY = 'fas fa-caret-down', icon, ...otherProps } = props
const [isExpanded, setIsExpanded] = useState(false)
useEffect(() => {
@ -14,7 +14,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' onClick={() => setIsExpanded(!isExpanded)}>
{ children ? <div className={isExpanded ? `px-1 ${iconY} caret caret_tv` : `px-1 ${iconX} caret caret_tv`} style={{ visibility: children ? 'visible' : 'hidden' }}></div> : <div className={`px-3 ${icon} caret caret_tv`}></div> }
{ 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 }
</span>

14
package-lock.json generated

@ -28220,7 +28220,6 @@
},
"dezalgo": {
"version": "1.0.3",
"resolved": false,
"integrity": "sha1-f3Qt4Gb8dIvI24IFad3c5Jvw1FY=",
"requires": {
"asap": "^2.0.0",
@ -28849,7 +28848,6 @@
},
"normalize-git-url": {
"version": "3.0.2",
"resolved": false,
"integrity": "sha1-jl8Uvgva7bc+ByADEKpBbCc1D8Q="
},
"normalize-package-data": {
@ -28887,7 +28885,6 @@
},
"npm-install-checks": {
"version": "3.0.0",
"resolved": false,
"integrity": "sha1-1K7N/VGlPjcjt7L5Oy7ijjB7wNc=",
"requires": {
"semver": "^2.3.0 || 3.x || 4 || 5"
@ -29234,7 +29231,6 @@
},
"realize-package-specifier": {
"version": "3.0.3",
"resolved": false,
"integrity": "sha1-0N74gpUrjeP2frpekRmWYScfQfQ=",
"requires": {
"dezalgo": "^1.0.1",
@ -29771,7 +29767,6 @@
"dependencies": {
"unique-slug": {
"version": "2.0.0",
"resolved": false,
"integrity": "sha1-22Z258fMBimHj/GWCXx4hVrp9Ks=",
"requires": {
"imurmurhash": "^0.1.4"
@ -35591,6 +35586,15 @@
"scheduler": "^0.19.1"
}
},
"react-draggable": {
"version": "4.4.3",
"resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.3.tgz",
"integrity": "sha512-jV4TE59MBuWm7gb6Ns3Q1mxX8Azffb7oTtDtBgFkxRvhDp38YAARmRplrj0+XGkhOJB5XziArX+4HUUABtyZ0w==",
"requires": {
"classnames": "^2.2.5",
"prop-types": "^15.6.0"
}
},
"react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

@ -155,11 +155,12 @@
"react": "16.13.1",
"react-bootstrap": "^1.3.0",
"react-dom": "16.13.1",
"react-draggable": "^4.4.3",
"signale": "^1.4.0",
"time-stamp": "^2.2.0",
"winston": "^3.3.3",
"ws": "^7.3.0"
},
},
"devDependencies": {
"@babel/core": "^7.4.5",
"@babel/plugin-transform-modules-amd": "^7.10.4",

Loading…
Cancel
Save