@hackoregon/component-library/es/utils/DataChecker.js

Official repo for Hack Oregon React component library

function _templateObject3() {
  var data = _taggedTemplateLiteral([""]);

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

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n              color: red;\n            "]);

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

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  margin: 0 auto;\n  max-width: 900px;\n  width: 90%;\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) } })); }

import React, { Fragment } from "react";
import PropTypes from "prop-types";
import { css } from "emotion";
import checkData from "./checkData";
var wrapperStyle = css(_templateObject());

var DataChecker = function DataChecker(_ref) {
  var data = _ref.data,
      dataIsObject = _ref.dataIsObject,
      dataAccessors = _ref.dataAccessors,
      optionalKeys = _ref.optionalKeys,
      message = _ref.message,
      children = _ref.children;
  var keys = Object.keys(dataAccessors);
  var values = Object.values(dataAccessors);
  var results = checkData(data, values, dataIsObject, optionalKeys);
  var component = results.allKeysValid ? children : React.createElement("div", {
    className: wrapperStyle
  }, React.createElement("h1", null, message), results.invalidType && React.createElement("h2", null, "Invalid Type - check if array or object is expected"), React.createElement("h2", null, "Data Accessors"), keys.map(function (key, index) {
    var isValid = results[values[index]].valid === results[values[index]].total;
    var validCount = results[values[index]].valid;
    var totalCount = results[values[index]].total;
    var keyValue = values[index];
    var invalidStyle = !isValid ? css(_templateObject2()) : css(_templateObject3());
    return React.createElement("pre", {
      key: key,
      className: invalidStyle
    }, React.createElement("strong", null, isValid ? "✅ " : "⛔️ ", "".concat(key, ": ")), JSON.stringify(keyValue, undefined, 2), !isValid && React.createElement(Fragment, null, React.createElement("br", null), React.createElement("small", null, validCount === 0 ? "".concat(key, " is invalid. \"").concat(keyValue, "\" not found in data") : "".concat(key, " is invalid. \"").concat(keyValue, "\" missing in ").concat(totalCount - validCount, "/").concat(totalCount, " objects in data"))));
  }), React.createElement("h2", null, "Data"), React.createElement("pre", null, React.createElement("strong", null, "data: "), !dataIsObject && JSON.stringify(data, undefined, 2)));
  return component;
};

DataChecker.propTypes = {
  data: PropTypes.oneOfType([PropTypes.shape({}), PropTypes.arrayOf(PropTypes.shape({}))]).isRequired,
  dataAccessors: PropTypes.objectOf(PropTypes.string).isRequired,
  message: PropTypes.string,
  optionalKeys: PropTypes.shape({})
};
DataChecker.defaultProps = {
  message: "Invalid Data",
  dataIsObject: false
};
export default DataChecker;