Skip to content

Commit 96c582b

Browse files
ChenlingasMxChenlingasMx
committed
(fix):Update Card & Card docs
1 parent dbdb333 commit 96c582b

File tree

6 files changed

+215
-148
lines changed

6 files changed

+215
-148
lines changed

‎example/examples/src/routes/Card/index.tsx‎

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -55,28 +55,31 @@ const CardDemo = (props: any) => {
5555
<ScrollView style={{flex: 1}}>
5656
<Header title={title} description={description} />
5757
<Header description={'基本使用'} />
58-
<Card
59-
actions={[
60-
{
61-
text: '点赞',
62-
icon: <Icon name="like-o" size={16} color="#5847FF" />,
63-
onPress: (e: any, index: number) => {
64-
console.log('e', e, 'index', index);
58+
<Card>
59+
{basicRender}
60+
<Card.Actions
61+
actions={[
62+
{
63+
text: '点赞',
64+
icon: <Icon name="like-o" size={16} color="#5847FF" />,
65+
onPress: (e: any, index: number) => {
66+
console.log('e', e, 'index', index);
67+
},
6568
},
66-
},
67-
{
68-
text: '分享',
69-
icon: <Icon name="share" size={16} color="#5847FF" />,
70-
onPress: (e: any, index: number) => {
71-
console.log('e', e, 'index', index);
69+
{
70+
text: '分享',
71+
icon: <Icon name="share" size={16} color="#5847FF" />,
72+
onPress: (e: any, index: number) => {
73+
console.log('e', e, 'index', index);
74+
},
7275
},
73-
},
74-
]}>
75-
{basicRender}
76+
]}
77+
/>
7678
</Card>
7779
<Divider />
7880
<Header description={'带标题下划线圆角卡片'} />
79-
<Card title={TITLE} borderRadius={12}>
81+
<Card borderRadius={12}>
82+
<Card.Title title="@uiw/react-native" />
8083
{basicRender}
8184
</Card>
8285
<Divider />

‎example/examples/src/routes/Progress/index.tsx‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -22,16 +22,11 @@ const ProgressDemo = (props: any) => {
2222

2323
return (
2424
<Container>
25-
<Progress progress={30} />
2625
<Header title={title} description={description} />
2726
<Body>
28-
<Card title="基础实例" style={{margin: 10}}>
27+
<Header description={'基本使用'} />
2928
<Progress progressColor="#5847FF" progress={40} />
30-
<Spacing />
31-
<Button color={'#5847FF'} onPress={onPress}>
32-
(+-)10
33-
</Button>
34-
<Spacing />
29+
<Header description={'点击变化'} />
3530
<View
3631
style={{
3732
flexDirection: 'row',
@@ -43,11 +38,9 @@ const ProgressDemo = (props: any) => {
4338
{val}%
4439
</Text>
4540
</View>
46-
<Spacing />
47-
<Progress progressColor="#5847FF" progress={60} />
48-
<Spacing />
49-
<Progress progressColor="#5847FF" progress={80} />
50-
</Card>
41+
<Button color={'#5847FF'} onPress={onPress}>
42+
(+-)10
43+
</Button>
5144
</Body>
5245
</Container>
5346
);

‎packages/core/src/Card/Card.Actions.tsx‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import React, { Fragment } from 'react';
2+
import {
3+
View,
4+
Text,
5+
StyleSheet,
6+
StyleProp,
7+
ViewStyle,
8+
TextStyle,
9+
Platform,
10+
TouchableOpacity,
11+
GestureResponderEvent
12+
} from 'react-native';
13+
import Divider from '../Divider';
14+
import map from 'lodash/map';
15+
import { colors } from '../utils';
16+
17+
export type CardActionsProps = {
18+
actions?: Array<{
19+
text?: string;
20+
icon?: JSX.Element;
21+
onPress?: (e: GestureResponderEvent, index: number) => void;
22+
actionsTextStyle?: StyleProp<TextStyle>
23+
}>;
24+
actionsContainerStyle?: StyleProp<ViewStyle>
25+
children?: React.ReactNode;
26+
};
27+
28+
const CardActions = ({
29+
actions = [],
30+
actionsContainerStyle,
31+
children
32+
}: CardActionsProps) => {
33+
return (
34+
<Fragment>
35+
<Divider style={StyleSheet.flatten({ marginTop: 15 })} />
36+
{React.isValidElement(children) ? React.cloneElement(children) : null}
37+
<View style={[styles.actionsContainer, actionsContainerStyle]}>
38+
{map(actions, (item, index) => {
39+
return (
40+
<TouchableOpacity
41+
style={[styles.actionsTitleContainer, { marginLeft: index === 0 ? 0 : 10 }]}
42+
key={index}
43+
onPress={(event) => item.onPress && item.onPress(event, index)}
44+
>
45+
{item.icon && item.icon}
46+
{item.text && <Text style={[styles.actionsTitle, item.actionsTextStyle]}>{item.text}</Text>}
47+
</TouchableOpacity>
48+
);
49+
})}
50+
</View>
51+
</Fragment>
52+
)
53+
}
54+
55+
const styles = StyleSheet.create({
56+
actionsContainer: {
57+
display: 'flex',
58+
flexDirection: 'row',
59+
justifyContent: 'flex-end',
60+
paddingTop: 15,
61+
},
62+
actionsTitleContainer: {
63+
display: 'flex',
64+
flexDirection: 'row',
65+
fontSize: 16,
66+
},
67+
actionsTitle: {
68+
color: colors.colorsPalette.violet30,
69+
...Platform.select({
70+
android: {
71+
fontFamily: 'sans-serif',
72+
fontWeight: 'bold',
73+
},
74+
default: {
75+
fontWeight: 'bold',
76+
},
77+
}),
78+
textAlign: 'center',
79+
},
80+
});
81+
82+
export default CardActions

‎packages/core/src/Card/Card.Title.tsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React from 'react';
2+
import {
3+
View,
4+
Text,
5+
StyleSheet,
6+
Platform,
7+
TextStyle,
8+
StyleProp
9+
} from 'react-native';
10+
import { colors } from '../utils';
11+
import Divider from '../Divider';
12+
13+
export type CardTitleProps = {
14+
title?: string;
15+
titleStyle?: StyleProp<TextStyle>
16+
children?: React.ReactNode;
17+
};
18+
19+
const CardTitle = ({
20+
title,
21+
titleStyle,
22+
children
23+
}: CardTitleProps) => {
24+
return (
25+
<View>
26+
{title && (
27+
<Text testID="cardTitle" style={StyleSheet.flatten([styles.title, titleStyle]) as TextStyle}>
28+
{title}
29+
</Text>
30+
)}
31+
{React.isValidElement(children)?React.cloneElement(children):null}
32+
<Divider style={StyleSheet.flatten([styles.divider])} />
33+
</View>
34+
)
35+
}
36+
37+
const styles = StyleSheet.create({
38+
title: {
39+
fontSize: 14,
40+
color: colors.colorsPalette.grey10,
41+
...Platform.select({
42+
android: {
43+
fontFamily: 'sans-serif',
44+
fontWeight: 'bold',
45+
},
46+
default: {
47+
fontWeight: 'bold',
48+
},
49+
}),
50+
textAlign: 'center',
51+
marginBottom: 15,
52+
},
53+
divider: {
54+
marginBottom: 15,
55+
}
56+
});
57+
58+
export default CardTitle

‎packages/core/src/Card/README.md‎

Lines changed: 43 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -35,13 +35,10 @@ import { Card } from '@uiw/react-native';
3535

3636
class Demo extends Component {
3737
render() {
38-
return (
38+
return (
3939
<SafeAreaView style={{ flex: 1 }}>
40-
<Card
41-
title="我是标题"
42-
showDriver={true}
43-
borderRadius={12}
44-
>
40+
<Card borderRadius={12}>
41+
<Card.Title title="@uiw/react-native" />
4542
<Image
4643
source={{
4744
uri: 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2019%2F04%2F22%2Fca22d8623fe7454ea9cdb33f3137d14e.jpeg&thumbnail=650x2147483647&quality=80&type=jpg',
@@ -56,25 +53,37 @@ class Demo extends Component {
5653
```
5754
<!--End-->
5855

59-
### 可点击选中卡片
56+
### 可点击选中带操作卡片
6057

6158
<!--DemoStart-->
6259
```jsx
6360
import React, { useState } from 'react';
6461
import { SafeAreaView, View, Image } from 'react-native';
65-
import { Card } from '@uiw/react-native';
62+
import { Card ,Icon } from '@uiw/react-native';
6663

6764
const Demo = () => {
6865
const [selected, setSelected] = useState(false)
6966
return (
7067
<SafeAreaView style={{ flex: 1 }}>
7168
<Card
7269
selected={selected}
73-
title="我是标题"
74-
showDriver={true}
7570
borderRadius={12}
7671
onPress={() => { setSelected(!selected) }}
7772
>
73+
<Card.Actions
74+
actions={[
75+
{
76+
text: '点赞',
77+
icon: <Icon name="like-o" size={16} color="#5847FF" />,
78+
onPress: (e: any, index: number) => { }
79+
},
80+
{
81+
text: '分享',
82+
icon: <Icon name="share" size={16} color="#5847FF" />,
83+
onPress: (e: any, index: number) => { }
84+
},
85+
]}
86+
/>
7887
<Image
7988
source={{
8089
uri: 'https://wx1.sinaimg.cn/mw690/4718260ely1gt2cg5r9zij22yo1o0x6p.jpg',
@@ -88,38 +97,46 @@ const Demo = () => {
8897
```
8998
<!--End-->
9099

91-
### Props
92-
100+
### CardProps
93101
```ts
94102
export interface CardProps {
95103
/** 外容器样式（可选） */
96104
containerStyle?: StyleProp<ViewStyle>;
97105
/** 内容器样式（可选） */
98106
wrapperStyle?: StyleProp<ViewStyle>;
99-
/** 标题（可选） */
100-
title?: string
101-
/** 标题样式（可选） */
102-
titleStyle?: StyleProp<TextStyle>;
103107
/** 设置卡片圆角度数（可选） */
104108
borderRadius?: number;
105109
/** 是否选中（可选） */
106110
selected?: boolean;
107111
/** 渲染内容 */
108112
children?: React.ReactNode;
109-
/** 操作 */
110-
actions?: Array<{
111-
text?: string;
112-
icon?: JSX.Element;
113-
onPress?: (e: GestureResponderEvent, index: number) => void;
114-
}>;
115-
/** 操作容器样式（可选） */
116-
actionsContainerStyle?: StyleProp<ViewStyle>;
117-
/** 操作文字样式（可选） */
118-
actionsTextStyle?: StyleProp<ViewStyle>;
119113
/** 按下卡片时的动作（可选） */
120114
onPress?: TouchableOpacityProps['onPress'];
121115
/** 长按下卡片时的动作（可选） */
122116
onLongPress?: TouchableOpacityProps['onLongPress'];
123117
}
124118
```
125119

120+
### CardTitleProps
121+
```ts
122+
type CardTitleProps = {
123+
title?: string;
124+
titleStyle?: StyleProp<TextStyle>
125+
children?: React.ReactNode;
126+
};
127+
```
128+
129+
### CardActionsProps
130+
```ts
131+
type CardActionsProps = {
132+
actions?: Array<{
133+
text?: string;
134+
icon?: JSX.Element;
135+
onPress?: (e: GestureResponderEvent, index: number) => void;
136+
actionsTextStyle?: StyleProp<TextStyle>
137+
}>;
138+
actionsContainerStyle?: StyleProp<ViewStyle>
139+
children?: React.ReactNode;
140+
};
141+
```
142+

0 commit comments

Comments
 (0)