fixed border bottom management in workspace content

src/component/Workspace/FileItem.jsx

@@ -17,7 +17,7 @@ const FileItem = props => {
   })()
 
   return (
-    <div className={classnames('file', 'align-items-center', props.customClass)} onClick={props.onClickItem}>
+    <div className={classnames('file', 'align-items-center', {'item-last': props.isLast}, props.customClass)} onClick={props.onClickItem}>
       <div className='col-2 col-sm-2 col-md-2 col-lg-2 col-xl-1'>
         <div className='file__type'>
           <i className={props.icon} />

src/component/Workspace/Folder.jsx

@@ -21,9 +21,9 @@ class Folder extends Component {
   }
 
   render () {
-    const { app, folderData: { title, content } } = this.props
+    const { app, folderData: { title, content }, isLast } = this.props
     return (
-      <div className={classnames('folder', {'active': this.state.open})}>
+      <div className={classnames('folder', {'active': this.state.open, 'item-last': isLast})}>
         <div className='folder__header' onClick={this.handleClickToggleFolder}>
           <div className='folder__header__triangleborder'>
             <div className='folder__header__triangleborder__triangle' />
@@ -54,14 +54,15 @@ class Folder extends Component {
         </div>
 
         <div className='folder__content'>
-          { content.map(c => c.type === 'folder'
-            ? <Folder folderData={c} key={c.id} />
+          { content.map((c, i) => c.type === 'folder'
+            ? <Folder folderData={c} key={c.id} isLast={i === content.length - 1} />
             : <FileItem
               icon={(app[c.type] || {icon: ''}).icon}
               name={c.title}
               type={c.type}
               status={c.status}
               onClickItem={() => {}}
+              isLast={i === content.length - 1}
               key={c.id}
             />
           )}

src/container/WorkspaceContent.jsx

@@ -62,8 +62,8 @@ class WorkspaceContent extends React.Component {
           <div className='workspace__content__fileandfolder folder__content active'>
             <FileItemHeader />
 
-            { workspace.content.map(c => c.type === 'folder'
-              ? <Folder app={app} folderData={c} key={c.id} />
+            { workspace.content.map((c, i) => c.type === 'folder'
+              ? <Folder app={app} folderData={c} key={c.id} isLast={i === workspace.content.length - 1} />
               : (
                 <FileItem
                   name={c.title}
@@ -71,6 +71,7 @@ class WorkspaceContent extends React.Component {
                   icon={(app[c.type] || {icon: ''}).icon}
                   status={c.status}
                   onClickItem={() => this.handleClickContentItem(c)}
+                  isLast={i === workspace.content.length - 1}
                   key={c.id}
                 />
               )

src/css/Folder.styl

@@ -3,12 +3,16 @@
 border-style = 1px solid darkBlue
 .folder__header
   border border-style
-.file
-  border border-style
 .folder + .file, .file + .file
   border-bottom 0
 .folder__content > .file, .folder__content > .folder
   border-bottom 0
+.folder:not(.active).item-last
+  border-bottom border-style
+.file
+  border border-style
+  &.item-last
+    border-bottom border-style
 // @TODO the very last line of file or folder has to be added a border bottom in js
 // -----------------------------------------------------