token.js 3.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. import { FastColor } from '@ant-design/fast-color';
  2. import { initComponentToken } from '../../input/style/token';
  3. import { getArrowToken } from '../../style/roundedArrow';
  4. export const initPickerPanelToken = token => {
  5. const {
  6. componentCls,
  7. controlHeightLG,
  8. paddingXXS,
  9. padding
  10. } = token;
  11. return {
  12. pickerCellCls: `${componentCls}-cell`,
  13. pickerCellInnerCls: `${componentCls}-cell-inner`,
  14. pickerYearMonthCellWidth: token.calc(controlHeightLG).mul(1.5).equal(),
  15. pickerQuarterPanelContentHeight: token.calc(controlHeightLG).mul(1.4).equal(),
  16. pickerCellPaddingVertical: token.calc(paddingXXS).add(token.calc(paddingXXS).div(2)).equal(),
  17. pickerCellBorderGap: 2,
  18. // Magic for gap between cells
  19. pickerControlIconSize: 7,
  20. pickerControlIconMargin: 4,
  21. pickerControlIconBorderWidth: 1.5,
  22. pickerDatePanelPaddingHorizontal: token.calc(padding).add(token.calc(paddingXXS).div(2)).equal() // 18 in normal
  23. };
  24. };
  25. export const initPanelComponentToken = token => {
  26. const {
  27. colorBgContainerDisabled,
  28. controlHeight,
  29. controlHeightSM,
  30. controlHeightLG,
  31. paddingXXS,
  32. lineWidth
  33. } = token;
  34. // Item height default use `controlHeight - 2 * paddingXXS`,
  35. // but some case `paddingXXS=0`.
  36. // Let's fallback it.
  37. const dblPaddingXXS = paddingXXS * 2;
  38. const dblLineWidth = lineWidth * 2;
  39. const multipleItemHeight = Math.min(controlHeight - dblPaddingXXS, controlHeight - dblLineWidth);
  40. const multipleItemHeightSM = Math.min(controlHeightSM - dblPaddingXXS, controlHeightSM - dblLineWidth);
  41. const multipleItemHeightLG = Math.min(controlHeightLG - dblPaddingXXS, controlHeightLG - dblLineWidth);
  42. // FIXED_ITEM_MARGIN is a hardcode calculation since calc not support rounding
  43. const INTERNAL_FIXED_ITEM_MARGIN = Math.floor(paddingXXS / 2);
  44. const filledToken = {
  45. INTERNAL_FIXED_ITEM_MARGIN,
  46. cellHoverBg: token.controlItemBgHover,
  47. cellActiveWithRangeBg: token.controlItemBgActive,
  48. cellHoverWithRangeBg: new FastColor(token.colorPrimary).lighten(35).toHexString(),
  49. cellRangeBorderColor: new FastColor(token.colorPrimary).lighten(20).toHexString(),
  50. cellBgDisabled: colorBgContainerDisabled,
  51. timeColumnWidth: controlHeightLG * 1.4,
  52. timeColumnHeight: 28 * 8,
  53. timeCellHeight: 28,
  54. cellWidth: controlHeightSM * 1.5,
  55. cellHeight: controlHeightSM,
  56. textHeight: controlHeightLG,
  57. withoutTimeCellHeight: controlHeightLG * 1.65,
  58. multipleItemBg: token.colorFillSecondary,
  59. multipleItemBorderColor: 'transparent',
  60. multipleItemHeight,
  61. multipleItemHeightSM,
  62. multipleItemHeightLG,
  63. multipleSelectorBgDisabled: colorBgContainerDisabled,
  64. multipleItemColorDisabled: token.colorTextDisabled,
  65. multipleItemBorderColorDisabled: 'transparent'
  66. };
  67. return filledToken;
  68. };
  69. export const prepareComponentToken = token => Object.assign(Object.assign(Object.assign(Object.assign({}, initComponentToken(token)), initPanelComponentToken(token)), getArrowToken(token)), {
  70. presetsWidth: 120,
  71. presetsMaxWidth: 200,
  72. zIndexPopup: token.zIndexPopupBase + 50
  73. });