index.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import { getStyle as getCheckboxStyle } from '../../checkbox/style';
  3. import { genComponentStyleHook } from '../../theme/internal';
  4. import { textEllipsis } from '../../style';
  5. import { genCompactItemStyle } from '../../style/compact-item';
  6. // =============================== Base ===============================
  7. const genBaseStyle = token => {
  8. const {
  9. prefixCls,
  10. componentCls,
  11. antCls
  12. } = token;
  13. const cascaderMenuItemCls = `${componentCls}-menu-item`;
  14. const iconCls = `
  15. &${cascaderMenuItemCls}-expand ${cascaderMenuItemCls}-expand-icon,
  16. ${cascaderMenuItemCls}-loading-icon
  17. `;
  18. const itemPaddingVertical = Math.round((token.controlHeight - token.fontSize * token.lineHeight) / 2);
  19. return [
  20. // =====================================================
  21. // == Control ==
  22. // =====================================================
  23. {
  24. [componentCls]: {
  25. width: token.controlWidth
  26. }
  27. },
  28. // =====================================================
  29. // == Popup ==
  30. // =====================================================
  31. {
  32. [`${componentCls}-dropdown`]: [
  33. // ==================== Checkbox ====================
  34. getCheckboxStyle(`${prefixCls}-checkbox`, token), {
  35. [`&${antCls}-select-dropdown`]: {
  36. padding: 0
  37. }
  38. }, {
  39. [componentCls]: {
  40. // ================== Checkbox ==================
  41. '&-checkbox': {
  42. top: 0,
  43. marginInlineEnd: token.paddingXS
  44. },
  45. // ==================== Menu ====================
  46. // >>> Menus
  47. '&-menus': {
  48. display: 'flex',
  49. flexWrap: 'nowrap',
  50. alignItems: 'flex-start',
  51. [`&${componentCls}-menu-empty`]: {
  52. [`${componentCls}-menu`]: {
  53. width: '100%',
  54. height: 'auto',
  55. [cascaderMenuItemCls]: {
  56. color: token.colorTextDisabled
  57. }
  58. }
  59. }
  60. },
  61. // >>> Menu
  62. '&-menu': {
  63. flexGrow: 1,
  64. minWidth: token.controlItemWidth,
  65. height: token.dropdownHeight,
  66. margin: 0,
  67. padding: token.paddingXXS,
  68. overflow: 'auto',
  69. verticalAlign: 'top',
  70. listStyle: 'none',
  71. '-ms-overflow-style': '-ms-autohiding-scrollbar',
  72. '&:not(:last-child)': {
  73. borderInlineEnd: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`
  74. },
  75. '&-item': _extends(_extends({}, textEllipsis), {
  76. display: 'flex',
  77. flexWrap: 'nowrap',
  78. alignItems: 'center',
  79. padding: `${itemPaddingVertical}px ${token.paddingSM}px`,
  80. lineHeight: token.lineHeight,
  81. cursor: 'pointer',
  82. transition: `all ${token.motionDurationMid}`,
  83. borderRadius: token.borderRadiusSM,
  84. '&:hover': {
  85. background: token.controlItemBgHover
  86. },
  87. '&-disabled': {
  88. color: token.colorTextDisabled,
  89. cursor: 'not-allowed',
  90. '&:hover': {
  91. background: 'transparent'
  92. },
  93. [iconCls]: {
  94. color: token.colorTextDisabled
  95. }
  96. },
  97. [`&-active:not(${cascaderMenuItemCls}-disabled)`]: {
  98. [`&, &:hover`]: {
  99. fontWeight: token.fontWeightStrong,
  100. backgroundColor: token.controlItemBgActive
  101. }
  102. },
  103. '&-content': {
  104. flex: 'auto'
  105. },
  106. [iconCls]: {
  107. marginInlineStart: token.paddingXXS,
  108. color: token.colorTextDescription,
  109. fontSize: token.fontSizeIcon
  110. },
  111. '&-keyword': {
  112. color: token.colorHighlight
  113. }
  114. })
  115. }
  116. }
  117. }]
  118. },
  119. // =====================================================
  120. // == RTL ==
  121. // =====================================================
  122. {
  123. [`${componentCls}-dropdown-rtl`]: {
  124. direction: 'rtl'
  125. }
  126. },
  127. // =====================================================
  128. // == Space Compact ==
  129. // =====================================================
  130. genCompactItemStyle(token)];
  131. };
  132. // ============================== Export ==============================
  133. export default genComponentStyleHook('Cascader', token => [genBaseStyle(token)], {
  134. controlWidth: 184,
  135. controlItemWidth: 111,
  136. dropdownHeight: 180
  137. });