react-swipe-to-reveal-options2

Description

Table of Contents

• Installation
• Components
  • Swipeable
  • SwipeItem
  • SwipeToRevealList
  • SwipeToRevealOptions
• Example

Installation

npm install --save react-swipe-to-reveal-options2
 
or
 
yarn add react-swipe-to-reveal-option2
 

Components

SwipeToRevealList

The SwipeToRevealList is a single component to provide a list of swipeable items. Example

const items = [
      {
        leftOptions: [{
          label: 'Trash',
          class: 'trash'
        }],
        rightOptions: [{
          label: 'Move',
          class: 'move',
        },{
          label: 'Archive',
          class: 'archive',
        }],
        content: "Mail from Mathieu",
        callActionWhenSwipingFarLeft: true,
        callActionWhenSwipingFarRight: true
      },
];
 
const Example=()=>(
<SwipeToRevealList items={items} width={window.innerWidth}>
)
 
 

PropTypes

Name	Type	Default	Description
width	Number	window.InnerWidth	Width of list required
items	Array	[]	Array of SwipePropType

---

Swipeable

<Swipeable>

PropTypes

Name	Type	Default	Description
delta	Number	10
flickThreshold	Number	0.6
onSwiped	func	()=>{}	Action to perform on swiped
onSwipedDown	func	()=>{}	Action to perform when swiped down
onSwipedLeft	func	()=>{}	Action to perform when swiped left
onSwipedRight	func	()=>{}	Action to perform when swiped right
onSwipedUp	func	()=>{}	Action to perform on swiping up
onSwipingDown	func	()=>{}	Action to perform on swiping down
onSwipingLeft	func	()=>{}	Action to perform on swiping left
onSwipingRight	func	()=>{}	Action to perform on swiping right
onSwipingUp	func	()=>{}	Action to perform on swiping up

---

SwipeItem

Name	Type	Default	Description
disabled	Boolean	false	Disables item
onDoubleClick	func	()=>{})	Action on double click
onSingleTap	func	()=>{})	Action on single click
threshold	Number	45	Threshold

OptionType

Name	Type	Default	Description
label	String	''	label
class	String	''	label

SwipeItemPropType

Name	Type	Default	Description
leftOptions	Array of OptionType	[]
rightOptions	Array of OptionType	[]
callActionWhenSwipingFarLeft	bool	{}
callActionWhenSwipingFarRight	bool	{}

Name	Type	Default	Description
width	Number	window.InnerWidth	Width of list required
items	Array	[]	Array of SwipePropType

SwipeToRevealOptions

Example

Controlled usage:

var SwipeToRevealOptions = require('react-swipe-to-reveal-options');
 
var App = React.createClass({
  render() {
    var items = [
      {
        leftOptions: [{
          label: 'Trash',
          class: 'trash'
        }],
        rightOptions: [{
          label: 'Move',
          class: 'move',
        },{
          label: 'Archive',
          class: 'archive',
        }],
        content: "Mail from Mathieu",
        callActionWhenSwipingFarLeft: true,
        callActionWhenSwipingFarRight: true
      },
      {
        leftOptions: [{
          label: 'Trash',
          class: 'trash'
        }],
        rightOptions: [{
          label: 'Move',
          class: 'move',
        },{
          label: 'Archive',
          class: 'archive',
        }],
        content: "Mail from Arseny",
        callActionWhenSwipingFarRight: true,
        callActionWhenSwipingFarLeft: false
      },
      {
        leftOptions: [{
          label: 'Trash',
          class: 'trash'
        }],
        rightOptions: [{
          label: 'Move',
          class: 'move',
        },{
          label: 'Archive',
          class: 'archive',
        }],
        content: "Mail from Bruno",
        callActionWhenSwipingFarRight: false,
        callActionWhenSwipingFarLeft: false
      }
    ];
    return (
      <div>
        items.map(function(item) {
          return (
            <SwipeToRevealOptions
              leftOptions={item.leftOptions}
              rightOptions={item.rightOptions}
              callActionWhenSwipingFarRight={item.callActionWhenSwipingFarRight}
              callActionWhenSwipingFarLeft={item.callActionWhenSwipingFarLeft}
            >
              {item.content}
            </SwipeToRevealOptions>
          );
        })
      </div>
    );
  },
 
});

API

Props

All props are optional.

rightOptions

Array of objects defining the options on the right. Each object need a label (which can be html) and a class. Default to [].

leftOptions

Array of objects defining the options on the left. Each object need a label (which can be html) and a class. Default to [].

className

Class of the Component

actionThreshold

Threshold (in px) before which the default action (if any, see callActionWhenSwipingFar) is called. Default to 300.

visibilityThreshold

Threshold (in px) before which the options are visible. Default to 50.

transitionBackTimeout

Timeout (in ms) of the transition to the default state. Default to 400.

callActionWhenSwipingFarLeft

Boolean defining if swiping far to the left should called the right most option. Default to false.

callActionWhenSwipingFarRight

Boolean defining if swiping far to the right should called the left most option. Default to false.

closeOthers

Function called when swiping. Useful to close other items in a list.

onRightClick

Function called when clicking on an option on the right. Received the clicked option as an argument.

Also called swiping far to the left (if applicable).

onLeftClick

Function called when clicking on an option on the left. Received the clicked option as an argument.

Also called swiping far to the right (if applicable).

transitionBackOnRightClick

Boolean defining if it should transition back to the default state after a right-side item is clicked/tapped. Defaults to true.

transitionBackOnLeftClick

Boolean defining if it should transition back to the default state after a left-side item is clicked/tapped. Defaults to true.

onReveal

Function called when showing options once the swipe is over. Receive 'left' or 'right'as an argument.

maxItemWidth

Maximum width (in px) of an option. Default to 120.

parentWidth

Width of the parent (in px). Default to the size of the screen.

Methods

close()

Hide the options.

revealLeft()

Reveal the left options.

revealRight()

Reveal the right options.

Styles

Look at react-swipe-to-reveal-options.css for an idea on how to style this component.

Contribute

To build form source:

$ gulp

---

License

MIT © mookiejones