mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 05:05:48 +08:00
Code Issues Actions 43 Packages Projects Releases Wiki Activity

feat: Upload support cssVar (#45820)

Browse Source 
* feat: Upload support cssVar

* feat: optimize code

* Apply suggestions from code review

Signed-off-by: MadCcc <1075746765@qq.com>

* feat: update size limit

* feat: optimize code

* feat: optimize code

---------

Signed-off-by: MadCcc <1075746765@qq.com>
Signed-off-by: MadCcc <madccc@foxmail.com>
Co-authored-by: MadCcc <madccc@foxmail.com>
This commit is contained in:
kiner-tang(文辉) 2023-11-13 19:44:27 +08:00 committed by GitHub
parent 86e3d37935
commit 49ffbe2c82
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 54 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/upload/Upload.tsx
View File

@ -18,6 +18,7 @@ import type {
UploadProps,
} from './interface';
import useStyle from './style';
import useCSSVar from './style/cssVar';
import UploadList from './UploadList';
import { file2Obj, getFileItem, removeFileItem, updateFileList } from './utils';
@ -363,7 +364,8 @@ const InternalUpload: React.ForwardRefRenderFunction<UploadRef, UploadProps> = (
delete rcUploadProps.id;
}
const [wrapSSR, hashId] = useStyle(prefixCls);
const [, hashId] = useStyle(prefixCls);
const wrapCSSVar = useCSSVar(prefixCls);
const [contextLocale] = useLocale('Upload', defaultLocale.Upload);
@ -434,7 +436,7 @@ const InternalUpload: React.ForwardRefRenderFunction<UploadRef, UploadProps> = (
[`${prefixCls}-rtl`]: direction === 'rtl',
});
return wrapSSR(
return wrapCSSVar(
<span className={wrapperCls}>
<div
className={dragCls}
@ -465,12 +467,12 @@ const InternalUpload: React.ForwardRefRenderFunction<UploadRef, UploadProps> = (
const uploadButton = renderUploadButton(children ? undefined : { display: 'none' });
if (listType === 'picture-card' || listType === 'picture-circle') {
return wrapSSR(
return wrapCSSVar(
<span className={wrapperCls}>{renderUploadList(uploadButton, !!children)}</span>,
);
}
return wrapSSR(
return wrapCSSVar(
<span className={wrapperCls}>
{uploadButton}
{renderUploadList()}

4
components/upload/style/cssVar.ts Normal file
View File

@ -0,0 +1,4 @@
import { genCSSVarRegister } from '../../theme/internal';
import { prepareComponentToken } from '.';
export default genCSSVarRegister('Upload', prepareComponentToken);

7
components/upload/style/dragger.ts
View File

@ -1,3 +1,4 @@
import { unit } from '@ant-design/cssinjs';
import type { UploadToken } from '.';
import type { GenerateStyle } from '../../theme/internal';
@ -12,13 +13,13 @@ const genDraggerStyle: GenerateStyle<UploadToken> = (token) => {
height: '100%',
textAlign: 'center',
background: token.colorFillAlter,
border: `${token.lineWidth}px dashed ${token.colorBorder}`,
border: `${unit(token.lineWidth)} dashed ${token.colorBorder}`,
borderRadius: token.borderRadiusLG,
cursor: 'pointer',
transition: `border-color ${token.motionDurationSlow}`,
[componentCls]: {
padding: `${token.padding}px 0`,
padding: `${unit(token.padding)} 0`,
},
[`${componentCls}-btn`]: {
@ -50,7 +51,7 @@ const genDraggerStyle: GenerateStyle<UploadToken> = (token) => {
},
[`p${componentCls}-text`]: {
margin: `0 0 ${token.marginXXS}px`,
margin: `0 0 ${unit(token.marginXXS)}`,
color: token.colorTextHeading,
fontSize: token.fontSizeLG,
},

25
components/upload/style/index.ts
View File

@ -1,6 +1,6 @@
import { resetComponent } from '../../style';
import { genCollapseMotion } from '../../style/motion';
import type { FullToken, GenerateStyle } from '../../theme/internal';
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import genDraggerStyle from './dragger';
import genListStyle from './list';
@ -17,9 +17,9 @@ export interface ComponentToken {
}
export interface UploadToken extends FullToken<'Upload'> {
uploadThumbnailSize: number;
uploadProgressOffset: number;
uploadPicCardSize: number;
uploadThumbnailSize: number | string;
uploadProgressOffset: number | string;
uploadPicCardSize: number | string;
}
const genBaseStyle: GenerateStyle<UploadToken> = (token) => {
@ -48,17 +48,20 @@ const genBaseStyle: GenerateStyle<UploadToken> = (token) => {
};
};
export const prepareComponentToken: GetDefaultToken<'Upload'> = (token) => ({
actionsColor: token.colorTextDescription,
});
// ============================== Export ==============================
export default genComponentStyleHook(
'Upload',
(token) => {
const { fontSizeHeading3, fontSize, lineHeight, lineWidth, controlHeightLG } = token;
const listItemHeightSM = Math.round(fontSize * lineHeight);
const { fontSizeHeading3, fontHeight, lineWidth, controlHeightLG, calc } = token;
const uploadToken = mergeToken<UploadToken>(token, {
uploadThumbnailSize: fontSizeHeading3 * 2,
uploadProgressOffset: listItemHeightSM / 2 + lineWidth,
uploadPicCardSize: controlHeightLG * 2.55,
uploadThumbnailSize: calc(fontSizeHeading3).mul(2).equal(),
uploadProgressOffset: calc(calc(fontHeight).div(2)).add(lineWidth).equal(),
uploadPicCardSize: calc(controlHeightLG).mul(2.55).equal(),
});
return [
@ -72,7 +75,5 @@ export default genComponentStyleHook(
genCollapseMotion(uploadToken),
];
},
(token) => ({
actionsColor: token.colorTextDescription,
}),
prepareComponentToken,
);

13
components/upload/style/list.ts
View File

@ -1,13 +1,14 @@
import { unit } from '@ant-design/cssinjs';
import type { UploadToken } from '.';
import { clearFix, textEllipsis } from '../../style';
import type { GenerateStyle } from '../../theme/internal';
const genListStyle: GenerateStyle<UploadToken> = (token) => {
const { componentCls, antCls, iconCls, fontSize, lineHeight } = token;
const { componentCls, antCls, iconCls, fontSize, lineHeight, calc } = token;
const itemCls = `${componentCls}-list-item`;
const actionsCls = `${itemCls}-actions`;
const actionCls = `${itemCls}-action`;
const listItemHeightSM = Math.round(fontSize * lineHeight);
const listItemHeightSM = token.fontHeightSM;
return {
[`${componentCls}-wrapper`]: {
@ -17,7 +18,7 @@ const genListStyle: GenerateStyle<UploadToken> = (token) => {
[itemCls]: {
position: 'relative',
height: token.lineHeight * fontSize,
height: calc(token.lineHeight).mul(fontSize).equal(),
marginTop: token.marginXS,
fontSize,
display: 'flex',
@ -30,7 +31,7 @@ const genListStyle: GenerateStyle<UploadToken> = (token) => {
[`${itemCls}-name`]: {
...textEllipsis,
padding: `0 ${token.paddingXS}px`,
padding: `0 ${unit(token.paddingXS)}`,
lineHeight,
flex: 'auto',
transition: `all ${token.motionDurationSlow}`,
@ -75,9 +76,9 @@ const genListStyle: GenerateStyle<UploadToken> = (token) => {
[`${itemCls}-progress`]: {
position: 'absolute',
bottom: -token.uploadProgressOffset,
bottom: token.calc(token.uploadProgressOffset).mul(-1).equal(),
width: '100%',
paddingInlineStart: fontSize + token.paddingXS,
paddingInlineStart: calc(fontSize).add(token.paddingXS).equal(),
fontSize,
lineHeight: 0,
pointerEvents: 'none',

35
components/upload/style/picture.ts
View File

@ -1,11 +1,13 @@
import { blue } from '@ant-design/colors';
import { TinyColor } from '@ctrl/tinycolor';
import type { UploadToken } from '.';
import { clearFix, textEllipsis } from '../../style';
import type { GenerateStyle } from '../../theme/internal';
import { unit } from '@ant-design/cssinjs';
const genPictureStyle: GenerateStyle<UploadToken> = (token) => {
const { componentCls, iconCls, uploadThumbnailSize, uploadProgressOffset } = token;
const { componentCls, iconCls, uploadThumbnailSize, uploadProgressOffset, calc } = token;
const listCls = `${componentCls}-list`;
const itemCls = `${listCls}-item`;
@ -19,9 +21,12 @@ const genPictureStyle: GenerateStyle<UploadToken> = (token) => {
`]: {
[itemCls]: {
position: 'relative',
height: uploadThumbnailSize + token.lineWidth * 2 + token.paddingXS * 2,
height: calc(uploadThumbnailSize)
.add(calc(token.lineWidth).mul(2))
.add(calc(token.paddingXS).mul(2))
.equal(),
padding: token.paddingXS,
border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
border: `${unit(token.lineWidth)} ${token.lineType} ${token.colorBorder}`,
borderRadius: token.borderRadiusLG,
'&:hover': {
@ -32,7 +37,7 @@ const genPictureStyle: GenerateStyle<UploadToken> = (token) => {
...textEllipsis,
width: uploadThumbnailSize,
height: uploadThumbnailSize,
lineHeight: `${uploadThumbnailSize + token.paddingSM}px`,
lineHeight: unit(calc(uploadThumbnailSize).add(token.paddingSM).equal()),
textAlign: 'center',
flex: 'none',
@ -51,9 +56,9 @@ const genPictureStyle: GenerateStyle<UploadToken> = (token) => {
[`${itemCls}-progress`]: {
bottom: uploadProgressOffset,
width: `calc(100% - ${token.paddingSM * 2}px)`,
width: `calc(100% - ${unit(calc(token.paddingSM).mul(2).equal())})`,
marginTop: 0,
paddingInlineStart: uploadThumbnailSize + token.paddingXS,
paddingInlineStart: calc(uploadThumbnailSize).add(token.paddingXS).equal(),
},
},
@ -90,7 +95,7 @@ const genPictureStyle: GenerateStyle<UploadToken> = (token) => {
};
const genPictureCardStyle: GenerateStyle<UploadToken> = (token) => {
const { componentCls, iconCls, fontSizeLG, colorTextLightSolid } = token;
const { componentCls, iconCls, fontSizeLG, colorTextLightSolid, calc } = token;
const listCls = `${componentCls}-list`;
const itemCls = `${listCls}-item`;
@ -114,7 +119,7 @@ const genPictureCardStyle: GenerateStyle<UploadToken> = (token) => {
textAlign: 'center',
verticalAlign: 'top',
backgroundColor: token.colorFillAlter,
border: `${token.lineWidth}px dashed ${token.colorBorder}`,
border: `${unit(token.lineWidth)} dashed ${token.colorBorder}`,
borderRadius: token.borderRadiusLG,
cursor: 'pointer',
transition: `border-color ${token.motionDurationSlow}`,
@ -138,8 +143,8 @@ const genPictureCardStyle: GenerateStyle<UploadToken> = (token) => {
display: 'inline-block',
width: uploadPictureCardSize,
height: uploadPictureCardSize,
marginBlock: `0 ${token.marginXS}px`,
marginInline: `0 ${token.marginXS}px`,
marginBlock: `0 ${unit(token.marginXS)}`,
marginInline: `0 ${unit(token.marginXS)}`,
verticalAlign: 'top',
},
@ -154,8 +159,8 @@ const genPictureCardStyle: GenerateStyle<UploadToken> = (token) => {
'&::before': {
position: 'absolute',
zIndex: 1,
width: `calc(100% - ${token.paddingXS * 2}px)`,
height: `calc(100% - ${token.paddingXS * 2}px)`,
width: `calc(100% - ${unit(calc(token.paddingXS).mul(2).equal())})`,
height: `calc(100% - ${unit(calc(token.paddingXS).mul(2).equal())})`,
backgroundColor: token.colorBgMask,
opacity: 0,
transition: `all ${token.motionDurationSlow}`,
@ -182,7 +187,7 @@ const genPictureCardStyle: GenerateStyle<UploadToken> = (token) => {
[`${iconCls}-eye, ${iconCls}-download, ${iconCls}-delete`]: {
zIndex: 10,
width: fontSizeLG,
margin: `0 ${token.marginXXS}px`,
margin: `0 ${unit(token.marginXXS)}`,
fontSize: fontSizeLG,
cursor: 'pointer',
transition: `all ${token.motionDurationSlow}`,
@ -219,7 +224,7 @@ const genPictureCardStyle: GenerateStyle<UploadToken> = (token) => {
position: 'absolute',
bottom: token.margin,
display: 'block',
width: `calc(100% - ${token.paddingXS * 2}px)`,
width: `calc(100% - ${unit(calc(token.paddingXS).mul(2).equal())})`,
},
[`${itemCls}-uploading`]: {
@ -234,7 +239,7 @@ const genPictureCardStyle: GenerateStyle<UploadToken> = (token) => {
[`${itemCls}-progress`]: {
bottom: token.marginXL,
width: `calc(100% - ${token.paddingXS * 2}px)`,
width: `calc(100% - ${unit(calc(token.paddingXS).mul(2).equal())})`,
paddingInlineStart: 0,
},
},