Swipeout

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

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