From 765b7a21e7eb36165ca52ecbf62b1f1138208f30 Mon Sep 17 00:00:00 2001
From: dengfuping <fuping.dfp@antgroup.com>
Date: Thu, 7 Nov 2024 20:48:50 +0800
Subject: [PATCH] improve(design): vertical align center => baseline for over
 length Checkbox

---
 .dumirc.ts                                    |  1 +
 packages/design/src/checkbox/demo/basic.tsx   | 14 +++++++
 packages/design/src/checkbox/demo/group.tsx   | 35 +++++++++++++++++
 .../design/src/checkbox/demo/over-length.tsx  | 26 +++++++++++++
 packages/design/src/checkbox/index.md         | 22 +++++++++++
 packages/design/src/checkbox/index.ts         |  1 -
 packages/design/src/checkbox/index.tsx        | 38 +++++++++++++++++++
 packages/design/src/checkbox/interface.ts     |  1 +
 packages/design/src/checkbox/style/index.ts   | 26 +++++++++++++
 packages/design/src/index.ts                  |  3 ++
 10 files changed, 166 insertions(+), 1 deletion(-)
 create mode 100644 packages/design/src/checkbox/demo/basic.tsx
 create mode 100644 packages/design/src/checkbox/demo/group.tsx
 create mode 100644 packages/design/src/checkbox/demo/over-length.tsx
 create mode 100644 packages/design/src/checkbox/index.md
 delete mode 100644 packages/design/src/checkbox/index.ts
 create mode 100644 packages/design/src/checkbox/index.tsx
 create mode 100644 packages/design/src/checkbox/interface.ts
 create mode 100644 packages/design/src/checkbox/style/index.ts

