81 lines
3.2 KiB
TypeScript
81 lines
3.2 KiB
TypeScript
// Metro module 8810 (f8811).
|
|
import { Pressable, View } from "react-native";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import { InputFieldContainer } from "../../../../design/components/Input/native/InputFieldContainer.native";
|
|
import { intl, t } from "../../../../intl/index.native";
|
|
import UserUtils from "../../../../utils/UserUtils";
|
|
import { MagnifyingGlassIcon } from "../../../../design/components/Icon/native/redesign/generated/MagnifyingGlassIcon";
|
|
import { Avatar, AvatarSizes } from "../../../../design/void/native";
|
|
import { Text } from "../../../../design/components/Text/native/Text";
|
|
import { CircleXIcon } from "../../../../design/components/Icon/native/redesign/generated/CircleXIcon";
|
|
const useStyles = createStyles({
|
|
container: {
|
|
marginHorizontal: Module712.space.PX_16
|
|
},
|
|
content: {
|
|
flexDirection: "row",
|
|
overflow: "hidden",
|
|
alignItems: "center",
|
|
display: "flex"
|
|
},
|
|
opener: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
flex: 1,
|
|
paddingHorizontal: Module712.space.PX_16,
|
|
paddingVertical: 6
|
|
},
|
|
openerWithClearButton: {
|
|
paddingRight: 0
|
|
},
|
|
searchIcon: {
|
|
marginRight: Module712.space.PX_8
|
|
},
|
|
userPill: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
|
|
borderRadius: Module712.radii.lg,
|
|
paddingVertical: 6,
|
|
paddingHorizontal: 6
|
|
},
|
|
userPillText: {
|
|
marginLeft: 6
|
|
},
|
|
clearButton: {
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
minWidth: 44,
|
|
minHeight: 44,
|
|
paddingRight: Module712.space.PX_16,
|
|
paddingLeft: Module712.space.PX_8
|
|
}
|
|
});
|
|
export default function SelectedUserField(props) {
|
|
const { selectedUser, onPress: onPress2, setSelectedUser } = props;
|
|
const styles = useStyles();
|
|
return <View style={styles.container}>
|
|
<InputFieldContainer>
|
|
<View style={styles.content}>
|
|
<Pressable style={[styles.opener, selectedUser != null && styles.openerWithClearButton]} onPress={onPress2} accessibilityRole="button" accessibilityLabel={selectedUser != null ? `${intl.string(t.xFn72s)}, ${UserUtils.getName(selectedUser)}` : `${intl.string(t.xFn72s)}, ${intl.string(t.R0vK0N)}`}>
|
|
<MagnifyingGlassIcon style={styles.searchIcon} size="xs" color="interactive-text-default" />
|
|
{selectedUser != null ? <View style={styles.userPill}>
|
|
<Avatar user={selectedUser} guildId={void 0} size={AvatarSizes.XSMALL_20} />
|
|
<Text variant="text-md/medium" style={styles.userPillText}>
|
|
{UserUtils.getName(selectedUser)}
|
|
</Text>
|
|
</View> : <Text variant="text-sm/semibold" color="text-subtle" style={styles.userPillText}>
|
|
{intl.string(t.R0vK0N)}
|
|
</Text>}
|
|
</Pressable>
|
|
{selectedUser != null ? <Pressable style={styles.clearButton} onPress={() => setSelectedUser(void 0)} accessibilityRole="button" accessibilityLabel={intl.formatToPlainString(t["0Vb9FQ"], {
|
|
text: UserUtils.getName(selectedUser)
|
|
})}>
|
|
<CircleXIcon size="xs" />
|
|
</Pressable> : null}
|
|
</View>
|
|
</InputFieldContainer>
|
|
</View>;
|
|
};
|