feat: rename allowPasteUpload to pastable

Author: madocto

README.md

@@ -84,7 +84,7 @@ React.render(<Upload />, container);
 |customRequest | function | null | provide an override for the default xhr behavior for additional customization|
 |withCredentials | boolean | false | ajax upload with cookie send |
 |openFileDialogOnClick | boolean | true | useful for drag only upload as it does not trigger on enter key or click event |
-|allowPasteUpload | boolean | false | support paste upload |
+|pastable | boolean | false | support paste upload |
 
 #### onError arguments
 

docs/examples/paste.tsx

@@ -6,7 +6,7 @@ const props = {
   action: '/upload.do',
   type: 'drag',
   accept: '.png',
-  allowPasteUpload: true,
+  pastable: true,
   beforeUpload(file) {
     console.log('beforeUpload', file.name);
   },

docs/examples/pasteDirectory.tsx

@@ -7,7 +7,7 @@ const props = {
   type: 'drag',
   accept: '.png',
   directory: true,
-  allowPasteUpload: true,
+  pastable: true,
   beforeUpload(file) {
     console.log('beforeUpload', file.name);
   },

src/AjaxUploader.tsx

@@ -103,28 +103,38 @@ class AjaxUploader extends Component<UploadProps> {
     }
   };
 
-  onPrePaste(e: ClipboardEvent) {
-    const { allowPasteUpload } = this.props;
+  onPrePaste = (e: ClipboardEvent) => {
+    const { pastable } = this.props;
 
-    if (allowPasteUpload) {
+    if (pastable) {
       this.onFileDropOrPaste(e);
     }
-  }
+  };
 
   componentDidMount() {
     this._isMounted = true;
 
-    const { allowPasteUpload } = this.props;
+    const { pastable } = this.props;
 
-    if (allowPasteUpload) {
-      document.addEventListener('paste', this.onPrePaste.bind(this));
+    if (pastable) {
+      document.addEventListener('paste', this.onPrePaste);
     }
   }
 
   componentWillUnmount() {
     this._isMounted = false;
     this.abort();
-    document.removeEventListener('paste', this.onPrePaste.bind(this));
+    document.removeEventListener('paste', this.onPrePaste);
+  }
+
+  componentDidUpdate(prevProps: UploadProps) {
+    const { pastable } = this.props;
+
+    if (pastable && !prevProps.pastable) {
+      document.addEventListener('paste', this.onPrePaste);
+    } else if (!pastable && prevProps.pastable) {
+      document.removeEventListener('paste', this.onPrePaste);
+    }
   }
 
   uploadFiles = (files: File[]) => {

src/interface.tsx

@@ -44,7 +44,7 @@ export interface UploadProps
     input?: React.CSSProperties;
   };
   hasControlInside?: boolean;
-  allowPasteUpload?: boolean;
+  pastable?: boolean;
 }
 
 export interface UploadProgressEvent extends Partial<ProgressEvent> {

tests/uploader.spec.tsx

@@ -350,7 +350,7 @@ describe('uploader', () => {
     });
 
     it('paste to upload', done => {
-      const { container } = render(<Upload {...props} allowPasteUpload />);
+      const { container } = render(<Upload {...props} pastable />);
       const input = container.querySelector('input')!;
 
       const files = [
@@ -406,7 +406,7 @@ describe('uploader', () => {
     });
 
     it('paste files with multiple false', done => {
-      const { container } = render(<Upload {...props} multiple={false} allowPasteUpload />);
+      const { container } = render(<Upload {...props} multiple={false} pastable />);
       const input = container.querySelector('input')!;
       const files = [
         new File([''], 'success.png', { type: 'image/png' }),
@@ -780,7 +780,7 @@ describe('uploader', () => {
     });
 
     it('paste directory', done => {
-      const { container } = render(<Upload {...props} allowPasteUpload />);
+      const { container } = render(<Upload {...props} pastable />);
       const rcUpload = container.querySelector('.rc-upload')!;
       const files = {
         name: 'foo',