creevey/lib/client/addon/components/Panel.js

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

"use strict";

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

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

var _components = require("@storybook/components");

var _ResultsPage = require("../../shared/components/ResultsPage");

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

var _helpers = require("../../shared/helpers");

var _TestSelect = _interopRequireDefault(require("./TestSelect"));

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

var Wrapper = _theming.styled.div(function (_ref) {
  var isRunning = _ref.isRunning;
  return {
    opacity: isRunning ? 0.5 : 1,
    height: '100%'
  };
});

var TestSelectContainer = _theming.styled.div(function (_ref2) {
  var theme = _ref2.theme;
  return {
    padding: '8px',
    border: "1px solid ".concat(theme.appBorderColor)
  };
});

var Panel = function Panel(_ref3) {
  var _result$results, _result$results$lengt, _result$results2;

  var tests = _ref3.tests,
      selectedTestId = _ref3.selectedTestId,
      onChangeTest = _ref3.onChangeTest,
      onImageApprove = _ref3.onImageApprove;
  var result = tests.find(function (x) {
    return x.id === selectedTestId;
  });
  var isRunning = (result === null || result === void 0 ? void 0 : result.status) === 'running';
  return /*#__PURE__*/_react.default.createElement("div", null, tests.length > 1 && /*#__PURE__*/_react.default.createElement(TestSelectContainer, null, /*#__PURE__*/_react.default.createElement(_TestSelect.default, {
    tests: tests,
    selectedTestId: selectedTestId,
    onChangeTest: onChangeTest
  })), isRunning && /*#__PURE__*/_react.default.createElement(_components.Loader, null), result !== null && result !== void 0 && (_result$results = result.results) !== null && _result$results !== void 0 && _result$results.length ? /*#__PURE__*/_react.default.createElement(Wrapper, {
    isRunning: isRunning
  }, /*#__PURE__*/_react.default.createElement(_ResultsPage.ResultsPage, {
    height: '100%',
    key: "".concat(result.id, "_").concat((_result$results$lengt = (_result$results2 = result.results) === null || _result$results2 === void 0 ? void 0 : _result$results2.length) !== null && _result$results$lengt !== void 0 ? _result$results$lengt : 0) // TODO
    ,
    id: result.id,
    path: (0, _helpers.getTestPath)(result) // TODO Memo?
    ,
    results: result.results,
    approved: result.approved,
    onImageApprove: onImageApprove
  })) : null);
};

exports.Panel = Panel;