creevey/lib/client/shared/components/PageHeader/ImagePreview.js

Cross-browser screenshot testing tool for Storybook with fancy UI Runner

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ImagePreview = void 0;

var _react = _interopRequireDefault(require("react"));

var _theming = require("@storybook/theming");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var IMG_SIZE = 64;
var DIAG_LENGTH = Math.pow(2 * Math.pow(IMG_SIZE - 8, 2), 1 / 2);

var Button = _theming.styled.button(function (_ref) {
  var borderColor = _ref.borderColor;
  return {
    appearance: 'none',
    background: 'none',
    color: 'inherit',
    font: 'inherit',
    cursor: 'pointer',
    outline: 'none',
    zIndex: 1,
    margin: '0 10px',
    border: '2px solid transparent',
    borderColor: borderColor || 'transparent',
    '&:first-of-type': {
      marginLeft: 0
    }
  };
});

var Image = (0, _theming.withTheme)(_theming.styled.img(function (_ref2) {
  var hasBorder = _ref2.hasBorder,
      backgroundColor = _ref2.backgroundColor,
      theme = _ref2.theme;
  return {
    maxHeight: "".concat(IMG_SIZE, "px"),
    width: "".concat(IMG_SIZE, "px"),
    overflow: 'hidden',
    transform: hasBorder ? 'translateY(2px)' : undefined,
    '&::before': {
      content: "' '",
      display: 'block',
      height: "".concat(IMG_SIZE - 8, "px"),
      width: "".concat(IMG_SIZE - 8, "px"),
      margin: '4px',
      backgroundColor: backgroundColor,
      backgroundImage: "linear-gradient(\n      45deg,\n      rgba(0, 0, 0, 0) ".concat(DIAG_LENGTH / 2 - 0.5, "px,\n      ").concat(theme.color.medium, " ").concat(DIAG_LENGTH / 2 - 0.5, "px,\n      ").concat(theme.color.medium, " ").concat(DIAG_LENGTH / 2 + 0.5, "px,\n      rgba(0, 0, 0, 0) ").concat(DIAG_LENGTH / 2 + 0.5, "px\n    ),\n    linear-gradient(\n      315deg,\n      rgba(0, 0, 0, 0) ").concat(DIAG_LENGTH / 2 + 0.2, "px,\n      ").concat(theme.color.medium, " ").concat(DIAG_LENGTH / 2 + 0.2, "px,\n      ").concat(theme.color.medium, " ").concat(DIAG_LENGTH / 2 + 1.2, "px,\n      rgba(0, 0, 0, 0) ").concat(DIAG_LENGTH / 2 + 1.2, "px\n    )")
    }
  };
}));
var ImagePreview = (0, _theming.withTheme)(function (_ref3) {
  var isActive = _ref3.isActive,
      onClick = _ref3.onClick,
      imageName = _ref3.imageName,
      url = _ref3.url,
      theme = _ref3.theme,
      error = _ref3.error;

  var handleClick = function handleClick() {
    return onClick(imageName);
  };

  return /*#__PURE__*/_react.default.createElement(Button, {
    onClick: handleClick,
    borderColor: isActive ? theme.barSelectedColor : error ? theme.color.negative : undefined
  }, /*#__PURE__*/_react.default.createElement(Image, {
    hasBorder: isActive || error,
    src: url,
    alt: imageName,
    backgroundColor: theme.background.content
  }));
});
exports.ImagePreview = ImagePreview;