index.js 3.1 KB

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