From 05773bc988381341e872c3e389b70deb51faf8aa Mon Sep 17 00:00:00 2001 From: stelmashuk Date: Tue, 7 Dec 2021 10:15:13 +0300 Subject: [PATCH 1/5] drag n drop --- package.json | 2 +- .../FileNavigator.DOCUMENTATION.md | 4 +- .../FileNavigator/FileNavigator.react.js | 3 +- .../components/ListView/ListView.react.js | 34 +++++++++++- .../src/capabilities/upload.js | 6 ++- .../connector-node-v1/src/utils/upload.js | 53 +++++++++++++++++-- 6 files changed, 91 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index b5bac44ef..653400e10 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "devDependencies": { "babel-eslint": "8.2.1", - "cypress": "3.2.0", + "cypress": "^3.2.0", "eslint": "4.17.0", "eslint-config-opuscapita": "2.0.1", "eslint-plugin-react": "7.7.0", diff --git a/packages/client-react/src/client/components/FileNavigator/FileNavigator.DOCUMENTATION.md b/packages/client-react/src/client/components/FileNavigator/FileNavigator.DOCUMENTATION.md index d37212ed3..981c8cb27 100644 --- a/packages/client-react/src/client/components/FileNavigator/FileNavigator.DOCUMENTATION.md +++ b/packages/client-react/src/client/components/FileNavigator/FileNavigator.DOCUMENTATION.md @@ -60,9 +60,9 @@ Resource example for **connector-node-v1**: "createdTime": 1515854279676, "id": "Lw", "modifiedTime": 1515854279660, - "name": "Customization area", + "name*": "Customization area", "type": "dir", - "parentId": null + "parentId": null* } ``` diff --git a/packages/client-react/src/client/components/FileNavigator/FileNavigator.react.js b/packages/client-react/src/client/components/FileNavigator/FileNavigator.react.js index 11aa30c85..88d20a4a2 100644 --- a/packages/client-react/src/client/components/FileNavigator/FileNavigator.react.js +++ b/packages/client-react/src/client/components/FileNavigator/FileNavigator.react.js @@ -400,7 +400,6 @@ class FileNavigator extends Component { label: capability.label || '', onClick: capability.handler || (() => {}), }); - if (!isDataView) { res.disabled = !capability.shouldBeAvailable(apiOptions); } @@ -462,6 +461,7 @@ class FileNavigator extends Component { const filesViewContextMenuItems = this.getContextCapabilities({ context: 'files-view', isDataView: true }); const toolbarItems = this.getContextCapabilities({ context: 'toolbar' }); const newButtonItems = this.getContextCapabilities({ context: 'new-button' }); + const uploadItem = newButtonItems.filter(el => el.id === 'upload'); const rowContextMenuId = `row-context-menu-${id}`; const filesViewContextMenuId = `files-view-context-menu-${id}`; @@ -504,6 +504,7 @@ class FileNavigator extends Component { layout={listViewLayout} layoutOptions={viewLayoutOptions} locale={apiOptions.locale} + dragUpload={uploadItem.length ? uploadItem[0].onClick : () => {}} > { + event.preventDefault() + event.stopPropagation() + + // setDropAreaHighlighted(true) + } + + handleUnhighlight = (event) => { + event.preventDefault() + event.stopPropagation() + + // setDropAreaHighlighted(false) + } + + handleDropFile = (event, callback) => { + event.preventDefault() + event.stopPropagation() + callback(); + } + render() { const { rowContextMenuId, @@ -178,7 +199,8 @@ class ListView extends Component { loading, onRef, sortBy, - sortDirection + sortDirection, + dragUpload } = this.props; const { @@ -221,6 +243,14 @@ class ListView extends Component { }) => (
{ + this.handleHighlight(event); + this.handleDropFile(event, dragUpload) + }} + onDragOver={(event) => { + this.handleHighlight(event); + } } + onDragLeave={this.handleUnhighlight} > { const localeLabel = getMess(apiOptions.locale, label); const { getResource } = actions; + const handleClick = (evt) => { + handler(apiOptions, actions) + } return { id: label, icon: { svg: icons.fileUpload }, @@ -121,6 +124,7 @@ export default (apiOptions, actions) => { return resource.capabilities.canAddChildren }, availableInContexts: ['files-view', 'new-button'], - handler: () => handler(apiOptions, actions) + handler: handleClick, + // handler: () => handler(apiOptions, actions) }; } diff --git a/packages/connector-node-v1/src/utils/upload.js b/packages/connector-node-v1/src/utils/upload.js index bab0e45f6..55a43c14b 100644 --- a/packages/connector-node-v1/src/utils/upload.js +++ b/packages/connector-node-v1/src/utils/upload.js @@ -1,9 +1,16 @@ async function readLocalFile() { return new Promise((resolve, reject) => { + let isDrag = false; + const uploadInput = document.createElement("input"); + const dragArea = document.createElement('div'); + const navigator = document.querySelector('.oc-fm--file-navigator'); + navigator.appendChild(dragArea); + uploadInput.addEventListener('change', _ => { const file = uploadInput.files[0]; + navigator.removeChild(dragArea); resolve({ type: file.type, name: file.name, @@ -15,10 +22,48 @@ async function readLocalFile() { // Hide an input element uploadInput.style.visibility = 'hidden'; - uploadInput.type = "file"; - document.body.appendChild(uploadInput); - uploadInput.click(); - document.body.removeChild(uploadInput); + dragArea.style.position = 'absolute'; + dragArea.style.width = '100%'; + dragArea.style.height = '100%'; + dragArea.style.top = '0'; + + dragArea.addEventListener('dragenter', (e) => { + e.preventDefault(); + isDrag = true; + }) + + dragArea.addEventListener('drop', (e) => { + e.preventDefault(); + const dt = e.dataTransfer + const files = dt.files + + const file = files[0]; + navigator.removeChild(dragArea) + resolve({ + type: file.type, + name: file.name, + file + }); + }); + + dragArea.addEventListener('dragover', e => { + e.preventDefault() + }); + + navigator.addEventListener('click', () => { + if (navigator.contains(dragArea)) { + navigator.removeChild(dragArea); + } + }); + + setTimeout(() => { + if (!isDrag) { + uploadInput.type = "file"; + document.body.appendChild(uploadInput); + uploadInput.click(); + document.body.removeChild(uploadInput); + } + }, 10) }); } From 4facd2d0b9c8d2bc11581dd8af7f7ed12a2c9a12 Mon Sep 17 00:00:00 2001 From: stelmashuk Date: Thu, 9 Dec 2021 10:11:27 +0300 Subject: [PATCH 2/5] fix drag n drop --- .../src/capabilities/upload.js | 7 ++--- .../connector-node-v1/src/utils/upload.js | 31 +++++++++++++------ 2 files changed, 24 insertions(+), 14 deletions(-) diff --git a/packages/connector-node-v1/src/capabilities/upload.js b/packages/connector-node-v1/src/capabilities/upload.js index e9ca65ee0..be34cfd71 100644 --- a/packages/connector-node-v1/src/capabilities/upload.js +++ b/packages/connector-node-v1/src/capabilities/upload.js @@ -74,6 +74,7 @@ async function handler(apiOptions, actions) { const resource = getResource(); try { const file = await readLocalFile(true); + console.log(file.img) onStart({ name: file.name, size: file.file.size }); const response = await api.uploadFileToId({ apiOptions, parentId: resource.id, file, onProgress }); const newResource = normalizeResource(response.body[0]); @@ -109,9 +110,6 @@ async function handler(apiOptions, actions) { export default (apiOptions, actions) => { const localeLabel = getMess(apiOptions.locale, label); const { getResource } = actions; - const handleClick = (evt) => { - handler(apiOptions, actions) - } return { id: label, icon: { svg: icons.fileUpload }, @@ -124,7 +122,6 @@ export default (apiOptions, actions) => { return resource.capabilities.canAddChildren }, availableInContexts: ['files-view', 'new-button'], - handler: handleClick, - // handler: () => handler(apiOptions, actions) + handler: () => handler(apiOptions, actions) }; } diff --git a/packages/connector-node-v1/src/utils/upload.js b/packages/connector-node-v1/src/utils/upload.js index 55a43c14b..abb9d7c33 100644 --- a/packages/connector-node-v1/src/utils/upload.js +++ b/packages/connector-node-v1/src/utils/upload.js @@ -8,6 +8,15 @@ async function readLocalFile() { const navigator = document.querySelector('.oc-fm--file-navigator'); navigator.appendChild(dragArea); + const handleRemoveDragArea = () => { + if (navigator.contains(dragArea)) { + navigator.removeChild(dragArea); + } + navigator.removeEventListener('click', handleRemoveDragArea); + }; + + navigator.addEventListener('click', handleRemoveDragArea); + uploadInput.addEventListener('change', _ => { const file = uploadInput.files[0]; navigator.removeChild(dragArea); @@ -34,15 +43,21 @@ async function readLocalFile() { dragArea.addEventListener('drop', (e) => { e.preventDefault(); - const dt = e.dataTransfer - const files = dt.files - + const dt = e.dataTransfer; + const files = dt.files; const file = files[0]; - navigator.removeChild(dragArea) + if (file) { + const reader = new FileReader(); + reader.onload = (e) => { + console.log(e.target.result); + }; + reader.readAsDataURL(file); + } + navigator.removeChild(dragArea); resolve({ type: file.type, name: file.name, - file + file, }); }); @@ -50,10 +65,8 @@ async function readLocalFile() { e.preventDefault() }); - navigator.addEventListener('click', () => { - if (navigator.contains(dragArea)) { - navigator.removeChild(dragArea); - } + dragArea.addEventListener('dragleave', () => { + navigator.removeChild(dragArea); }); setTimeout(() => { From 2342d5ef2e1690d840c3618f676e8de957635cf3 Mon Sep 17 00:00:00 2001 From: stelmashuk Date: Tue, 14 Dec 2021 10:39:29 +0300 Subject: [PATCH 3/5] delete console log delete console log --- .../src/client/components/ListView/ListView.react.js | 4 ---- packages/connector-node-v1/src/capabilities/upload.js | 1 - 2 files changed, 5 deletions(-) diff --git a/packages/client-react/src/client/components/ListView/ListView.react.js b/packages/client-react/src/client/components/ListView/ListView.react.js index 46e27b49b..32ce7bd84 100644 --- a/packages/client-react/src/client/components/ListView/ListView.react.js +++ b/packages/client-react/src/client/components/ListView/ListView.react.js @@ -172,15 +172,11 @@ class ListView extends Component { handleHighlight = (event) => { event.preventDefault() event.stopPropagation() - - // setDropAreaHighlighted(true) } handleUnhighlight = (event) => { event.preventDefault() event.stopPropagation() - - // setDropAreaHighlighted(false) } handleDropFile = (event, callback) => { diff --git a/packages/connector-node-v1/src/capabilities/upload.js b/packages/connector-node-v1/src/capabilities/upload.js index be34cfd71..1b06a4d9e 100644 --- a/packages/connector-node-v1/src/capabilities/upload.js +++ b/packages/connector-node-v1/src/capabilities/upload.js @@ -74,7 +74,6 @@ async function handler(apiOptions, actions) { const resource = getResource(); try { const file = await readLocalFile(true); - console.log(file.img) onStart({ name: file.name, size: file.file.size }); const response = await api.uploadFileToId({ apiOptions, parentId: resource.id, file, onProgress }); const newResource = normalizeResource(response.body[0]); From bb601b3cba2b8286449b0d9621a3fe3bb5a192a4 Mon Sep 17 00:00:00 2001 From: stelmashuk Date: Tue, 14 Dec 2021 12:17:10 +0300 Subject: [PATCH 4/5] add information to documentation --- .../src/client/components/ListView/ListView.DOCUMENTATION.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/client-react/src/client/components/ListView/ListView.DOCUMENTATION.md b/packages/client-react/src/client/components/ListView/ListView.DOCUMENTATION.md index 2e8be7ff3..dd11b6e7d 100644 --- a/packages/client-react/src/client/components/ListView/ListView.DOCUMENTATION.md +++ b/packages/client-react/src/client/components/ListView/ListView.DOCUMENTATION.md @@ -18,6 +18,7 @@ ListView is a part of FileManger. Built using [react-virtualized](https://github | onSort | func | ({ sortBy, sortDirection }) => {} | | onKeyDown | func | (e) => {} | | onRef | func | (ref) => {} | +| dragUpload | func | () => {} | ### Code Example @@ -29,6 +30,7 @@ ListView is a part of FileManger. Built using [react-virtualized](https://github onRowDoubleClick={(data) => console.log('double click', data)} onSelection={_scope.handleSelection} onSort={_scope.handleSort} + dragUpload={() => console.log('drag')} loading={false} selection={_scope.state.selection} sortBy={_scope.state.sortBy} From 343e1226b06911b825d780ef8abe06aeee0c0c5b Mon Sep 17 00:00:00 2001 From: stelmashuk Date: Fri, 17 Dec 2021 11:06:36 +0300 Subject: [PATCH 5/5] delete setTimeout --- .../components/ListView/ListView.react.js | 2 +- .../components/Toolbar/Toolbar.react.js | 6 +- .../src/capabilities/upload.js | 6 +- .../connector-node-v1/src/utils/upload.js | 122 ++++++++---------- 4 files changed, 61 insertions(+), 75 deletions(-) diff --git a/packages/client-react/src/client/components/ListView/ListView.react.js b/packages/client-react/src/client/components/ListView/ListView.react.js index 32ce7bd84..5599cc909 100644 --- a/packages/client-react/src/client/components/ListView/ListView.react.js +++ b/packages/client-react/src/client/components/ListView/ListView.react.js @@ -182,7 +182,7 @@ class ListView extends Component { handleDropFile = (event, callback) => { event.preventDefault() event.stopPropagation() - callback(); + callback({ action: 'drag' }); } render() { diff --git a/packages/client-react/src/client/components/Toolbar/Toolbar.react.js b/packages/client-react/src/client/components/Toolbar/Toolbar.react.js index 51e04e593..93fe5b734 100644 --- a/packages/client-react/src/client/components/Toolbar/Toolbar.react.js +++ b/packages/client-react/src/client/components/Toolbar/Toolbar.react.js @@ -114,7 +114,11 @@ class Toolbar extends Component { disabled={item.disabled} className={`oc-fm--toolbar__item`} title={item.label || ''} - onClick={(!item.disabled && item.onClick) || (() => {})} + onClick={() => { + if (!item.disabled) { + item.onClick({ action: 'click' }) + } + }} > { return resource.capabilities.canAddChildren }, availableInContexts: ['files-view', 'new-button'], - handler: () => handler(apiOptions, actions) + handler: (typeAction) => handler(apiOptions, actions, typeAction) }; } diff --git a/packages/connector-node-v1/src/utils/upload.js b/packages/connector-node-v1/src/utils/upload.js index abb9d7c33..11f3fe4be 100644 --- a/packages/connector-node-v1/src/utils/upload.js +++ b/packages/connector-node-v1/src/utils/upload.js @@ -1,82 +1,64 @@ -async function readLocalFile() { +async function readLocalFile(typeAction) { return new Promise((resolve, reject) => { - let isDrag = false; + if (typeAction.action === 'click') { + const uploadInput = document.createElement("input"); + uploadInput.addEventListener('change', _ => { + const file = uploadInput.files[0]; + resolve({ + type: file.type, + name: file.name, + file + }); + }); + // This input element in IE11 becomes visible after it is added on the page + // Hide an input element + uploadInput.style.visibility = 'hidden'; + uploadInput.type = "file"; + document.body.appendChild(uploadInput); + uploadInput.click(); + document.body.removeChild(uploadInput); + } else if (typeAction.action === 'drag') { + const dragArea = document.createElement('div'); + const navigator = document.querySelector('.oc-fm--file-navigator'); + navigator.appendChild(dragArea); - const uploadInput = document.createElement("input"); + dragArea.style.position = 'absolute'; + dragArea.style.width = '100%'; + dragArea.style.height = '100%'; + dragArea.style.top = '0'; - const dragArea = document.createElement('div'); - const navigator = document.querySelector('.oc-fm--file-navigator'); - navigator.appendChild(dragArea); + dragArea.addEventListener('dragenter', (e) => { + e.preventDefault(); + }) - const handleRemoveDragArea = () => { - if (navigator.contains(dragArea)) { + dragArea.addEventListener('drop', (e) => { + e.preventDefault(); + const dt = e.dataTransfer; + const files = dt.files; + const file = files[0]; + if (file) { + const reader = new FileReader(); + reader.onload = (e) => { + console.log(e.target.result); + }; + reader.readAsDataURL(file); + } navigator.removeChild(dragArea); - } - navigator.removeEventListener('click', handleRemoveDragArea); - }; - - navigator.addEventListener('click', handleRemoveDragArea); - - uploadInput.addEventListener('change', _ => { - const file = uploadInput.files[0]; - navigator.removeChild(dragArea); - resolve({ - type: file.type, - name: file.name, - file + resolve({ + type: file.type, + name: file.name, + file, + }); }); - }); - - // This input element in IE11 becomes visible after it is added on the page - // Hide an input element - uploadInput.style.visibility = 'hidden'; - - dragArea.style.position = 'absolute'; - dragArea.style.width = '100%'; - dragArea.style.height = '100%'; - dragArea.style.top = '0'; - dragArea.addEventListener('dragenter', (e) => { - e.preventDefault(); - isDrag = true; - }) - - dragArea.addEventListener('drop', (e) => { - e.preventDefault(); - const dt = e.dataTransfer; - const files = dt.files; - const file = files[0]; - if (file) { - const reader = new FileReader(); - reader.onload = (e) => { - console.log(e.target.result); - }; - reader.readAsDataURL(file); - } - navigator.removeChild(dragArea); - resolve({ - type: file.type, - name: file.name, - file, + dragArea.addEventListener('dragover', e => { + e.preventDefault() }); - }); - - dragArea.addEventListener('dragover', e => { - e.preventDefault() - }); - - dragArea.addEventListener('dragleave', () => { - navigator.removeChild(dragArea); - }); - setTimeout(() => { - if (!isDrag) { - uploadInput.type = "file"; - document.body.appendChild(uploadInput); - uploadInput.click(); - document.body.removeChild(uploadInput); - } - }, 10) + dragArea.addEventListener('dragleave', () => { + navigator.removeChild(dragArea); + }); + } }); }