improve grid, fix #403

ant-design · Nov 4, 2016 · 839fe35 · 839fe35
1 parent 523f7d5
commit 839fe35
Show file tree

Hide file tree

Showing 10 changed files with 182 additions and 528 deletions.
diff --git a/components/grid/PropsType.tsx b/components/grid/PropsType.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+export interface DataItem {
+  icon?: any;
+  text?: any;
+  [key: string]: any;
+}
+
+export interface GridProps {
+  data?: Array<DataItem | undefined>;
+  hasLine?: boolean;
+  columnNum?: number;
+  isCarousel?: boolean;
+  carouselMaxRow?: number;
+  onClick?: (dataItem: DataItem | undefined, itemIndex: number) => void;
+  /** web only */
+  renderItem?: (dataItem: DataItem | undefined, itemIndex: number) => React.ReactElement<any>;
+  prefixCls?: string;
+  className?: string;
+  style?: React.CSSProperties;
+}
diff --git a/components/grid/demo/basic.md b/components/grid/demo/basic.md
@@ -1,59 +1,43 @@
 ---
 order: 0
-title: 基本
+title: 示例
 ---
 
 ````jsx
 import { Grid } from 'antd-mobile';
 
-const data1 = [
-  {
-    icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
-    text: '名字',
-    link: 'hehe',
-  }, {
-    icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
-    text: '名字',
-    link: 'hehe',
-  }, {
-    icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
-    text: '名字',
-    link: 'hehe',
-  }, {
-    icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
-    text: '名字',
-    link: 'hehe',
-  }, {
-    icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
-    text: '名字',
-    link: 'hehe',
-  }, {
-    icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
-    text: '名字',
-    link: 'hehe',
-  }, {
-    icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
-    text: '名字',
-    link: 'hehe',
-  }, {
-    icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
-    text: '名字',
-    link: 'hehe',
-  }, {
-    icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
-    text: '名字',
-    link: 'hehe',
-  }, {
-    icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
-    text: '名字',
-    link: 'hehe',
-  },
-];
+const data = Array.from(new Array(9)).map((_val, i) => ({
+  icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
+  text: `名字${i}`,
+}));
+
+const data1 = Array.from(new Array(5)).map((_val, i) => ({
+  img: 'https://zos.alipayobjects.com/rmsportal/wIjMDnsrDoPPcIV.png',
+  text: `名字${i}`,
+}));
 
 const GridExample = React.createClass({
   render() {
     return (<div>
-      <Grid data={data1} />
+      <Grid data={data} />
+
+      <p style={{ margin: 10, color: '#999' }}>无边线</p>
+      <Grid data={data} columnNum={3} hasLine={false} />
+
+      <p style={{ margin: 10, color: '#999' }}>走马灯</p>
+      <Grid data={data} columnNum={3} isCarousel onClick={(_el, index) => alert(index)} />
+
+      <p style={{ margin: 10, color: '#999' }}>自定义格子内容</p>
+      <Grid data={data1} columnNum={3} hasLine={false}
+        renderItem={(dataItem, index) => (
+          <div style={{ margin: '16px', background: '#f7f7f7', textAlign: 'center' }}>
+            <div style={{ background: 'rgba(0, 0, 0, 0.1)', padding: '8px' }}>
+              <span>{index + 1}.{dataItem.text}</span>
+            </div>
+            <img src={dataItem.img} style={{ width: '80%', margin: '12px' }} />
+          </div>
+        )}
+      />
     </div>);
   },
 });

diff --git a/components/grid/demo/basic.tsx b/components/grid/demo/basic.tsx
@@ -1,54 +1,22 @@
 import React from 'react';
+import { View, Text } from 'react-native';
 import { Grid } from 'antd-mobile';
 
-const data1 = [
-  {
-    icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
-    text: '名字',
-    link: 'hehe',
-  }, {
-    icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
-    text: '名字',
-    link: 'hehe',
-  }, {
-    icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
-    text: '名字',
-    link: 'hehe',
-  }, {
-    icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
-    text: '名字',
-    link: 'hehe',
-  }, {
-    icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
-    text: '名字',
-    link: 'hehe',
-  }, {
-    icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
-    text: '名字',
-    link: 'hehe',
-  }, {
-    icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
-    text: '名字',
-    link: 'hehe',
-  }, {
-    icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
-    text: '名字',
-    link: 'hehe',
-  }, {
-    icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
-    text: '名字',
-    link: 'hehe',
-  }, {
-    icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
-    text: '名字',
-    link: 'hehe',
-  },
-];
+const data = Array.from(new Array(9)).map((_val, i) => ({
+  icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
+  text: `名字${i}`,
+}));
 
 export default class BasicGridExample extends React.Component<any, any> {
   render() {
-    return (
-      <Grid data={data1} />
-    );
+    return (<View>
+      <View style={[{ margin: 10 }]}><Text>简单示例</Text></View>
+      <View style={[{ padding: 10 }]}>
+        <Grid data={data} hasLine={false} />
+      </View>
+
+      <View style={[{ margin: 10 }]}><Text>走马灯</Text></View>
+      <Grid data={data} columnNum={3} isCarousel onClick={(_el, index) => alert(index)} />
+    </View>);
   }
 }
diff --git a/components/grid/demo/carousel-border.md b/components/grid/demo/carousel-border.md
diff --git a/components/grid/demo/carousel-noborder.md b/components/grid/demo/carousel-noborder.md
diff --git a/components/grid/demo/custom.md b/components/grid/demo/custom.md