From 9c042282afee0c4ae5d9b059619ee3f9bb9a6309 Mon Sep 17 00:00:00 2001 From: Alberto Schiabel Date: Mon, 23 Jan 2017 09:23:19 +0100 Subject: [PATCH 1/6] Added Icon capability --- src/Swipeout.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/Swipeout.js b/src/Swipeout.js index 016d2d8..a6ee2a0 100644 --- a/src/Swipeout.js +++ b/src/Swipeout.js @@ -1,6 +1,7 @@ import React, { PropTypes } from 'react'; import { View, Text } from 'react-native'; import Swipe from 'react-native-swipe-out'; +import Icon as FontAwesomeIcon from 'react-native-vector-icons/FontAwesome'; import splitObject from './util/splitObject'; class Swipeout extends React.Component { @@ -35,12 +36,29 @@ class Swipeout extends React.Component { renderCustomButton(button) { const buttonStyle = button.style || {}; const bgColor = buttonStyle.backgroundColor || 'transparent'; + const icon = button.icon || null; + const iconStyle = icon && icon.style || {}; + const iconType = icon && icon.type || 'FontAwesome'; // TODO: support Ionicons, MaterialIcons etc + const iconName = icon && icon.name || null; + const iconSize = icon && icon.size || 15; + const iconColor = icon && icon.color || 'black'; + const Component = ( + { + iconName && ( + + ) + } {button.text} From 7622d9b7954c70a036b0af2c0b5a9cb7cc42b8cf Mon Sep 17 00:00:00 2001 From: Alberto Schiabel Date: Mon, 23 Jan 2017 09:33:44 +0100 Subject: [PATCH 2/6] Added react-native-vector-icons --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 7a8e33a..1cd58e2 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,8 @@ "babel-runtime": "6.x", "object.omit": "~2.0.0", "react-hammerjs": "^0.5.0", - "react-native-swipe-out": "~2.0.12" + "react-native-swipe-out": "~2.0.12", + "react-native-vector-icons": "^4.0.0" }, "devDependencies": { "expect.js": "0.3.x", From 4bd62ec6fb246a32e867b0df39522c988a871582 Mon Sep 17 00:00:00 2001 From: Alberto Schiabel Date: Mon, 23 Jan 2017 09:45:49 +0100 Subject: [PATCH 3/6] Update Swipeout.js --- src/Swipeout.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/Swipeout.js b/src/Swipeout.js index a6ee2a0..53f697b 100644 --- a/src/Swipeout.js +++ b/src/Swipeout.js @@ -1,7 +1,7 @@ import React, { PropTypes } from 'react'; import { View, Text } from 'react-native'; import Swipe from 'react-native-swipe-out'; -import Icon as FontAwesomeIcon from 'react-native-vector-icons/FontAwesome'; +import Icon from 'react-native-vector-icons/FontAwesome'; import splitObject from './util/splitObject'; class Swipeout extends React.Component { @@ -38,11 +38,12 @@ class Swipeout extends React.Component { const bgColor = buttonStyle.backgroundColor || 'transparent'; const icon = button.icon || null; const iconStyle = icon && icon.style || {}; - const iconType = icon && icon.type || 'FontAwesome'; // TODO: support Ionicons, MaterialIcons etc + // TODO: support Ionicons, MaterialIcons etc + // const iconType = icon && icon.type || 'FontAwesome'; const iconName = icon && icon.name || null; const iconSize = icon && icon.size || 15; const iconColor = icon && icon.color || 'black'; - + const Component = ( { iconName && ( - Date: Mon, 23 Jan 2017 09:58:08 +0100 Subject: [PATCH 4/6] Added docs for the icon props --- README.md | 50 +++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 49 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 061896c..4e337e6 100644 --- a/README.md +++ b/README.md @@ -38,7 +38,7 @@ tnpm run rn-start - local: http://localhost:8000/examples/ - online: http://react-component.github.io/swipeout/ -## Usage +## Normal usage ```js import Swipeout from 'rc-swipeout'; @@ -67,6 +67,39 @@ import 'rc-swipeout/assets/index.less'; ``` +## Usage with text and Icon [React Native only for the moment] + +```js +import Swipeout from 'rc-swipeout/lib'; +import 'rc-swipeout/assets/index.less'; + + console.log('reply'), + style: { backgroundColor: 'orange', color: 'white' }, + icon: { + name: 'clock-o', + size: 30 + } + } + ]} + right={[ + { + text: 'delete', + onPress:() => console.log('delete'), + style: { backgroundColor: 'red', color: 'white' } + } + ]} + onOpen={() => console.log('open')} + onClose={() => console.log('close')} +> +
swipeout demo
+ + +``` + For the React Native version, use the following import statement. ```js @@ -93,9 +126,24 @@ import Swipeout from 'rc-swipeout/lib' | name | description | type | default | |-------------|------------------------|--------|------------| | text | button text | String | `Click` | +| icon | icon props | Object | undefined | | style | button style | Object | `` | | onPress | button press function | Function | `function() {}` | +### icon props [React Native only for the moment] + +| name | description | type | default | +|-------------|------------------------|--------|------------| +| name | font-awesome name without `fa fa-` | String | undefined | +| color | icon props | String | `black` | +| style | button style | Object | `` | +| size | icon size | number | 15 | + +### Pay attention +This package depends on the beautiful [Vector Icons for React Native](https://github.com/oblador/react-native-vector-icons). + +After installing NavbarNative, in order to have **icons working**, please follow instructions about [HOW TO INSTALL AND LINK VECTOR ICONS](https://github.com/oblador/react-native-vector-icons) in your project. + ## Test Case ``` From 0692fadca6fb5baeafabf3c5ac43c831afdb0462 Mon Sep 17 00:00:00 2001 From: Alberto Schiabel Date: Mon, 23 Jan 2017 09:59:04 +0100 Subject: [PATCH 5/6] Fixed newly added typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 4e337e6..41cb8f5 100644 --- a/README.md +++ b/README.md @@ -136,7 +136,7 @@ import Swipeout from 'rc-swipeout/lib' |-------------|------------------------|--------|------------| | name | font-awesome name without `fa fa-` | String | undefined | | color | icon props | String | `black` | -| style | button style | Object | `` | +| style | icon style | Object | `` | | size | icon size | number | 15 | ### Pay attention From b9f31e0a0975d38b93241e039db5b27ae0bd6eb0 Mon Sep 17 00:00:00 2001 From: Alberto Schiabel Date: Mon, 23 Jan 2017 10:01:50 +0100 Subject: [PATCH 6/6] Fixed typos --- src/Swipeout.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Swipeout.js b/src/Swipeout.js index 53f697b..daf08b9 100644 --- a/src/Swipeout.js +++ b/src/Swipeout.js @@ -36,13 +36,13 @@ class Swipeout extends React.Component { renderCustomButton(button) { const buttonStyle = button.style || {}; const bgColor = buttonStyle.backgroundColor || 'transparent'; - const icon = button.icon || null; + const icon = button.icon || undefined; const iconStyle = icon && icon.style || {}; // TODO: support Ionicons, MaterialIcons etc // const iconType = icon && icon.type || 'FontAwesome'; - const iconName = icon && icon.name || null; + const iconName = icon && icon.name; const iconSize = icon && icon.size || 15; - const iconColor = icon && icon.color || 'black'; + const iconColor = icon && icon.color || iconStyle.color || 'black'; const Component = (