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 }}
|
style={{ margin: 10 }}
|
||||||
onChangeText={(v: string) => setSearch(v)}
|
onChangeText={(v: string) => setSearch(v)}
|
||||||
/>
|
/>
|
||||||
|
{/* TODO: Fix this, don't know why borderRadius is not working */}
|
||||||
<FlatList
|
<FlatList
|
||||||
|
style={{ borderRadius: 12, paddingHorizontal: 12, overflow: 'hidden' }}
|
||||||
data={Object.values(assetsMap).filter(a => a.name.includes(search) || a.id.toString() === search)}
|
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}
|
ItemSeparatorComponent={LegacyFormDivider}
|
||||||
keyExtractor={item => item.name}
|
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
</ErrorBoundary>
|
</ErrorBoundary>
|
||||||
|
|
|
||||||
|
|
@ -1,20 +1,40 @@
|
||||||
import { Asset } from "@lib/api/assets";
|
import { Asset } from "@lib/api/assets";
|
||||||
|
import { lazyDestructure } from "@lib/utils/lazy";
|
||||||
|
import { findByProps } from "@metro";
|
||||||
import { clipboard } from "@metro/common";
|
import { clipboard } from "@metro/common";
|
||||||
import { LegacyFormRow } from "@metro/common/components";
|
import { Stack, TableRow } from "@metro/common/components";
|
||||||
import { showToast } from "@ui/toasts";
|
import { showToast } from "@ui/toasts";
|
||||||
import { Image } from "react-native";
|
import { Image } from "react-native";
|
||||||
|
|
||||||
|
const { openAlert } = lazyDestructure(() => findByProps("openAlert", "dismissAlert"));
|
||||||
|
const { AlertModal, AlertActionButton } = lazyDestructure(() => findByProps("AlertModal", "AlertActions"));
|
||||||
|
|
||||||
interface AssetDisplayProps { asset: Asset; }
|
interface AssetDisplayProps { asset: Asset; }
|
||||||
|
|
||||||
export default function AssetDisplay({ asset }: AssetDisplayProps) {
|
export default function AssetDisplay({ asset }: AssetDisplayProps) {
|
||||||
return (
|
return (
|
||||||
<LegacyFormRow
|
<TableRow
|
||||||
label={`${asset.name} - ${asset.id}`}
|
label={asset.name}
|
||||||
trailing={<Image source={asset.id} style={{ width: 32, height: 32 }} />}
|
subLabel={`ID: ${asset.id}`}
|
||||||
|
icon={<Image source={asset.id} style={{ width: 32, height: 32 }} />}
|
||||||
onPress={() => {
|
onPress={() => {
|
||||||
clipboard.setString(asset.name);
|
openAlert("revenge-asset-display-details", <AlertModal
|
||||||
showToast.showCopyToClipboard();
|
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