informed/dist/esm/components/DebugField.js

A lightweight framework and utility for building powerful forms in React applications

import { objectWithoutProperties as _objectWithoutProperties } from '../_virtual/_rollupPluginBabelHelpers.js';
import React, { useEffect } from 'react';
import { useFieldState } from '../hooks/useFieldState.js';

var _excluded = ["name"];
var DebugField = function DebugField(_ref) {
  var name = _ref.name,
    props = _objectWithoutProperties(_ref, _excluded);
  var fieldState = useFieldState(name);
  var displayState = {};
  if (Object.keys(props).length > 0) {
    Object.keys(props).forEach(function (key) {
      displayState[key] = fieldState[key];
    });
  } else {
    displayState = fieldState;
  }
  useEffect(function () {
    var _window;
    // eslint-disable-next-line
    if ((_window = window) !== null && _window !== void 0 && _window.Prism) Prism.highlightAll();
  }, [displayState]);
  var content = JSON.stringify(displayState, null, 2);
  if (props.label) {
    content = "// ".concat(props.label, "\n") + content;
  }
  return /*#__PURE__*/React.createElement("pre", {
    className: "language-js"
  }, /*#__PURE__*/React.createElement("code", {
    className: "language-js"
  }, content));
};

export { DebugField };