From 473105130c67c1c772b62d481d381999f3b8a6ae Mon Sep 17 00:00:00 2001 From: wdy01684395 Date: Thu, 31 Aug 2023 17:20:52 +0800 Subject: [PATCH 1/9] feat(Tag): modify boderColor and add ellipsis for Tag --- .dumirc.ts | 1 + packages/design/src/index.ts | 1 + packages/design/src/tag/demo/basic.tsx | 31 ++++++++ packages/design/src/tag/demo/checkable.tsx | 33 ++++++++ packages/design/src/tag/demo/color.tsx | 30 ++++++++ packages/design/src/tag/demo/icon.tsx | 27 +++++++ packages/design/src/tag/demo/select.tsx | 39 ++++++++++ packages/design/src/tag/demo/status.tsx | 48 ++++++++++++ packages/design/src/tag/index.md | 25 ++++++ packages/design/src/tag/index.ts | 1 - packages/design/src/tag/index.tsx | 48 ++++++++++++ packages/design/src/tag/style/index.ts | 88 ++++++++++++++++++++++ 12 files changed, 371 insertions(+), 1 deletion(-) create mode 100644 packages/design/src/tag/demo/basic.tsx create mode 100644 packages/design/src/tag/demo/checkable.tsx create mode 100644 packages/design/src/tag/demo/color.tsx create mode 100644 packages/design/src/tag/demo/icon.tsx create mode 100644 packages/design/src/tag/demo/select.tsx create mode 100644 packages/design/src/tag/demo/status.tsx create mode 100644 packages/design/src/tag/index.md delete mode 100644 packages/design/src/tag/index.ts create mode 100644 packages/design/src/tag/index.tsx create mode 100644 packages/design/src/tag/style/index.ts diff --git a/.dumirc.ts b/.dumirc.ts index 241128782..998fef237 100644 --- a/.dumirc.ts +++ b/.dumirc.ts @@ -119,6 +119,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' }, ], }, diff --git a/packages/design/src/index.ts b/packages/design/src/index.ts index c6f1402c3..5d101bfab 100644 --- a/packages/design/src/index.ts +++ b/packages/design/src/index.ts @@ -16,6 +16,7 @@ export { default as Modal } from './modal'; 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 theme } from './theme'; export { default as Tooltip } from './tooltip'; export { default as Breadcrumb } from './breadcrumb'; diff --git a/packages/design/src/tag/demo/basic.tsx b/packages/design/src/tag/demo/basic.tsx new file mode 100644 index 000000000..3f35e8177 --- /dev/null +++ b/packages/design/src/tag/demo/basic.tsx @@ -0,0 +1,31 @@ +import {Tag, Tooltip, Typography} from '@oceanbase/design'; +import React from 'react'; + +const log = (e: React.MouseEvent) => { + console.log(e); + }; + + const preventDefault = (e: React.MouseEvent) => { + e.preventDefault(); + console.log('Clicked! But prevent default.'); + }; + + +const App: React.FC = () => ( + <> + Tag 1 + + Link + + + Tag 2 + + + Prevent Default + + Show ellipsis for excess + + ); + + +export default App; \ No newline at end of file diff --git a/packages/design/src/tag/demo/checkable.tsx b/packages/design/src/tag/demo/checkable.tsx new file mode 100644 index 000000000..c2609075a --- /dev/null +++ b/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(['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 ( + <> + Categories: + {tagsData.map(tag => ( + -1} + onChange={checked => handleChange(tag, checked)} + > + {tag} + + ))} + + ); +}; + +export default App; \ No newline at end of file diff --git a/packages/design/src/tag/demo/color.tsx b/packages/design/src/tag/demo/color.tsx new file mode 100644 index 000000000..7431c2957 --- /dev/null +++ b/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 = () => ( + <> + Presets +
+ magenta + red + volcano + orange + gold + lime + green + cyan + blue + geekblue + purple +
+ Custom +
+ #f50 + #2db7f5 + #87d068 + #108ee9 +
+ + ); + + export default App; \ No newline at end of file diff --git a/packages/design/src/tag/demo/icon.tsx b/packages/design/src/tag/demo/icon.tsx new file mode 100644 index 000000000..d70fd2e29 --- /dev/null +++ b/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 = () => ( + <> + } color="#55acee"> + Twitter + + } color="#cd201f"> + Youtube + + } color="#3b5999"> + Facebook + + } color="#55acee"> + LinkedIn + + + ); + + export default App; \ No newline at end of file diff --git a/packages/design/src/tag/demo/select.tsx b/packages/design/src/tag/demo/select.tsx new file mode 100644 index 000000000..c221052bc --- /dev/null +++ b/packages/design/src/tag/demo/select.tsx @@ -0,0 +1,39 @@ + +import { Select, Tag } from "@oceanbase/design"; +import React from "react"; + +const options = [{value: 'gold'}, {value: 'green'}, {value: 'red'}, {value: 'cyan'}]; + +const tagRender = (props) => { + const { label, value, closable, onClose } = props; + const onPreventMouseDown = (event: React.MouseEvent) => { + event.preventDefault(); + event.stopPropagation(); + }; + return ( + + {label} + + ); +} + +const App: React.FC = () => ( + <> + ({label: item, value: item}))} + /> + Input + ({ label: item, value: item }))} + /> + +); + +export default App; diff --git a/packages/design/src/select/index.md b/packages/design/src/select/index.md new file mode 100644 index 000000000..cd5ef6398 --- /dev/null +++ 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 设计规范。 + +## 代码演示 + + + +- 详见 antd Select 文档: https://ant.design/components/select-cn/ diff --git a/packages/design/src/select/index.tsx b/packages/design/src/select/index.tsx index ea59afa56..41ca06200 100644 --- 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(); -} + const selectCls = classNames(className); + return wrapSSR(); +}; Select.Option = Option; Select.OptGroup = OptGroup; if (process.env.NODE_ENV !== 'production') { - Select.displayName = AntSelect.displayName; + Select.displayName = AntSelect.displayName; } -export default Select; \ No newline at end of file +export default Select; diff --git a/packages/design/src/select/style/index.ts b/packages/design/src/select/style/index.ts index 32e055429..0747a0d6f 100644 --- 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 = (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); -} \ No newline at end of file + 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 index 3f35e8177..ff4cb23b9 100644 --- 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) => { - console.log(e); - }; - - const preventDefault = (e: React.MouseEvent) => { - e.preventDefault(); - console.log('Clicked! But prevent default.'); - }; + console.log(e); +}; +const preventDefault = (e: React.MouseEvent) => { + e.preventDefault(); + console.log('Clicked! But prevent default.'); +}; const App: React.FC = () => ( - <> - Tag 1 - - Link - - - Tag 2 - - - Prevent Default - - Show ellipsis for excess - - ); - + <> + Tag 1 + + Link + + + Tag 2 + + + Prevent Default + + +); -export default App; \ No newline at end of file +export default App; diff --git a/packages/design/src/tag/demo/borderless.tsx b/packages/design/src/tag/demo/borderless.tsx new file mode 100644 index 000000000..be2ff5b48 --- /dev/null +++ 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 ( + <> + + Tag 1 + Tag 2 + + Tag 3 + + + Tag 4 + + + + + + processing + + + success + + + error + + + warning + + + magenta + + + red + + + volcano + + + orange + + + gold + + + lime + + + green + + + cyan + + + blue + + + geekblue + + + purple + + + + ); +}; + +export default App; diff --git a/packages/design/src/tag/demo/checkable.tsx b/packages/design/src/tag/demo/checkable.tsx index c2609075a..b13fd760f 100644 --- 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; \ No newline at end of file +export default App; diff --git a/packages/design/src/tag/demo/color.tsx b/packages/design/src/tag/demo/color.tsx index 7431c2957..f5f50f5d2 100644 --- 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 = () => ( - <> - Presets -
- magenta - red - volcano - orange - gold - lime - green - cyan - blue - geekblue - purple -
- Custom -
- #f50 - #2db7f5 - #87d068 - #108ee9 -
- - ); - - export default App; \ No newline at end of file + <> + Presets +
+ magenta + red + volcano + orange + gold + lime + green + cyan + blue + geekblue + purple +
+ Custom +
+ #f50 + #2db7f5 + #87d068 + #108ee9 +
+ +); + +export default App; diff --git a/packages/design/src/tag/demo/ellipsis.tsx b/packages/design/src/tag/demo/ellipsis.tsx new file mode 100644 index 000000000..5497ea507 --- /dev/null +++ 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 = () => ( + <> + + 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. + + +); + +export default App; diff --git a/packages/design/src/tag/demo/icon.tsx b/packages/design/src/tag/demo/icon.tsx index d70fd2e29..5f3ad3f96 100644 --- a/packages/design/src/tag/demo/icon.tsx +++ b/packages/design/src/tag/demo/icon.tsx @@ -1,27 +1,27 @@ import { - FacebookOutlined, - LinkedinOutlined, - TwitterOutlined, - YoutubeOutlined, - } from '@oceanbase/icons'; - import { Tag } from '@oceanbase/design'; - import React from 'react'; - - const App: React.FC = () => ( - <> - } color="#55acee"> - Twitter - - } color="#cd201f"> - Youtube - - } color="#3b5999"> - Facebook - - } color="#55acee"> - LinkedIn - - - ); - - export default App; \ No newline at end of file + FacebookOutlined, + LinkedinOutlined, + TwitterOutlined, + YoutubeOutlined, +} from '@oceanbase/icons'; +import { Tag } from '@oceanbase/design'; +import React from 'react'; + +const App: React.FC = () => ( + <> + } color="#55acee"> + Twitter + + } color="#cd201f"> + Youtube + + } color="#3b5999"> + Facebook + + } color="#55acee"> + LinkedIn + + +); + +export default App; diff --git a/packages/design/src/tag/demo/select.tsx b/packages/design/src/tag/demo/select.tsx index 53947c122..2ebae071e 100644 --- a/packages/design/src/tag/demo/select.tsx +++ b/packages/design/src/tag/demo/select.tsx @@ -1,48 +1,40 @@ - -import { Select, Tag, Divider} from "@oceanbase/design"; -import React from "react"; +import { Select, Tag, Divider } 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) => { - event.preventDefault(); - event.stopPropagation(); - }; - return ( - - {label} - - ); -} +const tagRender = props => { + const { label, value, closable, onClose } = props; + const onPreventMouseDown = (event: React.MouseEvent) => { + event.preventDefault(); + event.stopPropagation(); + }; + return ( + + {label} + + ); +}; const App: React.FC = () => ( - <> - Custom Select - - - ); - + <> + Custom Select + + +); export default App; diff --git a/packages/design/src/tag/demo/status.tsx b/packages/design/src/tag/demo/status.tsx index f9ab04746..486584dd3 100644 --- a/packages/design/src/tag/demo/status.tsx +++ b/packages/design/src/tag/demo/status.tsx @@ -1,48 +1,46 @@ - import { - CheckCircleOutlined, - ClockCircleOutlined, - CloseCircleOutlined, - ExclamationCircleOutlined, - MinusCircleOutlined, - SyncOutlined, + CheckCircleOutlined, + ClockCircleOutlined, + CloseCircleOutlined, + ExclamationCircleOutlined, + MinusCircleOutlined, + SyncOutlined, } from '@oceanbase/icons'; -import {Tag, Divider} from '@oceanbase/design'; +import { Tag, Divider } from '@oceanbase/design'; import React from 'react'; - const App: React.FC = () => ( - <> - Without icon -
- success - processing - error - warning - default -
- With icon -
- } color="success"> - success - - } color="processing"> - processing - - } color="error"> - error - - } color="warning"> - warning - - } color="default"> - waiting - - } color="default"> - stop - -
- - ); - - export default App; + <> + Without icon +
+ success + processing + error + warning + default +
+ With icon +
+ } color="success"> + success + + } color="processing"> + processing + + } color="error"> + error + + } color="warning"> + warning + + } color="default"> + waiting + + } color="default"> + stop + +
+ +); + +export default App; diff --git a/packages/design/src/tag/index.md b/packages/design/src/tag/index.md index 68c4526a7..5ca14f9a4 100644 --- a/packages/design/src/tag/index.md +++ b/packages/design/src/tag/index.md @@ -9,17 +9,13 @@ nav: - 💄 定制主题和样式，符合 OceanBase Design 设计规范。 ## 代码演示 - - - - - - + + ## API -| 参数 | 说明 | 类型 | 默认值 | -| :-------| :-----------------------------| :-----------| :-----------| -| width | 设置标签最大宽度，超出该宽度时显示省略号 | string | - | +| 参数 | 说明 | 类型 | 默认值 | +| :------- | :--------------------- | :------ | :----- | +| ellipsis | 内容超长时是否自动省略 | boolean | true | -- 详见 antd Tag 文档: https://ant.design/components/tag-cn/ \ No newline at end of file +- 详见 antd Tag 文档: https://ant.design/components/tag-cn/ diff --git a/packages/design/src/tag/index.tsx b/packages/design/src/tag/index.tsx index dc92132ba..a91d98ed0 100644 --- a/packages/design/src/tag/index.tsx +++ b/packages/design/src/tag/index.tsx @@ -1,48 +1,60 @@ -import {Tag as AntTag} from 'antd'; +import { Tag as AntTag } from 'antd'; import type { TagProps as AntTagProps } from 'antd/es/tag'; -import {Tooltip} from '@oceanbase/design'; +import { Tooltip, Typography } from '@oceanbase/design'; import classNames from 'classnames'; -import React, {useContext} from 'react'; +import React, { ReactElement, useContext } from 'react'; import ConfigProvider from '../config-provider'; import useStyle from './style'; export * from 'antd/es/tag'; export interface TagProps extends AntTagProps { - width?: string -}; - -const {CheckableTag} = AntTag; + ellipsis?: boolean; +} +const { CheckableTag } = AntTag; const Tag = ({ - prefixCls: customizePrefixCls, - className, - width, - ...restProps + prefixCls: customizePrefixCls, + className, + ellipsis = true, + ...restProps }: TagProps) => { - const { getPrefixCls } = useContext(ConfigProvider.ConfigContext); - const prefixCls = getPrefixCls('tag', customizePrefixCls); - const {wrapSSR} = useStyle(prefixCls); - - const tagCls = classNames( - { - [`${prefixCls}-ellipsis`]: !!width - }, - className - ); - - const tagRender = width ? - - : ; - - return wrapSSR(tagRender); + const { getPrefixCls } = useContext(ConfigProvider.ConfigContext); + const prefixCls = getPrefixCls('tag', customizePrefixCls); + const { wrapSSR } = useStyle(prefixCls); + + const tagCls = classNames( + { + [`${prefixCls}-ellipsis`]: ellipsis, + }, + className + ); + const childrenType = (restProps.children as ReactElement)?.type as any; + const { ellipsis: defalutEllipsis } = (restProps.children as ReactElement)?.props || {}; + + const ellipsisConfig = + typeof defalutEllipsis === 'object' + ? defalutEllipsis + : { + tooltip: childrenType?.__ANT_TOOLTIP ? false : restProps.children, + }; + + return ellipsis ? ( + wrapSSR( + + + + ) + ) : ( + + ); }; if (process.env.NODE_ENV !== 'production') { - Tag.displayName = AntTag.displayName; + Tag.displayName = AntTag.displayName; } Tag.CheckableTag = CheckableTag; -export default Tag; \ No newline at end of file +export default Tag; diff --git a/packages/design/src/tag/style/index.ts b/packages/design/src/tag/style/index.ts index d32d18161..a033169f1 100644 --- a/packages/design/src/tag/style/index.ts +++ b/packages/design/src/tag/style/index.ts @@ -1,98 +1,76 @@ -import { mergeToken, type FullToken, type GenerateStyle} from 'antd/es/theme/internal'; +import { type FullToken, type GenerateStyle } from 'antd/es/theme/internal'; import { genComponentStyleHook } from '../../_util/genComponentStyleHook'; import { genPresetColor } from 'antd/lib/theme/internal'; -import capitalize from 'antd/lib/_util/capitalize'; +import { TinyColor } from '@ctrl/tinycolor'; +import type { CSSObject } from '@ant-design/cssinjs'; export type TagToken = FullToken<'Tag'>; -type CssVariableType = 'Success' | 'Info' | 'Error' | 'Warning'; - +const getTagBorderColor = (color: string) => { + return new TinyColor(color).setAlpha(0.4).toHex8String(); +}; const genTagPresetStatusStyle = ( - token: TagToken, - status: 'success' | 'processing' | 'error' | 'warning', - cssVariableType: CssVariableType + token: TagToken, + status: 'success' | 'processing' | 'error' | 'warning' ) => { - const capitalizedCssVariableType = capitalize(cssVariableType); - return { - [`${token.componentCls}-${status}`]: { - color: token[`color${cssVariableType}`], - borderColor: token[`color${capitalizedCssVariableType}Border`] + 66 - } - } -} - -const genPresetStyle = (token: TagToken) => genPresetColor(token, (colorKey, {textColor, lightBorderColor}) => { - return { - [`${token.componentCls}-${colorKey}`]: { - color: textColor, - borderColor: `${lightBorderColor}66` - } - } -}); + const borderColorMap = { + success: token.colorSuccessBorder, + processing: token.colorInfoBorder, + error: token.colorErrorBorder, + warning: token.colorWarningBorder, + }; + return { + [`${token.componentCls}${token.componentCls}-${status}`]: { + borderColor: getTagBorderColor(borderColorMap[status]), + }, + }; +}; -export const genTagStyle: GenerateStyle = (token: TagToken) => { - const { - componentCls, - colorTextLabel, - } = token; +const genPresetStyle = (token: TagToken) => + genPresetColor(token, (colorKey, { textColor, lightBorderColor }) => { return { - [`${componentCls}`]: { - color: colorTextLabel, - borderColor: `${token.colorBorder}66`, - [`&-ellipsis`]: { - display: 'inline-block', - textOverflow: 'ellipsis', - overflow: 'hidden', - verticalAlign: 'bottom', - whiteSpace: 'noWrap', - }, - [`&-checkable`]: { - backgroundColor: 'transparent', - borderColor: 'transparent', - [`&:not(${componentCls}-checkable-checked):hover`]: { - color: token.colorPrimary, - }, - '&:active, &-checked': { - color: token.colorTextLightSolid, - }, - '&-checked': { - backgroundColor: token.colorPrimary, - '&:hover': { - backgroundColor: token.colorPrimaryHover, - }, - }, - '&:active': { - backgroundColor: token.colorPrimaryActive, - }, - }, - [`&-hidden`]: { - display: 'none' - } - }, + [`${token.componentCls}${token.componentCls}-${colorKey}`]: { + color: textColor, + borderColor: getTagBorderColor(lightBorderColor), + }, }; + }); + +export const genTagStyle: GenerateStyle = (token: TagToken): CSSObject => { + const { componentCls } = token; + return { + [`${componentCls}`]: { + borderColor: getTagBorderColor(token.colorBorder), + [`&-ellipsis`]: { + maxWidth: '100%', + textOverflow: 'ellipsis', + overflow: 'hidden', + verticalAlign: 'bottom', + }, + [`&-checkable`]: { + borderColor: 'transparent', + }, + [`&-hidden`]: { + display: 'none', + }, + [`&-borderless`]: { + border: 'transparent', + }, + }, + }; }; export default (prefixCls: string) => { - const useStyle = genComponentStyleHook('Tag', token => { - const {lineWidth, fontSizeIcon} = token; - const tagFontSize = token.fontSizeSM; - const tagLineHeight = `${token.lineHeightSM * tagFontSize}px`; - const TagToken = mergeToken(token, { - tagFontSize, - tagLineHeight, - tagIconSize: fontSizeIcon - 2 * lineWidth, - tagPaddingHorizontal: 8, - tagBorderlessBg: token.colorFillTertiary, - }); - return [ - genTagStyle(TagToken), - genPresetStyle(TagToken), - genTagPresetStatusStyle(TagToken, 'success', 'Success'), - genTagPresetStatusStyle(TagToken, 'error', 'Error'), - genTagPresetStatusStyle(TagToken, 'processing', 'Info'), - genTagPresetStatusStyle(TagToken, 'warning', 'Warning') - ]; - }); - return useStyle(prefixCls); -} \ No newline at end of file + const useStyle = genComponentStyleHook('Tag', (token: TagToken) => { + return [ + genTagStyle(token), + genPresetStyle(token), + genTagPresetStatusStyle(token, 'success'), + genTagPresetStatusStyle(token, 'error'), + genTagPresetStatusStyle(token, 'processing'), + genTagPresetStatusStyle(token, 'warning'), + ]; + }); + return useStyle(prefixCls); +}; From a0350e377debab982531c47214e1f4781b417ecd Mon Sep 17 00:00:00 2001 From: wdy01684395 Date: Fri, 13 Oct 2023 16:38:39 +0800 Subject: [PATCH 4/9] fix ci --- packages/design/src/select/style/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/design/src/select/style/index.ts b/packages/design/src/select/style/index.ts index 0747a0d6f..4ab0ecb93 100644 --- a/packages/design/src/select/style/index.ts +++ b/packages/design/src/select/style/index.ts @@ -17,7 +17,7 @@ export const genSelectStyle: GenerateStyle = (token: SelectToken): }; export default (prefixCls: string) => { - const useStyle = genComponentStyleHook('Select', token => { + const useStyle = genComponentStyleHook('Select', (token: SelectToken) => { return [genSelectStyle(token)]; }); return useStyle(prefixCls); From 797cc23d58b1e4ba0fb2a8513b6143c48a9956f7 Mon Sep 17 00:00:00 2001 From: wdy01684395 Date: Mon, 16 Oct 2023 18:09:32 +0800 Subject: [PATCH 5/9] fix ci --- .../design/src/config-provider/demo/size.tsx | 2 +- packages/design/src/index.ts | 4 +-- .../src/select/demo/custom-tag-render.tsx | 36 ++++++++++++------- packages/ui/src/Highlight/demo/theme.tsx | 2 +- 4 files changed, 28 insertions(+), 16 deletions(-) diff --git a/packages/design/src/config-provider/demo/size.tsx b/packages/design/src/config-provider/demo/size.tsx index 6cc84f02d..b3d2471e9 100644 --- a/packages/design/src/config-provider/demo/size.tsx +++ b/packages/design/src/config-provider/demo/size.tsx @@ -48,7 +48,7 @@ const App: React.FC = () => { - diff --git a/packages/design/src/index.ts b/packages/design/src/index.ts index 43850bb0d..b93568656 100644 --- a/packages/design/src/index.ts +++ b/packages/design/src/index.ts @@ -17,8 +17,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 { default as Tag } from './tag'; +export { default as Select } from './select'; export type { TabsProps } from './tabs'; export { default as theme } from './theme'; diff --git a/packages/design/src/select/demo/custom-tag-render.tsx b/packages/design/src/select/demo/custom-tag-render.tsx index 694b04de0..beedea00e 100644 --- a/packages/design/src/select/demo/custom-tag-render.tsx +++ b/packages/design/src/select/demo/custom-tag-render.tsx @@ -1,5 +1,5 @@ import { Select, Tag } from '@oceanbase/design'; -import React from 'react'; +import React, { useState } from 'react'; const options = ['gold', 'green', 'red', 'cyan']; @@ -16,16 +16,28 @@ const tagRender = props => { ); }; -const App: React.FC = () => ( - <> - ({ label: item, value: item }))} + /> + + + ); +}; export default App; diff --git a/packages/ui/src/Highlight/demo/theme.tsx b/packages/ui/src/Highlight/demo/theme.tsx index 5a693a097..3960d1115 100644 --- a/packages/ui/src/Highlight/demo/theme.tsx +++ b/packages/ui/src/Highlight/demo/theme.tsx @@ -35,7 +35,7 @@ export default () => { })} 主题选择: - + ({ label: item, value: item }))} - /> - - - ); -}; +const App: React.FC = () => ( + <> + +); + +export default App; \ No newline at end of file diff --git a/packages/design/src/select/index.md b/packages/design/src/select/index.md index cd5ef6398..5729f6bed 100644 --- a/packages/design/src/select/index.md +++ b/packages/design/src/select/index.md @@ -11,5 +11,6 @@ nav: ## 代码演示 + - 详见 antd Select 文档: https://ant.design/components/select-cn/ From 1db020060e944fcc7dc29f390cf4c7717b659d87 Mon Sep 17 00:00:00 2001 From: wdy01684395 Date: Thu, 26 Oct 2023 10:36:40 +0800 Subject: [PATCH 8/9] Remove unreferenced code --- packages/design/src/tag/demo/ellipsis.tsx | 2 +- packages/design/src/tag/index.tsx | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/design/src/tag/demo/ellipsis.tsx b/packages/design/src/tag/demo/ellipsis.tsx index 5497ea507..b3267850b 100644 --- a/packages/design/src/tag/demo/ellipsis.tsx +++ b/packages/design/src/tag/demo/ellipsis.tsx @@ -1,4 +1,4 @@ -import { Tag, Typography, Tooltip } from '@oceanbase/design'; +import { Tag } from '@oceanbase/design'; import React from 'react'; const App: React.FC = () => ( diff --git a/packages/design/src/tag/index.tsx b/packages/design/src/tag/index.tsx index a91d98ed0..5c36f79e0 100644 --- a/packages/design/src/tag/index.tsx +++ b/packages/design/src/tag/index.tsx @@ -1,6 +1,6 @@ import { Tag as AntTag } from 'antd'; import type { TagProps as AntTagProps } from 'antd/es/tag'; -import { Tooltip, Typography } from '@oceanbase/design'; +import { Typography } from '@oceanbase/design'; import classNames from 'classnames'; import React, { ReactElement, useContext } from 'react'; import ConfigProvider from '../config-provider'; @@ -31,14 +31,14 @@ const Tag = ({ className ); const childrenType = (restProps.children as ReactElement)?.type as any; - const { ellipsis: defalutEllipsis } = (restProps.children as ReactElement)?.props || {}; + const { ellipsis: defalutEllipsis, children: defaultChildren } = (restProps.children as ReactElement)?.props || {}; const ellipsisConfig = typeof defalutEllipsis === 'object' ? defalutEllipsis : { - tooltip: childrenType?.__ANT_TOOLTIP ? false : restProps.children, - }; + tooltip: childrenType?.__ANT_TOOLTIP ? false : defaultChildren || restProps.children, + }; return ellipsis ? ( wrapSSR( From 20bbacd1cbce8678434045d39b3b3a7cc021438a Mon Sep 17 00:00:00 2001 From: wdy01684395 Date: Thu, 26 Oct 2023 13:35:07 +0800 Subject: [PATCH 9/9] fix ci --- packages/design/src/select/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/design/src/select/index.tsx b/packages/design/src/select/index.tsx index 41ca06200..2027bfd0e 100644 --- a/packages/design/src/select/index.tsx +++ b/packages/design/src/select/index.tsx @@ -11,7 +11,7 @@ export * from 'antd/es/select'; export type SelectProps = AntSelectProps; -const Select = ({ prefixCls: customizePrefixCls, className, ...restProps }: SelectProps) => { +const Select: any = ({ prefixCls: customizePrefixCls, className, ...restProps }: SelectProps) => { const { getPrefixCls } = useContext(ConfigProvider.ConfigContext); const prefixCls = getPrefixCls('select', customizePrefixCls); const { wrapSSR } = useStyle(prefixCls);