Swipeout

Last Updated on : 2024-06-05 03:14:34download

Overview

Swipeout is an operating component that demonstrates sideways sliding.

Code demo

Note: for more information, see Demo.

Basic use

import React from "react"; import { View } from "react-native"; import { Swipeout } from "tuya-panel-kit"; export default class SwipeoutDemo extends React.PureComponent { render() { const rightBtn = [ { text: "Delete", onPress: () => this.delete(), type: "delete", textStyle: { color: "#fff", fontSize: 16 }, }, ]; return ( <View style={styles.wrApper}> <Swipeout autoClose right={rightBtn}> <View style={styles.content} /> </Swipout> </View> ); } }

Work with FlatList

import React from 'react'; import { View, Text, FlatList } from 'react-native'; import { Swipeout } from 'tuya-panel-kit'; export default class SwipeoutDemo extends React.PureComponent { constructor(props) { super(props); this.state = { dataSource: [{ key: 1, title: 'first', rowOpen: false }, { key: 2, title: 'second', rowOpen: false }]; } } swipeoutOnOpen = index => { const dataSource = [].concat(this.state.dataSource); dataSource.forEach((item, mindex) => { item.rowOpen = mindex === index ? true : false; }); this.setState({ dataSource }); } delete = index => { let dataSource = [].concat(this.state.dataSource); dataSource.splice(index, 1); this.setState({ dataSource }); } renderItem = ({ item, index }) => { <Swipeout autoClose onOpen={() => this.swipeoutOnOpen(index)} close={! this.state.dataSource[index].rowOpen} right={[{ text: 'Delete', onPress: () => this.delete(index), type: 'delete', fontStyle: { color: '#fff', fontSize: 16 } }]} > <Text>{item.title}</Text> </Swipeout> } render() { <FlatList keyExtractor={(item) => item.key} data={this.state.dataSource} renderItem={this.renderItem} /> } }

Interaction demo

Swipeout

API

style

The style of the swipeout component.

Type Required
ViewPropTypes.style No

left

Swipeout buttons on the left.

Type Required
array[actionButton] No

right

Swipeout buttons on the right.

Type Required
array[actionButton] No

buttonWidth

Width of the button that appears after swipeout.

Type Required
number No

backgroundColor

Set the background color of the swipeout component.

Type Required Default value
string No #dbddde

disabled

Whether to disable the swipeout operation.

Type Required Default value
bool No false

close

When the value of the close parameter is changed from false to true, all swipeout buttons will be hidden. When true changes to false, there is no change.

Type Required Default value
bool No false

autoClose

When the swipeout button appears, click the button to automatically hide all buttons.

Type Required Default value
bool No false

sectionId

Section ID.

Type Required Default value
number No -1

rowId

Row ID.

Type Required Default value
number No -1

onOpen

Callback for full display of buttons on either side, with the following parameters:

  • sectionId: the ID of the section where it is located.
  • rowId: the ID of the row where it is located.
Type Required
(sectionId, rowId) => void No

onClose

Callback for full display of buttons on either side, with the following parameters:

  • sectionId: the ID of the section where it is located.
  • rowId: the ID of the row where it is located.
  • direction: on the left or right, left or right.
Type Required
(sectionId, rowId, direction?) => void No

actionButton API

key

Button key.

Type Required
string/number No

disabled

Whether the button can be clicked.

Type Required Default value
string|number No false

onPress

Callback of clicking the button.

Type Required
() => void No

content

Custom button. If content is set, the following properties are invalid.

Type Required
React.ReactElemrnt No

backgroundColor

Set the button color.

Type Required
Color No

color

Set the font color in the button.

Type Required
Color No

text

Set the text in the button.

Type Required
string No

type

Set the button type:

  • delete: the background color is #fb3d38.
  • primary: the background color is #006fff.
  • secondary: the background color is #fd9427.
Type Required
enum: ‘delete’, ‘primary’, ‘secondary’ No

fontSize

Set the text size in the button.

Type Required Default value
number No 14

textStyle

Set the text style of the button.

Type Required
Text.propTypes.style No