test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 11:08:45 +08:00
Code Issues Actions 68 Packages Projects Releases Wiki Activity

refactor: spin full token (#35746)

Browse Source 
* refactor: spin full token

* refactor: rename token
This commit is contained in:
MadCcc 2022-05-26 16:05:21 +08:00 committed by GitHub
parent 34299b39ea
commit 24f684925a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 31 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/_util/theme/interface.ts
View File

@ -25,6 +25,7 @@ import type { ComponentToken as SegmentedComponentToken } from '../../segmented/
import type { ComponentToken as SelectComponentToken } from '../../select/style'; import type { ComponentToken as SelectComponentToken } from '../../select/style';
import type { ComponentToken as SliderComponentToken } from '../../slider/style'; import type { ComponentToken as SliderComponentToken } from '../../slider/style';
import type { ComponentToken as SpaceComponentToken } from '../../space/style'; import type { ComponentToken as SpaceComponentToken } from '../../space/style';
import type { ComponentToken as SpinComponentToken } from '../../spin/style';
import type { ComponentToken as TimelineComponentToken } from '../../timeline/style'; import type { ComponentToken as TimelineComponentToken } from '../../timeline/style';
import type { ComponentToken as TypographyComponentToken } from '../../typography/style'; import type { ComponentToken as TypographyComponentToken } from '../../typography/style';
import type { ComponentToken as UploadComponentToken } from '../../upload/style'; import type { ComponentToken as UploadComponentToken } from '../../upload/style';
@ -95,7 +96,7 @@ export interface OverrideToken {
Select?: SelectComponentToken; Select?: SelectComponentToken;
Skeleton?: {}; Skeleton?: {};
Slider?: SliderComponentToken; Slider?: SliderComponentToken;
Spin?: {}; Spin?: SpinComponentToken;
Statistic?: {}; Statistic?: {};
Switch?: {}; Switch?: {};
Tag?: {}; Tag?: {};

48
components/spin/style/index.tsx
View File

@ -1,8 +1,12 @@
// deps-lint-skip-all // deps-lint-skip-all
import type { CSSObject } from '@ant-design/cssinjs'; import type { CSSObject } from '@ant-design/cssinjs';
import { Keyframes } from '@ant-design/cssinjs'; import { Keyframes } from '@ant-design/cssinjs';
import type { GenerateStyle, FullToken } from '../../_util/theme'; import type { FullToken, GenerateStyle } from '../../_util/theme';
import { resetComponent, genComponentStyleHook, mergeToken } from '../../_util/theme'; import { genComponentStyleHook, mergeToken, resetComponent } from '../../_util/theme';
export interface ComponentToken {
contentHeight: number;
}
interface SpinToken extends FullToken<'Spin'> { interface SpinToken extends FullToken<'Spin'> {
spinDotDefault: string; spinDotDefault: string;
@ -46,7 +50,7 @@ const genSpinStyle: GenerateStyle<SpinToken> = (token: SpinToken): CSSObject =>
display: 'block', display: 'block',
width: '100%', width: '100%',
height: '100%', height: '100%',
maxHeight: 400, // FIXME: hard code in v4 maxHeight: token.contentHeight,
[`${token.componentCls}-dot`]: { [`${token.componentCls}-dot`]: {
position: 'absolute', position: 'absolute',
@ -60,7 +64,7 @@ const genSpinStyle: GenerateStyle<SpinToken> = (token: SpinToken): CSSObject =>
top: '50%', top: '50%',
width: '100%', width: '100%',
paddingTop: (token.spinDotSize - token.fontSize) / 2 + 2, paddingTop: (token.spinDotSize - token.fontSize) / 2 + 2,
textShadow: `0 1px 2px ${token.colorBgComponent}`, textShadow: `0 1px 2px ${token.colorBgComponent}`, // FIXME: shadow
}, },
[`&${token.componentCls}-show-text ${token.componentCls}-dot`]: { [`&${token.componentCls}-show-text ${token.componentCls}-dot`]: {
@ -144,8 +148,8 @@ const genSpinStyle: GenerateStyle<SpinToken> = (token: SpinToken): CSSObject =>
'&-item': { '&-item': {
position: 'absolute', position: 'absolute',
display: 'block', display: 'block',
width: 9, // FIXME: hard code in v4 width: (token.spinDotSize - token.marginXXS / 2) / 2,
height: 9, // FIXME: hard code in v4 height: (token.spinDotSize - token.marginXXS / 2) / 2,
backgroundColor: token.colorPrimary, backgroundColor: token.colorPrimary,
borderRadius: '100%', borderRadius: '100%',
transform: 'scale(0.75)', transform: 'scale(0.75)',
@ -198,8 +202,8 @@ const genSpinStyle: GenerateStyle<SpinToken> = (token: SpinToken): CSSObject =>
fontSize: token.spinDotSizeSM, fontSize: token.spinDotSizeSM,
i: { i: {
width: 6, // FIXME: hard code in v4 width: (token.spinDotSizeSM - token.marginXXS / 2) / 2,
height: 6, // FIXME: hard code in v4 height: (token.spinDotSizeSM - token.marginXXS / 2) / 2,
}, },
}, },
@ -208,8 +212,8 @@ const genSpinStyle: GenerateStyle<SpinToken> = (token: SpinToken): CSSObject =>
fontSize: token.spinDotSizeLG, fontSize: token.spinDotSizeLG,
i: { i: {
width: 14, // FIXME: hard code in v4 width: (token.spinDotSizeLG - token.marginXXS) / 2,
height: 14, // FIXME: hard code in v4 height: (token.spinDotSizeLG - token.marginXXS) / 2,
}, },
}, },
@ -220,12 +224,18 @@ const genSpinStyle: GenerateStyle<SpinToken> = (token: SpinToken): CSSObject =>
}); });
// ============================== Export ============================== // ============================== Export ==============================
export default genComponentStyleHook('Spin', token => { export default genComponentStyleHook(
const spinToken = mergeToken<SpinToken>(token, { 'Spin',
spinDotDefault: token.colorTextSecondary, token => {
spinDotSize: 20, // FIXME: hard code in v4 const spinToken = mergeToken<SpinToken>(token, {
spinDotSizeSM: 14, // FIXME: hard code in v4 spinDotDefault: token.colorTextSecondary,
spinDotSizeLG: 32, // FIXME: hard code in v4 spinDotSize: token.controlHeightLG / 2,
}); spinDotSizeSM: token.controlHeightLG * 0.35,
return [genSpinStyle(spinToken)]; spinDotSizeLG: token.controlHeight,
}); });
return [genSpinStyle(spinToken)];
},
{
contentHeight: 400,
},
);