style(CardCollapse): 优化样式 #385 #387 #388 (#390)

matuancc · web-flow · commit 51946fee8a1d · 2022-08-20T16:03:59.000+08:00
diff --git a/example/examples/src/routes/Divider/index.tsx b/example/examples/src/routes/Divider/index.tsx
@@ -18,7 +18,7 @@ export default class DividerView extends React.Component<DividerViewProps> {
         <Layout>
           <Header title={title} description={description} />
           <Body>
-            <Card title="横向分割线">
+            <Card title="横向分割线" style={{backgroundColor: '#ffffff'}}>
               <Text>分割线</Text>
               <Divider label="OR" />
               <Text>分割线</Text>
@@ -28,24 +28,16 @@ export default class DividerView extends React.Component<DividerViewProps> {
               <Text>分割线</Text>
             </Card>
 
-            <Card title="分割线标题位置">
+            <Card title="分割线标题位置" style={{backgroundColor: '#ffffff'}}>
               <Text>分割线</Text>
-              <Divider
-                label="left"
-                orientation="left"
-                labelStyle={{fontWeight: 'bold'}}
-              />
+              <Divider label="left" orientation="left" labelStyle={{fontWeight: 'bold'}} />
               <Text>分割线</Text>
               <Divider label="center" labelStyle={{fontWeight: 'bold'}} />
               <Text>分割线</Text>
-              <Divider
-                label="right"
-                orientation="right"
-                labelStyle={{fontWeight: 'bold'}}
-              />
+              <Divider label="right" orientation="right" labelStyle={{fontWeight: 'bold'}} />
             </Card>
 
-            <Card title="纵向分割线">
+            <Card title="纵向分割线" style={{backgroundColor: '#ffffff'}}>
               <View style={{height: 200}}>
                 <Divider type="vertical" label="OR" />
               </View>
diff --git a/packages/core/src/CardCollapse/index.tsx b/packages/core/src/CardCollapse/index.tsx
@@ -231,17 +231,19 @@ export default function CardCollapse(props: CardCollapseProps) {
           style={[contentContainerStyle, styles.card, { borderRadius: itemBorderRadius }]}
           onPress={() => disablePresses && onItemPress(index)}
         >
-          <Animated.View style={index !== 0 ? { opacity: animatedContentOpacity } : undefined} collapsable={false}>
-            {item}
-          </Animated.View>
+          <TouchableOpacity onPress={close}>
+            <Animated.View style={index !== 0 ? { opacity: animatedContentOpacity } : undefined} collapsable={false}>
+              {item}
+            </Animated.View>
+          </TouchableOpacity>
         </Container>
       </Animated.View>
     );
   };
   return (
     <View style={containerStyle}>
       <View style={{ marginBottom: PEEP * 3 }}>
-        <Animated.View
+        {/* <Animated.View
           style={{
             position: 'absolute',
             right: 0,
@@ -254,7 +256,7 @@ export default function CardCollapse(props: CardCollapseProps) {
               <Icon xml={down} size={30} />
             </TouchableOpacity>
           )}
-        </Animated.View>
+        </Animated.View> */}
         {React.Children.map(children, (item, index) => {
           return renderItem(item, index);
         })}
diff --git a/packages/core/src/List/Item.tsx b/packages/core/src/List/Item.tsx
@@ -59,7 +59,7 @@ export default class ListItem extends React.PureComponent<ListItemProps> {
           })}
         </View>
         {extra && (
-          <View style={{ paddingRight: 10 }}>
+          <View style={{ paddingRight: 10, maxWidth: 50 }}>
             {typeof extra === 'string' ? (
               <Text style={extraStyle}>{extra}</Text>
             ) : (
