orcs-design-system/es/components/Avatar/CroppedImage.js

TeamForm's Design System, aka: ORCS

import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
import { variant } from "styled-system";
import css from "@styled-system/css";
import { themeGet } from "@styled-system/theme-get";
import { jsx as _jsx } from "react/jsx-runtime";
const CroppedImageContainer = /*#__PURE__*/styled.div.withConfig({
  displayName: "CroppedImageContainer",
  componentId: "sc-1bfrurv-0"
})(["position:relative;width:100%;height:100%;overflow:hidden;"]);
const CroppedImageInner = /*#__PURE__*/styled.div.withConfig({
  displayName: "CroppedImageInner",
  componentId: "sc-1bfrurv-1"
})(["padding-bottom:100%;position:relative;width:100%;"]);
const CroppedImageElement = /*#__PURE__*/styled.img.withConfig({
  displayName: "CroppedImageElement",
  componentId: "sc-1bfrurv-2"
})(["position:absolute;top:0;left:0;transform-origin:top left;height:auto;width:calc(100% + 0.5px);"]);
const resolveCustomSize = (customSize, props) => {
  if (!customSize) return null;
  if (customSize.includes("px") || customSize.includes("rem") || customSize.includes("em") || customSize.includes("%")) {
    return customSize;
  } else {
    return themeGet("avatarScale.".concat(customSize))(props) || customSize;
  }
};
const CroppedImage = _ref => {
  var _croppedAreaPercent$x, _croppedAreaPercent$y;
  let {
    src,
    alt,
    croppedAreaPercent,
    className,
    style
  } = _ref;
  const scale = 100 / (croppedAreaPercent.width || 1);
  const transform = {
    x: "".concat(-((_croppedAreaPercent$x = croppedAreaPercent.x) !== null && _croppedAreaPercent$x !== void 0 ? _croppedAreaPercent$x : 0) * scale, "%"),
    y: "".concat(-((_croppedAreaPercent$y = croppedAreaPercent.y) !== null && _croppedAreaPercent$y !== void 0 ? _croppedAreaPercent$y : 0) * scale, "%"),
    scale
  };
  const imageStyle = {
    transform: "translate3d(".concat(transform.x, ", ").concat(transform.y, ", 0) scale3d(").concat(transform.scale, ", ").concat(transform.scale, ", 1)"),
    width: "calc(100% + 0.5px)",
    height: "auto"
  };
  return /*#__PURE__*/_jsx(CroppedImageContainer, {
    className: className,
    style: style,
    children: /*#__PURE__*/_jsx(CroppedImageInner, {
      children: /*#__PURE__*/_jsx(CroppedImageElement, {
        src: src,
        alt: alt,
        style: imageStyle
      })
    })
  });
};
CroppedImage.propTypes = {
  src: PropTypes.string.isRequired,
  alt: PropTypes.string,
  croppedAreaPercent: PropTypes.shape({
    x: PropTypes.number.isRequired,
    y: PropTypes.number.isRequired,
    width: PropTypes.number.isRequired,
    height: PropTypes.number.isRequired
  }).isRequired,
  className: PropTypes.string,
  style: PropTypes.object
};
export const CroppedImageWrapper = /*#__PURE__*/styled(CroppedImage).withConfig({
  displayName: "CroppedImageWrapper",
  componentId: "sc-1bfrurv-3"
})(props => css({
  width: resolveCustomSize(props.customSize, props) || themeGet("avatarScale.avatarDefault")(props),
  height: resolveCustomSize(props.customSize, props) || themeGet("avatarScale.avatarDefault")(props),
  flex: "0 0 auto",
  backgroundColor: themeGet("colors.white")(props),
  border: "solid 1px " + themeGet("colors.greyLighter")(props),
  display: "block",
  borderRadius: "50%",
  overflow: "hidden"
}), props => variant({
  prop: "sizing",
  variants: {
    small: {
      width: themeGet("avatarScale.avatarSmall")(props),
      height: themeGet("avatarScale.avatarSmall")(props)
    },
    large: {
      width: themeGet("avatarScale.avatarLarge")(props),
      height: themeGet("avatarScale.avatarLarge")(props)
    }
  }
}), props => variant({
  prop: "shape",
  variants: {
    square: {
      borderRadius: themeGet("radii.2")(props)
    },
    hexagon: {
      borderRadius: "0",
      clipPath: "polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%)"
    },
    tag: {
      borderRadius: "0",
      clipPath: "polygon(6% 0, 95% 0, 95% 65%, 50% 100%, 6% 65%)"
    }
  }
}));
export const HeaderAvatarCroppedImage = /*#__PURE__*/styled(CroppedImage).withConfig({
  displayName: "HeaderAvatarCroppedImage",
  componentId: "sc-1bfrurv-4"
})(_ref2 => {
  let {
    $size,
    $shape
  } = _ref2;
  return {
    width: $size,
    height: $size,
    transition: "width 200ms ease-in-out, height 200ms ease-in-out",
    borderRadius: $shape === "circle" || !$shape ? "50%" : "0",
    overflow: "hidden",
    display: "block"
  };
});
CroppedImage.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "CroppedImage",
  "props": {
    "src": {
      "description": "",
      "type": {
        "name": "string"
      },
      "required": true
    },
    "alt": {
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "croppedAreaPercent": {
      "description": "",
      "type": {
        "name": "shape",
        "value": {
          "x": {
            "name": "number",
            "required": true
          },
          "y": {
            "name": "number",
            "required": true
          },
          "width": {
            "name": "number",
            "required": true
          },
          "height": {
            "name": "number",
            "required": true
          }
        }
      },
      "required": true
    },
    "className": {
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "style": {
      "description": "",
      "type": {
        "name": "object"
      },
      "required": false
    }
  }
};
export default CroppedImage;