diff --git a/client/modules/IDE/components/FileNode.jsx b/client/modules/IDE/components/FileNode.jsx
index 57238cf8..7bfaa5de 100644
--- a/client/modules/IDE/components/FileNode.jsx
+++ b/client/modules/IDE/components/FileNode.jsx
@@ -10,6 +10,47 @@ import FolderRightIcon from '../../../images/triangle-arrow-right.svg';
import FolderDownIcon from '../../../images/triangle-arrow-down.svg';
import FileIcon from '../../../images/file.svg';
+function FileName({ name }) {
+ const nameArray = name.split('.');
+ if (nameArray.length > 1) {
+ const extension = `.${nameArray[nameArray.length - 1]}`;
+ const fileName = nameArray.slice(0, -1).join('');
+ const firstLetter = fileName[0];
+ const lastLetter = fileName[fileName.length - 1];
+ const middleText = fileName.slice(1, -1);
+ return (
+
+ {firstLetter}
+ {fileName.length > 2 &&
+ {middleText}
+ }
+ {fileName.length > 1 &&
+ {lastLetter}
+ }
+ {extension}
+
+ );
+ }
+ const firstLetter = name[0];
+ const lastLetter = name[name.length - 1];
+ const middleText = name.slice(1, -1);
+ return (
+
+ {firstLetter}
+ {name.length > 2 &&
+ {middleText}
+ }
+ {name.length > 1 &&
+ {lastLetter}
+ }
+
+ );
+}
+
+FileName.propTypes = {
+ name: PropTypes.string.isRequired
+};
+
export class FileNode extends React.Component {
constructor(props) {
super(props);
@@ -210,7 +251,7 @@ export class FileNode extends React.Component {
className="sidebar__file-item-name"
onClick={this.handleFileClick}
>
- {this.state.updatedName}
+
this.setState({ sidebarSize: size })}
onDragFinished={this._handleSidebarPaneOnDragFinished}
allowResize={this.props.ide.sidebarIsExpanded}
- minSize={20}
+ minSize={125}
>