index.js 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. import { resetComponent } from '../../style';
  2. import { genStyleHooks, mergeToken } from '../../theme/internal';
  3. const genStatisticStyle = token => {
  4. const {
  5. componentCls,
  6. marginXXS,
  7. padding,
  8. colorTextDescription,
  9. titleFontSize,
  10. colorTextHeading,
  11. contentFontSize,
  12. fontFamily
  13. } = token;
  14. return {
  15. [componentCls]: Object.assign(Object.assign({}, resetComponent(token)), {
  16. [`${componentCls}-title`]: {
  17. marginBottom: marginXXS,
  18. color: colorTextDescription,
  19. fontSize: titleFontSize
  20. },
  21. [`${componentCls}-skeleton`]: {
  22. paddingTop: padding
  23. },
  24. [`${componentCls}-content`]: {
  25. color: colorTextHeading,
  26. fontSize: contentFontSize,
  27. fontFamily,
  28. [`${componentCls}-content-value`]: {
  29. display: 'inline-block',
  30. direction: 'ltr'
  31. },
  32. [`${componentCls}-content-prefix, ${componentCls}-content-suffix`]: {
  33. display: 'inline-block'
  34. },
  35. [`${componentCls}-content-prefix`]: {
  36. marginInlineEnd: marginXXS
  37. },
  38. [`${componentCls}-content-suffix`]: {
  39. marginInlineStart: marginXXS
  40. }
  41. }
  42. })
  43. };
  44. };
  45. // ============================== Export ==============================
  46. export const prepareComponentToken = token => {
  47. const {
  48. fontSizeHeading3,
  49. fontSize
  50. } = token;
  51. return {
  52. titleFontSize: fontSize,
  53. contentFontSize: fontSizeHeading3
  54. };
  55. };
  56. export default genStyleHooks('Statistic', token => {
  57. const statisticToken = mergeToken(token, {});
  58. return genStatisticStyle(statisticToken);
  59. }, prepareComponentToken);