Skip to content

Commit 663dfa3

Browse files
ChenlingasMxChenlingasMx
committed
fix: 【Steps】增加自定义render功能
1 parent 7f25f53 commit 663dfa3

File tree

7 files changed

+98
-48
lines changed

7 files changed

+98
-48
lines changed

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

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, {Component, useState} from 'react';
1+
import React, {useState} from 'react';
22
import {View, Text} from 'react-native';
33
import {ComProps} from '../../routes';
44
import Layout, {Container} from '../../Layout';
@@ -26,6 +26,29 @@ export default (props: StepsViewProps) => {
2626
{title: '步骤三', desc: '这里是', status: 'error'},
2727
];
2828

29+
const items3 = [
30+
{
31+
render: (
32+
<View>
33+
<Text>1</Text>
34+
</View>
35+
),
36+
},
37+
{
38+
render: (
39+
<View>
40+
<Text>2</Text>
41+
</View>
42+
),
43+
},
44+
{
45+
render: (
46+
<View>
47+
<Text>3</Text>
48+
</View>
49+
),
50+
},
51+
];
2952
const onBtnPress = () => {
3053
let index = current + 1;
3154
if (index > item.length - 1) {
@@ -59,6 +82,11 @@ export default (props: StepsViewProps) => {
5982
<Steps items={item2} current={2} />
6083
</WingBlank>
6184
</Card>
85+
<Card title="自定义render">
86+
<WingBlank>
87+
<Steps items={items3} />
88+
</WingBlank>
89+
</Card>
6290
</Body>
6391
</Container>
6492
);

‎packages/core/src/Form/formItems.tsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,22 +53,28 @@ const FormItems = ({ schema = [] }: Pick<FormProps, 'schema'>) => {
5353
if (v.hide) {
5454
return null;
5555
}
56+
const showList = schema.filter((item: FormItemsProps) => !item.hide) || [];
57+
const last = showList.length - 1 === i;
5658
let child = (
57-
<View style={[styles.form_items]}>
59+
<View style={[styles.form_items, { borderBottomWidth: last ? 0 : 0.5, ...v.formItemStyle }]}>
5860
<Label v={v} />
5961
{_renderComponent(v)}
6062
<Tip v={v} />
6163
</View>
6264
);
6365
if (displayType === 'row') {
6466
child = (
65-
<View style={[styles.form_items]}>
66-
<Flex justify="between" align="center">
67+
<Flex
68+
justify="center"
69+
direction="column"
70+
style={[styles.form_items, { borderBottomWidth: last ? 0 : 0.5, ...v.formItemStyle }]}
71+
>
72+
<Flex align="center" style={{ width: '100%', flex: 1 }}>
6773
<Label v={v} labelStyle={labelStyle} />
6874
<View style={{ flex: 1 }}>{_renderComponent(v)}</View>
6975
</Flex>
7076
<Tip v={v} />
71-
</View>
77+
</Flex>
7278
);
7379
}
7480
return (

‎packages/core/src/Form/formList.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -125,10 +125,11 @@ const FormList = ({
125125
if (v.type === 'cardList') {
126126
return;
127127
}
128-
128+
const showList = items.filter((item: FormItemsProps) => !item.hide) || [];
129+
const last = showList.length - 1 === i;
129130
return (
130131
<View key={i} style={styles.form_items_container}>
131-
<View style={[styles.form_items]}>
132+
<View style={[styles.form_items, { borderBottomWidth: last ? 0 : 0.5, ...v.formItemStyle }]}>
132133
<Label v={v} />
133134
{_renderComponent(v, index)}
134135
<Tip v={v} />

‎packages/core/src/Form/styles.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,12 @@ const styles = StyleSheet.create({
55
backgroundColor: '#fff',
66
},
77
form_items_container: {
8-
// flex: 1,
98
width: '100%',
109
},
1110
form_items: {
1211
textAlign: 'center',
13-
margin: 5,
14-
borderBottomWidth: 0.5,
15-
borderBottomColor: '#ccc',
12+
marginVertical: 5,
13+
borderBottomColor: '#F5F5F5',
1614
},
1715
});
1816

‎packages/core/src/Form/types/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ interface FormItemsProps {
6565
renderAdd?: ({ add }: { add: () => void }) => React.ReactNode;
6666
items?: Omit<FormItemsProps, 'validate' | 'required'>[];
6767
hide?: boolean;
68+
formItemStyle?: ViewStyle;
6869
}
6970

7071
export type { FormProps, FormItemsProps, KeyType, FormInstance, InnerMethodsReturnType };

‎packages/core/src/Rating/index.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useEffect, useState } from 'react';
2-
import { View, StyleSheet, TouchableOpacity, Text, StyleProp, TextStyle } from 'react-native';
2+
import { View, StyleSheet, TouchableOpacity, Text, StyleProp, TextStyle, ViewStyle } from 'react-native';
33

44
import Icon, { IconsName } from '../Icon';
55
import { TabsItemIconTypes } from '../Tabs/TabsItem';
@@ -30,6 +30,7 @@ export interface RatingProps {
3030
tooltipsStyle?: StyleProp<TextStyle>;
3131
/** 只读模式 */
3232
disabled: boolean;
33+
itemStyle?: ViewStyle;
3334
}
3435

3536
export interface RatingState {
@@ -114,6 +115,7 @@ function Rating(props: RatingProps) {
114115
}
115116
}}
116117
key={index}
118+
style={{ marginRight: 5, ...props.itemStyle }}
117119
>
118120
{typeof item === 'string' ? <Icon name={item as IconsName} color={color} size={size} /> : item}
119121
</TouchableOpacity>

‎packages/core/src/Steps/index.tsx‎

Lines changed: 50 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export interface StepsItemsProps {
1212
title?: string;
1313
desc?: string;
1414
status?: statusType;
15+
render?: React.ReactNode;
1516
}
1617

1718
export interface StepsProps extends ViewProps {
@@ -35,43 +36,56 @@ export default (props: StepsProps) => {
3536

3637
return (
3738
<View style={styles.steps} {...others}>
38-
{items.map((item, index) => (
39-
<TouchableOpacity style={[styles.item]} key={index} onPress={() => onStepsPress(index)}>
40-
<View style={styles.wrap}>
41-
{index !== 0 && <View style={styles.leftLine}></View>}
42-
<View
43-
style={[
44-
styles.circular,
45-
{
46-
backgroundColor:
47-
current >= index && !item?.status
48-
? theme.colors.primary_background || '#3578e5'
49-
: theme.colors.gray100 || '#e5e5e5',
50-
},
51-
]}
52-
>
53-
{item?.status === 'error' && <Icon name="circle-close" size={22} fill={theme.colors.func600} />}
54-
{item?.status === 'success' && (
55-
<Icon name="circle-check" size={22} fill={theme.colors.primary_background || '#3578e5'} />
56-
)}
57-
{!item?.status && (
58-
<Text
59-
style={{
60-
color: current >= index ? theme.colors.white : theme.colors.gray500,
61-
}}
62-
>
63-
{index + 1}
64-
</Text>
65-
)}
39+
{items.map((item, index) => {
40+
if (item.render) {
41+
return (
42+
<TouchableOpacity style={[styles.item]} key={index} onPress={() => onStepsPress(index)}>
43+
<View style={styles.wrap}>
44+
{index !== 0 && <View style={styles.leftLine}></View>}
45+
{item.render}
46+
{index < items.length - 1 && <View style={styles.rightLine}></View>}
47+
</View>
48+
</TouchableOpacity>
49+
);
50+
}
51+
return (
52+
<TouchableOpacity style={[styles.item]} key={index} onPress={() => onStepsPress(index)}>
53+
<View style={styles.wrap}>
54+
{index !== 0 && <View style={styles.leftLine}></View>}
55+
<View
56+
style={[
57+
styles.circular,
58+
{
59+
backgroundColor:
60+
current >= index && !item?.status
61+
? theme.colors.primary_background || '#3578e5'
62+
: theme.colors.gray100 || '#e5e5e5',
63+
},
64+
]}
65+
>
66+
{item?.status === 'error' && <Icon name="circle-close" size={22} fill={theme.colors.func600} />}
67+
{item?.status === 'success' && (
68+
<Icon name="circle-check" size={22} fill={theme.colors.primary_background || '#3578e5'} />
69+
)}
70+
{!item?.status && (
71+
<Text
72+
style={{
73+
color: current >= index ? theme.colors.white : theme.colors.gray500,
74+
}}
75+
>
76+
{index + 1}
77+
</Text>
78+
)}
79+
</View>
80+
{index < items.length - 1 && <View style={styles.rightLine}></View>}
6681
</View>
67-
{index < items.length - 1 && <View style={styles.rightLine}></View>}
68-
</View>
69-
<Text color="primary_text">{item.title}</Text>
70-
<Text color="text" style={styles.desc}>
71-
{item.desc}
72-
</Text>
73-
</TouchableOpacity>
74-
))}
82+
<Text color="primary_text">{item.title}</Text>
83+
<Text color="text" style={styles.desc}>
84+
{item.desc}
85+
</Text>
86+
</TouchableOpacity>
87+
);
88+
})}
7589
</View>
7690
);
7791
};

0 commit comments

Comments
 (0)