From 9d152e72586ac41b4e13bfa84c94d1b1941c5c14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Tue, 21 Jan 2025 16:31:05 +0800 Subject: [PATCH] fix(Cell): fix component style errors --- script/generate-css-vars.js | 2 +- src/cell/Cell.tsx | 34 ++++++++-------- src/cell/CellGroup.tsx | 3 +- src/cell/_example/group.tsx | 4 +- src/cell/_example/multiple.tsx | 8 ++-- src/cell/_example/single.tsx | 4 +- src/cell/cell.en-US.md | 72 +++++++++++++++++++++++++++++++++ src/cell/cell.md | 74 +++++++++++++++++++++++++++++++++- src/cell/type.ts | 2 +- 9 files changed, 174 insertions(+), 29 deletions(-) diff --git a/script/generate-css-vars.js b/script/generate-css-vars.js index c598f538..dafa568d 100644 --- a/script/generate-css-vars.js +++ b/script/generate-css-vars.js @@ -5,7 +5,7 @@ function resolveCwd(...args) { args.unshift(process.cwd()); return path.join(...args); } - +// node script/generate-css-vars.js --NAME Cell const COMPONENT_NAME = process.argv[process.argv.indexOf('--NAME') + 1]; // 在 --NAME 后面 // 组件名作为参数传入 diff --git a/src/cell/Cell.tsx b/src/cell/Cell.tsx index 5340be00..c5c81658 100644 --- a/src/cell/Cell.tsx +++ b/src/cell/Cell.tsx @@ -3,6 +3,7 @@ import classnames from 'classnames'; import isString from 'lodash/isString'; import { ChevronRightIcon } from 'tdesign-icons-react'; +import parseTNode from '../_util/parseTNode'; import { TdCellProps } from './type'; import { cellDefaultProps } from './defaultProps'; import withNativeProps, { NativeProps } from '../_util/withNativeProps'; @@ -37,12 +38,11 @@ const Cell: React.FC = (originProps) => { const classNames = useMemo( () => [ `${name}`, - `${name}--${align}`, { [`${name}--borderless`]: !bordered, }, ], - [align, bordered, name], + [bordered, name], ); const hoverDisabled = useMemo(() => !hover, [hover]); @@ -55,41 +55,41 @@ const Cell: React.FC = (originProps) => { [onClick], ); - const readerImage = () => { + const renderImage = () => { if (isString(image)) { return ; } - return image; + return parseTNode(image); }; - const readerLeft = () => ( + const renderLeft = () => (
- {leftIcon &&
{leftIcon}
} - {readerImage()} + {leftIcon &&
{parseTNode(leftIcon)}
} + {renderImage()}
); - const readerTitle = () => { + const renderTitle = () => { if (!title) { return null; } return (
- {title} + {parseTNode(title)} {required &&  *}
- {description &&
{description}
} + {description &&
{parseTNode(description)}
}
); }; - const readerRight = () => { - const Icon = arrow ? : rightIcon; + const renderRight = () => { + const Icon = arrow ? : parseTNode(rightIcon); if (!Icon) { return null; } return ( -
+
{Icon}
); @@ -98,10 +98,10 @@ const Cell: React.FC = (originProps) => { return withNativeProps( props,
- {readerLeft()} - {readerTitle()} - {note ?
{note}
: children} - {readerRight()} + {renderLeft()} + {renderTitle()} + {note ?
{parseTNode(note)}
: parseTNode(children)} + {renderRight()}
, ); }; diff --git a/src/cell/CellGroup.tsx b/src/cell/CellGroup.tsx index 50290a40..8af6ce68 100644 --- a/src/cell/CellGroup.tsx +++ b/src/cell/CellGroup.tsx @@ -5,6 +5,7 @@ import { TdCellGroupProps } from './type'; import { cellGroupDefaultProps } from './defaultProps'; import withNativeProps, { NativeProps } from '../_util/withNativeProps'; import useDefaultProps from '../hooks/useDefaultProps'; +import parseTNode from '../_util/parseTNode'; export type CellGroupProps = TdCellGroupProps & NativeProps; @@ -29,7 +30,7 @@ const CellGroup: React.FC = (originProps) => { props,
{title &&
{title}
} -
{children}
+
{parseTNode(children)}
, ); }; diff --git a/src/cell/_example/group.tsx b/src/cell/_example/group.tsx index f45a330b..5c79a501 100644 --- a/src/cell/_example/group.tsx +++ b/src/cell/_example/group.tsx @@ -1,11 +1,11 @@ import React from 'react'; import { CellGroup, Cell } from 'tdesign-mobile-react'; -import { LockOnIcon, ServiceIcon, InternetIcon } from 'tdesign-icons-react'; +import { AppIcon, ServiceIcon, InternetIcon } from 'tdesign-icons-react'; export default function Group() { return ( - } title="单行标题" arrow /> + } title="单行标题" arrow /> } title="单行标题" arrow /> } title="单行标题" arrow /> diff --git a/src/cell/_example/multiple.tsx b/src/cell/_example/multiple.tsx index 49685e87..8e838131 100644 --- a/src/cell/_example/multiple.tsx +++ b/src/cell/_example/multiple.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { CellGroup, Cell, Badge, Switch, Avatar } from 'tdesign-mobile-react'; -import { ChevronRightIcon, LockOnIcon } from 'tdesign-icons-react'; +import { ChevronRightIcon, AppIcon } from 'tdesign-icons-react'; export default function Multiple() { const chevronRightIcon = ; @@ -14,19 +14,19 @@ export default function Multiple() { } /> } /> - } /> + } /> } rightIcon={chevronRightIcon} /> - + ); } diff --git a/src/cell/_example/single.tsx b/src/cell/_example/single.tsx index a7ff6553..81650dc6 100644 --- a/src/cell/_example/single.tsx +++ b/src/cell/_example/single.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Cell, CellGroup, Badge, Switch } from 'tdesign-mobile-react'; -import { LockOnIcon } from 'tdesign-icons-react'; +import { AppIcon } from 'tdesign-icons-react'; export default function Single() { return ( @@ -13,7 +13,7 @@ export default function Single() { } /> - } /> + } />
); diff --git a/src/cell/cell.en-US.md b/src/cell/cell.en-US.md index e6e56add..82c41d16 100644 --- a/src/cell/cell.en-US.md +++ b/src/cell/cell.en-US.md @@ -31,3 +31,75 @@ style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProper bordered | Boolean | false | \- | N theme | String | default | options: default/card | N title | String | - | \- | N + +### CSS Variables + +The component provides the following CSS variables, which can be used to customize styles. +Name | Default Value | Description +-- | -- | -- +--td-border-left-space | @cell-horizontal-padding | - +--td-cell-bg-color | @bg-color-container | - +--td-cell-border-color | @component-stroke | - +--td-cell-border-right-space | 0 | - +--td-cell-description-color | @text-color-secondary | - +--td-cell-description-font-size | @font-size-base | - +--td-cell-description-line-height | 22px | - +--td-cell-group-border-color | @border-color | - +--td-cell-group-title-bg-color | @bg-color-secondarycontainer | - +--td-cell-group-title-color | @text-color-placeholder | - +--td-cell-group-title-font-size | 14px | - +--td-cell-group-title-line-height | 45px | - +--td-cell-group-title-padding-left | 16px | - +--td-cell-height | auto | - +--td-cell-horizontal-padding | 16px | - +--td-cell-hover-color | @bg-color-secondarycontainer | - +--td-cell-image-height | 48px | - +--td-cell-image-width | 48px | - +--td-cell-left-icon-color | @brand-color | - +--td-cell-left-icon-font-size | 24px | - +--td-cell-line-height | 24px | - +--td-cell-note-color | @text-color-placeholder | - +--td-cell-note-font-size | @font-size-m | - +--td-cell-required-color | @error-color-6 | - +--td-cell-required-font-size | @font-size-m | - +--td-cell-right-icon-color | @text-color-placeholder | - +--td-cell-right-icon-font-size | 24px | - +--td-cell-title-color | @text-color-primary | - +--td-cell-title-font-size | @font-size-m | - +--td-cell-vertical-padding | 16px | - + +### CSS Variables + +The component provides the following CSS variables, which can be used to customize styles. +Name | Default Value | Description +-- | -- | -- +--td-border-left-space | @cell-horizontal-padding | - +--td-cell-bg-color | @bg-color-container | - +--td-cell-border-color | @component-stroke | - +--td-cell-border-right-space | 0 | - +--td-cell-description-color | @text-color-secondary | - +--td-cell-description-font-size | @font-size-base | - +--td-cell-description-line-height | 22px | - +--td-cell-group-border-color | @border-color | - +--td-cell-group-title-bg-color | @bg-color-secondarycontainer | - +--td-cell-group-title-color | @text-color-placeholder | - +--td-cell-group-title-font-size | 14px | - +--td-cell-group-title-line-height | 45px | - +--td-cell-group-title-padding-left | 16px | - +--td-cell-height | auto | - +--td-cell-horizontal-padding | 16px | - +--td-cell-hover-color | @bg-color-secondarycontainer | - +--td-cell-image-height | 48px | - +--td-cell-image-width | 48px | - +--td-cell-left-icon-color | @brand-color | - +--td-cell-left-icon-font-size | 24px | - +--td-cell-line-height | 24px | - +--td-cell-note-color | @text-color-placeholder | - +--td-cell-note-font-size | @font-size-m | - +--td-cell-required-color | @error-color-6 | - +--td-cell-required-font-size | @font-size-m | - +--td-cell-right-icon-color | @text-color-placeholder | - +--td-cell-right-icon-font-size | 24px | - +--td-cell-title-color | @text-color-primary | - +--td-cell-title-font-size | @font-size-m | - +--td-cell-vertical-padding | 16px | - diff --git a/src/cell/cell.md b/src/cell/cell.md index 56241d59..d588582d 100644 --- a/src/cell/cell.md +++ b/src/cell/cell.md @@ -14,7 +14,7 @@ toc: false -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -align | String | middle | 内容的对齐方式，默认居中对齐。可选项：top/middle/bottom | N +align | String | middle | 右侧内容的对齐方式，默认居中对齐。可选项：top/middle/bottom | N arrow | Boolean | false | 是否显示右侧箭头 | N bordered | Boolean | true | 是否显示下边框 | N description | TNode | - | 下方内容描述。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N @@ -37,3 +37,75 @@ style | Object | - | 样式，TS 类型：`React.CSSProperties` | N bordered | Boolean | false | 是否显示组边框 | N theme | String | default | 单元格组风格。可选项：default/card | N title | String | - | 单元格组标题 | N + +### CSS Variables + +组件提供了下列 CSS 变量，可用于自定义样式。 +名称 | 默认值 | 描述 +-- | -- | -- +--td-border-left-space | @cell-horizontal-padding | - +--td-cell-bg-color | @bg-color-container | - +--td-cell-border-color | @component-stroke | - +--td-cell-border-right-space | 0 | - +--td-cell-description-color | @text-color-secondary | - +--td-cell-description-font-size | @font-size-base | - +--td-cell-description-line-height | 22px | - +--td-cell-group-border-color | @border-color | - +--td-cell-group-title-bg-color | @bg-color-secondarycontainer | - +--td-cell-group-title-color | @text-color-placeholder | - +--td-cell-group-title-font-size | 14px | - +--td-cell-group-title-line-height | 45px | - +--td-cell-group-title-padding-left | 16px | - +--td-cell-height | auto | - +--td-cell-horizontal-padding | 16px | - +--td-cell-hover-color | @bg-color-secondarycontainer | - +--td-cell-image-height | 48px | - +--td-cell-image-width | 48px | - +--td-cell-left-icon-color | @brand-color | - +--td-cell-left-icon-font-size | 24px | - +--td-cell-line-height | 24px | - +--td-cell-note-color | @text-color-placeholder | - +--td-cell-note-font-size | @font-size-m | - +--td-cell-required-color | @error-color-6 | - +--td-cell-required-font-size | @font-size-m | - +--td-cell-right-icon-color | @text-color-placeholder | - +--td-cell-right-icon-font-size | 24px | - +--td-cell-title-color | @text-color-primary | - +--td-cell-title-font-size | @font-size-m | - +--td-cell-vertical-padding | 16px | - + +### CSS Variables + +组件提供了下列 CSS 变量，可用于自定义样式。 +名称 | 默认值 | 描述 +-- | -- | -- +--td-border-left-space | @cell-horizontal-padding | - +--td-cell-bg-color | @bg-color-container | - +--td-cell-border-color | @component-stroke | - +--td-cell-border-right-space | 0 | - +--td-cell-description-color | @text-color-secondary | - +--td-cell-description-font-size | @font-size-base | - +--td-cell-description-line-height | 22px | - +--td-cell-group-border-color | @border-color | - +--td-cell-group-title-bg-color | @bg-color-secondarycontainer | - +--td-cell-group-title-color | @text-color-placeholder | - +--td-cell-group-title-font-size | 14px | - +--td-cell-group-title-line-height | 45px | - +--td-cell-group-title-padding-left | 16px | - +--td-cell-height | auto | - +--td-cell-horizontal-padding | 16px | - +--td-cell-hover-color | @bg-color-secondarycontainer | - +--td-cell-image-height | 48px | - +--td-cell-image-width | 48px | - +--td-cell-left-icon-color | @brand-color | - +--td-cell-left-icon-font-size | 24px | - +--td-cell-line-height | 24px | - +--td-cell-note-color | @text-color-placeholder | - +--td-cell-note-font-size | @font-size-m | - +--td-cell-required-color | @error-color-6 | - +--td-cell-required-font-size | @font-size-m | - +--td-cell-right-icon-color | @text-color-placeholder | - +--td-cell-right-icon-font-size | 24px | - +--td-cell-title-color | @text-color-primary | - +--td-cell-title-font-size | @font-size-m | - +--td-cell-vertical-padding | 16px | - diff --git a/src/cell/type.ts b/src/cell/type.ts index 28d25b09..37828ed9 100644 --- a/src/cell/type.ts +++ b/src/cell/type.ts @@ -9,7 +9,7 @@ import { MouseEvent } from 'react'; export interface TdCellProps { /** - * 内容的对齐方式，默认居中对齐 + * 右侧内容的对齐方式，默认居中对齐 * @default middle */ align?: 'top' | 'middle' | 'bottom';