Merge pull request #113 from oceanbase/wangdongya-dev

feat(Tag): modify boderColor and add ellipsis for Tag

.dumirc.ts

@@ -114,6 +114,7 @@ export default defineConfig({
           children: [
             { title: 'Form 表单', link: '/components/form' },
             { title: 'InputNumber 数字输入框', link: '/components/input-number' },
+            { title: 'Select 选择器', link: '/components/select' },
           ],
         },
         {
@@ -123,6 +124,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: 'Tooltip 文字提示', link: '/components/tooltip' },
           ],
         },

packages/design/src/config-provider/demo/size.tsx

@@ -48,7 +48,7 @@ const App: React.FC = () => {
           </Tabs>
           <Input.Search allowClear />
           <Input.TextArea allowClear />
-          <Select defaultValue="demo" options={[{ value: 'demo' }]} />
+          <Select defaultValue="demo" options={[{ value: 'demo', label: 'demo' }]} />
           <DatePicker />
           <DatePicker.RangePicker />
           <Button>Button</Button>

packages/design/src/index.ts

@@ -15,6 +15,8 @@ export { message, notification, token } from './static-function';
 export { default as Table } from './table';
 
 export { default as Tabs } from './tabs';
+export { default as Tag } from './tag';
+export { default as Select } from './select';
 export type { TabsProps } from './tabs';
 
 export { default as theme } from './theme';

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;

packages/design/src/select/demo/tags.tsx

@@ -0,0 +1,28 @@
+import { Select } from '@oceanbase/design';
+import React from 'react';
+import type { SelectProps } from '@oceanbase/design';
+
+const options: SelectProps['options'] = [];
+
+for (let i = 10; i < 36; i++) {
+  options.push({
+    value: i.toString(36) + i,
+    label: i.toString(36) + i,
+  });
+}
+
+const handleChange = (value: string) => {
+  console.log(`selected ${value}`);
+};
+
+const App: React.FC = () => (
+  <Select
+    mode="tags"
+    style={{ width: '100%' }}
+    placeholder="Tags Mode"
+    onChange={handleChange}
+    options={options}
+  />
+);
+
+export default App;

packages/design/src/select/index.md

@@ -0,0 +1,16 @@
+---
+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>
+<code src="./demo/tags.tsx" title="标签" description="tags select，随意输入的内容（scroll the menu）。"></code>
+
+- 详见 antd Select 文档: https://ant.design/components/select-cn/

packages/design/src/select/index.tsx

@@ -0,0 +1,30 @@
+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 ConfigProvider from '../config-provider';
+import useStyle from './style';
+
+const { Option, OptGroup } = AntSelect;
+
+export * from 'antd/es/select';
+
+export type SelectProps = AntSelectProps;
+
+const Select: any = ({ 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} />);
+};
+
+Select.Option = Option;
+Select.OptGroup = OptGroup;
+
+if (process.env.NODE_ENV !== 'production') {
+  Select.displayName = AntSelect.displayName;
+}
+
+export default Select;

packages/design/src/select/style/index.ts

@@ -0,0 +1,24 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
+import { genComponentStyleHook } from '../../_util/genComponentStyleHook';
+
+export type SelectToken = FullToken<'Select'>;
+
+export const genSelectStyle: GenerateStyle<SelectToken> = (token: SelectToken): CSSObject => {
+  const { componentCls } = token;
+
+  return {
+    [`${componentCls}-multiple`]: {
+      [`${componentCls}-selection-item`]: {
+        border: `1px solid ${token.colorBorder}66`,
+      },
+    },
+  };
+};
+
+export default (prefixCls: string) => {
+  const useStyle = genComponentStyleHook('Select', (token: SelectToken) => {
+    return [genSelectStyle(token)];
+  });
+  return useStyle(prefixCls);
+};

packages/design/src/tag/demo/basic.tsx

@@ -0,0 +1,28 @@
+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.');
+};
+
+const App: React.FC = () => (
+  <>
+    <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;

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;

packages/design/src/tag/demo/checkable.tsx

@@ -0,0 +1,33 @@
+import { Tag } from '@oceanbase/design';
+import React, { useState } from 'react';
+
+const { CheckableTag } = Tag;
+
+const tagsData = ['Movies', 'Books', 'Music', 'Sports'];
+
+const App: React.FC = () => {
+  const [selectedTags, setSelectedTags] = useState<string[]>(['Books']);
+
+  const handleChange = (tag: string, checked: boolean) => {
+    const nextSelectedTags = checked ? [...selectedTags, tag] : selectedTags.filter(t => t !== tag);
+    console.log('You are interested in: ', nextSelectedTags);
+    setSelectedTags(nextSelectedTags);
+  };
+
+  return (
+    <>
+      <span style={{ marginRight: 8 }}>Categories:</span>
+      {tagsData.map(tag => (
+        <CheckableTag
+          key={tag}
+          checked={selectedTags.indexOf(tag) > -1}
+          onChange={checked => handleChange(tag, checked)}
+        >
+          {tag}
+        </CheckableTag>
+      ))}
+    </>
+  );
+};
+
+export default App;

packages/design/src/tag/demo/color.tsx

@@ -0,0 +1,30 @@
+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;

packages/design/src/tag/demo/ellipsis.tsx

@@ -0,0 +1,15 @@
+import { Tag } 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;

packages/design/src/tag/demo/icon.tsx

@@ -0,0 +1,27 @@
+import {
+  FacebookOutlined,
+  LinkedinOutlined,
+  TwitterOutlined,
+  YoutubeOutlined,
+} from '@oceanbase/icons';
+import { Tag } from '@oceanbase/design';
+import React from 'react';
+
+const App: React.FC = () => (
+  <>
+    <Tag icon={<TwitterOutlined />} color="#55acee">
+      Twitter
+    </Tag>
+    <Tag icon={<YoutubeOutlined />} color="#cd201f">
+      Youtube
+    </Tag>
+    <Tag icon={<FacebookOutlined />} color="#3b5999">
+      Facebook
+    </Tag>
+    <Tag icon={<LinkedinOutlined />} color="#55acee">
+      LinkedIn
+    </Tag>
+  </>
+);
+
+export default App;