fix: 【Steps】增加自定义render功能

ChenlingasMx · ChenlingasMx · commit 663dfa3b6e68 · 2023-08-22T09:05:25.000+08:00
diff --git a/example/examples/src/routes/Steps/index.tsx b/example/examples/src/routes/Steps/index.tsx
@@ -1,4 +1,4 @@
-import React, {Component, useState} from 'react';
+import React, {useState} from 'react';
 import {View, Text} from 'react-native';
 import {ComProps} from '../../routes';
 import Layout, {Container} from '../../Layout';
@@ -26,6 +26,29 @@ export default (props: StepsViewProps) => {
     {title: '步骤三', desc: '这里是', status: 'error'},
   ];
 
+  const items3 = [
+    {
+      render: (
+        <View>
+          <Text>1</Text>
+        </View>
+      ),
+    },
+    {
+      render: (
+        <View>
+          <Text>2</Text>
+        </View>
+      ),
+    },
+    {
+      render: (
+        <View>
+          <Text>3</Text>
+        </View>
+      ),
+    },
+  ];
   const onBtnPress = () => {
     let index = current + 1;
     if (index > item.length - 1) {
@@ -59,6 +82,11 @@ export default (props: StepsViewProps) => {
             <Steps items={item2} current={2} />
           </WingBlank>
         </Card>
+        <Card title="自定义render">
+          <WingBlank>
+            <Steps items={items3} />
+          </WingBlank>
+        </Card>
       </Body>
     </Container>
   );
diff --git a/packages/core/src/Form/formItems.tsx b/packages/core/src/Form/formItems.tsx
@@ -53,22 +53,28 @@ const FormItems = ({ schema = [] }: Pick<FormProps, 'schema'>) => {
       if (v.hide) {
         return null;
       }
+      const showList = schema.filter((item: FormItemsProps) => !item.hide) || [];
+      const last = showList.length - 1 === i;
       let child = (
-        <View style={[styles.form_items]}>
+        <View style={[styles.form_items, { borderBottomWidth: last ? 0 : 0.5, ...v.formItemStyle }]}>
           <Label v={v} />
           {_renderComponent(v)}
           <Tip v={v} />
         </View>
       );
       if (displayType === 'row') {
         child = (
-          <View style={[styles.form_items]}>
-            <Flex justify="between" align="center">
+          <Flex
+            justify="center"
+            direction="column"
+            style={[styles.form_items, { borderBottomWidth: last ? 0 : 0.5, ...v.formItemStyle }]}
+          >
+            <Flex align="center" style={{ width: '100%', flex: 1 }}>
               <Label v={v} labelStyle={labelStyle} />
               <View style={{ flex: 1 }}>{_renderComponent(v)}</View>
             </Flex>
             <Tip v={v} />
-          </View>
+          </Flex>
         );
       }
       return (
diff --git a/packages/core/src/Form/formList.tsx b/packages/core/src/Form/formList.tsx
@@ -125,10 +125,11 @@ const FormList = ({
       if (v.type === 'cardList') {
         return;
       }
-
+      const showList = items.filter((item: FormItemsProps) => !item.hide) || [];
+      const last = showList.length - 1 === i;
       return (
         <View key={i} style={styles.form_items_container}>
-          <View style={[styles.form_items]}>
+          <View style={[styles.form_items, { borderBottomWidth: last ? 0 : 0.5, ...v.formItemStyle }]}>
             <Label v={v} />
             {_renderComponent(v, index)}
             <Tip v={v} />
diff --git a/packages/core/src/Form/styles.tsx b/packages/core/src/Form/styles.tsx
@@ -5,14 +5,12 @@ const styles = StyleSheet.create({
     backgroundColor: '#fff',
   },
   form_items_container: {
-    // flex: 1,
     width: '100%',
   },
   form_items: {
     textAlign: 'center',
-    margin: 5,
-    borderBottomWidth: 0.5,
-    borderBottomColor: '#ccc',
+    marginVertical: 5,
+    borderBottomColor: '#F5F5F5',
   },
 });
 
diff --git a/packages/core/src/Form/types/index.tsx b/packages/core/src/Form/types/index.tsx
@@ -65,6 +65,7 @@ interface FormItemsProps {
   renderAdd?: ({ add }: { add: () => void }) => React.ReactNode;
   items?: Omit<FormItemsProps, 'validate' | 'required'>[];
   hide?: boolean;
+  formItemStyle?: ViewStyle;
 }
 
 export type { FormProps, FormItemsProps, KeyType, FormInstance, InnerMethodsReturnType };
diff --git a/packages/core/src/Rating/index.tsx b/packages/core/src/Rating/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { View, StyleSheet, TouchableOpacity, Text, StyleProp, TextStyle } from 'react-native';
+import { View, StyleSheet, TouchableOpacity, Text, StyleProp, TextStyle, ViewStyle } from 'react-native';
 
 import Icon, { IconsName } from '../Icon';
 import { TabsItemIconTypes } from '../Tabs/TabsItem';
@@ -30,6 +30,7 @@ export interface RatingProps {
   tooltipsStyle?: StyleProp<TextStyle>;
   /** 只读模式 */
   disabled: boolean;
+  itemStyle?: ViewStyle;
 }
 
 export interface RatingState {
@@ -114,6 +115,7 @@ function Rating(props: RatingProps) {
                 }
               }}
               key={index}
+              style={{ marginRight: 5, ...props.itemStyle }}
             >
               {typeof item === 'string' ? <Icon name={item as IconsName} color={color} size={size} /> : item}
             </TouchableOpacity>
diff --git a/packages/core/src/Steps/index.tsx b/packages/core/src/Steps/index.tsx
@@ -12,6 +12,7 @@ export interface StepsItemsProps {
   title?: string;
   desc?: string;
   status?: statusType;
+  render?: React.ReactNode;
 }
 
 export interface StepsProps extends ViewProps {
@@ -35,43 +36,56 @@ export default (props: StepsProps) => {
 
   return (
     <View style={styles.steps} {...others}>
-      {items.map((item, index) => (
-        <TouchableOpacity style={[styles.item]} key={index} onPress={() => onStepsPress(index)}>
-          <View style={styles.wrap}>
-            {index !== 0 && <View style={styles.leftLine}></View>}
-            <View
-              style={[
-                styles.circular,
-                {
-                  backgroundColor:
-                    current >= index && !item?.status
-                      ? theme.colors.primary_background || '#3578e5'
-                      : theme.colors.gray100 || '#e5e5e5',
-                },
-              ]}
-            >
-              {item?.status === 'error' && <Icon name="circle-close" size={22} fill={theme.colors.func600} />}
-              {item?.status === 'success' && (
-                <Icon name="circle-check" size={22} fill={theme.colors.primary_background || '#3578e5'} />
-              )}
-              {!item?.status && (
-                <Text
-                  style={{
-                    color: current >= index ? theme.colors.white : theme.colors.gray500,
-                  }}
-                >
-                  {index + 1}
-                </Text>
-              )}
+      {items.map((item, index) => {
+        if (item.render) {
+          return (
+            <TouchableOpacity style={[styles.item]} key={index} onPress={() => onStepsPress(index)}>
+              <View style={styles.wrap}>
+                {index !== 0 && <View style={styles.leftLine}></View>}
+                {item.render}
+                {index < items.length - 1 && <View style={styles.rightLine}></View>}
+              </View>
+            </TouchableOpacity>
+          );
+        }
+        return (
+          <TouchableOpacity style={[styles.item]} key={index} onPress={() => onStepsPress(index)}>
+            <View style={styles.wrap}>
+              {index !== 0 && <View style={styles.leftLine}></View>}
+              <View
+                style={[
+                  styles.circular,
+                  {
+                    backgroundColor:
+                      current >= index && !item?.status
+                        ? theme.colors.primary_background || '#3578e5'
+                        : theme.colors.gray100 || '#e5e5e5',
+                  },
+                ]}
+              >
+                {item?.status === 'error' && <Icon name="circle-close" size={22} fill={theme.colors.func600} />}
+                {item?.status === 'success' && (
+                  <Icon name="circle-check" size={22} fill={theme.colors.primary_background || '#3578e5'} />
+                )}
+                {!item?.status && (
+                  <Text
+                    style={{
+                      color: current >= index ? theme.colors.white : theme.colors.gray500,
+                    }}
+                  >
+                    {index + 1}
+                  </Text>
+                )}
+              </View>
+              {index < items.length - 1 && <View style={styles.rightLine}></View>}
             </View>
-            {index < items.length - 1 && <View style={styles.rightLine}></View>}
-          </View>
-          <Text color="primary_text">{item.title}</Text>
-          <Text color="text" style={styles.desc}>
-            {item.desc}
-          </Text>
-        </TouchableOpacity>
-      ))}
+            <Text color="primary_text">{item.title}</Text>
+            <Text color="text" style={styles.desc}>
+              {item.desc}
+            </Text>
+          </TouchableOpacity>
+        );
+      })}
     </View>
   );
 };

Original file line number	Diff line number	Diff line change
`@@ -65,6 +65,7 @@ interface FormItemsProps {`
`65`	`65`	`renderAdd?: ({ add }: { add: () => void }) => React.ReactNode;`
`66`	`66`	`items?: Omit<FormItemsProps, 'validate' \| 'required'>[];`
`67`	`67`	`hide?: boolean;`
	`68`	`+ formItemStyle?: ViewStyle;`
`68`	`69`	`}`
`69`	`70`
`70`	`71`	`export type { FormProps, FormItemsProps, KeyType, FormInstance, InnerMethodsReturnType };`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`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';`
`3`	`3`
`4`	`4`	`import Icon, { IconsName } from '../Icon';`
`5`	`5`	`import { TabsItemIconTypes } from '../Tabs/TabsItem';`
`@@ -30,6 +30,7 @@ export interface RatingProps {`
`30`	`30`	`tooltipsStyle?: StyleProp<TextStyle>;`
`31`	`31`	`/** 只读模式 */`
`32`	`32`	`disabled: boolean;`
	`33`	`+ itemStyle?: ViewStyle;`
`33`	`34`	`}`
`34`	`35`
`35`	`36`	`export interface RatingState {`
`@@ -114,6 +115,7 @@ function Rating(props: RatingProps) {`
`114`	`115`	`}`
`115`	`116`	`}}`
`116`	`117`	`key={index}`
	`118`	`+ style={{ marginRight: 5, ...props.itemStyle }}`
`117`	`119`	`>`
`118`	`120`	`{typeof item === 'string' ? <Icon name={item as IconsName} color={color} size={size} /> : item}`
`119`	`121`	`</TouchableOpacity>`