Skip to content

Commit

Permalink
Merge pull request #31 from santomegonzalo/optimizations
Browse files Browse the repository at this point in the history 
optimizations and documentation
  • Loading branch information
@santomegonzalo
santomegonzalo authored Mar 25, 2018
2 parents 8b34ca0 + a7d5b70 commit 0912912
Show file tree
Hide file tree
Showing 5 changed files with 407 additions and 203 deletions.
37 changes: 17 additions & 20 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,13 @@ Floating action button for React Native

Open the following click on your phone: [Expo link](https://expo.io/@santomegonzalo/ReactNativeFloatingAction-Expo)

<img width="350" alt="Use it on Expo" src="https://user-images.githubusercontent.com/2914973/34082582-667c5738-e361-11e7-9251-5af5549b525c.png">

## Images

<img src="https://user-images.githubusercontent.com/2914973/27517002-84316402-59c4-11e7-987c-fd3b44af84ae.gif" width="350">

<img src="https://user-images.githubusercontent.com/2914973/27517000-841d17e0-59c4-11e7-8804-1192dbc98af5.gif" width="350">
or user your phone and scan the following QR:

<img src="https://user-images.githubusercontent.com/2914973/27517001-841df002-59c4-11e7-91e6-2a03bba66fe7.gif" width="350">
<img width="350" alt="Use it on Expo" src="https://user-images.githubusercontent.com/2914973/34082582-667c5738-e361-11e7-9251-5af5549b525c.png">

<img src="https://user-images.githubusercontent.com/2914973/27517003-8444c42a-59c4-11e7-9a8c-5e007708675b.gif" width="350">
## Example of how Expo looks

<img src="https://user-images.githubusercontent.com/2914973/29421294-e74df51c-8374-11e7-96ca-62675075f8e8.gif" width="350">
<img src="https://user-images.githubusercontent.com/2914973/37876447-c5f553d0-304c-11e8-8c4f-7d6ef97d752c.gif" width="350">

## Installation

Expand All @@ -30,16 +24,20 @@ or
yarn add react-native-floating-action
```

## Usage
## Example

To see how works, take a look into **example/ReactNativeFloatingAction-Expo**
Take a look into **example/ReactNativeFloatingAction-Expo**

To execute an example using Expo run the following command:
To execute the example using **Expo** run the following command:

```bash
yarn test
yarn run run:example
```

or open [Expo link](https://expo.io/@santomegonzalo/ReactNativeFloatingAction-Expo) from your mobile

## How to use it

**First step:** import the component:

```javascript
Expand Down Expand Up @@ -92,7 +90,7 @@ import { FloatingAction } from 'react-native-floating-action';

### Open and hide it programatically

There are some cases where we want to show or hide the component without doing pressing the main button. For that we could do the following:
There are some cases where you want to show or hide the component without pressing the main button:

```javascript
<FloatingAction
Expand All @@ -102,22 +100,20 @@ There are some cases where we want to show or hide the component without doing p
/>
```

and then we could do the following
and then:

```javascript
this.floatingAction.animateButton();
```

and that is everything.

## Configuration

**FloatingAction**

| Property | Type | Default | Description |
|-------------------------|-----------------------|-----------------------|---------------------------------------------------------------------------------------------------------------------|
| actions | array | [] | Actions to be show once user press the main button |
| buttonColor | string | #1253bc | Color of the main button |
| color | string | #1253bc | Color of the main button |
| distanceToEdge | number | 30 | Distance from button to edge |
| visible | boolean | true | Hide or Show the component using an animation |
| overlayColor | string | rgba(68, 68, 68, 0.6) | Color of the background overlay |
Expand All @@ -137,9 +133,10 @@ and that is everything.
| color | string | #1253bc | Color of the action button |
| icon | any | | Icon to be rendered inside the action, will accept an URL or React.Image. If we want to send an URL we need to send it in this way: icon: **{ uri: 'https://imageurl.com' }** if we want to send a React.Image we will use it in this way: **icon: require('path/image')** |
| name | string | | Name of the icon, this name is used as parameter for **onPressItem** action |
| text | string | | Text to show near to the button. This option only works for **position = ['left', 'right']** |
| text | string | | Text to show near to the button. (Only apply for **position = ['left', 'right']**) |
| textBackground | string | #ffffff | Background color for Text container |
| textColor | string | #444444 | Text color for every action |
| textElevation | number | 5 | Elevation property (only android) |

## TODO

Expand Down
68 changes: 36 additions & 32 deletions component/FloatingAction.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React, { Component } from 'react'; // eslint-disable-line
import PropTypes from 'prop-types';
import { sortBy, isNil } from 'lodash';
import {
StyleSheet,
Image,
Expand All @@ -23,8 +22,7 @@ class FloatingAction extends Component {
super(props);

this.state = {
active: false,
visible: props.visible
active: false
};

this.animation = new Animated.Value(0);
Expand Down Expand Up @@ -100,6 +98,7 @@ class FloatingAction extends Component {
floatingIcon,
onPressMain
} = this.props;
const { active } = this.state;

if (overrideWithAction) {
this.handlePressItem(actions[0].name);
Expand All @@ -108,11 +107,11 @@ class FloatingAction extends Component {
}

if (onPressMain) {
onPressMain(!this.state.active);
onPressMain(!active);
}

if (!this.state.active) {
if (isNil(floatingIcon)) {
if (!active) {
if (!floatingIcon) {
Animated.spring(this.animation, { toValue: 1 }).start();
}

Expand All @@ -137,12 +136,20 @@ class FloatingAction extends Component {

renderMainButton() {
const {
buttonColor,
// @deprecated in favor of "color"
buttonColor, // eslint-disable-line
color,
position,
overrideWithAction,
distanceToEdge
} = this.props;

if (buttonColor) {
console.warn('FloatingAction: "buttonColor" property was deprecated. Please use "color"');
}

const mainButtonColor = buttonColor || color;

const animatedVisibleView = {
transform: [{
rotate: this.visibleAnimation.interpolate({
Expand Down Expand Up @@ -171,7 +178,7 @@ class FloatingAction extends Component {
}

const Touchable = getTouchableComponent();
const propStyles = { backgroundColor: buttonColor, bottom: distanceToEdge };
const propStyles = { backgroundColor: mainButtonColor, bottom: distanceToEdge };
if (['left', 'right'].indexOf(position) > -1) {
propStyles[position] = distanceToEdge;
}
Expand All @@ -186,7 +193,7 @@ class FloatingAction extends Component {
]}
>
<Touchable
{...getRippleProps(buttonColor)}
{...getRippleProps(mainButtonColor)}
style={styles.button}
activeOpacity={0.85}
onPress={this.animateButton}
Expand All @@ -205,9 +212,7 @@ class FloatingAction extends Component {
position,
overrideWithAction,
distanceToEdge,
actionsPaddingTopBottom,
actionsTextBackground,
actionsTextColor
actionsPaddingTopBottom
} = this.props;
const { active } = this.state;

Expand All @@ -226,14 +231,16 @@ class FloatingAction extends Component {
bottom: ACTION_BUTTON_SIZE + distanceToEdge + actionsPaddingTopBottom
}];

if (this.state.active) {
if (active) {
actionsStyles.push(styles[`${position}ActionsVisible`]);
}

const sortedActions = actions.sort((a, b) => a.position - b.position);

return (
<Animated.View style={actionsStyles} pointerEvents="box-none">
{
sortBy(actions, ['position']).map((action) => {
sortedActions.map((action) => {
const textColor = action.textColor || action.actionsTextColor;
const textBackground = action.textBackground || action.actionsTextBackground;

Expand All @@ -249,7 +256,7 @@ class FloatingAction extends Component {
active={active}
onPress={this.handlePressItem}
/>
)
);
})
}
</Animated.View>
Expand Down Expand Up @@ -279,7 +286,7 @@ class FloatingAction extends Component {
style={[styles.overlay, { backgroundColor: 'transparent' }]}
>
{
active && showBackground &&
(active && showBackground) &&
this.renderTappableBackground()
}
{
Expand All @@ -294,36 +301,33 @@ class FloatingAction extends Component {
}

FloatingAction.propTypes = {
actionsPaddingTopBottom: PropTypes.number,
visible: PropTypes.bool,
actions: PropTypes.arrayOf(PropTypes.shape({
buttonColor: PropTypes.string,
text: PropTypes.string,
color: PropTypes.string,
icon: PropTypes.any.isRequired,
name: PropTypes.string.isRequired,
position: PropTypes.number.isRequired
text: PropTypes.string,
textBackground: PropTypes.string,
textColor: PropTypes.string
})),
actionsTextBackground: PropTypes.string, // @deprecated in favor of textBackground
actionsTextColor: PropTypes.string, // @deprecated in favor of textColor
textBackground: PropTypes.string,
textColor: PropTypes.string,
position: PropTypes.oneOf(['right', 'left', 'center']),
buttonColor: PropTypes.string,
color: PropTypes.string,
distanceToEdge: PropTypes.number,
visible: PropTypes.bool,
overlayColor: PropTypes.string,
position: PropTypes.oneOf(['right', 'left', 'center']),
overrideWithAction: PropTypes.bool, // replace mainAction with first action from actions
floatingIcon: PropTypes.any,
overrideWithAction: PropTypes.bool, // use the first action like main action
onPressItem: PropTypes.func,
distanceToEdge: PropTypes.number,
openOnMount: PropTypes.bool,
showBackground: PropTypes.bool,
openOnMount: PropTypes.bool,
actionsPaddingTopBottom: PropTypes.number,
onPressItem: PropTypes.func,
onPressMain: PropTypes.func
};

FloatingAction.defaultProps = {
actionsPaddingTopBottom: 8,
overrideWithAction: false,
visible: true,
buttonColor: '#1253bc',
color: '#1253bc',
overlayColor: 'rgba(68, 68, 68, 0.6)',
position: 'right',
distanceToEdge: 30,
Expand Down
29 changes: 17 additions & 12 deletions component/FloatingActionItem.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { isNil } from 'lodash';
import {
StyleSheet,
Text,
Expand Down Expand Up @@ -34,15 +33,20 @@ class FloatingActionItem extends Component {

renderText() {
const {
// @deprecated in favor of textElevation
elevation, // eslint-disable-line
text,
position,
elevation,
textElevation,
textBackground,
textColor
} = this.props;

if (!isNil(text)) {
if (elevation !== undefined) {
console.warn('FloatingActionItem: "elevation" property was deprecated. Please use "textElevation"');
}

if (text) {
return (
<View
key="text"
Expand Down Expand Up @@ -140,27 +144,28 @@ class FloatingActionItem extends Component {
}

FloatingActionItem.propTypes = {
position: PropTypes.oneOf(['left', 'right', 'center']),
color: PropTypes.string,
icon: PropTypes.any,
name: PropTypes.string.isRequired,
active: PropTypes.bool,
text: PropTypes.string,
elevation: PropTypes.number,
textElevation: PropTypes.number,
textBackground: PropTypes.string,
textColor: PropTypes.string,
onPress: PropTypes.func,
// not on doc
textElevation: PropTypes.number,
// not modified by user
position: PropTypes.oneOf(['left', 'right', 'center']),
active: PropTypes.bool,
distanceToEdge: PropTypes.number,
paddingTopBottom: PropTypes.number
paddingTopBottom: PropTypes.number, // modified by parent property "actionsPaddingTopBottom"
onPress: PropTypes.func
};

FloatingActionItem.defaultProps = {
color: '#1253bc',
elevation: 5,
distanceToEdge: 30,
textElevation: 5,
textColor: '#444444',
textBackground: '#ffffff',
distanceToEdge: 30
textBackground: '#ffffff'
};

const styles = StyleSheet.create({
Expand Down
28 changes: 13 additions & 15 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"example": "example"
},
"scripts": {
"test": "cd example/ReactNativeFloatingAction-Expo && yarn install && exp start"
"run:example": "cd example/ReactNativeFloatingAction-Expo && yarn install && exp start"
},
"repository": {
"type": "git",
Expand All @@ -26,24 +26,22 @@
"url": "https://github.com/santomegonzalo/react-native-floating-action/issues"
},
"homepage": "https://github.com/santomegonzalo/react-native-floating-action#readme",
"dependencies": {
"lodash": "^4.17.4"
},
"dependencies": {},
"peerDependencies": {
"react-native": ">=0.45",
"prop-types": ">=15.5.10"
"prop-types": ">=15.5.10",
"react-native": ">=0.45"
},
"devDependencies": {
"babel-eslint": "7.2.3",
"babel-eslint": "8.2.2",
"babel-plugin-transform-react-jsx-source": "^6.22.0",
"babel-preset-react-native": "3.0.0",
"eslint": "4.4.1",
"eslint-config-airbnb": "15.1.0",
"eslint-config-airbnb-base": "11.3.1",
"eslint-loader": "1.9.0",
"babel-preset-react-native": "4.0.0",
"eslint": "4.19.1",
"eslint-config-airbnb": "16.1.0",
"eslint-config-airbnb-base": "12.1.0",
"eslint-loader": "2.0.0",
"eslint-plugin-babel": "4.1.2",
"eslint-plugin-import": "2.7.0",
"eslint-plugin-jsx-a11y": "6.0.2",
"eslint-plugin-react": "7.2.1"
"eslint-plugin-import": "2.9.0",
"eslint-plugin-jsx-a11y": "6.0.3",
"eslint-plugin-react": "7.7.0"
}
}
Loading

0 comments on commit 0912912

Please sign in to comment.