@matt-dunn/react-wireframes/lib/WireframeAnnotationNotes/WireframeAnnotationNotes.js

React component to annotate your components — useful for prototypes and proof of concepts

"use strict";

require("core-js/modules/es.array.map");

require("core-js/modules/es.array.slice");

require("core-js/modules/es.object.freeze");

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

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

var _styled = _interopRequireDefault(require("@emotion/styled"));

var _WireframeAnnotationNote = require("./WireframeAnnotationNote");

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

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n  padding: 20px;\n  text-align: center;\n  color: #888;\n  font-size: 2rem;\n  font-weight: lighter;\n  line-height: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  \n  > p {\n    max-width: 75%;\n    margin: 0;\n    padding: 0;\n  }\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  outline: none;\n  width: 100%;\n  \n  > li:not(:last-child) {\n    border-bottom: 1px solid #ccc;\n  }\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var WireframeAnnotationNotesContainer = _styled.default.ul(_templateObject());

var NoAnnotations = _styled.default.div(_templateObject2());

exports.NoAnnotations = NoAnnotations;

var WireframeAnnotationNotes = function WireframeAnnotationNotes(_ref) {
  var annotations = _ref.annotations,
      parentReference = _ref.parentReference,
      highlightedNote = _ref.highlightedNote,
      className = _ref.className;

  if (annotations && annotations.length > 0) {
    return /*#__PURE__*/_react.default.createElement(WireframeAnnotationNotesContainer, {
      tabIndex: 0,
      className: className
    }, annotations.map(function (annotation) {
      return /*#__PURE__*/_react.default.createElement("li", {
        key: annotation.id,
        "data-annotation-id": annotation.id,
        "data-highlighted": highlightedNote === annotation
      }, /*#__PURE__*/_react.default.createElement(_WireframeAnnotationNote.WireframeAnnotationNote, {
        annotation: annotation,
        parentReference: parentReference,
        isHighlighted: highlightedNote === annotation
      }));
    }));
  }

  return /*#__PURE__*/_react.default.createElement(NoAnnotations, null, /*#__PURE__*/_react.default.createElement("p", null, "No annotations on this page"));
};

exports.WireframeAnnotationNotes = WireframeAnnotationNotes;