Differential D8057 Diff 27407 native/community-creation/community-creation-members.react.js

Changeset View

Standalone View

native/community-creation/community-creation-members.react.js

// @flow		// @flow

import * as React from 'react';		import * as React from 'react';

import {		import {
userInfoSelectorForPotentialMembers,		userInfoSelectorForPotentialMembers,
userSearchIndexForPotentialMembers,		userSearchIndexForPotentialMembers,
} from 'lib/selectors/user-selectors.js';		} from 'lib/selectors/user-selectors.js';
import { getPotentialMemberItems } from 'lib/shared/search-utils.js';		import { getPotentialMemberItems } from 'lib/shared/search-utils.js';
import { threadTypes } from 'lib/types/thread-types-enum.js';		import { threadTypes } from 'lib/types/thread-types-enum.js';
import type { AccountUserInfo } from 'lib/types/user-types.js';		import type { AccountUserInfo } from 'lib/types/user-types.js';

		import CommunityCreationContentContainer from './community-creation-content-container.react.js';
import CommunityCreationKeyserverLabel from './community-creation-keyserver-label.react.js';		import CommunityCreationKeyserverLabel from './community-creation-keyserver-label.react.js';
import type { CommunityCreationNavigationProp } from './community-creation-navigator.react.js';		import type { CommunityCreationNavigationProp } from './community-creation-navigator.react.js';
import RegistrationContainer from '../account/registration/registration-container.react.js';		import RegistrationContainer from '../account/registration/registration-container.react.js';
import RegistrationContentContainer from '../account/registration/registration-content-container.react.js';
import { createTagInput } from '../components/tag-input.react.js';		import { createTagInput } from '../components/tag-input.react.js';
import UserList from '../components/user-list.react.js';		import UserList from '../components/user-list.react.js';
import type { NavigationRoute } from '../navigation/route-names.js';		import type { NavigationRoute } from '../navigation/route-names.js';
import { useSelector } from '../redux/redux-utils.js';		import { useSelector } from '../redux/redux-utils.js';
import { useStyles } from '../themes/colors.js';

const TagInput = createTagInput<AccountUserInfo>();		const TagInput = createTagInput<AccountUserInfo>();
const tagInputProps = {		const tagInputProps = {
placeholder: 'username',		placeholder: 'username',
autoFocus: true,		autoFocus: true,
returnKeyType: 'go',		returnKeyType: 'go',
};		};
const tagDataLabelExtractor = (userInfo: AccountUserInfo) => userInfo.username;		const tagDataLabelExtractor = (userInfo: AccountUserInfo) => userInfo.username;

type Props = {		type Props = {
+navigation: CommunityCreationNavigationProp<'CommunityCreationMembers'>,		+navigation: CommunityCreationNavigationProp<'CommunityCreationMembers'>,
+route: NavigationRoute<'CommunityCreationMembers'>,		+route: NavigationRoute<'CommunityCreationMembers'>,
};		};

// eslint-disable-next-line no-unused-vars		// eslint-disable-next-line no-unused-vars
function CommunityCreationMembers(props: Props): React.Node {		function CommunityCreationMembers(props: Props): React.Node {
const styles = useStyles(unboundStyles);

const otherUserInfos = useSelector(userInfoSelectorForPotentialMembers);		const otherUserInfos = useSelector(userInfoSelectorForPotentialMembers);
const userSearchIndex = useSelector(userSearchIndexForPotentialMembers);		const userSearchIndex = useSelector(userSearchIndexForPotentialMembers);

const [usernameInputText, setUsernameInputText] = React.useState<string>('');		const [usernameInputText, setUsernameInputText] = React.useState<string>('');
const [selectedUsers, setSelectedUsers] = React.useState<		const [selectedUsers, setSelectedUsers] = React.useState<
$ReadOnlyArray<AccountUserInfo>,		$ReadOnlyArray<AccountUserInfo>,
>([]);		>([]);

Show All 29 Lines	const onSelectUser = React.useCallback(
},		},
[otherUserInfos, selectedUserIDs],		[otherUserInfos, selectedUserIDs],
);		);

const tagInputRef = React.useRef();		const tagInputRef = React.useRef();

return (		return (
<RegistrationContainer>		<RegistrationContainer>
<RegistrationContentContainer style={styles.containerPaddingOverride}>		<CommunityCreationContentContainer>
<CommunityCreationKeyserverLabel />		<CommunityCreationKeyserverLabel />
<TagInput		<TagInput
value={selectedUsers}		value={selectedUsers}
onChange={setSelectedUsers}		onChange={setSelectedUsers}
text={usernameInputText}		text={usernameInputText}
onChangeText={setUsernameInputText}		onChangeText={setUsernameInputText}
labelExtractor={tagDataLabelExtractor}		labelExtractor={tagDataLabelExtractor}
inputProps={tagInputProps}		inputProps={tagInputProps}
ref={tagInputRef}		ref={tagInputRef}
/>		/>
<UserList userInfos={userSearchResults} onSelect={onSelectUser} />		<UserList userInfos={userSearchResults} onSelect={onSelectUser} />
</RegistrationContentContainer>		</CommunityCreationContentContainer>
</RegistrationContainer>		</RegistrationContainer>
);		);
}		}

const unboundStyles = {
containerPaddingOverride: {
padding: 0,
},
};

export default CommunityCreationMembers;		export default CommunityCreationMembers;