synapse-react-client/dist/components/DataGrid/DataGrid.js

[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie

import { jsx as A } from "react/jsx-runtime";
import { modelColsToGrid as Y } from "./utils/modelColsToGrid.js";
import B from "classnames";
import { useState as h, useEffect as H, useCallback as s, useMemo as f, useRef as D } from "react";
import { DynamicDataSheetGrid as q } from "@sage-bionetworks/react-datasheet-grid";
import "@sage-bionetworks/react-datasheet-grid/dist/style.css";
import '../../style/components/_data-grid-extra.css';/* empty css                                           */
import { renderViewContextMenu as F, renderRecordSetContextMenu as J, renderAddRowsComponent as L } from "./components/contextMenu.js";
import { GRID_ROW_REACT_KEY_PROPERTY as Q } from "./utils/DataGridUtils.js";
import { getCellClassName as X } from "./utils/getCellClassName.js";
import { useColumnResizeHandles as Z } from "./hooks/useColumnResizeHandles.js";
import { calculateDefaultColumnWidth as $ } from "./utils/calculateColumnWidth.js";
function me(E) {
  const {
    gridRef: a,
    rowValues: C,
    columnNames: r,
    columnOrder: o,
    schemaPropertiesInfo: c,
    entityIsView: i,
    jsonSchema: d,
    lastSelection: R,
    handleChange: N,
    handleSelectionChange: W,
    onSelectedRowChange: p
  } = E, [S, g] = h({}), [v, x] = h(!1);
  H(() => {
    !r || !o || g((e) => {
      const n = o.map((l) => r[l]);
      if (!n.some((l) => !e[l]))
        return e;
      const w = { ...e };
      return n.forEach((l, K) => {
        if (!w[l]) {
          const k = c[l], U = {
            showPinIcon: K === 0,
            hasDescription: !!k?.description
          };
          w[l] = $(
            l,
            k,
            U
          );
        }
      }), w;
    });
  }, [r, o, c]);
  const _ = s(
    (e) => {
      typeof e != "number" || e < 0 || !o || e >= o.length || e === 0 && x((n) => !n);
    },
    [o]
  ), P = f(() => v ? /* @__PURE__ */ new Set([0]) : /* @__PURE__ */ new Set(), [v]), u = f(
    () => Y(
      r,
      o,
      c,
      S,
      P,
      _
    ),
    [
      r,
      o,
      c,
      S,
      P,
      _
    ]
  ), [m, b] = h(null), z = f(
    () => i ? F : J,
    [i]
  ), G = f(
    () => i ? !1 : L,
    [i]
  ), M = s(
    ({ rowData: e, rowIndex: n }) => B({
      "row-valid": !!d && e.__validationStatus === "valid",
      "row-invalid": !!d && e.__validationStatus === "invalid",
      "row-unknown": !!d && e.__validationStatus === "pending",
      "row-selected": m === n
    }),
    [d, m]
  ), O = s(
    ({
      rowData: e,
      rowIndex: n,
      columnId: t
    }) => X({
      rowData: e,
      rowIndex: n,
      columnId: t || "",
      selectedRowIndex: m,
      lastSelection: R,
      colValues: u
    }),
    [m, R, u]
  ), T = s(
    ({ rowData: e }) => ({
      ...e
    }),
    []
  ), V = s(
    ({ cell: e }) => {
      e ? (b(e.row), p?.(e.row, C[e.row])) : (b(null), p?.(null, null));
    },
    [p, C]
  ), y = D(null), I = D(
    null
  ), j = s(
    (e, n) => {
      if (a.current) {
        const t = a.current.activeCell;
        t ? I.current = {
          col: t.col,
          row: t.row
        } : I.current = null;
      }
      g((t) => ({
        ...t,
        [e]: n
      }));
    },
    [a]
  );
  return Z({
    wrapperRef: y,
    colValues: u,
    onColumnResize: j
  }), /* @__PURE__ */ A("div", { ref: y, style: { position: "relative", width: "100%" }, children: /* @__PURE__ */ A(
    q,
    {
      ref: a,
      value: C,
      columns: u,
      autoAddRow: !i,
      disableSmartDelete: !0,
      addRowsComponent: G,
      contextMenuComponent: z,
      rowKey: Q,
      rowClassName: M,
      cellClassName: O,
      duplicateRow: T,
      onChange: N,
      onActiveCellChange: V,
      onSelectionChange: W
    }
  ) });
}
export {
  me as default
};
//# sourceMappingURL=DataGrid.js.map