feat(ui/settings/Developer): improve Asset Browser

This commit is contained in:
PalmDevs 2024-09-15 23:09:20 +07:00
parent c0e08c8b8c
commit 02eefe3223
No known key found for this signature in database
GPG key ID: 81476AE7B70A0133
2 changed files with 30 additions and 8 deletions

View file

@ -14,11 +14,13 @@ export default function AssetBrowser() {
style={{ margin: 10 }}
onChangeText={(v: string) => setSearch(v)}
/>
{/* TODO: Fix this, don't know why borderRadius is not working */}
<FlatList
style={{ borderRadius: 12, paddingHorizontal: 12, overflow: 'hidden' }}
data={Object.values(assetsMap).filter(a => a.name.includes(search) || a.id.toString() === search)}
renderItem={({ item }) => <AssetDisplay asset={item} />}
// contentContainerStyle={{ borderRadius: 12, paddingHorizontal: 12, overflow: 'hidden' }}
renderItem={({ item }: any) => <AssetDisplay asset={item} />}
ItemSeparatorComponent={LegacyFormDivider}
keyExtractor={item => item.name}
/>
</View>
</ErrorBoundary>

View file

@ -1,20 +1,40 @@
import { Asset } from "@lib/api/assets";
import { lazyDestructure } from "@lib/utils/lazy";
import { findByProps } from "@metro";
import { clipboard } from "@metro/common";
import { LegacyFormRow } from "@metro/common/components";
import { Stack, TableRow } from "@metro/common/components";
import { showToast } from "@ui/toasts";
import { Image } from "react-native";
const { openAlert } = lazyDestructure(() => findByProps("openAlert", "dismissAlert"));
const { AlertModal, AlertActionButton } = lazyDestructure(() => findByProps("AlertModal", "AlertActions"));
interface AssetDisplayProps { asset: Asset; }
export default function AssetDisplay({ asset }: AssetDisplayProps) {
return (
<LegacyFormRow
label={`${asset.name} - ${asset.id}`}
trailing={<Image source={asset.id} style={{ width: 32, height: 32 }} />}
<TableRow
label={asset.name}
subLabel={`ID: ${asset.id}`}
icon={<Image source={asset.id} style={{ width: 32, height: 32 }} />}
onPress={() => {
clipboard.setString(asset.name);
showToast.showCopyToClipboard();
openAlert("revenge-asset-display-details", <AlertModal
title={asset.name}
content={`ID: ${asset.id}\nIndex: ${asset.index}\nModule ID: ${asset.moduleId}`}
extraContent={<Image resizeMode="contain" source={asset.id} style={{ flex: 1, width: 'auto', height: 192 }} />}
actions={
<Stack>
<AlertActionButton text="Copy asset name" variant="primary" onPress={() => copyToClipboard(asset.name)} />
<AlertActionButton text="Copy asset ID" variant="secondary" onPress={() => copyToClipboard(asset.id.toString())} />
</Stack>
}
/>);
}}
/>
);
}
const copyToClipboard = (text: string) => {
clipboard.setString(text);
showToast.showCopyToClipboard();
};