fix cr and add borderless tag demo

oceanbase · Oct 13, 2023 · 9be541b · 9be541b
1 parent dd8f9a6
commit 9be541b
Show file tree

Hide file tree

Showing 16 changed files with 418 additions and 314 deletions.
diff --git a/.dumirc.ts b/.dumirc.ts
@@ -111,6 +111,7 @@ export default defineConfig({
           children: [
             { title: 'Form 表单', link: '/components/form' },
             { title: 'InputNumber 数字输入框', link: '/components/input-number' },
+            { title: 'Select 选择器', link: '/components/select' },
           ],
         },
         {
@@ -120,7 +121,7 @@ export default defineConfig({
             { title: 'Descriptions 描述列表', link: '/components/descriptions' },
             { title: 'Table 表格', link: '/components/table' },
             { title: 'Tabs 标签页', link: '/components/tabs' },
-            {title: 'Tag 标签', link: '/components/tag'},
+            { title: 'Tag 标签', link: '/components/tag' },
             { title: 'Tooltip 文字提示', link: '/components/tooltip' },
           ],
         },

diff --git a/packages/design/src/select/demo/custom-tag-render.tsx b/packages/design/src/select/demo/custom-tag-render.tsx
@@ -0,0 +1,31 @@
+import { Select, Tag } from '@oceanbase/design';
+import React from 'react';
+
+const options = ['gold', 'green', 'red', 'cyan'];
+
+const tagRender = props => {
+  const { label, value, closable, onClose } = props;
+  const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  return (
+    <Tag color={value} onMouseDown={onPreventMouseDown} closable={closable} onClose={onClose}>
+      {label}
+    </Tag>
+  );
+};
+
+const App: React.FC = () => (
+  <>
+    <Select
+      mode="multiple"
+      tagRender={tagRender}
+      defaultValue={['gold', 'cyan']}
+      style={{ width: '100%' }}
+      options={options.map(item => ({ label: item, value: item }))}
+    />
+  </>
+);
+
+export default App;
diff --git a/packages/design/src/select/index.md b/packages/design/src/select/index.md
@@ -0,0 +1,15 @@
+---
+title: Select 选择器
+nav:
+  title: 基础组件
+  path: /components
+---
+
+- 🔥 完全兼容 antd [Select](https://ant.design/components/select-cn/) 的能力和 API，可无缝切换。
+- 💄 定制主题和样式，符合 OceanBase Design 设计规范。
+
+## 代码演示
+
+<code src="./demo/custom-tag-render.tsx" title="自定义选择标签" description="允许自定义选择标签的样式"></code>
+
+- 详见 antd Select 文档: https://ant.design/components/select-cn/
diff --git a/packages/design/src/select/index.tsx b/packages/design/src/select/index.tsx
@@ -1,30 +1,30 @@
-import {Select as AntSelect} from 'antd';
-import type {SelectProps as AntSelectProps} from 'antd/es/select';
+import { Select as AntSelect } from 'antd';
+import type { SelectProps as AntSelectProps } from 'antd/es/select';
 import classNames from 'classnames';
-import React, {useContext} from 'react';
+import React, { useContext } from 'react';
 import ConfigProvider from '../config-provider';
 import useStyle from './style';
 
-const {Option, OptGroup} = AntSelect;
+const { Option, OptGroup } = AntSelect;
 
 export * from 'antd/es/select';
 
 export type SelectProps = AntSelectProps;
 
-const Select = ({prefixCls: customizePrefixCls, className, ...restProps}: SelectProps) => {
-    const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
-    const prefixCls = getPrefixCls('select', customizePrefixCls);
-    const {wrapSSR} = useStyle(prefixCls);
+const Select = ({ prefixCls: customizePrefixCls, className, ...restProps }: SelectProps) => {
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('select', customizePrefixCls);
+  const { wrapSSR } = useStyle(prefixCls);
 
-    const selectCls = classNames(className);
-    return wrapSSR(<AntSelect prefixCls={customizePrefixCls} className={selectCls} {...restProps} />);
-}
+  const selectCls = classNames(className);
+  return wrapSSR(<AntSelect prefixCls={customizePrefixCls} className={selectCls} {...restProps} />);
+};
 
 Select.Option = Option;
 Select.OptGroup = OptGroup;
 
 if (process.env.NODE_ENV !== 'production') {
-    Select.displayName = AntSelect.displayName;
+  Select.displayName = AntSelect.displayName;
 }
 
-export default Select;
+export default Select;
diff --git a/packages/design/src/select/style/index.ts b/packages/design/src/select/style/index.ts
@@ -1,24 +1,24 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
-import { genComponentStyleHook } from '../../_util/genComponentStyleHook';;
+import { genComponentStyleHook } from '../../_util/genComponentStyleHook';
 
 export type SelectToken = FullToken<'Select'>;
 
 export const genSelectStyle: GenerateStyle<SelectToken> = (token: SelectToken): CSSObject => {
-    const {componentCls} = token;
+  const { componentCls } = token;
 
-    return {
-        [`${componentCls}-multiple`]: {
-            [`${componentCls}-selection-item`]: {
-                border:  `1px solid ${token.colorBorder}66`,
-            }
-        }
-    };
-}
+  return {
+    [`${componentCls}-multiple`]: {
+      [`${componentCls}-selection-item`]: {
+        border: `1px solid ${token.colorBorder}66`,
+      },
+    },
+  };
+};
 
 export default (prefixCls: string) => {
-    const useStyle = genComponentStyleHook('Select', token => {
-        return [genSelectStyle(token)];
-    });
-    return useStyle(prefixCls);
-}
+  const useStyle = genComponentStyleHook('Select', token => {
+    return [genSelectStyle(token)];
+  });
+  return useStyle(prefixCls);
+};
diff --git a/packages/design/src/tag/demo/basic.tsx b/packages/design/src/tag/demo/basic.tsx
@@ -1,31 +1,28 @@
-import {Tag, Tooltip, Typography} from '@oceanbase/design';
+import { Tag } from '@oceanbase/design';
 import React from 'react';
 
 const log = (e: React.MouseEvent<HTMLElement>) => {
-    console.log(e);
-  };
-
-  const preventDefault = (e: React.MouseEvent<HTMLElement>) => {
-    e.preventDefault();
-    console.log('Clicked! But prevent default.');
-  };
+  console.log(e);
+};
 
