react-form-builder-devextreme/lib/history-component.js

A complete form builder for react. Some changes to design

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof3 = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
var HistoryComponent = function HistoryComponent(props) {
  var _useState = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    isHovering = _useState2[0],
    setIsHovering = _useState2[1];
  var handleMouseEnter = function handleMouseEnter() {
    setIsHovering(true);
  };
  var handleMouseLeave = function handleMouseLeave() {
    setIsHovering(false);
  };
  function jsonToTable(jsonArray) {
    // Start with a table
    var table = '<table border="1"><tr>';

    // Create header row
    var headers = jsonArray.reduce(function (acc, _ref) {
      var attributes = _ref.attributes;
      Object.keys(attributes).forEach(function (key) {
        if (!acc.includes(key)) {
          acc.push(key);
        }
      });
      return acc;
    }, []);

    // Add headers to table
    headers.forEach(function (header) {
      table += '<th>' + header + '</th>';
    });
    table += '</tr>';

    // Add rows for each element in the JSON array
    jsonArray.forEach(function (item) {
      table += '<tr>';
      headers.forEach(function (header) {
        table += '<td>';
        var attribute = item.attributes[header];
        if (attribute && (0, _typeof2["default"])(attribute) === 'object') {
          // Recursively process object attributes
          if (attribute.username) table += attribute.username ? attribute.username : '';

          //   table += '<table>';
          // processObjectAttribute(attribute, table);
          // table += '</table>';
        } else {
          // Directly add attribute value
          table += attribute ? attribute : '';
        }
        table += '</td>';
      });
      table += '</tr>';
    });

    // Close table
    table += '</table>';
    return table;
  }
  function processObjectAttribute(attribute, table) {
    if (attribute instanceof Array) {
      // Process array attribute
      attribute.forEach(function (subAttr) {
        table += '<tr><td>';
        processObjectAttribute(subAttr, table);
        table += '</td></tr>';
      });
    } else if ((0, _typeof2["default"])(attribute) === 'object' && attribute !== null) {
      // Process object attributes
      if (attribute.username) processObjectAttribute(attribute.username, table);
      // Object.keys(attribute).forEach((subKey) => {
      //   table += '<tr>';
      //   table += '<td>' + subKey + '</td><td>';
      //   processObjectAttribute(attribute[subKey], table);
      //   table += '</td>';
      //   table += '</tr>';
      // });
    } else {
      // Directly add attribute value
      table += attribute ? attribute : '';
    }
  }
  function createMarkup(tableString) {
    return {
      __html: tableString
    };
  }
  var dataTable = jsonToTable(props.data.history);
  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
    className: "is-isolated fas fa-comment",
    style: {
      display: !props.data.history ? 'none' : 'inline-block'
    },
    onMouseEnter: handleMouseEnter,
    onMouseLeave: handleMouseLeave
  }), ' ', isHovering && /*#__PURE__*/_react["default"].createElement("div", {
    className: "hover-text",
    style: {
      position: 'absolute',
      zIndex: '10',
      backgroundColor: 'white',
      border: '1px solid #ccc',
      boxShadow: '0px 8px 16px 0px rgba(0,0,0,0.2)',
      padding: '8px',
      boxSizing: 'border-box'
    },
    dangerouslySetInnerHTML: createMarkup(dataTable)
  }));
};
var _default = exports["default"] = HistoryComponent;