mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-29 01:30:16 +02:00
Code Issues Releases Wiki Activity

add drag n drop to files explorer 🔥

Browse Source
This commit is contained in:
Kushagra Gour
2018-10-12 20:06:14 +05:30
parent 006a37f8ef
commit d3f06ac890
8 changed files with 332 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
src/components/SidePane.jsx
View File

@@ -3,83 +3,86 @@ const ENTER_KEY = 13;
const ESCAPE_KEY = 27;
function FileIcon({ file }) {
let path;
if (file.isFolder) {
return (
<svg class="sidebar__file-icon" viewBox="0 0 24 24">
{file.isCollapsed ? (
<path
fill="currentColor"
d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z"
/>
) : (
<path
fill="currentColor"
d="M19,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10L12,6H19A2,2 0 0,1 21,8H21L4,8V18L6.14,10H23.21L20.93,18.5C20.7,19.37 19.92,20 19,20Z"
/>
)}
</svg>
);
}
const type = file.name.match(/.(\w+)$/)[1];
switch (type) {
case 'html':
return (
<svg class="sidebar__file-icon" viewBox="0 0 24 24">
if (!file.children.length) {
path = (
<path
fill="currentColor"
d="M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z"
/>
);
} else {
path = file.isCollapsed ? (
<path
fill="currentColor"
d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z"
/>
) : (
<path
fill="currentColor"
d="M19,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10L12,6H19A2,2 0 0,1 21,8H21L4,8V18L6.14,10H23.21L20.93,18.5C20.7,19.37 19.92,20 19,20Z"
/>
);
}
} else {
const type = file.name.match(/.(\w+)$/)[1];
switch (type) {
case 'html':
path = (
<path
fill="rgb(225, 187, 21)"
d="M14.6,16.6L19.2,12L14.6,7.4L16,6L22,12L16,18L14.6,16.6M9.4,16.6L4.8,12L9.4,7.4L8,6L2,12L8,18L9.4,16.6Z"
/>
</svg>
);
/* return (
<svg class="sidebar__file-icon" viewBox="0 0 24 24">
<path
fill="rgb(225, 187, 21)"
d="M12,17.56L16.07,16.43L16.62,10.33H9.38L9.2,8.3H16.8L17,6.31H7L7.56,12.32H14.45L14.22,14.9L12,15.5L9.78,14.9L9.64,13.24H7.64L7.93,16.43L12,17.56M4.07,3H19.93L18.5,19.2L12,21L5.5,19.2L4.07,3Z"
/>
</svg>
); */
case 'js':
return (
<svg class="sidebar__file-icon" viewBox="0 0 24 24">
);
break;
case 'js':
path = (
<path
fill="rgb(255, 165, 0)"
d="M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z"
/>
</svg>
);
case 'css':
return (
<svg class="sidebar__file-icon" viewBox="0 0 24 24">
);
break;
case 'css':
path = (
<path
fill="rgb(95, 158, 160)"
d="M5,3L4.35,6.34H17.94L17.5,8.5H3.92L3.26,11.83H16.85L16.09,15.64L10.61,17.45L5.86,15.64L6.19,14H2.85L2.06,18L9.91,21L18.96,18L20.16,11.97L20.4,10.76L21.94,3H5Z"
/>
</svg>
);
case 'md':
case 'markdown':
return (
<svg class="sidebar__file-icon" viewBox="0 0 24 24">
);
break;
case 'md':
case 'markdown':
path = (
<path
fill="skyblue"
d="M2,16V8H4L7,11L10,8H12V16H10V10.83L7,13.83L4,10.83V16H2M16,8H19V12H21.5L17.5,16.5L13.5,12H16V8Z"
/>
</svg>
);
case 'jpg':
case 'jpeg':
case 'svg':
case 'png':
return (
<svg class="sidebar__file-icon" viewBox="0 0 24 24">
);
break;
case 'jpg':
case 'jpeg':
case 'svg':
case 'png':
path = (
<path
fill="crimson"
d="M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M13.96,12.29L11.21,15.83L9.25,13.47L6.5,17H17.5L13.96,12.29Z"
/>
</svg>
);
);
break;
}
}
return (
<svg class="sidebar__file-icon" viewBox="0 0 24 24">
{path}
</svg>
);
}
function File({
@@ -90,7 +93,8 @@ function File({
onRenameBtnClick,
onRemoveBtnClick,
onNameInputBlur,
onNameInputKeyUp
onNameInputKeyUp,
onFileDrop
}) {
function focusInput(el) {
el &&
@@ -98,8 +102,36 @@ function File({
el.focus();
}, 1);
}
function dragStartHandler(e) {
console.log(file.path);
e.dataTransfer.setData('text/plain', file.path);
}
function dragOverHandler(e) {
if (file.isFolder) {
e.preventDefault();
e.target.classList.add('is-being-dragged-over');
e.target.style.outline = '1px dashed';
}
}
function dragLeaveHandler(e) {
if (file.isFolder) {
e.preventDefault();
e.target.style.outline = null;
}
}
function dropHandler(e) {
if (file.isFolder) {
e.preventDefault();
onFileDrop(e.dataTransfer.getData('text/plain'), file);
e.target.style.outline = null;
}
}
return (
<div>
<div
onDragOver={dragOverHandler}
onDragLeave={dragLeaveHandler}
onDrop={dropHandler}
>
{file === fileBeingRenamed ? (
<input
type="text"
@@ -112,6 +144,8 @@ function File({
<button
class={`sidebar__file ${selectedFile === file ? 'selected' : ''}`}
type="button"
draggable={file.name !== 'index.html'}
onDragStart={dragStartHandler}
onClick={onFileSelect.bind(null, file)}
>
<div class="flex flex-v-center">