parent
e1cfc828ec
commit
2d3f40aa3f
|
@ -5,6 +5,7 @@ import initDefaultProps from '../_util/props-util/initDefaultProps';
|
||||||
import useConfigInject from '../config-provider/hooks/useConfigInject';
|
import useConfigInject from '../config-provider/hooks/useConfigInject';
|
||||||
import Element, { skeletonElementProps } from './Element';
|
import Element, { skeletonElementProps } from './Element';
|
||||||
import useStyle from './style';
|
import useStyle from './style';
|
||||||
|
import useCSSVarCls from '../config-provider/hooks/useCssVarCls';
|
||||||
|
|
||||||
export const avatarProps = () => {
|
export const avatarProps = () => {
|
||||||
return {
|
return {
|
||||||
|
@ -24,7 +25,8 @@ const SkeletonAvatar = defineComponent({
|
||||||
}),
|
}),
|
||||||
setup(props) {
|
setup(props) {
|
||||||
const { prefixCls } = useConfigInject('skeleton', props);
|
const { prefixCls } = useConfigInject('skeleton', props);
|
||||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
const rootCls = useCSSVarCls(prefixCls);
|
||||||
|
const [wrapSSR, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
|
||||||
const cls = computed(() =>
|
const cls = computed(() =>
|
||||||
classNames(
|
classNames(
|
||||||
prefixCls.value,
|
prefixCls.value,
|
||||||
|
@ -32,6 +34,8 @@ const SkeletonAvatar = defineComponent({
|
||||||
{
|
{
|
||||||
[`${prefixCls.value}-active`]: props.active,
|
[`${prefixCls.value}-active`]: props.active,
|
||||||
},
|
},
|
||||||
|
rootCls.value,
|
||||||
|
cssVarCls.value,
|
||||||
hashId.value,
|
hashId.value,
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|
|
@ -5,6 +5,7 @@ import useConfigInject from '../config-provider/hooks/useConfigInject';
|
||||||
import { initDefaultProps } from '../_util/props-util';
|
import { initDefaultProps } from '../_util/props-util';
|
||||||
import Element, { skeletonElementProps } from './Element';
|
import Element, { skeletonElementProps } from './Element';
|
||||||
import useStyle from './style';
|
import useStyle from './style';
|
||||||
|
import useCSSVarCls from '../config-provider/hooks/useCssVarCls';
|
||||||
|
|
||||||
export const skeletonButtonProps = () => {
|
export const skeletonButtonProps = () => {
|
||||||
return {
|
return {
|
||||||
|
@ -24,7 +25,8 @@ const SkeletonButton = defineComponent({
|
||||||
}),
|
}),
|
||||||
setup(props) {
|
setup(props) {
|
||||||
const { prefixCls } = useConfigInject('skeleton', props);
|
const { prefixCls } = useConfigInject('skeleton', props);
|
||||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
const rootCls = useCSSVarCls(prefixCls);
|
||||||
|
const [wrapSSR, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
|
||||||
const cls = computed(() =>
|
const cls = computed(() =>
|
||||||
classNames(
|
classNames(
|
||||||
prefixCls.value,
|
prefixCls.value,
|
||||||
|
@ -33,6 +35,8 @@ const SkeletonButton = defineComponent({
|
||||||
[`${prefixCls.value}-active`]: props.active,
|
[`${prefixCls.value}-active`]: props.active,
|
||||||
[`${prefixCls.value}-block`]: props.block,
|
[`${prefixCls.value}-block`]: props.block,
|
||||||
},
|
},
|
||||||
|
rootCls.value,
|
||||||
|
cssVarCls.value,
|
||||||
hashId.value,
|
hashId.value,
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|
|
@ -5,6 +5,7 @@ import omit from '../_util/omit';
|
||||||
import type { SkeletonElementProps } from './Element';
|
import type { SkeletonElementProps } from './Element';
|
||||||
import { skeletonElementProps } from './Element';
|
import { skeletonElementProps } from './Element';
|
||||||
import useStyle from './style';
|
import useStyle from './style';
|
||||||
|
import useCSSVarCls from '../config-provider/hooks/useCssVarCls';
|
||||||
|
|
||||||
export type SkeletonImageProps = Omit<SkeletonElementProps, 'size' | 'shape' | 'active'>;
|
export type SkeletonImageProps = Omit<SkeletonElementProps, 'size' | 'shape' | 'active'>;
|
||||||
|
|
||||||
|
@ -17,9 +18,16 @@ const SkeletonImage = defineComponent({
|
||||||
props: omit(skeletonElementProps(), ['size', 'shape', 'active']),
|
props: omit(skeletonElementProps(), ['size', 'shape', 'active']),
|
||||||
setup(props) {
|
setup(props) {
|
||||||
const { prefixCls } = useConfigInject('skeleton', props);
|
const { prefixCls } = useConfigInject('skeleton', props);
|
||||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
const rootCls = useCSSVarCls(prefixCls);
|
||||||
|
const [wrapSSR, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
|
||||||
const cls = computed(() =>
|
const cls = computed(() =>
|
||||||
classNames(prefixCls.value, `${prefixCls.value}-element`, hashId.value),
|
classNames(
|
||||||
|
prefixCls.value,
|
||||||
|
`${prefixCls.value}-element`,
|
||||||
|
rootCls.value,
|
||||||
|
hashId.value,
|
||||||
|
cssVarCls.value,
|
||||||
|
),
|
||||||
);
|
);
|
||||||
return () => {
|
return () => {
|
||||||
return wrapSSR(
|
return wrapSSR(
|
||||||
|
|
|
@ -6,6 +6,7 @@ import type { SkeletonElementProps } from './Element';
|
||||||
import Element, { skeletonElementProps } from './Element';
|
import Element, { skeletonElementProps } from './Element';
|
||||||
import omit from '../_util/omit';
|
import omit from '../_util/omit';
|
||||||
import useStyle from './style';
|
import useStyle from './style';
|
||||||
|
import useCSSVarCls from '../config-provider/hooks/useCssVarCls';
|
||||||
|
|
||||||
export interface SkeletonInputProps extends Omit<SkeletonElementProps, 'size' | 'shape'> {
|
export interface SkeletonInputProps extends Omit<SkeletonElementProps, 'size' | 'shape'> {
|
||||||
size?: 'large' | 'small' | 'default';
|
size?: 'large' | 'small' | 'default';
|
||||||
|
@ -22,7 +23,8 @@ const SkeletonInput = defineComponent({
|
||||||
},
|
},
|
||||||
setup(props) {
|
setup(props) {
|
||||||
const { prefixCls } = useConfigInject('skeleton', props);
|
const { prefixCls } = useConfigInject('skeleton', props);
|
||||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
const rootCls = useCSSVarCls(prefixCls);
|
||||||
|
const [wrapSSR, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
|
||||||
const cls = computed(() =>
|
const cls = computed(() =>
|
||||||
classNames(
|
classNames(
|
||||||
prefixCls.value,
|
prefixCls.value,
|
||||||
|
@ -31,7 +33,9 @@ const SkeletonInput = defineComponent({
|
||||||
[`${prefixCls.value}-active`]: props.active,
|
[`${prefixCls.value}-active`]: props.active,
|
||||||
[`${prefixCls.value}-block`]: props.block,
|
[`${prefixCls.value}-block`]: props.block,
|
||||||
},
|
},
|
||||||
|
rootCls.value,
|
||||||
hashId.value,
|
hashId.value,
|
||||||
|
cssVarCls.value,
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
return () => {
|
return () => {
|
||||||
|
|
|
@ -10,6 +10,7 @@ import Paragraph from './Paragraph';
|
||||||
import useConfigInject from '../config-provider/hooks/useConfigInject';
|
import useConfigInject from '../config-provider/hooks/useConfigInject';
|
||||||
import Element from './Element';
|
import Element from './Element';
|
||||||
import useStyle from './style';
|
import useStyle from './style';
|
||||||
|
import useCSSVarCls from '../config-provider/hooks/useCssVarCls';
|
||||||
|
|
||||||
/* This only for skeleton internal. */
|
/* This only for skeleton internal. */
|
||||||
type SkeletonAvatarProps = Omit<AvatarProps, 'active'>;
|
type SkeletonAvatarProps = Omit<AvatarProps, 'active'>;
|
||||||
|
@ -90,7 +91,8 @@ const Skeleton = defineComponent({
|
||||||
}),
|
}),
|
||||||
setup(props, { slots }) {
|
setup(props, { slots }) {
|
||||||
const { prefixCls, direction } = useConfigInject('skeleton', props);
|
const { prefixCls, direction } = useConfigInject('skeleton', props);
|
||||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
const rootCls = useCSSVarCls(prefixCls);
|
||||||
|
const [wrapSSR, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
const { loading, avatar, title, paragraph, active, round } = props;
|
const { loading, avatar, title, paragraph, active, round } = props;
|
||||||
|
@ -155,7 +157,9 @@ const Skeleton = defineComponent({
|
||||||
[`${pre}-active`]: active,
|
[`${pre}-active`]: active,
|
||||||
[`${pre}-rtl`]: direction.value === 'rtl',
|
[`${pre}-rtl`]: direction.value === 'rtl',
|
||||||
[`${pre}-round`]: round,
|
[`${pre}-round`]: round,
|
||||||
|
[rootCls.value]: true,
|
||||||
[hashId.value]: true,
|
[hashId.value]: true,
|
||||||
|
[cssVarCls.value]: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
return wrapSSR(
|
return wrapSSR(
|
||||||
|
|
|
@ -1,19 +1,52 @@
|
||||||
import type { CSSObject } from '../../_util/cssinjs';
|
import type { CSSObject } from '../../_util/cssinjs';
|
||||||
import { Keyframes } from '../../_util/cssinjs';
|
import { Keyframes, unit } from '../../_util/cssinjs';
|
||||||
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
|
||||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
|
||||||
|
|
||||||
export type ComponentToken = {
|
import type { CSSUtil, FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
|
||||||
|
import { genStyleHooks, mergeToken } from '../../theme/internal';
|
||||||
|
|
||||||
|
export interface ComponentToken {
|
||||||
|
/** @deprecated use gradientFromColor instead. */
|
||||||
color: string;
|
color: string;
|
||||||
|
/** @deprecated use gradientToColor instead. */
|
||||||
colorGradientEnd: string;
|
colorGradientEnd: string;
|
||||||
};
|
/**
|
||||||
|
* @desc 渐变色起点颜色
|
||||||
|
* @descEN Start color of gradient
|
||||||
|
*/
|
||||||
|
gradientFromColor: string;
|
||||||
|
/**
|
||||||
|
* @desc 渐变色终点颜色
|
||||||
|
* @descEN End color of gradient
|
||||||
|
*/
|
||||||
|
gradientToColor: string;
|
||||||
|
/**
|
||||||
|
* @desc 标题骨架屏高度
|
||||||
|
* @descEN Height of title skeleton
|
||||||
|
*/
|
||||||
|
titleHeight: number | string;
|
||||||
|
/**
|
||||||
|
* @desc 骨架屏圆角
|
||||||
|
* @descEN Border radius of skeleton
|
||||||
|
*/
|
||||||
|
blockRadius: number;
|
||||||
|
/**
|
||||||
|
* @desc 段落骨架屏上间距
|
||||||
|
* @descEN Margin top of paragraph skeleton
|
||||||
|
*/
|
||||||
|
paragraphMarginTop: number;
|
||||||
|
/**
|
||||||
|
* @desc 段落骨架屏单行高度
|
||||||
|
* @descEN Line height of paragraph skeleton
|
||||||
|
*/
|
||||||
|
paragraphLiHeight: number;
|
||||||
|
}
|
||||||
|
|
||||||
const skeletonClsLoading = new Keyframes(`ant-skeleton-loading`, {
|
const skeletonClsLoading = new Keyframes(`ant-skeleton-loading`, {
|
||||||
'0%': {
|
'0%': {
|
||||||
transform: 'translateX(-37.5%)',
|
backgroundPosition: '100% 50%',
|
||||||
},
|
},
|
||||||
'100%': {
|
'100%': {
|
||||||
transform: 'translateX(37.5%)',
|
backgroundPosition: '0 50%',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -24,62 +57,44 @@ interface SkeletonToken extends FullToken<'Skeleton'> {
|
||||||
skeletonButtonCls: string;
|
skeletonButtonCls: string;
|
||||||
skeletonInputCls: string;
|
skeletonInputCls: string;
|
||||||
skeletonImageCls: string;
|
skeletonImageCls: string;
|
||||||
imageSizeBase: number;
|
imageSizeBase: number | string;
|
||||||
skeletonTitleHeight: number;
|
|
||||||
skeletonBlockRadius: number;
|
|
||||||
skeletonParagraphLineHeight: number;
|
|
||||||
skeletonParagraphMarginTop: number;
|
|
||||||
skeletonLoadingBackground: string;
|
skeletonLoadingBackground: string;
|
||||||
skeletonLoadingMotionDuration: string;
|
skeletonLoadingMotionDuration: string;
|
||||||
borderRadius: number;
|
borderRadius: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
const genSkeletonElementCommonSize = (size: number): CSSObject => ({
|
const genSkeletonElementCommonSize = (size: number | string): CSSObject => ({
|
||||||
height: size,
|
height: size,
|
||||||
lineHeight: `${size}px`,
|
lineHeight: unit(size),
|
||||||
});
|
});
|
||||||
|
|
||||||
const genSkeletonElementAvatarSize = (size: number): CSSObject => ({
|
const genSkeletonElementAvatarSize = (size: number | string): CSSObject => ({
|
||||||
width: size,
|
width: size,
|
||||||
...genSkeletonElementCommonSize(size),
|
...genSkeletonElementCommonSize(size),
|
||||||
});
|
});
|
||||||
|
|
||||||
const genSkeletonColor = (token: SkeletonToken): CSSObject => ({
|
const genSkeletonColor = (token: SkeletonToken): CSSObject => ({
|
||||||
position: 'relative',
|
|
||||||
// fix https://github.com/ant-design/ant-design/issues/36444
|
|
||||||
// https://monshin.github.io/202109/css/safari-border-radius-overflow-hidden/
|
|
||||||
/* stylelint-disable-next-line property-no-vendor-prefix,value-no-vendor-prefix */
|
|
||||||
zIndex: 0,
|
|
||||||
overflow: 'hidden',
|
|
||||||
background: 'transparent',
|
|
||||||
'&::after': {
|
|
||||||
position: 'absolute',
|
|
||||||
top: 0,
|
|
||||||
insetInlineEnd: '-150%',
|
|
||||||
bottom: 0,
|
|
||||||
insetInlineStart: '-150%',
|
|
||||||
background: token.skeletonLoadingBackground,
|
background: token.skeletonLoadingBackground,
|
||||||
|
backgroundSize: '400% 100%',
|
||||||
animationName: skeletonClsLoading,
|
animationName: skeletonClsLoading,
|
||||||
animationDuration: token.skeletonLoadingMotionDuration,
|
animationDuration: token.skeletonLoadingMotionDuration,
|
||||||
animationTimingFunction: 'ease',
|
animationTimingFunction: 'ease',
|
||||||
animationIterationCount: 'infinite',
|
animationIterationCount: 'infinite',
|
||||||
content: '""',
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
const genSkeletonElementInputSize = (size: number, calc: CSSUtil['calc']): CSSObject => ({
|
||||||
const genSkeletonElementInputSize = (size: number): CSSObject => ({
|
width: calc(size).mul(5).equal(),
|
||||||
width: size * 5,
|
minWidth: calc(size).mul(5).equal(),
|
||||||
minWidth: size * 5,
|
|
||||||
...genSkeletonElementCommonSize(size),
|
...genSkeletonElementCommonSize(size),
|
||||||
});
|
});
|
||||||
|
|
||||||
const genSkeletonElementAvatar = (token: SkeletonToken): CSSObject => {
|
const genSkeletonElementAvatar = (token: SkeletonToken): CSSObject => {
|
||||||
const { skeletonAvatarCls, color, controlHeight, controlHeightLG, controlHeightSM } = token;
|
const { skeletonAvatarCls, gradientFromColor, controlHeight, controlHeightLG, controlHeightSM } =
|
||||||
|
token;
|
||||||
return {
|
return {
|
||||||
[`${skeletonAvatarCls}`]: {
|
[skeletonAvatarCls]: {
|
||||||
display: 'inline-block',
|
display: 'inline-block',
|
||||||
verticalAlign: 'top',
|
verticalAlign: 'top',
|
||||||
background: color,
|
background: gradientFromColor,
|
||||||
...genSkeletonElementAvatarSize(controlHeight),
|
...genSkeletonElementAvatarSize(controlHeight),
|
||||||
},
|
},
|
||||||
[`${skeletonAvatarCls}${skeletonAvatarCls}-circle`]: {
|
[`${skeletonAvatarCls}${skeletonAvatarCls}-circle`]: {
|
||||||
|
@ -101,50 +116,51 @@ const genSkeletonElementInput = (token: SkeletonToken): CSSObject => {
|
||||||
skeletonInputCls,
|
skeletonInputCls,
|
||||||
controlHeightLG,
|
controlHeightLG,
|
||||||
controlHeightSM,
|
controlHeightSM,
|
||||||
color,
|
gradientFromColor,
|
||||||
|
calc,
|
||||||
} = token;
|
} = token;
|
||||||
return {
|
return {
|
||||||
[`${skeletonInputCls}`]: {
|
[skeletonInputCls]: {
|
||||||
display: 'inline-block',
|
display: 'inline-block',
|
||||||
verticalAlign: 'top',
|
verticalAlign: 'top',
|
||||||
background: color,
|
background: gradientFromColor,
|
||||||
borderRadius: borderRadiusSM,
|
borderRadius: borderRadiusSM,
|
||||||
...genSkeletonElementInputSize(controlHeight),
|
...genSkeletonElementInputSize(controlHeight, calc),
|
||||||
},
|
},
|
||||||
|
|
||||||
[`${skeletonInputCls}-lg`]: {
|
[`${skeletonInputCls}-lg`]: {
|
||||||
...genSkeletonElementInputSize(controlHeightLG),
|
...genSkeletonElementInputSize(controlHeightLG, calc),
|
||||||
},
|
},
|
||||||
|
|
||||||
[`${skeletonInputCls}-sm`]: {
|
[`${skeletonInputCls}-sm`]: {
|
||||||
...genSkeletonElementInputSize(controlHeightSM),
|
...genSkeletonElementInputSize(controlHeightSM, calc),
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
const genSkeletonElementImageSize = (size: number): CSSObject => ({
|
const genSkeletonElementImageSize = (size: number | string): CSSObject => ({
|
||||||
width: size,
|
width: size,
|
||||||
...genSkeletonElementCommonSize(size),
|
...genSkeletonElementCommonSize(size),
|
||||||
});
|
});
|
||||||
|
|
||||||
const genSkeletonElementImage = (token: SkeletonToken): CSSObject => {
|
const genSkeletonElementImage = (token: SkeletonToken): CSSObject => {
|
||||||
const { skeletonImageCls, imageSizeBase, color, borderRadiusSM } = token;
|
const { skeletonImageCls, imageSizeBase, gradientFromColor, borderRadiusSM, calc } = token;
|
||||||
return {
|
return {
|
||||||
[`${skeletonImageCls}`]: {
|
[skeletonImageCls]: {
|
||||||
display: 'flex',
|
display: 'inline-flex',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
verticalAlign: 'top',
|
verticalAlign: 'middle',
|
||||||
background: color,
|
background: gradientFromColor,
|
||||||
borderRadius: borderRadiusSM,
|
borderRadius: borderRadiusSM,
|
||||||
...genSkeletonElementImageSize(imageSizeBase * 2),
|
...genSkeletonElementImageSize(calc(imageSizeBase).mul(2).equal()),
|
||||||
[`${skeletonImageCls}-path`]: {
|
[`${skeletonImageCls}-path`]: {
|
||||||
fill: '#bfbfbf',
|
fill: '#bfbfbf',
|
||||||
},
|
},
|
||||||
[`${skeletonImageCls}-svg`]: {
|
[`${skeletonImageCls}-svg`]: {
|
||||||
...genSkeletonElementImageSize(imageSizeBase),
|
...genSkeletonElementImageSize(imageSizeBase),
|
||||||
maxWidth: imageSizeBase * 4,
|
maxWidth: calc(imageSizeBase).mul(4).equal(),
|
||||||
maxHeight: imageSizeBase * 4,
|
maxHeight: calc(imageSizeBase).mul(4).equal(),
|
||||||
},
|
},
|
||||||
[`${skeletonImageCls}-svg${skeletonImageCls}-svg-circle`]: {
|
[`${skeletonImageCls}-svg${skeletonImageCls}-svg-circle`]: {
|
||||||
borderRadius: '50%',
|
borderRadius: '50%',
|
||||||
|
@ -173,9 +189,9 @@ const genSkeletonElementButtonShape = (
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
const genSkeletonElementButtonSize = (size: number): CSSObject => ({
|
const genSkeletonElementButtonSize = (size: number, calc: CSSUtil['calc']): CSSObject => ({
|
||||||
width: size * 2,
|
width: calc(size).mul(2).equal(),
|
||||||
minWidth: size * 2,
|
minWidth: calc(size).mul(2).equal(),
|
||||||
...genSkeletonElementCommonSize(size),
|
...genSkeletonElementCommonSize(size),
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -186,27 +202,28 @@ const genSkeletonElementButton = (token: SkeletonToken): CSSObject => {
|
||||||
controlHeight,
|
controlHeight,
|
||||||
controlHeightLG,
|
controlHeightLG,
|
||||||
controlHeightSM,
|
controlHeightSM,
|
||||||
color,
|
gradientFromColor,
|
||||||
|
calc,
|
||||||
} = token;
|
} = token;
|
||||||
return {
|
return {
|
||||||
[`${skeletonButtonCls}`]: {
|
[skeletonButtonCls]: {
|
||||||
display: 'inline-block',
|
display: 'inline-block',
|
||||||
verticalAlign: 'top',
|
verticalAlign: 'top',
|
||||||
background: color,
|
background: gradientFromColor,
|
||||||
borderRadius: borderRadiusSM,
|
borderRadius: borderRadiusSM,
|
||||||
width: controlHeight * 2,
|
width: calc(controlHeight).mul(2).equal(),
|
||||||
minWidth: controlHeight * 2,
|
minWidth: calc(controlHeight).mul(2).equal(),
|
||||||
...genSkeletonElementButtonSize(controlHeight),
|
...genSkeletonElementButtonSize(controlHeight, calc),
|
||||||
},
|
},
|
||||||
...genSkeletonElementButtonShape(token, controlHeight, skeletonButtonCls),
|
...genSkeletonElementButtonShape(token, controlHeight, skeletonButtonCls),
|
||||||
|
|
||||||
[`${skeletonButtonCls}-lg`]: {
|
[`${skeletonButtonCls}-lg`]: {
|
||||||
...genSkeletonElementButtonSize(controlHeightLG),
|
...genSkeletonElementButtonSize(controlHeightLG, calc),
|
||||||
},
|
},
|
||||||
...genSkeletonElementButtonShape(token, controlHeightLG, `${skeletonButtonCls}-lg`),
|
...genSkeletonElementButtonShape(token, controlHeightLG, `${skeletonButtonCls}-lg`),
|
||||||
|
|
||||||
[`${skeletonButtonCls}-sm`]: {
|
[`${skeletonButtonCls}-sm`]: {
|
||||||
...genSkeletonElementButtonSize(controlHeightSM),
|
...genSkeletonElementButtonSize(controlHeightSM, calc),
|
||||||
},
|
},
|
||||||
...genSkeletonElementButtonShape(token, controlHeightSM, `${skeletonButtonCls}-sm`),
|
...genSkeletonElementButtonShape(token, controlHeightSM, `${skeletonButtonCls}-sm`),
|
||||||
};
|
};
|
||||||
|
@ -225,19 +242,19 @@ const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
|
||||||
controlHeight,
|
controlHeight,
|
||||||
controlHeightLG,
|
controlHeightLG,
|
||||||
controlHeightSM,
|
controlHeightSM,
|
||||||
color,
|
gradientFromColor,
|
||||||
padding,
|
padding,
|
||||||
marginSM,
|
marginSM,
|
||||||
borderRadius,
|
borderRadius,
|
||||||
skeletonTitleHeight,
|
titleHeight,
|
||||||
skeletonBlockRadius,
|
blockRadius,
|
||||||
skeletonParagraphLineHeight,
|
paragraphLiHeight,
|
||||||
controlHeightXS,
|
controlHeightXS,
|
||||||
skeletonParagraphMarginTop,
|
paragraphMarginTop,
|
||||||
} = token;
|
} = token;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
[`${componentCls}`]: {
|
[componentCls]: {
|
||||||
display: 'table',
|
display: 'table',
|
||||||
width: '100%',
|
width: '100%',
|
||||||
|
|
||||||
|
@ -247,10 +264,10 @@ const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
|
||||||
verticalAlign: 'top',
|
verticalAlign: 'top',
|
||||||
|
|
||||||
// Avatar
|
// Avatar
|
||||||
[`${skeletonAvatarCls}`]: {
|
[skeletonAvatarCls]: {
|
||||||
display: 'inline-block',
|
display: 'inline-block',
|
||||||
verticalAlign: 'top',
|
verticalAlign: 'top',
|
||||||
background: color,
|
background: gradientFromColor,
|
||||||
...genSkeletonElementAvatarSize(controlHeight),
|
...genSkeletonElementAvatarSize(controlHeight),
|
||||||
},
|
},
|
||||||
[`${skeletonAvatarCls}-circle`]: {
|
[`${skeletonAvatarCls}-circle`]: {
|
||||||
|
@ -269,25 +286,25 @@ const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
|
||||||
verticalAlign: 'top',
|
verticalAlign: 'top',
|
||||||
|
|
||||||
// Title
|
// Title
|
||||||
[`${skeletonTitleCls}`]: {
|
[skeletonTitleCls]: {
|
||||||
width: '100%',
|
width: '100%',
|
||||||
height: skeletonTitleHeight,
|
height: titleHeight,
|
||||||
background: color,
|
background: gradientFromColor,
|
||||||
borderRadius: skeletonBlockRadius,
|
borderRadius: blockRadius,
|
||||||
[`+ ${skeletonParagraphCls}`]: {
|
[`+ ${skeletonParagraphCls}`]: {
|
||||||
marginBlockStart: controlHeightSM,
|
marginBlockStart: controlHeightSM,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
// paragraph
|
// paragraph
|
||||||
[`${skeletonParagraphCls}`]: {
|
[skeletonParagraphCls]: {
|
||||||
padding: 0,
|
padding: 0,
|
||||||
'> li': {
|
'> li': {
|
||||||
width: '100%',
|
width: '100%',
|
||||||
height: skeletonParagraphLineHeight,
|
height: paragraphLiHeight,
|
||||||
listStyle: 'none',
|
listStyle: 'none',
|
||||||
background: color,
|
background: gradientFromColor,
|
||||||
borderRadius: skeletonBlockRadius,
|
borderRadius: blockRadius,
|
||||||
'+ li': {
|
'+ li': {
|
||||||
marginBlockStart: controlHeightXS,
|
marginBlockStart: controlHeightXS,
|
||||||
},
|
},
|
||||||
|
@ -307,11 +324,11 @@ const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
|
||||||
},
|
},
|
||||||
[`${componentCls}-with-avatar ${componentCls}-content`]: {
|
[`${componentCls}-with-avatar ${componentCls}-content`]: {
|
||||||
// Title
|
// Title
|
||||||
[`${skeletonTitleCls}`]: {
|
[skeletonTitleCls]: {
|
||||||
marginBlockStart: marginSM,
|
marginBlockStart: marginSM,
|
||||||
|
|
||||||
[`+ ${skeletonParagraphCls}`]: {
|
[`+ ${skeletonParagraphCls}`]: {
|
||||||
marginBlockStart: skeletonParagraphMarginTop,
|
marginBlockStart: paragraphMarginTop,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -329,11 +346,11 @@ const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
|
||||||
[`${componentCls}${componentCls}-block`]: {
|
[`${componentCls}${componentCls}-block`]: {
|
||||||
width: '100%',
|
width: '100%',
|
||||||
|
|
||||||
[`${skeletonButtonCls}`]: {
|
[skeletonButtonCls]: {
|
||||||
width: '100%',
|
width: '100%',
|
||||||
},
|
},
|
||||||
|
|
||||||
[`${skeletonInputCls}`]: {
|
[skeletonInputCls]: {
|
||||||
width: '100%',
|
width: '100%',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -354,10 +371,26 @@ const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
// ============================== Export ==============================
|
// ============================== Export ==============================
|
||||||
export default genComponentStyleHook(
|
export const prepareComponentToken: GetDefaultToken<'Skeleton'> = token => {
|
||||||
|
const { colorFillContent, colorFill } = token;
|
||||||
|
const gradientFromColor = colorFillContent;
|
||||||
|
const gradientToColor = colorFill;
|
||||||
|
return {
|
||||||
|
color: gradientFromColor,
|
||||||
|
colorGradientEnd: gradientToColor,
|
||||||
|
gradientFromColor,
|
||||||
|
gradientToColor,
|
||||||
|
titleHeight: token.controlHeight / 2,
|
||||||
|
blockRadius: token.borderRadiusSM,
|
||||||
|
paragraphMarginTop: token.marginLG + token.marginXXS,
|
||||||
|
paragraphLiHeight: token.controlHeight / 2,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default genStyleHooks(
|
||||||
'Skeleton',
|
'Skeleton',
|
||||||
token => {
|
token => {
|
||||||
const { componentCls } = token;
|
const { componentCls, calc } = token;
|
||||||
|
|
||||||
const skeletonToken = mergeToken<SkeletonToken>(token, {
|
const skeletonToken = mergeToken<SkeletonToken>(token, {
|
||||||
skeletonAvatarCls: `${componentCls}-avatar`,
|
skeletonAvatarCls: `${componentCls}-avatar`,
|
||||||
|
@ -366,23 +399,18 @@ export default genComponentStyleHook(
|
||||||
skeletonButtonCls: `${componentCls}-button`,
|
skeletonButtonCls: `${componentCls}-button`,
|
||||||
skeletonInputCls: `${componentCls}-input`,
|
skeletonInputCls: `${componentCls}-input`,
|
||||||
skeletonImageCls: `${componentCls}-image`,
|
skeletonImageCls: `${componentCls}-image`,
|
||||||
imageSizeBase: token.controlHeight * 1.5,
|
imageSizeBase: calc(token.controlHeight).mul(1.5).equal(),
|
||||||
skeletonTitleHeight: token.controlHeight / 2,
|
|
||||||
skeletonBlockRadius: token.borderRadiusSM,
|
|
||||||
skeletonParagraphLineHeight: token.controlHeight / 2,
|
|
||||||
skeletonParagraphMarginTop: token.marginLG + token.marginXXS,
|
|
||||||
borderRadius: 100, // Large number to make capsule shape
|
borderRadius: 100, // Large number to make capsule shape
|
||||||
skeletonLoadingBackground: `linear-gradient(90deg, ${token.color} 25%, ${token.colorGradientEnd} 37%, ${token.color} 63%)`,
|
skeletonLoadingBackground: `linear-gradient(90deg, ${token.gradientFromColor} 25%, ${token.gradientToColor} 37%, ${token.gradientFromColor} 63%)`,
|
||||||
skeletonLoadingMotionDuration: '1.4s',
|
skeletonLoadingMotionDuration: '1.4s',
|
||||||
});
|
});
|
||||||
return [genBaseStyle(skeletonToken)];
|
return [genBaseStyle(skeletonToken)];
|
||||||
},
|
},
|
||||||
token => {
|
prepareComponentToken,
|
||||||
const { colorFillContent, colorFill } = token;
|
{
|
||||||
|
deprecatedTokens: [
|
||||||
return {
|
['color', 'gradientFromColor'],
|
||||||
color: colorFillContent,
|
['colorGradientEnd', 'gradientToColor'],
|
||||||
colorGradientEnd: colorFill,
|
],
|
||||||
};
|
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue