All files / processors image.tsx

80% Statements 16/20
71.43% Branches 10/14
75% Functions 3/4
84.21% Lines 16/19

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 641x 1x 1x                               1x 2x             2x       1x 2x   2x   2x 1x     2x       2x   2x       1x   1x                        
import React, { ReactNode } from "react";
import { styled } from "frontity";
import Image, { Props as ImageProps } from "@frontity/components/image";
import { Processor, Element } from "../types";
 
type Props = ImageProps & {
  width: string;
  height: string;
  children: ReactNode;
};
 
interface ImageElement extends Element {
  props: Element["props"] & {
    "data-src"?: string;
    "data-srcset"?: string;
  };
}
 
const ContentImage: React.FC<Props> = (props) => {
  Iif (props.width && props.height) {
    return (
      <Container height={props.height} width={props.width}>
        <Image {...props} />
      </Container>
    );
  } else {
    return <Image {...props} />;
  }
};
 
const image: Processor<ImageElement> = {
  test: ({ node }) => node.component === "img",
  processor: ({ node }) => {
    Iif (node.parent?.component === "noscript") return null;
 
    if (node.props["data-src"]) {
      node.props.src = node.props["data-src"];
    }
 
    Iif (node.props["data-srcset"]) {
      node.props.srcSet = node.props["data-srcset"];
    }
 
    node.component = ContentImage;
 
    return node;
  },
};
 
export default image;
 
const Container = styled.span`
  display: block;
  position: relative;
  padding-bottom: ${({ height, width }: { height: string; width: string }) =>
    (parseInt(height, 10) / parseInt(width, 10)) * 100}%;
 
  noscript > img,
  img {
    position: absolute;
    height: 100%;
  }
`;