fix: 使 AtGridItem 支持自定义字段 close #983

Author: Garfield550

src/pages/layout/grid/index.tsx

@@ -1,28 +1,16 @@
-import { AtGrid } from 'taro-ui';
-import { AtIconProps } from 'types/icon';
-
-import { View } from '@tarojs/components';
-import Taro from '@tarojs/taro';
-
-import DocsHeader from '../../components/doc-header';
+import { AtGrid } from 'taro-ui'
+import { AtGridItem } from 'types/grid'
+import { View } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import DocsHeader from '../../components/doc-header'
 import './index.scss'
 
-type DataItem = {
-  value: string
-  image?: string
-  iconInfo?: AtIconProps
-}
-
 interface GridPageState {
-  data: DataItem[]
+  data: AtGridItem[]
 }
 
 export default class GridPage extends Taro.Component<{}, GridPageState> {
-  public config: Taro.PageConfig = {
-    navigationBarTitleText: 'Taro UI'
-  }
-
-  public constructor () {
+  public constructor() {
     super(...arguments)
     this.state = {
       data: [
@@ -57,17 +45,26 @@ export default class GridPage extends Taro.Component<{}, GridPageState> {
             size: 30,
             color: 'red',
             value: 'bookmark'
-          }
+          },
+          url: '支持自定义字段'
         }
       ]
     }
   }
 
-  private handleClick = (value: DataItem, index: number): void => {
-    console.log(value, index)
+  public config: Taro.PageConfig = {
+    navigationBarTitleText: 'Taro UI'
+  }
+
+  private handleClick = (value: AtGridItem, index: number): void => {
+    Taro.showModal({
+      title: '提示',
+      content: `Value: ${value}, Index: ${index}`,
+      showCancel: false
+    })
   }
 
-  public render (): JSX.Element {
+  public render(): JSX.Element {
     return (
       <View className='page'>
         <DocsHeader title='Grid 栅格' />

types/grid.d.ts

@@ -1,9 +1,8 @@
-import { MouseEvent, ComponentClass } from 'react'
+import { ComponentClass } from 'react'
 import { CommonEvent } from '@tarojs/components/types/common'
-
 import AtComponent, { AtIconBaseProps } from './base'
 
-export interface Item {
+export interface AtGridItem {
   /**
    * 宫格图片
    */
@@ -16,13 +15,17 @@ export interface Item {
    * 宫格图标
    */
   iconInfo?: AtIconBaseProps
+  /**
+   * 允许用户扩充 Item 字段
+   */
+  [key: string]: any
 }
 
 export interface AtGridProps extends AtComponent {
   /**
    * 宫格布局数据源
    */
-  data: Array<Item>
+  data: Array<AtGridItem>
   /**
    * 每一列有多少个
    */
@@ -40,7 +43,7 @@ export interface AtGridProps extends AtComponent {
   /**
    * 点击宫格触发的事件
    */
-  onClick?: (item: Item, index: number, event: CommonEvent) => void
+  onClick?: (item: AtGridItem, index: number, event: CommonEvent) => void
 }
 
 declare const AtGrid: ComponentClass<AtGridProps>