From 3499b11a4733e6b4b1670a41d47b040929548e7f Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Sat, 11 Nov 2023 10:24:58 +0800
Subject: [PATCH] refactor: flex components
---
components/flex/index.tsx | 40 ++++++++++--------------
components/theme/interface/components.ts | 2 +-
typings/global.d.ts | 2 ++
3 files changed, 19 insertions(+), 25 deletions(-)
diff --git a/components/flex/index.tsx b/components/flex/index.tsx
index bc2cf219c..68f540da4 100644
--- a/components/flex/index.tsx
+++ b/components/flex/index.tsx
@@ -1,9 +1,8 @@
-import { defineComponent, shallowRef } from 'vue';
+import { computed, defineComponent } from 'vue';
import type { CSSProperties } from 'vue';
import { useConfigContextInject } from '../config-provider/context';
import useConfigInject from '../config-provider/hooks/useConfigInject';
import useStyle from './style';
-import classNames from '../_util/classNames';
import { isPresetSize } from '../_util/gapSize';
import omit from '../_util/omit';
import { withInstall } from '../_util/type';
@@ -19,26 +18,20 @@ const AFlex = defineComponent({
const { flex: ctxFlex, direction: ctxDirection } = useConfigContextInject();
const { prefixCls } = useConfigInject('flex', props);
const [wrapSSR, hashId] = useStyle(prefixCls);
- const flexRef = shallowRef();
-
+ const mergedCls = computed(() => [
+ prefixCls.value,
+ hashId.value,
+ createFlexClassNames(prefixCls.value, props),
+ {
+ [`${prefixCls.value}-rtl`]: ctxDirection.value === 'rtl',
+ [`${prefixCls.value}-gap-${props.gap}`]: isPresetSize(props.gap),
+ [`${prefixCls.value}-vertical`]: props.vertical ?? ctxFlex?.value.vertical,
+ },
+ ]);
return () => {
- const { flex, gap, vertical = false, component: Component = 'div', ...othersProps } = props;
+ const { flex, gap, component: Component = 'div', ...othersProps } = props;
- const mergedVertical = vertical ?? ctxFlex?.value.vertical;
-
- const mergedCls = classNames(
- attrs.class,
- prefixCls.value,
- hashId.value,
- createFlexClassNames(prefixCls.value, props),
- {
- [`${prefixCls.value}-rtl`]: ctxDirection.value === 'rtl',
- [`${prefixCls.value}-gap-${gap}`]: isPresetSize(gap),
- [`${prefixCls.value}-vertical`]: mergedVertical,
- },
- );
-
- const mergedStyle = { ...(attrs.style as CSSProperties) };
+ const mergedStyle: CSSProperties = {};
if (flex) {
mergedStyle.flex = flex;
@@ -50,10 +43,9 @@ const AFlex = defineComponent({
return wrapSSR(
<Component
- ref={flexRef.value}
- class={mergedCls}
- style={mergedStyle}
- {...omit(othersProps, ['justify', 'wrap', 'align'])}
+ class={[attrs.class, mergedCls.value]}
+ style={[attrs.style as CSSProperties, mergedStyle]}
+ {...omit(othersProps, ['justify', 'wrap', 'align', 'vertical'])}
>
{slots.default?.()}
</Component>,
diff --git a/components/theme/interface/components.ts b/components/theme/interface/components.ts
index 2df1ea1ef..6a235294b 100644
--- a/components/theme/interface/components.ts
+++ b/components/theme/interface/components.ts
@@ -114,8 +114,8 @@ export interface ComponentTokenMap {
Tour?: TourComponentToken;
QRCode?: QRCodeComponentToken;
App?: AppComponentToken;
+ Flex?: FlexToken;
// /** @private Internal TS definition. Do not use. */
Wave?: WaveToken;
- Flex?: FlexToken;
}
diff --git a/typings/global.d.ts b/typings/global.d.ts
index 1f787aee0..d90a44bad 100644
--- a/typings/global.d.ts
+++ b/typings/global.d.ts
@@ -266,6 +266,8 @@ declare module 'vue' {
ABackTop: typeof import('ant-design-vue')['BackTop'];
AWatermark: typeof import('ant-design-vue')['Watermark'];
+
+ AFlex: typeof import('ant-design-vue')['Flex'];
}
}
export {};