From ef16661f763265cdb0fcd736586b83c0cec0121e Mon Sep 17 00:00:00 2001
From: dengfuping <fuping.dfp@antgroup.com>
Date: Thu, 14 Nov 2024 16:43:11 +0800
Subject: [PATCH] improve(design): Switch unchecked background color

---
 packages/design/src/index.ts              |  3 +++
 packages/design/src/radio/index.tsx       |  2 +-
 packages/design/src/switch/demo/text.tsx  | 17 +++++++++++++
 packages/design/src/switch/index.md       |  1 +
 packages/design/src/switch/index.ts       |  1 -
 packages/design/src/switch/index.tsx      | 31 +++++++++++++++++++++++
 packages/design/src/switch/style/index.ts | 22 ++++++++++++++++
 7 files changed, 75 insertions(+), 2 deletions(-)
 create mode 100644 packages/design/src/switch/demo/text.tsx
 delete mode 100644 packages/design/src/switch/index.ts
 create mode 100644 packages/design/src/switch/index.tsx
 create mode 100644 packages/design/src/switch/style/index.ts

diff --git a/packages/design/src/index.ts b/packages/design/src/index.ts
index e4f3707e6..a315aa483 100644
--- a/packages/design/src/index.ts
+++ b/packages/design/src/index.ts
@@ -69,6 +69,9 @@ export type { RadioProps } from './radio';
 export { default as Checkbox } from './checkbox';
 export type { CheckboxProps } from './checkbox';
 
+export { default as Switch } from './switch';
+export type { SwitchProps } from './switch';
+
 export { default as Select } from './select';
 export type { SelectProps } from './select';
 
diff --git a/packages/design/src/radio/index.tsx b/packages/design/src/radio/index.tsx
index 7157563e5..d7b3e1a9d 100644
--- a/packages/design/src/radio/index.tsx
+++ b/packages/design/src/radio/index.tsx
@@ -19,7 +19,7 @@ const InternalRadio = React.forwardRef<RadioRef, AntRadioProps>(
   }
 );
 
-const Radio = InternalRadio as typeof Radio;
+const Radio = InternalRadio as typeof AntRadio;
 
 Radio.Button = AntRadio.Button;
 Radio.Group = AntRadio.Group;
diff --git a/packages/design/src/switch/demo/text.tsx b/packages/design/src/switch/demo/text.tsx
new file mode 100644
index 000000000..b23b24ecf
--- /dev/null
+++ b/packages/design/src/switch/demo/text.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
+import { Space, Switch } from '@oceanbase/design';
+
+const App: React.FC = () => (
+  <Space direction="vertical">
+    <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked />
+    <Switch checkedChildren="1" unCheckedChildren="0" />
+    <Switch
+      checkedChildren={<CheckOutlined />}
+      unCheckedChildren={<CloseOutlined />}
+      defaultChecked
+    />
+  </Space>
+);
+
+export default App;
diff --git a/packages/design/src/switch/index.md b/packages/design/src/switch/index.md
index 4ccb6e1e2..a31684b86 100644
--- a/packages/design/src/switch/index.md
+++ b/packages/design/src/switch/index.md
@@ -17,6 +17,7 @@ demo:
 <code src="./demo/size.tsx" title="大小"></code>
 <code src="./demo/disabled.tsx" title="禁用"></code>
 <code src="./demo/loading.tsx" title="加载中"></code>
+<code src="./demo/text.tsx" title="文字和图标"></code>
 
 ## API
 
diff --git a/packages/design/src/switch/index.ts b/packages/design/src/switch/index.ts
deleted file mode 100644
index 78eb85611..000000000
--- a/packages/design/src/switch/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from 'antd/es/switch';
diff --git a/packages/design/src/switch/index.tsx b/packages/design/src/switch/index.tsx
new file mode 100644
index 000000000..1efe275f7
--- /dev/null
+++ b/packages/design/src/switch/index.tsx
@@ -0,0 +1,31 @@
+import { Switch as AntSwitch } from 'antd';
+import type { SwitchProps as AntSwitchProps } from 'antd/es/switch';
+import classNames from 'classnames';
+import React, { useContext } from 'react';
+import ConfigProvider from '../config-provider';
+import useStyle from './style';
+
+export * from 'antd/es/switch';
+
+const InternalSwitch = React.forwardRef<HTMLButtonElement, AntSwitchProps>(
+  ({ prefixCls: customizePrefixCls, className, ...restProps }, ref) => {
+    const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+    const prefixCls = getPrefixCls('switch', customizePrefixCls);
+    const { wrapSSR } = useStyle(prefixCls);
+    const switchCls = classNames(className);
+    return wrapSSR(
+      <AntSwitch ref={ref} prefixCls={customizePrefixCls} className={switchCls} {...restProps} />
+    );
+  }
+);
+
+const Switch = InternalSwitch as typeof AntSwitch;
+
+// @ts-ignore
+Switch.__ANT_SWITCH = AntSwitch.__ANT_SWITCH;
+
+if (process.env.NODE_ENV !== 'production') {
+  Switch.displayName = AntSwitch.displayName;
+}
+
+export default Switch;
diff --git a/packages/design/src/switch/style/index.ts b/packages/design/src/switch/style/index.ts
new file mode 100644
index 000000000..41f2ba0b0
--- /dev/null
+++ b/packages/design/src/switch/style/index.ts
@@ -0,0 +1,22 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
+import { genComponentStyleHook } from '../../_util/genComponentStyleHook';
+
+export type SwitchToken = FullToken<'Switch'>;
+
+export const genSwitchStyle: GenerateStyle<SwitchToken> = (token: SwitchToken): CSSObject => {
+  const { componentCls } = token;
+  return {
+    [`${componentCls}:not(${componentCls}-checked):not(${componentCls}-disabled):not(${componentCls}-loading)`]:
+      {
+        background: token.colorTextTertiary,
+      },
+  };
+};
+
+export default (prefixCls: string) => {
+  const useStyle = genComponentStyleHook('Switch', token => {
+    return [genSwitchStyle(token as SwitchToken)];
+  });
+  return useStyle(prefixCls);
+};