dropdown.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.default = void 0;
  6. var _style = require("../../style");
  7. var _motion = require("../../style/motion");
  8. const genItemStyle = token => {
  9. const {
  10. optionHeight,
  11. optionFontSize,
  12. optionLineHeight,
  13. optionPadding
  14. } = token;
  15. return {
  16. position: 'relative',
  17. display: 'block',
  18. minHeight: optionHeight,
  19. padding: optionPadding,
  20. color: token.colorText,
  21. fontWeight: 'normal',
  22. fontSize: optionFontSize,
  23. lineHeight: optionLineHeight,
  24. boxSizing: 'border-box'
  25. };
  26. };
  27. const genSingleStyle = token => {
  28. const {
  29. antCls,
  30. componentCls
  31. } = token;
  32. const selectItemCls = `${componentCls}-item`;
  33. const slideUpEnterActive = `&${antCls}-slide-up-enter${antCls}-slide-up-enter-active`;
  34. const slideUpAppearActive = `&${antCls}-slide-up-appear${antCls}-slide-up-appear-active`;
  35. const slideUpLeaveActive = `&${antCls}-slide-up-leave${antCls}-slide-up-leave-active`;
  36. const dropdownPlacementCls = `${componentCls}-dropdown-placement-`;
  37. const selectedItemCls = `${selectItemCls}-option-selected`;
  38. return [{
  39. [`${componentCls}-dropdown`]: Object.assign(Object.assign({}, (0, _style.resetComponent)(token)), {
  40. position: 'absolute',
  41. top: -9999,
  42. zIndex: token.zIndexPopup,
  43. boxSizing: 'border-box',
  44. padding: token.paddingXXS,
  45. overflow: 'hidden',
  46. fontSize: token.fontSize,
  47. // Fix select render lag of long text in chrome
  48. // https://github.com/ant-design/ant-design/issues/11456
  49. // https://github.com/ant-design/ant-design/issues/11843
  50. fontVariant: 'initial',
  51. backgroundColor: token.colorBgElevated,
  52. borderRadius: token.borderRadiusLG,
  53. outline: 'none',
  54. boxShadow: token.boxShadowSecondary,
  55. [`
  56. ${slideUpEnterActive}${dropdownPlacementCls}bottomLeft,
  57. ${slideUpAppearActive}${dropdownPlacementCls}bottomLeft
  58. `]: {
  59. animationName: _motion.slideUpIn
  60. },
  61. [`
  62. ${slideUpEnterActive}${dropdownPlacementCls}topLeft,
  63. ${slideUpAppearActive}${dropdownPlacementCls}topLeft,
  64. ${slideUpEnterActive}${dropdownPlacementCls}topRight,
  65. ${slideUpAppearActive}${dropdownPlacementCls}topRight
  66. `]: {
  67. animationName: _motion.slideDownIn
  68. },
  69. [`${slideUpLeaveActive}${dropdownPlacementCls}bottomLeft`]: {
  70. animationName: _motion.slideUpOut
  71. },
  72. [`
  73. ${slideUpLeaveActive}${dropdownPlacementCls}topLeft,
  74. ${slideUpLeaveActive}${dropdownPlacementCls}topRight
  75. `]: {
  76. animationName: _motion.slideDownOut
  77. },
  78. '&-hidden': {
  79. display: 'none'
  80. },
  81. [selectItemCls]: Object.assign(Object.assign({}, genItemStyle(token)), {
  82. cursor: 'pointer',
  83. transition: `background ${token.motionDurationSlow} ease`,
  84. borderRadius: token.borderRadiusSM,
  85. // =========== Group ============
  86. '&-group': {
  87. color: token.colorTextDescription,
  88. fontSize: token.fontSizeSM,
  89. cursor: 'default'
  90. },
  91. // =========== Option ===========
  92. '&-option': {
  93. display: 'flex',
  94. '&-content': Object.assign({
  95. flex: 'auto'
  96. }, _style.textEllipsis),
  97. '&-state': {
  98. flex: 'none',
  99. display: 'flex',
  100. alignItems: 'center'
  101. },
  102. [`&-active:not(${selectItemCls}-option-disabled)`]: {
  103. backgroundColor: token.optionActiveBg
  104. },
  105. [`&-selected:not(${selectItemCls}-option-disabled)`]: {
  106. color: token.optionSelectedColor,
  107. fontWeight: token.optionSelectedFontWeight,
  108. backgroundColor: token.optionSelectedBg,
  109. [`${selectItemCls}-option-state`]: {
  110. color: token.colorPrimary
  111. }
  112. },
  113. '&-disabled': {
  114. [`&${selectItemCls}-option-selected`]: {
  115. backgroundColor: token.colorBgContainerDisabled
  116. },
  117. color: token.colorTextDisabled,
  118. cursor: 'not-allowed'
  119. },
  120. '&-grouped': {
  121. paddingInlineStart: token.calc(token.controlPaddingHorizontal).mul(2).equal()
  122. }
  123. },
  124. '&-empty': Object.assign(Object.assign({}, genItemStyle(token)), {
  125. color: token.colorTextDisabled
  126. })
  127. }),
  128. // https://github.com/ant-design/ant-design/pull/46646
  129. [`${selectedItemCls}:has(+ ${selectedItemCls})`]: {
  130. borderEndStartRadius: 0,
  131. borderEndEndRadius: 0,
  132. [`& + ${selectedItemCls}`]: {
  133. borderStartStartRadius: 0,
  134. borderStartEndRadius: 0
  135. }
  136. },
  137. // =========================== RTL ===========================
  138. '&-rtl': {
  139. direction: 'rtl'
  140. }
  141. })
  142. },
  143. // Follow code may reuse in other components
  144. (0, _motion.initSlideMotion)(token, 'slide-up'), (0, _motion.initSlideMotion)(token, 'slide-down'), (0, _motion.initMoveMotion)(token, 'move-up'), (0, _motion.initMoveMotion)(token, 'move-down')];
  145. };
  146. var _default = exports.default = genSingleStyle;