index.js 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.prepareComponentToken = exports.default = void 0;
  6. var _cssinjs = require("@ant-design/cssinjs");
  7. var _style = require("../../style");
  8. var _internal = require("../../theme/internal");
  9. const genRateStarStyle = token => {
  10. const {
  11. componentCls
  12. } = token;
  13. return {
  14. [`${componentCls}-star`]: {
  15. position: 'relative',
  16. display: 'inline-block',
  17. color: 'inherit',
  18. cursor: 'pointer',
  19. '&:not(:last-child)': {
  20. marginInlineEnd: token.marginXS
  21. },
  22. '> div': {
  23. transition: `all ${token.motionDurationMid}, outline 0s`,
  24. '&:hover': {
  25. transform: token.starHoverScale
  26. },
  27. '&:focus': {
  28. outline: 0
  29. },
  30. '&:focus-visible': {
  31. outline: `${(0, _cssinjs.unit)(token.lineWidth)} dashed ${token.starColor}`,
  32. transform: token.starHoverScale
  33. }
  34. },
  35. '&-first, &-second': {
  36. color: token.starBg,
  37. transition: `all ${token.motionDurationMid}`,
  38. userSelect: 'none'
  39. },
  40. '&-first': {
  41. position: 'absolute',
  42. top: 0,
  43. insetInlineStart: 0,
  44. width: '50%',
  45. height: '100%',
  46. overflow: 'hidden',
  47. opacity: 0
  48. },
  49. [`&-half ${componentCls}-star-first, &-half ${componentCls}-star-second`]: {
  50. opacity: 1
  51. },
  52. [`&-half ${componentCls}-star-first, &-full ${componentCls}-star-second`]: {
  53. color: 'inherit'
  54. }
  55. }
  56. };
  57. };
  58. const genRateRtlStyle = token => ({
  59. [`&-rtl${token.componentCls}`]: {
  60. direction: 'rtl'
  61. }
  62. });
  63. const genRateStyle = token => {
  64. const {
  65. componentCls
  66. } = token;
  67. return {
  68. [componentCls]: Object.assign(Object.assign(Object.assign(Object.assign({}, (0, _style.resetComponent)(token)), {
  69. display: 'inline-block',
  70. margin: 0,
  71. padding: 0,
  72. color: token.starColor,
  73. fontSize: token.starSize,
  74. lineHeight: 1,
  75. listStyle: 'none',
  76. outline: 'none',
  77. // disable styles
  78. [`&-disabled${componentCls} ${componentCls}-star`]: {
  79. cursor: 'default',
  80. '> div:hover': {
  81. transform: 'scale(1)'
  82. }
  83. }
  84. }), genRateStarStyle(token)), genRateRtlStyle(token))
  85. };
  86. };
  87. // ============================== Export ==============================
  88. const prepareComponentToken = token => ({
  89. starColor: token.yellow6,
  90. starSize: token.controlHeightLG * 0.5,
  91. starHoverScale: 'scale(1.1)',
  92. starBg: token.colorFillContent
  93. });
  94. exports.prepareComponentToken = prepareComponentToken;
  95. var _default = exports.default = (0, _internal.genStyleHooks)('Rate', token => {
  96. const rateToken = (0, _internal.mergeToken)(token, {});
  97. return genRateStyle(rateToken);
  98. }, prepareComponentToken);