Skip to content

Added tooltip prop to ActionButton.Item #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Added tooltip prop to ActionButton.Item #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4426994
Added tooltip prop to ActionButton.Item
Ajackster Jan 30, 2017
37643b5
Updated README with tooltip prop
Ajackster Feb 8, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 29 additions & 24 deletions ActionButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,11 +108,11 @@ export default class ActionButton extends Component {
activeOpacity={0.85}
onLongPress={this.props.onLongPress}
onPress={() => {
this.props.onPress();
if (this.props.children) {
this.animateButton();
}
}}
this.props.onPress();
if (this.props.children) {
this.animateButton();
}
}}
>
<Animated.View
style={
Expand Down Expand Up @@ -155,12 +155,12 @@ export default class ActionButton extends Component {
return (
<Animated.Text
style={[styles.btnText,
{
color: this.state.anim.interpolate({
inputRange: [0, 1],
outputRange: [this.props.buttonTextColor, this.props.btnOutRangeTxt]
})
}]}>
{
color: this.state.anim.interpolate({
inputRange: [0, 1],
outputRange: [this.props.buttonTextColor, this.props.btnOutRangeTxt]
})
}]}>
+
</Animated.Text>
);
Expand All @@ -181,6 +181,9 @@ export default class ActionButton extends Component {

return (
React.Children.map(this.props.children, (button, index) => {
const length = this.props.children.length;
Copy link
Owner

@geremih geremih Feb 5, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is also a position prop for ActionButton. Shouldn't this also cover the case in which the button is aligned to either of the sides?

Copy link
Owner

@geremih geremih Feb 10, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Ajackster that's what I meant. So if the button is positioned to the right, no button item should have the tooltip to the left side,? So in that case, one way to do that would be const middle = (index == length -1) and the rest are aligned to the right. I saw that in the new screenshot you posted, all tooltips are at the top of the button item. Is that something you would prefer using, instead of aligning the tooltip with respect to the index?

const leftSide = index < length / 2 - 1;
const middle = length % 2 === 0 ? (index === (length / 2) || index === (length / 2) - 1) : index === (length / 2) - 0.5;
return (

<View
Expand All @@ -197,13 +200,15 @@ export default class ActionButton extends Component {
btnColor={this.props.btnOutRange}
{...button.props}
onPress={() => {
if (this.props.autoInactive) {
this.timeout = setTimeout(() => {
this.reset();
}, 200);
}
button.props.onPress();
}}
if (this.props.autoInactive) {
this.timeout = setTimeout(() => {
this.reset();
}, 200);
}
button.props.onPress();
}}
leftSide={leftSide}
middle={middle}
/>
</View>
);
Expand All @@ -222,12 +227,12 @@ export default class ActionButton extends Component {
>
<Animated.View
style={
{
backgroundColor: this.props.bgColor,
opacity: this.state.anim,
flex: 1,
}
}
{
backgroundColor: this.props.bgColor,
opacity: this.state.anim,
flex: 1,
}
}
>
{this.props.backdrop}
</Animated.View>
Expand Down
127 changes: 92 additions & 35 deletions ActionButtonItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,55 +7,109 @@ import {
View,
Animated,
TouchableOpacity,
Text
} from 'react-native';

export default class ActionButtonItem extends Component {

constructor(props) {
super(props);
this.state = {
tooltipWidth: 0
};
this.onLayout = this.onLayout.bind(this);
}
onLayout(event) {
this.setState({ tooltipWidth: event.nativeEvent.layout.width });
}
render() {
const offsetX = this.props.radius * Math.cos(this.props.angle);
const offsetY = this.props.radius * Math.sin(this.props.angle);
const tooltipStyles = {
leftToolTip: {
position: 'absolute',
color: 'white',
minWidth: 80,
maxHeight: 17,
left: -this.state.tooltipWidth - 10,
top: 10,
textAlign: 'right'
},
middleToolTip: {
color: 'white',
position: 'absolute',
minWidth: 80,
maxHeight: 17,
top: -25,
left: (-this.state.tooltipWidth / 4) - 2,
alignSelf: 'center',
textAlign: 'center'
},
rightToolTip: {
color: 'white',
position: 'absolute',
minWidth: 80,
maxHeight: 17,
top: 10,
left: 45
}
};
return (
<Animated.View
style={[{
opacity: this.props.anim,
width: this.props.size,
height: this.props.size,
transform: [
{
translateY: this.props.anim.interpolate({
inputRange: [0, 1],
outputRange: [0, offsetY],
}) },
{
translateX: this.props.anim.interpolate({
inputRange: [0, 1],
outputRange: [0, offsetX],
}) },
{
rotate: this.props.anim.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '720deg'],
}) },
{
scale: this.props.anim.interpolate({
inputRange: [0, 1],
outputRange: [0, 1],
}) },
]
}]}
opacity: this.props.anim,
width: this.props.size,
height: this.props.size,
transform: [
{
translateY: this.props.anim.interpolate({
inputRange: [0, 1],
outputRange: [0, offsetY],
}) },
{
translateX: this.props.anim.interpolate({
inputRange: [0, 1],
outputRange: [0, offsetX],
}) },
{
rotate: this.props.anim.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '720deg'],
}) },
{
scale: this.props.anim.interpolate({
inputRange: [0, 1],
outputRange: [0, 1],
}) },
]
}]}
>
<TouchableOpacity style={{flex:1}} activeOpacity={this.props.activeOpacity || 0.85} onPress={this.props.onPress}>
{this.props.leftSide ?
<Text onLayout={this.onLayout} style={tooltipStyles.leftToolTip}>
{this.props.tooltip}
</Text> :
null
}
<TouchableOpacity style={{flex: 1}} activeOpacity={this.props.activeOpacity || 0.85} onPress={this.props.onPress}>
<View
style={[styles.actionButton,{
width: this.props.size,
height: this.props.size,
borderRadius: this.props.size / 2,
backgroundColor: this.props.buttonColor,
}]}
style={[ styles.actionButton, {
width: this.props.size,
height: this.props.size,
borderRadius: this.props.size / 2,
backgroundColor: this.props.buttonColor
}]}
>
{this.props.children}
</View>
</TouchableOpacity>
{this.props.middle ?
<Text onLayout={this.onLayout} style={tooltipStyles.middleToolTip}>
{this.props.tooltip}
</Text> :
!this.props.leftSide ?
<Text style={tooltipStyles.rightToolTip}>
{this.props.tooltip}
</Text> : null
}
</Animated.View>
);
}
Expand All @@ -68,6 +122,9 @@ ActionButtonItem.propTypes = {
buttonColor: PropTypes.string,
onPress: PropTypes.func,
children: PropTypes.node.isRequired,
middle: PropTypes.bool,
leftSide: PropTypes.bool,
tooltip: PropTypes.string
};

ActionButtonItem.defaultProps = {
Expand All @@ -89,5 +146,5 @@ const styles = StyleSheet.create({
shadowRadius: 1,
backgroundColor: 'red',
position: 'absolute',
},
}
});
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,3 +100,4 @@ Also this example uses `react-native-vector-icons` for the button Icons.
| ------------- |:-------------:|:------------: | ----------- |
| onPress | func | null | **required** function, triggers when a button is tapped
| buttonColor | string | same as + button | background color of the Button
| tooltip | string | null | text that is displayed next to the button