mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 05:28:20 +08:00
676de29eb4
* rtl demo change en-us description * change bundlesize css limit * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * fix pagination.tsx compile error * RTL: button and button-group * RTL: Steps component * fix rtl demo style * fix input suffix icon alignment * fix select component arrow issue * RTL: form component * add pagination rtl test * fix test lint error * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * some fixes to RTL components * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * fix switch component text rtl issue * fix table grouped header text-align * add rtl support to whole demo with RTL button * Update rtl demo responsive * RTL: page-header component * RTL: typography component * RTL: Dropdown (Partial) * update config-provider doc * RTL: input component * RTL: select component * RTL: switch component * RTL: tree component * fix rtl demo lint * rtl demo change en-us description * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * RTL: button and button-group * RTL: Steps component * fix rtl demo style * fix input suffix icon alignment * RTL: form component * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * add rtl support to whole demo with RTL button * fix lost changes after rebase * fix lint errors * RTL: Transfer Component * RTL: upload component * RTL: update avatar demo * RTL: comment component * RTL: collapse component * RTL: carousel component * update snapshots * RTL: Card component * RTL: descriptions component * RTL: Empty component * RTL: list component * RTL: slider component * slider component import/order * add shared rtlTest * RTL: Statistic component * RTL: tooltip components * RTL: popover component * RTL: timeline component * RTL: tag component * RTL: alert component * RTL: drawer component * RTL: Tab component * change direction definition * RTL: progress component * input.tsx, remove duplicate after rebase * fix demo.less after rebase * fix ant-row-rtl after rebase * fix upload issues in rtl * badge rtl demo margin fix * fix: tabs with icon margin * fix: radio-wrapper margin * fix: table component after rebase * fix: centered modal text-align * update slider snapshot * RTL: popconfirm component * RTL: back-top component * RTL: spin component * RTL: result component * RTL: skeleton component * RTL: menu component * RTL: time-picker component * RTL: calendar component * RTL: date-picker component * RTL: home page * update snapshots * test: add auto-complete rtl test * test: add avatar component rtl tests * test: add badge component rtl tests * test: add breadcrumb component rtl tests * test: add button components rtl tests * test: add card component rtl tests * test: add carousel component rtl tests * test: add cascader component rtl tests * test: add checkbox component rtl tests * test: add collapse component rtl tests * test: add comment component rtl tests * test: add dropdown component rtl tests * test: add empty component rtl tests * test: add form component rtl tests * test: add grid component rtl tests * test: add input component rtl tests * test: add search component rtl tests * test: add input-number component rtl tests * test: add layout component rtl tests * test: add list component rtl tests * test: add mentions component rtl tests * test: add modal component rtl tests * test: add page-header component rtl tests * test: add pagination component rtl tests * test: add radio component rtl tests * test: add rate component rtl tests * test: add select component rtl tests * test: add slider component rtl tests * test: add steps component rtl tests * test: add switch component rtl tests * test: add table component rtl tests * test: add transfer component rtl tests * test: add tree component rtl tests * test: add tree-select component rtl tests * test: add typography component rtl tests * test: add upload component rtl tests * test: add affix component rtl tests * update calendar tests * increase css file maxSize * update snapshots * remove workflows to allow push * remove duplicate reverse prop from slider * fix: remove table demo from config-provider * fix: remove table demo from config-provider * fix lint error * Added direction property to ConfigProvider * cascader rtl tests added * update config-provider doc * RTL: grid system * RTL: input component * RTL: switch component * fix rtl demo lint * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * fix pagination.tsx compile error * RTL: button and button-group * RTL: Steps component * fix rtl demo style * RTL: form component * add pagination rtl test * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * add rtl support to whole demo with RTL button * RTL: input component * RTL: select component * RTL: switch component * RTL: tree component * fix rtl demo lint * rtl demo change en-us description * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * RTL: button and button-group * RTL: Steps component * fix rtl demo style * fix input suffix icon alignment * RTL: form component * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * add rtl support to whole demo with RTL button * input.tsx, remove duplicate after rebase * fix ant-row-rtl after rebase * update snapshots * test: add cascader component rtl tests * test: add pagination component rtl tests * update calendar tests * update snapshots * fix: remove table demo from config-provider * fix: remove table demo from config-provider * fix lint error * update direction.md icons * dropdown and cascader default placement in rtl * update snapshots * fix lint errors * remove duplicate import * update snapshots * update snapshot * update calendar snapshot * update snapshots * integrate with new rc-picker * update snapshots * fix lint errors * update snapshot * update snapshots * update snapshots * update snapshots :| * update snapshots * fix compile error. * fix typo after rebase * update snapshots * remove workflows to allow push * update snapshots * update snapshots * fix dist error * front-page css fix * update snapshots * fix lint and test issues * restore cascader index.less * update snapshots * fix logo in rtl and demo controls * ci errors * resolve steps/index.tsx conflicts * tooltip family demo remove inline style * resolve table/Table.tsx conflicts * resolve modal/Modal.tsx conflicts * resolve cascader/index.tsx conflicts * add workflows from upstream * update snapshots * revert logo to default * fix codebox demo direction of placements * resolve tooltip overlayClassName conflicts * update snapshots * update popover test * fix: cascader miss popupClassName * fix: fix select missing dropdownClassName * chore: Update snapshot * chore: Adjust menu use rtl logic * docs: Update demo line color Co-authored-by: 二货机器人 <smith3816@gmail.com>
279 lines
8.4 KiB
TypeScript
279 lines
8.4 KiB
TypeScript
import * as React from 'react';
|
|
import Animate from 'rc-animate';
|
|
import classNames from 'classnames';
|
|
import {
|
|
LoadingOutlined,
|
|
PaperClipOutlined,
|
|
PictureTwoTone,
|
|
FileTwoTone,
|
|
EyeOutlined,
|
|
DeleteOutlined,
|
|
DownloadOutlined,
|
|
} from '@ant-design/icons';
|
|
|
|
import { UploadListProps, UploadFile, UploadListType } from './interface';
|
|
import { previewImage, isImageUrl } from './utils';
|
|
import Tooltip from '../tooltip';
|
|
import Progress from '../progress';
|
|
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
|
|
|
export default class UploadList extends React.Component<UploadListProps, any> {
|
|
static defaultProps = {
|
|
listType: 'text' as UploadListType, // or picture
|
|
progressAttr: {
|
|
strokeWidth: 2,
|
|
showInfo: false,
|
|
},
|
|
showRemoveIcon: true,
|
|
showDownloadIcon: true,
|
|
showPreviewIcon: true,
|
|
previewFile: previewImage,
|
|
};
|
|
|
|
componentDidUpdate() {
|
|
const { listType, items, previewFile } = this.props;
|
|
if (listType !== 'picture' && listType !== 'picture-card') {
|
|
return;
|
|
}
|
|
(items || []).forEach(file => {
|
|
if (
|
|
typeof document === 'undefined' ||
|
|
typeof window === 'undefined' ||
|
|
!(window as any).FileReader ||
|
|
!(window as any).File ||
|
|
!(file.originFileObj instanceof File || file.originFileObj instanceof Blob) ||
|
|
file.thumbUrl !== undefined
|
|
) {
|
|
return;
|
|
}
|
|
file.thumbUrl = '';
|
|
if (previewFile) {
|
|
previewFile(file.originFileObj as File).then((previewDataUrl: string) => {
|
|
// Need append '' to avoid dead loop
|
|
file.thumbUrl = previewDataUrl || '';
|
|
this.forceUpdate();
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
handlePreview = (file: UploadFile, e: React.SyntheticEvent<HTMLElement>) => {
|
|
const { onPreview } = this.props;
|
|
if (!onPreview) {
|
|
return;
|
|
}
|
|
e.preventDefault();
|
|
return onPreview(file);
|
|
};
|
|
|
|
handleDownload = (file: UploadFile) => {
|
|
const { onDownload } = this.props;
|
|
if (typeof onDownload === 'function') {
|
|
onDownload(file);
|
|
} else if (file.url) {
|
|
window.open(file.url);
|
|
}
|
|
};
|
|
|
|
handleClose = (file: UploadFile) => {
|
|
const { onRemove } = this.props;
|
|
if (onRemove) {
|
|
onRemove(file);
|
|
}
|
|
};
|
|
|
|
renderUploadList = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
|
|
const {
|
|
prefixCls: customizePrefixCls,
|
|
items = [],
|
|
listType,
|
|
showPreviewIcon,
|
|
showRemoveIcon,
|
|
showDownloadIcon,
|
|
locale,
|
|
progressAttr,
|
|
} = this.props;
|
|
const prefixCls = getPrefixCls('upload', customizePrefixCls);
|
|
const list = items.map(file => {
|
|
let progress;
|
|
let icon = file.status === 'uploading' ? <LoadingOutlined /> : <PaperClipOutlined />;
|
|
|
|
if (listType === 'picture' || listType === 'picture-card') {
|
|
if (listType === 'picture-card' && file.status === 'uploading') {
|
|
icon = <div className={`${prefixCls}-list-item-uploading-text`}>{locale.uploading}</div>;
|
|
} else if (!file.thumbUrl && !file.url) {
|
|
icon = <PictureTwoTone className={`${prefixCls}-list-item-thumbnail`} />;
|
|
} else {
|
|
const thumbnail = isImageUrl(file) ? (
|
|
<img
|
|
src={file.thumbUrl || file.url}
|
|
alt={file.name}
|
|
className={`${prefixCls}-list-item-image`}
|
|
/>
|
|
) : (
|
|
<FileTwoTone className={`${prefixCls}-list-item-icon`} />
|
|
);
|
|
icon = (
|
|
<a
|
|
className={`${prefixCls}-list-item-thumbnail`}
|
|
onClick={e => this.handlePreview(file, e)}
|
|
href={file.url || file.thumbUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
{thumbnail}
|
|
</a>
|
|
);
|
|
}
|
|
}
|
|
|
|
if (file.status === 'uploading') {
|
|
// show loading icon if upload progress listener is disabled
|
|
const loadingProgress =
|
|
'percent' in file ? (
|
|
<Progress type="line" {...progressAttr} percent={file.percent} />
|
|
) : null;
|
|
|
|
progress = (
|
|
<div className={`${prefixCls}-list-item-progress`} key="progress">
|
|
{loadingProgress}
|
|
</div>
|
|
);
|
|
}
|
|
const infoUploadingClass = classNames({
|
|
[`${prefixCls}-list-item`]: true,
|
|
[`${prefixCls}-list-item-${file.status}`]: true,
|
|
[`${prefixCls}-list-item-list-type-${listType}`]: true,
|
|
});
|
|
const linkProps =
|
|
typeof file.linkProps === 'string' ? JSON.parse(file.linkProps) : file.linkProps;
|
|
|
|
const removeIcon = showRemoveIcon ? (
|
|
<DeleteOutlined title={locale.removeFile} onClick={() => this.handleClose(file)} />
|
|
) : null;
|
|
|
|
const downloadIcon =
|
|
showDownloadIcon && file.status === 'done' ? (
|
|
<DownloadOutlined title={locale.downloadFile} onClick={() => this.handleDownload(file)} />
|
|
) : null;
|
|
const downloadOrDelete = listType !== 'picture-card' && (
|
|
<span
|
|
key="download-delete"
|
|
className={`${prefixCls}-list-item-card-actions ${
|
|
listType === 'picture' ? 'picture' : ''
|
|
}`}
|
|
>
|
|
{downloadIcon && <a title={locale.downloadFile}>{downloadIcon}</a>}
|
|
{removeIcon && <a title={locale.removeFile}>{removeIcon}</a>}
|
|
</span>
|
|
);
|
|
const listItemNameClass = classNames({
|
|
[`${prefixCls}-list-item-name`]: true,
|
|
[`${prefixCls}-list-item-name-icon-count-${
|
|
[downloadIcon, removeIcon].filter(x => x).length
|
|
}`]: true,
|
|
});
|
|
const preview = file.url
|
|
? [
|
|
<a
|
|
key="view"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={listItemNameClass}
|
|
title={file.name}
|
|
{...linkProps}
|
|
href={file.url}
|
|
onClick={e => this.handlePreview(file, e)}
|
|
>
|
|
{file.name}
|
|
</a>,
|
|
downloadOrDelete,
|
|
]
|
|
: [
|
|
<span
|
|
key="view"
|
|
className={listItemNameClass}
|
|
onClick={e => this.handlePreview(file, e)}
|
|
title={file.name}
|
|
>
|
|
{file.name}
|
|
</span>,
|
|
downloadOrDelete,
|
|
];
|
|
const style: React.CSSProperties = {
|
|
pointerEvents: 'none',
|
|
opacity: 0.5,
|
|
};
|
|
const previewIcon = showPreviewIcon ? (
|
|
<a
|
|
href={file.url || file.thumbUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
style={file.url || file.thumbUrl ? undefined : style}
|
|
onClick={e => this.handlePreview(file, e)}
|
|
title={locale.previewFile}
|
|
>
|
|
<EyeOutlined />
|
|
</a>
|
|
) : null;
|
|
|
|
const actions = listType === 'picture-card' && file.status !== 'uploading' && (
|
|
<span className={`${prefixCls}-list-item-actions`}>
|
|
{previewIcon}
|
|
{file.status === 'done' && downloadIcon}
|
|
{removeIcon}
|
|
</span>
|
|
);
|
|
|
|
let message;
|
|
if (file.response && typeof file.response === 'string') {
|
|
message = file.response;
|
|
} else {
|
|
message = (file.error && file.error.statusText) || locale.uploadError;
|
|
}
|
|
const iconAndPreview = (
|
|
<span>
|
|
{icon}
|
|
{preview}
|
|
</span>
|
|
);
|
|
const dom = (
|
|
<div className={infoUploadingClass}>
|
|
<div className={`${prefixCls}-list-item-info`}>{iconAndPreview}</div>
|
|
{actions}
|
|
<Animate transitionName="fade" component="">
|
|
{progress}
|
|
</Animate>
|
|
</div>
|
|
);
|
|
const listContainerNameClass = classNames({
|
|
[`${prefixCls}-list-picture-card-container`]: listType === 'picture-card',
|
|
});
|
|
return (
|
|
<div key={file.uid} className={listContainerNameClass}>
|
|
{file.status === 'error' ? <Tooltip title={message}>{dom}</Tooltip> : <span>{dom}</span>}
|
|
</div>
|
|
);
|
|
});
|
|
const listClassNames = classNames({
|
|
[`${prefixCls}-list`]: true,
|
|
[`${prefixCls}-list-${listType}`]: true,
|
|
[`${prefixCls}-list-rtl`]: direction === 'rtl',
|
|
});
|
|
const animationDirection = listType === 'picture-card' ? 'animate-inline' : 'animate';
|
|
return (
|
|
<Animate
|
|
transitionName={`${prefixCls}-${animationDirection}`}
|
|
component="div"
|
|
className={listClassNames}
|
|
>
|
|
{list}
|
|
</Animate>
|
|
);
|
|
};
|
|
|
|
render() {
|
|
return <ConfigConsumer>{this.renderUploadList}</ConfigConsumer>;
|
|
}
|
|
}
|