improve(design): vertical align center => baseline for over length Ch…

…eckbox

.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' },

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;

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;

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;

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

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;

packages/design/src/checkbox/interface.ts

@@ -0,0 +1 @@
+export * from 'antd/es/radio/interface';

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);
+};

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';