genComponentStyleHook.js 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. /* eslint-disable no-redeclare */
  3. import { useStyleRegister } from '../../_util/cssinjs';
  4. import { genCommonStyle, genLinkStyle } from '../../style';
  5. import { mergeToken, statisticToken, useToken } from '../internal';
  6. import { computed } from 'vue';
  7. import { useConfigContextInject } from '../../config-provider/context';
  8. export default function genComponentStyleHook(component, styleFn, getDefaultToken) {
  9. return _prefixCls => {
  10. const prefixCls = computed(() => _prefixCls === null || _prefixCls === void 0 ? void 0 : _prefixCls.value);
  11. const [theme, token, hashId] = useToken();
  12. const {
  13. getPrefixCls,
  14. iconPrefixCls
  15. } = useConfigContextInject();
  16. const rootPrefixCls = computed(() => getPrefixCls());
  17. const sharedInfo = computed(() => {
  18. return {
  19. theme: theme.value,
  20. token: token.value,
  21. hashId: hashId.value,
  22. path: ['Shared', rootPrefixCls.value]
  23. };
  24. });
  25. // Generate style for all a tags in antd component.
  26. useStyleRegister(sharedInfo, () => [{
  27. // Link
  28. '&': genLinkStyle(token.value)
  29. }]);
  30. const componentInfo = computed(() => {
  31. return {
  32. theme: theme.value,
  33. token: token.value,
  34. hashId: hashId.value,
  35. path: [component, prefixCls.value, iconPrefixCls.value]
  36. };
  37. });
  38. return [useStyleRegister(componentInfo, () => {
  39. const {
  40. token: proxyToken,
  41. flush
  42. } = statisticToken(token.value);
  43. const defaultComponentToken = typeof getDefaultToken === 'function' ? getDefaultToken(proxyToken) : getDefaultToken;
  44. const mergedComponentToken = _extends(_extends({}, defaultComponentToken), token.value[component]);
  45. const componentCls = `.${prefixCls.value}`;
  46. const mergedToken = mergeToken(proxyToken, {
  47. componentCls,
  48. prefixCls: prefixCls.value,
  49. iconCls: `.${iconPrefixCls.value}`,
  50. antCls: `.${rootPrefixCls.value}`
  51. }, mergedComponentToken);
  52. const styleInterpolation = styleFn(mergedToken, {
  53. hashId: hashId.value,
  54. prefixCls: prefixCls.value,
  55. rootPrefixCls: rootPrefixCls.value,
  56. iconPrefixCls: iconPrefixCls.value,
  57. overrideComponentToken: token.value[component]
  58. });
  59. flush(component, mergedComponentToken);
  60. return [genCommonStyle(token.value, prefixCls.value), styleInterpolation];
  61. }), hashId];
  62. };
  63. }