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 : () => {}} > {} | | 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} 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 41d3714a0..5599cc909 100644 --- a/packages/client-react/src/client/components/ListView/ListView.react.js +++ b/packages/client-react/src/client/components/ListView/ListView.react.js @@ -48,7 +48,8 @@ const propTypes = { onSort: PropTypes.func, onKeyDown: PropTypes.func, onRef: PropTypes.func, - locale: PropTypes.string + locale: PropTypes.string, + dragUpload: PropTypes.func }; const defaultProps = { rowContextMenuId: nanoid(), @@ -168,6 +169,22 @@ class ListView extends Component { this.scrollToIndex(scrollToIndex); } + handleHighlight = (event) => { + event.preventDefault() + event.stopPropagation() + } + + handleUnhighlight = (event) => { + event.preventDefault() + event.stopPropagation() + } + + handleDropFile = (event, callback) => { + event.preventDefault() + event.stopPropagation() + callback({ action: 'drag' }); + } + render() { const { rowContextMenuId, @@ -178,7 +195,8 @@ class ListView extends Component { loading, onRef, sortBy, - sortDirection + sortDirection, + dragUpload } = this.props; const { @@ -221,6 +239,14 @@ class ListView extends Component { }) => (
{ + this.handleHighlight(event); + this.handleDropFile(event, dragUpload) + }} + onDragOver={(event) => { + this.handleHighlight(event); + } } + onDragLeave={this.handleUnhighlight} > {})} + 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 bab0e45f6..11f3fe4be 100644 --- a/packages/connector-node-v1/src/utils/upload.js +++ b/packages/connector-node-v1/src/utils/upload.js @@ -1,24 +1,64 @@ -async function readLocalFile() { +async function readLocalFile(typeAction) { return new Promise((resolve, reject) => { - const uploadInput = document.createElement("input"); + 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); + + dragArea.style.position = 'absolute'; + dragArea.style.width = '100%'; + dragArea.style.height = '100%'; + dragArea.style.top = '0'; + + dragArea.addEventListener('dragenter', (e) => { + e.preventDefault(); + }) - uploadInput.addEventListener('change', _ => { - const file = uploadInput.files[0]; - resolve({ - type: file.type, - name: file.name, - file + 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, + }); }); - }); - // This input element in IE11 becomes visible after it is added on the page - // Hide an input element - uploadInput.style.visibility = 'hidden'; + dragArea.addEventListener('dragover', e => { + e.preventDefault() + }); - uploadInput.type = "file"; - document.body.appendChild(uploadInput); - uploadInput.click(); - document.body.removeChild(uploadInput); + dragArea.addEventListener('dragleave', () => { + navigator.removeChild(dragArea); + }); + } }); }