sevago-library 1.3.19 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # sevago-library
 
+## 1.4.0
+
+### Minor Changes
+
+- feat: FilterSlider
+
 ## 1.3.19
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -68785,7 +68785,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
 const TextFieldDateTimeElement = ({
   name,
   label = "",
-  iconLabel = "edit_calendar",
+  iconLabel = "",
   icon = "calendar_today",
   error = "",
   value = null,
@@ -75949,6 +75949,99 @@ const AdvancedOperatorFilterDialog = ({
     }
   );
 };
+const FilterSlider = ({
+  children,
+  onApply,
+  onReset,
+  initialFilters = {},
+  sx = {},
+  ignoredKeysInCount = []
+}) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [filters, setFilters] = React.useState(initialFilters);
+  const [tempFilters, setTempFilters] = React.useState(initialFilters);
+  const activeFilterCount = Object.entries(filters).filter(([key, value]) => {
+    if (ignoredKeysInCount.includes(key)) return false;
+    if (Array.isArray(value)) return value.length > 0;
+    return value !== null && value !== void 0 && value !== "";
+  }).length;
+  React.useEffect(() => {
+    if (isOpen) {
+      setTempFilters({ ...filters });
+    }
+  }, [filters, isOpen]);
+  const handleFilterChange = (key, value) => {
+    setTempFilters((prev) => ({
+      ...prev,
+      [key]: value
+    }));
+  };
+  const handleApply = () => {
+    setFilters(tempFilters);
+    onApply == null ? void 0 : onApply(tempFilters);
+    setIsOpen(false);
+  };
+  const handleReset = () => {
+    setTempFilters({});
+    setFilters({});
+    onReset == null ? void 0 : onReset();
+    setIsOpen(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ButtonElement,
+      {
+        sx: {
+          ...sx,
+          color: activeFilterCount > 0 ? PRIMARY[500] : PRIMARY[500],
+          minWidth: "auto",
+          p: PADDING_LAYOUT_HEADER
+        },
+        startIcon: "filter_list_alt",
+        variant: "outlined",
+        onClick: () => setIsOpen(true),
+        content: `Bộ lọc${activeFilterCount > 0 ? ` (${activeFilterCount})` : ""}`
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      material.Drawer,
+      {
+        anchor: "right",
+        open: isOpen,
+        onClose: () => setIsOpen(false),
+        sx: {
+          "& .MuiDrawer-paper": {
+            width: 320,
+            padding: PADDING_GAP_LAYOUT
+          }
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(system.Stack, { sx: { height: "100%" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(StackRowAlignCenterJustBetween, { sx: { gap: 0 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TypographyOneLine, { content: "Bộ lọc", sx: { ...TYPOGRAPHY.textLg.semiBold } }),
+            /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { onClick: () => setIsOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(IconElement, { icon: "close" }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            system.Stack,
+            {
+              sx: {
+                flex: 1,
+                gap: PADDING_GAP_ITEM,
+                overflowY: "auto",
+                scrollbarWidth: "none",
+                "&::-webkit-scrollbar": { display: "none" }
+              },
+              children: children({ filters, tempFilters, setFilter: handleFilterChange, setTempFilters })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(StackRowJustEnd, { sx: { gap: PADDING_GAP_ITEM }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ButtonElement, { variant: "outlined", onClick: handleReset, content: "Đặt lại" }),
+            /* @__PURE__ */ jsxRuntime.jsx(ButtonElement, { variant: "contained", onClick: handleApply, content: "Cập nhật" })
+          ] })
+        ] })
+      }
+    )
+  ] });
+};
 const ListIconContentElement = ({
   titleNode,
   list,
@@ -79084,6 +79177,7 @@ exports.Environment = Environment;
 exports.FIELD_WIDTH = FIELD_WIDTH;
 exports.FULL_OPERATOR_OPTIONS = FULL_OPERATOR_OPTIONS;
 exports.FilterOperator = FilterOperator;
+exports.FilterSlider = FilterSlider;
 exports.GROUP_ICONS = GROUP_ICONS;
 exports.HttpStatusSpecial = HttpStatusSpecial;
 exports.ICONS = ICONS;