2022-03-10 10:47:33 +08:00
|
|
|
// deps-lint-skip-all
|
2022-05-09 22:20:07 +08:00
|
|
|
import type { CSSObject } from '@ant-design/cssinjs';
|
|
|
|
import type { GenerateStyle, FullToken } from '../../_util/theme';
|
|
|
|
import { resetComponent, genComponentStyleHook, mergeToken } from '../../_util/theme';
|
2022-04-08 11:10:46 +08:00
|
|
|
|
|
|
|
interface RateToken extends FullToken<'Rate'> {
|
2022-03-10 10:47:33 +08:00
|
|
|
rateStarColor: string;
|
|
|
|
rateStarSize: number;
|
|
|
|
rateStarHoverScale: CSSObject['transform'];
|
|
|
|
}
|
|
|
|
|
2022-03-11 14:29:29 +08:00
|
|
|
const genRateStarStyle: GenerateStyle<RateToken, CSSObject> = token => {
|
2022-04-08 11:10:46 +08:00
|
|
|
const { componentCls } = token;
|
2022-03-10 10:47:33 +08:00
|
|
|
|
|
|
|
return {
|
2022-04-08 11:10:46 +08:00
|
|
|
[`${componentCls}-star`]: {
|
2022-03-10 10:47:33 +08:00
|
|
|
position: 'relative',
|
|
|
|
display: 'inline-block',
|
|
|
|
color: 'inherit',
|
|
|
|
cursor: 'pointer',
|
|
|
|
|
|
|
|
'&:not(:last-child)': {
|
|
|
|
marginInlineEnd: token.marginXS,
|
|
|
|
},
|
|
|
|
|
|
|
|
'> div': {
|
2022-03-22 20:02:04 +08:00
|
|
|
transition: `all ${token.motionDurationSlow}, outline 0s`,
|
2022-03-10 10:47:33 +08:00
|
|
|
|
|
|
|
'&:hover': {
|
|
|
|
transform: token.rateStarHoverScale,
|
|
|
|
},
|
|
|
|
|
|
|
|
'&:focus': {
|
|
|
|
outline: 0,
|
|
|
|
},
|
|
|
|
|
|
|
|
'&:focus-visible': {
|
2022-03-22 13:26:29 +08:00
|
|
|
outline: `1px dashed ${token.colorSplit}`,
|
2022-03-10 10:47:33 +08:00
|
|
|
transform: token.rateStarHoverScale,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
'&-first, &-second': {
|
2022-03-22 13:26:29 +08:00
|
|
|
color: token.colorSplit,
|
2022-03-22 20:02:04 +08:00
|
|
|
transition: `all ${token.motionDurationSlow}`,
|
2022-03-10 10:47:33 +08:00
|
|
|
userSelect: 'none',
|
|
|
|
|
2022-04-08 11:10:46 +08:00
|
|
|
[token.iconCls]: {
|
2022-03-10 10:47:33 +08:00
|
|
|
verticalAlign: 'middle',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
'&-first': {
|
|
|
|
position: 'absolute',
|
|
|
|
top: 0,
|
|
|
|
insetInlineStart: 0,
|
|
|
|
width: '50%',
|
|
|
|
height: '100%',
|
|
|
|
overflow: 'hidden',
|
|
|
|
opacity: 0,
|
|
|
|
},
|
|
|
|
|
2022-04-08 11:10:46 +08:00
|
|
|
[`&-half ${componentCls}-star-first, &-half ${componentCls}-star-second`]: {
|
2022-03-10 10:47:33 +08:00
|
|
|
opacity: 1,
|
|
|
|
},
|
|
|
|
|
2022-04-08 11:10:46 +08:00
|
|
|
[`&-half ${componentCls}-star-first, &-full ${componentCls}-star-second`]: {
|
2022-03-10 10:47:33 +08:00
|
|
|
color: 'inherit',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
const genRateRtlStyle = (token: RateToken): CSSObject => ({
|
2022-04-08 11:10:46 +08:00
|
|
|
[`&-rtl${token.componentCls}`]: {
|
2022-03-10 10:47:33 +08:00
|
|
|
direction: 'rtl',
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
2022-03-11 14:29:29 +08:00
|
|
|
const genRateStyle: GenerateStyle<RateToken> = token => {
|
2022-04-08 11:10:46 +08:00
|
|
|
const { componentCls } = token;
|
2022-03-10 10:47:33 +08:00
|
|
|
|
|
|
|
return {
|
2022-04-08 11:10:46 +08:00
|
|
|
[componentCls]: {
|
2022-03-10 10:47:33 +08:00
|
|
|
...resetComponent(token),
|
|
|
|
|
|
|
|
display: 'inline-block',
|
|
|
|
margin: 0,
|
|
|
|
padding: 0,
|
|
|
|
color: token.rateStarColor,
|
|
|
|
fontSize: token.rateStarSize,
|
|
|
|
lineHeight: 'unset',
|
|
|
|
listStyle: 'none',
|
|
|
|
outline: 'none',
|
|
|
|
|
|
|
|
// disable styles
|
2022-04-08 11:10:46 +08:00
|
|
|
[`&-disabled${componentCls} ${componentCls}-star`]: {
|
2022-03-10 10:47:33 +08:00
|
|
|
cursor: 'default',
|
|
|
|
|
|
|
|
'&:hover': {
|
|
|
|
transform: 'scale(1)',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// star styles
|
|
|
|
...genRateStarStyle(token),
|
|
|
|
|
|
|
|
// text styles
|
2022-04-08 11:10:46 +08:00
|
|
|
[`+ ${componentCls}-text`]: {
|
2022-03-10 10:47:33 +08:00
|
|
|
display: 'inline-block',
|
|
|
|
marginInlineStart: token.marginXS,
|
|
|
|
fontSize: token.fontSize,
|
|
|
|
},
|
|
|
|
|
|
|
|
// rtl styles
|
|
|
|
...genRateRtlStyle(token),
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
// ============================== Export ==============================
|
2022-04-08 11:10:46 +08:00
|
|
|
export default genComponentStyleHook('Rate', token => {
|
2022-04-11 16:04:00 +08:00
|
|
|
const rateToken = mergeToken<RateToken>(token, {
|
2022-03-10 10:47:33 +08:00
|
|
|
// FIXME: missing token
|
|
|
|
rateStarColor: '#fadb14', // @yellow-6
|
|
|
|
rateStarSize: 20, // fixed-value
|
|
|
|
rateStarHoverScale: 'scale(1.1)', // fixed-value
|
2022-04-11 16:04:00 +08:00
|
|
|
});
|
2022-04-08 11:10:46 +08:00
|
|
|
return [genRateStyle(rateToken)];
|
|
|
|
});
|