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,
Grid,
Heading,
IconButton,
Image,
Stack,
PseudoBox,
Editable,
EditablePreview,
EditableInput,
} from "@chakra-ui/core";
import useOutfitState from "./useOutfitState.js";
@ -58,18 +62,49 @@ function ItemsPanel() {
const [zonesAndItems, wearItem] = useOutfitState();
return (
<Stack spacing="10">
{zonesAndItems.map(({ zoneName, items, wornItemId }) => (
<Box key={zoneName}>
<ItemsForZone
zoneName={zoneName}
items={items}
wornItemId={wornItemId}
onWearItem={wearItem}
/>
</Box>
))}
</Stack>
<>
<PseudoBox role="group" d="inline-block">
<Heading size="xl" mb="6" wordBreak="break-word">
<Editable defaultValue="roopal27">
{({ isEditing, onRequestEdit }) => (
<>
<EditablePreview d="inline" />
<EditableInput />
{!isEditing && (
<PseudoBox
d="inline-block"
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>
</>
);
}