From 93698b509f622cfe844d0b780ee3252837e83425 Mon Sep 17 00:00:00 2001
From: dengfuping <fuping.dfp@antgroup.com>
Date: Thu, 7 Nov 2024 19:23:20 +0800
Subject: [PATCH] fix(design): over length Radio should align to start

---
 packages/design/src/index.ts                  |  3 ++
 .../design/src/radio/demo/over-length.tsx     | 26 +++++++++++++++
 packages/design/src/radio/index.md            |  1 +
 packages/design/src/radio/index.ts            |  1 -
 packages/design/src/radio/index.tsx           | 33 +++++++++++++++++++
 packages/design/src/radio/style/index.ts      | 26 +++++++++++++++
 6 files changed, 89 insertions(+), 1 deletion(-)
 create mode 100644 packages/design/src/radio/demo/over-length.tsx
 delete mode 100644 packages/design/src/radio/index.ts
 create mode 100644 packages/design/src/radio/index.tsx
 create mode 100644 packages/design/src/radio/style/index.ts

diff --git a/packages/design/src/index.ts b/packages/design/src/index.ts
index 81a7f5630..4ff3a9018 100644
--- a/packages/design/src/index.ts
+++ b/packages/design/src/index.ts
@@ -63,6 +63,9 @@ export type { InputProps } from './input';
 export { default as InputNumber } from './input-number';
 export type { InputNumberProps } from './input-number';
 
+export { default as Radio } from './radio';
+export type { RadioProps } from './radio';
+
 export { default as Select } from './select';
 export type { SelectProps } from './select';
 
diff --git a/packages/design/src/radio/demo/over-length.tsx b/packages/design/src/radio/demo/over-length.tsx
new file mode 100644
index 000000000..5d2a3e693
--- /dev/null
+++ b/packages/design/src/radio/demo/over-length.tsx
@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import { Radio, Space } from '@oceanbase/design';
+import type { RadioChangeEvent } from '@oceanbase/design';
+
+const App: React.FC = () => {
+  const [value, setValue] = useState('long');
+
+  const onChange = (e: RadioChangeEvent) => {
+    console.log('radio checked', e.target.value);
+    setValue(e.target.value);
+  };
+
+  return (
+    <Radio.Group onChange={onChange} value={value}>
+      <Space direction="vertical">
+        <Radio value="long">
+          This is long long long long long long long long long long long long long long long long
+          long long long long long long long long text
+        </Radio>
+        <Radio value="short">This is short text</Radio>
+      </Space>
+    </Radio.Group>
+  );
+};
+
+export default App;
diff --git a/packages/design/src/radio/index.md b/packages/design/src/radio/index.md
index 25e435405..0554b94ff 100644
--- a/packages/design/src/radio/index.md
+++ b/packages/design/src/radio/index.md
@@ -15,6 +15,7 @@ demo:
 <!-- prettier-ignore -->
 <code src="./demo/radio.tsx" title="单选"></code>
 <code src="./demo/radio-button.tsx" title="单选按钮"></code>
+<code src="./demo/over-length.tsx" title="超长内容"></code>
 
 ## API
 
diff --git a/packages/design/src/radio/index.ts b/packages/design/src/radio/index.ts
deleted file mode 100644
index fa375fb4a..000000000
--- a/packages/design/src/radio/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from 'antd/es/radio';
diff --git a/packages/design/src/radio/index.tsx b/packages/design/src/radio/index.tsx
new file mode 100644
index 000000000..7157563e5
--- /dev/null
+++ b/packages/design/src/radio/index.tsx
@@ -0,0 +1,33 @@
+import { Radio as AntRadio } from 'antd';
+import type { RadioProps as AntRadioProps, RadioRef } from 'antd/es/radio';
+import classNames from 'classnames';
+import React, { useContext } from 'react';
+import ConfigProvider from '../config-provider';
+import useStyle from './style';
+
+export * from 'antd/es/radio';
+
+const InternalRadio = React.forwardRef<RadioRef, AntRadioProps>(
+  ({ prefixCls: customizePrefixCls, className, ...restProps }, ref) => {
+    const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+    const prefixCls = getPrefixCls('radio', customizePrefixCls);
+    const { wrapSSR } = useStyle(prefixCls);
+    const radioCls = classNames(className);
+    return wrapSSR(
+      <AntRadio ref={ref} prefixCls={customizePrefixCls} className={radioCls} {...restProps} />
+    );
+  }
+);
+
+const Radio = InternalRadio as typeof Radio;
+
+Radio.Button = AntRadio.Button;
+Radio.Group = AntRadio.Group;
+// @ts-ignore
+Radio.__ANT_RADIO = AntRadio.__ANT_RADIO;
+
+if (process.env.NODE_ENV !== 'production') {
+  Radio.displayName = AntRadio.displayName;
+}
+
+export default Radio;
diff --git a/packages/design/src/radio/style/index.ts b/packages/design/src/radio/style/index.ts
new file mode 100644
index 000000000..bfe690c6e
--- /dev/null
+++ b/packages/design/src/radio/style/index.ts
@@ -0,0 +1,26 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
+import { genComponentStyleHook } from '../../_util/genComponentStyleHook';
+
+export type RadioToken = FullToken<'Radio'>;
+
+export const genRadioStyle: GenerateStyle<RadioToken> = (token: RadioToken): CSSObject => {
+  const { componentCls, radioSize, fontSize, fontSizeLG, lineHeight } = token;
+  return {
+    [`${componentCls}-wrapper`]: {
+      [`${componentCls}`]: {
+        alignSelf: 'auto',
+        [`${componentCls}-inner`]: {
+          marginBottom: -(fontSize * lineHeight - (radioSize || fontSizeLG)) / 2,
+        },
+      },
+    },
+  };
+};
+
+export default (prefixCls: string) => {
+  const useStyle = genComponentStyleHook('Radio', token => {
+    return [genRadioStyle(token as RadioToken)];
+  });
+  return useStyle(prefixCls);
+};