update grid

ant-design · Aug 29, 2016 · d5d0323 · d5d0323
1 parent 0d7672e
commit d5d0323
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 38 deletions.
diff --git a/components/grid/demo/carousel-border.md b/components/grid/demo/carousel-border.md
@@ -57,7 +57,6 @@ const GridExample = React.createClass({
         data={data3}
         isCarousel
         onClick={(el, index) => { alert(index); }}
-        needActive={false}
       />
     </div>);
   },

diff --git a/components/grid/index.web.tsx b/components/grid/index.web.tsx
@@ -20,22 +20,15 @@ export interface GridProps {
   data?: Array<DataItem>;
   onClick?: Function;
   hasLine?: boolean;
-  needActive?: boolean;
   isCarousel?: boolean;
 }
 
-export interface GridState {
-  hover: boolean;
-  hoverIndex?: number;
-}
-
-export default class Grid extends React.Component<GridProps, GridState> {
+export default class Grid extends React.Component<GridProps, any> {
   static propTypes = {
     prefixCls: PropTypes.string,
     data: PropTypes.array,
     onClick: PropTypes.func,
     hasLine: PropTypes.bool,
-    needActive: PropTypes.bool,
     isCarousel: PropTypes.bool,
   };
 
@@ -44,42 +37,17 @@ export default class Grid extends React.Component<GridProps, GridState> {
     data: [],
     onClick: noop,
     hasLine: true,
-    needActive: true,
     isCarousel: false,
   };
 
   clientWidth: any;
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      hover: false,
-    };
-  }
-
   componentWillMount() {
     this.clientWidth = document.documentElement.clientWidth;
   }
 
-  onTouchStart = (index) => {
-    if (this.props.needActive) {
-      this.setState({
-        hover: true,
-        hoverIndex: index,
-      });
-    }
-  };
-
-  onTouchEnd = () => {
-    if (this.props.needActive) {
-      this.setState({
-        hover: false,
-      });
-    }
-  };
-
   render() {
-    let { className, data, prefixCls, hasLine, isCarousel, needActive } = this.props;
+    let { className, data, prefixCls, hasLine, isCarousel } = this.props;
 
     const wrapCls = classNames({
       [prefixCls]: true,
@@ -88,7 +56,7 @@ export default class Grid extends React.Component<GridProps, GridState> {
     });
 
     const itemCls = classNames({
-      [`${prefixCls}-item-hover`]: needActive,
+      [`${prefixCls}-item`]: true,
     });
 
     const dataLength = data.length;
@@ -107,10 +75,11 @@ export default class Grid extends React.Component<GridProps, GridState> {
       let flexContent = [];
       for (let j = 0; j < 4; j++) {
         if (i * 4 + j < dataLength) {
+
           flexContent.push(<Flex.Item
             className={itemCls}
             style={flexItemStyle}
-            onClick={() => {this.props.onClick(data[i * 4 + j], (i * 4 + j));}}
+            onClick={() => { this.props.onClick(data[i * 4 + j], (i * 4 + j)); }}
             key={`griditem-${i * 4 + j}`}
           >
             <div className={`${prefixCls}-icon`} style={{ backgroundImage: `url(${data[i * 4 + j].icon})` }} />

diff --git a/components/grid/style/index.less b/components/grid/style/index.less
@@ -23,7 +23,7 @@
         color: @color-text-base;
         text-align: center;
       }
-      &.@{gridPrefixCls}-item-hover {
+      &.@{gridPrefixCls}-item {
         &:active {
           background-color: @fill-tap;
         }