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,78 +37322,70 @@ 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"
|
||||
class="config-upload-icon"
|
||||
>
|
||||
<span
|
||||
class="config-upload-span"
|
||||
aria-label="paper-clip"
|
||||
class="anticon anticon-paper-clip"
|
||||
role="img"
|
||||
>
|
||||
<div
|
||||
class="config-upload-text-icon"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="paper-clip"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<span
|
||||
aria-label="paper-clip"
|
||||
class="anticon anticon-paper-clip"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="paper-clip"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="config-upload-list-item-name"
|
||||
title="xxx.png"
|
||||
>
|
||||
xxx.png
|
||||
</span>
|
||||
<span
|
||||
class="config-upload-list-item-card-actions"
|
||||
>
|
||||
<button
|
||||
class="config-btn config-btn-text config-btn-sm config-btn-icon-only config-upload-list-item-card-actions-btn"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="delete"
|
||||
class="anticon anticon-delete"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
<path
|
||||
d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="config-upload-list-item-name"
|
||||
title="xxx.png"
|
||||
>
|
||||
xxx.png
|
||||
</span>
|
||||
<span
|
||||
class="config-upload-list-item-actions"
|
||||
>
|
||||
<button
|
||||
class="config-btn config-btn-text config-btn-sm config-btn-icon-only config-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="delete"
|
||||
class="anticon anticon-delete"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</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,78 +37416,70 @@ 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"
|
||||
class="config-upload-icon"
|
||||
>
|
||||
<span
|
||||
class="config-upload-span"
|
||||
aria-label="paper-clip"
|
||||
class="anticon anticon-paper-clip"
|
||||
role="img"
|
||||
>
|
||||
<div
|
||||
class="config-upload-text-icon"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="paper-clip"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<span
|
||||
aria-label="paper-clip"
|
||||
class="anticon anticon-paper-clip"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="paper-clip"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="config-upload-list-item-name"
|
||||
title="xxx.png"
|
||||
>
|
||||
xxx.png
|
||||
</span>
|
||||
<span
|
||||
class="config-upload-list-item-card-actions"
|
||||
>
|
||||
<button
|
||||
class="config-btn config-btn-text config-btn-sm config-btn-icon-only config-upload-list-item-card-actions-btn"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="delete"
|
||||
class="anticon anticon-delete"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
<path
|
||||
d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="config-upload-list-item-name"
|
||||
title="xxx.png"
|
||||
>
|
||||
xxx.png
|
||||
</span>
|
||||
<span
|
||||
class="config-upload-list-item-actions"
|
||||
>
|
||||
<button
|
||||
class="config-btn config-btn-text config-btn-sm config-btn-icon-only config-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="delete"
|
||||
class="anticon anticon-delete"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</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,78 +37510,70 @@ 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"
|
||||
class="config-upload-icon"
|
||||
>
|
||||
<span
|
||||
class="config-upload-span"
|
||||
aria-label="paper-clip"
|
||||
class="anticon anticon-paper-clip"
|
||||
role="img"
|
||||
>
|
||||
<div
|
||||
class="config-upload-text-icon"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="paper-clip"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<span
|
||||
aria-label="paper-clip"
|
||||
class="anticon anticon-paper-clip"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="paper-clip"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="config-upload-list-item-name"
|
||||
title="xxx.png"
|
||||
>
|
||||
xxx.png
|
||||
</span>
|
||||
<span
|
||||
class="config-upload-list-item-card-actions"
|
||||
>
|
||||
<button
|
||||
class="config-btn config-btn-text config-btn-sm config-btn-icon-only config-upload-list-item-card-actions-btn"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="delete"
|
||||
class="anticon anticon-delete"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
<path
|
||||
d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="config-upload-list-item-name"
|
||||
title="xxx.png"
|
||||
>
|
||||
xxx.png
|
||||
</span>
|
||||
<span
|
||||
class="config-upload-list-item-actions"
|
||||
>
|
||||
<button
|
||||
class="config-btn config-btn-text config-btn-sm config-btn-icon-only config-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="delete"
|
||||
class="anticon anticon-delete"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</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,78 +37604,70 @@ 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"
|
||||
class="ant-upload-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-upload-span"
|
||||
aria-label="paper-clip"
|
||||
class="anticon anticon-paper-clip"
|
||||
role="img"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-text-icon"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="paper-clip"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<span
|
||||
aria-label="paper-clip"
|
||||
class="anticon anticon-paper-clip"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="paper-clip"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-upload-list-item-name"
|
||||
title="xxx.png"
|
||||
>
|
||||
xxx.png
|
||||
</span>
|
||||
<span
|
||||
class="ant-upload-list-item-card-actions"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="delete"
|
||||
class="anticon anticon-delete"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
<path
|
||||
d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-upload-list-item-name"
|
||||
title="xxx.png"
|
||||
>
|
||||
xxx.png
|
||||
</span>
|
||||
<span
|
||||
class="ant-upload-list-item-actions"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="delete"
|
||||
class="anticon anticon-delete"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</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,78 +37698,70 @@ 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"
|
||||
class="ant-upload-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-upload-span"
|
||||
aria-label="paper-clip"
|
||||
class="anticon anticon-paper-clip"
|
||||
role="img"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-text-icon"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="paper-clip"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<span
|
||||
aria-label="paper-clip"
|
||||
class="anticon anticon-paper-clip"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="paper-clip"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-upload-list-item-name"
|
||||
title="xxx.png"
|
||||
>
|
||||
xxx.png
|
||||
</span>
|
||||
<span
|
||||
class="ant-upload-list-item-card-actions"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="delete"
|
||||
class="anticon anticon-delete"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
<path
|
||||
d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-upload-list-item-name"
|
||||
title="xxx.png"
|
||||
>
|
||||
xxx.png
|
||||
</span>
|
||||
<span
|
||||
class="ant-upload-list-item-actions"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="delete"
|
||||
class="anticon anticon-delete"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</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,78 +37792,70 @@ 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"
|
||||
class="prefix-Upload-icon"
|
||||
>
|
||||
<span
|
||||
class="prefix-Upload-span"
|
||||
aria-label="paper-clip"
|
||||
class="anticon anticon-paper-clip"
|
||||
role="img"
|
||||
>
|
||||
<div
|
||||
class="prefix-Upload-text-icon"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="paper-clip"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<span
|
||||
aria-label="paper-clip"
|
||||
class="anticon anticon-paper-clip"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="paper-clip"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="prefix-Upload-list-item-name"
|
||||
title="xxx.png"
|
||||
>
|
||||
xxx.png
|
||||
</span>
|
||||
<span
|
||||
class="prefix-Upload-list-item-card-actions"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only prefix-Upload-list-item-card-actions-btn"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="delete"
|
||||
class="anticon anticon-delete"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
<path
|
||||
d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="prefix-Upload-list-item-name"
|
||||
title="xxx.png"
|
||||
>
|
||||
xxx.png
|
||||
</span>
|
||||
<span
|
||||
class="prefix-Upload-list-item-actions"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only prefix-Upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="delete"
|
||||
class="anticon anticon-delete"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</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>
|
||||
`;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -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