97 lines
3.0 KiB
TypeScript
97 lines
3.0 KiB
TypeScript
// Metro module 10207 (f10208).
|
|
import { View } from "react-native";
|
|
import { EMPTY_STRING_SNOWFLAKE_ID, MAX_VISUAL_ROLE_LENGTH } from "../../Constants";
|
|
import { createStyles } from "../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../_bundle/Module712";
|
|
import { DeveloperMode } from "../../modules/user_settings/UserSettings";
|
|
import { useRoleIcon } from "../../modules/guild_boosting/native/RoleIconUtils";
|
|
import { copy } from "../../utils/ClipboardUtils.native";
|
|
import { roleIdCopied } from "../../modules/toast/native/ToastUtils";
|
|
import { PressableHighlight } from "../../design/void/Pressables/native/Pressables";
|
|
import VerifiedRoleIcon from "../../modules/connections/native/VerifiedRoleIcon";
|
|
import { Text } from "../../design/components/Text/native/Text";
|
|
const useStyles = createStyles({
|
|
container: {
|
|
marginRight: 4,
|
|
marginBottom: 4,
|
|
borderRadius: Module712.radii.xs
|
|
},
|
|
pill: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
paddingHorizontal: 8,
|
|
paddingVertical: 6,
|
|
borderRadius: Module712.radii.xs,
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST
|
|
},
|
|
bubble: {
|
|
marginRight: 8,
|
|
borderRadius: Module712.radii.sm,
|
|
height: 12,
|
|
width: 12,
|
|
backgroundColor: Module712.colors.ICON_MUTED
|
|
},
|
|
verifiedContainer: {
|
|
marginRight: 8,
|
|
borderRadius: Module712.radii.sm,
|
|
height: 12,
|
|
width: 12
|
|
},
|
|
roleIcon: {
|
|
paddingRight: 4
|
|
}
|
|
});
|
|
export default function RolePill(props) {
|
|
let r59;
|
|
const role = props.role;
|
|
let guildId = props.guildId;
|
|
const disableInteraction = props.disableInteraction;
|
|
let color = props.color;
|
|
const setting = DeveloperMode.useSetting();
|
|
const roleIcon = useRoleIcon({
|
|
guildId,
|
|
roleId: role.id,
|
|
size: 12
|
|
});
|
|
let name2 = role.name;
|
|
let name = name2;
|
|
if (role.name.length > MAX_VISUAL_ROLE_LENGTH) {
|
|
name = `${role.name.slice(0, MAX_VISUAL_ROLE_LENGTH)}...`;
|
|
name2 = name;
|
|
}
|
|
if (color == null) {
|
|
color = role.colorString;
|
|
}
|
|
const guild_connections = role.tags?.guild_connections;
|
|
const styles = useStyles();
|
|
const props2 = {
|
|
disabled: setting ? disableInteraction : !setting,
|
|
style: styles.container,
|
|
onPress: function handlePress() {
|
|
copy(role.id);
|
|
roleIdCopied(name);
|
|
},
|
|
accessible: false,
|
|
children: null
|
|
};
|
|
if (guild_connections !== void 0) {
|
|
if (guildId == null) {
|
|
guildId = EMPTY_STRING_SNOWFLAKE_ID;
|
|
}
|
|
if (color == null) {
|
|
color = void 0;
|
|
}
|
|
r59 = <VerifiedRoleIcon style={styles.verifiedContainer} roleId={role.id} guildId={guildId} roleColor={color} size={14} displayRoleIcon={false} />;
|
|
} else {
|
|
r59 = <View style={[styles.bubble, color != null ? {
|
|
backgroundColor: color
|
|
} : {}]} />;
|
|
}
|
|
props2.children = <View style={styles.pill}>
|
|
{r59}
|
|
{roleIcon != null ? <View style={styles.roleIcon}>{roleIcon}</View> : null}
|
|
<Text variant="text-xs/semibold" color="interactive-text-active">{name2}</Text>
|
|
</View>;
|
|
return <PressableHighlight {...props2} />;
|
|
};
|