Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(Cell): fix component style errors #568

Open
wants to merge 5 commits into
base: develop
Choose a base branch
from
Open

fix(Cell): fix component style errors #568

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9d152e7
fix(Cell): fix component style errors
liweijie0812 Jan 21, 2025
f3c5296
chore: update docs
liweijie0812 Jan 21, 2025
6e8c602
chore: update common
github-actions[bot] Jan 22, 2025
bface67
chore: update snapshot
github-actions[bot] Jan 22, 2025
86b74f7
chore: fix doc
liweijie0812 Jan 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion script/generate-css-vars.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 后面

// 组件名作为参数传入
Expand Down
2 changes: 1 addition & 1 deletion src/_common
Open in desktop
Submodule _common updated 5 files
+6 −0 docs/web/api/tag-input.en-US.md
+6 −1 docs/web/api/tag-input.md
+1 −1 docs/web/design/tabs.md
+23 −16 style/mobile/components/cell/v2/_index.less
+16 −0 style/web/components/tag-input/_index.less
34 changes: 17 additions & 17 deletions src/cell/Cell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -37,12 +38,11 @@ const Cell: React.FC<CellProps> = (originProps) => {
const classNames = useMemo(
() => [
`${name}`,
`${name}--${align}`,
{
[`${name}--borderless`]: !bordered,
},
],
[align, bordered, name],
[bordered, name],
);

const hoverDisabled = useMemo(() => !hover, [hover]);
Expand All @@ -55,41 +55,41 @@ const Cell: React.FC<CellProps> = (originProps) => {
[onClick],
);

const readerImage = () => {
const renderImage = () => {
if (isString(image)) {
return <img src={image} className={`${name}__left-image`} />;
}
return image;
return parseTNode(image);
};

const readerLeft = () => (
const renderLeft = () => (
<div className={`${name}__left`}>
{leftIcon && <div className={`${name}__left-icon`}>{leftIcon}</div>}
{readerImage()}
{leftIcon && <div className={`${name}__left-icon`}>{parseTNode(leftIcon)}</div>}
{renderImage()}
</div>
);

const readerTitle = () => {
const renderTitle = () => {
if (!title) {
return null;
}
return (
<div className={`${name}__title`}>
<div className={`${name}__title-text`}>
{title}
{parseTNode(title)}
{required && <span className={`${name}--required`}>&nbsp;*</span>}
</div>
{description && <div className={`${name}__description`}>{description}</div>}
{description && <div className={`${name}__description`}>{parseTNode(description)}</div>}
</div>
);
};
const readerRight = () => {
const Icon = arrow ? <ChevronRightIcon /> : rightIcon;
const renderRight = () => {
const Icon = arrow ? <ChevronRightIcon /> : parseTNode(rightIcon);
if (!Icon) {
return null;
}
return (
<div className={`${name}__right`}>
<div className={classnames(`${name}__right`, `${name}__right--${align}`)}>
<div className={`${name}__right-icon`}>{Icon}</div>
</div>
);
Expand All @@ -98,10 +98,10 @@ const Cell: React.FC<CellProps> = (originProps) => {
return withNativeProps(
props,
<div ref={ref} className={classnames(classNames)} onClick={handleClick}>
{readerLeft()}
{readerTitle()}
{note ? <div className={`${name}__note`}>{note}</div> : children}
{readerRight()}
{renderLeft()}
{renderTitle()}
{note ? <div className={`${name}__note`}>{parseTNode(note)}</div> : parseTNode(children)}
{renderRight()}
</div>,
);
};
Expand Down
3 changes: 2 additions & 1 deletion src/cell/CellGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -29,7 +30,7 @@ const CellGroup: React.FC<CellGroupProps> = (originProps) => {
props,
<div>
{title && <div className={`${name}__title`}>{title}</div>}
<div className={classnames(classNames)}>{children}</div>
<div className={classnames(classNames)}>{parseTNode(children)}</div>
</div>,
);
};
Expand Down
4 changes: 2 additions & 2 deletions src/cell/_example/group.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<CellGroup theme="card">
<Cell leftIcon={<LockOnIcon />} title="单行标题" arrow />
<Cell leftIcon={<AppIcon />} title="单行标题" arrow />
<Cell leftIcon={<ServiceIcon />} title="单行标题" arrow />
<Cell leftIcon={<InternetIcon />} title="单行标题" arrow />
</CellGroup>
Expand Down
8 changes: 4 additions & 4 deletions src/cell/_example/multiple.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = <ChevronRightIcon />;
Expand All @@ -14,19 +14,19 @@ export default function Multiple() {
<Cell title="单行标题" description="一段很长很长的内容文字" arrow note={<Badge count={16} />} />
<Cell title="单行标题" description="一段很长很长的内容文字" note={<Switch defaultValue={true} />} />
<Cell title="单行标题" description="一段很长很长的内容文字" note="辅助信息" arrow />
<Cell title="单行标题" description="一段很长很长的内容文字" arrow leftIcon={<LockOnIcon />} />
<Cell title="单行标题" description="一段很长很长的内容文字" arrow leftIcon={<AppIcon />} />
<Cell title="单行标题" description="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容" />
<Cell
title="多行高度不定，长文本自动换行，该选项的描述是一段很长的内容"
description="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"
/>
<Cell
title="多行带头像"
title="单行标题"
description="一段很长很长的内容文字"
leftIcon={<Avatar shape="circle" image={avatarUrl} />}
rightIcon={chevronRightIcon}
/>
<Cell title="多行带图片" description="一段很长很长的内容文字" image={imgUrl} />
<Cell title="单行标题" description="一段很长很长的内容文字" image={imgUrl} />
</CellGroup>
);
}
4 changes: 2 additions & 2 deletions src/cell/_example/single.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
Expand All @@ -13,7 +13,7 @@ export default function Single() {
<Cell title="单行标题" hover note={<Switch default-value={true} />} />
<Cell title="单行标题" arrow hover note="辅助信息" />

<Cell title="单行标题" arrow hover leftIcon={<LockOnIcon />} />
<Cell title="单行标题" arrow hover leftIcon={<AppIcon />} />
</CellGroup>
</div>
);
Expand Down
36 changes: 36 additions & 0 deletions src/cell/cell.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,3 +31,39 @@ 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 | -
46 changes: 38 additions & 8 deletions src/cell/cell.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,4 @@
---
title: Cell 宫格
description: 用于各个类别行的信息展示。
spline: base
isComponent: true
toc: false
---
:: BASE_DOC ::

## API

Expand All @@ -14,7 +8,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
Expand All @@ -37,3 +31,39 @@ 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 | -
2 changes: 1 addition & 1 deletion src/cell/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { MouseEvent } from 'react';

export interface TdCellProps {
/**
* 内容的对齐方式，默认居中对齐
* 右侧内容的对齐方式，默认居中对齐
* @default middle
*/
align?: 'top' | 'middle' | 'bottom';
Expand Down
Loading
Loading