index.js 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. import { unit } from '@ant-design/cssinjs';
  2. import { getStyle as getCheckboxStyle } from '../../checkbox/style';
  3. import { genStyleHooks, mergeToken } from '../../theme/internal';
  4. import { genTreeStyle, initComponentToken } from '../../tree/style';
  5. // =============================== Base ===============================
  6. const genBaseStyle = token => {
  7. const {
  8. componentCls,
  9. treePrefixCls,
  10. colorBgElevated
  11. } = token;
  12. const treeCls = `.${treePrefixCls}`;
  13. return [
  14. // ======================================================
  15. // == Dropdown ==
  16. // ======================================================
  17. {
  18. [`${componentCls}-dropdown`]: [{
  19. padding: `${unit(token.paddingXS)} ${unit(token.calc(token.paddingXS).div(2).equal())}`
  20. },
  21. // ====================== Tree ======================
  22. genTreeStyle(treePrefixCls, mergeToken(token, {
  23. colorBgContainer: colorBgElevated
  24. }), false), {
  25. [treeCls]: {
  26. borderRadius: 0,
  27. [`${treeCls}-list-holder-inner`]: {
  28. alignItems: 'stretch',
  29. [`${treeCls}-treenode`]: {
  30. [`${treeCls}-node-content-wrapper`]: {
  31. flex: 'auto'
  32. }
  33. }
  34. }
  35. }
  36. },
  37. // ==================== Checkbox ====================
  38. getCheckboxStyle(`${treePrefixCls}-checkbox`, token),
  39. // ====================== RTL =======================
  40. {
  41. '&-rtl': {
  42. direction: 'rtl',
  43. [`${treeCls}-switcher${treeCls}-switcher_close`]: {
  44. [`${treeCls}-switcher-icon svg`]: {
  45. transform: 'rotate(90deg)'
  46. }
  47. }
  48. }
  49. }]
  50. }];
  51. };
  52. export const prepareComponentToken = initComponentToken;
  53. // ============================== Export ==============================
  54. export default function useTreeSelectStyle(prefixCls, treePrefixCls, rootCls) {
  55. return genStyleHooks('TreeSelect', token => {
  56. const treeSelectToken = mergeToken(token, {
  57. treePrefixCls
  58. });
  59. return genBaseStyle(treeSelectToken);
  60. }, initComponentToken)(prefixCls, rootCls);
  61. }