import React from "react";
import { css } from "emotion";
import {
Box,
Editable,
EditablePreview,
EditableInput,
Flex,
IconButton,
PseudoBox,
Skeleton,
VisuallyHidden,
} from "@chakra-ui/core";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import { Delay, Heading1, Heading2 } from "./util";
import { ItemListContainer, Item, ItemListSkeleton } from "./ItemList";
function ItemsPanel({ outfitState, loading, dispatchToOutfit }) {
const { zonesAndItems } = outfitState;
return (
{loading &&
[1, 2, 3].map((i) => (
))}
{!loading && (
{zonesAndItems.map(({ zoneLabel, items }) => (
{
e.style.height = e.offsetHeight + "px";
}}
>
{zoneLabel}
))}
)}
);
}
function ItemRadioList({ name, items, outfitState, dispatchToOutfit }) {
const onChange = (e) => {
const itemId = e.target.value;
dispatchToOutfit({ type: "wearItem", itemId });
};
const onToggle = (e) => {
// Clicking the radio button when already selected deselects it - this is
// how you can select none!
const itemId = e.target.value;
if (outfitState.wornItemIds.includes(itemId)) {
// We need the event handler to finish before this, so that simulated
// events don't just come back around and undo it - but we can't just
// solve that with `preventDefault`, because it breaks the radio's
// intended visual updates when we unwear. So, we `setTimeout` to do it
// after all event handlers resolve!
setTimeout(() => dispatchToOutfit({ type: "unwearItem", itemId }), 0);
}
};
return (
{items.map((item) => (
{
e.style.height = e.offsetHeight + "px";
}}
>
))}
);
}
function OutfitHeading({ outfitState, dispatchToOutfit }) {
return (
dispatchToOutfit({ type: "rename", outfitName: value })
}
>
{({ isEditing, onRequestEdit }) => (
{!isEditing && (
)}
)}
);
}
function OutfitNameEditButton({ onRequestEdit }) {
return (
);
}
export default ItemsPanel;