Skip to content

Commit 7f6c0fb

Browse files
robinv8robinv8
authored
Fix/bug (#1750)
* fix(swipe-action): 修复在 h5 环境下点击事件失效的问题 * fix(tabs): 修复 h5 环境下样式报错的问题 * refactor(types): 完善类型声明
1 parent 545951e commit 7f6c0fb

File tree

9 files changed

+26
-59
lines changed

9 files changed

+26
-59
lines changed

‎packages/taro-ui-demo/src/pages/action/swipe-action/index.tsx

+9-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react'
22
import { AtButton, AtList, AtListItem, AtSwipeAction } from 'taro-ui'
3-
import { SwipeActionOption } from 'types/swipe-action'
3+
import { SwipeActionOption } from 'taro-ui/types/swipe-action'
44
import { View } from '@tarojs/components'
55
import Taro from '@tarojs/taro'
66
import DocsHeader from '../../components/doc-header'
@@ -33,8 +33,10 @@ interface SwipeActionPageState {
3333
list: ActionListItem[]
3434
}
3535

36+
interface SwipeActionPageProps {}
37+
3638
export default class SwipeActionPage extends React.Component<
37-
{},
39+
SwipeActionPageProps,
3840
SwipeActionPageState
3941
> {
4042
public constructor(props: any) {
@@ -171,7 +173,10 @@ export default class SwipeActionPage extends React.Component<
171173

172174
<View className='panel'>
173175
<View className='panel__title'>使用变量控制开关</View>
174-
<View className='panel__controller' style={{marginBottom: '10px'}}>
176+
<View
177+
className='panel__controller'
178+
style={{ marginBottom: '10px' }}
179+
>
175180
<AtButton size='small' onClick={this.handleStatusClick}>
176181
当前状态: {isOpened2 ? '开' : '关'}{' '}
177182
</AtButton>
@@ -208,6 +213,7 @@ export default class SwipeActionPage extends React.Component<
208213

209214
<View className='panel'>
210215
<View className='panel__title'>传递点击事件</View>
216+
211217
<View className='panel__content no-padding'>
212218
<View className='example-item example-item--border'>
213219
<AtSwipeAction onClick={this.handleClick} options={OPTIONS}>

‎packages/taro-ui-docs/markdown/list.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -182,12 +182,12 @@ import { AtList, AtListItem } from "taro-ui"
182182

183183
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
184184
| ------------- | ---------------- | -------------------------------------------------------------------- | -------------------- | --------- |
185-
| title | 元素的标题 | JSX.Element | - | - |
185+
| title | 元素的标题 | JSX.Element 、String | - | - |
186186
| disabled | 是否禁用 | Boolean | - | `false` |
187-
| note | 元素的描述信息 | JSX.Element | - | - |
187+
| note | 元素的描述信息 | JSX.Element 、String | - | - |
188188
| thumb | 元素的主要缩略图 | String | - | - |
189189
| arrow | 箭头的方向 | String | `right`,`top`,`down` | - |
190-
| extraText | 额外信息的文本 | JSX.Element | - | - |
190+
| extraText | 额外信息的文本 | JSX.Element 、String | - | - |
191191
| extraThumb | 额外信息的缩略图 | String | - | - |
192192
| isSwitch | 额外信息是否开关 | Boolean | - | `false` |
193193
| switchColor | 开关的颜色 | String | - | `#6190E8` |

‎packages/taro-ui/rn/components/list/item/index.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -198,16 +198,16 @@ AtListItem.defaultProps = {
198198
}
199199

200200
AtListItem.propTypes = {
201-
note: PropTypes.string,
201+
note: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
202202
disabled: PropTypes.bool,
203-
title: PropTypes.string,
203+
title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
204204
thumb: PropTypes.string,
205205
onClick: PropTypes.func,
206206
isSwitch: PropTypes.bool,
207207
hasBorder: PropTypes.bool,
208208
switchColor: PropTypes.string,
209209
switchIsCheck: PropTypes.bool,
210-
extraText: PropTypes.string,
210+
extraText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
211211
extraThumb: PropTypes.string,
212212
onSwitchChange: PropTypes.func,
213213
arrow: PropTypes.oneOf(['up', 'down', 'right']),

‎packages/taro-ui/rn/components/swipe-action/index.tsx

+3-19
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,10 @@ export default class AtSwipeAction extends React.Component<
2121
private maxOffsetSize: number
2222
private moveX: number
2323
private eleWidth: number
24-
private moveRatio: number
2524

2625
public constructor(props: AtSwipeActionProps) {
2726
super(props)
28-
const { isOpened, maxDistance, areaWidth, moveRatio } = props
27+
const { isOpened, maxDistance, areaWidth } = props
2928
this.maxOffsetSize = maxDistance
3029
this.state = {
3130
componentId: uuid(),
@@ -36,7 +35,6 @@ export default class AtSwipeAction extends React.Component<
3635
}
3736
this.moveX = this.state.offsetSize
3837
this.eleWidth = areaWidth
39-
this.moveRatio = moveRatio || 0.5
4038
}
4139

4240
public UNSAFE_componentWillReceiveProps(nextProps: AtSwipeActionProps): void {
@@ -108,22 +106,8 @@ export default class AtSwipeAction extends React.Component<
108106
}
109107

110108
onTouchEnd = e => {
111-
if (this.moveX === -this.maxOffsetSize) {
112-
this._reset(true)
113-
this.handleOpened(e)
114-
return
115-
}
116-
if (this.moveX === 0) {
117-
this._reset(false)
118-
this.handleClosed(e)
119-
return
120-
}
121-
if (this.state._isOpened && this.moveX < 0) {
122-
this._reset(false)
123-
this.handleClosed(e)
124-
return
125-
}
126-
if (Math.abs(this.moveX) < this.maxOffsetSize * this.moveRatio) {
109+
const { maxOffsetSize } = this.state
110+
if (Math.abs(this.moveX) < maxOffsetSize / 2) {
127111
this._reset(false)
128112
this.handleClosed(e)
129113
} else {

‎packages/taro-ui/src/components/list/item/index.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import React from 'react'
44
import { Image, Switch, Text, View } from '@tarojs/components'
55
import { CommonEvent, ITouchEvent } from '@tarojs/components/types/common'
66
import { AtListItemProps } from '../../../../types/list'
7-
import { mergeStyle, isJSXElement } from '../../../common/utils'
7+
import { mergeStyle } from '../../../common/utils'
88

99
export default class AtListItem extends React.Component<AtListItemProps> {
1010
public static defaultProps: AtListItemProps
@@ -163,16 +163,16 @@ AtListItem.defaultProps = {
163163
}
164164

165165
AtListItem.propTypes = {
166-
note: isJSXElement,
166+
note: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
167167
disabled: PropTypes.bool,
168-
title: isJSXElement,
168+
title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
169169
thumb: PropTypes.string,
170170
onClick: PropTypes.func,
171171
isSwitch: PropTypes.bool,
172172
hasBorder: PropTypes.bool,
173173
switchColor: PropTypes.string,
174174
switchIsCheck: PropTypes.bool,
175-
extraText: isJSXElement,
175+
extraText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
176176
extraThumb: PropTypes.string,
177177
onSwitchChange: PropTypes.func,
178178
arrow: PropTypes.oneOf(['up', 'down', 'right']),

‎packages/taro-ui/src/components/swipe-action/index.tsx

+2-19
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,10 @@ export default class AtSwipeAction extends React.Component<
2020
public static propTypes: InferProps<AtSwipeActionProps>
2121

2222
private moveX: number
23-
private moveRatio: number
2423

2524
public constructor(props: AtSwipeActionProps) {
2625
super(props)
27-
const { isOpened, moveRatio } = props
26+
const { isOpened } = props
2827
this.state = {
2928
componentId: uuid(),
3029
// eslint-disable-next-line no-extra-boolean-cast
@@ -35,7 +34,6 @@ export default class AtSwipeAction extends React.Component<
3534
maxOffsetSize: 0
3635
}
3736
this.moveX = this.state.offsetSize
38-
this.moveRatio = moveRatio || 0.5
3937
}
4038

4139
public componentDidMount(): void {
@@ -148,22 +146,7 @@ export default class AtSwipeAction extends React.Component<
148146

149147
onTouchEnd = e => {
150148
const { maxOffsetSize } = this.state
151-
if (this.moveX === -maxOffsetSize) {
152-
this._reset(true)
153-
this.handleOpened(e)
154-
return
155-
}
156-
if (this.moveX === 0) {
157-
this._reset(false)
158-
this.handleClosed(e)
159-
return
160-
}
161-
if (this.state._isOpened && this.moveX < 0) {
162-
this._reset(false)
163-
this.handleClosed(e)
164-
return
165-
}
166-
if (Math.abs(this.moveX) < maxOffsetSize * this.moveRatio) {
149+
if (Math.abs(this.moveX) < maxOffsetSize / 2) {
167150
this._reset(false)
168151
this.handleClosed(e)
169152
} else {

‎packages/taro-ui/src/components/tabs/index.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -169,8 +169,7 @@ export default class AtTabs extends React.Component<AtTabsProps, AtTabsState> {
169169
transformStyle = `translate3d(-${current * 100}%, 0px, 0px)`
170170
}
171171
Object.assign(bodyStyle, {
172-
transform: transformStyle,
173-
'-webkit-transform': transformStyle
172+
transform: transformStyle
174173
})
175174
if (!animated) {
176175
bodyStyle.transition = 'unset'

‎packages/taro-ui/types/list.d.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export interface AtListItemProps extends AtComponent {
2424
/**
2525
* 元素的描述信息
2626
*/
27-
note?: string
27+
note?: JSX.Element | string
2828
/**
2929
* 元素的标题
3030
*/

‎packages/taro-ui/types/swipe-action.d.ts

-5
Original file line numberDiff line numberDiff line change
@@ -65,11 +65,6 @@ export interface AtSwipeActionProps extends AtComponent {
6565
* @deprecated 已废弃，无需设置 areaWidth
6666
*/
6767
areaWidth?: number
68-
69-
/**
70-
* 判断是否需要打开的比例阈值，即 滑块滑动距离 / 滑块最大滑动距离， 默认为 0.5
71-
*/
72-
moveRatio?: number
7368
}
7469

7570
export interface AtSwipeActionState {

0 commit comments

Comments
 (0)