impress/app/javascript/wardrobe-2020/WardrobePage/Item.js

import React from "react";
import { ClassNames } from "@emotion/react";
import {
  Box,
  Flex,
  IconButton,
  Skeleton,
  Tooltip,
  useColorModeValue,
  useTheme,
} from "@chakra-ui/react";
import { EditIcon, DeleteIcon, InfoIcon } from "@chakra-ui/icons";
import { loadable } from "../util";

import {
  ItemCardContent,
  ItemBadgeList,
  ItemKindBadge,
  MaybeAnimatedBadge,
  YouOwnThisBadge,
  YouWantThisBadge,
  getZoneBadges,
} from "../components/ItemCard";
import SupportOnly from "./support/SupportOnly";
import useSupport from "./support/useSupport";

const LoadableItemSupportDrawer = loadable(() =>
  import("./support/ItemSupportDrawer"),
);

/**
 * 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. Similarly, the parent provides the `onRemove` callback for the
 * Remove button.
 *
 * NOTE: This component is memoized with React.memo. It's surpisingly expensive
 *       to re-render, because Chakra components are a lil bit expensive from
 *       their internal complexity, and we have a lot of them here. And it can
 *       add up when there's a lot of Items in the list. This contributes to
 *       wearing/unwearing items being noticeably slower on lower-power
 *       devices.
 */
function Item({
  item,
  itemNameId,
  isWorn,
  isInOutfit,
  onRemove,
  isDisabled = false,
}) {
  const [supportDrawerIsOpen, setSupportDrawerIsOpen] = React.useState(false);

  return (
    <>
      <ItemContainer isDisabled={isDisabled}>
        <Box flex="1 1 0" minWidth="0">
          <ItemCardContent
            item={item}
            badges={<ItemBadges item={item} />}
            itemNameId={itemNameId}
            isWorn={isWorn}
            isDiabled={isDisabled}
            focusSelector={containerHasFocus}
          />
        </Box>
        <Box flex="0 0 auto" marginTop="5px">
          {isInOutfit && (
            <ItemActionButton
              icon={<DeleteIcon />}
              label="Remove"
              onClick={(e) => {
                onRemove(item.id);
                e.preventDefault();
              }}
            />
          )}
          <SupportOnly>
            <ItemActionButton
              icon={<EditIcon />}
              label="Support"
              onClick={(e) => {
                setSupportDrawerIsOpen(true);
                e.preventDefault();
              }}
            />
          </SupportOnly>
          <ItemActionButton
            icon={<InfoIcon />}
            label="More info"
            to={`/items/${item.id}`}
            target="_blank"
          />
        </Box>
      </ItemContainer>
      <SupportOnly>
        <LoadableItemSupportDrawer
          item={item}
          isOpen={supportDrawerIsOpen}
          onClose={() => setSupportDrawerIsOpen(false)}
        />
      </SupportOnly>
    </>
  );
}

/**
 * ItemSkeleton is a placeholder for when an Item is loading.
 */
function ItemSkeleton() {
  return (
    <ItemContainer isDisabled>
      <Skeleton width="50px" height="50px" />
      <Box width="3" />
      <Skeleton height="1.5rem" width="12rem" alignSelf="center" />
    </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, isDisabled = false }) {
  const theme = useTheme();

  const focusBackgroundColor = useColorModeValue(
    theme.colors.gray["100"],
    theme.colors.gray["700"],
  );

  const activeBorderColor = useColorModeValue(
    theme.colors.green["400"],
    theme.colors.green["500"],
  );

  const focusCheckedBorderColor = useColorModeValue(
    theme.colors.green["800"],
    theme.colors.green["300"],
  );

  return (
    <ClassNames>
      {({ css, cx }) => (
        <Box
          p="1"
          my="1"
          borderRadius="lg"
          d="flex"
          cursor={isDisabled ? undefined : "pointer"}
          border="1px"
          borderColor="transparent"
          className={cx([
            "item-container",
            !isDisabled &&
              css`
                &:hover,
                input:focus + & {
                  background-color: ${focusBackgroundColor};
                }

                input:active + & {
                  border-color: ${activeBorderColor};
                }

                input:checked:focus + & {
                  border-color: ${focusCheckedBorderColor};
                }
              `,
          ])}
        >
          {children}
        </Box>
      )}
    </ClassNames>
  );
}

function ItemBadges({ item }) {
  const { isSupportUser } = useSupport();
  const occupiedZones = item.appearanceOn.layers.map((l) => l.zone);
  const restrictedZones = item.appearanceOn.restrictedZones.filter(
    (z) => z.isCommonlyUsedByItems,
  );
  const isMaybeAnimated = item.appearanceOn.layers.some(
    (l) => l.canvasMovieLibraryUrl,
  );

  return (
    <ItemBadgeList>
      <ItemKindBadge isNc={item.isNc} isPb={item.isPb} />
      {
        // This badge is unreliable, but it's helpful for looking for animated
        // items to test, so we show it only to support. We use this form
        // instead of <SupportOnly />, to avoid adding extra badge list spacing
        // on the additional empty child.
        isMaybeAnimated && isSupportUser && <MaybeAnimatedBadge />
      }
      {getZoneBadges(occupiedZones, { variant: "occupies" })}
      {getZoneBadges(restrictedZones, { variant: "restricts" })}
      {item.currentUserOwnsThis && <YouOwnThisBadge variant="medium" />}
      {item.currentUserWantsThis && <YouWantThisBadge variant="medium" />}
    </ItemBadgeList>
  );
}

/**
 * ItemActionButton is one of a list of actions a user can take for this item.
 */
function ItemActionButton({ icon, label, to, onClick, ...props }) {
  const theme = useTheme();

  const focusBackgroundColor = useColorModeValue(
    theme.colors.gray["300"],
    theme.colors.gray["800"],
  );
  const focusColor = useColorModeValue(
    theme.colors.gray["700"],
    theme.colors.gray["200"],
  );

  return (
    <ClassNames>
      {({ css }) => (
        <Tooltip label={label} placement="top">
          <LinkOrButton
            {...props}
            component={IconButton}
            href={to}
            icon={icon}
            aria-label={label}
            variant="ghost"
            color="gray.400"
            onClick={onClick}
            className={css`
              opacity: 0;
              transition: all 0.2s;

              ${containerHasFocus} {
                opacity: 1;
              }

              &:focus,
              &:hover {
                opacity: 1;
                background-color: ${focusBackgroundColor};
                color: ${focusColor};
              }

              /* On touch devices, always show the buttons! This avoids having to
           * tap to reveal them (which toggles the item), or worse,
           * accidentally tapping a hidden button without realizing! */
              @media (hover: none) {
                opacity: 1;
              }
            `}
          />
        </Tooltip>
      )}
    </ClassNames>
  );
}

function LinkOrButton({ href, component, ...props }) {
  const ButtonComponent = component;
  if (href != null) {
    return <ButtonComponent as="a" href={href} {...props} />;
  } else {
    return <ButtonComponent {...props} />;
  }
}

/**
 * ItemListContainer is a container for Item components! Wrap your Item
 * components in this to ensure a consistent list layout.
 */
export function ItemListContainer({ children, ...props }) {
  return (
    <Flex direction="column" {...props}>
      {children}
    </Flex>
  );
}

/**
 * ItemListSkeleton is a placeholder for when an ItemListContainer and its
 * Items are loading.
 */
export function ItemListSkeleton({ count, ...props }) {
  return (
    <ItemListContainer {...props}>
      {Array.from({ length: count }).map((_, i) => (
        <ItemSkeleton key={i} />
      ))}
    </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 &";

export default React.memo(Item);