Skip to content

Commit dc044c3

Browse files
nullptr-znullptr-z
authored
refactor(List): 重构列表组件 (#847,#826)
1 parent 3e734eb commit dc044c3

File tree

5 files changed

+189
-10
lines changed

5 files changed

+189
-10
lines changed

‎packages/react-list/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,8 @@
4141
],
4242
"peerDependencies": {
4343
"react": ">=18.0.0",
44-
"react-dom": ">=18.0.0"
44+
"react-dom": ">=18.0.0",
45+
"styled-components": "~5.3.5"
4546
},
4647
"dependencies": {
4748
"@uiw/utils": "^4.21.2"

‎packages/react-list/src/Item.tsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { Fragment } from 'react';
22
import { IProps } from '@uiw/utils';
3+
import { ListItemExtra, ListItemMain, ListItemWarp } from './style';
34

45
export type TagType = React.ComponentType | keyof JSX.IntrinsicElements;
56

@@ -22,24 +23,28 @@ export const ListItem = React.forwardRef(
2223
active = false,
2324
...resetProps
2425
} = props;
26+
2527
const cls = [prefixCls, className, props.disabled ? 'w-disabled' : null, active ? 'w-active' : null]
2628
.filter(Boolean)
2729
.join(' ')
2830
.trim();
2931
const TagName = props.href && typeof tagName === 'string' ? 'a' : tagName;
3032
return React.createElement(
31-
TagName,
33+
ListItemWarp,
3234
{
3335
...resetProps,
3436
className: cls,
37+
as: TagName,
3538
ref,
39+
disabled: props.disabled,
40+
active,
3641
} as any,
3742
!extra || resetProps.href ? (
3843
children
3944
) : (
4045
<Fragment>
41-
<div className={`${prefixCls}-main`}>{children}</div>
42-
<div className={`${prefixCls}-extra`}>{extra}</div>
46+
<ListItemMain className={`${prefixCls}-main`}>{children}</ListItemMain>
47+
<ListItemExtra className={`${prefixCls}-extra`}>{extra}</ListItemExtra>
4348
</Fragment>
4449
),
4550
);

‎packages/react-list/src/index.tsx

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { IProps, HTMLDivProps, noop } from '@uiw/utils';
33
import { ListItem } from './Item';
4-
import './style/index.less';
4+
import ListWarp, { ListFooter, ListHeader } from './style';
55

66
export * from './Item';
77

@@ -35,7 +35,7 @@ function InternalList<T>(props: ListProps<T>, ref: React.ForwardedRef<HTMLDivEle
3535
} = props;
3636
let items: React.ReactNode;
3737
if (dataSource && dataSource.length > 0) {
38-
items = dataSource.map((item: any, index: number) => renderItem!(item, index));
38+
items = dataSource.map((item: any, index: number) => renderItem!(item, index)) as React.ReactNode;
3939
} else {
4040
items = children;
4141
}
@@ -60,11 +60,20 @@ function InternalList<T>(props: ListProps<T>, ref: React.ForwardedRef<HTMLDivEle
6060
.join(' ')
6161
.trim();
6262
return (
63-
<div className={classString} {...resetProps} ref={ref}>
64-
{header && <div className={`${prefixCls}-header`}>{header}</div>}
63+
<ListWarp
64+
className={classString}
65+
{...resetProps}
66+
ref={ref}
67+
striped={striped}
68+
noHover={noHover}
69+
active={active}
70+
bordered={bordered}
71+
size={size}
72+
>
73+
{header && <ListHeader className={`${prefixCls}-header`}>{header}</ListHeader>}
6574
{childrenList}
66-
{footer && <div className={`${prefixCls}-footer`}>{footer}</div>}
67-
</div>
75+
{footer && <ListFooter className={`${prefixCls}-footer`}>{footer}</ListFooter>}
76+
</ListWarp>
6877
);
6978
}
7079

‎packages/react-list/src/style/index.ts

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
import styled, { css } from 'styled-components';
2+
import { ThemeVariantValueOptions, getThemeVariantValue } from '@uiw/utils';
3+
import { ListItemProps, ListProps } from 'src';
4+
5+
interface ListWarp
6+
extends ThemeVariantValueOptions,
7+
Pick<ListProps<any>, 'striped' | 'noHover' | 'active' | 'bordered' | 'size'> {}
8+
9+
interface ListItemWarpProps extends ThemeVariantValueOptions, Pick<ListItemProps<any>, 'disabled' | 'active'> {}
10+
11+
export const ListItemMain = styled.div`
12+
display: block;
13+
flex: 1;
14+
`;
15+
export const ListItemExtra = styled.div`
16+
margin-left: 40px;
17+
`;
18+
19+
export const ListItemWarp = styled.div<ListItemWarpProps>`
20+
${(props) => css`
21+
display: flex;
22+
align-items: center;
23+
24+
${props.disabled &&
25+
css`
26+
cursor: not-allowed;
27+
text-decoration: none;
28+
pointer-events: none;
29+
color: ${getThemeVariantValue(props, 'colorListItemDisabled')};
30+
`}
31+
32+
${props.active &&
33+
css`
34+
background: ${getThemeVariantValue(props, 'backgroundListItemActive')};
35+
color: ${getThemeVariantValue(props, 'colorListItemActive')};
36+
`}
37+
38+
${props.disabled &&
39+
css`
40+
display: block;
41+
color: ${getThemeVariantValue(props, 'colorListItemDisabled')} !important; //#;
42+
`}
43+
44+
:hover {
45+
${!props.disabled &&
46+
css`
47+
background: ${getThemeVariantValue(props, 'backgroundListItemNotDisabledHover')};
48+
`}
49+
}
50+
`}
51+
`;
52+
53+
const active = css`
54+
${(props) => css`
55+
box-shadow: 0 1px 6px ${getThemeVariantValue(props, 'boxShadowListActive')};
56+
border-color: ${getThemeVariantValue(props, 'borderColorListActive')};
57+
`}
58+
`;
59+
60+
export const ListHeader = styled.div``;
61+
export const ListFooter = styled.div``;
62+
63+
const ListWarp = styled.div<ListWarp>`
64+
${(props) => css`
65+
font-size: ${getThemeVariantValue(props, 'fontSizeDefault')};
66+
line-height: 1.5 ${getThemeVariantValue(props, 'lineHeightDefault')};
67+
color: ${getThemeVariantValue(props, 'colorListBase')};
68+
box-sizing: border-box;
69+
margin: 0;
70+
padding: 0;
71+
list-style: none;
72+
position: relative;
73+
background-color: ${getThemeVariantValue(props, 'backgroundColorListBase')};
74+
transition: all 0.3s;
75+
&:hover {
76+
${!props.noHover && active}
77+
}
78+
${props.active && active}
79+
80+
${props.bordered &&
81+
css`
82+
border: 1px solid ${getThemeVariantValue(props, 'colorListBorder')};
83+
border-radius: 4px;
84+
`}
85+
86+
${ListItemWarp} {
87+
:last-child {
88+
${props.bordered &&
89+
css`
90+
border-bottom: 0;
91+
border-radius: 0 0 14px 4px;
92+
`}
93+
}
94+
95+
:nth-of-type(2n) {
96+
${props.striped &&
97+
css`
98+
background: ${getThemeVariantValue(props, 'backgroundColorListStriped')};
99+
`}
100+
}
101+
}
102+
103+
${ListItemWarp},${ListHeader} {
104+
${props.bordered &&
105+
css`
106+
border-bottom: 1px solid ${getThemeVariantValue(props, 'backgroundColorListBordered')};
107+
`}
108+
}
109+
110+
${ListItemWarp},${ListHeader},${ListFooter} {
111+
padding: 12px 18px;
112+
${props.size === 'small' &&
113+
css`
114+
padding: 18px 16px;
115+
`}
116+
${props.size === 'large' &&
117+
css`
118+
padding: 16px 24px;
119+
`}
120+
}
121+
`}
122+
`;
123+
124+
ListWarp.defaultProps = {
125+
defaultTheme: {
126+
fontSizeSmall: '12px',
127+
fontSizeDefault: '14px',
128+
fontSizeLarge: '16px',
129+
lineHeightDefault: 1.5,
130+
131+
colorListBase: '#52575c',
132+
backgroundColorListBase: '#fff',
133+
boxShadowListActive: 'rgba(0, 0, 0, 0.2)',
134+
borderColorListActive: 'rgba(0, 0, 0, 0.2)',
135+
colorListBorder: '#e9e9e9',
136+
backgroundColorListStriped: '#f8f8f9',
137+
backgroundColorListBordered: '#e8e8e8',
138+
},
139+
};
140+
141+
ListItemWarp.defaultProps = {
142+
defaultTheme: {
143+
colorListItemDisabled: '#a3a6a9',
144+
backgroundListItemActive: '#f8f8f9',
145+
colorListItemActive: '#007bff',
146+
backgroundListItemNotDisabledHover: '#f8f8f9',
147+
},
148+
};
149+
150+
export default ListWarp;

‎theme/themeVariant.json5

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,20 @@
176176
// Panel
177177
colorCollapsePanelBase: 'rgba(0, 0, 0, 0.65)',
178178

179+
// ------------------------ list 列表 -----------------------------------
180+
colorListBase: '#52575c',
181+
backgroundColorListBase: '#fff',
182+
boxShadowListActive: 'rgba(0, 0, 0, 0.2)',
183+
borderColorListActive: 'rgba(0, 0, 0, 0.2)',
184+
colorListBorder: '#e9e9e9',
185+
backgroundColorListStriped: '#f8f8f9',
186+
backgroundColorListBordered: '#e8e8e8',
187+
// list item
188+
colorListItemDisabled: '#a3a6a9',
189+
backgroundListItemActive: '#f8f8f9',
190+
colorListItemActive: '#007bff',
191+
backgroundListItemNotDisabledHover: '#f8f8f9',
192+
179193
// -------------------------- divider 分割线 ----------------------------------
180194
// 组件内部公共
181195
borderTopColorDividerWithText: '#e8e8e8',

0 commit comments

Comments
 (0)