impress-2020/src/app/PosePicker.js

import React from "react";
import { css, cx } from "emotion";
import {
  Box,
  Button,
  Flex,
  Image,
  Popover,
  PopoverArrow,
  PopoverContent,
  PopoverTrigger,
  useTheme,
} from "@chakra-ui/core";

import { safeImageUrl } from "./util";

// From https://twemoji.twitter.com/, thank you!
import twemojiSmile from "../images/twemoji/smile.svg";
import twemojiCry from "../images/twemoji/cry.svg";
import twemojiSick from "../images/twemoji/sick.svg";
import twemojiMasc from "../images/twemoji/masc.svg";
import twemojiFem from "../images/twemoji/fem.svg";

function PosePicker({ onLockFocus, onUnlockFocus }) {
  const theme = useTheme();

  return (
    <Popover
      placement="top-end"
      usePortal
      onOpen={onLockFocus}
      onClose={onUnlockFocus}
    >
      {({ isOpen }) => (
        <>
          <PopoverTrigger>
            <Button
              variant="unstyled"
              boxShadow="md"
              d="flex"
              alignItems="center"
              justifyContent="center"
              _focus={{ borderColor: "gray.50" }}
              _hover={{ borderColor: "gray.50" }}
              outline="initial"
              className={cx(
                css`
                  border: 1px solid transparent !important;
                  transition: border-color 0.2s !important;

                  &:focus,
                  &:hover,
                  &.is-open {
                    border-color: ${theme.colors.gray["50"]} !important;
                  }

                  &.is-open {
                    border-width: 2px !important;
                  }
                `,
                isOpen && "is-open"
              )}
            >
              <EmojiImage src={twemojiSmile} aria-label="Choose a pose" />
            </Button>
          </PopoverTrigger>
          <PopoverContent>
            <Box p="4">
              <table width="100%" borderSpacing="8px">
                <thead>
                  <tr>
                    <th />
                    <Cell as="th">
                      <EmojiImage src={twemojiSmile} aria-label="Happy" />
                    </Cell>
                    <Cell as="th">
                      <EmojiImage src={twemojiCry} aria-label="Sad" />
                    </Cell>
                    <Cell as="th">
                      <EmojiImage src={twemojiSick} aria-label="Sick" />
                    </Cell>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <Cell as="th">
                      <EmojiImage src={twemojiMasc} aria-label="Masculine" />
                    </Cell>
                    <Cell as="td">
                      <PoseButton src="http://pets.neopets.com/cp/42j5q3zx/1/1.png" />
                    </Cell>
                    <Cell as="td">
                      <PoseButton src="http://pets.neopets.com/cp/42j5q3zx/2/1.png" />
                    </Cell>
                    <Cell as="td">
                      <PoseButton src="http://pets.neopets.com/cp/42j5q3zx/4/1.png" />
                    </Cell>
                  </tr>
                  <tr>
                    <Cell as="th">
                      <EmojiImage src={twemojiFem} aria-label="Feminine" />
                    </Cell>
                    <Cell as="td">
                      <PoseButton src="http://pets.neopets.com/cp/xgnghng7/1/1.png" />
                    </Cell>
                    <Cell as="td">
                      <PoseButton src="http://pets.neopets.com/cp/xgnghng7/2/1.png" />
                    </Cell>
                    <Cell as="td">
                      <PoseButton src="http://pets.neopets.com/cp/xgnghng7/4/1.png" />
                    </Cell>
                  </tr>
                </tbody>
              </table>
            </Box>
            <PopoverArrow />
          </PopoverContent>
        </>
      )}
    </Popover>
  );
}

function Cell({ children, as }) {
  const Tag = as;
  return (
    <Tag>
      <Flex justify="center" p="1">
        {children}
      </Flex>
    </Tag>
  );
}

function PoseButton({ src }) {
  return (
    <Box rounded="full" boxShadow="md" overflow="hidden">
      <Button variant="unstyled" width="auto" height="auto">
        <Image
          src={safeImageUrl(src)}
          width="50px"
          height="50px"
          className={css`
            opacity: 0.01;

            &[src] {
              opacity: 1;
              transition: opacity 0.2s;
            }
          `}
        />
      </Button>
    </Box>
  );
}

function EmojiImage({ src, "aria-label": ariaLabel }) {
  return <Image src={src} aria-label={ariaLabel} width="16px" height="16px" />;
}

export default PosePicker;