refactor ItemList.js -> Item.js, cleanups & docs
This commit is contained in:
Matt Dunn-Rankin
parent
c0790b11c7
commit
0eae1679aa
4 changed files with 233 additions and 178 deletions
231
src/Item.js
Normal file
231
src/Item.js
Normal file
|
|
@ -0,0 +1,231 @@
|
||||||
|
import React from "react";
|
||||||
|
import { css, cx } from "emotion";
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Flex,
|
||||||
|
IconButton,
|
||||||
|
Image,
|
||||||
|
Skeleton,
|
||||||
|
Tooltip,
|
||||||
|
useTheme,
|
||||||
|
} from "@chakra-ui/core";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Item show a basic summary of an item, in the context of the current outfit!
|
||||||
|
*
|
||||||
|
* It also responds to the focus state of an `input` as its previous sibling.
|
||||||
|
* This will be an invisible radio/checkbox that controls the actual wear
|
||||||
|
* state.
|
||||||
|
*
|
||||||
|
* In fact, this component can't trigger wear or unwear events! When you click
|
||||||
|
* it in the app, you're actually clicking a <label> that wraps the radio or
|
||||||
|
* checkbox. We _do_ control the Remove button in here, though!
|
||||||
|
*/
|
||||||
|
export function Item({ item, itemNameId, outfitState, dispatchToOutfit }) {
|
||||||
|
const { wornItemIds, allItemIds } = outfitState;
|
||||||
|
const isWorn = wornItemIds.includes(item.id);
|
||||||
|
const isInOutfit = allItemIds.includes(item.id);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ItemContainer>
|
||||||
|
<ItemThumbnail src={item.thumbnailUrl} isWorn={isWorn} />
|
||||||
|
<Box width="3" />
|
||||||
|
<ItemName id={itemNameId} isWorn={isWorn}>
|
||||||
|
{item.name}
|
||||||
|
</ItemName>
|
||||||
|
<Box flexGrow="1" />
|
||||||
|
{isInOutfit && (
|
||||||
|
<RemoveItemButton
|
||||||
|
onClick={() =>
|
||||||
|
dispatchToOutfit({ type: "removeItem", itemId: item.id })
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</ItemContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ItemContainer is the outermost element of an `Item`.
|
||||||
|
*
|
||||||
|
* It provides spacing, but also is responsible for a number of hover/focus/etc
|
||||||
|
* styles - including for its children, who sometimes reference it as an
|
||||||
|
* .item-container parent!
|
||||||
|
*/
|
||||||
|
function ItemContainer({ children }) {
|
||||||
|
const theme = useTheme();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
p="1"
|
||||||
|
my="1"
|
||||||
|
rounded="lg"
|
||||||
|
d="flex"
|
||||||
|
alignItems="center"
|
||||||
|
cursor="pointer"
|
||||||
|
border="1px"
|
||||||
|
borderColor="transparent"
|
||||||
|
className={cx([
|
||||||
|
"item-container",
|
||||||
|
css`
|
||||||
|
&:hover,
|
||||||
|
input:focus + & {
|
||||||
|
background-color: ${theme.colors.gray["100"]};
|
||||||
|
}
|
||||||
|
|
||||||
|
input:active + & {
|
||||||
|
border-color: ${theme.colors.green["400"]};
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked:focus + & {
|
||||||
|
border-color: ${theme.colors.green["800"]};
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
])}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ItemThumbnail shows a small preview image for the item, including some
|
||||||
|
* hover/focus and worn/unworn states.
|
||||||
|
*/
|
||||||
|
function ItemThumbnail({ src, isWorn }) {
|
||||||
|
const theme = useTheme();
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
rounded="lg"
|
||||||
|
boxShadow="md"
|
||||||
|
border="1px"
|
||||||
|
borderColor="green.700"
|
||||||
|
width="50px"
|
||||||
|
height="50px"
|
||||||
|
overflow="hidden"
|
||||||
|
transition="all 0.15s"
|
||||||
|
transformOrigin="center"
|
||||||
|
transform="scale(0.8)"
|
||||||
|
className={css([
|
||||||
|
!isWorn && {
|
||||||
|
[containerHasFocus]: {
|
||||||
|
opacity: "0.9",
|
||||||
|
transform: "scale(0.9)",
|
||||||
|
borderColor: theme.colors.green["600"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
isWorn && {
|
||||||
|
opacity: 1,
|
||||||
|
transform: "none",
|
||||||
|
},
|
||||||
|
])}
|
||||||
|
>
|
||||||
|
<Image src={src} />
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ItemName shows the item's name, including some hover/focus and worn/unworn
|
||||||
|
* states.
|
||||||
|
*/
|
||||||
|
function ItemName({ children, ...props }) {
|
||||||
|
const theme = useTheme();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
fontSize="md"
|
||||||
|
color="green.800"
|
||||||
|
transition="all 0.15s"
|
||||||
|
className={css`
|
||||||
|
${containerHasFocus} {
|
||||||
|
opacity: 0.9;
|
||||||
|
font-weight: ${theme.fontWeights.medium};
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + .item-container & {
|
||||||
|
opacity: 1;
|
||||||
|
font-weight: ${theme.fontWeights.bold};
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* RemoveItemButton lets the user remove the item from the outfit altogether.
|
||||||
|
*
|
||||||
|
* This removes it from their "closet", which is even more severe than
|
||||||
|
* unwearing it: it disappears from your item list entirely, until you find it
|
||||||
|
* again via search!
|
||||||
|
*/
|
||||||
|
function RemoveItemButton({ onClick }) {
|
||||||
|
const theme = useTheme();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Tooltip label="Remove" placement="top">
|
||||||
|
<IconButton
|
||||||
|
icon="delete"
|
||||||
|
aria-label="Remove from outfit"
|
||||||
|
variant="ghost"
|
||||||
|
color="gray.400"
|
||||||
|
onClick={(e) => {
|
||||||
|
onClick();
|
||||||
|
e.preventDefault();
|
||||||
|
}}
|
||||||
|
className={css`
|
||||||
|
opacity: 0;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
${containerHasFocus} {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
opacity: 1;
|
||||||
|
background-color: ${theme.colors.gray["300"]};
|
||||||
|
color: ${theme.colors.gray["700"]};
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ItemListContainer is a container for Item components! Wrap your Item
|
||||||
|
* components in this to ensure a consistent list layout.
|
||||||
|
*/
|
||||||
|
export function ItemListContainer({ children }) {
|
||||||
|
return <Flex direction="column">{children}</Flex>;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ItemListSkeleton is a loading placeholder for an `ItemListContainer` and the
|
||||||
|
* `Item`s inside!
|
||||||
|
*/
|
||||||
|
export function ItemListSkeleton({ count }) {
|
||||||
|
return (
|
||||||
|
<ItemListContainer>
|
||||||
|
{Array.from({ length: count }).map((_, i) => (
|
||||||
|
<ItemContainer key={i}>
|
||||||
|
<Skeleton width="50px" height="50px" />
|
||||||
|
<Box width="3" />
|
||||||
|
<Skeleton height="1.5rem" width="12rem" />
|
||||||
|
</ItemContainer>
|
||||||
|
))}
|
||||||
|
</ItemListContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* containerHasFocus is a common CSS selector, for the case where our parent
|
||||||
|
* .item-container is hovered or the adjacent hidden radio/checkbox is
|
||||||
|
* focused.
|
||||||
|
*/
|
||||||
|
const containerHasFocus =
|
||||||
|
".item-container:hover &, input:focus + .item-container &";
|
||||||
176
src/ItemList.js
176
src/ItemList.js
|
|
@ -1,176 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
import { css } from "emotion";
|
|
||||||
import {
|
|
||||||
Box,
|
|
||||||
Flex,
|
|
||||||
IconButton,
|
|
||||||
Image,
|
|
||||||
Skeleton,
|
|
||||||
Tooltip,
|
|
||||||
useTheme,
|
|
||||||
} from "@chakra-ui/core";
|
|
||||||
|
|
||||||
export function ItemListContainer({ children }) {
|
|
||||||
return <Flex direction="column">{children}</Flex>;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function ItemListSkeleton({ count }) {
|
|
||||||
return (
|
|
||||||
<Flex direction="column">
|
|
||||||
{Array.from({ length: count }).map((_, i) => (
|
|
||||||
<ItemSkeleton key={i} />
|
|
||||||
))}
|
|
||||||
</Flex>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function Item({ item, itemNameId, outfitState, dispatchToOutfit }) {
|
|
||||||
const { allItemIds } = outfitState;
|
|
||||||
const isInOutfit = allItemIds.includes(item.id);
|
|
||||||
const theme = useTheme();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ItemContainer>
|
|
||||||
<ItemThumbnail src={item.thumbnailUrl} />
|
|
||||||
<Box width="3" />
|
|
||||||
<ItemName id={itemNameId}>{item.name}</ItemName>
|
|
||||||
<Box flexGrow="1" />
|
|
||||||
{isInOutfit && (
|
|
||||||
<Tooltip label="Remove" placement="top">
|
|
||||||
<IconButton
|
|
||||||
icon="delete"
|
|
||||||
aria-label="Remove from outfit"
|
|
||||||
variant="ghost"
|
|
||||||
color="gray.400"
|
|
||||||
onClick={(e) => {
|
|
||||||
dispatchToOutfit({ type: "removeItem", itemId: item.id });
|
|
||||||
e.preventDefault();
|
|
||||||
}}
|
|
||||||
opacity="0"
|
|
||||||
transitionProperty="opacity color"
|
|
||||||
transitionDuration="0.2s"
|
|
||||||
className={css`
|
|
||||||
&:focus,
|
|
||||||
&:hover,
|
|
||||||
.item-container:hover &,
|
|
||||||
input:focus + .item-container & {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
background-color: ${theme.colors.gray["300"]};
|
|
||||||
color: ${theme.colors.gray["700"]};
|
|
||||||
}
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</Tooltip>
|
|
||||||
)}
|
|
||||||
</ItemContainer>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function ItemSkeleton() {
|
|
||||||
return (
|
|
||||||
<ItemContainer>
|
|
||||||
<Box d="flex" alignItems="center">
|
|
||||||
<Skeleton width="50px" height="50px" />
|
|
||||||
<Box width="3" />
|
|
||||||
<Skeleton height="1.5rem" width="12rem" />
|
|
||||||
</Box>
|
|
||||||
</ItemContainer>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function ItemContainer({ children }) {
|
|
||||||
const theme = useTheme();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Box
|
|
||||||
p="1"
|
|
||||||
my="1"
|
|
||||||
rounded="lg"
|
|
||||||
d="flex"
|
|
||||||
alignItems="center"
|
|
||||||
cursor="pointer"
|
|
||||||
border="1px"
|
|
||||||
borderColor="transparent"
|
|
||||||
className={
|
|
||||||
"item-container " +
|
|
||||||
css`
|
|
||||||
&:hover,
|
|
||||||
input:focus + & {
|
|
||||||
background-color: ${theme.colors.gray["100"]};
|
|
||||||
}
|
|
||||||
|
|
||||||
input:active + & {
|
|
||||||
border-color: ${theme.colors.green["400"]};
|
|
||||||
}
|
|
||||||
input:checked:focus + & {
|
|
||||||
border-color: ${theme.colors.green["800"]};
|
|
||||||
}
|
|
||||||
`
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function ItemThumbnail({ src }) {
|
|
||||||
const theme = useTheme();
|
|
||||||
return (
|
|
||||||
<Box
|
|
||||||
rounded="lg"
|
|
||||||
boxShadow="md"
|
|
||||||
border="1px"
|
|
||||||
borderColor="green.700"
|
|
||||||
width="50px"
|
|
||||||
height="50px"
|
|
||||||
overflow="hidden"
|
|
||||||
transition="all 0.15s"
|
|
||||||
transformOrigin="center"
|
|
||||||
transform="scale(0.8)"
|
|
||||||
className={css`
|
|
||||||
.item-container:hover & {
|
|
||||||
opacity: 0.9;
|
|
||||||
transform: scale(0.9);
|
|
||||||
bordercolor: ${theme.colors.green["600"]};
|
|
||||||
}
|
|
||||||
|
|
||||||
input:checked + .item-container & {
|
|
||||||
opacity: 1;
|
|
||||||
transform: none;
|
|
||||||
}
|
|
||||||
`}
|
|
||||||
>
|
|
||||||
<Image src={src} />
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function ItemName({ children, ...props }) {
|
|
||||||
const theme = useTheme();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Box
|
|
||||||
fontSize="md"
|
|
||||||
color="green.800"
|
|
||||||
transition="all 0.15s"
|
|
||||||
className={css`
|
|
||||||
.item-container:hover & {
|
|
||||||
opacity: 0.9;
|
|
||||||
font-weight: ${theme.fontWeights.medium};
|
|
||||||
}
|
|
||||||
|
|
||||||
input:checked + .item-container & {
|
|
||||||
opacity: 1;
|
|
||||||
font-weight: ${theme.fontWeights.bold};
|
|
||||||
}
|
|
||||||
`}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -14,7 +14,7 @@ import {
|
||||||
import { CSSTransition, TransitionGroup } from "react-transition-group";
|
import { CSSTransition, TransitionGroup } from "react-transition-group";
|
||||||
|
|
||||||
import { Delay, Heading1, Heading2 } from "./util";
|
import { Delay, Heading1, Heading2 } from "./util";
|
||||||
import { ItemListContainer, Item, ItemListSkeleton } from "./ItemList";
|
import { Item, ItemListContainer, ItemListSkeleton } from "./Item";
|
||||||
|
|
||||||
function ItemsPanel({ outfitState, loading, dispatchToOutfit }) {
|
function ItemsPanel({ outfitState, loading, dispatchToOutfit }) {
|
||||||
const { zonesAndItems } = outfitState;
|
const { zonesAndItems } = outfitState;
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ import { Box, Text, VisuallyHidden } from "@chakra-ui/core";
|
||||||
import { useQuery } from "@apollo/react-hooks";
|
import { useQuery } from "@apollo/react-hooks";
|
||||||
|
|
||||||
import { Delay, Heading1, useDebounce } from "./util";
|
import { Delay, Heading1, useDebounce } from "./util";
|
||||||
import { ItemListContainer, ItemListSkeleton, Item } from "./ItemList";
|
import { Item, ItemListContainer, ItemListSkeleton } from "./Item";
|
||||||
import { itemAppearanceFragment } from "./OutfitPreview";
|
import { itemAppearanceFragment } from "./OutfitPreview";
|
||||||
|
|
||||||
function SearchPanel({
|
function SearchPanel({
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue