diff --git a/releasenotes/notes/Support-Progress-And-Abort-For-Download-cf85833aaac25fec.yaml b/releasenotes/notes/Support-Progress-And-Abort-For-Download-cf85833aaac25fec.yaml new file mode 100644 index 00000000..6f8d46b6 --- /dev/null +++ b/releasenotes/notes/Support-Progress-And-Abort-For-Download-cf85833aaac25fec.yaml @@ -0,0 +1,10 @@ +--- +features: + - | + `Feature #1990355 `_: + + Support progress add abort when use modal form to download file: + + * Support showing download progress when download file. + + * Support abort request when download file. \ No newline at end of file diff --git a/src/components/Form/index.jsx b/src/components/Form/index.jsx index d4d88a2e..8fdba4d8 100644 --- a/src/components/Form/index.jsx +++ b/src/components/Form/index.jsx @@ -268,6 +268,10 @@ export default class BaseForm extends React.Component { return null; } + get progressType() { + return 'upload'; + } + getRightExtraSpan() { return { left: 18, @@ -368,7 +372,11 @@ export default class BaseForm extends React.Component { onCancel = () => { if (this.isSubmitting && this.cancel) { this.cancel(); - Notify.success(t('Cancel upload successfully.')); + const message = + this.progressType === 'download' + ? t('Cancel download successfully.') + : t('Cancel upload successfully.'); + Notify.success(message); } }; @@ -478,6 +486,21 @@ export default class BaseForm extends React.Component { }; }; + onDownloadProgress = (progressEvent) => { + const { loaded, total } = progressEvent; + const percent = Math.floor((loaded / total) * 100); + this.setState({ + percent, + }); + }; + + getDownloadRequestConf = () => { + return { + onDownloadProgress: this.onDownloadProgress, + cancelToken: this.cancelToken, + }; + }; + checkContextValue() { const { context } = this.props; const names = this.nameForStateUpdate; @@ -653,9 +676,13 @@ export default class BaseForm extends React.Component { return; } const { percent } = this.state; + const message = + this.progressType === 'download' + ? t('Download progress') + : t('Upload progress'); return (
- {t('Upload progress')} + {message}
diff --git a/src/components/Form/index.less b/src/components/Form/index.less index 1bd60545..47cc91eb 100644 --- a/src/components/Form/index.less +++ b/src/components/Form/index.less @@ -4,7 +4,7 @@ position: relative; height: 100%; padding-top: @body-padding; - overflow: hidden; + // overflow: hidden; background-color: #fff; :global { diff --git a/src/locales/en.json b/src/locales/en.json index 0e2e2833..6c6761df 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -297,6 +297,7 @@ "Cancel Download": "Cancel Download", "Cancel Select": "Cancel Select", "Cancel Transfer": "Cancel Transfer", + "Cancel download successfully.": "Cancel download successfully.", "Cancel upload successfully.": "Cancel upload successfully.", "Capacity & Type": "Capacity & Type", "Capacity (GiB)": "Capacity (GiB)", @@ -773,6 +774,7 @@ "Download all data": "Download all data", "Download canceled!": "Download canceled!", "Download current data": "Download current data", + "Download progress": "Download progress", "Downloading": "Downloading", "Draining": "Draining", "Driver": "Driver", diff --git a/src/locales/zh.json b/src/locales/zh.json index cfbfabec..5656b916 100644 --- a/src/locales/zh.json +++ b/src/locales/zh.json @@ -297,6 +297,7 @@ "Cancel Download": "取消下载", "Cancel Select": "取消选择", "Cancel Transfer": "取消云硬盘转让", + "Cancel download successfully.": "取消下载成功。", "Cancel upload successfully.": "取消上传成功。", "Capacity & Type": "容量和类型", "Capacity (GiB)": "容量 (GiB)", @@ -773,6 +774,7 @@ "Download all data": "下载所有数据", "Download canceled!": "下载已取消!", "Download current data": "下载当前数据", + "Download progress": "下载进度", "Downloading": "下载中", "Draining": "满载", "Driver": "驱动",