Skip to content
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

Add Hover to TabItem #28357

Merged
merged 40 commits into from
Oct 9, 2023
Merged

Add Hover to TabItem #28357

Show file tree
Hide file tree
Changes from 17 commits
Commits
Show all changes
40 commits
Select commit Hold shift + click to select a range
1cf2613
Separate pressable with animated.view, add hover color to tabitem
wildan-m Sep 21, 2023
9810019
Merge branch 'main' of https://github.com/wildan-m/App into wildan/fi…
wildan-m Sep 22, 2023
e3b8121
make tab label always strong
wildan-m Sep 22, 2023
6a4c887
prettier and lint
wildan-m Sep 22, 2023
c4d0a93
Merge branch 'main' of https://github.com/wildan-m/App into wildan/fi…
wildan-m Sep 25, 2023
f81b3d5
Merge branch 'main' of https://github.com/wildan-m/App into wildan/fi…
wildan-m Sep 26, 2023
52091e8
Merge branch 'wildan/fix/26648-3-tab-hover' of https://github.com/wil…
wildan-m Sep 26, 2023
42265f0
Merge branch 'main' of https://github.com/wildan-m/App into wildan/fi…
wildan-m Sep 26, 2023
a672fc0
Merge branch 'wildan/fix/26648-3-tab-hover' of https://github.com/wil…
wildan-m Sep 26, 2023
ad0eb57
Keep AnimatedPressableWithFeedback for optimum performance
wildan-m Sep 26, 2023
67842c1
Merge branch 'main' of https://github.com/wildan-m/App into wildan/fi…
wildan-m Sep 27, 2023
edb3947
Merge branch 'wildan/fix/26648-3-tab-hover' of https://github.com/wil…
wildan-m Sep 27, 2023
919c15d
change to undefined instead of empty object
wildan-m Sep 27, 2023
477f181
Merge branch 'main' of https://github.com/wildan-m/App into wildan/fi…
wildan-m Sep 27, 2023
9b7edfb
Merge branch 'wildan/fix/26648-3-tab-hover' of https://github.com/wil…
wildan-m Sep 28, 2023
395d6d8
run prettier
wildan-m Sep 28, 2023
941e1ca
remove unnecessary comment
wildan-m Sep 28, 2023
5373a25
change view to animated.view
wildan-m Sep 28, 2023
f2dd997
remove unnecessary variable
wildan-m Sep 28, 2023
96c178b
Merge branch 'main' of https://github.com/wildan-m/App into wildan/fi…
wildan-m Sep 29, 2023
a9a1a00
add Hoverable component
wildan-m Sep 29, 2023
21ee1d2
remove unused import
wildan-m Sep 29, 2023
c307423
remove hoverBackgroundColor props, create tabBackground style function
wildan-m Sep 29, 2023
79ec65c
remove defaultprops unnecessary code
wildan-m Sep 29, 2023
e523fe9
add tabActiveOpacity and tabInactiveOpacity
wildan-m Sep 29, 2023
74b15c4
run prettier
wildan-m Sep 29, 2023
610fcb0
fix tabInactiveOpacity
wildan-m Sep 29, 2023
4e4fcd5
Merge branch 'main' of https://github.com/wildan-m/App into wildan/fi…
wildan-m Oct 2, 2023
6c16d06
Merge branch 'main' of https://github.com/wildan-m/App into wildan/fi…
wildan-m Oct 5, 2023
3b96816
fix tab opacity
wildan-m Oct 5, 2023
2dccca9
extract style logic outside the style object
wildan-m Oct 5, 2023
d3d7787
run prettier
wildan-m Oct 5, 2023
c4ff0e2
add activeOpacity, inactiveOpacity to tabOpacity style function
wildan-m Oct 5, 2023
cb4c757
run prettier
wildan-m Oct 5, 2023
d1208c4
unify tabOpacity style function
wildan-m Oct 5, 2023
8bf5ead
Revert "fix tab opacity"
wildan-m Oct 5, 2023
00945f4
Resolve issue hover not working after pressing back from another screen
wildan-m Oct 6, 2023
b783633
Merge branch 'main' of https://github.com/wildan-m/App into wildan/fi…
wildan-m Oct 7, 2023
bab483b
tidy up code
wildan-m Oct 7, 2023
e2f3650
run prettier
wildan-m Oct 7, 2023
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
4 changes: 3 additions & 1 deletion src/components/TabSelector/TabSelector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ const getBackgroundColor = (position, routesLength, tabIndex) => {

function TabSelector({state, navigation, onTabPress, position}) {
const {translate} = useLocalize();

const hoverBackgroundColor = themeColors.highlightBG;
Copy link
Contributor

Choose a reason for hiding this comment

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

Why are we defining this here and passing it as a prop rather than just passing the value inside TabSelectorItem?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Why are we defining this here and passing it as a prop rather than just passing the value inside TabSelectorItem?

I'm trying to make it consistent with how backgroundColor passed, also it can be a tiny feature in case we need to customize the tabitem hover color.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

if that is not required we can directly use styles.highlightBG in the tabitem inner animated.view

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@Ollyws , sorry I misunderstood your question, yes, we can simplify it without declaring a variable. it just updated.

return (
<View style={styles.tabSelector}>
{_.map(state.routes, (route, index) => {
Expand Down Expand Up @@ -120,6 +120,8 @@ function TabSelector({state, navigation, onTabPress, position}) {
activeOpacity={activeOpacity}
inactiveOpacity={inactiveOpacity}
backgroundColor={backgroundColor}
hoverBackgroundColor={hoverBackgroundColor}
isFocused={isFocused}
/>
);
})}
Expand Down
38 changes: 26 additions & 12 deletions src/components/TabSelector/TabSelectorItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {Animated} from 'react-native';
import {Animated, View, StyleSheet} from 'react-native';
import React from 'react';
import PropTypes from 'prop-types';
import styles from '../../styles/styles';
Expand All @@ -20,44 +20,58 @@ const propTypes = {
// eslint-disable-next-line
backgroundColor: PropTypes.any,

/** Hovered background color value for the tab button */
hoverBackgroundColor: PropTypes.string,

/** Animated opacity value while the label is inactive state */
// eslint-disable-next-line
inactiveOpacity: PropTypes.any,

/** Animated opacity value while the label is in active state */
// eslint-disable-next-line
activeOpacity: PropTypes.any,

/** Whether this tab is active */
isFocused: PropTypes.bool,
};

const defaultProps = {
onPress: () => {},
icon: () => {},
title: '',
backgroundColor: '',
hoverBackgroundColor: '',
inactiveOpacity: 1,
activeOpacity: 0,
isFocused: false,
};

const AnimatedPressableWithFeedback = Animated.createAnimatedComponent(PressableWithFeedback);

function TabSelectorItem({icon, title, onPress, backgroundColor, activeOpacity, inactiveOpacity}) {
function TabSelectorItem({icon, title, onPress, backgroundColor, hoverBackgroundColor, activeOpacity, inactiveOpacity, isFocused}) {
return (
<AnimatedPressableWithFeedback
accessibilityLabel={title}
style={[styles.tabSelectorButton, {backgroundColor}]}
wrapperStyle={[styles.flex1]}
onPress={onPress}
>
<TabIcon
icon={icon}
activeOpacity={activeOpacity}
inactiveOpacity={inactiveOpacity}
/>
<TabLabel
title={title}
activeOpacity={activeOpacity}
inactiveOpacity={inactiveOpacity}
/>
{({hovered}) => (
<View
style={[styles.tabSelectorButton, StyleSheet.absoluteFill, {backgroundColor: Boolean(hoverBackgroundColor) && hovered && !isFocused ? hoverBackgroundColor : undefined}]}
>
<TabIcon
icon={icon}
activeOpacity={hovered && !isFocused ? 1 : activeOpacity}
inactiveOpacity={hovered && !isFocused ? 0 : inactiveOpacity}
/>
<TabLabel
title={title}
activeOpacity={hovered && !isFocused ? 1 : activeOpacity}
inactiveOpacity={hovered && !isFocused ? 0 : inactiveOpacity}
/>
</View>
)}
</AnimatedPressableWithFeedback>
);
}
Expand Down
4 changes: 2 additions & 2 deletions src/styles/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3435,8 +3435,8 @@ const styles = (theme) => ({

tabText: (isSelected) => ({
marginLeft: 8,
fontFamily: isSelected ? fontFamily.EXP_NEUE_BOLD : fontFamily.EXP_NEUE,
fontWeight: isSelected ? fontWeightBold : 400,
fontFamily: fontFamily.EXP_NEUE_BOLD,
fontWeight: fontWeightBold,
color: isSelected ? theme.textLight : theme.textSupporting,
}),

Expand Down