fix(Grid): null item should not have touch feedback. close #1455

ant-design · Jun 29, 2017 · f7314a5 · f7314a5
1 parent 9cc1ba6
commit f7314a5
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 10 deletions.
diff --git a/components/grid/__tests__/__snapshots__/demo.test.web.js.snap b/components/grid/__tests__/__snapshots__/demo.test.web.js.snap
@@ -439,7 +439,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
         </div>
       </div>
       <div
-        class="am-flexbox-item am-grid-item"
+        class="am-flexbox-item am-grid-item am-grid-null-item"
         style="width:25%;"
       >
         <div
@@ -451,7 +451,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
         </div>
       </div>
       <div
-        class="am-flexbox-item am-grid-item"
+        class="am-flexbox-item am-grid-item am-grid-null-item"
         style="width:25%;"
       >
         <div
@@ -463,7 +463,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
         </div>
       </div>
       <div
-        class="am-flexbox-item am-grid-item"
+        class="am-flexbox-item am-grid-item am-grid-null-item"
         style="width:25%;"
       >
         <div
@@ -694,7 +694,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
         </div>
       </div>
       <div
-        class="am-flexbox-item am-grid-item"
+        class="am-flexbox-item am-grid-item am-grid-null-item"
         style="width:25%;"
       >
         <div
@@ -706,7 +706,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
         </div>
       </div>
       <div
-        class="am-flexbox-item am-grid-item"
+        class="am-flexbox-item am-grid-item am-grid-null-item"
         style="width:25%;"
       >
         <div
@@ -718,7 +718,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
         </div>
       </div>
       <div
-        class="am-flexbox-item am-grid-item"
+        class="am-flexbox-item am-grid-item am-grid-null-item"
         style="width:25%;"
       >
         <div
@@ -949,7 +949,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
         </div>
       </div>
       <div
-        class="am-flexbox-item am-grid-item"
+        class="am-flexbox-item am-grid-item am-grid-null-item"
         style="width:25%;"
       >
         <div
@@ -961,7 +961,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
         </div>
       </div>
       <div
-        class="am-flexbox-item am-grid-item"
+        class="am-flexbox-item am-grid-item am-grid-null-item"
         style="width:25%;"
       >
         <div
@@ -973,7 +973,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
         </div>
       </div>
       <div
-        class="am-flexbox-item am-grid-item"
+        class="am-flexbox-item am-grid-item am-grid-null-item"
         style="width:25%;"
       >
         <div

diff --git a/components/grid/index.web.tsx b/components/grid/index.web.tsx
@@ -101,7 +101,7 @@ export default class Grid extends React.Component<GridProps, any> {
           itemEl = (
             <Flex.Item
               key={`griditem-${dataIndex}`}
-              className={`${prefixCls}-item`}
+              className={`${prefixCls}-item ${prefixCls}-null-item`}
               style={colStyle}
             >
               <div className={`${prefixCls}-item-content`}>

diff --git a/components/grid/style/index.less b/components/grid/style/index.less
@@ -18,6 +18,9 @@
         &:active {
           background-color: @fill-tap;
         }
+        &.@{gridPrefixCls}-null-item:active {
+         background-color: @fill-base;
+        }
       }
 
       &.@{gridPrefixCls}-item:before {