@m4l/components 9.1.143 → 9.1.144

package/hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js

@@ -0,0 +1,90 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useEnvironment } from "@m4l/core";
+import { T as ToggleIconButton } from "../../components/mui_extended/ToggleIconButton/ToggleIconButton.js";
+import { I as ICON_PATH_FILTER, a as ICON_PATH_SORT, A as ASSETS } from "./icons.js";
+import { useState, useMemo, useRef, useCallback } from "react";
+import { D as DynamicFilter } from "../../components/DynamicFilter/DynamicFilter.js";
+import { D as DynamicSort } from "../../components/DynamicSort/DynamicSort.js";
+import { S as StackLeftActionsStyled, a as StackRightActionsStyled, b as StackCustomHeaderStyled } from "./slots/DynamicFilterAndSortSlots.js";
+import { B as Badge } from "../../components/mui_extended/Badge/Badge.js";
+import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
+import { M as M4LDYNAMIC_KEY_FILTER_AND_SORT } from "./constants.js";
+import { D as DynamicFilterAndSortSlots } from "./slots/DynamicFilterAndSortEnum.js";
+import { I as IconButton } from "../../components/mui_extended/IconButton/IconButton.js";
+const useDynamicFilterAndSort = (props) => {
+  const { fields, sorts, onChangeFilterSort, dataTestId, initialAppliedFilters, initialAppliedSorts, withAllField, rightActions, initialFilterToggleed = true, initialSortToggleed = true } = props;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const [togglesLeftActions, setTogglesLeftActions] = useState({ filter: initialFilterToggleed, sort: initialSortToggleed });
+  const [invisibleBadge, setInvisibleBadge] = useState({
+    filter: initialAppliedFilters?.length === 0,
+    sort: initialAppliedSorts?.length === 0
+  });
+  const visibleCustomHeader = useMemo(() => togglesLeftActions.filter || togglesLeftActions.sort, [togglesLeftActions]);
+  const sortIconUrl = `${host_static_assets}/${environment_assets}/${ASSETS.refresh}`;
+  const eventRefs = useRef({
+    eventFilters: { filters: initialAppliedFilters, rawFilters: [] },
+    eventSorts: { sorts: initialAppliedSorts, rawSorts: [] }
+  });
+  const handleToggles = (key) => {
+    setTogglesLeftActions((prev) => ({ ...prev, [key]: !prev[key] }));
+  };
+  const handleChangeFilters = useCallback(
+    (filters, rawFilters) => {
+      setInvisibleBadge((prev) => ({ ...prev, filter: filters.length === 0 }));
+      eventRefs.current = {
+        ...eventRefs.current,
+        eventFilters: { filters, rawFilters }
+      };
+      onChangeFilterSort(eventRefs.current);
+    },
+    [onChangeFilterSort]
+  );
+  const handleChangeSorts = useCallback((Sorts, rawSorts) => {
+    setInvisibleBadge((prev) => ({ ...prev, sort: Sorts.length === 0 }));
+    eventRefs.current = {
+      ...eventRefs.current,
+      eventSorts: { sorts: Sorts, rawSorts }
+    };
+    onChangeFilterSort(eventRefs.current);
+  }, [onChangeFilterSort]);
+  const onRefresh = useCallback(() => {
+    onChangeFilterSort(eventRefs.current);
+  }, [onChangeFilterSort]);
+  const leftActions = useMemo(() => /* @__PURE__ */ jsxs(StackLeftActionsStyled, { direction: "row", ownerState: {}, ...getPropDataTestId(M4LDYNAMIC_KEY_FILTER_AND_SORT, DynamicFilterAndSortSlots.stackLeftActions, dataTestId), children: [
+    /* @__PURE__ */ jsx(Badge, { badgeContent: "", size: "small", color: "primary", invisible: invisibleBadge.filter, children: /* @__PURE__ */ jsx(ToggleIconButton, { icon: `${host_static_assets}/${environment_assets}/${ICON_PATH_FILTER}`, isToggled: togglesLeftActions.filter, onToggle: () => handleToggles("filter") }) }),
+    /* @__PURE__ */ jsx(Badge, { badgeContent: "", size: "small", color: "primary", invisible: invisibleBadge.sort, children: /* @__PURE__ */ jsx(ToggleIconButton, { icon: `${host_static_assets}/${environment_assets}/${ICON_PATH_SORT}`, isToggled: togglesLeftActions.sort, onToggle: () => handleToggles("sort") }) })
+  ] }), [togglesLeftActions, invisibleBadge, host_static_assets, environment_assets]);
+  const finalRightActions = useMemo(() => /* @__PURE__ */ jsxs(
+    StackRightActionsStyled,
+    {
+      direction: "row",
+      ownerState: {},
+      ...getPropDataTestId(M4LDYNAMIC_KEY_FILTER_AND_SORT, DynamicFilterAndSortSlots.stackRightActions, dataTestId),
+      children: [
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            icon: sortIconUrl,
+            "aria-label": "refresh",
+            onClick: onRefresh
+          }
+        ),
+        rightActions
+      ]
+    }
+  ), [dataTestId, rightActions, sortIconUrl, onRefresh]);
+  const dynamicsFiltersSorts = useMemo(() => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(DynamicFilter, { fields, initialAppliedFilters, onChangeFilters: handleChangeFilters, withAllField }),
+    sorts ? /* @__PURE__ */ jsx(DynamicSort, { fields: sorts, initialAppliedSorts, onChangeSorts: handleChangeSorts }) : null
+  ] }), [fields, sorts, initialAppliedFilters, initialAppliedSorts, handleChangeFilters, handleChangeSorts, withAllField]);
+  const customHeaderComponent = useMemo(() => /* @__PURE__ */ jsx(StackCustomHeaderStyled, { direction: "row", ownerState: { showDynamicFilter: togglesLeftActions.filter, showDynamicSort: togglesLeftActions.sort }, ...getPropDataTestId(M4LDYNAMIC_KEY_FILTER_AND_SORT, DynamicFilterAndSortSlots.stackCustomHeader, dataTestId), children: dynamicsFiltersSorts }), [togglesLeftActions]);
+  return {
+    leftActions,
+    rightActions: finalRightActions,
+    visibleCustomHeader,
+    customHeaderComponent
+  };
+};
+export {
+  useDynamicFilterAndSort as u
+};