polished#cover JavaScript Examples

function FlipBlur({src, ...props}) {
  return (
    <ChakraBox
      style={{
        background: `center center / cover no-repeat url(${src})`,
        filter: `blur(${rem(6)})`,
        ...cover(),
        zIndex: 1,
      }}
      {...props}
    />
  )
}

function Drawer({show, onHide, ...props}) {
  const ref = useRef()

  useClickOutside(ref, () => {
    onHide()
  })

  return show ? (
    <Box
      style={{
        ...backgrounds(transparentize(0.2, theme.colors.black)),
        ...cover(),
        position: 'fixed',
        zIndex: 1300,
      }}
    >
      <Absolute
        bg={theme.colors.white}
        zIndex={1301}
        top={0}
        bottom={0}
        right={0}
        width={rem(360)}
        ref={ref}
        {...props}
      />
      <Absolute top="1em" right="1em" zIndex={1301}>
        <FiX
          color={theme.colors.muted}
          fontSize={theme.fontSizes.large}
          onClick={onHide}
          cursor="pointer"
        />
      </Absolute>
    </Box>
  ) : null
}

export function Flip({
  hash,
  images,
  orders,
  fetched,
  failed,
  decoded,
  option,
  variant,
  timerDetails,
  onChoose,
  onImageFail,
  isTrainingValidation,
}) {
  const radius = useBreakpointValue(['12px', '8px'])
  const windowHeight = use100vh()
  const isDesktop = useIsDesktop()
  const refFlipHover = useRef(null)
  const refZoomIconHover = useRef(null)
  const isFlipHovered = useHover(refFlipHover.current)
  const isZoomIconHovered = useHover(refZoomIconHover.current)
  const {
    isOpen: isOpenFlipZoom,
    onOpen: onOpenFlipZoom,
    onClose: onCloseFlipZoom,
  } = useDisclosure()

  const scrollToZoomedFlip = flipId => {
    scroller.scrollTo(`flipId-${flipId}`, {
      containerId: 'zoomedFlips',
      horizontal: false,
      offset: -80,
    })
  }

  const onFLipClick = e => {
    if (e.ctrlKey || e.metaKey) {
      onOpenFlipZoom()
    } else {
      onChoose(hash)
    }
  }

  if ((fetched && !decoded) || failed) return <FailedFlip />
  if (!fetched) return <LoadingFlip />

  return (
    <div ref={refFlipHover}>
      <FlipHolder
        isZoomHovered={isZoomIconHovered}
        css={
          // eslint-disable-next-line no-nested-ternary
          option
            ? option === variant
              ? {
                  border: `solid ${rem(2)} ${theme.colors.primary}`,
                  boxShadow: `0 0 ${rem(2)} ${rem(3)} ${transparentize(
                    0.75,
                    theme.colors.primary
                  )}`,
                  transition: 'all .3s cubic-bezier(.5, 0, .5, 1)',
                }
              : {
                  opacity: 0.3,
                  transform: 'scale(0.98)',
                  transition: 'all .3s cubic-bezier(.5, 0, .5, 1)',
                }
            : {}
        }
      >
        {reorderList(images, orders[variant - 1]).map((src, idx) => (
          <ChakraBox
            key={idx}
            h={[
              `calc((${windowHeight}px - 290px) / 4)`,
              'calc((100vh - 260px) / 4)',
            ]}
            borderRadius={getFlipBorderRadius(idx, images.length - 1, radius)}
            css={{
              // height: 'calc((100vh - 260px) / 4)',
              position: 'relative',
              overflow: 'hidden',
            }}
            onClick={
              isDesktop
                ? e => {
                    console.log('START')
                    onFLipClick(e)
                    console.log('OPENED')
                    setTimeout(() => scrollToZoomedFlip(idx), 100)
                    console.log('AFTER TIMEOUT')
                  }
                : () => onChoose(hash)
            }
          >
            {isDesktop && idx === 0 && (
              <div ref={refZoomIconHover}>
                <ChakraFlex
                  display={isFlipHovered ? 'flex' : 'none'}
                  align="center"
                  justify="center"
                  borderRadius="8px"
                  backgroundColor="rgba(17, 17, 17, 0.5)"
                  position="absolute"
                  top={1}
                  right={1}
                  h={8}
                  w={8}
                  opacity={0.5}
                  _hover={{opacity: 1}}
                  zIndex={2}
                  onClick={e => {
                    e.stopPropagation()
                    onOpenFlipZoom()
                  }}
                >
                  <ZoomFlipIcon h={5} w={5} />
                </ChakraFlex>
              </div>
            )}
            <FlipBlur src={src} />
            <FlipImage
              src={src}
              alt="current-flip"
              height="100%"
              width="100%"
              style={{
                ...borderRadius('top', idx === 0 ? rem(8) : 'none'),
                ...borderRadius(
                  'bottom',
                  idx === images.length - 1 ? rem(8) : 'none'
                ),
                position: 'relative',
                zIndex: 1,
              }}
              onError={onImageFail}
            />
          </ChakraBox>
        ))}

        <Modal size="xl" isOpen={isOpenFlipZoom} onClose={onCloseFlipZoom}>
          <ModalOverlay />
          <ChakraFlex
            zIndex={1401}
            position="fixed"
            top={0}
            left={0}
            right={0}
            h={20}
            justify="space-between"
            align="center"
            backgroundColor="gray.980"
          >
            <ChakraBox />
            <ChakraFlex zIndex={2} justify="center">
              <ValidationTimer
                key={
                  isShortSession(timerDetails.state)
                    ? 'short-timer'
                    : 'long-timer'
                }
                validationStart={timerDetails.validationStart}
                duration={
                  timerDetails.shortSessionDuration -
                  (isTrainingValidation ? 0 : 10) +
                  (isShortSession(timerDetails.state)
                    ? 0
                    : timerDetails.longSessionDuration)
                }
                color="white"
              />
            </ChakraFlex>
            <CrossSmallIcon
              color="white"
              boxSize={8}
              mr={10}
              onClick={onCloseFlipZoom}
            />
          </ChakraFlex>
          <ModalContent
            mt={20}
            bg="transparent"
            border="none"
            boxShadow="none"
            containerProps={{id: 'zoomedFlips'}}
          >
            <ModalBody py={0}>
              <ChakraFlex h="100%" w="100%" direction="column" align="center">
                <ChakraBox w="100%">
                  {reorderList(images, orders[variant - 1]).map((src, idx) => (
                    <ElementFlipImage
                      name={`flipId-${idx}`}
                      ratio={4 / 3}
                      bg="gray.50"
                    >
                      {src ? (
                        <ChakraBox position="relative">
                          <ChakraBox
                            style={{
                              background: `center center / cover no-repeat url(${src})`,
                              filter: `blur(${rem(24)})`,
                              ...cover(),
                              zIndex: 1,
                            }}
                          />
                          <FlipImage
                            src={src}
                            alt="current-flip"
                            height="100%"
                            width="100%"
                            style={{
                              position: 'relative',
                              zIndex: 1,
                            }}
                            onError={onImageFail}
                          />
                        </ChakraBox>
                      ) : (
                        <EmptyFlipImage />
                      )}
                    </ElementFlipImage>
                  ))}
                </ChakraBox>
              </ChakraFlex>
            </ModalBody>
          </ModalContent>
        </Modal>
      </FlipHolder>
    </div>
  )
}