fix: 修正样式hover抖动和禁用只读态不显示编辑按钮。

uxcore · Apr 9, 2020 · fdb816e · fdb816e
1 parent 87efe57
commit fdb816e
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 10 deletions.
diff --git a/demo/index.jsx b/demo/index.jsx
@@ -212,7 +212,7 @@ const fileList3 = [
     ext: 'ppt',
     fileType: 'application/vnd.ms-powerpoint',
     id: '',
-    name: '1c28404f9a6648d7c1c708a1284ac850ac020472.ppt',
+    name: '1c28404f9a6648d7c1c708a1284ac850ac0204721c28404f9a6648d7c1c708a1284ac850ac020472.ppt',
     previewUrl: 'https://yida.alibaba-inc.com/inst/preview?appType=APP_IW48H4Z2XO8T8HRC5I0X&fileName=1c28404f9a6648d7c1c708a1284ac850ac020472.ppt&fileSize=146432&downloadUrl=1408e60a-e2ce-4620-b288-d0570429b9cc.ppt',
     response: {
       content: {
@@ -230,12 +230,12 @@ const fileList3 = [
         isDeleted: 'n',
         memo: '',
         modifier: '162333',
-        name: '1c28404f9a6648d7c1c708a1284ac850ac020472.ppt',
+        name: '1c28404f9a6648d7c1c708a1284ac850ac0204721c28404f9a6648d7c1c708a1284ac850ac020472.ppt',
         needWaterMark: false,
         open: 'n',
         path: '1408e60a-e2ce-4620-b288-d0570429b9cc.ppt',
-        previewUrl: 'https://yida.alibaba-inc.com/inst/preview?appType=APP_IW48H4Z2XO8T8HRC5I0X&fileName=1c28404f9a6648d7c1c708a1284ac850ac020472.ppt&fileSize=146432&downloadUrl=1408e60a-e2ce-4620-b288-d0570429b9cc.ppt',
-        editUrl: 'https://yida.alibaba-inc.com/inst/preview?appType=APP_IW48H4Z2XO8T8HRC5I0X&fileName=1c28404f9a6648d7c1c708a1284ac850ac020472.ppt&fileSize=146432&downloadUrl=1408e60a-e2ce-4620-b288-d0570429b9cc.ppt',
+        previewUrl: 'https://yida.alibaba-inc.com/inst/preview?appType=APP_IW48H4Z2XO8T8HRC5I0X&fileName=1c28404f9a6648d7c1c708a1284ac850ac0204721c28404f9a6648d7c1c708a1284ac850ac020472.ppt&fileSize=146432&downloadUrl=1408e60a-e2ce-4620-b288-d0570429b9cc.ppt',
+        editUrl: 'https://yida.alibaba-inc.com/inst/preview?appType=APP_IW48H4Z2XO8T8HRC5I0X&fileName=1c28404f9a6648d7c1c708a1284ac850ac0204721c28404f9a6648d7c1c708a1284ac850ac020472.ppt&fileSize=146432&downloadUrl=1408e60a-e2ce-4620-b288-d0570429b9cc.ppt',
         procInstId: '',
         shardKey: '',
         size: 146432,
@@ -784,6 +784,7 @@ class Demo10 extends React.Component {
         sizeLimit="5120kb"
         accept="*.pdf, *.doc, *.docx, *.xlsx, *.ppt, *.pptx"
         readOnly={false}
+        disabled={false}
         multiple
         onlineEdit
         isVisual={false}

diff --git a/src/DefaultFileItem.js b/src/DefaultFileItem.js
@@ -27,7 +27,7 @@ export default class DefaultFileItem extends React.Component {
 
   render() {
     const me = this;
-    const { prefixCls, locale, file, mode, isOnlyImg, isVisual, readStyle, readOnly, onlineEdit } = me.props;
+    const { prefixCls, locale, file, mode, isOnlyImg, isVisual, readOnly, disabled, 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;
@@ -98,7 +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}
+            {editUrl && onlineEdit && !readOnly && !disabled ? <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>

diff --git a/src/FileList.js b/src/FileList.js
@@ -22,6 +22,7 @@ export default class FileList extends React.Component {
     isOnlyImg: PropTypes.bool,
     showErrFile: PropTypes.bool,
     readOnly: PropTypes.bool,
+    disabled: PropTypes.bool,
     onlineEdit: PropTypes.bool,
     fileList: PropTypes.array,
     core: PropTypes.any,
@@ -125,6 +126,7 @@ export default class FileList extends React.Component {
             mode={this.props.mode}
             isOnlyImg={this.props.isOnlyImg}
             readOnly={this.props.readOnly}
+            disabled={this.props.disabled}
             isVisual={this.props.isVisual}
             onlineEdit={this.props.onlineEdit}
             onShowFile={(currentFile, url) => { this.onShowFile(currentFile, url, index); }}

diff --git a/src/Uploader.js b/src/Uploader.js
@@ -333,6 +333,7 @@ class Uploader extends React.Component {
         isVisual={this.props.isVisual}
         isOnlyImg={this.props.isOnlyImg}
         readOnly={this.props.readOnly}
+        disabled={disabled}
         onlineEdit={this.props.onlineEdit}
         showErrFile={this.props.showErrFile}
         mode="nw"
@@ -353,7 +354,7 @@ class Uploader extends React.Component {
 
     const clazzName = classNames(className, {
       [`${prefixCls}er`]: true,
-      [`${prefixCls}er-disabled`]: disabled
+      [`${prefixCls}er-disabled`]: disabled,
     });
     return (
       <div className={clazzName}>

diff --git a/src/Uploader.less b/src/Uploader.less
@@ -615,13 +615,13 @@
     }
     .field-info-wrap {
       display: flex;
-      justify-content: space-between;
-      align-items: center;
+      justify-content: initial;
+      align-items: initial;
       padding: 0;
       .field-info {
         flex: 1;
         display: inline-block;
-        margin-left: 18px;
+        margin-left: 15px;
         // width: calc(~"100% - 138px");
         overflow: hidden;
         text-overflow: ellipsis;