Support renderFileInfo on <Uploader> (#302)

rsuite · Dec 11, 2018 · 64f866f · 64f866f
1 parent f9fb55a
commit 64f866f
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 7 deletions.
diff --git a/src/UploadFileItem.js b/src/UploadFileItem.js
@@ -26,7 +26,8 @@ type Props = {
   onReupload?: (file: FileType, event: SyntheticEvent<*>) => void,
   className?: string,
   maxPreviewFileSize: number,
-  classPrefix?: string
+  classPrefix?: string,
+  renderFileInfo?: (file: FileType, fileElement: React.Node) => React.Node
 };
 
 type State = {
@@ -204,13 +205,16 @@ class UploadFileItem extends React.Component<Props, State> {
   }
 
   renderFilePanel() {
-    const { file } = this.props;
+    const { file, renderFileInfo } = this.props;
+    const fileElement = (
+      <a role="presentation" className={this.addPrefix('title')} onClick={this.handlePreview}>
+        {file.name}
+      </a>
+    );
     return (
       <div className={this.addPrefix('panel')}>
         <div className={this.addPrefix('content')}>
-          <a role="presentation" className={this.addPrefix('title')} onClick={this.handlePreview}>
-            {file.name}
-          </a>
+          {renderFileInfo ? renderFileInfo(file, fileElement) : fileElement}
           {this.renderErrorStatus()}
           {this.renderFileSize()}
         </div>

diff --git a/src/Uploader.js b/src/Uploader.js
@@ -75,7 +75,8 @@ type Props = {
   onRemove?: (file: FileType) => void,
   maxPreviewFileSize?: number,
   style?: Object,
-  toggleComponentClass?: React.ElementType
+  toggleComponentClass?: React.ElementType,
+  renderFileInfo?: (file: FileType, fileElement: React.Node) => React.Node
 };
 
 type State = {
@@ -304,7 +305,13 @@ class Uploader extends React.Component<Props, State> {
   };
 
   renderFileItems() {
-    const { disabledFileItem, listType, onPreview, maxPreviewFileSize } = this.props;
+    const {
+      disabledFileItem,
+      listType,
+      onPreview,
+      maxPreviewFileSize,
+      renderFileInfo
+    } = this.props;
     const fileList = this.getFileList();
 
     return (
@@ -319,6 +326,7 @@ class Uploader extends React.Component<Props, State> {
             onPreview={onPreview}
             onReupload={this.handleReupload}
             onCancel={this.handleRemoveFile}
+            renderFileInfo={renderFileInfo}
           />
         ))}
       </div>

diff --git a/test/UploadFileItemSpec.js b/test/UploadFileItemSpec.js
@@ -101,6 +101,19 @@ describe('UploadFileItem', () => {
     assert.include(findDOMNode(instance).className, 'custom');
   });
 
+  it('Should output a custom file name', () => {
+    const instance = ReactTestUtils.renderIntoDocument(
+      <UploadFileItem
+        file={file}
+        className="custom"
+        renderFileInfo={file => {
+          return <div className="file-info">{file.name}</div>;
+        }}
+      />
+    );
+    assert.include(findDOMNode(instance).querySelector('.file-info').innerText, 'a');
+  });
+
   it('Should have a custom style', () => {
     const fontSize = '12px';
     const instance = ReactTestUtils.renderIntoDocument(