import React from "react";
import {
Box,
Editable,
EditablePreview,
EditableInput,
Flex,
IconButton,
PseudoBox,
Skeleton,
} from "@chakra-ui/core";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import { Delay, Heading1, Heading2 } from "./util";
import ItemList, { ItemListSkeleton } from "./ItemList";
import "./ItemsPanel.css";
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 OutfitHeading({ outfitState, dispatchToOutfit }) {
return (
dispatchToOutfit({ type: "rename", outfitName: value })
}
>
{({ isEditing, onRequestEdit }) => (
<>
{!isEditing && (
)}
>
)}
);
}
function OutfitNameEditButton({ onRequestEdit }) {
return (
);
}
export default ItemsPanel;