ayongui/es/ayongui/components/table/index.mjs

import { j as s } from "../../../react/jsx-runtime.mjs";
import z, { useState as g, useEffect as k, useRef as le } from "react";
import h from "../conditional-render/conditional-render.mjs";
import A from "./components/empty/empty.mjs";
import ie from "./components/group-child-th/group-child-th.mjs";
import pe from "./components/unfold-button/unfold-button.mjs";
import ce from "./components/unfold-td/unfold-td.mjs";
import { useDragDrop as he } from "./draggable.mjs";
import E from "./index.module.less.mjs";
import F from "../checkbox/index.mjs";
import fe from "../radio/index.mjs";
import xe from "./components/gtoup-tbody/group-tbody.mjs";
import { groupHandle as ue } from "./group-handle.mjs";
function L({
  columns: m = [],
  children: y,
  data: l = [],
  className: M,
  draggable: j = !1,
  expandable: f,
  rowSelection: r,
  onDragAfter: P = () => {
  },
  cellActiveClassName: _ = () => {
  }
}) {
  const w = `${E.table} ${M}`;
  let C = [], x = 0;
  const { expandedRowRender: B } = f || {}, b = ue({ columns: m, children: y });
  if (!b.columns.length)
    return /* @__PURE__ */ s.jsx("table", { className: w, children: /* @__PURE__ */ s.jsx("tbody", { children: /* @__PURE__ */ s.jsx(A, { length: l.length }) }) });
  C = b.columns, x = b.colSpanSize;
  const [D, H] = g([]), [i, R] = g(
    []
  ), N = {};
  C.forEach((e) => {
    if (e.type !== "columnGroup") {
      const { sorter: t, dataIndex: n, defaultSortOrder: o } = e;
      t && typeof t == "function" && (N[n] = o ? o === "ascend" ? "descend" : "ascend" : "default", o === "ascend" && (l = [...l].sort(t)), o === "descend" && (l = [...l].sort((a, d) => t(d, a))));
    }
  });
  const {
    tableColumns: u,
    tableData: c,
    activeTR: U,
    activeTD: $,
    setTableData: G,
    handleDragStart: q,
    handleDragStartData: X,
    handleDragOver: I,
    handleDrop: J,
    handleDropData: Q
  } = he({
    _tableColumns: C,
    data: l,
    draggable: j,
    onDragAfter: P
  }), [p, S] = g(
    N
  ), V = (e) => {
    const { sorter: t, dataIndex: n, defaultSortOrder: o } = e;
    t && typeof t == "function" && (S((a) => {
      const d = { ...p };
      return d[n] = d[n] ? d[n] === "ascend" ? "descend" : "ascend" : o === "ascend" ? "descend" : "ascend", d;
    }), p[n] === "ascend" && G((a) => [...a].sort(t)), p[n] === "descend" && G((a) => [...a].sort((d, de) => t(de, d))));
  }, Y = (e, t) => t ? E.textAlignCenter : "", Z = (e) => e.type === "columnGroup" ? e.children.length : void 0, ee = (e) => e.type === "columnGroup" ? void 0 : x, te = (e, t) => {
    const n = _(e, t);
    return U === t ? E.aticve + n : n;
  }, se = (e) => {
    const t = [...D];
    if (t.includes(e)) {
      const n = t.indexOf(e);
      t.splice(n, 1);
    } else
      t.push(e);
    H(t);
  };
  k(() => {
    typeof (r == null ? void 0 : r.onChange) == "function" && r.onChange(i.map((e) => c[e]));
  }, [i]), k(() => {
    R([]);
  }, [r]);
  const O = le(null), [ne, re] = g([]);
  k(() => {
    const e = () => {
      const t = O.current;
      if (t) {
        const { width: n } = t.getBoundingClientRect(), o = t.querySelector("tr").children.length, a = n / o, d = Array.from({ length: o }, () => a);
        re(d);
      }
    };
    return e(), window.addEventListener("resize", e), () => {
      window.removeEventListener("resize", e);
    };
  }, []);
  const T = (e) => {
    R((t) => r.type === "radio" ? [e] : t.includes(e) ? t.filter((n) => n !== e) : [...t, e]);
  }, ae = (e) => {
    const t = [];
    e && c.map((n, o) => {
      const a = (r == null ? void 0 : r.getCheckboxProps(n)) || null;
      if (!(a != null && a.disabled))
        return t.push(o);
    }), R(t);
  }, v = (e) => {
    if (!e.fixed)
      return {};
    const n = f && f.expandedRowRender && e.fixed === "left";
    return {
      position: "sticky",
      [e.fixed]: n ? "46px" : 0,
      zIndex: "20",
      backgroundColor: "var(--ayong-grey-crescent)",
      boxShadow: e.fixed === "left" ? "2px 0 6px -2px rgba(0,0,0,0.1)" : "-2px 0 6px -2px rgba(0,0,0,0.1)"
    };
  }, oe = () => {
    const e = u[0];
    return e.fixed ? (console.log("column----", e), {
      width: " 39px",
      position: "sticky",
      [e.fixed]: 0,
      zIndex: "100px",
      backgroundColor: "var(--ayong-grey-crescent)",
      // 使用主题变量
      // 添加阴影效果
      boxShadow: e.fixed === "left" ? "2px 0 6px -2px rgba(0,0,0,0.1)" : "-2px 0 6px -2px rgba(0,0,0,0.1)"
    }) : {
      width: " 39px"
    };
  };
  return /* @__PURE__ */ s.jsx(
    "div",
    {
      className: "table-container",
      style: {
        overflowX: "auto",
        width: "100%",
        position: "relative"
      },
      children: /* @__PURE__ */ s.jsxs(
        "table",
        {
          ref: O,
          className: w,
          style: {
            tableLayout: "auto",
            width: "100%"
          },
          children: [
            /* @__PURE__ */ s.jsxs("thead", { children: [
              /* @__PURE__ */ s.jsxs("tr", { children: [
                /* @__PURE__ */ s.jsx(h, { mode: "if", show: B, children: /* @__PURE__ */ s.jsx("th", { style: oe(), rowSpan: x }) }),
                /* @__PURE__ */ s.jsx(h, { mode: "if", show: r, children: /* @__PURE__ */ s.jsx(
                  h,
                  {
                    mode: "else",
                    show: (r == null ? void 0 : r.type) === "radio",
                    renderIf: () => /* @__PURE__ */ s.jsx("th", { style: { width: " 39px" }, rowSpan: x }),
                    renderElse: () => /* @__PURE__ */ s.jsx("th", { style: { width: " 39px" }, rowSpan: x, children: /* @__PURE__ */ s.jsx(
                      F,
                      {
                        onChange: ae,
                        indeterminate: i.length && c.length > i.length,
                        checked: c.length == i.length
                      }
                    ) })
                  }
                ) }),
                u.map((e, t) => /* @__PURE__ */ s.jsx(z.Fragment, { children: /* @__PURE__ */ s.jsxs(
                  "th",
                  {
                    draggable: j,
                    colSpan: Z(e),
                    rowSpan: ee(e),
                    className: Y(e, e.type === "columnGroup"),
                    onDragStart: (n) => q(n, t),
                    onDragOver: I,
                    "data-fixed": e.fixed || null,
                    style: {
                      width: e.width || "auto",
                      ...v(e)
                    },
                    onDrop: (n) => J(n, t),
                    children: [
                      e.title,
                      e.sorter && /* @__PURE__ */ s.jsx(
                        "span",
                        {
                          onClick: () => V(e),
                          style: { marginLeft: "5px", cursor: "pointer" },
                          children: p[e.dataIndex] && p[e.dataIndex] === "default" ? "↕" : p[e.dataIndex] === "ascend" ? "↑" : p[e.dataIndex] === "descend" ? "↓" : ""
                        }
                      )
                    ]
                  }
                ) }, e.key))
              ] }),
              /* @__PURE__ */ s.jsx(ie, { tableColumns: u })
            ] }),
            /* @__PURE__ */ s.jsxs("tbody", { children: [
              /* @__PURE__ */ s.jsx(h, { mode: "if", show: c.length !== 0, children: c.map((e, t) => /* @__PURE__ */ s.jsxs(z.Fragment, { children: [
                /* @__PURE__ */ s.jsxs(
                  "tr",
                  {
                    draggable: j,
                    className: te(e, t),
                    onDragStart: (n) => X(n, t),
                    onDragOver: (n) => I(n),
                    onDrop: (n) => Q(n, t),
                    children: [
                      /* @__PURE__ */ s.jsx(h, { mode: "if", show: r, children: /* @__PURE__ */ s.jsx(
                        h,
                        {
                          mode: "else",
                          show: (r == null ? void 0 : r.type) === "radio",
                          renderIf: () => /* @__PURE__ */ s.jsx("td", { style: { width: " 39px" }, children: /* @__PURE__ */ s.jsx(
                            fe,
                            {
                              onChange: () => T(t),
                              ...r.getCheckboxProps(e),
                              checked: i.includes(t)
                            }
                          ) }),
                          renderElse: () => /* @__PURE__ */ s.jsx("td", { style: { width: " 39px" }, children: /* @__PURE__ */ s.jsx(
                            F,
                            {
                              onChange: () => T(t),
                              ...r.getCheckboxProps(e),
                              checked: i ? i.includes(t) : !1
                            }
                          ) })
                        }
                      ) }),
                      /* @__PURE__ */ s.jsx(
                        pe,
                        {
                          index: t,
                          expandable: f,
                          item: e,
                          toggleExpand: se,
                          ayonEexpandedRowKeys: D
                        }
                      ),
                      /* @__PURE__ */ s.jsx(
                        xe,
                        {
                          item: e,
                          columnWidths: ne,
                          tableColumns: u,
                          activeTD: $,
                          getFixedStyle: v
                        }
                      )
                    ]
                  }
                ),
                /* @__PURE__ */ s.jsx(
                  ce,
                  {
                    item: e,
                    index: t,
                    expandable: f,
                    ayonEexpandedRowKeys: D,
                    getFixedStyle: v
                  }
                )
              ] }, e.key)) }),
              /* @__PURE__ */ s.jsx(A, { length: l.length })
            ] })
          ]
        }
      )
    }
  );
}
const W = ({ title: m, dataIndex: y, render: l }) => null, K = ({ title: m, children: y }) => null;
K.displayName = "ColumnGroup";
W.displayName = "Column";
L.ColumnGroup = K;
L.Column = W;
export {
  L as default
};