index.js 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. import { genComponentStyleHook, mergeToken } from '../../theme/internal';
  2. // ============================== Shared ==============================
  3. const genSharedEmptyStyle = token => {
  4. const {
  5. componentCls,
  6. margin,
  7. marginXS,
  8. marginXL,
  9. fontSize,
  10. lineHeight
  11. } = token;
  12. return {
  13. [componentCls]: {
  14. marginInline: marginXS,
  15. fontSize,
  16. lineHeight,
  17. textAlign: 'center',
  18. // 原来 &-image 没有父子结构,现在为了外层承担我们的hashId,改成父子结果
  19. [`${componentCls}-image`]: {
  20. height: token.emptyImgHeight,
  21. marginBottom: marginXS,
  22. opacity: token.opacityImage,
  23. img: {
  24. height: '100%'
  25. },
  26. svg: {
  27. height: '100%',
  28. margin: 'auto'
  29. }
  30. },
  31. // 原来 &-footer 没有父子结构,现在为了外层承担我们的hashId,改成父子结果
  32. [`${componentCls}-footer`]: {
  33. marginTop: margin
  34. },
  35. '&-normal': {
  36. marginBlock: marginXL,
  37. color: token.colorTextDisabled,
  38. [`${componentCls}-image`]: {
  39. height: token.emptyImgHeightMD
  40. }
  41. },
  42. '&-small': {
  43. marginBlock: marginXS,
  44. color: token.colorTextDisabled,
  45. [`${componentCls}-image`]: {
  46. height: token.emptyImgHeightSM
  47. }
  48. }
  49. }
  50. };
  51. };
  52. // ============================== Export ==============================
  53. export default genComponentStyleHook('Empty', token => {
  54. const {
  55. componentCls,
  56. controlHeightLG
  57. } = token;
  58. const emptyToken = mergeToken(token, {
  59. emptyImgCls: `${componentCls}-img`,
  60. emptyImgHeight: controlHeightLG * 2.5,
  61. emptyImgHeightMD: controlHeightLG,
  62. emptyImgHeightSM: controlHeightLG * 0.875
  63. });
  64. return [genSharedEmptyStyle(emptyToken)];
  65. });