diff --git a/.dumirc.ts b/.dumirc.ts
index dc80140fa..1959181dc 100644
--- a/.dumirc.ts
+++ b/.dumirc.ts
@@ -159,6 +159,7 @@ export default defineConfig({
             { title: 'Input 输入框', link: '/components/input' },
             { title: 'InputNumber 数字输入框', link: '/components/input-number' },
             { title: 'Radio 单选框', link: '/components/radio' },
+            { title: 'Checkbox 多选框', link: '/components/checkbox' },
             { title: 'Switch 开关', link: '/components/switch' },
             { title: 'Select 选择器', link: '/components/select' },
             { title: 'TreeSelect 树选择', link: '/components/tree-select' },
diff --git a/packages/design/src/checkbox/demo/basic.tsx b/packages/design/src/checkbox/demo/basic.tsx
new file mode 100644
index 000000000..12c104bd4
--- /dev/null
+++ b/packages/design/src/checkbox/demo/basic.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Checkbox } from '@oceanbase/design';
+
+const App: React.FC = () => (
+  <Checkbox
+    onChange={e => {
+      console.log(`checked: ${e.target.checked}`);
+    }}
+  >
+    Checkbox
+  </Checkbox>
+);
+
+export default App;
diff --git a/packages/design/src/checkbox/demo/group.tsx b/packages/design/src/checkbox/demo/group.tsx
new file mode 100644
index 000000000..e6f4907de
--- /dev/null
+++ b/packages/design/src/checkbox/demo/group.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { Checkbox } from '@oceanbase/design';
+import type { CheckboxGroupProps } from '@oceanbase/design/es/checkbox';
+
+const onChange: CheckboxGroupProps['onChange'] = checkedValues => {
+  console.log('checked = ', checkedValues);
+};
+
+const options = [
+  { label: 'Apple', value: 'Apple' },
+  { label: 'Pear', value: 'Pear' },
+  { label: 'Orange', value: 'Orange' },
+];
+
+const optionsWithDisabled = [
+  { label: 'Apple', value: 'Apple' },
+  { label: 'Pear', value: 'Pear' },
+  { label: 'Orange', value: 'Orange', disabled: false },
+];
+
+const App: React.FC = () => (
+  <>
+    <Checkbox.Group options={options} defaultValue={['Pear']} onChange={onChange} />
+    <br />
+    <br />
+    <Checkbox.Group
+      options={optionsWithDisabled}
+      disabled
+      defaultValue={['Apple']}
+      onChange={onChange}
+    />
+  </>
+);
+
+export default App;
diff --git a/packages/design/src/checkbox/demo/over-length.tsx b/packages/design/src/checkbox/demo/over-length.tsx
new file mode 100644
index 000000000..fa8dc2d52
--- /dev/null
+++ b/packages/design/src/checkbox/demo/over-length.tsx
@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import { Checkbox, Space } from '@oceanbase/design';
+import type { CheckboxGroupProps } from '@oceanbase/design/es/checkbox';
+
+const App: React.FC = () => {
+  const [value, setValue] = useState(['long']);
+
+  const onChange: CheckboxGroupProps['onChange'] = value => {
+    console.log('checkbox checked', value);
+    setValue(value);
+  };
+
+  return (
+    <Checkbox.Group onChange={onChange} value={value}>
+      <Space direction="vertical">
+        <Checkbox 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
+        </Checkbox>
+        <Checkbox value="short">This is short text</Checkbox>
+      </Space>
+    </Checkbox.Group>
+  );
+};
+
+export default App;
diff --git a/packages/design/src/checkbox/index.md b/packages/design/src/checkbox/index.md
new file mode 100644
index 000000000..98dbbd232
--- /dev/null
+++ b/packages/design/src/checkbox/index.md
@@ -0,0 +1,22 @@
+---
+title: Checkbox 多选框
+nav:
+  title: 基础组件
+  path: /components
+demo:
+  cols: 2
+---
+
+- 🔥 完全继承 antd [Checkbox](https://ant.design/components/checkbox-cn) 的能力和 API，可无缝切换。
+- 💄 定制主题和样式，符合 OceanBase Design 设计规范。
+
+## 代码演示
+
+<!-- prettier-ignore -->
+<code src="./demo/basic.tsx" title="基本"></code>
+<code src="./demo/group.tsx" title="Checkbox 组"></code>
+<code src="./demo/over-length.tsx" title="超长内容"></code>
+
+## API
+
+- 详见 antd Checkbox 文档: https://ant.design/components/checkbox-cn
diff --git a/packages/design/src/checkbox/index.ts b/packages/design/src/checkbox/index.ts
deleted file mode 100644
index 2f1e6b409..000000000
--- a/packages/design/src/checkbox/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from 'antd/es/checkbox';
diff --git a/packages/design/src/checkbox/index.tsx b/packages/design/src/checkbox/index.tsx
new file mode 100644
index 000000000..42776e772
--- /dev/null
+++ b/packages/design/src/checkbox/index.tsx
@@ -0,0 +1,38 @@
+import { Checkbox as AntCheckbox } from 'antd';
+import type { CheckboxProps as AntCheckboxProps, CheckboxRef } from 'antd/es/Checkbox';
+import classNames from 'classnames';
+import React, { useContext } from 'react';
+import ConfigProvider from '../config-provider';
+import useStyle from './style';
+
+export * from 'antd/es/checkbox';
+
+const InternalCheckbox = React.forwardRef<CheckboxRef, AntCheckboxProps>(
+  ({ prefixCls: customizePrefixCls, className, ...restProps }, ref) => {
+    const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+    const prefixCls = getPrefixCls('checkbox', customizePrefixCls);
+    const { wrapSSR } = useStyle(prefixCls);
+    const checkboxCls = classNames(className);
+
+    return wrapSSR(
+      <AntCheckbox
+        ref={ref}
+        prefixCls={customizePrefixCls}
+        className={checkboxCls}
+        {...restProps}
+      />
+    );
+  }
+);
+
+const Checkbox = InternalCheckbox as typeof Checkbox;
+
+Checkbox.Group = AntCheckbox.Group;
+// @ts-ignore
+Checkbox.__ANT_CHECKBOX = AntCheckbox.__ANT_CHECKBOX;
+
+if (process.env.NODE_ENV !== 'production') {
+  Checkbox.displayName = AntCheckbox.displayName;
+}
+
+export default Checkbox;
diff --git a/packages/design/src/checkbox/interface.ts b/packages/design/src/checkbox/interface.ts
new file mode 100644
index 000000000..c7f4b2035
--- /dev/null
+++ b/packages/design/src/checkbox/interface.ts
@@ -0,0 +1 @@
+export * from 'antd/es/radio/interface';
diff --git a/packages/design/src/checkbox/style/index.ts b/packages/design/src/checkbox/style/index.ts
new file mode 100644
index 000000000..124bce715
--- /dev/null
+++ b/packages/design/src/checkbox/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 CheckboxToken = FullToken<'Checkbox'>;
+
+export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token: CheckboxToken): CSSObject => {
+  const { componentCls, fontSize, fontSizeLG, lineHeight } = token;
+  return {
+    [`${componentCls}-wrapper`]: {
+      [`${componentCls}`]: {
+        alignSelf: 'baseline',
+        [`${componentCls}-inner`]: {
+          transform: `translate(0px, ${(fontSize * lineHeight - fontSizeLG) / 2}px)`,
+        },
+      },
+    },
+  };
+};
+
+export default (prefixCls: string) => {
+  const useStyle = genComponentStyleHook('Checkbox', token => {
+    return [genCheckboxStyle(token as CheckboxToken)];
+  });
+  return useStyle(prefixCls);
+};
diff --git a/packages/design/src/index.ts b/packages/design/src/index.ts
index 4ff3a9018..2909744f6 100644
--- a/packages/design/src/index.ts
+++ b/packages/design/src/index.ts
@@ -66,6 +66,9 @@ export type { InputNumberProps } from './input-number';
 export { default as Radio } from './radio';
 export type { RadioProps } from './radio';
 
+export { default as Checkbox } from './checkbox';
+export type { CheckboxProps } from './checkbox';
+
 export { default as Select } from './select';
 export type { SelectProps } from './select';