react-admin-kit/lib/SchemaForm/DescriptionsTable.js

A react based UI components for admin system

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _antd = require("antd");
var _descriptionsTable = require("./utils/descriptions-table");
var _jsxRuntime = require("react/jsx-runtime");
var useBreakpoint = _antd.Grid.useBreakpoint;
var DescriptionsTable = function DescriptionsTable(_ref) {
  var formContainerRef = _ref.formContainerRef,
    grid = _ref.grid,
    embed = _ref.embed,
    layout = _ref.layout,
    _ref$descriptionsProp = _ref.descriptionsProps,
    descriptionsProps = _ref$descriptionsProp === void 0 ? {} : _ref$descriptionsProp;
  var screens = useBreakpoint();
  var _useState = (0, _react.useState)([]),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    formItems = _useState2[0],
    setFormItems = _useState2[1];
  var scanAndUpdateFormItems = (0, _react.useCallback)(function () {
    if (!formContainerRef.current) {
      setFormItems([]);
      return;
    }
    var scannedItems = (0, _descriptionsTable.scanFormItems)(formContainerRef.current, grid, embed);
    setFormItems(scannedItems);
  }, [formContainerRef]);
  (0, _react.useEffect)(function () {
    // 初始扫描
    scanAndUpdateFormItems();

    // 设置 MutationObserver 监听 DOM 变化
    if (!formContainerRef.current) {
      return;
    }

    /* istanbul ignore next */
    var observer = new MutationObserver(function (mutations) {
      // 检查是否有相关的 DOM 变化
      var shouldUpdate = mutations.some(function (mutation) {
        // 监听元素增删、属性变化（特别是 class 变化会影响 span 值）
        return mutation.type === 'childList' || mutation.type === 'attributes' && mutation.attributeName === 'class';
      });
      if (shouldUpdate) {
        scanAndUpdateFormItems();
      }
    });

    // 开始监听
    observer.observe(formContainerRef.current, {
      childList: true,
      subtree: true,
      attributes: true,
      attributeFilter: ['class']
    });

    // 清理函数
    return function () {
      observer.disconnect();
    };
  }, [formContainerRef, scanAndUpdateFormItems]);
  var _useMemo = (0, _react.useMemo)(function () {
      // 获取当前有效的断点，按优先级排序
      var activeBreakpoints = Object.entries(screens).filter(function (_ref2) {
        var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
          _ = _ref3[0],
          isActive = _ref3[1];
        return isActive;
      }).map(function (_ref4) {
        var _ref5 = (0, _slicedToArray2.default)(_ref4, 1),
          breakpoint = _ref5[0];
        return breakpoint;
      }).sort(function (a, b) {
        var breakpointOrder = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
        return breakpointOrder.indexOf(a) - breakpointOrder.indexOf(b);
      });

      // 计算每个表单项在当前屏幕下的实际 span 值
      var resolvedSpans = formItems.map(function (item) {
        var span = item.span;

        // 如果是数字，直接使用
        if (typeof span === 'number') {
          return span;
        }

        // 如果是响应式对象，按断点优先级查找合适的值
        var responsiveSpan = span;

        // 按优先级查找第一个有效的断点值
        var _iterator = (0, _createForOfIteratorHelper2.default)(activeBreakpoints),
          _step;
        try {
          for (_iterator.s(); !(_step = _iterator.n()).done;) {
            var breakpoint = _step.value;
            if (responsiveSpan[breakpoint] !== undefined) {
              return responsiveSpan[breakpoint];
            }
          }

          // 如果没有找到响应式值，返回默认值 24
        } catch (err) {
          _iterator.e(err);
        } finally {
          _iterator.f();
        }
        return 24;
      });

      // 找到最小的 span 值
      var minSpan = resolvedSpans.length > 0 ? Math.min.apply(Math, (0, _toConsumableArray2.default)(resolvedSpans)) : 24;

      // 计算列数：24 / 最小 span，向上取整
      var calculatedColumn = minSpan > 0 ? Math.ceil(24 / minSpan) : 1;

      // 计算每个表单项在 Descriptions 中的 span 值
      var descriptionItems = formItems.map(function (item, index) {
        var currentSpan = resolvedSpans[index];
        var descriptionsSpan = Math.ceil(currentSpan / minSpan);
        return {
          label: item.label,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            dangerouslySetInnerHTML: {
              __html: item.content
            }
          }),
          span: Math.max(1, descriptionsSpan),
          isEmpty: item.isEmpty
        };
      });
      var handledEmptyItems = (0, _descriptionsTable.mergeEmptyItems)(descriptionItems, calculatedColumn);
      var normalizedSpanItems = (0, _descriptionsTable.normalizeSpan)(handledEmptyItems, calculatedColumn);
      return {
        descriptionItems: normalizedSpanItems,
        column: calculatedColumn
      };
    }, [formItems, screens]),
    descriptionItems = _useMemo.descriptionItems,
    column = _useMemo.column;
  if (descriptionItems.length === 0) {
    return null;
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Descriptions, (0, _objectSpread2.default)((0, _objectSpread2.default)({
    layout: layout
  }, descriptionsProps), {}, {
    column: column,
    items: descriptionItems
  }));
};
var _default = exports.default = DescriptionsTable;