feat[Card]:Add SelectedStyle prop<Card 组件增加自定选中状态api>

Author: ChenlingasMx

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

@@ -89,7 +89,15 @@ const CardDemo = (props: any) => {
         borderRadius={12}
         onPress={() => {
           setSelected(!selected);
-        }}>
+        }}
+        // 自定义选中状态
+        // selectedStyle={{
+        //   icon: null,
+        //   style: {
+        //     borderColor: "#fd8a00",
+        //   }
+        // }}
+      >
         {basicRender}
       </Card>
     </ScrollView>

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

@@ -28,7 +28,7 @@ export type CardActionsProps = {
 const CardActions = ({ actions = [], actionsContainerStyle, children }: CardActionsProps) => {
   return (
     <Fragment>
-      <Divider style={StyleSheet.flatten({ marginTop: 15 })} />
+      <Divider style={StyleSheet.flatten({ marginTop: 15 })} lineStyle={{ backgroundColor: '#e6e6e6' }} />
       {React.isValidElement(children) ? React.cloneElement(children) : null}
       <View style={[styles.actionsContainer, actionsContainerStyle]}>
         {map(actions, (item, index) => {

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

@@ -18,7 +18,7 @@ const CardTitle = ({ title, titleStyle, children }: CardTitleProps) => {
         </Text>
       )}
       {React.isValidElement(children) ? React.cloneElement(children) : null}
-      <Divider style={StyleSheet.flatten([styles.divider])} />
+      <Divider style={StyleSheet.flatten([styles.divider])} lineStyle={{ backgroundColor: '#e6e6e6' }} />
     </View>
   );
 };

packages/core/src/Card/README.md

@@ -116,6 +116,11 @@ export interface CardProps {
   onPress?: TouchableOpacityProps['onPress'];
   /** 长按下卡片时的动作（可选） */
   onLongPress?: TouchableOpacityProps['onLongPress'];
+  /** 自定义选中样式 */
+  selectedStyle?: {
+    icon?: React.ReactNode;
+    style?: ViewStyle
+  }
 }
 ```
 

packages/core/src/Card/index.tsx

@@ -23,6 +23,10 @@ export type CardProps = {
   children?: React.ReactNode;
   onPress?: TouchableOpacityProps['onPress'];
   onLongPress?: TouchableOpacityProps['onLongPress'];
+  selectedStyle?: {
+    icon?: React.ReactNode;
+    style?: ViewStyle;
+  };
 };
 
 const Card = ({
@@ -33,6 +37,10 @@ const Card = ({
   selected,
   onPress,
   onLongPress,
+  selectedStyle = {
+    icon: <Icon xml={checked} size={30} />,
+    style: {},
+  },
   ...attributes
 }: CardProps) => {
   const Container: any = onPress || onLongPress ? TouchableOpacity : View;
@@ -53,13 +61,12 @@ const Card = ({
           {
             opacity: 1,
             borderRadius: getBorderRadius(),
+            ...selectedStyle?.style,
           },
         ]}
         pointerEvents="none"
       >
-        <View style={styles.selectedIndicator}>
-          <Icon xml={checked} size={30} />
-        </View>
+        <View style={styles.selectedIndicator}>{selectedStyle?.icon}</View>
       </Animated.View>
     );
   };