Skip to content

Commit

Permalink
fix: #24519 Upload delete icon cannot be navigate via keyboard (#24615)
Browse files Browse the repository at this point in the history 
* fix: Upload delete icon cannot be navigate via keyboard

* update Upload style dependencies
  • Loading branch information
@morenyang
morenyang committed Jun 1, 2020
1 parent 68a185a commit 19ca646
Show file tree
Hide file tree
Showing 6 changed files with 476 additions and 362 deletions.
42 changes: 24 additions & 18 deletions components/config-provider/__tests__/__snapshots__/components.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37627,15 +37627,16 @@ exports[`ConfigProvider components Upload configProvider 1`] = `
<span
class="config-upload-list-item-card-actions "
>
<a
<button
class="config-btn config-upload-list-item-card-actions-btn config-btn-text config-btn-sm config-btn-icon-only"
title="Remove file"
type="button"
>
<span
aria-label="delete"
class="anticon anticon-delete"
role="img"
tabindex="-1"
title="Remove file"
>
<svg
aria-hidden="true"
Expand All @@ -37652,7 +37653,7 @@ exports[`ConfigProvider components Upload configProvider 1`] = `
/>
</svg>
</span>
</a>
</button>
</span>
</span>
</div>
Expand Down Expand Up @@ -37730,15 +37731,16 @@ exports[`ConfigProvider components Upload configProvider componentSize large 1`]
<span
class="config-upload-list-item-card-actions "
>
<a
<button
class="config-btn config-upload-list-item-card-actions-btn config-btn-text config-btn-sm config-btn-icon-only"
title="Remove file"
type="button"
>
<span
aria-label="delete"
class="anticon anticon-delete"
role="img"
tabindex="-1"
title="Remove file"
>
<svg
aria-hidden="true"
Expand All @@ -37755,7 +37757,7 @@ exports[`ConfigProvider components Upload configProvider componentSize large 1`]
/>
</svg>
</span>
</a>
</button>
</span>
</span>
</div>
Expand Down Expand Up @@ -37833,15 +37835,16 @@ exports[`ConfigProvider components Upload configProvider componentSize middle 1`
<span
class="config-upload-list-item-card-actions "
>
<a
<button
class="config-btn config-upload-list-item-card-actions-btn config-btn-text config-btn-sm config-btn-icon-only"
title="Remove file"
type="button"
>
<span
aria-label="delete"
class="anticon anticon-delete"
role="img"
tabindex="-1"
title="Remove file"
>
<svg
aria-hidden="true"
Expand All @@ -37858,7 +37861,7 @@ exports[`ConfigProvider components Upload configProvider componentSize middle 1`
/>
</svg>
</span>
</a>
</button>
</span>
</span>
</div>
Expand Down Expand Up @@ -37936,15 +37939,16 @@ exports[`ConfigProvider components Upload configProvider virtual and dropdownMat
<span
class="ant-upload-list-item-card-actions "
>
<a
<button
class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
title="Remove file"
type="button"
>
<span
aria-label="delete"
class="anticon anticon-delete"
role="img"
tabindex="-1"
title="Remove file"
>
<svg
aria-hidden="true"
Expand All @@ -37961,7 +37965,7 @@ exports[`ConfigProvider components Upload configProvider virtual and dropdownMat
/>
</svg>
</span>
</a>
</button>
</span>
</span>
</div>
Expand Down Expand Up @@ -38039,15 +38043,16 @@ exports[`ConfigProvider components Upload normal 1`] = `
<span
class="ant-upload-list-item-card-actions "
>
<a
<button
class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
title="Remove file"
type="button"
>
<span
aria-label="delete"
class="anticon anticon-delete"
role="img"
tabindex="-1"
title="Remove file"
>
<svg
aria-hidden="true"
Expand All @@ -38064,7 +38069,7 @@ exports[`ConfigProvider components Upload normal 1`] = `
/>
</svg>
</span>
</a>
</button>
</span>
</span>
</div>
Expand Down Expand Up @@ -38142,15 +38147,16 @@ exports[`ConfigProvider components Upload prefixCls 1`] = `
<span
class="ant-upload-list-item-card-actions "
>
<a
<button
class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
title="Remove file"
type="button"
>
<span
aria-label="delete"
class="anticon anticon-delete"
role="img"
tabindex="-1"
title="Remove file"
>
<svg
aria-hidden="true"
Expand All @@ -38167,7 +38173,7 @@ exports[`ConfigProvider components Upload prefixCls 1`] = `
/>
</svg>
</span>
</a>
</button>
</span>
</span>
</div>
Expand Down
71 changes: 39 additions & 32 deletions components/upload/UploadList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,13 @@ import EyeOutlined from '@ant-design/icons/EyeOutlined';
import DeleteOutlined from '@ant-design/icons/DeleteOutlined';
import DownloadOutlined from '@ant-design/icons/DownloadOutlined';

import { cloneElement, isValidElement } from '../_util/reactNode';
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';
import { cloneElement, isValidElement } from '../_util/reactNode';
import Button, { ButtonProps } from '../button';

export default class UploadList extends React.Component<UploadListProps, any> {
static defaultProps = {
Expand Down Expand Up @@ -98,23 +99,36 @@ export default class UploadList extends React.Component<UploadListProps, any> {
return icon;
};

handleActionIconRender = (customIcon: React.ReactNode, callback: () => void, title?: string) => {
handleActionIconRender = (
customIcon: React.ReactNode,
callback: () => void,
prefixCls: string,
title?: string,
) => {
const btnProps: ButtonProps = {
type: 'text',
size: 'small',
title,
onClick: (e: React.MouseEvent<HTMLElement>) => {
callback();
if (isValidElement(customIcon) && customIcon.props.onClick) {
customIcon.props.onClick(e);
}
},
className: `${prefixCls}-list-item-card-actions-btn`,
};
if (isValidElement(customIcon)) {
return cloneElement(customIcon, {
const btnIcon = cloneElement(customIcon, {
...customIcon.props,
title,
onClick: (e: React.MouseEvent<HTMLElement>) => {
callback();
if (customIcon.props.onClick) {
customIcon.props.onClick(e);
}
},
onClick: () => {},
});

return <Button {...btnProps} icon={btnIcon} />;
}
return (
<span title={title} onClick={callback}>
{customIcon}
</span>
<Button {...btnProps}>
<span>{customIcon}</span>
</Button>
);
};

Expand Down Expand Up @@ -195,28 +209,21 @@ export default class UploadList extends React.Component<UploadListProps, any> {
typeof file.linkProps === 'string' ? JSON.parse(file.linkProps) : file.linkProps;

const removeIcon = showRemoveIcon
? (customRemoveIcon &&
this.handleActionIconRender(
customRemoveIcon,
() => this.handleClose(file),
locale.removeFile,
)) || (
<DeleteOutlined title={locale.removeFile} onClick={() => this.handleClose(file)} />
? this.handleActionIconRender(
customRemoveIcon || <DeleteOutlined />,
() => this.handleClose(file),
prefixCls,
locale.removeFile,
)
: null;

const downloadIcon =
showDownloadIcon && file.status === 'done'
? (customDownloadIcon &&
this.handleActionIconRender(
customDownloadIcon,
() => this.handleDownload(file),
locale.downloadFile,
)) || (
<DownloadOutlined
title={locale.downloadFile}
onClick={() => this.handleDownload(file)}
/>
? this.handleActionIconRender(
customDownloadIcon || <DownloadOutlined />,
() => this.handleDownload(file),
prefixCls,
locale.downloadFile,
)
: null;
const downloadOrDelete = listType !== 'picture-card' && (
Expand All @@ -226,8 +233,8 @@ export default class UploadList extends React.Component<UploadListProps, any> {
listType === 'picture' ? 'picture' : ''
}`}
>
{downloadIcon && <a title={locale.downloadFile}>{downloadIcon}</a>}
{removeIcon && <a title={locale.removeFile}>{removeIcon}</a>}
{downloadIcon}
{removeIcon}
</span>
);
const listItemNameClass = classNames({
Expand Down

0 comments on commit 19ca646

Please sign in to comment.