fix: segmented-control without active style in version 1.x, ref #1832

ant-design · Sep 12, 2017 · c88610e · c88610e
1 parent cadc4b6
commit c88610e
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 9 deletions.
diff --git a/components/segmented-control/__tests__/__snapshots__/demo.test.web.js.snap b/components/segmented-control/__tests__/__snapshots__/demo.test.web.js.snap
@@ -137,6 +137,7 @@ exports[`renders ./components/segmented-control/demo/basic.md correctly 1`] = `
     >
       <div
         class="am-segment-item-inner"
+        style="background-color:#ff0000;"
       />
       切换一
     </div>
@@ -149,6 +150,7 @@ exports[`renders ./components/segmented-control/demo/basic.md correctly 1`] = `
     >
       <div
         class="am-segment-item-inner"
+        style="background-color:#ff0000;"
       />
       切换二
     </div>
@@ -161,6 +163,7 @@ exports[`renders ./components/segmented-control/demo/basic.md correctly 1`] = `
     >
       <div
         class="am-segment-item-inner"
+        style="background-color:#ff0000;"
       />
       切换三
     </div>

diff --git a/components/segmented-control/index.web.tsx b/components/segmented-control/index.web.tsx
@@ -63,6 +63,10 @@ export default class SegmentedControl extends React.Component<SegmentedControlPr
       borderColor: tintColor,
     };
 
+    const activeInnerStyle: any = tintColor ? {
+      backgroundColor: tintColor,
+    } : {};
+
     return (
       <Touchable
         key={idx}
@@ -77,7 +81,7 @@ export default class SegmentedControl extends React.Component<SegmentedControlPr
           aria-disabled={disabled}
           onClick={disabled ? undefined : (e) => this.onClick(e, idx, value)}
         >
-          <div className={`${prefixCls}-item-inner`} />
+          <div className={`${prefixCls}-item-inner`} style={activeInnerStyle} />
           {value}
         </div>
       </Touchable>

diff --git a/components/segmented-control/segmented.android.tsx b/components/segmented-control/segmented.android.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
-import { View, Text, TouchableWithoutFeedback } from 'react-native';
+import { View, Text, TouchableHighlight } from 'react-native';
+import setNormalizedColorAlpha from 'react-native/Libraries/StyleSheet/setNormalizedColorAlpha';
+import normalizeColor from 'react-native/Libraries/StyleSheet/normalizeColor';
 import SegmentedControlProps from './PropsType';
 import AndroidStyle, { ISegmentControlStyle } from './style/';
 
@@ -68,14 +70,23 @@ export default class SegmentedControl extends React.Component<ISegmentControlNat
         borderColor: tintColor,
       }];
 
+      const underlayColor = idx === selectedIndex ? tintColor : setNormalizedColorAlpha(
+        normalizeColor(tintColor), 0.3,
+      );
+
       return (
-        <TouchableWithoutFeedback key={idx} onPress={(e?: any) => this.onPress(e, idx, value)}>
-          <View style={itemStyle} >
-            <Text style={[styles.itemText, { color: idx === selectedIndex ? '#fff' : tintColor }]}>
-              {value}
-            </Text>
-          </View>
-        </TouchableWithoutFeedback>
+        <TouchableHighlight
+          key={idx}
+          disabled={disabled}
+          onPress={(e?: any) => this.onPress(e, idx, value)}
+          underlayColor={underlayColor}
+          style={itemStyle}
+          activeOpacity={1}
+        >
+          <Text style={[styles.itemText, { color: idx === selectedIndex ? '#fff' : tintColor }]}>
+            {value}
+          </Text>
+        </TouchableHighlight>
       );
     });
 

diff --git a/components/segmented-control/style/index.less b/components/segmented-control/style/index.less
@@ -57,6 +57,7 @@
         width: 100%;
         opacity: 0.1;
         transition: background .2s;
+        background-color: @segmented-control-color;
       }
     }
   }