Conversation
# Conflicts: # packages/nutui-taro-demo-rn/scripts/taro/adapted.js
xiaoyatong
left a comment
xiaoyatong
left a comment
There was a problem hiding this comment.
1、只提取了 taro 的 demo
2、web h5 表现：
3、rn 表现：
…wipe-standard # Conflicts: # packages/nutui-taro-demo-rn/scripts/taro/adapted.js
|
Warning Review failedThe pull request is closed. Walkthrough这次更新引入了一个新的组件 Changes
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 8
Outside diff range and nitpick comments (4)
src/packages/swipe/demos/taro/demo9.tsx (1)
7-39: 代码实现了平台特定的渲染逻辑，这是一个好的实践。不过，建议在harmonyAndRn函数中添加注释，说明它是如何判断不同平台的，以提高代码的可读性。src/packages/swipe/demos/taro/demo8.tsx (1)
5-59: 这段代码中注释掉了Dialog组件的使用，可能是因为当前版本不需要这个功能，或者是在进行调试。如果这段代码不再需要，建议彻底移除以减少代码冗余。如果将来可能会使用，可以在代码旁边添加 TODO 注释，说明未来可能的用途。src/packages/swipe/swipe.taro.tsx (2)
Line range hint
78-93: 使用useState和useReady钩子来设置和获取根元素宽度。这里的异步使用方法可能会导致竞态条件，建议使用状态回调函数来确保状态的正确更新。- setTimeout(() => getWidth()) + setTimeout(() => getWidth(), 0) // 确保异步操作的正确序列
258-259: 在useEffect中，添加了环境检测以决定是否执行某些 DOM 操作。这种环境依赖的代码可能会导致组件的可移植性问题。建议将环境相关的逻辑封装到独立的模块或服务中。
| const App = () => { | ||
| const [showDialog, setShowDialog] = useState(false) | ||
| const refDom = useRef<SwipeInstance>(null) | ||
| const pRef = useRef('left') | ||
| const beforeClose = (postion: string) => { | ||
| pRef.current = postion | ||
| setShowDialog(true) | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <Swipe | ||
| ref={refDom} | ||
| beforeClose={beforeClose} | ||
| leftAction={ | ||
| <Button | ||
| shape="square" | ||
| type="success" | ||
| style={{ alignSelf: 'stretch', height: 46 }} | ||
| > | ||
| 选择 | ||
| </Button> | ||
| } | ||
| rightAction={ | ||
| <> | ||
| <Button | ||
| shape="square" | ||
| type="danger" | ||
| style={{ alignSelf: 'stretch', height: 46 }} | ||
| > | ||
| 删除 | ||
| </Button> | ||
| </> | ||
| } | ||
| > | ||
| <Cell | ||
| title="事件" | ||
| radius={0} | ||
| style={{ margin: 0, alignSelf: 'stretch' }} | ||
| /> | ||
| </Swipe> | ||
| <Dialog | ||
| visible={showDialog} | ||
| title="提示" | ||
| onConfirm={() => { | ||
| refDom.current && refDom.current.close() | ||
| setShowDialog(false) | ||
| }} | ||
| > | ||
| {pRef.current === 'left' ? '确定选择吗？' : '确定删除吗？'} | ||
| </Dialog> | ||
| </> | ||
| ) | ||
| } | ||
| export default App |
There was a problem hiding this comment.
此代码段中，Swipe 组件被用于实现滑动操作，并通过 Dialog 组件来确认操作。代码逻辑清晰，但在行 49-50 使用了非空断言操作符（!），这可能在 refDom.current 为 null 时引发运行时错误。
- refDom.current && refDom.current.close()
+ refDom.current?.close()此修改使用了可选链（Optional Chaining），能够更安全地处理可能为 null 的情况。
Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const App = () => { | |
| const [showDialog, setShowDialog] = useState(false) | |
| const refDom = useRef<SwipeInstance>(null) | |
| const pRef = useRef('left') | |
| const beforeClose = (postion: string) => { | |
| pRef.current = postion | |
| setShowDialog(true) | |
| } | |
| return ( | |
| <> | |
| <Swipe | |
| ref={refDom} | |
| beforeClose={beforeClose} | |
| leftAction={ | |
| <Button | |
| shape="square" | |
| type="success" | |
| style={{ alignSelf: 'stretch', height: 46 }} | |
| > | |
| 选择 | |
| </Button> | |
| } | |
| rightAction={ | |
| <> | |
| <Button | |
| shape="square" | |
| type="danger" | |
| style={{ alignSelf: 'stretch', height: 46 }} | |
| > | |
| 删除 | |
| </Button> | |
| </> | |
| } | |
| > | |
| <Cell | |
| title="事件" | |
| radius={0} | |
| style={{ margin: 0, alignSelf: 'stretch' }} | |
| /> | |
| </Swipe> | |
| <Dialog | |
| visible={showDialog} | |
| title="提示" | |
| onConfirm={() => { | |
| refDom.current && refDom.current.close() | |
| setShowDialog(false) | |
| }} | |
| > | |
| {pRef.current === 'left' ? '确定选择吗？' : '确定删除吗？'} | |
| </Dialog> | |
| </> | |
| ) | |
| } | |
| export default App | |
| const App = () => { | |
| const [showDialog, setShowDialog] = useState(false) | |
| const refDom = useRef<SwipeInstance>(null) | |
| const pRef = useRef('left') | |
| const beforeClose = (postion: string) => { | |
| pRef.current = postion | |
| setShowDialog(true) | |
| } | |
| return ( | |
| <> | |
| <Swipe | |
| ref={refDom} | |
| beforeClose={beforeClose} | |
| leftAction={ | |
| <Button | |
| shape="square" | |
| type="success" | |
| style={{ alignSelf: 'stretch', height: 46 }} | |
| > | |
| 选择 | |
| </Button> | |
| } | |
| rightAction={ | |
| <> | |
| <Button | |
| shape="square" | |
| type="danger" | |
| style={{ alignSelf: 'stretch', height: 46 }} | |
| > | |
| 删除 | |
| </Button> | |
| </> | |
| } | |
| > | |
| <Cell | |
| title="事件" | |
| radius={0} | |
| style={{ margin: 0, alignSelf: 'stretch' }} | |
| /> | |
| </Swipe> | |
| <Dialog | |
| visible={showDialog} | |
| title="提示" | |
| onConfirm={() => { | |
| refDom.current?.close() | |
| setShowDialog(false) | |
| }} | |
| > | |
| {pRef.current === 'left' ? '确定选择吗？' : '确定删除吗？'} | |
| </Dialog> | |
| </> | |
| ) | |
| } | |
| export default App |
Tools
Biome
[error] 49-50: Change to an optional chain. (lint/complexity/useOptionalChain)
Unsafe fix: Change to an optional chain.
src/packages/swipe/swipe.taro.tsx
Outdated
| rightRect.width, | ||
| JSON.stringify(rightRect) | ||
| ) | ||
|
|
There was a problem hiding this comment.
在 onTouchStart 事件处理函数中，对左右滑块进行尺寸获取和设置。这部分代码与 getWidth 函数中的代码重复，建议封装成独立的函数以避免代码重复。
- const leftRect = await getRectByTaro(leftWrapper.current)
- leftRect && setActionWidth((v: any) => ({ ...v, left: leftRect.width }))
- if (rightWrapper.current) {
- const rightRect = await getRectByTaro(rightWrapper.current)
- rightRect && setActionWidth((v: any) => ({ ...v, right: rightRect.width }))
+ updateActionWidth(leftWrapper, rightWrapper)Committable suggestion was skipped due to low confidence.
| const ViewNode = (text: string, style: any) => { | ||
| return ( | ||
| <div | ||
| style={{ | ||
| display: 'flex', | ||
| width: 60, | ||
| height: 104, | ||
| flexDirection: 'column', | ||
| justifyContent: 'center', | ||
| alignItems: 'center', | ||
| ...style, | ||
| }} | ||
| > | ||
| <Del style={{ marginBottom: 8 }} /> | ||
| <>{text}</> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| const App = () => { | ||
| return ( | ||
| <> | ||
| <Swipe | ||
| style={{ height: 104 }} | ||
| rightAction={ | ||
| <div | ||
| style={{ | ||
| display: 'flex', | ||
| flexDirection: 'row', | ||
| width: 240, | ||
| height: 104, | ||
| fontSize: 12, | ||
| }} | ||
| > | ||
| <> | ||
| {ViewNode('设置常买', { | ||
| background: '#F8F8F8', | ||
| color: '#1A1A1A', | ||
| })} | ||
| {ViewNode('移入收藏', { | ||
| background: '#ffcc00', | ||
| color: '#FFF', | ||
| })} | ||
| {ViewNode('看相似', { | ||
| background: '#FF860D', | ||
| color: '#FFF', | ||
| })} | ||
| {ViewNode('删除', { | ||
| background: '#FA2C19', | ||
| color: '#FFF', | ||
| })} | ||
| </> | ||
| </div> | ||
| } | ||
| > | ||
| <Cell | ||
| title="左滑" | ||
| radius={0} | ||
| style={{ margin: 0, alignSelf: 'stretch' }} | ||
| /> | ||
| </Swipe> | ||
| </> | ||
| ) | ||
| } | ||
| export default App |
There was a problem hiding this comment.
这段代码展示了如何使用 Swipe 组件实现多个滑动操作按钮。ViewNode 函数用于生成具有特定样式和文本的节点。代码整体上实现了预期功能，但在行 19 使用了不必要的 Fragment。可以简化如下：
- <>{text}</>
+ text这样的修改可以去除不必要的 React Fragment，简化 DOM 结构。
Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const ViewNode = (text: string, style: any) => { | |
| return ( | |
| <div | |
| style={{ | |
| display: 'flex', | |
| width: 60, | |
| height: 104, | |
| flexDirection: 'column', | |
| justifyContent: 'center', | |
| alignItems: 'center', | |
| ...style, | |
| }} | |
| > | |
| <Del style={{ marginBottom: 8 }} /> | |
| <>{text}</> | |
| </div> | |
| ) | |
| } | |
| const App = () => { | |
| return ( | |
| <> | |
| <Swipe | |
| style={{ height: 104 }} | |
| rightAction={ | |
| <div | |
| style={{ | |
| display: 'flex', | |
| flexDirection: 'row', | |
| width: 240, | |
| height: 104, | |
| fontSize: 12, | |
| }} | |
| > | |
| <> | |
| {ViewNode('设置常买', { | |
| background: '#F8F8F8', | |
| color: '#1A1A1A', | |
| })} | |
| {ViewNode('移入收藏', { | |
| background: '#ffcc00', | |
| color: '#FFF', | |
| })} | |
| {ViewNode('看相似', { | |
| background: '#FF860D', | |
| color: '#FFF', | |
| })} | |
| {ViewNode('删除', { | |
| background: '#FA2C19', | |
| color: '#FFF', | |
| })} | |
| </> | |
| </div> | |
| } | |
| > | |
| <Cell | |
| title="左滑" | |
| radius={0} | |
| style={{ margin: 0, alignSelf: 'stretch' }} | |
| /> | |
| </Swipe> | |
| </> | |
| ) | |
| } | |
| export default App | |
| const ViewNode = (text: string, style: any) => { | |
| return ( | |
| <div | |
| style={{ | |
| display: 'flex', | |
| width: 60, | |
| height: 104, | |
| flexDirection: 'column', | |
| justifyContent: 'center', | |
| alignItems: 'center', | |
| ...style, | |
| }} | |
| > | |
| <Del style={{ marginBottom: 8 }} /> | |
| {text} | |
| </div> | |
| ) | |
| } | |
| const App = () => { | |
| return ( | |
| <> | |
| <Swipe | |
| style={{ height: 104 }} | |
| rightAction={ | |
| <div | |
| style={{ | |
| display: 'flex', | |
| flexDirection: 'row', | |
| width: 240, | |
| height: 104, | |
| fontSize: 12, | |
| }} | |
| > | |
| <> | |
| {ViewNode('设置常买', { | |
| background: '#F8F8F8', | |
| color: '#1A1A1A', | |
| })} | |
| {ViewNode('移入收藏', { | |
| background: '#ffcc00', | |
| color: '#FFF', | |
| })} | |
| {ViewNode('看相似', { | |
| background: '#FF860D', | |
| color: '#FFF', | |
| })} | |
| {ViewNode('删除', { | |
| background: '#FA2C19', | |
| color: '#FFF', | |
| })} | |
| </> | |
| </div> | |
| } | |
| > | |
| <Cell | |
| title="左滑" | |
| radius={0} | |
| style={{ margin: 0, alignSelf: 'stretch' }} | |
| /> | |
| </Swipe> | |
| </> | |
| ) | |
| } | |
| export default App |
Tools
Biome
[error] 19-19: Avoid using unnecessary Fragment. (lint/complexity/noUselessFragments)
A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
Unsafe fix: Remove the Fragment
src/utils/px-transform.ts
Outdated
| if (harmony()) return transform(value) | ||
| if (rn()) return value | ||
| return `${value}px` |
There was a problem hiding this comment.
此逻辑调整确保了在不同平台下，像素转换能够正确处理。建议添加单元测试以验证这些条件分支。
是否需要帮助编写这部分的单元测试？
| style={{ | ||
| ...(side === 'left' | ||
| ? { left: Number(`${-actionWidth.current.left}`) } | ||
| : {}), | ||
| }} |
There was a problem hiding this comment.
设置动态样式时，使用了展开操作符和条件表达式。这种方法虽然灵活，但可能会对性能产生影响，特别是在频繁更新样式的场景下。建议预先计算样式或使用 useMemo 钩子来优化性能。
- style={{
- ...(side === 'left' ? { left: Number(`${-actionWidth.current.left}`) } : {}),
- }}
+ style={getSwipeStyle(side, actionWidth)}Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| style={{ | |
| ...(side === 'left' | |
| ? { left: Number(`${-actionWidth.current.left}`) } | |
| : {}), | |
| }} | |
| style={getSwipeStyle(side, actionWidth)} |
| const App = () => { | ||
| const [shouldCatchMove, setShouldCatchMove] = useState(false) | ||
|
|
||
| return ( | ||
| <> | ||
| <View catchMove={shouldCatchMove}> | ||
| <Swipe | ||
| rightAction={ | ||
| <Button | ||
| type="primary" | ||
| shape="square" | ||
| style={{ alignSelf: 'stretch', height: pxTransform(46) }} | ||
| > | ||
| 删除 | ||
| </Button> | ||
| } | ||
| onTouchEnd={(e) => { | ||
| setShouldCatchMove(false) | ||
| }} | ||
| onTouchMove={(e) => { | ||
| setShouldCatchMove(true) | ||
| }} | ||
| > | ||
| <Cell | ||
| title="左滑删除" | ||
| radius={0} | ||
| style={{ margin: 0, alignSelf: 'stretch' }} | ||
| /> | ||
| </Swipe> | ||
| </View> | ||
| </> | ||
| ) | ||
| } |
There was a problem hiding this comment.
整体代码逻辑清晰，组件结构合理。但建议将触摸事件处理逻辑封装为一个独立的函数，以增强代码的可读性和可维护性。
- onTouchEnd={(e) => {
- setShouldCatchMove(false)
- }}
- onTouchMove={(e) => {
- setShouldCatchMove(true)
- }}
+ const handleTouchMove = (e) => {
+ setShouldCatchMove(e.type === 'touchmove')
+ }
+ onTouchEnd={handleTouchMove}
+ onTouchMove={handleTouchMove}Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const App = () => { | |
| const [shouldCatchMove, setShouldCatchMove] = useState(false) | |
| return ( | |
| <> | |
| <View catchMove={shouldCatchMove}> | |
| <Swipe | |
| rightAction={ | |
| <Button | |
| type="primary" | |
| shape="square" | |
| style={{ alignSelf: 'stretch', height: pxTransform(46) }} | |
| > | |
| 删除 | |
| </Button> | |
| } | |
| onTouchEnd={(e) => { | |
| setShouldCatchMove(false) | |
| }} | |
| onTouchMove={(e) => { | |
| setShouldCatchMove(true) | |
| }} | |
| > | |
| <Cell | |
| title="左滑删除" | |
| radius={0} | |
| style={{ margin: 0, alignSelf: 'stretch' }} | |
| /> | |
| </Swipe> | |
| </View> | |
| </> | |
| ) | |
| } | |
| const App = () => { | |
| const [shouldCatchMove, setShouldCatchMove] = useState(false) | |
| const handleTouchMove = (e) => { | |
| setShouldCatchMove(e.type === 'touchmove') | |
| } | |
| return ( | |
| <> | |
| <View catchMove={shouldCatchMove}> | |
| <Swipe | |
| rightAction={ | |
| <Button | |
| type="primary" | |
| shape="square" | |
| style={{ alignSelf: 'stretch', height: pxTransform(46) }} | |
| > | |
| 删除 | |
| </Button> | |
| } | |
| onTouchEnd={handleTouchMove} | |
| onTouchMove={handleTouchMove} | |
| > | |
| <Cell | |
| title="左滑删除" | |
| radius={0} | |
| style={{ margin: 0, alignSelf: 'stretch' }} | |
| /> | |
| </Swipe> | |
| </View> | |
| </> | |
| ) | |
| } |
| const App = () => { | ||
| const openRef = useRef<SwipeInstance>(null) | ||
| return ( | ||
| <> | ||
| <Swipe | ||
| ref={openRef} | ||
| rightAction={ | ||
| <Button | ||
| shape="square" | ||
| type="danger" | ||
| style={{ alignSelf: 'stretch', height: pxTransform(46) }} | ||
| > | ||
| 删除 | ||
| </Button> | ||
| } | ||
| > | ||
| <Cell | ||
| title="点击下方按钮打开或关闭" | ||
| radius={0} | ||
| style={{ margin: 0, alignSelf: 'stretch', boxShadow: 'none' }} | ||
| /> | ||
| </Swipe> | ||
| <View style={{ display: 'flex', flexDirection: 'row' }}> | ||
| <Button | ||
| onClick={() => openRef.current?.open('right')} | ||
| type="primary" | ||
| size="small" | ||
| > | ||
| <Text style={{ color: '#ffffff' }}>打开</Text> | ||
| </Button> | ||
| <Button size="small" onClick={() => openRef.current?.close()}> | ||
| 关闭 | ||
| </Button> | ||
| </View> | ||
| </> | ||
| ) | ||
| } | ||
| export default App |
There was a problem hiding this comment.
组件使用了SwipeInstance来控制滑动组件的状态，这是一种有效的方法。但是，建议将按钮点击事件处理逻辑封装成函数，而不是直接在JSX中实现，以提高代码的可维护性。
- onClick={() => openRef.current?.open('right')}
- onClick={() => openRef.current?.close()}
+ const handleOpen = () => openRef.current?.open('right')
+ const handleClose = () => openRef.current?.close()
+ onClick={handleOpen}
+ onClick={handleClose}Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const App = () => { | |
| const openRef = useRef<SwipeInstance>(null) | |
| return ( | |
| <> | |
| <Swipe | |
| ref={openRef} | |
| rightAction={ | |
| <Button | |
| shape="square" | |
| type="danger" | |
| style={{ alignSelf: 'stretch', height: pxTransform(46) }} | |
| > | |
| 删除 | |
| </Button> | |
| } | |
| > | |
| <Cell | |
| title="点击下方按钮打开或关闭" | |
| radius={0} | |
| style={{ margin: 0, alignSelf: 'stretch', boxShadow: 'none' }} | |
| /> | |
| </Swipe> | |
| <View style={{ display: 'flex', flexDirection: 'row' }}> | |
| <Button | |
| onClick={() => openRef.current?.open('right')} | |
| type="primary" | |
| size="small" | |
| > | |
| <Text style={{ color: '#ffffff' }}>打开</Text> | |
| </Button> | |
| <Button size="small" onClick={() => openRef.current?.close()}> | |
| 关闭 | |
| </Button> | |
| </View> | |
| </> | |
| ) | |
| } | |
| export default App | |
| const App = () => { | |
| const openRef = useRef<SwipeInstance>(null) | |
| const handleOpen = () => openRef.current?.open('right') | |
| const handleClose = () => openRef.current?.close() | |
| return ( | |
| <> | |
| <Swipe | |
| ref={openRef} | |
| rightAction={ | |
| <Button | |
| shape="square" | |
| type="danger" | |
| style={{ alignSelf: 'stretch', height: pxTransform(46) }} | |
| > | |
| 删除 | |
| </Button> | |
| } | |
| > | |
| <Cell | |
| title="点击下方按钮打开或关闭" | |
| radius={0} | |
| style={{ margin: 0, alignSelf: 'stretch', boxShadow: 'none' }} | |
| /> | |
| </Swipe> | |
| <View style={{ display: 'flex', flexDirection: 'row' }}> | |
| <Button | |
| onClick={handleOpen} | |
| type="primary" | |
| size="small" | |
| > | |
| <Text style={{ color: '#ffffff' }}>打开</Text> | |
| </Button> | |
| <Button size="small" onClick={handleClose}> | |
| 关闭 | |
| </Button> | |
| </View> | |
| </> | |
| ) | |
| } | |
| export default App |
| const App = () => { | ||
| const handleChange = () => { | ||
| Toast.show({ title: 'title' }) | ||
| } | ||
| return ( | ||
| <> | ||
| <Swipe | ||
| leftAction={ | ||
| <Button | ||
| shape="square" | ||
| type="success" | ||
| style={{ | ||
| alignSelf: 'stretch', | ||
| height: 46, | ||
| }} | ||
| > | ||
| 选择 | ||
| </Button> | ||
| } | ||
| rightAction={ | ||
| <> | ||
| <Button | ||
| shape="square" | ||
| type="danger" | ||
| style={{ alignSelf: 'stretch', height: 46 }} | ||
| > | ||
| 删除 | ||
| </Button> | ||
| <Button | ||
| shape="square" | ||
| type="info" | ||
| style={{ alignSelf: 'stretch', height: 46 }} | ||
| > | ||
| 收藏 | ||
| </Button> | ||
| </> | ||
| } | ||
| onActionClick={handleChange} | ||
| onOpen={() => Toast.show({ title: '打开' })} | ||
| onClose={() => Toast.show({ title: '关闭' })} | ||
| > | ||
| <Cell | ||
| title="事件" | ||
| radius={0} | ||
| style={{ margin: 0, alignSelf: 'stretch' }} | ||
| /> | ||
| </Swipe> | ||
| </> | ||
| ) | ||
| } | ||
| export default App |
There was a problem hiding this comment.
组件结构清晰，使用了多个滑动操作和Toast通知。建议将onActionClick, onOpen, 和 onClose的逻辑封装成独立的函数，以提高代码的可维护性和可读性。
- onActionClick={handleChange}
- onOpen={() => Toast.show({ title: '打开' })}
- onClose={() => Toast.show({ title: '关闭' })}
+ const handleActionClick = () => {
+ handleChange();
+ Toast.show({ title: '操作' });
+ }
+ const handleOpen = () => Toast.show({ title: '打开' });
+ const handleClose = () => Toast.show({ title: '关闭' });
+ onActionClick={handleActionClick}
+ onOpen={handleOpen}
+ onClose={handleClose}Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const App = () => { | |
| const handleChange = () => { | |
| Toast.show({ title: 'title' }) | |
| } | |
| return ( | |
| <> | |
| <Swipe | |
| leftAction={ | |
| <Button | |
| shape="square" | |
| type="success" | |
| style={{ | |
| alignSelf: 'stretch', | |
| height: 46, | |
| }} | |
| > | |
| 选择 | |
| </Button> | |
| } | |
| rightAction={ | |
| <> | |
| <Button | |
| shape="square" | |
| type="danger" | |
| style={{ alignSelf: 'stretch', height: 46 }} | |
| > | |
| 删除 | |
| </Button> | |
| <Button | |
| shape="square" | |
| type="info" | |
| style={{ alignSelf: 'stretch', height: 46 }} | |
| > | |
| 收藏 | |
| </Button> | |
| </> | |
| } | |
| onActionClick={handleChange} | |
| onOpen={() => Toast.show({ title: '打开' })} | |
| onClose={() => Toast.show({ title: '关闭' })} | |
| > | |
| <Cell | |
| title="事件" | |
| radius={0} | |
| style={{ margin: 0, alignSelf: 'stretch' }} | |
| /> | |
| </Swipe> | |
| </> | |
| ) | |
| } | |
| export default App | |
| const App = () => { | |
| const handleChange = () => { | |
| Toast.show({ title: 'title' }) | |
| } | |
| const handleActionClick = () => { | |
| handleChange(); | |
| Toast.show({ title: '操作' }); | |
| } | |
| const handleOpen = () => Toast.show({ title: '打开' }); | |
| const handleClose = () => Toast.show({ title: '关闭' }); | |
| return ( | |
| <> | |
| <Swipe | |
| leftAction={ | |
| <Button | |
| shape="square" | |
| type="success" | |
| style={{ | |
| alignSelf: 'stretch', | |
| height: 46, | |
| }} | |
| > | |
| 选择 | |
| </Button> | |
| } | |
| rightAction={ | |
| <> | |
| <Button | |
| shape="square" | |
| type="danger" | |
| style={{ alignSelf: 'stretch', height: 46 }} | |
| > | |
| 删除 | |
| </Button> | |
| <Button | |
| shape="square" | |
| type="info" | |
| style={{ alignSelf: 'stretch', height: 46 }} | |
| > | |
| 收藏 | |
| </Button> | |
| </> | |
| } | |
| onActionClick={handleActionClick} | |
| onOpen={handleOpen} | |
| onClose={handleClose} | |
| > | |
| <Cell | |
| title="事件" | |
| radius={0} | |
| style={{ margin: 0, alignSelf: 'stretch' }} | |
| /> | |
| </Swipe> | |
| </> | |
| ) | |
| } | |
| export default App |
| @@ -1,12 +1,8 @@ | |||
| import Taro, { pxTransform as transform } from '@tarojs/taro' | |||
| import { pxTransform as transform } from '@tarojs/taro' | |||
| import { harmony, rn } from './platform-taro' | |||
There was a problem hiding this comment.
这种可以单独提~~ 要不总要等待其他功能才能被合并~~
# Conflicts: # packages/nutui-taro-demo-rn/scripts/taro/adapted.js
…wipe-standard # Conflicts: # packages/nutui-taro-demo-rn/scripts/taro/adapted.js
xiaoyatong
left a comment
xiaoyatong
left a comment
There was a problem hiding this comment.
鸿蒙下滑动会很费劲，并且不是很好的展示，可查看卡片场景。
# Conflicts: # src/utils/px-transform.ts
| 'configprovider', | ||
| 'input', | ||
| ] | ||
| exports = module.exports = ["cell","cellgroup","overlay","button","switch","countdown","empty","price","tag","layout","row","col","space","grid","griditem","divider","image","resultpage","skeleton","notify","pagination","swiper","textarea","indicator","hoverbutton","safearea","hoverbuttonitem","configprovider","input","swipe"]; No newline at end of file |
There was a problem hiding this comment.
避免重新分配全局变量可能导致的问题。
- exports = module.exports = ["cell","cellgroup","overlay","button","switch","countdown","empty","price","tag","layout","row","col","space","grid","griditem","divider","image","resultpage","skeleton","notify","pagination","swiper","textarea","indicator","hoverbutton","safearea","hoverbuttonitem","configprovider","input","swipe"];
+ const exportsList = ["cell","cellgroup","overlay","button","switch","countdown","empty","price","tag","layout","row","col","space","grid","griditem","divider","image","resultpage","skeleton","notify","pagination","swiper","textarea","indicator","hoverbutton","safearea","hoverbuttonitem","configprovider","input","swipe"];
+ module.exports = exportsList;Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| exports = module.exports = ["cell","cellgroup","overlay","button","switch","countdown","empty","price","tag","layout","row","col","space","grid","griditem","divider","image","resultpage","skeleton","notify","pagination","swiper","textarea","indicator","hoverbutton","safearea","hoverbuttonitem","configprovider","input","swipe"]; | |
| const exportsList = ["cell","cellgroup","overlay","button","switch","countdown","empty","price","tag","layout","row","col","space","grid","griditem","divider","image","resultpage","skeleton","notify","pagination","swiper","textarea","indicator","hoverbutton","safearea","hoverbuttonitem","configprovider","input","swipe"]; | |
| module.exports = exportsList; |
Tools
Biome
[error] 1-1: A global variable should not be reassigned. (lint/suspicious/noGlobalAssign)
Assigning to a global variable can override essential functionality.
# Conflicts: # packages/nutui-taro-demo-rn/scripts/taro/adapted.js
2 participants
Conflicts:
packages/nutui-taro-demo-rn/scripts/taro/adapted.js<!--
非常感谢您的贡献 维护者审核通过后会合并。
请确保填写以下 pull request 的信息，谢谢！~
-->
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新特性
Swipe组件到导出模块列表中。Bug 修复
useTouch功能以更稳健地处理触摸事件。样式
文档
Swipe组件的不同用法，包括删除、收藏、移动和查看相似项功能。