feat: 为Card组件的HeaderContent和HeaderExtra添加Wrap style，便于定制 fixes #395

* 为Card组件的HeaderContent和HeaderExtra添加Wrap style，便于定制 * 添加测试代码，并通过测试
ant-design · Mar 15, 2019 · 29754a8 · 29754a8
1 parent a809844
commit 29754a8
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 2 deletions.
diff --git a/components/card/CardHeader.tsx b/components/card/CardHeader.tsx
@@ -8,7 +8,9 @@ export interface CardHeaderPropsType
   extends WithThemeStyles<
     Pick<
       CardStyle,
+      | 'headerContentWrap'
       | 'headerContent'
+      | 'headerExtraWrap'
       | 'headerExtra'
       | 'headerImage'
       | 'headerTitle'
@@ -46,14 +48,14 @@ export default class CardHeader extends React.Component<CardHeaderProps, any> {
         {s => {
           const titleDom =
             title === undefined ? null : React.isValidElement(title) ? (
-              <View style={{ flex: 1 }}>{title}</View>
+              <View style={s.headerContentWrap}>{title}</View>
             ) : (
               <Text style={s.headerContent}>{title}</Text>
             );
 
           const extraDom =
             extra === undefined ? null : React.isValidElement(extra) ? (
-              <View style={{ flex: 1 }}>{extra}</View>
+              <View style={s.headerExtraWrap}>{extra}</View>
             ) : (
               <Text style={[s.headerExtra]}>{extra}</Text>
             );

diff --git a/components/card/__tests__/__snapshots__/demo.test.js.snap b/components/card/__tests__/__snapshots__/demo.test.js.snap
@@ -77,12 +77,18 @@ exports[`renders ./components/card/demo/basic.tsx correctly 1`] = `
               "flex": 1,
               "fontSize": 17,
             },
+            "headerContentWrap": Object {
+              "flex": 1,
+            },
             "headerExtra": Object {
               "color": "#888888",
               "flex": 1,
               "fontSize": 17,
               "textAlign": "right",
             },
+            "headerExtraWrap": Object {
+              "flex": 1,
+            },
             "headerImage": Object {
               "marginRight": 5,
             },
@@ -211,12 +217,18 @@ exports[`renders ./components/card/demo/basic.tsx correctly 1`] = `
               "flex": 1,
               "fontSize": 17,
             },
+            "headerContentWrap": Object {
+              "flex": 1,
+            },
             "headerExtra": Object {
               "color": "#888888",
               "flex": 1,
               "fontSize": 17,
               "textAlign": "right",
             },
+            "headerExtraWrap": Object {
+              "flex": 1,
+            },
             "headerImage": Object {
               "marginRight": 5,
             },
@@ -307,12 +319,18 @@ exports[`renders ./components/card/demo/basic.tsx correctly 1`] = `
               "flex": 1,
               "fontSize": 17,
             },
+            "headerContentWrap": Object {
+              "flex": 1,
+            },
             "headerExtra": Object {
               "color": "#888888",
               "flex": 1,
               "fontSize": 17,
               "textAlign": "right",
             },
+            "headerExtraWrap": Object {
+              "flex": 1,
+            },
             "headerImage": Object {
               "marginRight": 5,
             },
@@ -439,12 +457,18 @@ exports[`renders ./components/card/demo/basic.tsx correctly 1`] = `
             "flex": 1,
             "fontSize": 17,
           },
+          "headerContentWrap": Object {
+            "flex": 1,
+          },
           "headerExtra": Object {
             "color": "#888888",
             "flex": 1,
             "fontSize": 17,
             "textAlign": "right",
           },
+          "headerExtraWrap": Object {
+            "flex": 1,
+          },
           "headerImage": Object {
             "marginRight": 5,
           },
@@ -573,12 +597,18 @@ exports[`renders ./components/card/demo/basic.tsx correctly 1`] = `
             "flex": 1,
             "fontSize": 17,
           },
+          "headerContentWrap": Object {
+            "flex": 1,
+          },
           "headerExtra": Object {
             "color": "#888888",
             "flex": 1,
             "fontSize": 17,
             "textAlign": "right",
           },
+          "headerExtraWrap": Object {
+            "flex": 1,
+          },
           "headerImage": Object {
             "marginRight": 5,
           },
@@ -669,12 +699,18 @@ exports[`renders ./components/card/demo/basic.tsx correctly 1`] = `
             "flex": 1,
             "fontSize": 17,
           },
+          "headerContentWrap": Object {
+            "flex": 1,
+          },
           "headerExtra": Object {
             "color": "#888888",
             "flex": 1,
             "fontSize": 17,
             "textAlign": "right",
           },
+          "headerExtraWrap": Object {
+            "flex": 1,
+          },
           "headerImage": Object {
             "marginRight": 5,
           },

diff --git a/components/card/style/index.tsx b/components/card/style/index.tsx
@@ -7,7 +7,9 @@ export interface CardStyle {
   headerWrap: ViewStyle;
   headerTitle: ViewStyle;
   headerImage: ImageStyle;
+  headerContentWrap: ViewStyle;
   headerContent: TextStyle;
+  headerExtraWrap: ViewStyle;
   headerExtra: TextStyle;
   body: ViewStyle;
   footerWrap: ViewStyle;
@@ -45,11 +47,17 @@ export default (theme: Theme) =>
     headerImage: {
       marginRight: theme.h_spacing_sm,
     },
+    headerContentWrap: {
+      flex: 1,
+    },
     headerContent: {
       color: theme.color_text_base,
       fontSize: theme.font_size_heading,
       flex: 1,
     },
+    headerExtraWrap: {
+      flex: 1,
+    },
     headerExtra: {
       flex: 1,
       fontSize: theme.font_size_heading,