Package detail

@jarryd/rc-swipeout

JarrydTrokis292.0.9

swipe out ui component for react(web and react-native)

react, react-component, swipeout, rc-swipeout, swipe delete

readme

rc-swipeout

iOS-style swipeout buttons that appear from behind a component (web & react-native support)

Screenshots

rc-swipeout

Installation

npm install --save rc-swipeout

Development

web:
npm install
npm start

rn:
tnpm run rn-start

Example

local: http://localhost:8000/examples/
online: http://react-component.github.io/swipeout/

react-native

./node_modules/rc-tools run react-native-init
react-native run-ios

Usage

import Swipeout from 'rc-swipeout';
import 'rc-swipeout/assets/index.less'; (web only)

<Swipeout
  left={[
    {
      text: 'reply',
      onPress:() => console.log('reply'),
      style: { backgroundColor: 'orange', color: 'white' },
      className: 'custom-class-1'
    }
  ]}
  right={[
    {
      text: 'delete',
      onPress:() => console.log('delete'),
      style: { backgroundColor: 'red', color: 'white' },
      className: 'custom-class-2'
    }
  ]}
  onOpen={() => console.log('open')}
  onClose={() => console.log('close')}
>
  <div style={{height: 44}}> swipeout demo </div>
</Swipeout>

API

props

name	description	type	default
prefixCls	className prefix	String	`rc-swipeout`
style	swipeout style	Object
left	swipeout buttons on left	Array	`[]`
right	swipeout buttons on right	Array	`[]`
autoClose	auto close on button press	Boolean	`function() {}`
onOpen	\| Function	`function() {}`
onClose	\| Function	`function() {}`
disabled	disabled swipeout	Boolean	`false`

button props

name	description	type	default
text	button text	String	`Click`
style	button style	Object
onPress	button press function	Function	`function() {}`
className	button custom class	String

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

rc-swipeout is released under the MIT license.

changelog

History

2.0.0

replace hammer.js width rc-gesture

1.4.5

replace object.omit, update style

~1.4.4

improve: disabled swipe if deltaX < deltaY

1.4.0

improve: auto width for swipe buttons, #40

1.3.8

fixed: only one hand can be swiped if left or right is null.

~1.3.7

fixed removeEventListener bug;
fixed binding and unbinding event bug;
support es module;
update deps;

1.3.1

update react-native-swipeout version

1.2.7

new: role="button"

1.2.6

new: support className for button;

1.2.5

fix: onCloseSwipe prefixCls bug;

1.2.3

add cover div, for body touchstart
fix: buttons cannot be hidden when pan short distance

1.2.2

prevent default of event;

1.2.1

support onClose for rn;

1.2.0

click body to close swipe buttons; #19, #10
support event arg for onPress; #18
swipe to close for web;

1.1.5

fix issue/9

1.1.4

use babel-runtime

1.1.3

update deps

1.1.0

[new] react-native support

1.0.2

[fix] error if this.refs.left/right is []

1.0.1

[fix] npm package empty

1.0.0

init project