github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor: cssinjs

pull/6213/head
tangjinzhou 2023-01-25 10:28:10 +08:00
parent 10b52e0072
commit c0d7d041b4
4 changed files with 91 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/_util/cssinjs/hooks/useStyleRegister.tsx
View File

@ -21,6 +21,7 @@ import { supportLayer } from '../util';
import useGlobalCache from './useGlobalCache';
import canUseDom from '../../canUseDom';
import { removeCSS, updateCSS } from '../../../vc-util/Dom/dynamicCSS';
import type { Ref } from 'vue';
import { computed } from 'vue';
import type { VueNode } from '../../type';
@ -286,20 +287,20 @@ function Empty() {
* Register a style to the global style sheet.
*/
export default function useStyleRegister(
info: {
info: Ref<{
theme: Theme<any, any>;
token: any;
path: string[];
hashId?: string;
layer?: string;
},
}>,
styleFn: () => CSSInterpolation,
) {
const styleContext = useStyleInject();
const tokenKey = computed(() => info.token._tokenKey as string);
const tokenKey = computed(() => info.value.token._tokenKey as string);
const fullPath = computed(() => [tokenKey.value, ...info.path]);
const fullPath = computed(() => [tokenKey.value, ...info.value.path]);
// Check if need insert style
let isMergedClientSide = isClientSide;
@ -315,7 +316,7 @@ export default function useStyleRegister(
() => {
const styleObj = styleFn();
const { hashPriority, container, transformers, linters } = styleContext;
const { path, hashId, layer } = info;
const { path, hashId, layer } = info.value;
const [parsedStyle, effectStyle] = parseStyle(styleObj, {
hashId,
hashPriority,
@ -371,17 +372,16 @@ export default function useStyleRegister(
return (node: VueNode) => {
let styleNode: VueNode;
if (!styleContext.ssrInline || isMergedClientSide || !styleContext.defaultCache) {
styleNode = <Empty />;
} else {
styleNode = (
<style
{...{
[ATTR_TOKEN]: cacheStyle[1],
[ATTR_MARK]: cacheStyle[2],
[ATTR_TOKEN]: cacheStyle.value[1],
[ATTR_MARK]: cacheStyle.value[2],
}}
innerHTML={cacheStyle[0]}
innerHTML={cacheStyle.value[0]}
/>
);
}

45
components/alert/index.tsx
View File

@ -17,6 +17,7 @@ import { tuple, withInstall } from '../_util/type';
import { cloneElement } from '../_util/vnode';
import type { NodeMouseEventHandler } from '../vc-tree/contextTypes';
import useConfigInject from '../_util/hooks/useConfigInject';
import useStyle from './style';
const iconMapFilled = {
success: CheckCircleFilled,
@ -69,6 +70,7 @@ const Alert = defineComponent({
props: alertProps(),
setup(props, { slots, emit, attrs, expose }) {
const { prefixCls, direction } = useConfigInject('alert', props);
const [wrapSSR, hashId] = useStyle(prefixCls);
const closing = ref(false);
const closed = ref(false);
const alertNode = ref();
@ -125,6 +127,7 @@ const Alert = defineComponent({
[`${prefixClsValue}-banner`]: !!banner,
[`${prefixClsValue}-closable`]: closable,
[`${prefixClsValue}-rtl`]: direction.value === 'rtl',
[hashId.value]: true,
});
const closeIcon = closable ? (
@ -164,27 +167,29 @@ const Alert = defineComponent({
node.style.maxHeight = '0px';
},
});
return closed.value ? null : (
<Transition {...transitionProps}>
<div
role="alert"
{...attrs}
style={[attrs.style as CSSProperties, motionStyle.value]}
v-show={!closing.value}
class={[attrs.class, alertCls]}
data-show={!closing.value}
ref={alertNode}
>
{showIcon ? iconNode : null}
<div class={`${prefixClsValue}-content`}>
{message ? <div class={`${prefixClsValue}-message`}>{message}</div> : null}
{description ? (
<div class={`${prefixClsValue}-description`}>{description}</div>
) : null}
return wrapSSR(
closed.value ? null : (
<Transition {...transitionProps}>
<div
role="alert"
{...attrs}
style={[attrs.style as CSSProperties, motionStyle.value]}
v-show={!closing.value}
class={[attrs.class, alertCls]}
data-show={!closing.value}
ref={alertNode}
>
{showIcon ? iconNode : null}
<div class={`${prefixClsValue}-content`}>
{message ? <div class={`${prefixClsValue}-message`}>{message}</div> : null}
{description ? (
<div class={`${prefixClsValue}-description`}>{description}</div>
) : null}
</div>
{closeIcon}
</div>
{closeIcon}
</div>
</Transition>
</Transition>
),
);
};
},

4
components/theme/internal.ts
View File

@ -19,7 +19,7 @@ import type { FullToken } from './util/genComponentStyleHook';
import genComponentStyleHook from './util/genComponentStyleHook';
import statisticToken, { merge as mergeToken, statistic } from './util/statistic';
import type { VueNode } from '../_util/type';
import type { ComputedRef, InjectionKey } from 'vue';
import type { ComputedRef, InjectionKey, Ref } from 'vue';
import { computed, inject } from 'vue';
const defaultTheme = createTheme(defaultDerivative);
@ -89,7 +89,7 @@ export function useToken(): [
];
}
export type UseComponentStyleResult = [(node: VueNode) => VueNode, string];
export type UseComponentStyleResult = [(node: VueNode) => VueNode, Ref<string>];
export type GenerateStyle<
ComponentToken extends object = AliasToken,

112
components/theme/util/genComponentStyleHook.ts
View File

@ -7,6 +7,8 @@ import type { UseComponentStyleResult } from '../internal';
import { mergeToken, statisticToken, useToken } from '../internal';
import type { ComponentTokenMap, GlobalToken } from '../interface';
import useConfigInject from 'ant-design-vue/es/_util/hooks/useConfigInject';
import type { Ref } from 'vue';
import { computed } from 'vue';
export type OverrideTokenWithoutDerivative = ComponentTokenMap;
export type OverrideComponent = keyof OverrideTokenWithoutDerivative;
@ -42,70 +44,66 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
| OverrideTokenWithoutDerivative[ComponentName]
| ((token: GlobalToken) => OverrideTokenWithoutDerivative[ComponentName]),
) {
return (prefixCls: string): UseComponentStyleResult => {
return (prefixCls: Ref<string>): UseComponentStyleResult => {
const [theme, token, hashId] = useToken();
const { getPrefixCls, iconPrefixCls } = useConfigInject('', {});
const rootPrefixCls = getPrefixCls();
// Generate style for all a tags in antd component.
useStyleRegister(
{
const { rootPrefixCls, iconPrefixCls } = useConfigInject('', {});
const sharedInfo = computed(() => {
return {
theme: theme.value,
token: token.value,
hashId: hashId.value,
path: ['Shared', rootPrefixCls],
path: ['Shared', rootPrefixCls.value],
};
});
// Generate style for all a tags in antd component.
useStyleRegister(sharedInfo, () => [
{
// Link
'&': genLinkStyle(token.value),
},
() => [
{
// Link
'&': genLinkStyle(token.value),
},
],
);
]);
const componentInfo = computed(() => {
return {
theme: theme.value,
token: token.value,
hashId: hashId.value,
path: [component, prefixCls.value, iconPrefixCls.value],
};
});
return [
useStyleRegister(
{
theme: theme.value,
token: token.value,
useStyleRegister(componentInfo, () => {
const { token: proxyToken, flush } = statisticToken(token.value);
const defaultComponentToken =
typeof getDefaultToken === 'function'
? (getDefaultToken as any)(proxyToken)
: getDefaultToken;
const mergedComponentToken = { ...defaultComponentToken, ...token.value[component] };
const componentCls = `.${prefixCls.value}`;
const mergedToken = mergeToken<
TokenWithCommonCls<GlobalTokenWithComponent<OverrideComponent>>
>(
proxyToken,
{
componentCls,
prefixCls: prefixCls.value,
iconCls: `.${iconPrefixCls.value}`,
antCls: `.${rootPrefixCls.value}`,
},
mergedComponentToken,
);
const styleInterpolation = styleFn(mergedToken as unknown as FullToken<ComponentName>, {
hashId: hashId.value,
path: [component, prefixCls, iconPrefixCls.value],
},
() => {
const { token: proxyToken, flush } = statisticToken(token.value);
const defaultComponentToken =
typeof getDefaultToken === 'function'
? (getDefaultToken as any)(proxyToken)
: getDefaultToken;
const mergedComponentToken = { ...defaultComponentToken, ...token.value[component] };
const componentCls = `.${prefixCls}`;
const mergedToken = mergeToken<
TokenWithCommonCls<GlobalTokenWithComponent<OverrideComponent>>
>(
proxyToken,
{
componentCls,
prefixCls,
iconCls: `.${iconPrefixCls}`,
antCls: `.${rootPrefixCls}`,
},
mergedComponentToken,
);
const styleInterpolation = styleFn(mergedToken as unknown as FullToken<ComponentName>, {
hashId: hashId.value,
prefixCls,
rootPrefixCls,
iconPrefixCls: iconPrefixCls.value,
overrideComponentToken: token.value[component],
});
flush(component, mergedComponentToken);
return [genCommonStyle(token.value, prefixCls), styleInterpolation];
},
),
hashId.value,
prefixCls: prefixCls.value,
rootPrefixCls: rootPrefixCls.value,
iconPrefixCls: iconPrefixCls.value,
overrideComponentToken: token.value[component],
});
flush(component, mergedComponentToken);
return [genCommonStyle(token.value, prefixCls.value), styleInterpolation];
}),
hashId,
];
};
}