Page MenuHomePhabricator
Files F3509075

No OneTemporary
Actions

View Options

diff --git a/native/components/user-list.react.js b/native/components/user-list.react.js
index 5a5b06a8e..ceb4b1af2 100644
--- a/native/components/user-list.react.js
+++ b/native/components/user-list.react.js
@@ -1,79 +1,71 @@
// @flow
-import { type UserListItem, userListItemPropType } from 'lib/types/user-types';
-import { connect } from 'lib/utils/redux-utils';
+import type { UserListItem } from 'lib/types/user-types';
import _sum from 'lodash/fp/sum';
-import PropTypes from 'prop-types';
import React from 'react';
-import { FlatList, Text } from 'react-native';
+import { FlatList } from 'react-native';
-import type { AppState } from '../redux/redux-setup';
-import {
- type IndicatorStyle,
- indicatorStylePropType,
- indicatorStyleSelector,
-} from '../themes/colors';
+import { type IndicatorStyle, useIndicatorStyle } from '../themes/colors';
import type { TextStyle } from '../types/styles';
import { UserListUser, getUserListItemHeight } from './user-list-user.react';
+type BaseProps = {|
+ +userInfos: $ReadOnlyArray<UserListItem>,
+ +onSelect: (userID: string) => void,
+ +itemTextStyle?: TextStyle,
+|};
type Props = {
- userInfos: $ReadOnlyArray<UserListItem>,
- onSelect: (userID: string) => void,
- itemTextStyle?: TextStyle,
+ ...BaseProps,
// Redux state
- indicatorStyle: IndicatorStyle,
+ +indicatorStyle: IndicatorStyle,
};
class UserList extends React.PureComponent<Props> {
- static propTypes = {
- userInfos: PropTypes.arrayOf(userListItemPropType).isRequired,
- onSelect: PropTypes.func.isRequired,
- itemTextStyle: Text.propTypes.style,
- indicatorStyle: indicatorStylePropType.isRequired,
- };
-
render() {
return (
<FlatList
data={this.props.userInfos}
renderItem={this.renderItem}
keyExtractor={UserList.keyExtractor}
getItemLayout={UserList.getItemLayout}
keyboardShouldPersistTaps="handled"
initialNumToRender={20}
extraData={this.props.itemTextStyle}
indicatorStyle={this.props.indicatorStyle}
/>
);
}
static keyExtractor(userInfo: UserListItem) {
return userInfo.id;
}
renderItem = (row: { item: UserListItem }) => {
return (
<UserListUser
userInfo={row.item}
onSelect={this.props.onSelect}
textStyle={this.props.itemTextStyle}
/>
);
};
static getItemLayout(data: ?$ReadOnlyArray<UserListItem>, index: number) {
if (!data) {
return { length: 0, offset: 0, index };
}
const offset = _sum(
data.filter((_, i) => i < index).map(getUserListItemHeight),
);
const item = data[index];
const length = item ? getUserListItemHeight(item) : 0;
return { length, offset, index };
}
}
-export default connect((state: AppState) => ({
- indicatorStyle: indicatorStyleSelector(state),
-}))(UserList);
+export default React.memo<BaseProps>(function ConnectedUserList(
+ props: BaseProps,
+) {
+ const indicatorStyle = useIndicatorStyle();
+ return <UserList {...props} indicatorStyle={indicatorStyle} />;
+});

File Metadata

Mime Type
text/x-diff
Expires
Mon, Dec 23, 12:53 AM (3 h, 1 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2690118
Default Alt Text
(3 KB)

Event Timeline