+const preventDefault = (e: React.MouseEvent<HTMLElement>) => {
+  e.preventDefault();
+  console.log('Clicked! But prevent default.');
+};
 
 const App: React.FC = () => (
-    <>
-      <Tag>Tag 1</Tag>
-      <Tag>
-        <a href="https://github.com/ant-design/ant-design/issues/1862">Link</a>
-      </Tag>
-      <Tag closable onClose={log}>
-        Tag 2
-      </Tag>
-      <Tag closable onClose={preventDefault}>
-        Prevent Default
-      </Tag>
-      <Tag width='150px'>Show ellipsis for excess</Tag>
-    </>
-  );
-
+  <>
+    <Tag>Tag 1</Tag>
+    <Tag>
+      <a href="https://github.com/oceanbase/oceanbase-design">Link</a>
+    </Tag>
+    <Tag closable onClose={log}>
+      Tag 2
+    </Tag>
+    <Tag closable onClose={preventDefault}>
+      Prevent Default
+    </Tag>
+  </>
+);
 
-export default App;
+export default App;
diff --git a/packages/design/src/tag/demo/borderless.tsx b/packages/design/src/tag/demo/borderless.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import { Divider, Space, Tag } from '@oceanbase/design';
+
+const App: React.FC = () => {
+  return (
+    <>
+      <Space size={[0, 'small']} wrap>
+        <Tag bordered={false}>Tag 1</Tag>
+        <Tag bordered={false}>Tag 2</Tag>
+        <Tag bordered={false} closable>
+          Tag 3
+        </Tag>
+        <Tag bordered={false} closable>
+          Tag 4
+        </Tag>
+      </Space>
+      <Divider />
+      <Space size={[0, 'small']} wrap>
+        <Tag bordered={false} color="processing">
+          processing
+        </Tag>
+        <Tag bordered={false} color="success">
+          success
+        </Tag>
+        <Tag bordered={false} color="error">
+          error
+        </Tag>
+        <Tag bordered={false} color="warning">
+          warning
+        </Tag>
+        <Tag bordered={false} color="magenta">
+          magenta
+        </Tag>
+        <Tag bordered={false} color="red">
+          red
+        </Tag>
+        <Tag bordered={false} color="volcano">
+          volcano
+        </Tag>
+        <Tag bordered={false} color="orange">
+          orange
+        </Tag>
+        <Tag bordered={false} color="gold">
+          gold
+        </Tag>
+        <Tag bordered={false} color="lime">
+          lime
+        </Tag>
+        <Tag bordered={false} color="green">
+          green
+        </Tag>
+        <Tag bordered={false} color="cyan">
+          cyan
+        </Tag>
+        <Tag bordered={false} color="blue">
+          blue
+        </Tag>
+        <Tag bordered={false} color="geekblue">
+          geekblue
+        </Tag>
+        <Tag bordered={false} color="purple">
+          purple
+        </Tag>
+      </Space>
+    </>
+  );
+};
+
+export default App;
diff --git a/packages/design/src/tag/demo/checkable.tsx b/packages/design/src/tag/demo/checkable.tsx
@@ -30,4 +30,4 @@ const App: React.FC = () => {
   );
 };
 
