Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-magic-dropzone
Advanced tools
react-magic-dropzone - npm Package Compare versions
Comparing version 0.0.3 to 1.0.0
| 'use strict'; | ||
| var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }(); | ||
| var _react = require('react'); | ||
@@ -23,2 +25,4 @@ | ||
| function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } } | ||
| function _toArray(arr) { return Array.isArray(arr) ? arr : Array.from(arr); } | ||
@@ -40,5 +44,13 @@ | ||
| var images = void 0; | ||
| var testLinks = void 0; | ||
| describe('MagicDropzone', function () { | ||
| beforeEach(function () { | ||
| testLinks = { | ||
| image1: 'https://image.jpg', | ||
| json: 'http://test.json', | ||
| html: '<img class=" --" sizes="50vw" srcset="https://images.fastcompany.net/image/upload/w_707,ar_16:9,c_limit,f_auto,q_auto:best,fl_lossy/wp-cms/uploads/2017/06/p-1-sonic-burger.jpg 707w" alt="The Newest Burger At Sonic Blends The Beef With Mushrooms So You Eat Less Meat">', | ||
| html2: '<html><img src="https://fun.jpg"><div>tests are fun</div><img src="https://fun2.json"></html>' | ||
| }; | ||
| files = [{ | ||
@@ -99,23 +111,2 @@ name: 'file1.pdf', | ||
| }); | ||
| it('should render children function', function () { | ||
| var content = _react2.default.createElement( | ||
| 'p', | ||
| null, | ||
| 'some content' | ||
| ); | ||
| var dropzone = (0, _enzyme.mount)(_react2.default.createElement( | ||
| _MagicDropzone2.default, | ||
| null, | ||
| content | ||
| )); | ||
| var dropzoneWithFunction = (0, _enzyme.mount)(_react2.default.createElement( | ||
| _MagicDropzone2.default, | ||
| null, | ||
| function () { | ||
| return content; | ||
| } | ||
| )); | ||
| expect(dropzoneWithFunction.html()).toEqual(dropzone.html()); | ||
| }); | ||
| }); | ||
@@ -330,5 +321,5 @@ | ||
| component.simulate('dragStart'); | ||
| component.simulate('dragEnter', { dataTransfer: { items: files } }); | ||
| component.simulate('dragOver', { dataTransfer: { items: files } }); | ||
| component.simulate('dragLeave', { dataTransfer: { items: files } }); | ||
| component.simulate('dragEnter', { dataTransfer: { types: ['Files'], items: files } }); | ||
| component.simulate('dragOver', { dataTransfer: { types: ['Files'], items: files } }); | ||
| component.simulate('dragLeave', { dataTransfer: { types: ['Files'], items: files } }); | ||
| expect(dragStartSpy.callCount).toEqual(1); | ||
@@ -365,6 +356,6 @@ expect(dragEnterSpy.callCount).toEqual(1); | ||
| component.simulate('dragStart', { dataTransfer: { items: files } }); | ||
| component.simulate('dragEnter', { dataTransfer: { items: files } }); | ||
| component.simulate('dragOver', { dataTransfer: { items: files } }); | ||
| component.simulate('dragLeave', { dataTransfer: { items: files } }); | ||
| component.simulate('dragStart', { dataTransfer: { types: ['Files'], items: files } }); | ||
| component.simulate('dragEnter', { dataTransfer: { types: ['Files'], items: files } }); | ||
| component.simulate('dragOver', { dataTransfer: { types: ['Files'], items: files } }); | ||
| component.simulate('dragLeave', { dataTransfer: { types: ['Files'], items: files } }); | ||
| expect(dragStartSpy.callCount).toEqual(1); | ||
@@ -377,471 +368,278 @@ expect(dragEnterSpy.callCount).toEqual(1); | ||
| }); | ||
| }); | ||
| // it('should set proper dragActive state on dragEnter', () => { | ||
| // const dropzone = mount( | ||
| // <MagicDropzone> | ||
| // {props => <DummyChildComponent {...props} />} | ||
| // </MagicDropzone> | ||
| // ) | ||
| // const child = dropzone.find(DummyChildComponent) | ||
| // dropzone.simulate('dragEnter', { dataTransfer: { files } }) | ||
| // expect(child).toHaveProp('isDragActive', true) | ||
| // expect(child).toHaveProp('isDragAccept', true) | ||
| // expect(child).toHaveProp('isDragReject', false) | ||
| // }) | ||
| // | ||
| // it('should set proper dragReject state on dragEnter', () => { | ||
| // const dropzone = mount( | ||
| // <MagicDropzone accept="image/*"> | ||
| // {props => <DummyChildComponent {...props} />} | ||
| // </MagicDropzone> | ||
| // ) | ||
| // const child = dropzone.find(DummyChildComponent) | ||
| // dropzone.simulate('dragEnter', { | ||
| // dataTransfer: { files: files.concat(images) } | ||
| // }) | ||
| // expect(child).toHaveProp('isDragActive', true) | ||
| // expect(child).toHaveProp('isDragAccept', false) | ||
| // expect(child).toHaveProp('isDragReject', true) | ||
| // }) | ||
| // | ||
| // it('should set proper dragAccept state if multiple is false', () => { | ||
| // const dropzone = mount( | ||
| // <MagicDropzone accept="image/*" multiple={false}> | ||
| // {props => <DummyChildComponent {...props} />} | ||
| // </MagicDropzone> | ||
| // ) | ||
| // const child = dropzone.find(DummyChildComponent) | ||
| // dropzone.simulate('dragEnter', { dataTransfer: { files } }) | ||
| // expect(child).toHaveProp('isDragActive', true) | ||
| // expect(child).toHaveProp('isDragAccept', false) | ||
| // expect(child).toHaveProp('isDragReject', true) | ||
| // }) | ||
| // | ||
| // it('should set proper dragAccept state if multiple is false', () => { | ||
| // const dropzone = mount( | ||
| // <MagicDropzone accept="image/*" multiple={false}> | ||
| // {props => <DummyChildComponent {...props} />} | ||
| // </MagicDropzone> | ||
| // ) | ||
| // const child = dropzone.find(DummyChildComponent) | ||
| // dropzone.simulate('dragEnter', { dataTransfer: { files: images } }) | ||
| // expect(child).toHaveProp('isDragActive', true) | ||
| // expect(child).toHaveProp('isDragAccept', true) | ||
| // expect(child).toHaveProp('isDragReject', true) | ||
| // }) | ||
| // | ||
| // it('should set proper dragActive state if accept prop changes mid-drag', () => { | ||
| // const dropzone = mount( | ||
| // <MagicDropzone accept="image/*"> | ||
| // {props => <DummyChildComponent {...props} />} | ||
| // </MagicDropzone> | ||
| // ) | ||
| // const child = dropzone.find(DummyChildComponent) | ||
| // dropzone.simulate('dragEnter', { dataTransfer: { files: images } }) | ||
| // // expect(child).toHaveProp('isDragActive', true) | ||
| // // expect(child).toHaveProp('isDragAccept', true) | ||
| // // expect(child).toHaveProp('isDragReject', false) | ||
| // expect(child.props().isDragActive).toBe(true) | ||
| // expect(child.props().isDragAccept).toBe(true) | ||
| // expect(child.props().isDragReject).toBe(true) | ||
| // | ||
| // dropzone.setProps({ accept: 'text/*' }) | ||
| // // expect(child).toHaveProp('isDragActive', true) | ||
| // // expect(child).toHaveProp('isDragAccept', false) | ||
| // // expect(child).toHaveProp('isDragReject', true) | ||
| // expect(child.props().isDragActive).toBe(true) | ||
| // expect(child.props().isDragAccept).toBe(false) | ||
| // expect(child.props().isDragReject).toBe(true) | ||
| // }) | ||
| describe('onDrop', function () { | ||
| var dropSpy = void 0; | ||
| var dropAcceptedSpy = void 0; | ||
| var dropRejectedSpy = void 0; | ||
| it('should expose state to children', function () { | ||
| var dropzone = (0, _enzyme.mount)(_react2.default.createElement( | ||
| _MagicDropzone2.default, | ||
| { accept: 'image/*' }, | ||
| function (_ref3) { | ||
| var isDragActive = _ref3.isDragActive, | ||
| isDragAccept = _ref3.isDragAccept, | ||
| isDragReject = _ref3.isDragReject; | ||
| beforeEach(function () { | ||
| dropSpy = (0, _sinon.spy)(); | ||
| dropAcceptedSpy = (0, _sinon.spy)(); | ||
| dropRejectedSpy = (0, _sinon.spy)(); | ||
| }); | ||
| if (isDragReject) { | ||
| return (isDragActive && 'Active but') + ' Reject'; | ||
| } | ||
| if (isDragAccept) { | ||
| return (isDragActive && 'Active and') + ' Accept'; | ||
| } | ||
| return 'Empty'; | ||
| } | ||
| )); | ||
| expect(dropzone.text()).toEqual('Empty'); | ||
| dropzone.simulate('dragEnter', { dataTransfer: { files: images } }); | ||
| expect(dropzone.text()).toEqual('Active and Accept'); | ||
| dropzone.simulate('dragEnter', { dataTransfer: { files: files } }); | ||
| expect(dropzone.text()).toEqual('Active but Reject'); | ||
| afterEach(function () { | ||
| dropSpy.reset(); | ||
| dropAcceptedSpy.reset(); | ||
| dropRejectedSpy.reset(); | ||
| }); | ||
| // it('should reset the dragAccept/dragReject state when leaving after a child goes away', () => { | ||
| // const DragActiveComponent = () => <p>Accept</p> | ||
| // const ChildComponent = () => <p>Child component content</p> | ||
| // const dropzone = mount( | ||
| // <MagicDropzone> | ||
| // {({ isDragAccept, isDragReject }) => { | ||
| // if (isDragReject) { | ||
| // return 'Rejected' | ||
| // } | ||
| // if (isDragAccept) { | ||
| // return ( | ||
| // <DragActiveComponent | ||
| // isDragAccept={isDragAccept} | ||
| // isDragReject={isDragReject} | ||
| // /> | ||
| // ) | ||
| // } | ||
| // return ( | ||
| // <ChildComponent | ||
| // isDragAccept={isDragAccept} | ||
| // isDragReject={isDragReject} | ||
| // /> | ||
| // ) | ||
| // }} | ||
| // </MagicDropzone> | ||
| // ) | ||
| // const child = dropzone.find(ChildComponent) | ||
| // child.simulate('dragEnter', { dataTransfer: { files } }) | ||
| // dropzone.simulate('dragEnter', { dataTransfer: { files } }) | ||
| // // make sure we handle any duplicate dragEnter events that the browser may send us | ||
| // dropzone.simulate('dragEnter', { dataTransfer: { files } }) | ||
| // const dragActiveChild = dropzone.find(DragActiveComponent) | ||
| // // expect(dragActiveChild).toBePresent() | ||
| // // expect(dragActiveChild).toHaveProp('isDragAccept', true) | ||
| // // expect(dragActiveChild).toHaveProp('isDragReject', false) | ||
| // expect(dragActiveChild.length).not.toBe(0) | ||
| // expect(dragActiveChild.props().isDragAccept).toBe(true) | ||
| // expect(dragActiveChild.props().isDragReject).toBe(false) | ||
| // | ||
| // dropzone.simulate('dragLeave', { dataTransfer: { files } }) | ||
| // // expect(dropzone.find(DragActiveComponent)).toBeEmpty() | ||
| // // expect(child).toHaveProp('isDragAccept', false) | ||
| // // expect(child).toHaveProp('isDragReject', false) | ||
| // expect(dragActiveChild.length).toBe(0) | ||
| // expect(dragActiveChild.props().isDragAccept).toBe(false) | ||
| // expect(dragActiveChild.props().isDragReject).toBe(false) | ||
| // }) | ||
| it('should add valid files to rejected files on a multple drop when multiple false', function () { | ||
| var dropzone = (0, _enzyme.mount)(_react2.default.createElement(_MagicDropzone2.default, { accept: 'image/*', onDrop: dropSpy, multiple: false })); | ||
| dropzone.simulate('drop', { dataTransfer: { types: ['Files'], files: images } }); | ||
| var rejected = dropSpy.firstCall.args[0]; | ||
| expect(rejected.length).toEqual(1); | ||
| }); | ||
| it('should add invalid files to rejected when multiple is false', function () { | ||
| var dropzone = (0, _enzyme.mount)(_react2.default.createElement(_MagicDropzone2.default, { accept: 'image/*', onDrop: dropSpy, multiple: false })); | ||
| dropzone.simulate('drop', { | ||
| dataTransfer: { types: ['Files'], files: images.concat(files) } | ||
| }); | ||
| var rejected = dropSpy.firstCall.args[1]; | ||
| expect(rejected.length).toEqual(2); | ||
| }); | ||
| it('should allow single files to be dropped if multiple is false', function () { | ||
| var dropzone = (0, _enzyme.mount)(_react2.default.createElement(_MagicDropzone2.default, { accept: 'image/*', onDrop: dropSpy, multiple: false })); | ||
| dropzone.simulate('drop', { dataTransfer: { types: ['Files'], files: [images[0]] } }); | ||
| var _dropSpy$firstCall$ar = _slicedToArray(dropSpy.firstCall.args, 2), | ||
| accepted = _dropSpy$firstCall$ar[0], | ||
| rejected = _dropSpy$firstCall$ar[1]; | ||
| expect(accepted.length).toEqual(1); | ||
| expect(rejected.length).toEqual(0); | ||
| }); | ||
| it('should take all dropped files if multiple is true', function () { | ||
| var dropzone = (0, _enzyme.mount)(_react2.default.createElement(_MagicDropzone2.default, { onDrop: dropSpy, multiple: true })); | ||
| dropzone.simulate('drop', { dataTransfer: { types: ['Files'], files: images } }); | ||
| expect(dropSpy.firstCall.args[0]).toHaveLength(2); | ||
| expect(dropSpy.firstCall.args[0][0].name).toEqual(images[0].name); | ||
| expect(dropSpy.firstCall.args[0][1].name).toEqual(images[1].name); | ||
| }); | ||
| it('should set this.isFileDialogActive to false', function () { | ||
| var dropzone = (0, _enzyme.mount)(_react2.default.createElement(_MagicDropzone2.default, null)); | ||
| dropzone.instance().isFileDialogActive = true; | ||
| dropzone.simulate('drop', { dataTransfer: { types: ['Files'], files: files } }); | ||
| expect(dropzone.instance().isFileDialogActive).toEqual(false); | ||
| }); | ||
| it('should always call onDrop callback with accepted and rejected arguments', function () { | ||
| var dropzone = (0, _enzyme.mount)(_react2.default.createElement(_MagicDropzone2.default, { | ||
| onDrop: dropSpy, | ||
| onDropAccepted: dropAcceptedSpy, | ||
| onDropRejected: dropRejectedSpy, | ||
| accept: 'image/*' | ||
| })); | ||
| dropzone.simulate('drop', { dataTransfer: { types: ['Files'], files: files } }); | ||
| expect(dropSpy.callCount).toEqual(1); | ||
| expect(dropSpy.firstCall.args[0]).toEqual([], [].concat(_toConsumableArray(files))); | ||
| dropzone.simulate('drop', { dataTransfer: { types: ['Files'], files: images } }); | ||
| expect(dropSpy.callCount).toEqual(2); | ||
| expect(dropSpy.lastCall.args[0]).toEqual([].concat(_toConsumableArray(images)), []); | ||
| dropzone.simulate('drop', { | ||
| dataTransfer: { types: ['Files'], files: files.concat(images) } | ||
| }); | ||
| expect(dropSpy.callCount).toEqual(3); | ||
| expect(dropSpy.lastCall.args[0]).toEqual([].concat(_toConsumableArray(images)), [].concat(_toConsumableArray(files))); | ||
| }); | ||
| it('should call onDropAccepted callback if some files were accepted', function () { | ||
| var dropzone = (0, _enzyme.mount)(_react2.default.createElement(_MagicDropzone2.default, { | ||
| onDrop: dropSpy, | ||
| onDropAccepted: dropAcceptedSpy, | ||
| onDropRejected: dropRejectedSpy, | ||
| accept: 'image/*' | ||
| })); | ||
| dropzone.simulate('drop', { dataTransfer: { types: ['Files'], files: files } }); | ||
| expect(dropAcceptedSpy.callCount).toEqual(0); | ||
| dropzone.simulate('drop', { dataTransfer: { types: ['Files'], files: images } }); | ||
| expect(dropAcceptedSpy.callCount).toEqual(1); | ||
| expect(dropAcceptedSpy.lastCall.args[0]).toEqual([].concat(_toConsumableArray(images))); | ||
| dropzone.simulate('drop', { | ||
| dataTransfer: { types: ['Files'], files: files.concat(images) } | ||
| }); | ||
| expect(dropAcceptedSpy.callCount).toEqual(2); | ||
| expect(dropAcceptedSpy.lastCall.args[0]).toEqual([].concat(_toConsumableArray(images))); | ||
| }); | ||
| it('should call onDropRejected callback if some files were rejected', function () { | ||
| var dropzone = (0, _enzyme.mount)(_react2.default.createElement(_MagicDropzone2.default, { | ||
| onDrop: dropSpy, | ||
| onDropAccepted: dropAcceptedSpy, | ||
| onDropRejected: dropRejectedSpy, | ||
| accept: 'image/*' | ||
| })); | ||
| dropzone.simulate('drop', { dataTransfer: { types: ['Files'], files: files } }); | ||
| expect(dropRejectedSpy.callCount).toEqual(1); | ||
| expect(dropRejectedSpy.lastCall.args[0]).toEqual([].concat(_toConsumableArray(files))); | ||
| dropzone.simulate('drop', { dataTransfer: { types: ['Files'], files: images } }); | ||
| expect(dropRejectedSpy.callCount).toEqual(1); | ||
| dropzone.simulate('drop', { | ||
| dataTransfer: { types: ['Files'], files: files.concat(images) } | ||
| }); | ||
| expect(dropRejectedSpy.callCount).toEqual(2); | ||
| expect(dropRejectedSpy.lastCall.args[0]).toEqual([].concat(_toConsumableArray(files))); | ||
| }); | ||
| it('applies the accept prop to the dropped files', function () { | ||
| var dropzone = (0, _enzyme.mount)(_react2.default.createElement(_MagicDropzone2.default, { | ||
| onDrop: dropSpy, | ||
| onDropAccepted: dropAcceptedSpy, | ||
| onDropRejected: dropRejectedSpy, | ||
| accept: 'image/*' | ||
| })); | ||
| dropzone.simulate('drop', { dataTransfer: { types: ['Files'], files: files } }); | ||
| expect(dropSpy.callCount).toEqual(1); | ||
| expect(dropSpy.firstCall.args[0]).toHaveLength(0); | ||
| expect(dropSpy.firstCall.args[1]).toHaveLength(1); | ||
| expect(dropAcceptedSpy.callCount).toEqual(0); | ||
| expect(dropRejectedSpy.callCount).toEqual(1); | ||
| expect(dropRejectedSpy.firstCall.args[0]).toHaveLength(1); | ||
| }); | ||
| it('applies the accept prop to the dropped images', function () { | ||
| var dropzone = (0, _enzyme.mount)(_react2.default.createElement(_MagicDropzone2.default, { | ||
| onDrop: dropSpy, | ||
| onDropAccepted: dropAcceptedSpy, | ||
| onDropRejected: dropRejectedSpy, | ||
| accept: 'image/*' | ||
| })); | ||
| dropzone.simulate('drop', { dataTransfer: { types: ['Files'], files: images } }); | ||
| expect(dropSpy.callCount).toEqual(1); | ||
| expect(dropSpy.firstCall.args[0]).toHaveLength(2); | ||
| expect(dropSpy.firstCall.args[1]).toHaveLength(0); | ||
| expect(dropAcceptedSpy.callCount).toEqual(1); | ||
| expect(dropAcceptedSpy.firstCall.args[0]).toHaveLength(2); | ||
| expect(dropRejectedSpy.callCount).toEqual(0); | ||
| }); | ||
| it('accepts a dropped image when Firefox provides a bogus file type', function () { | ||
| var dropzone = (0, _enzyme.mount)(_react2.default.createElement(_MagicDropzone2.default, { | ||
| onDrop: dropSpy, | ||
| onDropAccepted: dropAcceptedSpy, | ||
| onDropRejected: dropRejectedSpy, | ||
| accept: 'image/*' | ||
| })); | ||
| var bogusImages = [{ | ||
| name: 'bogus.gif', | ||
| size: 1234, | ||
| type: 'application/x-moz-file' | ||
| }]; | ||
| dropzone.simulate('drop', { dataTransfer: { types: ['Files'], files: bogusImages } }); | ||
| expect(dropSpy.callCount).toEqual(1); | ||
| expect(dropSpy.firstCall.args[0]).toHaveLength(1); | ||
| expect(dropSpy.firstCall.args[1]).toHaveLength(0); | ||
| expect(dropAcceptedSpy.callCount).toEqual(1); | ||
| expect(dropAcceptedSpy.firstCall.args[0]).toHaveLength(1); | ||
| expect(dropRejectedSpy.callCount).toEqual(0); | ||
| }); | ||
| it('accepts all dropped files and images when no accept prop is specified', function () { | ||
| var dropzone = (0, _enzyme.mount)(_react2.default.createElement(_MagicDropzone2.default, { | ||
| onDrop: dropSpy, | ||
| onDropAccepted: dropAcceptedSpy, | ||
| onDropRejected: dropRejectedSpy | ||
| })); | ||
| dropzone.simulate('drop', { | ||
| dataTransfer: { types: ['Files'], files: files.concat(images) } | ||
| }); | ||
| expect(dropSpy.callCount).toEqual(1); | ||
| expect(dropSpy.firstCall.args[0]).toHaveLength(3); | ||
| expect(dropSpy.firstCall.args[1]).toHaveLength(0); | ||
| expect(dropAcceptedSpy.callCount).toEqual(1); | ||
| expect(dropAcceptedSpy.firstCall.args[0]).toHaveLength(3); | ||
| expect(dropRejectedSpy.callCount).toEqual(0); | ||
| }); | ||
| it('applies the maxSize prop to the dropped files', function () { | ||
| var dropzone = (0, _enzyme.mount)(_react2.default.createElement(_MagicDropzone2.default, { | ||
| onDrop: dropSpy, | ||
| onDropAccepted: dropAcceptedSpy, | ||
| onDropRejected: dropRejectedSpy, | ||
| maxSize: 1111 | ||
| })); | ||
| dropzone.simulate('drop', { dataTransfer: { types: ['Files'], files: files } }); | ||
| expect(dropSpy.callCount).toEqual(1); | ||
| expect(dropSpy.firstCall.args[0]).toHaveLength(1); | ||
| expect(dropSpy.firstCall.args[1]).toHaveLength(0); | ||
| expect(dropAcceptedSpy.callCount).toEqual(1); | ||
| expect(dropAcceptedSpy.firstCall.args[0]).toHaveLength(1); | ||
| expect(dropRejectedSpy.callCount).toEqual(0); | ||
| }); | ||
| it('applies the maxSize prop to the dropped images', function () { | ||
| var dropzone = (0, _enzyme.mount)(_react2.default.createElement(_MagicDropzone2.default, { | ||
| onDrop: dropSpy, | ||
| onDropAccepted: dropAcceptedSpy, | ||
| onDropRejected: dropRejectedSpy, | ||
| maxSize: 1111 | ||
| })); | ||
| dropzone.simulate('drop', { dataTransfer: { types: ['Files'], files: images } }); | ||
| expect(dropSpy.callCount).toEqual(1); | ||
| expect(dropSpy.firstCall.args[0]).toHaveLength(0); | ||
| expect(dropSpy.firstCall.args[1]).toHaveLength(2); | ||
| expect(dropAcceptedSpy.callCount).toEqual(0); | ||
| expect(dropRejectedSpy.callCount).toEqual(1); | ||
| expect(dropRejectedSpy.firstCall.args[0]).toHaveLength(2); | ||
| }); | ||
| it('applies the minSize prop to the dropped files', function () { | ||
| var dropzone = (0, _enzyme.mount)(_react2.default.createElement(_MagicDropzone2.default, { | ||
| onDrop: dropSpy, | ||
| onDropAccepted: dropAcceptedSpy, | ||
| onDropRejected: dropRejectedSpy, | ||
| minSize: 1112 | ||
| })); | ||
| dropzone.simulate('drop', { dataTransfer: { types: ['Files'], files: files } }); | ||
| expect(dropSpy.callCount).toEqual(1); | ||
| expect(dropSpy.firstCall.args[0]).toHaveLength(0); | ||
| expect(dropSpy.firstCall.args[1]).toHaveLength(1); | ||
| expect(dropAcceptedSpy.callCount).toEqual(0); | ||
| expect(dropRejectedSpy.callCount).toEqual(1); | ||
| expect(dropRejectedSpy.firstCall.args[0]).toHaveLength(1); | ||
| }); | ||
| it('applies the minSize prop to the dropped images', function () { | ||
| var dropzone = (0, _enzyme.mount)(_react2.default.createElement(_MagicDropzone2.default, { | ||
| onDrop: dropSpy, | ||
| onDropAccepted: dropAcceptedSpy, | ||
| onDropRejected: dropRejectedSpy, | ||
| minSize: 1112 | ||
| })); | ||
| dropzone.simulate('drop', { dataTransfer: { types: ['Files'], files: images } }); | ||
| expect(dropSpy.callCount).toEqual(1); | ||
| expect(dropSpy.firstCall.args[0]).toHaveLength(2); | ||
| expect(dropSpy.firstCall.args[1]).toHaveLength(0); | ||
| expect(dropAcceptedSpy.callCount).toEqual(1); | ||
| expect(dropAcceptedSpy.firstCall.args[0]).toHaveLength(2); | ||
| expect(dropRejectedSpy.callCount).toEqual(0); | ||
| }); | ||
| it('accepts all dropped files and images when no size prop is specified', function () { | ||
| var dropzone = (0, _enzyme.mount)(_react2.default.createElement(_MagicDropzone2.default, { | ||
| onDrop: dropSpy, | ||
| onDropAccepted: dropAcceptedSpy, | ||
| onDropRejected: dropRejectedSpy | ||
| })); | ||
| dropzone.simulate('drop', { | ||
| dataTransfer: { types: ['Files'], files: files.concat(images) } | ||
| }); | ||
| expect(dropSpy.callCount).toEqual(1); | ||
| expect(dropSpy.firstCall.args[0]).toHaveLength(3); | ||
| expect(dropSpy.firstCall.args[1]).toHaveLength(0); | ||
| expect(dropAcceptedSpy.callCount).toEqual(1); | ||
| expect(dropAcceptedSpy.firstCall.args[0]).toHaveLength(3); | ||
| expect(dropRejectedSpy.callCount).toEqual(0); | ||
| }); | ||
| }); | ||
| // | ||
| // describe('onDrop', () => { | ||
| // let dropSpy | ||
| // let dropAcceptedSpy | ||
| // let dropRejectedSpy | ||
| // | ||
| // beforeEach(() => { | ||
| // dropSpy = spy() | ||
| // dropAcceptedSpy = spy() | ||
| // dropRejectedSpy = spy() | ||
| // }) | ||
| // | ||
| // afterEach(() => { | ||
| // dropSpy.reset() | ||
| // dropAcceptedSpy.reset() | ||
| // dropRejectedSpy.reset() | ||
| // }) | ||
| // | ||
| // it('should reset the dragActive/dragReject state', () => { | ||
| // const dropzone = mount( | ||
| // <MagicDropzone | ||
| // onDrop={dropSpy} | ||
| // onDropAccepted={dropAcceptedSpy} | ||
| // onDropRejected={dropRejectedSpy} | ||
| // > | ||
| // {props => <DummyChildComponent {...props} />} | ||
| // </MagicDropzone> | ||
| // ) | ||
| // const child = dropzone.find(DummyChildComponent) | ||
| // dropzone.simulate('dragEnter', { dataTransfer: { files } }) | ||
| // expect(child).toHaveProp('isDragActive', true) | ||
| // expect(child).toHaveProp('isDragReject', false) | ||
| // dropzone.simulate('drop', { dataTransfer: { files } }) | ||
| // expect(child).toHaveProp('isDragActive', false) | ||
| // expect(child).toHaveProp('isDragReject', false) | ||
| // }) | ||
| // | ||
| // it('should add valid files to rejected files on a multple drop when multiple false', () => { | ||
| // const dropzone = mount(<MagicDropzone accept="image/*" onDrop={dropSpy} multiple={false} />) | ||
| // dropzone.simulate('drop', { dataTransfer: { files: images } }) | ||
| // const rejected = dropSpy.firstCall.args[0] | ||
| // expect(rejected.length).toEqual(1) | ||
| // }) | ||
| // | ||
| // it('should add invalid files to rejected when multiple is false', () => { | ||
| // const dropzone = mount(<MagicDropzone accept="image/*" onDrop={dropSpy} multiple={false} />) | ||
| // dropzone.simulate('drop', { | ||
| // dataTransfer: { files: images.concat(files) } | ||
| // }) | ||
| // const rejected = dropSpy.firstCall.args[1] | ||
| // expect(rejected.length).toEqual(2) | ||
| // }) | ||
| // | ||
| // it('should allow single files to be dropped if multiple is false', () => { | ||
| // const dropzone = mount(<MagicDropzone accept="image/*" onDrop={dropSpy} multiple={false} />) | ||
| // | ||
| // dropzone.simulate('drop', { dataTransfer: { files: [images[0]] } }) | ||
| // const [accepted, rejected] = dropSpy.firstCall.args | ||
| // expect(accepted.length).toEqual(1) | ||
| // expect(rejected.length).toEqual(0) | ||
| // }) | ||
| // | ||
| // it('should take all dropped files if multiple is true', () => { | ||
| // const dropzone = mount(<MagicDropzone onDrop={dropSpy} multiple />) | ||
| // dropzone.simulate('drop', { dataTransfer: { files: images } }) | ||
| // expect(dropSpy.firstCall.args[0]).toHaveLength(2) | ||
| // expect(dropSpy.firstCall.args[0][0].name).toEqual(images[0].name) | ||
| // expect(dropSpy.firstCall.args[0][1].name).toEqual(images[1].name) | ||
| // }) | ||
| // | ||
| // it('should set this.isFileDialogActive to false', () => { | ||
| // const dropzone = mount(<MagicDropzone />) | ||
| // dropzone.instance().isFileDialogActive = true | ||
| // dropzone.simulate('drop', { dataTransfer: { files } }) | ||
| // expect(dropzone.instance().isFileDialogActive).toEqual(false) | ||
| // }) | ||
| // | ||
| // it('should always call onDrop callback with accepted and rejected arguments', () => { | ||
| // const dropzone = mount( | ||
| // <MagicDropzone | ||
| // onDrop={dropSpy} | ||
| // onDropAccepted={dropAcceptedSpy} | ||
| // onDropRejected={dropRejectedSpy} | ||
| // accept="image/*" | ||
| // /> | ||
| // ) | ||
| // dropzone.simulate('drop', { dataTransfer: { files } }) | ||
| // expect(dropSpy.callCount).toEqual(1) | ||
| // expect(dropSpy.firstCall.args[0]).toEqual([], [...files]) | ||
| // dropzone.simulate('drop', { dataTransfer: { files: images } }) | ||
| // expect(dropSpy.callCount).toEqual(2) | ||
| // expect(dropSpy.lastCall.args[0]).toEqual([...images], []) | ||
| // dropzone.simulate('drop', { | ||
| // dataTransfer: { files: files.concat(images) } | ||
| // }) | ||
| // expect(dropSpy.callCount).toEqual(3) | ||
| // expect(dropSpy.lastCall.args[0]).toEqual([...images], [...files]) | ||
| // }) | ||
| // | ||
| // it('should call onDropAccepted callback if some files were accepted', () => { | ||
| // const dropzone = mount( | ||
| // <MagicDropzone | ||
| // onDrop={dropSpy} | ||
| // onDropAccepted={dropAcceptedSpy} | ||
| // onDropRejected={dropRejectedSpy} | ||
| // accept="image/*" | ||
| // /> | ||
| // ) | ||
| // dropzone.simulate('drop', { dataTransfer: { files } }) | ||
| // expect(dropAcceptedSpy.callCount).toEqual(0) | ||
| // dropzone.simulate('drop', { dataTransfer: { files: images } }) | ||
| // expect(dropAcceptedSpy.callCount).toEqual(1) | ||
| // expect(dropAcceptedSpy.lastCall.args[0]).toEqual([...images]) | ||
| // dropzone.simulate('drop', { | ||
| // dataTransfer: { files: files.concat(images) } | ||
| // }) | ||
| // expect(dropAcceptedSpy.callCount).toEqual(2) | ||
| // expect(dropAcceptedSpy.lastCall.args[0]).toEqual([...images]) | ||
| // }) | ||
| // | ||
| // it('should call onDropRejected callback if some files were rejected', () => { | ||
| // const dropzone = mount( | ||
| // <MagicDropzone | ||
| // onDrop={dropSpy} | ||
| // onDropAccepted={dropAcceptedSpy} | ||
| // onDropRejected={dropRejectedSpy} | ||
| // accept="image/*" | ||
| // /> | ||
| // ) | ||
| // dropzone.simulate('drop', { dataTransfer: { files } }) | ||
| // expect(dropRejectedSpy.callCount).toEqual(1) | ||
| // expect(dropRejectedSpy.lastCall.args[0]).toEqual([...files]) | ||
| // dropzone.simulate('drop', { dataTransfer: { files: images } }) | ||
| // expect(dropRejectedSpy.callCount).toEqual(1) | ||
| // dropzone.simulate('drop', { | ||
| // dataTransfer: { files: files.concat(images) } | ||
| // }) | ||
| // expect(dropRejectedSpy.callCount).toEqual(2) | ||
| // expect(dropRejectedSpy.lastCall.args[0]).toEqual([...files]) | ||
| // }) | ||
| // | ||
| // it('applies the accept prop to the dropped files', () => { | ||
| // const dropzone = mount( | ||
| // <MagicDropzone | ||
| // onDrop={dropSpy} | ||
| // onDropAccepted={dropAcceptedSpy} | ||
| // onDropRejected={dropRejectedSpy} | ||
| // accept="image/*" | ||
| // /> | ||
| // ) | ||
| // dropzone.simulate('drop', { dataTransfer: { files } }) | ||
| // expect(dropSpy.callCount).toEqual(1) | ||
| // expect(dropSpy.firstCall.args[0]).toHaveLength(0) | ||
| // expect(dropSpy.firstCall.args[1]).toHaveLength(1) | ||
| // expect(dropAcceptedSpy.callCount).toEqual(0) | ||
| // expect(dropRejectedSpy.callCount).toEqual(1) | ||
| // expect(dropRejectedSpy.firstCall.args[0]).toHaveLength(1) | ||
| // }) | ||
| // | ||
| // it('applies the accept prop to the dropped images', () => { | ||
| // const dropzone = mount( | ||
| // <MagicDropzone | ||
| // onDrop={dropSpy} | ||
| // onDropAccepted={dropAcceptedSpy} | ||
| // onDropRejected={dropRejectedSpy} | ||
| // accept="image/*" | ||
| // /> | ||
| // ) | ||
| // | ||
| // dropzone.simulate('drop', { dataTransfer: { files: images } }) | ||
| // expect(dropSpy.callCount).toEqual(1) | ||
| // expect(dropSpy.firstCall.args[0]).toHaveLength(2) | ||
| // expect(dropSpy.firstCall.args[1]).toHaveLength(0) | ||
| // expect(dropAcceptedSpy.callCount).toEqual(1) | ||
| // expect(dropAcceptedSpy.firstCall.args[0]).toHaveLength(2) | ||
| // expect(dropRejectedSpy.callCount).toEqual(0) | ||
| // }) | ||
| // | ||
| // it('accepts a dropped image when Firefox provides a bogus file type', () => { | ||
| // const dropzone = mount( | ||
| // <MagicDropzone | ||
| // onDrop={dropSpy} | ||
| // onDropAccepted={dropAcceptedSpy} | ||
| // onDropRejected={dropRejectedSpy} | ||
| // accept="image/*" | ||
| // /> | ||
| // ) | ||
| // const bogusImages = [ | ||
| // { | ||
| // name: 'bogus.gif', | ||
| // size: 1234, | ||
| // type: 'application/x-moz-file' | ||
| // } | ||
| // ] | ||
| // | ||
| // dropzone.simulate('drop', { dataTransfer: { files: bogusImages } }) | ||
| // expect(dropSpy.callCount).toEqual(1) | ||
| // expect(dropSpy.firstCall.args[0]).toHaveLength(1) | ||
| // expect(dropSpy.firstCall.args[1]).toHaveLength(0) | ||
| // expect(dropAcceptedSpy.callCount).toEqual(1) | ||
| // expect(dropAcceptedSpy.firstCall.args[0]).toHaveLength(1) | ||
| // expect(dropRejectedSpy.callCount).toEqual(0) | ||
| // }) | ||
| // | ||
| // it('accepts all dropped files and images when no accept prop is specified', () => { | ||
| // const dropzone = mount( | ||
| // <MagicDropzone | ||
| // onDrop={dropSpy} | ||
| // onDropAccepted={dropAcceptedSpy} | ||
| // onDropRejected={dropRejectedSpy} | ||
| // /> | ||
| // ) | ||
| // dropzone.simulate('drop', { | ||
| // dataTransfer: { files: files.concat(images) } | ||
| // }) | ||
| // expect(dropSpy.callCount).toEqual(1) | ||
| // expect(dropSpy.firstCall.args[0]).toHaveLength(3) | ||
| // expect(dropSpy.firstCall.args[1]).toHaveLength(0) | ||
| // expect(dropAcceptedSpy.callCount).toEqual(1) | ||
| // expect(dropAcceptedSpy.firstCall.args[0]).toHaveLength(3) | ||
| // expect(dropRejectedSpy.callCount).toEqual(0) | ||
| // }) | ||
| // | ||
| // it('applies the maxSize prop to the dropped files', () => { | ||
| // const dropzone = mount( | ||
| // <MagicDropzone | ||
| // onDrop={dropSpy} | ||
| // onDropAccepted={dropAcceptedSpy} | ||
| // onDropRejected={dropRejectedSpy} | ||
| // maxSize={1111} | ||
| // /> | ||
| // ) | ||
| // | ||
| // dropzone.simulate('drop', { dataTransfer: { files } }) | ||
| // expect(dropSpy.callCount).toEqual(1) | ||
| // expect(dropSpy.firstCall.args[0]).toHaveLength(1) | ||
| // expect(dropSpy.firstCall.args[1]).toHaveLength(0) | ||
| // expect(dropAcceptedSpy.callCount).toEqual(1) | ||
| // expect(dropAcceptedSpy.firstCall.args[0]).toHaveLength(1) | ||
| // expect(dropRejectedSpy.callCount).toEqual(0) | ||
| // }) | ||
| // | ||
| // it('applies the maxSize prop to the dropped images', () => { | ||
| // const dropzone = mount( | ||
| // <MagicDropzone | ||
| // onDrop={dropSpy} | ||
| // onDropAccepted={dropAcceptedSpy} | ||
| // onDropRejected={dropRejectedSpy} | ||
| // maxSize={1111} | ||
| // /> | ||
| // ) | ||
| // dropzone.simulate('drop', { dataTransfer: { files: images } }) | ||
| // expect(dropSpy.callCount).toEqual(1) | ||
| // expect(dropSpy.firstCall.args[0]).toHaveLength(0) | ||
| // expect(dropSpy.firstCall.args[1]).toHaveLength(2) | ||
| // expect(dropAcceptedSpy.callCount).toEqual(0) | ||
| // expect(dropRejectedSpy.callCount).toEqual(1) | ||
| // expect(dropRejectedSpy.firstCall.args[0]).toHaveLength(2) | ||
| // }) | ||
| // | ||
| // it('applies the minSize prop to the dropped files', () => { | ||
| // const dropzone = mount( | ||
| // <MagicDropzone | ||
| // onDrop={dropSpy} | ||
| // onDropAccepted={dropAcceptedSpy} | ||
| // onDropRejected={dropRejectedSpy} | ||
| // minSize={1112} | ||
| // /> | ||
| // ) | ||
| // dropzone.simulate('drop', { dataTransfer: { files } }) | ||
| // expect(dropSpy.callCount).toEqual(1) | ||
| // expect(dropSpy.firstCall.args[0]).toHaveLength(0) | ||
| // expect(dropSpy.firstCall.args[1]).toHaveLength(1) | ||
| // expect(dropAcceptedSpy.callCount).toEqual(0) | ||
| // expect(dropRejectedSpy.callCount).toEqual(1) | ||
| // expect(dropRejectedSpy.firstCall.args[0]).toHaveLength(1) | ||
| // }) | ||
| // | ||
| // it('applies the minSize prop to the dropped images', () => { | ||
| // const dropzone = mount( | ||
| // <MagicDropzone | ||
| // onDrop={dropSpy} | ||
| // onDropAccepted={dropAcceptedSpy} | ||
| // onDropRejected={dropRejectedSpy} | ||
| // minSize={1112} | ||
| // /> | ||
| // ) | ||
| // dropzone.simulate('drop', { dataTransfer: { files: images } }) | ||
| // expect(dropSpy.callCount).toEqual(1) | ||
| // expect(dropSpy.firstCall.args[0]).toHaveLength(2) | ||
| // expect(dropSpy.firstCall.args[1]).toHaveLength(0) | ||
| // expect(dropAcceptedSpy.callCount).toEqual(1) | ||
| // expect(dropAcceptedSpy.firstCall.args[0]).toHaveLength(2) | ||
| // expect(dropRejectedSpy.callCount).toEqual(0) | ||
| // }) | ||
| // | ||
| // it('accepts all dropped files and images when no size prop is specified', () => { | ||
| // const dropzone = mount( | ||
| // <MagicDropzone | ||
| // onDrop={dropSpy} | ||
| // onDropAccepted={dropAcceptedSpy} | ||
| // onDropRejected={dropRejectedSpy} | ||
| // /> | ||
| // ) | ||
| // dropzone.simulate('drop', { | ||
| // dataTransfer: { files: files.concat(images) } | ||
| // }) | ||
| // expect(dropSpy.callCount).toEqual(1) | ||
| // expect(dropSpy.firstCall.args[0]).toHaveLength(3) | ||
| // expect(dropSpy.firstCall.args[1]).toHaveLength(0) | ||
| // expect(dropAcceptedSpy.callCount).toEqual(1) | ||
| // expect(dropAcceptedSpy.firstCall.args[0]).toHaveLength(3) | ||
| // expect(dropRejectedSpy.callCount).toEqual(0) | ||
| // }) | ||
| // }) | ||
| describe('preview', function () { | ||
@@ -851,3 +649,3 @@ it('should generate previews for non-images', function () { | ||
| var dropzone = (0, _enzyme.mount)(_react2.default.createElement(_MagicDropzone2.default, { onDrop: dropSpy })); | ||
| dropzone.simulate('drop', { dataTransfer: { files: files } }); | ||
| dropzone.simulate('drop', { dataTransfer: { types: ['Files'], files: files } }); | ||
| expect(Object.keys(dropSpy.firstCall.args[0][0])).toContain('preview'); | ||
@@ -860,3 +658,3 @@ expect(dropSpy.firstCall.args[0][0].preview).toContain('data://file1.pdf'); | ||
| var dropzone = (0, _enzyme.mount)(_react2.default.createElement(_MagicDropzone2.default, { onDrop: dropSpy })); | ||
| dropzone.simulate('drop', { dataTransfer: { files: images } }); | ||
| dropzone.simulate('drop', { dataTransfer: { types: ['Files'], files: images } }); | ||
| expect(Object.keys(dropSpy.firstCall.args[0][0])).toContain('preview'); | ||
@@ -870,3 +668,3 @@ expect(dropSpy.firstCall.args[0][0].preview).toContain('data://cats.gif'); | ||
| dropzone.simulate('drop', { dataTransfer: { files: ['bad_val'] } }); | ||
| dropzone.simulate('drop', { dataTransfer: { types: ['Files'], files: ['bad_val'] } }); | ||
@@ -879,4 +677,4 @@ expect(Object.keys(dropSpy.firstCall.args[1][0])).not.toContain('preview'); | ||
| var dropzone = (0, _enzyme.mount)(_react2.default.createElement(_MagicDropzone2.default, { disablePreview: true, onDrop: dropSpy })); | ||
| dropzone.simulate('drop', { dataTransfer: { files: images } }); | ||
| dropzone.simulate('drop', { dataTransfer: { files: files } }); | ||
| dropzone.simulate('drop', { dataTransfer: { types: ['Files'], files: images } }); | ||
| dropzone.simulate('drop', { dataTransfer: { types: ['Files'], files: files } }); | ||
| expect(dropSpy.callCount).toEqual(2); | ||
@@ -888,2 +686,145 @@ expect(Object.keys(dropSpy.firstCall.args[0][0])).not.toContain('preview'); | ||
| describe('onDrop links', function () { | ||
| var dropSpy = void 0; | ||
| var dropAcceptedSpy = void 0; | ||
| var dropRejectedSpy = void 0; | ||
| beforeEach(function () { | ||
| dropSpy = (0, _sinon.spy)(); | ||
| dropAcceptedSpy = (0, _sinon.spy)(); | ||
| dropRejectedSpy = (0, _sinon.spy)(); | ||
| }); | ||
| afterEach(function () { | ||
| dropSpy.reset(); | ||
| dropAcceptedSpy.reset(); | ||
| dropRejectedSpy.reset(); | ||
| }); | ||
| it('should allow text/uri-list to be dropped', function () { | ||
| var dropzone = (0, _enzyme.mount)(_react2.default.createElement(_MagicDropzone2.default, { | ||
| accept: '.jpg', | ||
| onDrop: dropSpy | ||
| })); | ||
| dropzone.simulate('drop', { | ||
| dataTransfer: { | ||
| types: ['text/uri-list'], | ||
| getData: function getData() { | ||
| return testLinks.image1; | ||
| } | ||
| } | ||
| }); | ||
| var _dropSpy$firstCall$ar2 = _slicedToArray(dropSpy.firstCall.args, 3), | ||
| accepted = _dropSpy$firstCall$ar2[0], | ||
| rejected = _dropSpy$firstCall$ar2[1], | ||
| links = _dropSpy$firstCall$ar2[2]; | ||
| expect(accepted.length).toEqual(0); | ||
| expect(rejected.length).toEqual(0); | ||
| expect(links.length).toEqual(1); | ||
| }); | ||
| it('should return an empty list if text/uri-list is dropped with no accept', function () { | ||
| var dropzone = (0, _enzyme.mount)(_react2.default.createElement(_MagicDropzone2.default, { | ||
| onDrop: dropSpy | ||
| })); | ||
| dropzone.simulate('drop', { | ||
| dataTransfer: { | ||
| types: ['text/uri-list'], | ||
| getData: function getData() { | ||
| return testLinks.image1; | ||
| } | ||
| } | ||
| }); | ||
| var _dropSpy$firstCall$ar3 = _slicedToArray(dropSpy.firstCall.args, 3), | ||
| accepted = _dropSpy$firstCall$ar3[0], | ||
| rejected = _dropSpy$firstCall$ar3[1], | ||
| links = _dropSpy$firstCall$ar3[2]; | ||
| expect(accepted.length).toEqual(0); | ||
| expect(rejected.length).toEqual(0); | ||
| expect(links.length).toEqual(0); | ||
| }); | ||
| it('should allow for muliple links to be dropped', function () { | ||
| var dropzone = (0, _enzyme.mount)(_react2.default.createElement(_MagicDropzone2.default, { | ||
| accept: '.jpg, .json', | ||
| onDrop: dropSpy | ||
| })); | ||
| dropzone.simulate('drop', { | ||
| dataTransfer: { | ||
| types: ['text/uri-list'], | ||
| getData: function getData() { | ||
| return testLinks.html2; | ||
| } | ||
| } | ||
| }); | ||
| var _dropSpy$firstCall$ar4 = _slicedToArray(dropSpy.firstCall.args, 3), | ||
| accepted = _dropSpy$firstCall$ar4[0], | ||
| rejected = _dropSpy$firstCall$ar4[1], | ||
| links = _dropSpy$firstCall$ar4[2]; | ||
| expect(accepted.length).toEqual(0); | ||
| expect(rejected.length).toEqual(0); | ||
| expect(links.length).toEqual(2); | ||
| }); | ||
| it('should allow text/html to be dropped', function () { | ||
| var dropzone = (0, _enzyme.mount)(_react2.default.createElement(_MagicDropzone2.default, { | ||
| accept: '.jpg', | ||
| onDrop: dropSpy | ||
| })); | ||
| dropzone.simulate('drop', { | ||
| dataTransfer: { | ||
| types: ['text/html'], | ||
| getData: function getData() { | ||
| return testLinks.html; | ||
| } | ||
| } | ||
| }); | ||
| var _dropSpy$firstCall$ar5 = _slicedToArray(dropSpy.firstCall.args, 3), | ||
| accepted = _dropSpy$firstCall$ar5[0], | ||
| rejected = _dropSpy$firstCall$ar5[1], | ||
| links = _dropSpy$firstCall$ar5[2]; | ||
| expect(accepted.length).toEqual(0); | ||
| expect(rejected.length).toEqual(0); | ||
| expect(links.length).toEqual(1); | ||
| }); | ||
| it('should only allow links of valid extension', function () { | ||
| var dropzone = (0, _enzyme.mount)(_react2.default.createElement(_MagicDropzone2.default, { | ||
| accept: '.jpg', | ||
| onDrop: dropSpy, | ||
| multiple: false | ||
| })); | ||
| dropzone.simulate('drop', { | ||
| dataTransfer: { | ||
| types: ['text/uri-list'], | ||
| getData: function getData() { | ||
| return testLinks.json; | ||
| } | ||
| } | ||
| }); | ||
| var _dropSpy$firstCall$ar6 = _slicedToArray(dropSpy.firstCall.args, 3), | ||
| accepted = _dropSpy$firstCall$ar6[0], | ||
| rejected = _dropSpy$firstCall$ar6[1], | ||
| links = _dropSpy$firstCall$ar6[2]; | ||
| expect(accepted.length).toEqual(0); | ||
| expect(rejected.length).toEqual(0); | ||
| expect(links.length).toEqual(0); | ||
| }); | ||
| }); | ||
| describe('onCancel', function () { | ||
@@ -970,5 +911,5 @@ it('should not invoke onFileDialogCancel everytime window receives focus', function (done) { | ||
| }, | ||
| function (_ref4) { | ||
| var isDragActive = _ref4.isDragActive, | ||
| isDragReject = _ref4.isDragReject; | ||
| function (_ref3) { | ||
| var isDragActive = _ref3.isDragActive, | ||
| isDragReject = _ref3.isDragReject; | ||
@@ -1064,3 +1005,3 @@ if (isDragReject) return _react2.default.createElement(InnerDragRejected, null); | ||
| var fn = function fn() { | ||
| return dropzone.simulate('drop', { dataTransfer: { files: [] } }); | ||
| return dropzone.simulate('drop', { dataTransfer: { types: ['Files'], files: [] } }); | ||
| }; | ||
@@ -1067,0 +1008,0 @@ expect(fn).not.toThrow(); |
@@ -46,3 +46,18 @@ 'use strict'; | ||
| dataTransfer: { | ||
| items: files | ||
| items: [{ | ||
| kind: 'file', | ||
| name: 'file1.pdf', | ||
| size: 1111, | ||
| type: 'application/pdf' | ||
| }, { | ||
| kind: 'file', | ||
| name: 'cats.gif', | ||
| size: 1234, | ||
| type: 'image/gif' | ||
| }, { | ||
| kind: 'file', | ||
| name: 'dogs.jpg', | ||
| size: 2345, | ||
| type: 'image/jpeg' | ||
| }] | ||
| } | ||
@@ -49,0 +64,0 @@ }; |
@@ -19,2 +19,4 @@ 'use strict'; | ||
| function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } | ||
| function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } } | ||
@@ -42,7 +44,3 @@ | ||
| return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = MagicDropzone.__proto__ || Object.getPrototypeOf(MagicDropzone)).call.apply(_ref, [this].concat(args))), _this), _this.state = { | ||
| draggedFiles: [], | ||
| acceptedFiles: [], | ||
| rejectedFiles: [] | ||
| }, _this.isFileDialogActive = false, _this.composeHandlers = function (handler) { | ||
| return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = MagicDropzone.__proto__ || Object.getPrototypeOf(MagicDropzone)).call.apply(_ref, [this].concat(args))), _this), _this.isFileDialogActive = false, _this.composeHandlers = function (handler) { | ||
| var disabled = _this.props.disabled; | ||
@@ -59,3 +57,2 @@ | ||
| } | ||
| e.preventDefault(); | ||
@@ -79,18 +76,4 @@ _this.dragTargets = []; | ||
| _this.setState({ | ||
| isDragActive: true, // Do not rely on files for the drag state. It doesn't work in Safari. | ||
| draggedFiles: (0, _utils.getDataTransferItems)(e) | ||
| }); | ||
| var draggedFiles = (0, _utils.getDataTransferItems)(e); | ||
| var dt = e.dataTransfer; | ||
| // If dt.types doesn't contain 'Files' show the text input. | ||
| if (!(dt.types && ( | ||
| // Sometimes we need to use "contains" instead of "indexOf" | ||
| dt.types.indexOf ? dt.types.indexOf('Files') !== -1 : dt.types.contains('Files')))) { | ||
| _this.setState({ isLink: true }); | ||
| } else { | ||
| _this.setState({ isLink: false }); | ||
| } | ||
| if (onDragEnter) { | ||
@@ -127,9 +110,2 @@ onDragEnter.call(_this, e); | ||
| // Clear dragging files state | ||
| _this.setState({ | ||
| isLink: false, | ||
| isDragActive: false, | ||
| draggedFiles: [] | ||
| }); | ||
| if (onDragLeave) { | ||
@@ -156,3 +132,4 @@ onDragLeave.call(_this, e); | ||
| if (_this.state.isLink) { | ||
| // If there aren't any files, it might be a link. | ||
| if (fileList.length === 0) { | ||
| _this.onLink(e); | ||
@@ -172,3 +149,3 @@ return; | ||
| if (process.env.NODE_ENV !== 'production') { | ||
| console.error('Failed to generate preview for file', file, err); | ||
| // console.error('Failed to generate preview for file', file, err) | ||
| } | ||
@@ -202,13 +179,2 @@ } | ||
| } | ||
| // Clear files value | ||
| _this.draggedFiles = null; | ||
| // Reset drag state | ||
| _this.setState({ | ||
| isDragActive: false, | ||
| draggedFiles: [], | ||
| acceptedFiles: acceptedFiles, | ||
| rejectedFiles: rejectedFiles | ||
| }); | ||
| }, _this.onClick = function (e) { | ||
@@ -268,5 +234,8 @@ var _this$props2 = _this.props, | ||
| _this.setState({ | ||
| isLink: false | ||
| }); | ||
| if (!accept) { | ||
| if (onDrop) { | ||
| onDrop([], [], [], e); | ||
| } | ||
| return; | ||
| } | ||
@@ -277,2 +246,9 @@ var extensionReg = /(\.[^.]+)(?=[,]|$)/gi; | ||
| if (!extensions) { | ||
| if (onDrop) { | ||
| onDrop([], [], [], e); | ||
| } | ||
| return; | ||
| } | ||
| var replace = '(https://|http://)((?!http).)*(' + extensions.join('|') + ')'; | ||
@@ -305,11 +281,2 @@ var urlReg = new RegExp(replace, 'gi'); | ||
| } | ||
| }, _this.renderChildren = function (children, isDragActive, isDragAccept, isDragReject) { | ||
| if (typeof children === 'function') { | ||
| return children(_extends({}, _this.state, { | ||
| isDragActive: isDragActive, | ||
| isDragAccept: isDragAccept, | ||
| isDragReject: isDragReject | ||
| })); | ||
| } | ||
| return children; | ||
| }, _temp), _possibleConstructorReturn(_this, _ret); | ||
@@ -346,2 +313,8 @@ } | ||
| } | ||
| // After much internal debate I decided to not distinguish that the files will | ||
| // be accepted. It is not widely supported and we only get mime-type info back | ||
| // Also, users won't be able to react fast enough to do anything if the | ||
| // overlay says WAIT THAT FILE ISN'T GOING TO WORK | ||
| }, { | ||
@@ -368,16 +341,8 @@ key: 'open', | ||
| disabled = _props.disabled, | ||
| multiple = _props.multiple; | ||
| var _state = this.state, | ||
| isDragActive = _state.isDragActive, | ||
| draggedFiles = _state.draggedFiles; | ||
| multiple = _props.multiple, | ||
| restOfProps = _objectWithoutProperties(_props, ['accept', 'children', 'disabled', 'multiple']); | ||
| var filesCount = draggedFiles.length; | ||
| var isMultipleAllowed = multiple || filesCount <= 1; | ||
| var isDragAccept = filesCount > 0 && (0, _utils.allFilesAccepted)(draggedFiles, accept); | ||
| var isDragReject = filesCount > 0 && (!isDragAccept || !isMultipleAllowed); | ||
| return _react2.default.createElement( | ||
| 'div', | ||
| { | ||
| _extends({}, restOfProps, { | ||
| onClick: this.composeHandlers(this.onClick), | ||
@@ -391,4 +356,4 @@ onDragStart: this.composeHandlers(this.onDragStart), | ||
| 'aria-disabled': disabled | ||
| }, | ||
| this.renderChildren(children, isDragActive, isDragAccept, isDragReject), | ||
| }), | ||
| children, | ||
| _react2.default.createElement('input', { | ||
@@ -395,0 +360,0 @@ disabled: disabled, |
@@ -22,3 +22,5 @@ 'use strict'; | ||
| // but Chrome implements some drag store, which is accesible via dataTransfer.items | ||
| dataTransferItemsList = dt.items; | ||
| return Array.prototype.slice.call(dt.items).filter(function (item) { | ||
| return item.kind === 'file'; | ||
| }); | ||
| } | ||
@@ -25,0 +27,0 @@ } else if (event.target && event.target.files) { |
| { | ||
| "name": "react-magic-dropzone", | ||
| "version": "0.0.3", | ||
| "version": "1.0.0", | ||
| "description": "Magically drag and drop files/links, built for React", | ||
@@ -5,0 +5,0 @@ "main": "build/index.js", |
@@ -48,3 +48,3 @@ # ✨Magic Dropzone [](https://twitter.com/intent/tweet?text=Drag-and-drop%20files%20or%20urls!%20Built%20for%20React:&url=https://github.com/bourdakos1/react-magic-dropzone&hashtags=react,component,dropzone,developers) | ||
| [](https://codesandbox.io/s/jvorp575k9) | ||
| [](https://codesandbox.io/s/y200pqy4pz) | ||
@@ -51,0 +51,0 @@ ## License |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Number of low quality alerts
- decreased by-100%
0
- Number of medium supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-0.59%
427344
- Lines of code
- decreased by-1.01%
11444
No dependency changes