Skip to content

Commit

Permalink
feat(list): 新增disabled 属性 closed #90
Browse files Browse the repository at this point in the history
  • Loading branch information
@SzHeJason
SzHeJason committed Sep 29, 2018
1 parent bb0bfff commit 4d710e4
Show file tree
Hide file tree
Showing 7 changed files with 58 additions and 6 deletions.
2 changes: 2 additions & 0 deletions @types/list.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ export interface AtList {
export interface AtListItemProps extends AtComponent{
hasBorder?: boolean

disabled?: boolean

note?: string

title?: string
Expand Down
4 changes: 3 additions & 1 deletion docs/markdown/list.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import { AtList, AtListItem } from "taro-ui"
<AtListItem title='标题文字' onClick={this.handleClick} />
<AtListItem title='标题文字' arrow='right' />
<AtListItem title='标题文字' extraText='详细信息' />
<AtListItem title='禁用状态' disabled extraText='详细信息' />
</AtList>
```

Expand Down Expand Up @@ -128,13 +129,14 @@ import { AtList, AtListItem } from "taro-ui"
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| -------------- | -------------------------- | -------- | ---------------------- | ------- |
| title | 元素的标题 | String | - | - |
| disabled | 是否禁用 | Boolean | - | `false` |
| note | 元素的描述信息 | String | - | - |
| thumb | 元素的主要缩略图 | String | - | - |
| arrow | 箭头的方向 | String | `right`,`top`,`bottom` | - |
| extraText | 额外信息的文本 | String | - | - |
| extraThumb | 额外信息的缩略图 | String | - | - |
| isSwitch | 额外信息是否开关 | Boolean | - | `false` |
| switchIsCheck | 额外信息开关的值 | Boolean | - | `false` |
| switchIsCheck | 额外信息开关的值 | Boolean | - | `false` |
| hasBorder | 是否有边框 | Boolean | - | `true` |
| onClick | 用户点击元素触发的事件 | Function | - | - |
| onSwitchChange | 用户点击切换 Switch 时触发 | Function | - | - |
2 changes: 1 addition & 1 deletion src/components/list/__snapshots__/index.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@

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 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\\" checked type=\\"checkbox\\" style=\\"border-color:#6190E8;background-color:#6190E8;\\"/></div>undefined</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--disabled\\">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>undefinedundefinedundefined</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 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\\" checked type=\\"checkbox\\" style=\\"border-color:#6190E8;background-color:#6190E8;\\"/></div>undefined</div></div></div>"`;
35 changes: 35 additions & 0 deletions src/components/list/index.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ describe('List Snap', () => {
<AtListItem title='标题文字' />
<AtListItem title='标题文字' arrow='right' />
<AtListItem title='标题文字' note='描述信息' />
<AtListItem title='禁用状态' disabled extraText='详细信息' />
<AtListItem title='标题文字' note='描述信息' arrow='right' />
<AtListItem title='标题文字' extraText='详细信息' arrow='right' />
<AtListItem
Expand Down Expand Up @@ -114,6 +115,40 @@ describe('List Behavior ', () => {
expect(onChange).not.toBeCalled()
})

it('ListItem disabled onSwitchChange && onClick', () => {
const onClick = jest.fn()
const onChange = jest.fn()

const component = renderIntoDocument(
<AtList>
<AtListItem
isSwitch
disabled
title='标题文字'
onClick={onClick}
onSwitchChange={onChange}
/>
</AtList>
)

const componentDom = findDOMNode(component, 'at-list')
const itemDom = componentDom.querySelector('.at-list__item').children[0]
const itemSwitchDom = componentDom.querySelector(
'.at-list__item .item-extra__switch'
).children[0]

itemSwitchDom.value = true

Simulate.change(itemSwitchDom)
expect(onChange).not.toBeCalled()

onClick.mockReset()
onChange.mockReset()

Simulate.click(itemDom)
expect(onClick).not.toBeCalled()
})

it('ListItem switch was checked', () => {
const checkedComponent = renderIntoDocument(
<AtList>
Expand Down
12 changes: 8 additions & 4 deletions src/components/list/item/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import './index.scss'

export default class AtListItem extends AtComponent {
handleClick = (...args) => {
if (_isFunction(this.props.onClick)) {
if (_isFunction(this.props.onClick) && !this.props.disabled) {
this.props.onClick(...args)
}
}
Expand All @@ -22,7 +22,7 @@ export default class AtListItem extends AtComponent {
}

handleSwitchChange = (...args) => {
if (_isFunction(this.props.onSwitchChange)) {
if (_isFunction(this.props.onSwitchChange) && !this.props.disabled) {
this.props.onSwitchChange(...args)
}
}
Expand All @@ -33,18 +33,20 @@ export default class AtListItem extends AtComponent {
arrow,
title,
thumb,
disabled,
isSwitch,
extraText,
hasBorder,
extraThumb,
switchIsCheck
switchIsCheck,
} = this.props

const rootClass = classNames(
'at-list__item',
{
'at-list__item--thumb': thumb,
'at-list__item--multiple': note,
'at-list__item--disabled': disabled,
'at-list__item--no-border': !hasBorder
},
this.props.className
Expand Down Expand Up @@ -105,11 +107,13 @@ export default class AtListItem extends AtComponent {

AtListItem.defaultProps = {
hasBorder: true,
isSwitch: false
isSwitch: false,
disabled: false,
}

AtListItem.propTypes = {
note: PropTypes.string,
disabled: PropTypes.bool,
title: PropTypes.string,
thumb: PropTypes.string,
onClick: PropTypes.func,
Expand Down
8 changes: 8 additions & 0 deletions src/components/list/item/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,14 @@ $item-horizontal-padding: 24px;
}
}

&--disabled {
opacity: $opacity-disabled;

&:active {
background-color: transparent !important;
}
}

&--no-border::after {
content: initial;
}
Expand Down
1 change: 1 addition & 0 deletions src/pages/layout/list/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ export default class ListPage extends Component {
<AtListItem title='标题文字' onClick={this.handleClick} />
<AtListItem title='标题文字' arrow='right' />
<AtListItem title='标题文字' extraText='详细信息' />
<AtListItem title='禁用状态' disabled extraText='详细信息' />
</AtList>
</View>
</View>
Expand Down

0 comments on commit 4d710e4

Please sign in to comment.