@1771technologies/lytenyte-pro/dist/sort-manager.js

import { jsx } from "react/jsx-runtime";
import { useMemo, useState, useEffect, createContext, useContext, forwardRef } from "react";
import { c as useGrid, G as GridProvider } from "./useScrollLock-D4UY33Sb.js";
import { clsx } from "@1771technologies/js-utils";
import { S as Select } from "./select-IdBbnP3a.js";
import { P as PlusIcon } from "./plus-icon-ToqW5CC-.js";
import { C as CrossIcon } from "./cross-icon-CEMLAlFX.js";
import { S as Separator } from "./separator-BnPPeAk8.js";
function useSortableColumnItems({ state, api }) {
  const columns = state.columns.use();
  const candidateColumns = useMemo(() => {
    return columns.filter((c) => api.columnIsSortable(c));
  }, [api, columns]);
  const columnItems = useMemo(() => {
    return candidateColumns.map((c) => ({ label: c.headerName ?? c.id, value: c.id }));
  }, [candidateColumns]);
  return columnItems;
}
function sortModelToSortItems(c, grid) {
  return c.map((c2) => {
    const columnId = c2.columnId;
    const sortDirection = c2.isDescending ? "descending" : "ascending";
    let value = "values";
    if (c2.options?.isAbsolute) {
      value += "_absolute";
    }
    if (c2.options?.isAccented) {
      value += "_accented";
    }
    if (c2.options?.nullsAppearFirst) {
      value += "_nulls_first";
    }
    const column = grid.api.columnById(c2.columnId);
    return {
      columnId,
      sortDirection,
      label: column?.headerName ?? column?.id,
      sortOn: value
    };
  });
}
function useSortState(grid) {
  const [state, setState] = useState(() => {
    const initial = sortModelToSortItems(grid.state.sortModel.peek(), grid);
    if (initial.length) return initial;
    return [{ sortDirection: "ascending" }];
  });
  useEffect(() => {
    const dispose = grid.state.sortModel.watch(() => {
      const nextModel = sortModelToSortItems(grid.state.sortModel.peek(), grid);
      if (!nextModel.length) setState([{ sortDirection: "ascending" }]);
      else setState(nextModel);
    }, false);
    return () => dispose();
  }, [grid]);
  return [state, setState];
}
const SortManagerContext = createContext([]);
const useSortManagerContext = () => useContext(SortManagerContext);
const SortManagerContainer = forwardRef(function ColumnSortContainer({ className, children, ...props }, ref) {
  const grid = useGrid();
  const [state, setState] = useSortManagerContext();
  const columnItems = useSortableColumnItems(grid);
  const unselectedSortedColumns = useMemo(() => {
    const selected = new Set(state.map((c) => c.columnId).filter((c) => c != null));
    return columnItems.filter((c) => !selected.has(c.value));
  }, [columnItems, state]);
  const sortItems = useMemo(() => {
    return state.map((c, i) => {
      const columnItem = columnItems.find((s) => c.columnId === s.value) ?? null;
      const columnOptions = columnItem ? [columnItem, ...unselectedSortedColumns] : unselectedSortedColumns;
      const columnOnSelect = (column) => {
        setState((prev) => {
          const v = { ...prev[i] };
          v.columnId = column?.value;
          const next = [...prev];
          next.splice(i, 1, v);
          return next;
        });
      };
      const columnSelected = columnItem;
      const sortOptions = sortValuesValues;
      const sortSelected = sortValuesValues.find((v) => v.value === c.sortOn) ?? null;
      const sortOnSelect = (sortOn) => {
        if (!sortOn) return;
        setState((prev) => {
          const v = { ...prev[i] };
          v.sortOn = sortOn.value;
          const next = [...prev];
          next.splice(i, 1, v);
          return next;
        });
      };
      const sortDirectionOptions = sortDirectionValues;
      const sortDirectionSelected = c.sortDirection === "ascending" ? { label: "Asc", value: "ascending" } : { label: "Desc", value: "descending" };
      const sortDirectionOnSelect = (item) => {
        if (!item) return;
        setState((prev) => {
          const v = { ...prev[i] };
          v.sortDirection = item.value;
          const next = [...prev];
          next.splice(i, 1, v);
          return next;
        });
      };
      const onDelete = () => {
        setState((prev) => {
          const next = [...prev];
          next.splice(i, 1);
          if (!next.length) {
            return [{ sortDirection: "ascending" }];
          }
          return next;
        });
      };
      const onAdd = () => {
        setState((prev) => {
          const next = [...prev];
          next.splice(i + 1, 0, { sortDirection: "ascending" });
          return next;
        });
      };
      const maxSortCount = columnItems.length;
      return {
        index: i,
        columnItem,
        columnOptions,
        columnSelected,
        columnOnSelect,
        sortOptions,
        sortSelected,
        sortOnSelect,
        sortDirectionOptions,
        sortDirectionSelected,
        sortDirectionOnSelect,
        canAdd: maxSortCount > state.length,
        onAdd,
        onDelete
      };
    });
  }, [columnItems, setState, state, unselectedSortedColumns]);
  return /* @__PURE__ */ jsx("div", { ...props, className: clsx("lng1771-sort-manager__container", className), ref, children: children({ items: sortItems }) });
});
const sortValuesValues = [
  { label: "Values", value: "values" },
  { label: "Absolute", value: "values_absolute" },
  { label: "Accented", value: "values_accented" },
  { label: "Nulls First", value: "values_nulls_first" },
  { label: "Absolute Nulls First", value: "values_absolute_nulls_first" },
  { label: "Accented Nulls First", value: "values_accented_nulls_first" }
];
const sortDirectionValues = [
  { label: "Asc", value: "ascending" },
  { label: "Desc", value: "descending" }
];
const SortColumnSelect = ({
  item,
  placeholder = "Sort by",
  ...props
}) => {
  return /* @__PURE__ */ jsx(
    Select,
    {
      placeholder,
      selected: item.columnSelected,
      onSelect: item.columnOnSelect,
      options: item.columnOptions,
      ...props
    }
  );
};
const SortSelect = ({
  item,
  placeholder = "Select",
  ...props
}) => {
  return /* @__PURE__ */ jsx(
    Select,
    {
      selected: item.sortSelected,
      onSelect: item.sortOnSelect,
      options: item.sortOptions,
      placeholder,
      ...props
    }
  );
};
const SortDirectionSelection = ({
  item,
  placeholder,
  ...props
}) => {
  return /* @__PURE__ */ jsx(
    Select,
    {
      selected: item.sortDirectionSelected,
      onSelect: item.sortDirectionOnSelect,
      options: item.sortDirectionOptions,
      placeholder,
      ...props
    }
  );
};
function SortAdder({ item }) {
  return /* @__PURE__ */ jsx("button", { className: "lng1771-sort-manager__button", onClick: item.onAdd, disabled: !item.canAdd, children: /* @__PURE__ */ jsx(PlusIcon, { width: 15, height: 15 }) });
}
function SortRemover({ item }) {
  return /* @__PURE__ */ jsx("button", { className: "lng1771-sort-manager__button", onClick: item.onDelete, children: /* @__PURE__ */ jsx(CrossIcon, { width: 16, height: 16 }) });
}
function sortItemsToSortModel(sortItems) {
  return sortItems.filter((c) => {
    if (!c.columnId) return false;
    if (!c.sortOn) return false;
    return true;
  }).map((c) => {
    return {
      columnId: c.columnId,
      isDescending: c.sortDirection === "descending",
      options: {
        isAbsolute: c.sortOn.includes("absolute"),
        isAccented: c.sortOn.includes("accented"),
        nullsAppearFirst: c.sortOn.includes("nulls_first")
      }
    };
  });
}
const SortApplyButton = forwardRef(
  function SortApplyButton2({ className, onClick, children, ...props }, ref) {
    const grid = useGrid();
    const [state, setState] = useSortManagerContext();
    return /* @__PURE__ */ jsx(
      "button",
      {
        ...props,
        className: clsx("lng1771-sort-manager__button", className),
        onClick: (ev) => {
          const model = sortItemsToSortModel(state);
          grid.state.sortModel.set(model);
          setState(sortModelToSortItems(model, grid));
          onClick?.(ev);
        },
        ref,
        children: children ? children : "Apply"
      }
    );
  }
);
const SortCancelButton = forwardRef(
  function SortCancelButton2({ className, onClick, children, ...props }, ref) {
    const grid = useGrid();
    const [, setState] = useSortManagerContext();
    return /* @__PURE__ */ jsx(
      "button",
      {
        ...props,
        className: clsx("lng1771-sort-manager__button", className),
        ref,
        onClick: (ev) => {
          const model = grid.state.sortModel.peek();
          if (model.length) setState(sortModelToSortItems(model, grid));
          else setState([{ sortDirection: "ascending" }]);
          onClick?.(ev);
        },
        children: children ? children : "Cancel"
      }
    );
  }
);
const SortClearButton = forwardRef(
  function SortClearButton2({ className, onClick, children, ...props }, ref) {
    const grid = useGrid();
    const [, setState] = useSortManagerContext();
    return /* @__PURE__ */ jsx(
      "button",
      {
        ...props,
        className: clsx("lng1771-sort-manager__button", className),
        ref,
        onClick: (ev) => {
          setState([]);
          grid.state.sortModel.set([]);
          onClick?.(ev);
        },
        children: children ? children : "Clear"
      }
    );
  }
);
function SortManagerRoot({ grid, children }) {
  const state = useSortState(grid);
  return /* @__PURE__ */ jsx(GridProvider, { value: grid, children: /* @__PURE__ */ jsx(SortManagerContext.Provider, { value: state, children }) });
}
const SortManager = {
  Root: SortManagerRoot,
  Container: SortManagerContainer,
  SortColumnSelect,
  SortSelect,
  SortDirectionSelect: SortDirectionSelection,
  SortAdder,
  SortRemove: SortRemover,
  Separator,
  SortApply: SortApplyButton,
  SortCancel: SortCancelButton,
  SortClear: SortClearButton
};
export {
  SortManager
};