r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

[#1526] Refactor FileName component

Browse source 
- Create function parseFileName to separate a file name into first
  letter, last letter, middle, extension
This commit is contained in:
Cassie Tarakajian 2020-08-03 13:52:07 -04:00
parent 937421e90c
commit 65bd4b2ff7
1 changed files with 33 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
client/modules/IDE/components/FileNode.jsx
View file

@ -10,39 +10,53 @@ import FolderRightIcon from '../../../images/triangle-arrow-right.svg';
import FolderDownIcon from '../../../images/triangle-arrow-down.svg'; import FolderDownIcon from '../../../images/triangle-arrow-down.svg';
import FileIcon from '../../../images/file.svg'; import FileIcon from '../../../images/file.svg';
function FileName({ name }) { function parseFileName(name) {
const nameArray = name.split('.'); const nameArray = name.split('.');
if (nameArray.length > 1) { if (nameArray.length > 1) {
const extension = `.${nameArray[nameArray.length - 1]}`; const extension = `.${nameArray[nameArray.length - 1]}`;
const fileName = nameArray.slice(0, -1).join(''); const baseName = nameArray.slice(0, -1).join('');
const firstLetter = fileName[0]; const firstLetter = baseName[0];
const lastLetter = fileName[fileName.length - 1]; const lastLetter = baseName[baseName.length - 1];
const middleText = fileName.slice(1, -1); const middleText = baseName.slice(1, -1);
return ( return {
<span className="sidebar__file-item-name-text"> baseName,
<span>{firstLetter}</span> firstLetter,
{fileName.length > 2 && lastLetter,
<span className="sidebar__file-item-name--ellipsis">{middleText}</span> middleText,
} extension
{fileName.length > 1 && };
<span>{lastLetter}</span>
}
<span>{extension}</span>
</span>
);
} }
const firstLetter = name[0]; const firstLetter = name[0];
const lastLetter = name[name.length - 1]; const lastLetter = name[name.length - 1];
const middleText = name.slice(1, -1); const middleText = name.slice(1, -1);
return {
baseName: name,
firstLetter,
lastLetter,
middleText
};
}
function FileName({ name }) {
const {
baseName,
firstLetter,
lastLetter,
middleText,
extension
} = parseFileName(name);
return ( return (
<span className="sidebar__file-item-name-text"> <span className="sidebar__file-item-name-text">
<span>{firstLetter}</span> <span>{firstLetter}</span>
{name.length > 2 && {baseName.length > 2 &&
<span className="sidebar__file-item-name--ellipsis">{middleText}</span> <span className="sidebar__file-item-name--ellipsis">{middleText}</span>
} }
{name.length > 1 && {baseName.length > 1 &&
<span>{lastLetter}</span> <span>{lastLetter}</span>
} }
{extension &&
<span>{extension}</span>
}
</span> </span>
); );
} }