dropdown.js 4.9 KB

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