fix(components): 修复组件中 this 丢失的问题 完善组件的 defaultProps 和 d.ts 的逻辑

@types/activity-indicator.d.ts

@@ -2,13 +2,13 @@ import { MouseEvent, ComponentClass } from 'react'
 import { BaseEventFunction } from '@tarojs/components/types/common'
 
 export interface AtActivityIndicatorProps {
-  size: number
+  size?: number
 
-  mode: 'center' | 'normal'
+  mode?: 'center' | 'normal'
 
-  color: string
+  color?: string
 
-  content: string
+  content?: string
 }
 
 declare const AtActivityIndicator: ComponentClass<AtActivityIndicatorProps>

@types/index.d.ts

@@ -12,7 +12,7 @@ export { default as AtGrid } from './grid'
 export { default as AtIcon } from './icon'
 export { default as AtInputNumber } from './input-number'
 export { default as AtInput } from './input'
-export { default as AtListItem } from './list'
+export { default as AtListItem, AtList } from './list'
 export { default as AtModal } from './modal'
 export { default as AtNavBar } from './nav-bar'
 export { default as AtNoticebar } from './noticebar'

@types/list.d.ts

@@ -1,26 +1,34 @@
 import { MouseEvent, ComponentClass } from 'react'
 import { BaseEventFunction } from '@tarojs/components/types/common'
 
+export interface AtList {
+  hasBorder?: boolean
+}
+
 export interface AtListItemProps {
-  note: string
+  hasBorder?: boolean
 
-  title: string
+  note?: string
 
-  thumb: string
+  title?: string
 
-  isSwitch: boolean
+  thumb?: string
 
-  extraText: string
+  isSwitch?: boolean
 
-  extraThumb: string
+  extraText?: string
 
-  arrow: 'up' | 'down' | 'right'
+  extraThumb?: string
 
-  onClick: BaseEventFunction
+  arrow?: 'up' | 'down' | 'right'
 
-  onSwitchChange: BaseEventFunction
+  onClick?: BaseEventFunction
+
+  onSwitchChange?: BaseEventFunction
 }
 
+export const AtList: ComponentClass<AtList>
+
 declare const AtListItem: ComponentClass<AtListItemProps>
 
 export default AtListItem

@types/modal.d.ts

@@ -2,17 +2,17 @@ import { MouseEvent, ComponentClass } from 'react'
 import { BaseEventFunction } from '@tarojs/components/types/common'
 
 export interface AtModalProps {
-  title: string
+  title?: string
 
-  content: string
+  content?: string
 
-  cancleText: string
+  cancleText?: string
 
-  confirmText: string
+  confirmText?: string
 
-  onCancle: BaseEventFunction
+  onCancle?: BaseEventFunction
 
-  onConfirm: BaseEventFunction
+  onConfirm?: BaseEventFunction
 }
 
 declare const AtModal: ComponentClass<AtModalProps>

@types/progress.d.ts

@@ -2,15 +2,15 @@ import { MouseEvent, ComponentClass } from 'react'
 import { BaseEventFunction } from '@tarojs/components/types/common'
 
 export interface AtProgressProps {
-  color: string
+  color?: string
 
-  status: string
+  status?: string
 
-  percent: number
+  percent?: number
 
-  strokeWidth: number
+  strokeWidth?: number
 
-  isHidePercent: boolean
+  isHidePercent?: boolean
 }
 
 declare const AtProgress: ComponentClass<AtProgressProps>

@types/toast.d.ts

@@ -2,23 +2,23 @@ import { MouseEvent, ComponentClass } from 'react'
 import { BaseEventFunction, BaseEvent } from '@tarojs/components/types/common'
 
 export interface AtTimeLineProps {
-  text: string
+  isOpened: boolean
 
-  icon: string
+  text?: string
 
-  image: string
+  icon?: string
 
-  status: 'error' | 'loading' | 'success'
+  image?: string
 
-  isOpened: boolean
+  status?: 'error' | 'loading' | 'success'
 
-  duration: number
+  duration?: number
 
-  hasMask: boolean
+  hasMask?: boolean
 
-  onClick: BaseEventFunction
+  onClick?: BaseEventFunction
 
-  onClose: BaseEventFunction
+  onClose?: BaseEventFunction
 }
 
 declare const AtTimeLine: ComponentClass<AtTimeLineProps>

