fix: segmented-control without active style, close #1832

ant-design · Sep 12, 2017 · fa8a284 · fa8a284
1 parent 5881ba4
commit fa8a284
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 2 deletions.
diff --git a/components/segmented-control/__tests__/__snapshots__/demo.test.js.snap b/components/segmented-control/__tests__/__snapshots__/demo.test.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;"
       />
       Segment1
     </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;"
       />
       Segment2
     </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;"
       />
       Segment3
     </div>

diff --git a/components/segmented-control/index.tsx b/components/segmented-control/index.tsx
@@ -62,6 +62,10 @@ export default class SegmentedControl extends React.Component<SegmentedControlPr
       borderColor: tintColor,
     };
 
+    const activeInnerStyle: any = tintColor ? {
+      backgroundColor: tintColor,
+    } : {};
+
     return (
       <TouchFeedback
         key={idx}
@@ -76,7 +80,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>
       </TouchFeedback>

diff --git a/components/segmented-control/segmented.android.tsx b/components/segmented-control/segmented.android.tsx
@@ -27,7 +27,6 @@ export default class SegmentedControl extends React.Component<ISegmentControlNat
     super(props);
     this.state = {
       selectedIndex: props.selectedIndex,
-      active: false,
     };
   }
 

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