@rsdoctor/components 0.0.0-next-20240620044732

package/dist/components/BundleDiff/DiffContainer/packages.js

@@ -0,0 +1,330 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Badge as Bdg, SizePercent } from "@rsdoctor/components/elements";
+import { formatSize } from "@rsdoctor/components/utils";
+import {
+  Col,
+  Divider,
+  Empty,
+  Row,
+  Select,
+  Space,
+  Table,
+  Tooltip,
+  Typography
+} from "antd";
+import { sumBy, uniq, values } from "lodash-es";
+import { useMemo, useState } from "react";
+import { UpdateType } from "./constants";
+import { FileUpdateTypeTag } from "./modules";
+import { Size } from "../../../constants";
+const getChangedType = (data) => {
+  if (data.baseline && data.current) {
+    const bvs = data.baseline.map((e) => e.version).sort().join();
+    const dcs = data.current.map((e) => e.version).sort().join();
+    return bvs === dcs ? UpdateType.NotChanged : UpdateType.Changed;
+  }
+  if (!data.baseline && !data.current) {
+    return UpdateType.NotChanged;
+  }
+  if (data.baseline && !data.current) {
+    return UpdateType.Deleted;
+  }
+  return UpdateType.New;
+};
+const isChanged = (data) => {
+  return getChangedType(data) !== UpdateType.NotChanged;
+};
+const PackagesStatistic = ({ dataSource }) => {
+  const { newCount, deleteCount, changedCount } = useMemo(() => {
+    return {
+      newCount: dataSource.filter((e) => e.updateType === UpdateType.New).length,
+      deleteCount: dataSource.filter((e) => e.updateType === UpdateType.Deleted).length,
+      changedCount: dataSource.filter(
+        (e) => e.updateType === UpdateType.Changed
+      ).length
+    };
+  }, [dataSource]);
+  return /* @__PURE__ */ jsxs(Space, { children: [
+    /* @__PURE__ */ jsx(
+      Bdg,
+      {
+        label: "New",
+        value: newCount,
+        type: newCount > 0 ? "error" : "default",
+        tooltip: `Current has ${newCount} packages which not found in Baseline`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Bdg,
+      {
+        label: "Deleted",
+        value: deleteCount,
+        type: deleteCount > 0 ? "error" : "default",
+        tooltip: `Current delete ${deleteCount} packages than Baseline`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Bdg,
+      {
+        label: "Changed",
+        value: changedCount,
+        type: changedCount > 0 ? "error" : "default",
+        tooltip: `Current has ${changedCount} changed packages than Baseline`
+      }
+    )
+  ] });
+};
+const getPackagesTableDataSource = ({
+  baseline,
+  current
+}) => {
+  const { packages: bPkgs = [] } = baseline || {};
+  const { packages: cPkgs = [] } = current || {};
+  const res = {};
+  const setter = (pkg, type) => {
+    if (!res[pkg.name]) {
+      res[pkg.name] = { name: pkg.name, updateType: UpdateType.NotChanged };
+    }
+    if (!res[pkg.name][type]) {
+      res[pkg.name][type] = [];
+    }
+    res[pkg.name][type].push(pkg);
+  };
+  bPkgs.forEach((e) => setter(e, "baseline"));
+  cPkgs.forEach((e) => setter(e, "current"));
+  const pre = [];
+  const post = [];
+  values(res).forEach((a) => {
+    if (isChanged(a)) {
+      pre.push(a);
+    } else {
+      post.push(a);
+    }
+  });
+  return pre.concat(post).map((e) => {
+    return {
+      ...e,
+      updateType: getChangedType(e)
+    };
+  });
+};
+const Packages = ({ baseline, current }) => {
+  const { packages: bPkgs = [] } = baseline || {};
+  const { packages: cPkgs = [] } = current || {};
+  if (!bPkgs.length && !cPkgs.length) {
+    return /* @__PURE__ */ jsx(Empty, {});
+  }
+  const pkgNames = useMemo(() => {
+    return uniq(bPkgs.concat(cPkgs).map((e) => e.name));
+  }, [bPkgs, cPkgs]);
+  const [selectedPkgNames, setSelectedPkgNames] = useState([]);
+  const [selectedUpdateTypes, setSelectedUpdateTypes] = useState(
+    []
+  );
+  const dataSource = useMemo(() => {
+    return getPackagesTableDataSource({ baseline, current });
+  }, [baseline, current]);
+  const filteredDataSource = useMemo(() => {
+    return dataSource.filter((e) => {
+      if (selectedUpdateTypes.length) {
+        return selectedUpdateTypes.indexOf(e.updateType) > -1;
+      }
+      if (selectedPkgNames.length) {
+        return selectedPkgNames.indexOf(e.name) > -1;
+      }
+      return true;
+    });
+  }, [dataSource, selectedPkgNames, selectedUpdateTypes]);
+  return /* @__PURE__ */ jsxs(Row, { gutter: [Size.BasePadding, Size.BasePadding], children: [
+    /* @__PURE__ */ jsx(Col, { span: 24, style: { marginTop: 16 }, children: /* @__PURE__ */ jsxs(Space, { wrap: true, children: [
+      /* @__PURE__ */ jsx(
+        Select,
+        {
+          mode: "multiple",
+          placeholder: "Filter by package names",
+          style: { width: 400 },
+          options: pkgNames.map((e) => {
+            const r = dataSource.find((el) => el.name === e);
+            if (r && isChanged(r)) {
+              return {
+                label: /* @__PURE__ */ jsxs(Space, { children: [
+                  /* @__PURE__ */ jsx(Typography.Text, { children: e }),
+                  /* @__PURE__ */ jsx(FileUpdateTypeTag, { type: getChangedType(r) })
+                ] }),
+                value: e
+              };
+            }
+            return {
+              label: e,
+              value: e
+            };
+          }),
+          allowClear: true,
+          onChange: (e) => {
+            setSelectedPkgNames(e);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Select,
+        {
+          mode: "multiple",
+          placeholder: "Filter by changed type",
+          style: { width: 200 },
+          options: values(UpdateType).map((e) => ({ label: e, value: e })),
+          allowClear: true,
+          onChange: (e) => {
+            setSelectedUpdateTypes(e);
+          }
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx(Col, { span: 24, children: /* @__PURE__ */ jsx(
+      Table,
+      {
+        bordered: true,
+        sticky: { offsetHeader: 54 },
+        pagination: {
+          pageSize: 20,
+          size: "small"
+        },
+        dataSource: filteredDataSource,
+        rowKey: (e) => e.name,
+        columns: [
+          {
+            title: () => /* @__PURE__ */ jsxs(Space, { children: [
+              /* @__PURE__ */ jsx(Typography.Text, { children: "Package Name" }),
+              /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+              /* @__PURE__ */ jsx(
+                Tooltip,
+                {
+                  title: `Filtered Package Count is ${filteredDataSource.length}, Total Package Count is ${dataSource.length}`,
+                  children: /* @__PURE__ */ jsxs(
+                    Typography.Text,
+                    {
+                      type: "secondary",
+                      style: { fontSize: 10, fontWeight: 400 },
+                      children: [
+                        filteredDataSource.length,
+                        " / ",
+                        dataSource.length
+                      ]
+                    }
+                  )
+                }
+              )
+            ] }),
+            render: (_v, r) => {
+              if (r.updateType !== UpdateType.NotChanged) {
+                return /* @__PURE__ */ jsxs(Space, { children: [
+                  /* @__PURE__ */ jsx(Typography.Text, { children: r.name }),
+                  /* @__PURE__ */ jsx(FileUpdateTypeTag, { type: r.updateType })
+                ] });
+              }
+              return r.name;
+            }
+          },
+          {
+            title: () => {
+              return /* @__PURE__ */ jsxs(Space, { children: [
+                /* @__PURE__ */ jsx(Typography.Text, { children: "Current" }),
+                /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+                /* @__PURE__ */ jsx(PackagesStatistic, { dataSource })
+              ] });
+            },
+            children: [
+              {
+                title: "Version",
+                render: (_v, r) => {
+                  if (r.current) {
+                    return /* @__PURE__ */ jsx(Space, { direction: "vertical", children: r.current.map((e) => /* @__PURE__ */ jsx(
+                      Bdg,
+                      {
+                        label: "version",
+                        value: e.version,
+                        tooltip: e.root,
+                        type: r.updateType === UpdateType.Deleted ? "error" : r.updateType === UpdateType.Changed ? "warn" : "default"
+                      },
+                      e.version
+                    )) });
+                  }
+                  return null;
+                }
+              },
+              {
+                title: "Parsed Size",
+                render: (_v, r) => {
+                  const parsedSize = sumBy(
+                    r.current,
+                    (e) => e.size.parsedSize
+                  );
+                  const DiffComponent = () => /* @__PURE__ */ jsx(
+                    SizePercent,
+                    {
+                      baseline: sumBy(r.baseline, (e) => e.size.parsedSize),
+                      current: parsedSize
+                    }
+                  );
+                  if (r.current) {
+                    return /* @__PURE__ */ jsxs(Space, { children: [
+                      /* @__PURE__ */ jsx(
+                        Typography.Text,
+                        {
+                          strong: r.updateType !== UpdateType.NotChanged,
+                          children: formatSize(parsedSize)
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(DiffComponent, {})
+                    ] });
+                  }
+                  return /* @__PURE__ */ jsx(DiffComponent, {});
+                }
+              }
+            ]
+          },
+          {
+            title: "Baseline",
+            children: [
+              {
+                title: "Version",
+                render: (_v, r) => {
+                  if (r.baseline) {
+                    return /* @__PURE__ */ jsx(Space, { direction: "vertical", children: r.baseline.map((e) => /* @__PURE__ */ jsx(
+                      Bdg,
+                      {
+                        label: "version",
+                        value: e.version,
+                        tooltip: e.root,
+                        type: r.updateType === UpdateType.Deleted ? "error" : r.updateType === UpdateType.Changed ? "warn" : "default"
+                      },
+                      e.version
+                    )) });
+                  }
+                  return null;
+                }
+              },
+              {
+                title: "Parsed Size",
+                render: (_v, r) => {
+                  if (r.baseline) {
+                    const parsedSize = sumBy(
+                      r.baseline,
+                      (e) => e.size.parsedSize
+                    );
+                    return /* @__PURE__ */ jsx(Typography.Text, { children: formatSize(parsedSize) });
+                  }
+                  return null;
+                }
+              }
+            ]
+          }
+        ]
+      }
+    ) })
+  ] });
+};
+export {
+  Packages,
+  PackagesStatistic,
+  getPackagesTableDataSource
+};

package/dist/components/BundleDiff/DiffContainer/row.d.ts

@@ -0,0 +1,9 @@
+import { ColumnGroupType, ColumnType } from 'antd/es/table/interface';
+import React from 'react';
+import { BundleDiffComponentCardProps, BundleDiffTableAssetsData, BundleDiffTableModulesData } from './types';
+export declare const ModuleHashPattern: RegExp;
+export declare const getSizeColumnPropsForModuleRow: (key: 'baseline' | 'current', sizeKey: 'parsedSize' | 'sourceSize') => ColumnType<BundleDiffTableModulesData>;
+export declare const getTargetColumnPropsForModuleRow: (key: 'baseline' | 'current', bMoudlesCount: number, cMoudlesCount: number) => ColumnGroupType<BundleDiffTableModulesData>;
+export declare const ModuleRowForAsset: React.FC<{
+    data: BundleDiffTableAssetsData;
+} & Pick<BundleDiffComponentCardProps, 'baseline' | 'current'>>;

package/dist/components/BundleDiff/DiffContainer/row.js

@@ -0,0 +1,369 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { InfoCircleOutlined, SearchOutlined } from "@ant-design/icons";
+import {
+  beautifyModulePath,
+  formatPercent,
+  formatSize
+} from "@rsdoctor/components/utils";
+import { Client } from "@rsdoctor/types";
+import { Graph } from "@rsdoctor/utils/common";
+import {
+  Button,
+  Divider,
+  Input,
+  Space,
+  Table,
+  Tag,
+  Tooltip,
+  Typography
+} from "antd";
+import { upperFirst } from "lodash-es";
+import { useMemo, useRef, useState } from "react";
+import { ViewChanges } from "./changes";
+import { UpdateType } from "./constants";
+import { FileUpdateTypeTag, getUpdateType } from "./modules";
+import { formatDiffSize } from "./utils";
+import { Color } from "../../../constants";
+const ModuleHashPattern = /[a-fA-F0-9]{20,}/;
+const getSizeColumnPropsForModuleRow = (key, sizeKey) => {
+  return {
+    width: 200,
+    sorter: (a, b) => (a[key]?.size[sizeKey] || 0) - (b[key]?.size[sizeKey] || 0),
+    render: (_v, r) => {
+      if (!r[key])
+        return "-";
+      const size = r[key].size[sizeKey];
+      return /* @__PURE__ */ jsxs(Space, { children: [
+        /* @__PURE__ */ jsx(Typography.Text, { children: formatSize(size) }),
+        key === "current" ? formatDiffSize(
+          r.baseline?.size[sizeKey] || 0,
+          size,
+          (r.baseline?.size[sizeKey] || 0) > size ? Client.RsdoctorClientDiffState.Down : Client.RsdoctorClientDiffState.Up
+        ) : null
+      ] });
+    }
+  };
+};
+const getTargetColumnPropsForModuleRow = (key, bMoudlesCount, cMoudlesCount) => {
+  const isB = key === "baseline";
+  return {
+    title: () => {
+      const count = isB ? bMoudlesCount : cMoudlesCount;
+      const title = upperFirst(key);
+      const diff = Graph.diffSize(bMoudlesCount, cMoudlesCount);
+      return /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Typography.Text, { children: title }),
+        /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            title: /* @__PURE__ */ jsxs(Space, { direction: "vertical", children: [
+              /* @__PURE__ */ jsxs(Typography.Text, { style: { color: "inherit" }, children: [
+                title,
+                " modules is ",
+                count
+              ] }),
+              isB ? null : /* @__PURE__ */ jsxs(Typography.Text, { style: { color: "inherit" }, children: [
+                "Percent is ",
+                formatPercent(diff.percent)
+              ] })
+            ] }),
+            children: /* @__PURE__ */ jsxs(Space, { children: [
+              /* @__PURE__ */ jsx(
+                Typography.Text,
+                {
+                  type: "secondary",
+                  style: { fontSize: 10, fontWeight: 400 },
+                  children: count
+                }
+              ),
+              /* @__PURE__ */ jsx(InfoCircleOutlined, {})
+            ] })
+          }
+        )
+      ] });
+    },
+    children: [
+      {
+        title: "Source Size",
+        ...getSizeColumnPropsForModuleRow(key, "sourceSize")
+      },
+      {
+        title: "Parsed Size",
+        defaultSortOrder: isB ? void 0 : "descend",
+        ...getSizeColumnPropsForModuleRow(key, "parsedSize")
+      }
+    ],
+    filterSearch: true,
+    filters: [
+      {
+        text: "Show Changed",
+        value: UpdateType.NotChanged
+      },
+      {
+        text: "Show All",
+        value: "All"
+      }
+    ],
+    onFilter(v, r) {
+      return v === UpdateType.NotChanged ? getUpdateType(r) !== v : true;
+    }
+  };
+};
+const ModuleRowForAsset = ({ data, baseline, current }) => {
+  const { modules: bTotalModules } = baseline.moduleGraph;
+  const { modules: cTotalModules } = current.moduleGraph;
+  const { chunks: bToTalChunks } = baseline.chunkGraph;
+  const { chunks: cToTalChunks } = current.chunkGraph;
+  const bRoot = baseline.root;
+  const cRoot = current.root;
+  const [searchText, setSearchText] = useState("");
+  const searchInput = useRef(null);
+  const handleSearch = (selectedKeys, confirm) => {
+    confirm();
+    setSearchText(selectedKeys[0]);
+  };
+  const handleReset = (clearFilters) => {
+    clearFilters();
+    setSearchText("");
+  };
+  const isBaseline = "__is_baseline__";
+  const bModules = useMemo(
+    () => data.baseline ? Graph.getModulesByAsset(data.baseline, bToTalChunks, bTotalModules).map((e) => ({
+      ...e,
+      [isBaseline]: true
+    })).filter((cModule) => !cModule.concatenationModules?.length) : [],
+    [data, baseline]
+  );
+  const cModules = useMemo(
+    () => data.current ? Graph.getModulesByAsset(data.current, cToTalChunks, cTotalModules).map((e) => ({
+      ...e,
+      [isBaseline]: false
+    })).filter((cModule) => !cModule.concatenationModules?.length) : [],
+    [data, current]
+  );
+  const getPathInfo = (r) => beautifyModulePath(r.path, r[isBaseline] ? bRoot : cRoot);
+  const dataSource = useMemo(() => {
+    const mods = [...bModules, ...cModules];
+    const map = /* @__PURE__ */ new Map();
+    mods.forEach((mod) => {
+      const modPath = mod.webpackId?.replace(ModuleHashPattern, "") || mod.path?.replace(ModuleHashPattern, "");
+      let t = map.get(modPath);
+      if (!t) {
+        t = { path: modPath };
+      }
+      if (mod[isBaseline]) {
+        t.baseline = mod;
+      } else {
+        t.current = mod;
+      }
+      map.set(modPath, t);
+    });
+    return [...map.values()];
+  }, [bModules, cModules, searchText]);
+  const { bMoudlesCount, cMoudlesCount, totalCount } = useMemo(() => {
+    const fileNameFilter = (e) => getPathInfo(e).alias.indexOf(searchText) > -1;
+    let b = dataSource.filter((e) => e.baseline);
+    let c = dataSource.filter((e) => e.current);
+    let totalCount2 = dataSource.length;
+    if (searchText) {
+      b = b.filter(fileNameFilter);
+      c = c.filter(fileNameFilter);
+      totalCount2 = dataSource.filter(fileNameFilter).length;
+    }
+    return {
+      bMoudlesCount: b.length,
+      cMoudlesCount: c.length,
+      totalCount: totalCount2
+    };
+  }, [dataSource, searchText]);
+  return /* @__PURE__ */ jsx(
+    Table,
+    {
+      dataSource,
+      rowKey: (e) => e.path,
+      size: "small",
+      pagination: {
+        size: "small"
+      },
+      bordered: true,
+      scroll: { x: 1500 },
+      columns: [
+        {
+          fixed: "left",
+          title: () => {
+            return /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs(Typography.Text, { children: [
+                "Modules of ",
+                `"${data.alias}"`
+              ] }),
+              /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+              /* @__PURE__ */ jsxs(
+                Tooltip,
+                {
+                  title: /* @__PURE__ */ jsxs(Space, { direction: "vertical", children: [
+                    /* @__PURE__ */ jsxs(Typography.Text, { style: { color: "inherit" }, children: [
+                      "filtered modules: ",
+                      totalCount
+                    ] }),
+                    /* @__PURE__ */ jsxs(Typography.Text, { style: { color: "inherit" }, children: [
+                      "total modules: ",
+                      dataSource.length
+                    ] })
+                  ] }),
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      Typography.Text,
+                      {
+                        type: "secondary",
+                        style: { fontSize: 10, fontWeight: 400, marginRight: 4 },
+                        children: [
+                          totalCount,
+                          "/",
+                          dataSource.length
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(InfoCircleOutlined, {})
+                  ]
+                }
+              )
+            ] });
+          },
+          filterDropdown({
+            setSelectedKeys,
+            selectedKeys,
+            confirm,
+            clearFilters
+          }) {
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: { padding: 8 },
+                onKeyDown: (e) => e.stopPropagation(),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      ref: searchInput,
+                      placeholder: `Search by file name`,
+                      value: selectedKeys[0],
+                      onChange: (e) => setSelectedKeys(e.target.value ? [e.target.value] : []),
+                      onPressEnter: () => handleSearch(selectedKeys, confirm),
+                      style: { marginBottom: 8, display: "block" }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(Space, { children: [
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        type: "primary",
+                        onClick: () => handleSearch(selectedKeys, confirm),
+                        icon: /* @__PURE__ */ jsx(SearchOutlined, {}),
+                        size: "small",
+                        style: { width: 90 },
+                        children: "Search"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        onClick: () => {
+                          clearFilters && handleReset(clearFilters);
+                          setSelectedKeys([]);
+                          handleSearch([], confirm);
+                        },
+                        size: "small",
+                        style: { width: 90 },
+                        children: "Reset"
+                      }
+                    )
+                  ] })
+                ]
+              }
+            );
+          },
+          filterSearch: true,
+          filterIcon: (filtered) => /* @__PURE__ */ jsxs(Space, { children: [
+            /* @__PURE__ */ jsx(
+              Typography.Text,
+              {
+                type: searchText ? void 0 : "secondary",
+                style: { fontWeight: 400 },
+                children: searchText || "Search by file name"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              SearchOutlined,
+              {
+                style: { color: filtered ? Color.Blue : void 0 }
+              }
+            )
+          ] }),
+          onFilterDropdownOpenChange: (visible) => {
+            if (visible) {
+              setTimeout(() => searchInput.current?.focus(), 100);
+            }
+          },
+          onFilter(v, r) {
+            return getPathInfo(r).alias.indexOf(v) > -1;
+          },
+          render: (_v, r) => {
+            const { alias, inNodeModules } = getPathInfo(r);
+            return /* @__PURE__ */ jsxs(Space, { children: [
+              /* @__PURE__ */ jsx(Tooltip, { title: r.path, children: /* @__PURE__ */ jsx(Typography.Text, { copyable: { text: r.path }, children: alias }) }),
+              inNodeModules ? /* @__PURE__ */ jsx(Tag, { color: "warning", children: "node_modules" }) : null,
+              /* @__PURE__ */ jsx(FileUpdateTypeTag, { type: getUpdateType(r) })
+            ] });
+          }
+        },
+        getTargetColumnPropsForModuleRow(
+          "current",
+          bMoudlesCount,
+          cMoudlesCount
+        ),
+        getTargetColumnPropsForModuleRow(
+          "baseline",
+          bMoudlesCount,
+          cMoudlesCount
+        ),
+        {
+          title: "Actions",
+          width: 200,
+          render: (_v, r) => {
+            return /* @__PURE__ */ jsx(Space, { direction: "vertical", style: { maxWidth: 170 }, children: /* @__PURE__ */ jsx(
+              ViewChanges,
+              {
+                text: "View Changes",
+                file: r.path,
+                data: [
+                  {
+                    baseline: baseline.moduleCodeMap[r.baseline?.id]?.source,
+                    current: current.moduleCodeMap[r.current?.id]?.source,
+                    group: "Source"
+                  },
+                  {
+                    baseline: baseline.moduleCodeMap[r.baseline?.id]?.transformed,
+                    current: current.moduleCodeMap[r.current?.id]?.transformed,
+                    group: "Transformed Source"
+                  },
+                  {
+                    baseline: baseline.moduleCodeMap[r.baseline?.id]?.parsedSource,
+                    current: current.moduleCodeMap[r.current?.id]?.parsedSource,
+                    group: "Parsed Source"
+                  }
+                ]
+              }
+            ) });
+          }
+        }
+      ]
+    }
+  );
+};
+export {
+  ModuleHashPattern,
+  ModuleRowForAsset,
+  getSizeColumnPropsForModuleRow,
+  getTargetColumnPropsForModuleRow
+};