src/components/action-sheet/body/item/index.js

@@ -2,14 +2,20 @@ import Taro from '@tarojs/taro'
 import { View } from '@tarojs/components'
 
 import PropTypes from 'prop-types'
+import _isFunction from 'lodash/isFunction'
 
 import './index.scss'
 
 export default class AtActionSheetItem extends Taro.Component {
+  handleClick = (...args) => {
+    if (_isFunction(this.props.onClick)) {
+      this.props.onClick(...args)
+    }
+  }
+
   render () {
-    const { onClick } = this.props
     return (
-      <View className='at-action-sheet-item' onClick={onClick}>
+      <View className='at-action-sheet-item' onClick={this.handleClick}>
         {this.props.children}
       </View>
     )

src/components/action-sheet/footer/index.js

@@ -2,14 +2,20 @@ import Taro, { Component } from '@tarojs/taro'
 import { View } from '@tarojs/components'
 
 import PropTypes from 'prop-types'
+import _isFunction from 'lodash/isFunction'
 
 import './index.scss'
 
 export default class AtActionSheetFooter extends Component {
+  handleClick = (...args) => {
+    if (_isFunction(this.props.onClick)) {
+      this.props.onClick(...args)
+    }
+  }
+
   render () {
-    const { onClick } = this.props
     return (
-      <View className='at-action-sheet-footer' onClick={onClick}>
+      <View className='at-action-sheet-footer' onClick={this.handleClick}>
         {this.props.children}
       </View>
     )

src/components/action-sheet/index.js

@@ -81,7 +81,7 @@ export default class AtActionSheet extends Component {
 }
 
 AtActionSheet.defaultProps = {
-  isOpened: false,
+  isOpened: false
 }
 
 AtActionSheet.propTypes = {

src/components/card/index.js

@@ -2,12 +2,19 @@ import Taro from '@tarojs/taro'
 import { View, Text, Image } from '@tarojs/components'
 
 import PropTypes from 'prop-types'
+import _isFunction from 'lodash/isFunction'
 
 import './index.scss'
 
 export default class AtCard extends Taro.Component {
+  handleClick = (...args) => {
+    if (_isFunction(this.props.onClick)) {
+      this.props.onClick(...args)
+    }
+  }
+
   render () {
-    const { title, note, extra, thumb, isFull, onClick } = this.props
+    const { title, note, extra, thumb, isFull } = this.props
 
     const rootClass = ['at-card']
 
@@ -16,7 +23,7 @@ export default class AtCard extends Taro.Component {
     }
 
     return (
-      <View className={rootClass} onClick={onClick}>
+      <View className={rootClass} onClick={this.handleClick}>
         <View className='at-card-header'>
           {thumb && (
             <View className='at-card-header__thumb'>
@@ -45,5 +52,5 @@ AtCard.propTypes = {
   thumb: PropTypes.string,
   title: PropTypes.string,
   extra: PropTypes.string,
-  onClick: PropTypes.func,
+  onClick: PropTypes.func
 }

src/components/float-layout/index.js

@@ -32,7 +32,7 @@ export default class AtFloatLayout extends Taro.Component {
     if (_isFunction(this.props.onClose)) {
       this.props.onClose()
     }
-  };
+  }
 
   close = () => {
     this.setState(
@@ -41,7 +41,7 @@ export default class AtFloatLayout extends Taro.Component {
       },
       this.handleClose
     )
-  };
+  }
 
   render () {
     const { isOpened } = this.state
@@ -74,6 +74,10 @@ export default class AtFloatLayout extends Taro.Component {
   }
 }
 
+AtFloatLayout.defaultProps = {
+  isOpened: false
+}
+
 AtFloatLayout.propTypes = {
   onClose: PropTypes.func,
   title: PropTypes.string,

src/components/grid/index.js

@@ -3,17 +3,21 @@ import { View, Text, Image } from '@tarojs/components'
 
 import _chunk from 'lodash/chunk'
 import PropTypes from 'prop-types'
+import _isFunction from 'lodash/isFunction'
 
 import AtIcon from '../icon/index'
 
 import './index.scss'
 
 export default class AtGrid extends Component {
-  handleClick = e => {
-    const { onClick } = this.props
-    const { item, index } = e.currentTarget.dataset
-
-    onClick(item, index, e)
+  handleClick = (e, ...arg) => {
+    const { onClick, columnNum } = this.props
+    const { item, index, row } = e.currentTarget.dataset
+    if (_isFunction(onClick)) {
+      /* prettier-ignore */
+      const clickIndex = (row * columnNum) + index
+      onClick(item, clickIndex, e, ...arg)
+    }
   }
 
   render () {
@@ -41,12 +45,19 @@ export default class AtGrid extends Component {
                 className={rootClass}
                 data-item={childItem}
                 data-index={index}
+                data-row={i}
                 onClick={this.handleClick}
               >
                 <View className='at-grid-item__content'>
                   <View className='at-grid-item__content-inner'>
                     <View className='content-inner__icon'>
-                      {childItem.image && <Image className='content-inner__img' src={childItem.image} mode='scaleToFill' />}
+                      {childItem.image && (
+                        <Image
+                          className='content-inner__img'
+                          src={childItem.image}
+                          mode='scaleToFill'
+                        />
+                      )}
                       {childItem.icon &&
                         !childItem.image && (
                         <AtIcon

src/components/list/__snapshots__/index.test.js.snap

@@ -1,3 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`List Snap render completed List -- no border 1`] = `"<div class=\\"at-list at-list--no-border\\"><div class=\\"at-list__item at-list__item--no-border\\">undefined<div class=\\"at-list__item-content item-content\\"><div class=\\"item-content__info\\"><div class=\\"item-content__info-title\\">标题文字</div>undefined</div></div><div class=\\"at-list__item-extra item-extra\\">undefinedundefinedundefinedundefined</div></div><div class=\\"at-list__item at-list__item--no-border\\">undefined<div class=\\"at-list__item-content item-content\\"><div class=\\"item-content__info\\"><div class=\\"item-content__info-title\\">标题文字</div>undefined</div></div><div class=\\"at-list__item-extra item-extra\\">undefinedundefinedundefinedundefined</div></div></div>"`;
+
 exports[`List Snap render completed List 1`] = `"<div class=\\"at-list\\"><div class=\\"at-list__item\\">undefined<div class=\\"at-list__item-content item-content\\"><div class=\\"item-content__info\\"><div class=\\"item-content__info-title\\">标题文字</div>undefined</div></div><div class=\\"at-list__item-extra item-extra\\">undefinedundefinedundefinedundefined</div></div><div class=\\"at-list__item\\">undefined<div class=\\"at-list__item-content item-content\\"><div class=\\"item-content__info\\"><div class=\\"item-content__info-title\\">标题文字</div>undefined</div></div><div class=\\"at-list__item-extra item-extra\\">undefinedundefinedundefined<div class=\\"item-extra__icon\\"><span style=\\"font-size:24px;color:#c7c7cc;\\" class=\\"taro-text at-icon at-icon-chevron-right\\"></span></div></div></div><div class=\\"at-list__item at-list__item--multiple\\">undefined<div class=\\"at-list__item-content item-content\\"><div class=\\"item-content__info\\"><div class=\\"item-content__info-title\\">标题文字</div><div class=\\"item-content__info-note\\">描述信息</div></div></div><div class=\\"at-list__item-extra item-extra\\">undefinedundefinedundefinedundefined</div></div><div class=\\"at-list__item at-list__item--multiple\\">undefined<div class=\\"at-list__item-content item-content\\"><div class=\\"item-content__info\\"><div class=\\"item-content__info-title\\">标题文字</div><div class=\\"item-content__info-note\\">描述信息</div></div></div><div class=\\"at-list__item-extra item-extra\\">undefinedundefinedundefined<div class=\\"item-extra__icon\\"><span style=\\"font-size:24px;color:#c7c7cc;\\" class=\\"taro-text at-icon at-icon-chevron-right\\"></span></div></div></div><div class=\\"at-list__item\\">undefined<div class=\\"at-list__item-content item-content\\"><div class=\\"item-content__info\\"><div class=\\"item-content__info-title\\">标题文字</div>undefined</div></div><div class=\\"at-list__item-extra item-extra\\"><div class=\\"item-extra__info\\">详细信息</div>undefinedundefined<div class=\\"item-extra__icon\\"><span style=\\"font-size:24px;color:#c7c7cc;\\" class=\\"taro-text at-icon at-icon-chevron-right\\"></span></div></div></div><div class=\\"at-list__item at-list__item--multiple\\">undefined<div class=\\"at-list__item-content item-content\\"><div class=\\"item-content__info\\"><div class=\\"item-content__info-title\\">标题文字标题文字标题文字标题文字标题文字</div><div class=\\"item-content__info-note\\">描述信息</div></div></div><div class=\\"at-list__item-extra item-extra\\"><div class=\\"item-extra__info\\">详细信息详细信息详细信息详细信息</div>undefinedundefined<div class=\\"item-extra__icon\\"><span style=\\"font-size:24px;color:#c7c7cc;\\" class=\\"taro-text at-icon at-icon-chevron-right\\"></span></div></div></div><div class=\\"at-list__item at-list__item--thumb at-list__item--multiple\\"><div class=\\"at-list__item-thumb item-thumb\\"><div class=\\"taro-img item-thumb-info\\"><img class=\\"taro-img__mode-scaletofill\\" src=\\"http://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png\\"/></div></div><div class=\\"at-list__item-content item-content\\"><div class=\\"item-content__info\\"><div class=\\"item-content__info-title\\">标题文字</div><div class=\\"item-content__info-note\\">描述信息</div></div></div><div class=\\"at-list__item-extra item-extra\\"><div class=\\"item-extra__info\\">详细信息</div>undefinedundefined<div class=\\"item-extra__icon\\"><span style=\\"font-size:24px;color:#c7c7cc;\\" class=\\"taro-text at-icon at-icon-chevron-right\\"></span></div></div></div><div class=\\"at-list__item\\">undefined<div class=\\"at-list__item-content item-content\\"><div class=\\"item-content__info\\"><div class=\\"item-content__info-title\\">标题文字</div>undefined</div></div><div class=\\"at-list__item-extra item-extra\\">undefinedundefined<div class=\\"item-extra__switch\\"><input color=\\"#6190E8\\" class=\\"weui-switch\\" type=\\"checkbox\\"/></div>undefined</div></div></div>"`;

src/components/list/index.js

@@ -1,10 +1,25 @@
 import Taro, { Component } from '@tarojs/taro'
 import { View } from '@tarojs/components'
 
+import PropTypes from 'prop-types'
+
 import './index.scss'
 
 export default class AtList extends Component {
   render () {
-    return <View className='at-list'>{this.props.children}</View>
+    const rootClass = ['at-list']
+
+    if (!this.props.hasBorder) {
+      rootClass.push('at-list--no-border')
+    }
+    return <View className={rootClass}>{this.props.children}</View>
   }
 }
+
+AtList.defaultProps = {
+  hasBorder: true
+}
+
+AtList.propTypes = {
+  hasBorder: PropTypes.bool
+}

src/components/list/index.scss

@@ -32,4 +32,13 @@
     height: calc(100% - 1PX);
     top: 0;
   }
+
+  &--no-border {
+    border-top: none;
+
+    &::after,
+    &::before {
+      content: initial;
+    }
+  }
 }

src/components/list/index.test.js

@@ -32,6 +32,16 @@ describe('List Snap', () => {
     )
     expect(componet).toMatchSnapshot()
   })
+
+  it('render completed List -- no border', () => {
+    const componet = renderToString(
+      <AtList hasBorder={false}>
+        <AtListItem title='标题文字' hasBorder={false} />
+        <AtListItem title='标题文字' hasBorder={false} />
+      </AtList>
+    )
+    expect(componet).toMatchSnapshot()
+  })
 })
 
 describe('List Behavior ', () => {