mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 20:19:44 +08:00
refactor: Move Upload from less to css in js (#34528)
* refactor: Upload to CSS-in-JS * chore: clean up outdated code * chore: add FIXME * revert useless change of UploadList * fix: upload animation
This commit is contained in:
afc163
GitHub
parent
274c1f7fa3
commit
08d1a71ff4
@ -13,6 +13,7 @@ import type { ComponentToken as BackTopComponentToken } from '../../back-top/sty
|
||||
import type { ComponentToken as DatePickerComponentToken } from '../../date-picker/style';
|
||||
import type { ComponentToken as TimelineComponentToken } from '../../timeline/style';
|
||||
import type { ComponentToken as MenuComponentToken } from '../../menu/style';
|
||||
import type { ComponentToken as UploadComponentToken } from '../../upload/style';
|
||||
import type { ComponentToken as CarouselComponentToken } from '../../carousel/style';
|
||||
|
||||
export const PresetColors = [
|
||||
@ -88,6 +89,7 @@ export interface OverrideToken {
|
||||
Steps?: {};
|
||||
Menu?: MenuComponentToken;
|
||||
Layout?: {};
|
||||
Upload?: UploadComponentToken;
|
||||
}
|
||||
|
||||
/** Final token which contains the components level override */
|
||||
|
||||
@ -73,9 +73,9 @@ export function derivative(token: SeedToken): DerivativeToken {
|
||||
...colorPalettes,
|
||||
|
||||
// motion
|
||||
motionDurationFast: `${motionBase + motionUnit * 1}s`,
|
||||
motionDurationMid: `${motionBase + motionUnit * 2}s`,
|
||||
motionDurationSlow: `${motionBase + motionUnit * 3}s`,
|
||||
motionDurationFast: `${(motionBase + motionUnit * 1).toFixed(1)}s`,
|
||||
motionDurationMid: `${(motionBase + motionUnit * 2).toFixed(1)}s`,
|
||||
motionDurationSlow: `${(motionBase + motionUnit * 3).toFixed(1)}s`,
|
||||
|
||||
// font
|
||||
fontSizes: fontSizes.map(fs => fs.size),
|
||||
|
||||
@ -132,7 +132,7 @@ const genCardGridStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
1px 1px 0 0 ${borderColorSplit},
|
||||
1px 0 0 0 ${borderColorSplit} inset,
|
||||
0 1px 0 0 ${borderColorSplit} inset;
|
||||
transition: all ${token.motionDurationSlow}s
|
||||
transition: all ${token.motionDurationSlow}
|
||||
`, // FIXME: hardcode in v4
|
||||
|
||||
'&-hoverable:hover': {
|
||||
@ -352,7 +352,7 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
|
||||
[`${componentCls}-hoverable`]: {
|
||||
cursor: 'pointer',
|
||||
transition: `box-shadow ${token.motionDurationSlow}s, border-color ${token.motionDurationSlow}s`,
|
||||
transition: `box-shadow ${token.motionDurationSlow}, border-color ${token.motionDurationSlow}`,
|
||||
|
||||
'&:hover': {
|
||||
borderColor: cardHoverableHoverBorder,
|
||||
|
||||
@ -37300,10 +37300,10 @@ exports[`ConfigProvider components TreeSelect prefixCls 1`] = `
|
||||
|
||||
exports[`ConfigProvider components Upload configProvider 1`] = `
|
||||
<span
|
||||
class=""
|
||||
class="config-upload-wrapper"
|
||||
>
|
||||
<div
|
||||
class="config-upload config-upload-select config-upload-select-text"
|
||||
class="config-upload config-upload-select"
|
||||
>
|
||||
<span
|
||||
class="config-upload"
|
||||
@ -37322,19 +37322,13 @@ exports[`ConfigProvider components Upload configProvider 1`] = `
|
||||
class="config-upload-list config-upload-list-text"
|
||||
>
|
||||
<div
|
||||
class="config-upload-list-text-container"
|
||||
class="config-upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="config-upload-list-item config-upload-list-item-done config-upload-list-item-list-type-text"
|
||||
class="config-upload-list-item config-upload-list-item-done"
|
||||
>
|
||||
<div
|
||||
class="config-upload-list-item-info"
|
||||
>
|
||||
<span
|
||||
class="config-upload-span"
|
||||
>
|
||||
<div
|
||||
class="config-upload-text-icon"
|
||||
class="config-upload-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="paper-clip"
|
||||
@ -37363,10 +37357,10 @@ exports[`ConfigProvider components Upload configProvider 1`] = `
|
||||
xxx.png
|
||||
</span>
|
||||
<span
|
||||
class="config-upload-list-item-card-actions"
|
||||
class="config-upload-list-item-actions"
|
||||
>
|
||||
<button
|
||||
class="config-btn config-btn-text config-btn-sm config-btn-icon-only config-upload-list-item-card-actions-btn"
|
||||
class="config-btn config-btn-text config-btn-sm config-btn-icon-only config-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
@ -37392,8 +37386,6 @@ exports[`ConfigProvider components Upload configProvider 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -37402,10 +37394,10 @@ exports[`ConfigProvider components Upload configProvider 1`] = `
|
||||
|
||||
exports[`ConfigProvider components Upload configProvider componentSize large 1`] = `
|
||||
<span
|
||||
class=""
|
||||
class="config-upload-wrapper"
|
||||
>
|
||||
<div
|
||||
class="config-upload config-upload-select config-upload-select-text"
|
||||
class="config-upload config-upload-select"
|
||||
>
|
||||
<span
|
||||
class="config-upload"
|
||||
@ -37424,19 +37416,13 @@ exports[`ConfigProvider components Upload configProvider componentSize large 1`]
|
||||
class="config-upload-list config-upload-list-text"
|
||||
>
|
||||
<div
|
||||
class="config-upload-list-text-container"
|
||||
class="config-upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="config-upload-list-item config-upload-list-item-done config-upload-list-item-list-type-text"
|
||||
class="config-upload-list-item config-upload-list-item-done"
|
||||
>
|
||||
<div
|
||||
class="config-upload-list-item-info"
|
||||
>
|
||||
<span
|
||||
class="config-upload-span"
|
||||
>
|
||||
<div
|
||||
class="config-upload-text-icon"
|
||||
class="config-upload-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="paper-clip"
|
||||
@ -37465,10 +37451,10 @@ exports[`ConfigProvider components Upload configProvider componentSize large 1`]
|
||||
xxx.png
|
||||
</span>
|
||||
<span
|
||||
class="config-upload-list-item-card-actions"
|
||||
class="config-upload-list-item-actions"
|
||||
>
|
||||
<button
|
||||
class="config-btn config-btn-text config-btn-sm config-btn-icon-only config-upload-list-item-card-actions-btn"
|
||||
class="config-btn config-btn-text config-btn-sm config-btn-icon-only config-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
@ -37494,8 +37480,6 @@ exports[`ConfigProvider components Upload configProvider componentSize large 1`]
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -37504,10 +37488,10 @@ exports[`ConfigProvider components Upload configProvider componentSize large 1`]
|
||||
|
||||
exports[`ConfigProvider components Upload configProvider componentSize middle 1`] = `
|
||||
<span
|
||||
class=""
|
||||
class="config-upload-wrapper"
|
||||
>
|
||||
<div
|
||||
class="config-upload config-upload-select config-upload-select-text"
|
||||
class="config-upload config-upload-select"
|
||||
>
|
||||
<span
|
||||
class="config-upload"
|
||||
@ -37526,19 +37510,13 @@ exports[`ConfigProvider components Upload configProvider componentSize middle 1`
|
||||
class="config-upload-list config-upload-list-text"
|
||||
>
|
||||
<div
|
||||
class="config-upload-list-text-container"
|
||||
class="config-upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="config-upload-list-item config-upload-list-item-done config-upload-list-item-list-type-text"
|
||||
class="config-upload-list-item config-upload-list-item-done"
|
||||
>
|
||||
<div
|
||||
class="config-upload-list-item-info"
|
||||
>
|
||||
<span
|
||||
class="config-upload-span"
|
||||
>
|
||||
<div
|
||||
class="config-upload-text-icon"
|
||||
class="config-upload-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="paper-clip"
|
||||
@ -37567,10 +37545,10 @@ exports[`ConfigProvider components Upload configProvider componentSize middle 1`
|
||||
xxx.png
|
||||
</span>
|
||||
<span
|
||||
class="config-upload-list-item-card-actions"
|
||||
class="config-upload-list-item-actions"
|
||||
>
|
||||
<button
|
||||
class="config-btn config-btn-text config-btn-sm config-btn-icon-only config-upload-list-item-card-actions-btn"
|
||||
class="config-btn config-btn-text config-btn-sm config-btn-icon-only config-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
@ -37596,8 +37574,6 @@ exports[`ConfigProvider components Upload configProvider componentSize middle 1`
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -37606,10 +37582,10 @@ exports[`ConfigProvider components Upload configProvider componentSize middle 1`
|
||||
|
||||
exports[`ConfigProvider components Upload configProvider virtual and dropdownMatchSelectWidth 1`] = `
|
||||
<span
|
||||
class=""
|
||||
class="ant-upload-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-upload ant-upload-select ant-upload-select-text"
|
||||
class="ant-upload ant-upload-select"
|
||||
>
|
||||
<span
|
||||
class="ant-upload"
|
||||
@ -37628,19 +37604,13 @@ exports[`ConfigProvider components Upload configProvider virtual and dropdownMat
|
||||
class="ant-upload-list ant-upload-list-text"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-text-container"
|
||||
class="ant-upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
|
||||
class="ant-upload-list-item ant-upload-list-item-done"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-info"
|
||||
>
|
||||
<span
|
||||
class="ant-upload-span"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-text-icon"
|
||||
class="ant-upload-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="paper-clip"
|
||||
@ -37669,10 +37639,10 @@ exports[`ConfigProvider components Upload configProvider virtual and dropdownMat
|
||||
xxx.png
|
||||
</span>
|
||||
<span
|
||||
class="ant-upload-list-item-card-actions"
|
||||
class="ant-upload-list-item-actions"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
@ -37698,8 +37668,6 @@ exports[`ConfigProvider components Upload configProvider virtual and dropdownMat
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -37708,10 +37676,10 @@ exports[`ConfigProvider components Upload configProvider virtual and dropdownMat
|
||||
|
||||
exports[`ConfigProvider components Upload normal 1`] = `
|
||||
<span
|
||||
class=""
|
||||
class="ant-upload-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-upload ant-upload-select ant-upload-select-text"
|
||||
class="ant-upload ant-upload-select"
|
||||
>
|
||||
<span
|
||||
class="ant-upload"
|
||||
@ -37730,19 +37698,13 @@ exports[`ConfigProvider components Upload normal 1`] = `
|
||||
class="ant-upload-list ant-upload-list-text"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-text-container"
|
||||
class="ant-upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
|
||||
class="ant-upload-list-item ant-upload-list-item-done"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-info"
|
||||
>
|
||||
<span
|
||||
class="ant-upload-span"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-text-icon"
|
||||
class="ant-upload-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="paper-clip"
|
||||
@ -37771,10 +37733,10 @@ exports[`ConfigProvider components Upload normal 1`] = `
|
||||
xxx.png
|
||||
</span>
|
||||
<span
|
||||
class="ant-upload-list-item-card-actions"
|
||||
class="ant-upload-list-item-actions"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
@ -37800,8 +37762,6 @@ exports[`ConfigProvider components Upload normal 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -37810,10 +37770,10 @@ exports[`ConfigProvider components Upload normal 1`] = `
|
||||
|
||||
exports[`ConfigProvider components Upload prefixCls 1`] = `
|
||||
<span
|
||||
class=""
|
||||
class="prefix-Upload-wrapper"
|
||||
>
|
||||
<div
|
||||
class="prefix-Upload prefix-Upload-select prefix-Upload-select-text"
|
||||
class="prefix-Upload prefix-Upload-select"
|
||||
>
|
||||
<span
|
||||
class="prefix-Upload"
|
||||
@ -37832,19 +37792,13 @@ exports[`ConfigProvider components Upload prefixCls 1`] = `
|
||||
class="prefix-Upload-list prefix-Upload-list-text"
|
||||
>
|
||||
<div
|
||||
class="prefix-Upload-list-text-container"
|
||||
class="prefix-Upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="prefix-Upload-list-item prefix-Upload-list-item-done prefix-Upload-list-item-list-type-text"
|
||||
class="prefix-Upload-list-item prefix-Upload-list-item-done"
|
||||
>
|
||||
<div
|
||||
class="prefix-Upload-list-item-info"
|
||||
>
|
||||
<span
|
||||
class="prefix-Upload-span"
|
||||
>
|
||||
<div
|
||||
class="prefix-Upload-text-icon"
|
||||
class="prefix-Upload-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="paper-clip"
|
||||
@ -37873,10 +37827,10 @@ exports[`ConfigProvider components Upload prefixCls 1`] = `
|
||||
xxx.png
|
||||
</span>
|
||||
<span
|
||||
class="prefix-Upload-list-item-card-actions"
|
||||
class="prefix-Upload-list-item-actions"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only prefix-Upload-list-item-card-actions-btn"
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only prefix-Upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
@ -37902,8 +37856,6 @@ exports[`ConfigProvider components Upload prefixCls 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -16360,10 +16360,10 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
class="ant-upload-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-upload ant-upload-select ant-upload-select-picture"
|
||||
class="ant-upload ant-upload-select"
|
||||
>
|
||||
<span
|
||||
class="ant-upload"
|
||||
@ -16440,7 +16440,9 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
class="ant-upload-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-upload ant-upload-drag"
|
||||
>
|
||||
|
||||
@ -7421,10 +7421,10 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
class="ant-upload-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-upload ant-upload-select ant-upload-select-picture"
|
||||
class="ant-upload ant-upload-select"
|
||||
>
|
||||
<span
|
||||
class="ant-upload"
|
||||
@ -7501,7 +7501,9 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
class="ant-upload-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-upload ant-upload-drag"
|
||||
>
|
||||
|
||||
@ -179,10 +179,10 @@ exports[`renders ./components/space/demo/base.md extend context correctly 1`] =
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
class="ant-upload-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-upload ant-upload-select ant-upload-select-text"
|
||||
class="ant-upload ant-upload-select"
|
||||
>
|
||||
<span
|
||||
class="ant-upload"
|
||||
|
||||
@ -179,10 +179,10 @@ exports[`renders ./components/space/demo/base.md correctly 1`] = `
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
class="ant-upload-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-upload ant-upload-select ant-upload-select-text"
|
||||
class="ant-upload ant-upload-select"
|
||||
>
|
||||
<span
|
||||
class="ant-upload"
|
||||
|
||||
@ -19,6 +19,7 @@ import LocaleReceiver from '../locale-provider/LocaleReceiver';
|
||||
import defaultLocale from '../locale/default';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import devWarning from '../_util/devWarning';
|
||||
import useStyle from './style';
|
||||
|
||||
const LIST_IGNORE = `__LIST_IGNORE_${Date.now()}__`;
|
||||
|
||||
@ -322,6 +323,8 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
|
||||
delete rcUploadProps.id;
|
||||
}
|
||||
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||
|
||||
const renderUploadList = (button?: React.ReactNode, buttonVisible?: boolean) =>
|
||||
showUploadList ? (
|
||||
<LocaleReceiver componentName="Upload" defaultLocale={defaultLocale.Upload}>
|
||||
@ -365,6 +368,10 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
|
||||
button
|
||||
);
|
||||
|
||||
const rtlCls = {
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
};
|
||||
|
||||
if (type === 'drag') {
|
||||
const dragCls = classNames(
|
||||
prefixCls,
|
||||
@ -375,10 +382,10 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
|
||||
[`${prefixCls}-disabled`]: disabled,
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
},
|
||||
className,
|
||||
hashId,
|
||||
);
|
||||
return (
|
||||
<span>
|
||||
return wrapSSR(
|
||||
<span className={classNames(`${prefixCls}-wrapper`, rtlCls, className, hashId)}>
|
||||
<div
|
||||
className={dragCls}
|
||||
onDrop={onFileDrop}
|
||||
@ -391,15 +398,12 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
|
||||
</RcUpload>
|
||||
</div>
|
||||
{renderUploadList()}
|
||||
</span>
|
||||
</span>,
|
||||
);
|
||||
}
|
||||
|
||||
const uploadButtonCls = classNames(prefixCls, {
|
||||
[`${prefixCls}-select`]: true,
|
||||
[`${prefixCls}-select-${listType}`]: true,
|
||||
const uploadButtonCls = classNames(prefixCls, `${prefixCls}-select`, {
|
||||
[`${prefixCls}-disabled`]: disabled,
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
});
|
||||
|
||||
const renderUploadButton = (uploadButtonStyle?: React.CSSProperties) => (
|
||||
@ -409,18 +413,26 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
|
||||
);
|
||||
|
||||
if (listType === 'picture-card') {
|
||||
return (
|
||||
<span className={classNames(`${prefixCls}-picture-card-wrapper`, className)}>
|
||||
return wrapSSR(
|
||||
<span
|
||||
className={classNames(
|
||||
`${prefixCls}-wrapper`,
|
||||
`${prefixCls}-picture-card-wrapper`,
|
||||
rtlCls,
|
||||
className,
|
||||
hashId,
|
||||
)}
|
||||
>
|
||||
{renderUploadList(renderUploadButton(), !!children)}
|
||||
</span>
|
||||
</span>,
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<span className={className}>
|
||||
return wrapSSR(
|
||||
<span className={classNames(`${prefixCls}-wrapper`, rtlCls, className, hashId)}>
|
||||
{renderUploadButton(children ? undefined : { display: 'none' })}
|
||||
{renderUploadList()}
|
||||
</span>
|
||||
</span>,
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -85,12 +85,8 @@ const ListItem = React.forwardRef(
|
||||
};
|
||||
}, []);
|
||||
|
||||
// This is used for legacy span make scrollHeight the wrong value.
|
||||
// We will force these to be `display: block` with non `picture-card`
|
||||
const spanClassName = `${prefixCls}-span`;
|
||||
|
||||
const iconNode = iconRender(file);
|
||||
let icon = <div className={`${prefixCls}-text-icon`}>{iconNode}</div>;
|
||||
let icon = <div className={`${prefixCls}-icon`}>{iconNode}</div>;
|
||||
if (listType === 'picture' || listType === 'picture-card') {
|
||||
if (file.status === 'uploading' || (!file.thumbUrl && !file.url)) {
|
||||
const uploadingClassName = classNames({
|
||||
@ -127,11 +123,10 @@ const ListItem = React.forwardRef(
|
||||
}
|
||||
}
|
||||
|
||||
const infoUploadingClass = classNames({
|
||||
[`${prefixCls}-list-item`]: true,
|
||||
[`${prefixCls}-list-item-${file.status}`]: true,
|
||||
[`${prefixCls}-list-item-list-type-${listType}`]: true,
|
||||
});
|
||||
const listItemClassName = classNames(
|
||||
`${prefixCls}-list-item`,
|
||||
`${prefixCls}-list-item-${file.status}`,
|
||||
);
|
||||
const linkProps =
|
||||
typeof file.linkProps === 'string' ? JSON.parse(file.linkProps) : file.linkProps;
|
||||
|
||||
@ -160,7 +155,7 @@ const ListItem = React.forwardRef(
|
||||
const downloadOrDelete = listType !== 'picture-card' && (
|
||||
<span
|
||||
key="download-delete"
|
||||
className={classNames(`${prefixCls}-list-item-card-actions`, {
|
||||
className={classNames(`${prefixCls}-list-item-actions`, {
|
||||
picture: listType === 'picture',
|
||||
})}
|
||||
>
|
||||
@ -169,7 +164,7 @@ const ListItem = React.forwardRef(
|
||||
</span>
|
||||
);
|
||||
const listItemNameClass = classNames(`${prefixCls}-list-item-name`);
|
||||
const preview = file.url
|
||||
const fileName = file.url
|
||||
? [
|
||||
<a
|
||||
key="view"
|
||||
@ -200,6 +195,7 @@ const ListItem = React.forwardRef(
|
||||
pointerEvents: 'none',
|
||||
opacity: 0.5,
|
||||
};
|
||||
|
||||
const previewIcon = showPreviewIcon ? (
|
||||
<a
|
||||
href={file.url || file.thumbUrl}
|
||||
@ -215,7 +211,7 @@ const ListItem = React.forwardRef(
|
||||
</a>
|
||||
) : null;
|
||||
|
||||
const actions = listType === 'picture-card' && file.status !== 'uploading' && (
|
||||
const pictureCardActions = listType === 'picture-card' && file.status !== 'uploading' && (
|
||||
<span className={`${prefixCls}-list-item-actions`}>
|
||||
{previewIcon}
|
||||
{file.status === 'done' && downloadIcon}
|
||||
@ -223,25 +219,14 @@ const ListItem = React.forwardRef(
|
||||
</span>
|
||||
);
|
||||
|
||||
let message;
|
||||
if (file.response && typeof file.response === 'string') {
|
||||
message = file.response;
|
||||
} else {
|
||||
message = file.error?.statusText || file.error?.message || locale.uploadError;
|
||||
}
|
||||
const iconAndPreview = (
|
||||
<span className={spanClassName}>
|
||||
{icon}
|
||||
{preview}
|
||||
</span>
|
||||
);
|
||||
const { getPrefixCls } = React.useContext(ConfigContext);
|
||||
const rootPrefixCls = getPrefixCls();
|
||||
|
||||
const dom = (
|
||||
<div className={infoUploadingClass}>
|
||||
<div className={`${prefixCls}-list-item-info`}>{iconAndPreview}</div>
|
||||
{actions}
|
||||
<div className={listItemClassName}>
|
||||
{icon}
|
||||
{fileName}
|
||||
{pictureCardActions}
|
||||
{showProgress && (
|
||||
<CSSMotion
|
||||
motionName={`${rootPrefixCls}-fade`}
|
||||
@ -265,7 +250,11 @@ const ListItem = React.forwardRef(
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
const listContainerNameClass = classNames(`${prefixCls}-list-${listType}-container`, className);
|
||||
|
||||
const message =
|
||||
file.response && typeof file.response === 'string'
|
||||
? file.response
|
||||
: file.error?.statusText || file.error?.message || locale.uploadError;
|
||||
const item =
|
||||
file.status === 'error' ? (
|
||||
<Tooltip title={message} getPopupContainer={node => node.parentNode as HTMLElement}>
|
||||
@ -276,7 +265,11 @@ const ListItem = React.forwardRef(
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={listContainerNameClass} style={style} ref={ref}>
|
||||
<div
|
||||
className={classNames(`${prefixCls}-list-item-container`, className)}
|
||||
style={style}
|
||||
ref={ref}
|
||||
>
|
||||
{itemRender
|
||||
? itemRender(item, file, items, {
|
||||
download: onDownload.bind(null, file),
|
||||
|
||||
@ -6,13 +6,13 @@ import PaperClipOutlined from '@ant-design/icons/PaperClipOutlined';
|
||||
import PictureTwoTone from '@ant-design/icons/PictureTwoTone';
|
||||
import FileTwoTone from '@ant-design/icons/FileTwoTone';
|
||||
import { cloneElement, isValidElement } from '../../_util/reactNode';
|
||||
import { UploadListProps, UploadFile, UploadListType, InternalUploadFile } from '../interface';
|
||||
import { previewImage, isImageUrl } from '../utils';
|
||||
import collapseMotion from '../../_util/motion';
|
||||
import { ConfigContext } from '../../config-provider';
|
||||
import Button, { ButtonProps } from '../../button';
|
||||
import useForceUpdate from '../../_util/hooks/useForceUpdate';
|
||||
import ListItem from './ListItem';
|
||||
import type { UploadListProps, UploadFile, UploadListType, InternalUploadFile } from '../interface';
|
||||
|
||||
const listItemMotion: Partial<CSSMotionListProps> = {
|
||||
...collapseMotion,
|
||||
@ -133,7 +133,7 @@ const InternalUploadList: React.ForwardRefRenderFunction<unknown, UploadListProp
|
||||
customIcon.props.onClick(e);
|
||||
}
|
||||
},
|
||||
className: `${prefixCls}-list-item-card-actions-btn`,
|
||||
className: `${prefixCls}-list-item-action`,
|
||||
};
|
||||
if (isValidElement(customIcon)) {
|
||||
const btnIcon = cloneElement(customIcon, {
|
||||
@ -157,7 +157,7 @@ const InternalUploadList: React.ForwardRefRenderFunction<unknown, UploadListProp
|
||||
handleDownload: onInternalDownload,
|
||||
}));
|
||||
|
||||
const { getPrefixCls, direction } = React.useContext(ConfigContext);
|
||||
const { getPrefixCls } = React.useContext(ConfigContext);
|
||||
|
||||
// ============================= Render =============================
|
||||
const prefixCls = getPrefixCls('upload', customizePrefixCls);
|
||||
@ -165,7 +165,6 @@ const InternalUploadList: React.ForwardRefRenderFunction<unknown, UploadListProp
|
||||
const listClassNames = classNames({
|
||||
[`${prefixCls}-list`]: true,
|
||||
[`${prefixCls}-list-${listType}`]: true,
|
||||
[`${prefixCls}-list-rtl`]: direction === 'rtl',
|
||||
});
|
||||
|
||||
// >>> Motion config
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -2,10 +2,10 @@
|
||||
|
||||
exports[`Upload rtl render component should be rendered correctly in RTL direction 1`] = `
|
||||
<span
|
||||
class=""
|
||||
class="ant-upload-wrapper ant-upload-rtl"
|
||||
>
|
||||
<div
|
||||
class="ant-upload ant-upload-select ant-upload-select-text ant-upload-rtl"
|
||||
class="ant-upload ant-upload-select"
|
||||
style="display: none;"
|
||||
>
|
||||
<span
|
||||
@ -21,7 +21,7 @@ exports[`Upload rtl render component should be rendered correctly in RTL directi
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list ant-upload-list-text ant-upload-list-rtl"
|
||||
class="ant-upload-list ant-upload-list-text"
|
||||
/>
|
||||
</span>
|
||||
`;
|
||||
|
||||
@ -2,10 +2,10 @@
|
||||
|
||||
exports[`Upload List handle error 1`] = `
|
||||
<span
|
||||
class=""
|
||||
class="ant-upload-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-upload ant-upload-select ant-upload-select-text"
|
||||
class="ant-upload ant-upload-select"
|
||||
>
|
||||
<span
|
||||
class="ant-upload"
|
||||
@ -28,20 +28,14 @@ exports[`Upload List handle error 1`] = `
|
||||
class="ant-upload-list ant-upload-list-text"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-text-container ant-upload-animate-appear ant-upload-animate-appear-active ant-upload-animate"
|
||||
class="ant-upload-list-item-container ant-upload-animate-appear ant-upload-animate-appear-active ant-upload-animate"
|
||||
style="height: 0px; opacity: 1;"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-error ant-upload-list-item-list-type-text"
|
||||
class="ant-upload-list-item ant-upload-list-item-error"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-info"
|
||||
>
|
||||
<span
|
||||
class="ant-upload-span"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-text-icon"
|
||||
class="ant-upload-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="paper-clip"
|
||||
@ -70,10 +64,10 @@ exports[`Upload List handle error 1`] = `
|
||||
foo.png
|
||||
</span>
|
||||
<span
|
||||
class="ant-upload-list-item-card-actions"
|
||||
class="ant-upload-list-item-actions"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
@ -99,8 +93,6 @@ exports[`Upload List handle error 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -112,7 +104,7 @@ exports[`Upload List itemRender 1`] = `
|
||||
class="ant-upload-list ant-upload-list-text"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-text-container"
|
||||
class="ant-upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="custom-item-render"
|
||||
@ -138,7 +130,7 @@ exports[`Upload List itemRender 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list-text-container"
|
||||
class="ant-upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="custom-item-render"
|
||||
@ -168,10 +160,10 @@ exports[`Upload List itemRender 1`] = `
|
||||
|
||||
exports[`Upload List should be uploading when upload a file 1`] = `
|
||||
<span
|
||||
class=""
|
||||
class="ant-upload-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-upload ant-upload-select ant-upload-select-text"
|
||||
class="ant-upload ant-upload-select"
|
||||
>
|
||||
<span
|
||||
class="ant-upload"
|
||||
@ -194,20 +186,14 @@ exports[`Upload List should be uploading when upload a file 1`] = `
|
||||
class="ant-upload-list ant-upload-list-text"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-text-container ant-upload-animate-appear ant-upload-animate-appear-start ant-upload-animate"
|
||||
class="ant-upload-list-item-container ant-upload-animate-appear ant-upload-animate-appear-start ant-upload-animate"
|
||||
style="height: 0px; opacity: 0;"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-uploading ant-upload-list-item-list-type-text"
|
||||
class="ant-upload-list-item ant-upload-list-item-uploading"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-info"
|
||||
>
|
||||
<span
|
||||
class="ant-upload-span"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-text-icon"
|
||||
class="ant-upload-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="loading"
|
||||
@ -236,10 +222,10 @@ exports[`Upload List should be uploading when upload a file 1`] = `
|
||||
foo.png
|
||||
</span>
|
||||
<span
|
||||
class="ant-upload-list-item-card-actions"
|
||||
class="ant-upload-list-item-actions"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
@ -265,8 +251,6 @@ exports[`Upload List should be uploading when upload a file 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -275,10 +259,10 @@ exports[`Upload List should be uploading when upload a file 1`] = `
|
||||
|
||||
exports[`Upload List should be uploading when upload a file 2`] = `
|
||||
<span
|
||||
class=""
|
||||
class="ant-upload-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-upload ant-upload-select ant-upload-select-text"
|
||||
class="ant-upload ant-upload-select"
|
||||
>
|
||||
<span
|
||||
class="ant-upload"
|
||||
@ -301,20 +285,14 @@ exports[`Upload List should be uploading when upload a file 2`] = `
|
||||
class="ant-upload-list ant-upload-list-text"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-text-container ant-upload-animate-appear ant-upload-animate-appear-start ant-upload-animate"
|
||||
class="ant-upload-list-item-container ant-upload-animate-appear ant-upload-animate-appear-start ant-upload-animate"
|
||||
style="height: 0px; opacity: 0;"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
|
||||
class="ant-upload-list-item ant-upload-list-item-done"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-info"
|
||||
>
|
||||
<span
|
||||
class="ant-upload-span"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-text-icon"
|
||||
class="ant-upload-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="paper-clip"
|
||||
@ -343,10 +321,10 @@ exports[`Upload List should be uploading when upload a file 2`] = `
|
||||
foo.png
|
||||
</span>
|
||||
<span
|
||||
class="ant-upload-list-item-card-actions"
|
||||
class="ant-upload-list-item-actions"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
@ -372,8 +350,6 @@ exports[`Upload List should be uploading when upload a file 2`] = `
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -382,10 +358,10 @@ exports[`Upload List should be uploading when upload a file 2`] = `
|
||||
|
||||
exports[`Upload List should non-image format file preview 1`] = `
|
||||
<span
|
||||
class=""
|
||||
class="ant-upload-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-upload ant-upload-select ant-upload-select-picture"
|
||||
class="ant-upload ant-upload-select"
|
||||
>
|
||||
<span
|
||||
class="ant-upload"
|
||||
@ -408,16 +384,10 @@ exports[`Upload List should non-image format file preview 1`] = `
|
||||
class="ant-upload-list ant-upload-list-picture"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-picture-container"
|
||||
class="ant-upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-info"
|
||||
>
|
||||
<span
|
||||
class="ant-upload-span"
|
||||
class="ant-upload-list-item ant-upload-list-item-done"
|
||||
>
|
||||
<a
|
||||
class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
|
||||
@ -460,10 +430,10 @@ exports[`Upload List should non-image format file preview 1`] = `
|
||||
not-image
|
||||
</a>
|
||||
<span
|
||||
class="ant-upload-list-item-card-actions picture"
|
||||
class="ant-upload-list-item-actions picture"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
@ -489,21 +459,13 @@ exports[`Upload List should non-image format file preview 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list-picture-container"
|
||||
class="ant-upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-info"
|
||||
>
|
||||
<span
|
||||
class="ant-upload-span"
|
||||
class="ant-upload-list-item ant-upload-list-item-done"
|
||||
>
|
||||
<a
|
||||
class="ant-upload-list-item-thumbnail"
|
||||
@ -527,10 +489,10 @@ exports[`Upload List should non-image format file preview 1`] = `
|
||||
image
|
||||
</a>
|
||||
<span
|
||||
class="ant-upload-list-item-card-actions picture"
|
||||
class="ant-upload-list-item-actions picture"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
@ -556,21 +518,13 @@ exports[`Upload List should non-image format file preview 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list-picture-container"
|
||||
class="ant-upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-info"
|
||||
>
|
||||
<span
|
||||
class="ant-upload-span"
|
||||
class="ant-upload-list-item ant-upload-list-item-done"
|
||||
>
|
||||
<a
|
||||
class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
|
||||
@ -613,10 +567,10 @@ exports[`Upload List should non-image format file preview 1`] = `
|
||||
not-image
|
||||
</a>
|
||||
<span
|
||||
class="ant-upload-list-item-card-actions picture"
|
||||
class="ant-upload-list-item-actions picture"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
@ -642,21 +596,13 @@ exports[`Upload List should non-image format file preview 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list-picture-container"
|
||||
class="ant-upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-info"
|
||||
>
|
||||
<span
|
||||
class="ant-upload-span"
|
||||
class="ant-upload-list-item ant-upload-list-item-done"
|
||||
>
|
||||
<a
|
||||
class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
|
||||
@ -699,10 +645,10 @@ exports[`Upload List should non-image format file preview 1`] = `
|
||||
not-image
|
||||
</a>
|
||||
<span
|
||||
class="ant-upload-list-item-card-actions picture"
|
||||
class="ant-upload-list-item-actions picture"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
@ -728,21 +674,13 @@ exports[`Upload List should non-image format file preview 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list-picture-container"
|
||||
class="ant-upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-info"
|
||||
>
|
||||
<span
|
||||
class="ant-upload-span"
|
||||
class="ant-upload-list-item ant-upload-list-item-done"
|
||||
>
|
||||
<a
|
||||
class="ant-upload-list-item-thumbnail"
|
||||
@ -766,10 +704,10 @@ exports[`Upload List should non-image format file preview 1`] = `
|
||||
image
|
||||
</a>
|
||||
<span
|
||||
class="ant-upload-list-item-card-actions picture"
|
||||
class="ant-upload-list-item-actions picture"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
@ -795,21 +733,13 @@ exports[`Upload List should non-image format file preview 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list-picture-container"
|
||||
class="ant-upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-info"
|
||||
>
|
||||
<span
|
||||
class="ant-upload-span"
|
||||
class="ant-upload-list-item ant-upload-list-item-done"
|
||||
>
|
||||
<a
|
||||
class="ant-upload-list-item-thumbnail"
|
||||
@ -833,10 +763,10 @@ exports[`Upload List should non-image format file preview 1`] = `
|
||||
image
|
||||
</a>
|
||||
<span
|
||||
class="ant-upload-list-item-card-actions picture"
|
||||
class="ant-upload-list-item-actions picture"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
@ -862,21 +792,13 @@ exports[`Upload List should non-image format file preview 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list-picture-container"
|
||||
class="ant-upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-info"
|
||||
>
|
||||
<span
|
||||
class="ant-upload-span"
|
||||
class="ant-upload-list-item ant-upload-list-item-done"
|
||||
>
|
||||
<a
|
||||
class="ant-upload-list-item-thumbnail"
|
||||
@ -900,10 +822,10 @@ exports[`Upload List should non-image format file preview 1`] = `
|
||||
image
|
||||
</a>
|
||||
<span
|
||||
class="ant-upload-list-item-card-actions picture"
|
||||
class="ant-upload-list-item-actions picture"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
@ -929,21 +851,13 @@ exports[`Upload List should non-image format file preview 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list-picture-container"
|
||||
class="ant-upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-info"
|
||||
>
|
||||
<span
|
||||
class="ant-upload-span"
|
||||
class="ant-upload-list-item ant-upload-list-item-done"
|
||||
>
|
||||
<a
|
||||
class="ant-upload-list-item-thumbnail"
|
||||
@ -967,10 +881,10 @@ exports[`Upload List should non-image format file preview 1`] = `
|
||||
image
|
||||
</a>
|
||||
<span
|
||||
class="ant-upload-list-item-card-actions picture"
|
||||
class="ant-upload-list-item-actions picture"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
@ -996,21 +910,13 @@ exports[`Upload List should non-image format file preview 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list-picture-container"
|
||||
class="ant-upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-info"
|
||||
>
|
||||
<span
|
||||
class="ant-upload-span"
|
||||
class="ant-upload-list-item ant-upload-list-item-done"
|
||||
>
|
||||
<a
|
||||
class="ant-upload-list-item-thumbnail"
|
||||
@ -1034,10 +940,10 @@ exports[`Upload List should non-image format file preview 1`] = `
|
||||
image
|
||||
</a>
|
||||
<span
|
||||
class="ant-upload-list-item-card-actions picture"
|
||||
class="ant-upload-list-item-actions picture"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
@ -1063,21 +969,13 @@ exports[`Upload List should non-image format file preview 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list-picture-container"
|
||||
class="ant-upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-info"
|
||||
>
|
||||
<span
|
||||
class="ant-upload-span"
|
||||
class="ant-upload-list-item ant-upload-list-item-done"
|
||||
>
|
||||
<a
|
||||
class="ant-upload-list-item-thumbnail"
|
||||
@ -1101,10 +999,10 @@ exports[`Upload List should non-image format file preview 1`] = `
|
||||
image
|
||||
</a>
|
||||
<span
|
||||
class="ant-upload-list-item-card-actions picture"
|
||||
class="ant-upload-list-item-actions picture"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
@ -1130,8 +1028,6 @@ exports[`Upload List should non-image format file preview 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1140,10 +1036,10 @@ exports[`Upload List should non-image format file preview 1`] = `
|
||||
|
||||
exports[`Upload List should support removeIcon and downloadIcon 1`] = `
|
||||
<span
|
||||
class=""
|
||||
class="ant-upload-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-upload ant-upload-select ant-upload-select-picture"
|
||||
class="ant-upload ant-upload-select"
|
||||
>
|
||||
<span
|
||||
class="ant-upload"
|
||||
@ -1166,16 +1062,10 @@ exports[`Upload List should support removeIcon and downloadIcon 1`] = `
|
||||
class="ant-upload-list ant-upload-list-picture"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-picture-container"
|
||||
class="ant-upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-uploading ant-upload-list-item-list-type-picture"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-info"
|
||||
>
|
||||
<span
|
||||
class="ant-upload-span"
|
||||
class="ant-upload-list-item ant-upload-list-item-uploading"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-thumbnail"
|
||||
@ -1210,10 +1100,10 @@ exports[`Upload List should support removeIcon and downloadIcon 1`] = `
|
||||
image
|
||||
</a>
|
||||
<span
|
||||
class="ant-upload-list-item-card-actions picture"
|
||||
class="ant-upload-list-item-actions picture"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
@ -1222,21 +1112,13 @@ exports[`Upload List should support removeIcon and downloadIcon 1`] = `
|
||||
</i>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list-picture-container"
|
||||
class="ant-upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-info"
|
||||
>
|
||||
<span
|
||||
class="ant-upload-span"
|
||||
class="ant-upload-list-item ant-upload-list-item-done"
|
||||
>
|
||||
<a
|
||||
class="ant-upload-list-item-thumbnail"
|
||||
@ -1260,10 +1142,10 @@ exports[`Upload List should support removeIcon and downloadIcon 1`] = `
|
||||
image
|
||||
</a>
|
||||
<span
|
||||
class="ant-upload-list-item-card-actions picture"
|
||||
class="ant-upload-list-item-actions picture"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
|
||||
title="Download file"
|
||||
type="button"
|
||||
>
|
||||
@ -1272,7 +1154,7 @@ exports[`Upload List should support removeIcon and downloadIcon 1`] = `
|
||||
</i>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
@ -1281,8 +1163,6 @@ exports[`Upload List should support removeIcon and downloadIcon 1`] = `
|
||||
</i>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1291,10 +1171,10 @@ exports[`Upload List should support removeIcon and downloadIcon 1`] = `
|
||||
|
||||
exports[`Upload List should support removeIcon and downloadIcon 2`] = `
|
||||
<span
|
||||
class=""
|
||||
class="ant-upload-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-upload ant-upload-select ant-upload-select-picture"
|
||||
class="ant-upload ant-upload-select"
|
||||
>
|
||||
<span
|
||||
class="ant-upload"
|
||||
@ -1317,16 +1197,10 @@ exports[`Upload List should support removeIcon and downloadIcon 2`] = `
|
||||
class="ant-upload-list ant-upload-list-picture"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-picture-container"
|
||||
class="ant-upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-uploading ant-upload-list-item-list-type-picture"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-info"
|
||||
>
|
||||
<span
|
||||
class="ant-upload-span"
|
||||
class="ant-upload-list-item ant-upload-list-item-uploading"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-thumbnail"
|
||||
@ -1361,10 +1235,10 @@ exports[`Upload List should support removeIcon and downloadIcon 2`] = `
|
||||
image
|
||||
</a>
|
||||
<span
|
||||
class="ant-upload-list-item-card-actions picture"
|
||||
class="ant-upload-list-item-actions picture"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
@ -1373,21 +1247,13 @@ exports[`Upload List should support removeIcon and downloadIcon 2`] = `
|
||||
</i>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list-picture-container"
|
||||
class="ant-upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-info"
|
||||
>
|
||||
<span
|
||||
class="ant-upload-span"
|
||||
class="ant-upload-list-item ant-upload-list-item-done"
|
||||
>
|
||||
<a
|
||||
class="ant-upload-list-item-thumbnail"
|
||||
@ -1411,10 +1277,10 @@ exports[`Upload List should support removeIcon and downloadIcon 2`] = `
|
||||
image
|
||||
</a>
|
||||
<span
|
||||
class="ant-upload-list-item-card-actions picture"
|
||||
class="ant-upload-list-item-actions picture"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
|
||||
title="Download file"
|
||||
type="button"
|
||||
>
|
||||
@ -1423,7 +1289,7 @@ exports[`Upload List should support removeIcon and downloadIcon 2`] = `
|
||||
</i>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
@ -1432,8 +1298,6 @@ exports[`Upload List should support removeIcon and downloadIcon 2`] = `
|
||||
</i>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1442,10 +1306,10 @@ exports[`Upload List should support removeIcon and downloadIcon 2`] = `
|
||||
|
||||
exports[`Upload List should support showRemoveIcon and showPreviewIcon 1`] = `
|
||||
<span
|
||||
class=""
|
||||
class="ant-upload-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-upload ant-upload-select ant-upload-select-picture"
|
||||
class="ant-upload ant-upload-select"
|
||||
>
|
||||
<span
|
||||
class="ant-upload"
|
||||
@ -1468,16 +1332,10 @@ exports[`Upload List should support showRemoveIcon and showPreviewIcon 1`] = `
|
||||
class="ant-upload-list ant-upload-list-picture"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-picture-container"
|
||||
class="ant-upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-uploading ant-upload-list-item-list-type-picture"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-info"
|
||||
>
|
||||
<span
|
||||
class="ant-upload-span"
|
||||
class="ant-upload-list-item ant-upload-list-item-uploading"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-thumbnail"
|
||||
@ -1512,23 +1370,15 @@ exports[`Upload List should support showRemoveIcon and showPreviewIcon 1`] = `
|
||||
image
|
||||
</a>
|
||||
<span
|
||||
class="ant-upload-list-item-card-actions picture"
|
||||
class="ant-upload-list-item-actions picture"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list-picture-container"
|
||||
class="ant-upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-info"
|
||||
>
|
||||
<span
|
||||
class="ant-upload-span"
|
||||
class="ant-upload-list-item ant-upload-list-item-done"
|
||||
>
|
||||
<a
|
||||
class="ant-upload-list-item-thumbnail"
|
||||
@ -1552,10 +1402,8 @@ exports[`Upload List should support showRemoveIcon and showPreviewIcon 1`] = `
|
||||
image
|
||||
</a>
|
||||
<span
|
||||
class="ant-upload-list-item-card-actions picture"
|
||||
class="ant-upload-list-item-actions picture"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -844,7 +844,7 @@ describe('Upload', () => {
|
||||
const frozenFileList = fileList.map(file => Object.freeze(file));
|
||||
|
||||
const wrapper = mount(<Upload fileList={frozenFileList} />);
|
||||
const rmBtn = wrapper.find('.ant-upload-list-item-card-actions-btn').last();
|
||||
const rmBtn = wrapper.find('.ant-upload-list-item-action').last();
|
||||
rmBtn.simulate('click');
|
||||
|
||||
// Wait for Upload async remove
|
||||
@ -888,7 +888,7 @@ describe('Upload', () => {
|
||||
);
|
||||
|
||||
rerender(<Upload listType="picture-card" />);
|
||||
expect(container.querySelector('.ant-upload-select-picture-card')).not.toHaveStyle({
|
||||
expect(container.querySelector('.ant-upload-select')).not.toHaveStyle({
|
||||
display: 'none',
|
||||
});
|
||||
|
||||
@ -897,9 +897,9 @@ describe('Upload', () => {
|
||||
jest.runAllTimers();
|
||||
});
|
||||
|
||||
fireEvent.animationEnd(container.querySelector('.ant-upload-select-picture-card'));
|
||||
fireEvent.animationEnd(container.querySelector('.ant-upload-select'));
|
||||
|
||||
expect(container.querySelector('.ant-upload-select-picture-card')).toHaveStyle({
|
||||
expect(container.querySelector('.ant-upload-select')).toHaveStyle({
|
||||
display: 'none',
|
||||
});
|
||||
|
||||
|
||||
@ -138,7 +138,7 @@ describe('Upload List', () => {
|
||||
await sleep(1000);
|
||||
wrapper.update();
|
||||
|
||||
const domNode = wrapper.find('.ant-upload-list-text-container').at(0).hostNodes().instance();
|
||||
const domNode = wrapper.find('.ant-upload-list-item-container').at(0).hostNodes().instance();
|
||||
const transitionEndEvent = new Event('transitionend');
|
||||
domNode.dispatchEvent(transitionEndEvent);
|
||||
wrapper.update();
|
||||
@ -146,7 +146,7 @@ describe('Upload List', () => {
|
||||
|
||||
// console.log(wrapper.html());
|
||||
|
||||
expect(wrapper.find('.ant-upload-list-text-container').hostNodes().length).toBe(1);
|
||||
expect(wrapper.find('.ant-upload-list-item-container').hostNodes().length).toBe(1);
|
||||
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
@ -60,10 +60,10 @@ export default () => (
|
||||
.upload-list-inline .ant-upload-list-item {
|
||||
float: left;
|
||||
width: 200px;
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
|
||||
.upload-list-inline [class*='-upload-list-rtl'] .ant-upload-list-item {
|
||||
.ant-upload-rtl.upload-list-inline .ant-upload-list-item {
|
||||
float: right;
|
||||
}
|
||||
```
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import * as React from 'react';
|
||||
import {
|
||||
import type {
|
||||
RcFile as OriRcFile,
|
||||
UploadRequestOption as RcCustomRequestOptions,
|
||||
UploadProps as RcUploadProps,
|
||||
} from 'rc-upload/lib/interface';
|
||||
import { ProgressProps } from '../progress';
|
||||
import type { ProgressProps } from '../progress';
|
||||
|
||||
export interface RcFile extends OriRcFile {
|
||||
readonly lastModifiedDate: Date;
|
||||
@ -146,6 +146,7 @@ export interface UploadListProps<T = any> {
|
||||
items?: Array<UploadFile<T>>;
|
||||
progress?: UploadListProgressProps;
|
||||
prefixCls?: string;
|
||||
className?: string;
|
||||
showRemoveIcon?: boolean;
|
||||
showDownloadIcon?: boolean;
|
||||
showPreviewIcon?: boolean;
|
||||
|
||||
68
components/upload/style/dragger.tsx
Normal file
68
components/upload/style/dragger.tsx
Normal file
@ -0,0 +1,68 @@
|
||||
import type { GenerateStyle, FullToken } from '../../_util/theme';
|
||||
|
||||
const genDraggerStyle: GenerateStyle<FullToken<'Upload'>> = token => {
|
||||
const { componentCls, iconCls } = token;
|
||||
|
||||
return {
|
||||
[`${componentCls}-wrapper`]: {
|
||||
[`${componentCls}-drag`]: {
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
textAlign: 'center',
|
||||
background: token.colorBgComponentSecondary,
|
||||
border: `${token.controlLineWidth}px dashed ${token.colorBorder}`,
|
||||
borderRadius: token.radiusBase,
|
||||
cursor: 'pointer',
|
||||
transition: `border-color ${token.motionDurationSlow}`,
|
||||
|
||||
[componentCls]: {
|
||||
padding: `${token.padding}px 0`,
|
||||
},
|
||||
|
||||
[`${componentCls}${componentCls}-disabled`]: {
|
||||
cursor: 'not-allowed',
|
||||
},
|
||||
|
||||
[`${componentCls}-btn`]: {
|
||||
display: 'table',
|
||||
height: '100%',
|
||||
outline: 'none',
|
||||
},
|
||||
|
||||
[`${componentCls}-drag-container`]: {
|
||||
display: 'table-cell',
|
||||
verticalAlign: 'middle',
|
||||
},
|
||||
|
||||
[`${componentCls}:not(${componentCls}-disabled):hover`]: {
|
||||
borderColor: token.colorPrimaryHover,
|
||||
},
|
||||
|
||||
[`p${componentCls}-drag-icon`]: {
|
||||
// FIXME: upload token
|
||||
marginBottom: 20,
|
||||
|
||||
[iconCls]: {
|
||||
color: token.colorPrimary,
|
||||
// FIXME: upload token
|
||||
fontSize: 48,
|
||||
},
|
||||
},
|
||||
|
||||
[`p${componentCls}-text`]: {
|
||||
margin: `0 0 ${token.marginXXS}px`,
|
||||
color: token.colorTextHeading,
|
||||
fontSize: token.fontSizeLG,
|
||||
},
|
||||
|
||||
[`p${componentCls}-hint`]: {
|
||||
color: token.colorTextSecondary,
|
||||
fontSize: token.fontSizeBase,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export default genDraggerStyle;
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,8 +1,55 @@
|
||||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
// deps-lint-skip-all
|
||||
import { CSSObject } from '@ant-design/cssinjs';
|
||||
import { genComponentStyleHook, resetComponent } from '../../_util/theme';
|
||||
import genDraggerStyle from './dragger';
|
||||
import genListStyle from './list';
|
||||
import genMotionStyle from './motion';
|
||||
import genRtlStyle from './rtl';
|
||||
import { genPictureStyle, genPictureCardStyle } from './picture';
|
||||
import type { GenerateStyle, FullToken } from '../../_util/theme';
|
||||
|
||||
// style dependencies
|
||||
// deps-lint-skip: form
|
||||
import '../../button/style';
|
||||
import '../../progress/style';
|
||||
import '../../tooltip/style';
|
||||
export interface ComponentToken {
|
||||
uploadActionsColor: CSSObject['color'];
|
||||
}
|
||||
|
||||
const genBaseStyle: GenerateStyle<FullToken<'Upload'>> = token => {
|
||||
const { componentCls } = token;
|
||||
|
||||
return {
|
||||
[`${componentCls}-wrapper`]: {
|
||||
...resetComponent(token),
|
||||
|
||||
[componentCls]: {
|
||||
outline: 0,
|
||||
"input[type='file']": {
|
||||
cursor: 'pointer',
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-select`]: {
|
||||
display: 'inline-block',
|
||||
},
|
||||
|
||||
[`${componentCls}-disabled`]: {
|
||||
cursor: 'not-allowed',
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook(
|
||||
'Upload',
|
||||
token => [
|
||||
genBaseStyle(token),
|
||||
genDraggerStyle(token),
|
||||
genPictureStyle(token),
|
||||
genPictureCardStyle(token),
|
||||
genListStyle(token),
|
||||
genMotionStyle(token),
|
||||
genRtlStyle(token),
|
||||
],
|
||||
token => ({
|
||||
uploadActionsColor: token.colorTextSecondary,
|
||||
}),
|
||||
);
|
||||
|
||||
125
components/upload/style/list.tsx
Normal file
125
components/upload/style/list.tsx
Normal file
@ -0,0 +1,125 @@
|
||||
import { clearFix } from '../../_util/theme';
|
||||
import type { GenerateStyle, FullToken } from '../../_util/theme';
|
||||
|
||||
const genListStyle: GenerateStyle<FullToken<'Upload'>> = token => {
|
||||
const { componentCls, antCls, iconCls } = token;
|
||||
const itemCls = `${componentCls}-list-item`;
|
||||
const actionsCls = `${itemCls}-actions`;
|
||||
const actionCls = `${itemCls}-action`;
|
||||
|
||||
return {
|
||||
[`${componentCls}-wrapper`]: {
|
||||
[`${componentCls}-list`]: {
|
||||
...clearFix(),
|
||||
lineHeight: token.lineHeight,
|
||||
|
||||
[itemCls]: {
|
||||
position: 'relative',
|
||||
height: token.lineHeight * token.fontSizeBase,
|
||||
marginTop: token.marginXS,
|
||||
fontSize: token.fontSizeBase,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
transition: `background-color ${token.motionDurationSlow}`,
|
||||
|
||||
'&:hover': {
|
||||
backgroundColor: token.controlItemBgHover,
|
||||
},
|
||||
|
||||
[`${itemCls}-name`]: {
|
||||
padding: `0 ${token.paddingXS}px`,
|
||||
overflow: 'hidden',
|
||||
lineHeight: token.lineHeight,
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis',
|
||||
flex: 'auto',
|
||||
transition: `all ${token.motionDurationSlow}`,
|
||||
},
|
||||
|
||||
[actionsCls]: {
|
||||
[actionCls]: {
|
||||
opacity: 0,
|
||||
},
|
||||
|
||||
[`${actionCls}${antCls}-btn-sm`]: {
|
||||
// FIXME: upload token
|
||||
height: 20,
|
||||
lineHeight: 1,
|
||||
// FIXME: should not override small button
|
||||
'> span': {
|
||||
transform: 'scale(1)',
|
||||
},
|
||||
},
|
||||
|
||||
[`
|
||||
${actionCls}:focus,
|
||||
&.picture ${actionCls}
|
||||
`]: {
|
||||
opacity: 1,
|
||||
},
|
||||
|
||||
[iconCls]: {
|
||||
color: token.uploadActionsColor,
|
||||
transition: `all ${token.motionDurationSlow}`,
|
||||
},
|
||||
|
||||
[`&:hover ${iconCls}`]: {
|
||||
color: token.colorText,
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-icon ${iconCls}`]: {
|
||||
color: token.colorTextSecondary,
|
||||
fontSize: token.fontSizeBase,
|
||||
},
|
||||
|
||||
[`${itemCls}-progress`]: {
|
||||
position: 'absolute',
|
||||
// FIXME: upload token
|
||||
bottom: -12,
|
||||
width: '100%',
|
||||
paddingInlineStart: token.fontSizeBase + token.paddingXS,
|
||||
fontSize: token.fontSizeBase,
|
||||
lineHeight: 0,
|
||||
},
|
||||
},
|
||||
|
||||
[`${itemCls}:hover ${actionCls}`]: {
|
||||
opacity: 1,
|
||||
color: token.colorText,
|
||||
},
|
||||
|
||||
[`${itemCls}-error`]: {
|
||||
color: token.colorError,
|
||||
[`${itemCls}-name, ${componentCls}-icon ${iconCls}`]: {
|
||||
color: token.colorError,
|
||||
},
|
||||
|
||||
[actionsCls]: {
|
||||
[`${iconCls}, ${iconCls}:hover`]: {
|
||||
color: token.colorError,
|
||||
},
|
||||
|
||||
[actionCls]: {
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-list-item-container`]: {
|
||||
transition: `opacity ${token.motionDurationSlow}, height ${token.motionDurationSlow}`,
|
||||
|
||||
// For smooth removing animation
|
||||
'&::before': {
|
||||
display: 'table',
|
||||
width: 0,
|
||||
height: 0,
|
||||
content: '""',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export default genListStyle;
|
||||
50
components/upload/style/motion.tsx
Normal file
50
components/upload/style/motion.tsx
Normal file
@ -0,0 +1,50 @@
|
||||
import { Keyframes } from '@ant-design/cssinjs';
|
||||
import type { GenerateStyle, FullToken } from '../../_util/theme';
|
||||
|
||||
const uploadAnimateInlineIn = new Keyframes('uploadAnimateInlineIn', {
|
||||
from: {
|
||||
width: 0,
|
||||
height: 0,
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
const uploadAnimateInlineOut = new Keyframes('uploadAnimateInlineOut', {
|
||||
to: {
|
||||
width: 0,
|
||||
height: 0,
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
// =========================== Motion ===========================
|
||||
const genMotionStyle: GenerateStyle<FullToken<'Upload'>> = token => {
|
||||
const { componentCls } = token;
|
||||
const inlineCls = `${componentCls}-animate-inline`;
|
||||
|
||||
return [
|
||||
{
|
||||
[`${componentCls}-wrapper`]: {
|
||||
[`${inlineCls}-appear, ${inlineCls}-enter, ${inlineCls}-leave`]: {
|
||||
animationDuration: token.motionDurationSlow,
|
||||
animationFillMode: token.motionEaseInOutCirc,
|
||||
},
|
||||
|
||||
[`${inlineCls}-appear, ${inlineCls}-enter`]: {
|
||||
animationName: uploadAnimateInlineIn,
|
||||
},
|
||||
|
||||
[`${inlineCls}-leave`]: {
|
||||
animationName: uploadAnimateInlineOut,
|
||||
},
|
||||
},
|
||||
},
|
||||
uploadAnimateInlineIn,
|
||||
uploadAnimateInlineOut,
|
||||
];
|
||||
};
|
||||
|
||||
export default genMotionStyle;
|
||||
242
components/upload/style/picture.tsx
Normal file
242
components/upload/style/picture.tsx
Normal file
@ -0,0 +1,242 @@
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
import { clearFix } from '../../_util/theme';
|
||||
import type { GenerateStyle, FullToken } from '../../_util/theme';
|
||||
|
||||
const genPictureStyle: GenerateStyle<FullToken<'Upload'>> = token => {
|
||||
const { componentCls, iconCls } = token;
|
||||
const listCls = `${componentCls}-list`;
|
||||
const itemCls = `${listCls}-item`;
|
||||
// FIXME: upload token
|
||||
const uploadPictureThumbnailSize = 48;
|
||||
|
||||
return {
|
||||
[`${componentCls}-wrapper`]: {
|
||||
// ${listCls} 增加优先级
|
||||
[`${listCls}${listCls}-picture, ${listCls}${listCls}-picture-card`]: {
|
||||
[itemCls]: {
|
||||
position: 'relative',
|
||||
height: uploadPictureThumbnailSize + token.controlLineWidth * 2 + token.paddingXS * 2,
|
||||
padding: token.paddingXS,
|
||||
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
|
||||
borderRadius: token.radiusBase,
|
||||
|
||||
'&:hover': {
|
||||
background: 'transparent',
|
||||
},
|
||||
|
||||
[`${itemCls}-thumbnail`]: {
|
||||
width: uploadPictureThumbnailSize,
|
||||
height: uploadPictureThumbnailSize,
|
||||
lineHeight: `${uploadPictureThumbnailSize + token.paddingSM}px`,
|
||||
textAlign: 'center',
|
||||
// FIXME: upload token
|
||||
opacity: 0.8,
|
||||
flex: 'none',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
|
||||
[iconCls]: {
|
||||
fontSize: uploadPictureThumbnailSize / 2 + 2,
|
||||
},
|
||||
|
||||
img: {
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
},
|
||||
|
||||
[`${itemCls}-progress`]: {
|
||||
// FIXME: upload token
|
||||
bottom: 14,
|
||||
width: `calc(100% - ${token.paddingSM * 2}px)`,
|
||||
marginTop: 0,
|
||||
// FIXME: upload token
|
||||
paddingInlineStart: uploadPictureThumbnailSize + token.paddingXS,
|
||||
},
|
||||
},
|
||||
|
||||
[`${itemCls}-error`]: {
|
||||
borderColor: token.colorError,
|
||||
|
||||
// Adjust the color of the error icon : https://github.com/ant-design/ant-design/pull/24160
|
||||
[`${itemCls}-thumbnail ${iconCls}`]: {
|
||||
[`svg path[fill='#e6f7ff']`]: {
|
||||
fill: token.colorBgError,
|
||||
},
|
||||
[`svg path[fill='#1890ff']`]: {
|
||||
fill: token.colorError,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`${itemCls}-uploading`]: {
|
||||
borderStyle: 'dashed',
|
||||
|
||||
[`${itemCls}-name`]: {
|
||||
// FIXME: upload token
|
||||
marginBottom: 12,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const genPictureCardStyle: GenerateStyle<FullToken<'Upload'>> = token => {
|
||||
const { componentCls, iconCls } = token;
|
||||
const listCls = `${componentCls}-list`;
|
||||
const itemCls = `${listCls}-item`;
|
||||
|
||||
// FIXME: upload token
|
||||
const uploadPictureCardThumbnailSize = 88;
|
||||
const uploadPictureCardSize = uploadPictureCardThumbnailSize + token.paddingXS * 2;
|
||||
|
||||
return {
|
||||
[`${componentCls}-wrapper${componentCls}-picture-card-wrapper`]: {
|
||||
...clearFix(),
|
||||
display: 'inline-block',
|
||||
width: '100%',
|
||||
|
||||
[`${componentCls}${componentCls}-select`]: {
|
||||
width: uploadPictureCardSize,
|
||||
height: uploadPictureCardSize,
|
||||
marginInlineEnd: token.marginXS,
|
||||
marginBottom: token.marginXS,
|
||||
textAlign: 'center',
|
||||
verticalAlign: 'top',
|
||||
backgroundColor: token.colorBgComponentSecondary,
|
||||
border: `${token.controlLineWidth}px dashed ${token.colorBorder}`,
|
||||
borderRadius: token.radiusBase,
|
||||
cursor: 'pointer',
|
||||
transition: `border-color ${token.motionDurationSlow}`,
|
||||
|
||||
[`> ${componentCls}`]: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: '100%',
|
||||
textAlign: 'center',
|
||||
},
|
||||
|
||||
[`&:not(${componentCls}-disabled):hover`]: {
|
||||
borderColor: token.colorPrimary,
|
||||
},
|
||||
},
|
||||
|
||||
// list
|
||||
[`${listCls}${listCls}-picture-card`]: {
|
||||
[`${listCls}-item-container`]: {
|
||||
display: 'inline-block',
|
||||
width: uploadPictureCardSize,
|
||||
height: uploadPictureCardSize,
|
||||
marginBlock: `0 ${token.marginXS}px`,
|
||||
marginInline: `0 ${token.marginXS}px`,
|
||||
verticalAlign: 'top',
|
||||
},
|
||||
|
||||
'&::after': {
|
||||
display: 'none',
|
||||
},
|
||||
|
||||
[itemCls]: {
|
||||
height: '100%',
|
||||
margin: 0,
|
||||
|
||||
'&::before': {
|
||||
position: 'absolute',
|
||||
zIndex: 1,
|
||||
width: `calc(100% - ${token.paddingXS * 2}px)`,
|
||||
height: `calc(100% - ${token.paddingXS * 2}px)`,
|
||||
// FIXME: upload token
|
||||
backgroundColor: new TinyColor('#000').setAlpha(0.5).toRgbString(),
|
||||
opacity: 0,
|
||||
transition: `all ${token.motionDurationSlow}`,
|
||||
content: '" "',
|
||||
},
|
||||
},
|
||||
|
||||
[`${itemCls}:hover`]: {
|
||||
[`&::before, ${itemCls}-actions`]: {
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
|
||||
[`${itemCls}-actions`]: {
|
||||
position: 'absolute',
|
||||
insetInlineStart: 0,
|
||||
zIndex: 10,
|
||||
width: '100%',
|
||||
whiteSpace: 'nowrap',
|
||||
textAlign: 'center',
|
||||
opacity: 0,
|
||||
transition: `all ${token.motionDurationSlow}`,
|
||||
|
||||
[`${iconCls}-eye, ${iconCls}-download, ${iconCls}-delete`]: {
|
||||
zIndex: 10,
|
||||
// FIXME: upload token
|
||||
width: 16,
|
||||
margin: `0 ${token.marginXXS}px`,
|
||||
// FIXME: upload token
|
||||
fontSize: 16,
|
||||
cursor: 'pointer',
|
||||
transition: `all ${token.motionDurationSlow}`,
|
||||
},
|
||||
},
|
||||
|
||||
[`${itemCls}-actions, ${itemCls}-actions:hover`]: {
|
||||
[`${iconCls}-eye, ${iconCls}-download, ${iconCls}-delete`]: {
|
||||
// FIXME: @text-color-dark: fade(@white, 85%);
|
||||
color: new TinyColor('#fff').setAlpha(0.85).toRgbString(),
|
||||
'&:hover': {
|
||||
// FIXME: @text-color-dark: fade(@white, 85%);
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`${itemCls}-thumbnail, ${itemCls}-thumbnail img`]: {
|
||||
position: 'static',
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'contain',
|
||||
},
|
||||
|
||||
[`${itemCls}-name`]: {
|
||||
display: 'none',
|
||||
textAlign: 'center',
|
||||
},
|
||||
|
||||
[`${itemCls}-file + ${itemCls}-name`]: {
|
||||
position: 'absolute',
|
||||
// FIXME: upload token
|
||||
bottom: 18,
|
||||
display: 'block',
|
||||
width: `calc(100% - ${token.paddingXS * 2}px)`,
|
||||
},
|
||||
|
||||
[`${itemCls}-uploading`]: {
|
||||
[`&${itemCls}`]: {
|
||||
backgroundColor: token.colorBgComponentSecondary,
|
||||
},
|
||||
|
||||
[`&::before, ${iconCls}-eye, ${iconCls}-download, ${iconCls}-delete`]: {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
|
||||
[`${itemCls}-progress`]: {
|
||||
// FIXME: upload token
|
||||
bottom: 32,
|
||||
width: `calc(100% - ${token.paddingXS * 2}px)`,
|
||||
paddingInlineStart: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export { genPictureStyle, genPictureCardStyle };
|
||||
@ -1,165 +1,165 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
// @import '../../style/themes/index';
|
||||
// @import '../../style/mixins/index';
|
||||
|
||||
@upload-prefix-cls: ~'@{ant-prefix}-upload';
|
||||
@upload-item: ~'@{ant-prefix}-upload-list-item';
|
||||
// @upload-prefix-cls: ~'@{ant-prefix}-upload';
|
||||
// @upload-item: ~'@{ant-prefix}-upload-list-item';
|
||||
|
||||
.@{upload-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
// .@{upload-prefix-cls} {
|
||||
// &-rtl {
|
||||
// direction: rtl;
|
||||
// }
|
||||
|
||||
&&-select-picture-card {
|
||||
.@{upload-prefix-cls}-rtl& {
|
||||
margin-right: auto;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
// &&-select-picture-card {
|
||||
// .@{upload-prefix-cls}-rtl& {
|
||||
// margin-right: auto;
|
||||
// margin-left: 8px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.@{upload-prefix-cls}-list {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
// .@{upload-prefix-cls}-list {
|
||||
// &-rtl {
|
||||
// direction: rtl;
|
||||
// }
|
||||
|
||||
&-item-list-type-text {
|
||||
&:hover {
|
||||
.@{upload-prefix-cls}-list-item-name-icon-count-1 {
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
padding-right: 22px;
|
||||
padding-left: 14px;
|
||||
}
|
||||
}
|
||||
.@{upload-prefix-cls}-list-item-name-icon-count-2 {
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
padding-right: 22px;
|
||||
padding-left: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// &-item-list-type-text {
|
||||
// &:hover {
|
||||
// .@{upload-prefix-cls}-list-item-name-icon-count-1 {
|
||||
// .@{upload-prefix-cls}-list-rtl & {
|
||||
// padding-right: 22px;
|
||||
// padding-left: 14px;
|
||||
// }
|
||||
// }
|
||||
// .@{upload-prefix-cls}-list-item-name-icon-count-2 {
|
||||
// .@{upload-prefix-cls}-list-rtl & {
|
||||
// padding-right: 22px;
|
||||
// padding-left: 28px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
&-item {
|
||||
&-name {
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
padding-right: @font-size-base + 8px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
// &-item {
|
||||
// &-name {
|
||||
// .@{upload-prefix-cls}-list-rtl & {
|
||||
// padding-right: @font-size-base + 8px;
|
||||
// padding-left: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-name-icon-count-1 {
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
padding-left: 14px;
|
||||
}
|
||||
}
|
||||
// &-name-icon-count-1 {
|
||||
// .@{upload-prefix-cls}-list-rtl & {
|
||||
// padding-left: 14px;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-card-actions {
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
.@{iconfont-css-prefix} {
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
padding-right: 0;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
// &-card-actions {
|
||||
// .@{upload-prefix-cls}-list-rtl & {
|
||||
// right: auto;
|
||||
// left: 0;
|
||||
// }
|
||||
// .@{iconfont-css-prefix} {
|
||||
// .@{upload-prefix-cls}-list-rtl & {
|
||||
// padding-right: 0;
|
||||
// padding-left: 5px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
&-info {
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
padding: 0 4px 0 12px;
|
||||
}
|
||||
}
|
||||
// &-info {
|
||||
// .@{upload-prefix-cls}-list-rtl & {
|
||||
// padding: 0 4px 0 12px;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-error &-card-actions {
|
||||
.@{iconfont-css-prefix} {
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
padding-right: 0;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
// &-error &-card-actions {
|
||||
// .@{iconfont-css-prefix} {
|
||||
// .@{upload-prefix-cls}-list-rtl & {
|
||||
// padding-right: 0;
|
||||
// padding-left: 5px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
&-progress {
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
padding-right: @font-size-base + 12px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// &-progress {
|
||||
// .@{upload-prefix-cls}-list-rtl & {
|
||||
// padding-right: @font-size-base + 12px;
|
||||
// padding-left: 0;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
&-picture,
|
||||
&-picture-card {
|
||||
.@{upload-item}-info {
|
||||
padding: 0;
|
||||
}
|
||||
// &-picture,
|
||||
// &-picture-card {
|
||||
// .@{upload-item}-info {
|
||||
// padding: 0;
|
||||
// }
|
||||
|
||||
.@{upload-item}-thumbnail {
|
||||
.@{upload-prefix-cls}-list-rtl& {
|
||||
right: 8px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
// .@{upload-item}-thumbnail {
|
||||
// .@{upload-prefix-cls}-list-rtl& {
|
||||
// right: 8px;
|
||||
// left: auto;
|
||||
// }
|
||||
// }
|
||||
|
||||
.@{upload-item}-icon {
|
||||
.@{upload-prefix-cls}-list-rtl& {
|
||||
right: 50%;
|
||||
left: auto;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
}
|
||||
// .@{upload-item}-icon {
|
||||
// .@{upload-prefix-cls}-list-rtl& {
|
||||
// right: 50%;
|
||||
// left: auto;
|
||||
// transform: translate(50%, -50%);
|
||||
// }
|
||||
// }
|
||||
|
||||
.@{upload-item}-name {
|
||||
.@{upload-prefix-cls}-list-rtl& {
|
||||
margin: 0 8px 0 0;
|
||||
padding-right: 48px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
// .@{upload-item}-name {
|
||||
// .@{upload-prefix-cls}-list-rtl& {
|
||||
// margin: 0 8px 0 0;
|
||||
// padding-right: 48px;
|
||||
// padding-left: 8px;
|
||||
// }
|
||||
// }
|
||||
|
||||
.@{upload-item}-name-icon-count-1 {
|
||||
.@{upload-prefix-cls}-list-rtl& {
|
||||
padding-right: 48px;
|
||||
padding-left: 18px;
|
||||
}
|
||||
}
|
||||
// .@{upload-item}-name-icon-count-1 {
|
||||
// .@{upload-prefix-cls}-list-rtl& {
|
||||
// padding-right: 48px;
|
||||
// padding-left: 18px;
|
||||
// }
|
||||
// }
|
||||
|
||||
.@{upload-item}-name-icon-count-2 {
|
||||
.@{upload-prefix-cls}-list-rtl& {
|
||||
padding-right: 48px;
|
||||
padding-left: 36px;
|
||||
}
|
||||
}
|
||||
// .@{upload-item}-name-icon-count-2 {
|
||||
// .@{upload-prefix-cls}-list-rtl& {
|
||||
// padding-right: 48px;
|
||||
// padding-left: 36px;
|
||||
// }
|
||||
// }
|
||||
|
||||
.@{upload-item}-progress {
|
||||
.@{upload-prefix-cls}-list-rtl& {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// .@{upload-item}-progress {
|
||||
// .@{upload-prefix-cls}-list-rtl& {
|
||||
// padding-right: 0;
|
||||
// padding-left: 0;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
&-picture-card {
|
||||
&-container {
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
margin: 0 0 @margin-xs @margin-xs;
|
||||
}
|
||||
}
|
||||
// &-picture-card {
|
||||
// &-container {
|
||||
// .@{upload-prefix-cls}-list-rtl & {
|
||||
// margin: 0 0 @margin-xs @margin-xs;
|
||||
// }
|
||||
// }
|
||||
|
||||
.@{upload-item}-actions {
|
||||
.@{upload-prefix-cls}-list-rtl& {
|
||||
right: 50%;
|
||||
left: auto;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
}
|
||||
// .@{upload-item}-actions {
|
||||
// .@{upload-prefix-cls}-list-rtl& {
|
||||
// right: 50%;
|
||||
// left: auto;
|
||||
// transform: translate(50%, -50%);
|
||||
// }
|
||||
// }
|
||||
|
||||
.@{upload-item}-file + .@{upload-item}-name {
|
||||
.@{upload-prefix-cls}-list-rtl& {
|
||||
margin: 8px 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// .@{upload-item}-file + .@{upload-item}-name {
|
||||
// .@{upload-prefix-cls}-list-rtl& {
|
||||
// margin: 8px 0 0;
|
||||
// padding: 0;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
14
components/upload/style/rtl.tsx
Normal file
14
components/upload/style/rtl.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
import type { GenerateStyle, FullToken } from '../../_util/theme';
|
||||
|
||||
// =========================== Motion ===========================
|
||||
const genRtlStyle: GenerateStyle<FullToken<'Upload'>> = token => {
|
||||
const { componentCls } = token;
|
||||
|
||||
return {
|
||||
[`${componentCls}-rtl`]: {
|
||||
direction: 'rtl',
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export default genRtlStyle;
|
||||
Loading…
Reference in New Issue
Block a user