feat(ui/settings/Developer): improve Asset Browser
This commit is contained in:
parent
c0e08c8b8c
commit
02eefe3223
2 changed files with 30 additions and 8 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
};
|
||||
Loading…
Add table
Reference in a new issue