Remove width prop drill

This commit is contained in:
Diego Mello 2022-12-07 11:09:51 -03:00
parent 2c62d9cb46
commit 9788e8a11f
4 changed files with 8 additions and 12 deletions

View File

@ -13,6 +13,7 @@ import {
HandlerStateChangeEventPayload, HandlerStateChangeEventPayload,
PanGestureHandlerEventPayload PanGestureHandlerEventPayload
} from 'react-native-gesture-handler'; } from 'react-native-gesture-handler';
import { useWindowDimensions } from 'react-native';
import Touch from '../Touch'; import Touch from '../Touch';
import { ACTION_WIDTH, LONG_SWIPE, SMALL_SWIPE } from './styles'; import { ACTION_WIDTH, LONG_SWIPE, SMALL_SWIPE } from './styles';
@ -20,6 +21,8 @@ import { LeftActions, RightActions } from './Actions';
import { ITouchableProps } from './interfaces'; import { ITouchableProps } from './interfaces';
import { useTheme } from '../../theme'; import { useTheme } from '../../theme';
import I18n from '../../i18n'; import I18n from '../../i18n';
import { MAX_SIDEBAR_WIDTH } from '../../lib/constants';
import { useAppSelector } from '../../lib/hooks';
const Touchable = ({ const Touchable = ({
children, children,
@ -27,7 +30,6 @@ const Touchable = ({
onPress, onPress,
onLongPress, onLongPress,
testID, testID,
width,
favorite, favorite,
isRead, isRead,
rid, rid,
@ -39,6 +41,9 @@ const Touchable = ({
displayMode displayMode
}: ITouchableProps): React.ReactElement => { }: ITouchableProps): React.ReactElement => {
const { colors } = useTheme(); const { colors } = useTheme();
const { width: deviceWidth } = useWindowDimensions();
const isMasterDetail = useAppSelector(state => state.app.isMasterDetail);
const width = isMasterDetail ? MAX_SIDEBAR_WIDTH : deviceWidth;
const rowOffSet = useSharedValue(0); const rowOffSet = useSharedValue(0);
const transX = useSharedValue(0); const transX = useSharedValue(0);

View File

@ -16,7 +16,6 @@ const RoomItemContainer = ({
id, id,
onPress, onPress,
onLongPress, onLongPress,
width,
toggleFav, toggleFav,
toggleRead, toggleRead,
hideChannel, hideChannel,
@ -88,7 +87,6 @@ const RoomItemContainer = ({
onLongPress={handleOnLongPress} onLongPress={handleOnLongPress}
date={date} date={date}
accessibilityLabel={accessibilityLabel} accessibilityLabel={accessibilityLabel}
width={width}
favorite={item.f} favorite={item.f}
rid={item.rid} rid={item.rid}
toggleFav={toggleFav} toggleFav={toggleFav}

View File

@ -78,7 +78,6 @@ interface IBaseRoomItem extends IRoomItemTouchables {
showAvatar: boolean; showAvatar: boolean;
swipeEnabled: boolean; swipeEnabled: boolean;
autoJoin?: boolean; autoJoin?: boolean;
width: number;
username?: string; username?: string;
} }
@ -131,7 +130,6 @@ export interface ITouchableProps extends IRoomItemTouchables {
children: JSX.Element; children: JSX.Element;
type: SubscriptionType; type: SubscriptionType;
testID: string; testID: string;
width: number;
favorite: boolean; favorite: boolean;
isRead: boolean; isRead: boolean;
rid: string; rid: string;

View File

@ -40,7 +40,6 @@ import {
import { getUserSelector } from '../../selectors/login'; import { getUserSelector } from '../../selectors/login';
import { goRoom } from '../../lib/methods/helpers/goRoom'; import { goRoom } from '../../lib/methods/helpers/goRoom';
import SafeAreaView from '../../containers/SafeAreaView'; import SafeAreaView from '../../containers/SafeAreaView';
import { withDimensions } from '../../dimensions';
import { getInquiryQueueSelector } from '../../ee/omnichannel/selectors/inquiry'; import { getInquiryQueueSelector } from '../../ee/omnichannel/selectors/inquiry';
import { IApplicationState, ISubscription, IUser, RootEnum, SubscriptionType, TSubscriptionModel } from '../../definitions'; import { IApplicationState, ISubscription, IUser, RootEnum, SubscriptionType, TSubscriptionModel } from '../../definitions';
import styles from './styles'; import styles from './styles';
@ -58,7 +57,7 @@ import {
debounce, debounce,
isTablet isTablet
} from '../../lib/methods/helpers'; } from '../../lib/methods/helpers';
import { E2E_BANNER_TYPE, DisplayMode, SortBy, MAX_SIDEBAR_WIDTH, themes } from '../../lib/constants'; import { E2E_BANNER_TYPE, DisplayMode, SortBy, themes } from '../../lib/constants';
import { Services } from '../../lib/services'; import { Services } from '../../lib/services';
type TNavigation = CompositeNavigationProp< type TNavigation = CompositeNavigationProp<
@ -86,7 +85,6 @@ interface IRoomsListViewProps {
useRealName: boolean; useRealName: boolean;
isMasterDetail: boolean; isMasterDetail: boolean;
subscribedRoom: string; subscribedRoom: string;
width: number;
insets: { left: number; bottom: number; right: number; top: number }; insets: { left: number; bottom: number; right: number; top: number };
queueSize: number; queueSize: number;
inquiryEnabled: boolean; inquiryEnabled: boolean;
@ -814,8 +812,6 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
user: { username }, user: { username },
StoreLastMessage, StoreLastMessage,
useRealName, useRealName,
isMasterDetail,
width,
showAvatar, showAvatar,
displayMode displayMode
} = this.props; } = this.props;
@ -829,7 +825,6 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
username={username} username={username}
showLastMessage={StoreLastMessage} showLastMessage={StoreLastMessage}
onPress={this.onPressItem} onPress={this.onPressItem}
width={isMasterDetail ? MAX_SIDEBAR_WIDTH : width}
toggleFav={this.toggleFav} toggleFav={this.toggleFav}
toggleRead={this.toggleRead} toggleRead={this.toggleRead}
hideChannel={this.hideChannel} hideChannel={this.hideChannel}
@ -925,4 +920,4 @@ const mapStateToProps = (state: IApplicationState) => ({
createDiscussionPermission: state.permissions['start-discussion'] createDiscussionPermission: state.permissions['start-discussion']
}); });
export default connect(mapStateToProps)(withDimensions(withTheme(withSafeAreaInsets(RoomsListView)))); export default connect(mapStateToProps)(withTheme(withSafeAreaInsets(RoomsListView)));