@multiplatform.one/frappe-ui 7.34.4 → 7.35.0

package/dist/cjs/list/ListControlsSheet.cjs

@@ -0,0 +1,351 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var ListControlsSheet_exports = {};
+__export(ListControlsSheet_exports, {
+  ListControlsSheet: () => ListControlsSheet
+});
+module.exports = __toCommonJS(ListControlsSheet_exports);
+var import_components = require("@multiplatform.one/components");
+var import_forms = require("@multiplatform.one/forms");
+var import_react = require("@phosphor-icons/react");
+var import_react2 = require("react");
+var import_react_i18next = require("react-i18next");
+var import_BandFilters = require("./BandFilters.cjs");
+var import_listState = require("./listState.cjs");
+var import_RangeFilter = require("./RangeFilter.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const viewIcons = {
+  grid: import_react.SquaresFourIcon,
+  list: import_react.ListIcon,
+  table: import_react.TableIcon
+};
+function ListControlsSheet({
+  controls,
+  list,
+  searchId,
+  searchPlaceholder,
+  showSearch,
+  showFavorites,
+  shuffle,
+  shufflePanel,
+  view,
+  noun,
+  testID
+}) {
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)();
+  const {
+    state,
+    update,
+    favorites
+  } = list;
+  const [open, setOpen] = (0, import_react2.useState)(false);
+  const sorts = controls.sorts ?? [];
+  const facets = controls.facets ?? [];
+  const ranges = controls.ranges ?? [];
+  const bands = controls.bands ?? [];
+  const count = (0, import_listState.activeFilterCount)(state);
+  const hasSheet = sorts.length > 0 || facets.length > 0 || ranges.length > 0 || bands.length > 0 || showFavorites;
+  (0, import_react2.useEffect)(() => {
+    if (!import_components.isWeb || typeof document === "undefined" || !open) return;
+    const onKeyDown = event => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [open]);
+  const reset = () => update({
+    sort: sorts[0]?.value,
+    favoritesOnly: false,
+    facets: Object.fromEntries(facets.map(facet => [facet.param, ""])),
+    ranges: Object.fromEntries(ranges.map(range => [range.param, 0])),
+    bands: Object.fromEntries(bands.map(band => [band.param, ""]))
+  });
+  const activeFacets = facets.filter(facet => state.facets[facet.param]);
+  const activeRanges = ranges.filter(range => (state.ranges[range.param] ?? 0) > 0);
+  const activeBands = bands.filter(band => state.bands?.[band.param]);
+  const shown = (() => {
+    if (count === 0) return list.total;
+    if (count !== 1) return void 0;
+    if (state.favoritesOnly) return favorites.count;
+    const facet = activeFacets[0];
+    if (facet) return list.facets[facet.param]?.counts[state.facets[facet.param]];
+    const band = activeBands[0];
+    return band ? list.bandCounts[band.param]?.[state.bands?.[band.param] ?? ""] : void 0;
+  })();
+  const chips = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+    gap: "$2",
+    flexWrap: "wrap",
+    flexShrink: 1,
+    minWidth: 0,
+    alignItems: "center",
+    children: [activeFacets.map(facet => {
+      const value = state.facets[facet.param];
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Chip, {
+        variant: "filled",
+        onPress: () => update({
+          facets: {
+            [facet.param]: ""
+          }
+        }),
+        children: facet.optionLabel?.(value) ?? value
+      }, facet.param);
+    }), activeRanges.map(range => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Chip, {
+      variant: "filled",
+      onPress: () => update({
+        ranges: {
+          [range.param]: 0
+        }
+      }),
+      children: `${range.label} ${state.ranges[range.param]}+`
+    }, range.param)), activeBands.map(band => {
+      const value = state.bands?.[band.param] ?? "";
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Chip, {
+        variant: "filled",
+        onPress: () => update({
+          bands: {
+            [band.param]: ""
+          }
+        }),
+        children: band.options.find(option => option.value === value)?.label ?? value
+      }, band.param);
+    }), state.favoritesOnly ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Chip, {
+      variant: "filled",
+      icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.HeartIcon, {
+        weight: "regular"
+      }),
+      onPress: () => update({
+        favoritesOnly: false
+      }),
+      children: t("Favorites")
+    }) : null]
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+    gap: "$3",
+    testID: `${testID}-controls`,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+      gap: "$2",
+      alignItems: "center",
+      children: [showSearch ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+        id: searchId,
+        flex: 1,
+        minWidth: 0,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.SearchInput, {
+          value: list.searchText,
+          onChange: list.setSearchText,
+          onSearch: text => update({
+            search: text
+          }),
+          placeholder: searchPlaceholder ?? t("Search..."),
+          "aria-label": searchPlaceholder ?? t("Search..."),
+          debounceMs: 200,
+          clearable: true
+        })
+      }) : null, hasSheet ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+        onPress: () => setOpen(true),
+        icon: import_react.SlidersHorizontalIcon,
+        iconAfter: count > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Badge, {
+          count,
+          color: "gray"
+        }) : void 0,
+        "aria-label": count > 0 ? t("Filters ({{count}})", {
+          count
+        }) : t("Filters", "Filters"),
+        testID: `${testID}-filters`,
+        children: t("Filters", "Filters")
+      }) : null]
+    }), count > 0 || view || shuffle ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+      gap: "$2",
+      alignItems: "center",
+      children: [chips, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+        gap: "$2",
+        alignItems: "center",
+        flexShrink: 0,
+        children: [shuffle ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+          circular: true,
+          chromeless: true,
+          onPress: shuffle.toggle,
+          icon: import_react.DiceFiveIcon,
+          "aria-label": t("Surprise me"),
+          "aria-expanded": shuffle.open,
+          "aria-controls": shuffle.panelId,
+          testID: `${testID}-shuffle-toggle`
+        }) : null, view && (controls.views?.length ?? 0) > 1 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.ViewSwitcher, {
+          views: (controls.views ?? []).map(mode => ({
+            type: mode,
+            label: mode === "grid" ? t("Cards") : mode === "list" ? t("List") : t("Table"),
+            icon: viewIcons[mode],
+            iconOnly: true
+          })),
+          currentView: view.current,
+          onViewChange: mode => view.onChange(mode),
+          testID: `${testID}-views`
+        }) : null]
+      })]
+    }) : null, shufflePanel, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SheetModal, {
+      open,
+      onOpenChange: setOpen,
+      scrollable: true,
+      header: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+        alignItems: "center",
+        gap: "$2",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+          fontSize: "$6",
+          fontWeight: "700",
+          color: "$color12",
+          children: t("Filters", "Filters")
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+          chromeless: true,
+          onPress: reset,
+          testID: `${testID}-reset`,
+          children: t("Reset")
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+          chromeless: true,
+          onPress: () => setOpen(false),
+          children: t("Done")
+        })]
+      }),
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+        gap: "$5",
+        paddingBottom: "$4",
+        testID: `${testID}-filters-sheet`,
+        children: [sorts.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+          gap: "$2",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+            fontSize: "$4",
+            fontWeight: "600",
+            color: "$color12",
+            children: t("Sort by")
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Select, {
+            native: true,
+            value: state.sort,
+            onChange: value => update({
+              sort: String(value)
+            }),
+            options: sorts.map(sort => ({
+              label: sort.label,
+              value: sort.value
+            })),
+            "aria-label": t("Sort by")
+          })]
+        }) : null, showFavorites ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+          alignItems: "center",
+          gap: "$3",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+            fontSize: "$4",
+            fontWeight: "600",
+            color: "$color12",
+            children: t("Favorites only")
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Switch, {
+            checked: state.favoritesOnly,
+            onChange: checked => update({
+              favoritesOnly: checked
+            }),
+            "aria-label": t("Favorites only")
+          })]
+        }) : null, facets.map(facet => {
+          const reading = list.facets[facet.param];
+          const selected = state.facets[facet.param] ?? "";
+          const options = [{
+            value: "",
+            label: facet.allLabel ?? t("All"),
+            count: list.total
+          }, ...facet.options.map(value => ({
+            value,
+            label: facet.optionLabel?.(value) ?? value,
+            count: reading?.counts[value]
+          }))];
+          return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+            gap: "$2",
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+              fontSize: "$4",
+              fontWeight: "600",
+              color: "$color12",
+              children: facet.label
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+              gap: "$2",
+              flexWrap: "wrap",
+              role: "radiogroup",
+              "aria-label": facet.label,
+              testID: `${testID}-${facet.param}`,
+              children: options.map(option => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.Chip, {
+                variant: option.value === selected ? "filled" : "outlined",
+                onPress: () => update({
+                  facets: {
+                    [facet.param]: option.value === selected && option.value !== "" ? "" : option.value
+                  }
+                }),
+                children: [option.label, typeof option.count === "number" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+                  color: option.value === selected ? "$color6" : "$color10",
+                  children: `  ${option.count}`
+                }) : null]
+              }, option.value || "__all"))
+            })]
+          }, facet.param);
+        }), bands.map(band => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+          gap: "$2",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+            fontSize: "$4",
+            fontWeight: "600",
+            color: "$color12",
+            children: band.label
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_BandFilters.BandFilter, {
+            band,
+            list,
+            layout: "list",
+            testID: `${testID}-${band.param}`
+          })]
+        }, band.param)), ranges.map(range => {
+          const max = (0, import_RangeFilter.rangeCeiling)(list.highest[range.param] ?? 0);
+          return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+            gap: "$2",
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_RangeFilter.RangeFilter, {
+              label: range.label,
+              value: state.ranges[range.param] ?? 0,
+              max,
+              step: range.step,
+              onChange: value => update({
+                ranges: {
+                  [range.param]: value
+                }
+              })
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+              fontSize: "$2",
+              color: "$color10",
+              children: `0\u2013${max}`
+            })]
+          }, range.param);
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+          theme: "accent",
+          onPress: () => setOpen(false),
+          testID: `${testID}-show`,
+          children: typeof shown === "number" ? t("Show {{count}} {{noun}}", {
+            count: shown,
+            noun
+          }) : t("Show results")
+        })]
+      })
+    })]
+  });
+}