diff --git a/components/upload/Upload.tsx b/components/upload/Upload.tsx index 8d9914f258..11c43c9e90 100644 --- a/components/upload/Upload.tsx +++ b/components/upload/Upload.tsx @@ -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 = ( 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 = ( [`${prefixCls}-rtl`]: direction === 'rtl', }); - return wrapSSR( + return wrapCSSVar(
= ( const uploadButton = renderUploadButton(children ? undefined : { display: 'none' }); if (listType === 'picture-card' || listType === 'picture-circle') { - return wrapSSR( + return wrapCSSVar( {renderUploadList(uploadButton, !!children)}, ); } - return wrapSSR( + return wrapCSSVar( {uploadButton} {renderUploadList()} diff --git a/components/upload/style/cssVar.ts b/components/upload/style/cssVar.ts new file mode 100644 index 0000000000..b4a0efd816 --- /dev/null +++ b/components/upload/style/cssVar.ts @@ -0,0 +1,4 @@ +import { genCSSVarRegister } from '../../theme/internal'; +import { prepareComponentToken } from '.'; + +export default genCSSVarRegister('Upload', prepareComponentToken); diff --git a/components/upload/style/dragger.ts b/components/upload/style/dragger.ts index 40e54e6f31..0ef6b2c2ef 100644 --- a/components/upload/style/dragger.ts +++ b/components/upload/style/dragger.ts @@ -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 = (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 = (token) => { }, [`p${componentCls}-text`]: { - margin: `0 0 ${token.marginXXS}px`, + margin: `0 0 ${unit(token.marginXXS)}`, color: token.colorTextHeading, fontSize: token.fontSizeLG, }, diff --git a/components/upload/style/index.ts b/components/upload/style/index.ts index e10bf12334..60b8848acb 100644 --- a/components/upload/style/index.ts +++ b/components/upload/style/index.ts @@ -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 = (token) => { @@ -48,17 +48,20 @@ const genBaseStyle: GenerateStyle = (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(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, ); diff --git a/components/upload/style/list.ts b/components/upload/style/list.ts index a986bd2a28..1ed153fee9 100644 --- a/components/upload/style/list.ts +++ b/components/upload/style/list.ts @@ -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 = (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 = (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 = (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 = (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', diff --git a/components/upload/style/picture.ts b/components/upload/style/picture.ts index 93444ccf7c..2db9883ebf 100644 --- a/components/upload/style/picture.ts +++ b/components/upload/style/picture.ts @@ -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 = (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 = (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 = (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 = (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 = (token) => { }; const genPictureCardStyle: GenerateStyle = (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 = (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 = (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 = (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 = (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 = (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 = (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, }, },