OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

editable outfit name

Browse source
This commit is contained in:
Matt Dunn-Rankin 2020-04-22 01:10:24 -07:00
parent e67ca7dc34
commit 32b31c6596
1 changed files with 47 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
app/src/WardrobePage.js
View file

@ -4,9 +4,13 @@ import {
Flex, Flex,
Grid, Grid,
Heading, Heading,
IconButton,
Image, Image,
Stack, Stack,
PseudoBox, PseudoBox,
Editable,
EditablePreview,
EditableInput,
} from "@chakra-ui/core"; } from "@chakra-ui/core";
import useOutfitState from "./useOutfitState.js"; import useOutfitState from "./useOutfitState.js";
@ -58,18 +62,49 @@ function ItemsPanel() {
const [zonesAndItems, wearItem] = useOutfitState(); const [zonesAndItems, wearItem] = useOutfitState();
return ( return (
<Stack spacing="10"> <>
{zonesAndItems.map(({ zoneName, items, wornItemId }) => ( <PseudoBox role="group" d="inline-block">
<Box key={zoneName}> <Heading size="xl" mb="6" wordBreak="break-word">
<ItemsForZone <Editable defaultValue="roopal27">
zoneName={zoneName} {({ isEditing, onRequestEdit }) => (
items={items} <>
wornItemId={wornItemId} <EditablePreview d="inline" />
onWearItem={wearItem} <EditableInput />
/> {!isEditing && (
</Box> <PseudoBox
))} d="inline-block"
</Stack> opacity="0"
transition="opacity 0.5s"
_groupHover={{ opacity: "1" }}
onClick={onRequestEdit}
>
<IconButton
icon="edit"
variant="link"
color="gray.600"
aria-label="Edit outfit name"
title="Edit outfit name"
/>
</PseudoBox>
)}
</>
)}
</Editable>
</Heading>
</PseudoBox>
<Stack spacing="10">
{zonesAndItems.map(({ zoneName, items, wornItemId }) => (
<Box key={zoneName}>
<ItemsForZone
zoneName={zoneName}
items={items}
wornItemId={wornItemId}
onWearItem={wearItem}
/>
</Box>
))}
</Stack>
</>
); );
} }