index.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import { genComponentStyleHook, mergeToken } from '../../theme/internal';
  3. import { resetComponent } from '../../style';
  4. const genRateStarStyle = token => {
  5. const {
  6. componentCls
  7. } = token;
  8. return {
  9. [`${componentCls}-star`]: {
  10. position: 'relative',
  11. display: 'inline-block',
  12. color: 'inherit',
  13. cursor: 'pointer',
  14. '&:not(:last-child)': {
  15. marginInlineEnd: token.marginXS
  16. },
  17. '> div': {
  18. transition: `all ${token.motionDurationMid}, outline 0s`,
  19. '&:hover': {
  20. transform: token.rateStarHoverScale
  21. },
  22. '&:focus': {
  23. outline: 0
  24. },
  25. '&:focus-visible': {
  26. outline: `${token.lineWidth}px dashed ${token.rateStarColor}`,
  27. transform: token.rateStarHoverScale
  28. }
  29. },
  30. '&-first, &-second': {
  31. color: token.defaultColor,
  32. transition: `all ${token.motionDurationMid}`,
  33. userSelect: 'none',
  34. [token.iconCls]: {
  35. verticalAlign: 'middle'
  36. }
  37. },
  38. '&-first': {
  39. position: 'absolute',
  40. top: 0,
  41. insetInlineStart: 0,
  42. width: '50%',
  43. height: '100%',
  44. overflow: 'hidden',
  45. opacity: 0
  46. },
  47. [`&-half ${componentCls}-star-first, &-half ${componentCls}-star-second`]: {
  48. opacity: 1
  49. },
  50. [`&-half ${componentCls}-star-first, &-full ${componentCls}-star-second`]: {
  51. color: 'inherit'
  52. }
  53. }
  54. };
  55. };
  56. const genRateRtlStyle = token => ({
  57. [`&-rtl${token.componentCls}`]: {
  58. direction: 'rtl'
  59. }
  60. });
  61. const genRateStyle = token => {
  62. const {
  63. componentCls
  64. } = token;
  65. return {
  66. [componentCls]: _extends(_extends(_extends(_extends(_extends({}, resetComponent(token)), {
  67. display: 'inline-block',
  68. margin: 0,
  69. padding: 0,
  70. color: token.rateStarColor,
  71. fontSize: token.rateStarSize,
  72. lineHeight: 'unset',
  73. listStyle: 'none',
  74. outline: 'none',
  75. // disable styles
  76. [`&-disabled${componentCls} ${componentCls}-star`]: {
  77. cursor: 'default',
  78. '&:hover': {
  79. transform: 'scale(1)'
  80. }
  81. }
  82. }), genRateStarStyle(token)), {
  83. // text styles
  84. [`+ ${componentCls}-text`]: {
  85. display: 'inline-block',
  86. marginInlineStart: token.marginXS,
  87. fontSize: token.fontSize
  88. }
  89. }), genRateRtlStyle(token))
  90. };
  91. };
  92. // ============================== Export ==============================
  93. export default genComponentStyleHook('Rate', token => {
  94. const {
  95. colorFillContent
  96. } = token;
  97. const rateToken = mergeToken(token, {
  98. rateStarColor: token['yellow-6'],
  99. rateStarSize: token.controlHeightLG * 0.5,
  100. rateStarHoverScale: 'scale(1.1)',
  101. defaultColor: colorFillContent
  102. });
  103. return [genRateStyle(rateToken)];
  104. });