feat(grid): 新增 Grid 支持自定义Icon,修复Grid 的问题

jd-opensource · Oct 15, 2018 · e73374b · e73374b
1 parent 578859a
commit e73374b
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 33 deletions.
diff --git a/@types/base.d.ts b/@types/base.d.ts
@@ -1,9 +1,11 @@
+import { CSSProperties } from 'react'
+
 export interface AtComponent {
   className?: string | string[]
-  customStyle?: string | object
+  customStyle?: string | CSSProperties
 }
 
-export interface AtIconBaseProps {
+export interface AtIconBaseProps extends AtComponent {
   value: string
 
   color?: string

diff --git a/@types/grid.d.ts b/@types/grid.d.ts
@@ -1,17 +1,17 @@
 import { MouseEvent, ComponentClass } from 'react'
 import { BaseEvent } from '@tarojs/components/types/common'
 
-import AtComponent from './base'
+import AtComponent, { AtIconBaseProps } from './base'
 
 export interface Item {
-  icon?: string
   image?: string
+
   value?: string
-  iconSize?: number
-  iconColor?: string
+
+  iconInfo?: AtIconBaseProps
 }
 
-export interface AtGridProps extends AtComponent{
+export interface AtGridProps extends AtComponent {
   data: Array<Item>
 
   columnNum?: number

diff --git a/docs/markdown/grid.md b/docs/markdown/grid.md
@@ -129,12 +129,12 @@ import { AtGrid } from "taro-ui"
 
 ## AtGrid 参数
 
-| 参数      | 说明           | 类型                              | 可选值 | 默认值  |
-| --------- | -------------- | --------------------------------- | ------ | ------- |
-| data      | 宫格布局数据源 | [{'{ icon? , value? , image? }'}] | -      | -       |
-| mode      | 元素的标题     | String                            | -      | -       |
-| hasBorder | 是否有边框     | Boolean                           | -      | `false` |
-| columnNum | 每一列有多少个 | Number                            | -      | -       |
+| 参数      | 说明           | 类型                                  | 可选值 | 默认值  |
+| --------- | -------------- | ------------------------------------- | ------ | ------- |
+| data      | 宫格布局数据源 | [{'{ iconInfo? , value? , image? }'}] | -      | -       |
+| mode      | 元素的标题     | String                                | -      | -       |
+| hasBorder | 是否有边框     | Boolean                               | -      | `false` |
+| columnNum | 每一列有多少个 | Number                                | -      | -       |
 
 ## AtGrid 事件
 

diff --git a/src/components/grid/__snapshots__/index.test.js.snap b/src/components/grid/__snapshots__/index.test.js.snap
diff --git a/src/components/grid/index.js b/src/components/grid/index.js
@@ -4,6 +4,7 @@ import { View, Text, Image } from '@tarojs/components'
 import _chunk from 'lodash/chunk'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
+import _isObject from 'lodash/isObject'
 import _isFunction from 'lodash/isFunction'
 
 import AtIcon from '../icon/index'
@@ -39,13 +40,19 @@ export default class AtGrid extends AtComponent {
 
     return (
       <View className={classNames('at-grid', this.props.className)}>
+        {this.props.children}
         {gridGroup.map((item, i) => (
           <View className='at-grid__flex' key={i}>
             {item.map((childItem, index) => (
               <View
                 key={index}
-                className={bodyClass}
+                className={classNames(bodyClass, {
+                  'at-grid-item--last': index === columnNum - 1
+                })}
                 onClick={this.handleClick.bind(this, childItem, index, i)}
+                style={{
+                  flex: `0 0 ${100 / columnNum}%`
+                }}
               >
                 <View className='at-grid-item__content'>
                   <View className='at-grid-item__content-inner'>
@@ -57,12 +64,15 @@ export default class AtGrid extends AtComponent {
                           mode='scaleToFill'
                         />
                       )}
-                      {childItem.icon &&
+                      {_isObject(childItem.iconInfo) &&
                         !childItem.image && (
                         <AtIcon
-                          value={childItem.icon}
-                          color={childItem.iconColor}
-                          size={childItem.iconSize}
+                          size={childItem.iconInfo.size}
+                          value={childItem.iconInfo.value}
+                          color={childItem.iconInfo.color}
+                          className={childItem.iconInfo.className}
+                          customStyle={childItem.iconInfo.customStyle}
+                          prefixClass={childItem.iconInfo.prefixClass}
                         />
                       )}
                     </View>
@@ -94,11 +104,16 @@ AtGrid.propTypes = {
   columnNum: PropTypes.number,
   data: PropTypes.arrayOf(
     PropTypes.shape({
-      icon: PropTypes.string,
       image: PropTypes.string,
       value: PropTypes.string,
-      iconSize: PropTypes.number,
-      iconColor: PropTypes.string
+      iconInfo: PropTypes.shape({
+        size: PropTypes.number,
+        value: PropTypes.string,
+        color: PropTypes.string,
+        prefixClass: PropTypes.string,
+        customStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+        className: PropTypes.oneOfType([PropTypes.array, PropTypes.string])
+      })
     })
   )
 }
diff --git a/src/components/grid/index.scss b/src/components/grid/index.scss
@@ -11,7 +11,7 @@ $gird-img-size-sm: 50px;
     position: relative;
     @include border-thin-bottom($width: 1px);
 
-    &:not(:last-child)::after {
+    &::after {
       content: " ";
       position: absolute;
       right: 0;
@@ -51,6 +51,12 @@ $gird-img-size-sm: 50px;
   }
 }
 
+.at-grid-item--last {
+  &::after {
+    content: initial;
+  }
+}
+
 .at-grid-item--rect .content-inner {
   &__text {
     margin-left: 12px;

diff --git a/src/components/grid/index.test.js b/src/components/grid/index.test.js
@@ -24,6 +24,14 @@ const IMAGE_DATA = [
     image:
       'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png',
     value: '新品首发'
+  },
+  {
+    value: '支持Icon',
+    iconInfo: {
+      size: 30,
+      color: 'red',
+      value: 'bookmark'
+    }
   }
 ]
 

diff --git a/src/pages/layout/grid/index.js b/src/pages/layout/grid/index.js
@@ -41,9 +41,12 @@ export default class GridPage extends Taro.Component {
           value: '领京豆'
         },
         {
-          image:
-            'https://img30.360buyimg.com/jdphoto/s72x72_jfs/t5770/97/5184449507/2423/294d5f95/595c3b4dNbc6bc95d.png',
-          value: '手机馆'
+          value: '支持Icon',
+          iconInfo: {
+            size: 30,
+            color: 'red',
+            value: 'bookmark'
+          }
         }
       ]
     }
@@ -72,7 +75,17 @@ export default class GridPage extends Taro.Component {
             <View className='panel__title'>矩形案例</View>
             <View className='panel__content'>
               <View className='example-item'>
-                <AtGrid mode='rect' data={this.state.data} />
+                <AtGrid
+                  mode='rect'
+                  data={[
+                    ...this.state.data,
+                    {
+                      image:
+                        'https://img30.360buyimg.com/jdphoto/s72x72_jfs/t5770/97/5184449507/2423/294d5f95/595c3b4dNbc6bc95d.png',
+                      value: '手机馆'
+                    }
+                  ]}
+                />
               </View>
             </View>
           </View>
@@ -81,7 +94,18 @@ export default class GridPage extends Taro.Component {
             <View className='panel__title'>没有边框</View>
             <View className='panel__content'>
               <View className='example-item'>
-                <AtGrid mode='rect' data={this.state.data} hasBorder={false} />
+                <AtGrid
+                  mode='rect'
+                  data={[
+                    ...this.state.data,
+                    {
+                      image:
+                        'https://img30.360buyimg.com/jdphoto/s72x72_jfs/t5770/97/5184449507/2423/294d5f95/595c3b4dNbc6bc95d.png',
+                      value: '手机馆'
+                    }
+                  ]}
+                  hasBorder={false}
+                />
               </View>
             </View>
           </View>