Merge pull request #87 from fuxun2008/feat/fileEdit

feat: 新增文件在线编辑按钮。

index.html

@@ -99,7 +99,10 @@ <h3>Sample9 - 包裹UI-2</h3>
 
     <div class="sample" id="sample9"></div>
 
+    <!--Sample 10-->
+    <h3>Sample10 - 文件预览</h3>
 
+    <div class="sample" id="sample10"></div>
 
     <footer class="site-footer">
         <span class="site-footer-owner">

src/DefaultFileItem.js

@@ -20,15 +20,21 @@ export default class DefaultFileItem extends React.Component {
     this.props.onDownloadFile(file, url);
   }
 
+  onEditFile(file, url, e) {
+    e.preventDefault();
+    this.props.onEditFile(file, url);
+  }
+
   render() {
     const me = this;
-    const { prefixCls, locale, file, mode, isOnlyImg, isVisual, readStyle, readOnly } = me.props;
+    const { prefixCls, locale, file, mode, isOnlyImg, isVisual, readStyle, readOnly, onlineEdit } = me.props;
     let response = util.simpleDeepCopy(file.response);
     if (file.type === 'upload') {
       response = response.content ? (response.content.data ? response.content.data : response.content) : response.data;
     }
     const downloadUrl = response.downloadUrl === undefined ? (response.file || response.url) : response.downloadUrl;
     const previewUrl = response.previewUrl === undefined ? downloadUrl : response.previewUrl;
+    const editUrl = response.editUrl === undefined ? downloadUrl : response.editUrl;
     let readOnlyStyle;
     if (isOnlyImg) {
       const type = isVisual ? `${prefixCls}-fileitem-visual` : `${prefixCls}-fileitem-img`;
@@ -92,6 +98,7 @@ export default class DefaultFileItem extends React.Component {
           </label>
           <div className="field-status">
             {previewUrl ? <a className={`${prefixCls}-action preview-action`} onClick={me.onShowFile.bind(this, file, previewUrl)} target="_blank" href={previewUrl}><Icon name="fangda" /></a> : null}
+            {editUrl && onlineEdit ? <a className={`${prefixCls}-action edit-action`} onClick={me.onEditFile.bind(this, file, editUrl)} target="_blank" href={editUrl}><Icon name="caozuo-bianji" /></a> : null}
             {downloadUrl ? <a className={`${prefixCls}-action download-action`} onClick={me.onDownloadFile.bind(this, file, downloadUrl)} target="_blank" download href={downloadUrl}><Icon name="xiazai" /></a> : null}
             {response.canRemove !== false && !readOnly ? <a className={`${prefixCls}-action remove-action`} onClick={this.onCancel.bind(this, file)}><Icon name="shanchu" /></a> : null}
           </div>

src/FileItem.js

@@ -94,12 +94,14 @@ export default class FileItem extends React.Component {
       </div>);
     } else if (this.props.mode === 'nw') {
       let downloadUrl,
-        previewUrl;
+        previewUrl,
+        editUrl;
       if (this.state.status === 'success') {
         const json = this.file.response.getJson();
         const url = util.getUrl(json);
         downloadUrl = url.downloadUrl;
         previewUrl = url.previewUrl;
+        editUrl = url.editUrl;
       }
       if (this.props.isOnlyImg) {
         if (!this.props.isVisual) {
@@ -137,6 +139,7 @@ export default class FileItem extends React.Component {
           <label className="field-status">
             {this.state.status === 'error' ? <a className={`${prefixCls}-status status-error`}>{i18n[locale].upload_failed}</a> : null}
             {this.state.status === 'success' && previewUrl ? <a className={`${prefixCls}-action`} target="_blank" href={previewUrl}>{i18n[locale].preview}</a> : null}
+            {this.state.status === 'success' && editUrl && this.props.onlineEdit ? <a className={`${prefixCls}-action`} target="_blank" href={editUrl}>{i18n[locale].edit}</a> : null}
             {this.state.status === 'success' && downloadUrl ? <a className={`${prefixCls}-action`} target="_blank" href={downloadUrl} download>{i18n[locale].download}</a> : null}
             {(this.state.status === 'success' || this.state.status === 'error') ? <a className={`${prefixCls}-action close-action`} onClick={this.onCancel.bind(this)}><Icon name="shanchu" /></a> : <a className="${prefixCls}-action terminal-action" onClick={this.onCancel.bind(this)}><Icon name="guanbi" /></a>}
           </label>

src/FileList.js

@@ -22,6 +22,7 @@ export default class FileList extends React.Component {
     isOnlyImg: PropTypes.bool,
     showErrFile: PropTypes.bool,
     readOnly: PropTypes.bool,
+    onlineEdit: PropTypes.bool,
     fileList: PropTypes.array,
     core: PropTypes.any,
   };
@@ -101,6 +102,15 @@ export default class FileList extends React.Component {
     window.open(url)
   }
 
+  onEditFile(file, url, current) {
+    const { onEditFile } = this.props;
+    if (onEditFile) {
+      onEditFile(file, url, current);
+      return;
+    }
+    window.open(url);
+  }
+
   renderDefaultFileItems() {
     const arr = [];
     const fileList = this.props.fileList || [];
@@ -116,8 +126,10 @@ export default class FileList extends React.Component {
             isOnlyImg={this.props.isOnlyImg}
             readOnly={this.props.readOnly}
             isVisual={this.props.isVisual}
+            onlineEdit={this.props.onlineEdit}
             onShowFile={(currentFile, url) => { this.onShowFile(currentFile, url, index); }}
             onDownloadFile={(currentFile, url) => { this.onDownloadFile(currentFile, url, index); }}
+            onEditFile={(currentFile, url) => { this.onEditFile(currentFile, url, index); }}
             onCancel={this.props.removeFileFromList.bind(this)}
           />);
       }
@@ -136,6 +148,7 @@ export default class FileList extends React.Component {
             key={file.id}
             file={file}
             mode={this.props.mode}
+            onlineEdit={this.props.onlineEdit}
             isOnlyImg={this.props.isOnlyImg}
             isVisual={this.props.isVisual}
             interval={this.props.interval}

src/Uploader.js

@@ -41,6 +41,7 @@ class Uploader extends React.Component {
     disabled: false,
     hideUploadIcon: false,
     isOnlyImg: false,
+    onlineEdit: false,
     showErrFile: true,
   };
 
@@ -64,6 +65,7 @@ class Uploader extends React.Component {
     hideUploadIcon: PropTypes.bool,
     isOnlyImg: PropTypes.bool,
     showErrFile: PropTypes.bool,
+    onlineEdit: PropTypes.bool,
     children: PropTypes.any,
   };
 
@@ -331,6 +333,7 @@ class Uploader extends React.Component {
         isVisual={this.props.isVisual}
         isOnlyImg={this.props.isOnlyImg}
         readOnly={this.props.readOnly}
+        onlineEdit={this.props.onlineEdit}
         showErrFile={this.props.showErrFile}
         mode="nw"
         fileList={me.state.fileList}

src/Uploader.less

@@ -614,12 +614,15 @@
       margin-top: 6px;
     }
     .field-info-wrap {
-      display: block;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
       padding: 0;
       .field-info {
+        flex: 1;
         display: inline-block;
         margin-left: 18px;
-        width: calc(~"100% - 138px");
+        // width: calc(~"100% - 138px");
         overflow: hidden;
         text-overflow: ellipsis;
         .kuma-loading {

src/locale.js

@@ -2,6 +2,7 @@ const locale = {
   'en-us': {
     download: 'download',
     preview: 'preview',
+    edit: 'edit',
     remove: 'remove',
     retry: 'retry',
     upload: 'upload',
@@ -13,6 +14,7 @@ const locale = {
   'pl-pl': {
     download: 'pobierz',
     preview: 'podgląd',
+    edit: 'edytuj',
     remove: 'usuń',
     retry: 'powtórz',
     upload: 'wyślij',
@@ -24,6 +26,7 @@ const locale = {
   'zh-cn': {
     download: '下载',
     preview: '预览',
+    edit: '编辑',
     remove: '移除',
     retry: '重传',
     upload: '上传',