-export default App;
+export default App;
diff --git a/packages/design/src/tag/demo/color.tsx b/packages/design/src/tag/demo/color.tsx
@@ -1,30 +1,30 @@
-import {Tag, Divider} from '@oceanbase/design';
+import { Tag, Divider } from '@oceanbase/design';
 import React from 'react';
 
 const App: React.FC = () => (
-    <>
-      <Divider orientation="left">Presets</Divider>
-      <div>
-        <Tag color="magenta">magenta</Tag>
-        <Tag color="red">red</Tag>
-        <Tag color="volcano">volcano</Tag>
-        <Tag color="orange">orange</Tag>
-        <Tag color="gold">gold</Tag>
-        <Tag color="lime">lime</Tag>
-        <Tag color="green">green</Tag>
-        <Tag color="cyan">cyan</Tag>
-        <Tag color="blue">blue</Tag>
-        <Tag color="geekblue">geekblue</Tag>
-        <Tag color="purple">purple</Tag>
-      </div>
-      <Divider orientation="left">Custom</Divider>
-      <div>
-        <Tag color="#f50">#f50</Tag>
-        <Tag color="#2db7f5">#2db7f5</Tag>
-        <Tag color="#87d068">#87d068</Tag>
-        <Tag color="#108ee9">#108ee9</Tag>
-      </div>
-    </>
-  );
-  
-  export default App;
+  <>
+    <Divider orientation="left">Presets</Divider>
+    <div>
+      <Tag color="magenta">magenta</Tag>
+      <Tag color="red">red</Tag>
+      <Tag color="volcano">volcano</Tag>
+      <Tag color="orange">orange</Tag>
+      <Tag color="gold">gold</Tag>
+      <Tag color="lime">lime</Tag>
+      <Tag color="green">green</Tag>
+      <Tag color="cyan">cyan</Tag>
+      <Tag color="blue">blue</Tag>
+      <Tag color="geekblue">geekblue</Tag>
+      <Tag color="purple">purple</Tag>
+    </div>
+    <Divider orientation="left">Custom</Divider>
+    <div>
+      <Tag color="#f50">#f50</Tag>
+      <Tag color="#2db7f5">#2db7f5</Tag>
+      <Tag color="#87d068">#87d068</Tag>
+      <Tag color="#108ee9">#108ee9</Tag>
+    </div>
+  </>
+);
+
+export default App;
diff --git a/packages/design/src/tag/demo/ellipsis.tsx b/packages/design/src/tag/demo/ellipsis.tsx
@@ -0,0 +1,15 @@
+import { Tag, Typography, Tooltip } from '@oceanbase/design';
+import React from 'react';
+
+const App: React.FC = () => (
+  <>
+    <Tag>
+      Show ellipsis for excess.Show ellipsis for excess.Show ellipsis for excess.Show ellipsis for
+      excess.Show ellipsis for excess.Show ellipsis for excess.Show ellipsis for excess.Show
+      ellipsis for excess.Show ellipsis for excess.Show ellipsis for excess.Show ellipsis for
+      excess.Show ellipsis for excess.Show ellipsis for excess.Show ellipsis for excess.
+    </Tag>
+  </>
+);
+
+export default App;
-Original file line number
+Diff line change
@@ Expand Up / @@ -30,4 +30,4 @@ const App: React.FC = () => { @@
       );
     };
-    export default App;
+    export default App;