Skip to content

Commit 37e64f0

Browse files
duenyangduenyang
committed
Merge remote-tracking branch 'remote/main' into feature/icon
2 parents 1e50e32 + 6ca38c8 commit 37e64f0

30 files changed

+454
-128
lines changed

‎.vscode/settings.json

+2
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@
3030
"actived",
3131
"borderless",
3232
"Cascader",
33+
"classname",
34+
"clsx",
3335
"Popconfirm",
3436
"Swiper",
3537
"tdesign"

‎site/sidebar.config.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ export default [
8484
title: 'Menu 导航菜单',
8585
name: 'menu',
8686
path: '/components/menu',
87-
// component: () => import('tdesign-web-components/menu/README.md'),
87+
component: () => import('tdesign-web-components/menu/README.md'),
8888
},
8989
{
9090
title: 'Breadcrumb 面包屑',

‎src/_util/component.ts

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { ComponentChildren } from 'omi';
2+
3+
/**
4+
* 将Component的children转换为数组
5+
* @param children ComponentChildren | undefined
6+
* @returns ComponentChildren[]
7+
*/
8+
export function getChildrenArray(children?: ComponentChildren) {
9+
if (!children) {
10+
return [];
11+
}
12+
if (Array.isArray(children)) {
13+
return children;
14+
}
15+
return [children];
16+
}
17+
18+
/**
19+
* 判断是否某个name的slot
20+
* @param name string
21+
* @param children ComponentChildren | undefined
22+
* @returns boolean
23+
*/
24+
export function hasSlot(name: string, children?: ComponentChildren) {
25+
const childrenArray = getChildrenArray(children);
26+
27+
return childrenArray.some((child) => {
28+
if (typeof child === 'object' && 'attributes' in child) {
29+
return child.attributes?.slot === name;
30+
}
31+
return false;
32+
});
33+
}

‎src/_util/lightDom.ts

+1-9
Original file line numberDiff line numberDiff line change
@@ -38,15 +38,7 @@ const getCssList = (css: ComponentConstructor['css']): string[] => {
3838
return [];
3939
};
4040

41-
const findParentRenderRoot = (ele): Document | ShadowRoot => {
42-
if (ele.shadowRoot && ele.renderRoot && ele.renderRoot.adoptedStyleSheets) {
43-
return ele.renderRoot;
44-
}
45-
if (ele.parentElement) {
46-
return findParentRenderRoot(ele.parentElement);
47-
}
48-
return document;
49-
};
41+
const findParentRenderRoot = (ele): Document | ShadowRoot => ele.getRootNode() || document;
5042

5143
const lightDomCtorCache: Map<ComponentConstructor, ComponentConstructor> = new Map();
5244

‎src/avatar/README.md

-1
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,6 @@ spline: base
5050
className | String | - | 类名 | N
5151
style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
5252
alt | String | - | 头像替换文本，仅当图片加载失败时有效 | N
53-
children | TNode | - | 子元素内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N
5453
content | TNode | - | 子元素内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N
5554
hideOnLoadFailed | Boolean | false | 加载失败时隐藏图片 | N
5655
icon | TElement | - | 图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N

‎src/avatar/_example/base.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default class Avatar extends Component {
1212
render() {
1313
return (
1414
<t-space>
15-
<t-avatar icon={<t-icon name="user-1"></t-icon>} style={{ marginRight: '40px' }} />
15+
<t-avatar icon={<t-icon name="user-1" className="mb-[2px]"></t-icon>} style={{ marginRight: '40px' }} />
1616
<t-avatar
1717
image="https://tdesign.gtimg.com/site/avatar.jpg"
1818
hideOnLoadFailed={false}

‎src/avatar/_example/group-cascading.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,16 @@ export default class AvatarGroupCascading extends Component {
1111
render() {
1212
return (
1313
<t-space direction="vertical">
14-
<t-avatar-group>
14+
<t-avatar-group cascading="left-up">
1515
<t-avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></t-avatar>
16-
<t-avatar>W</t-avatar>
17-
<t-avatar icon={<t-icon name="user-1"></t-icon>}></t-avatar>
16+
<t-avatar content="W"></t-avatar>
17+
<t-avatar icon={<t-icon name="user-1" className="mb-[2px]"></t-icon>}></t-avatar>
1818
</t-avatar-group>
1919

20-
<t-avatar-group cascading="left-up">
20+
<t-avatar-group cascading="right-up">
2121
<t-avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></t-avatar>
22-
<t-avatar>W</t-avatar>
23-
<t-avatar icon={<t-icon name="user-1"></t-icon>}></t-avatar>
22+
<t-avatar content="W"></t-avatar>
23+
<t-avatar icon={<t-icon name="user-1" className="mb-[2px]"></t-icon>}></t-avatar>
2424
</t-avatar-group>
2525
</t-space>
2626
);

‎src/avatar/_example/group-max.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,19 @@ export default class AvatarGroupMax extends Component {
1414
<t-space direction="vertical">
1515
<t-avatar-group size="large" max={2}>
1616
<t-avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></t-avatar>
17-
<t-avatar>Avatar</t-avatar>
17+
<t-avatar content="Avatar"></t-avatar>
1818
<t-avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></t-avatar>
1919
</t-avatar-group>
2020

2121
<t-avatar-group size="large" max={2} collapseAvatar={<t-icon name="ellipsis" />}>
2222
<t-avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></t-avatar>
23-
<t-avatar>Avatar</t-avatar>
23+
<t-avatar content="Avatar"></t-avatar>
2424
<t-avatar icon={<t-icon name="user-1"></t-icon>}></t-avatar>
2525
</t-avatar-group>
2626

2727
<t-avatar-group size="large" max={2} collapseAvatar="more">
2828
<t-avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></t-avatar>
29-
<t-avatar>Avatar</t-avatar>
29+
<t-avatar content="Avatar"></t-avatar>
3030
<t-avatar icon={<t-icon name="user-1"></t-icon>}></t-avatar>
3131
</t-avatar-group>
3232
</t-space>

‎src/avatar/_example/group.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,16 @@ export default class AvatarGroup extends Component {
1212
render() {
1313
return (
1414
<t-space direction="vertical">
15-
<t-avatar-group>
15+
<t-avatar-group cascading="right-up">
1616
<t-avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></t-avatar>
17-
<t-avatar>W</t-avatar>
18-
<t-avatar icon={<t-icon name="user-1"></t-icon>}></t-avatar>
17+
<t-avatar content="W"></t-avatar>
18+
<t-avatar icon={<t-icon name="user-1" className="mb-[2px]"></t-icon>}></t-avatar>
1919
</t-avatar-group>
2020

21-
<t-avatar-group size="large">
21+
<t-avatar-group size="large" cascading="left-up">
2222
<t-avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></t-avatar>
23-
<t-avatar>W</t-avatar>
24-
<t-avatar icon={<t-icon name="user-1"></t-icon>}></t-avatar>
23+
<t-avatar content="W"></t-avatar>
24+
<t-avatar icon={<t-icon name="user-1" className="mb-[2px]"></t-icon>}></t-avatar>
2525
</t-avatar-group>
2626
</t-space>
2727
);

‎src/avatar/avatar-group.tsx

+13-29
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,16 @@ import { toArray } from 'lodash';
44
import { classNames, cloneElement, Component, OmiProps, tag } from 'omi';
55

66
import { getClassPrefix } from '../_util/classname';
7+
import { convertToLightDomNode } from '../_util/lightDom';
78
import parseTNode from '../_util/parseTNode';
89
import { StyledProps } from '../common';
9-
import { styleSheet } from './style/index.ts';
1010
import { TdAvatarGroupProps } from './type';
1111

12-
import borderCss from './style/border.less';
13-
import offsetLeftCss from './style/offset_left.less';
14-
import offsetLeftZIndexCss from './style/offset_left_zIndex.less';
15-
import offsetRightCss from './style/offset_right.less';
16-
1712
export interface AvatarGroupProps extends TdAvatarGroupProps, StyledProps {}
1813

1914
@tag('t-avatar-group')
2015
export default class AvatarGroup extends Component<AvatarGroupProps> {
21-
static css = styleSheet;
16+
static css = [];
2217

2318
static defaultProps = { cascading: 'right-up' };
2419

@@ -32,8 +27,6 @@ export default class AvatarGroup extends Component<AvatarGroupProps> {
3227

3328
preClass = `${getClassPrefix()}-avatar`;
3429

35-
allChildrenList: any;
36-
3730
provide = { groupSize: undefined as any };
3831

3932
install() {
@@ -44,21 +37,13 @@ export default class AvatarGroup extends Component<AvatarGroupProps> {
4437
const { preClass } = this;
4538
const { children, max, cascading, collapseAvatar } = props;
4639
const childrenList = toArray(children);
40+
let allChildrenList = [];
4741
if (childrenList.length > 0) {
48-
this.allChildrenList = childrenList.map((child, index) => {
49-
let childrenCss = borderCss;
50-
if (cascading === 'right-up' && index !== childrenList.length - 1) {
51-
childrenCss += offsetRightCss;
52-
} else if (cascading === 'left-up' && index !== 0) {
53-
childrenCss += offsetLeftCss + offsetLeftZIndexCss;
54-
} else if (cascading === 'left-up') {
55-
childrenCss += offsetLeftZIndexCss;
56-
}
57-
58-
return cloneElement(child, {
42+
allChildrenList = childrenList.map((child, index) => {
43+
const childNode = cloneElement(child, {
5944
key: `avatar-group-item-${index}`,
60-
css: childrenCss,
6145
});
46+
return convertToLightDomNode(childNode);
6247
});
6348
}
6449
const groupClass = classNames(`${preClass}-group`, this.className, {
@@ -68,17 +53,16 @@ export default class AvatarGroup extends Component<AvatarGroupProps> {
6853

6954
const childrenCount = childrenList.length;
7055
if (props.max && childrenCount > max) {
71-
const showList = this.allChildrenList.slice(0, max);
72-
let childrenCss = borderCss;
73-
if (cascading === 'left-up') {
74-
childrenCss += offsetLeftCss + offsetLeftZIndexCss;
75-
}
56+
const showList = allChildrenList.slice(0, max);
7657
const ellipsisAvatar = (
77-
<t-avatar css={childrenCss}>{parseTNode(collapseAvatar) || `+${childrenCount - max}`} </t-avatar>
58+
<t-avatar
59+
key={`${preClass}__collapse`}
60+
content={parseTNode(collapseAvatar) || `+${childrenCount - max}`}
61+
></t-avatar>
7862
);
79-
showList.push(<div key="t-avatar__collapse">{ellipsisAvatar}</div>);
63+
showList.push(convertToLightDomNode(ellipsisAvatar));
8064
return <div class={groupClass}>{showList}</div>;
8165
}
82-
return <div class={groupClass}>{this.allChildrenList}</div>;
66+
return <div class={groupClass}>{allChildrenList}</div>;
8367
}
8468
}

‎src/avatar/avatar.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,17 @@ import { classNames, Component, createRef, OmiProps, tag } from 'omi';
33
import { getClassPrefix, getCommonClassName } from '../_util/classname';
44
import { StyledProps } from '../common';
55
import { ImageProps } from '../image';
6-
import { styleSheet } from './style/index.ts';
76
import { TdAvatarProps } from './type';
87

98
export interface AvatarProps extends TdAvatarProps, StyledProps {}
109

1110
@tag('t-avatar')
1211
export default class Avatar extends Component<AvatarProps> {
13-
static css = styleSheet;
12+
static css = [];
1413

1514
static defaultProps = { hideOnLoadFailed: false, shape: 'circle' };
1615

17-
static propsType = {
16+
static propTypes = {
1817
alt: String,
1918
hideOnLoadFailed: Boolean,
2019
icon: Object,
@@ -121,9 +120,10 @@ export default class Avatar extends Component<AvatarProps> {
121120
const childrenStyle = {
122121
transform: `scale(${this.scale})`,
123122
};
123+
const renderChildrenContent = children && children[0] ? children : content;
124124
renderChildren = (
125125
<span ref={avatarChildrenRef} style={childrenStyle}>
126-
{children || content}
126+
{renderChildrenContent}
127127
</span>
128128
);
129129
}

‎src/avatar/index.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
1+
import './style/index.js';
2+
13
import _Avatar from './avatar';
24
import _AvatarGroup from './avatar-group';
35

4-
export type { TdAvatarGroupProps } from './type';
56
export type { AvatarProps } from './avatar';
67
export const Avatar = _Avatar;
78
export const AvatarGroup = _AvatarGroup;
89

910
export default Avatar;
11+
12+
export * from './type';

‎src/avatar/style/border.less

-11
This file was deleted.

‎src/avatar/style/index.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import { css, globalCSS } from 'omi';
22

33
import avatarStyle from '../../_common/style/web/components/avatar/_index.less';
4-
import theme from '../../_common/style/web/theme/_index.less';
54

65
export const styleSheet = css`
7-
${avatarStyle} + ${theme}
6+
${avatarStyle}
87
`;
98

109
globalCSS(styleSheet);

‎src/avatar/style/offset_left.less

-11
This file was deleted.

‎src/avatar/style/offset_left_zIndex.less

-9
This file was deleted.

‎src/avatar/style/offset_right.less

-19
This file was deleted.

‎src/collapse/collapse-panel.tsx

+8-3
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,14 @@ export default class CollapsePanel extends Component<TdCollapsePanelProps> {
1818
expandIcon: true,
1919
};
2020

21-
static propsType = {
22-
destroyOnCollapse: false,
23-
disabled: false,
21+
static propTypes = {
22+
destroyOnCollapse: Boolean,
23+
disabled: Boolean,
24+
value: [String, Number],
25+
expandIcon: Boolean,
26+
header: String,
27+
content: String,
28+
headerRightContent: String,
2429
};
2530

2631
innerValue = signal(0);

‎src/collapse/collapse.tsx

+9-7
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,15 @@ export interface CollapseProps extends TdCollapseProps, StyledProps {}
88

99
@tag('t-collapse')
1010
export default class Collapse extends Component<TdCollapseProps> {
11-
static propsType = {
12-
borderless: false,
13-
defaultExpandAll: false,
14-
disabled: false,
15-
expandIconPlacement: 'left',
16-
expandMutex: false,
17-
expandOnRowClick: true,
11+
static propTypes = {
12+
borderless: Boolean,
13+
defaultExpandAll: Boolean,
14+
disabled: Boolean,
15+
expandIconPlacement: String,
16+
expandMutex: Boolean,
17+
expandOnRowClick: Boolean,
18+
value: Array,
19+
onChange: Function,
1820
};
1921

2022
collapseValue = signal([]);

0 commit comments

Comments
 (0)