@lotics/ui 1.18.0 → 1.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "1.18.0",
+  "version": "1.19.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
@@ -105,6 +105,7 @@
     "./pager_view": "./src/pager_view.tsx",
     "./date_picker": "./src/date_picker.tsx",
     "./date_filter": "./src/date_filter.tsx",
+    "./date_range_filter_field": "./src/date_range_filter_field.tsx",
     "./time_picker": "./src/time_picker.tsx",
     "./time_field": "./src/time_field.tsx",
     "./date_calendar": "./src/date_calendar.tsx",

package/src/date_range_filter_field.tsx

@@ -0,0 +1,116 @@
+import React, { useMemo, useState } from "react";
+import { View } from "react-native";
+import { Text } from "./text";
+import { colors } from "./colors";
+import { Icon } from "./icon";
+import { Button } from "./button";
+import { PressableHighlight } from "./pressable_highlight";
+import { Popover, PopoverTrigger, PopoverContent, PopoverFooter } from "./popover";
+import { DateFilter, DateFilterValue, DateFilterLabels } from "./date_filter";
+
+// =============================================================================
+// DateRangeFilterField — the common filter composition over DateFilter:
+// a trigger button showing the selected range, a popover holding the DateFilter
+// preset panel, and a Clear/Done footer. Use this for a date-range filter on a
+// toolbar/form; use the bare `DateFilter` panel when the host owns its own
+// trigger + footer (e.g. a grid column header).
+// =============================================================================
+
+export interface DateRangeFilterFieldLabels extends DateFilterLabels {
+  /** Footer: reset to no range. */
+  clear: string;
+  /** Footer: close the popover. */
+  done: string;
+  /** Trigger text when no range is selected. */
+  placeholder: string;
+}
+
+const DEFAULT_FIELD_LABELS = { clear: "Clear", done: "Done", placeholder: "All time" };
+
+export interface DateRangeFilterFieldProps {
+  value: DateFilterValue;
+  onValueChange: (value: DateFilterValue) => void;
+  includeTime?: boolean;
+  /** Translated labels (presets + footer + placeholder). Defaults to English. */
+  labels?: Partial<DateRangeFilterFieldLabels>;
+  /** BCP-47 locale for the calendar + trigger date display. Defaults to "en-US". */
+  locale?: string;
+  testID?: string;
+}
+
+const EMPTY_VALUE: DateFilterValue = {
+  start: { date: null, time: null },
+  end: { date: null, time: null },
+};
+
+function formatDate(date: Date | null, locale: string | undefined): string {
+  if (!date) return "";
+  try {
+    return new Intl.DateTimeFormat(locale, {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+    }).format(date);
+  } catch {
+    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+  }
+}
+
+export function DateRangeFilterField(props: DateRangeFilterFieldProps) {
+  const { value, onValueChange, includeTime, locale, testID } = props;
+  const labels = useMemo(() => ({ ...DEFAULT_FIELD_LABELS, ...props.labels }), [props.labels]);
+  const [open, setOpen] = useState(false);
+
+  const hasValue = Boolean(value.start.date || value.end.date);
+  const display = hasValue
+    ? `${formatDate(value.start.date, locale)} – ${formatDate(value.end.date, locale)}`
+    : labels.placeholder;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen} side="bottom" align="start">
+      <PopoverTrigger>
+        <PressableHighlight
+          testID={testID}
+          accessibilityRole="button"
+          accessibilityLabel={labels.selectDateRange}
+          style={{
+            flexDirection: "row",
+            alignItems: "center",
+            gap: 8,
+            paddingVertical: 9,
+            paddingHorizontal: 12,
+            borderWidth: 1,
+            borderColor: colors.zinc[300],
+            borderRadius: 8,
+            backgroundColor: colors.white,
+          }}
+        >
+          <Icon name="calendar" size={16} color={hasValue ? colors.zinc[700] : colors.zinc[400]} />
+          <Text size="sm" color={hasValue ? "default" : "muted"} numberOfLines={1} style={{ flex: 1 }}>
+            {display}
+          </Text>
+          <Icon name="chevron-down" size={14} color={colors.zinc[400]} />
+        </PressableHighlight>
+      </PopoverTrigger>
+      <PopoverContent disableBodyScroll>
+        <DateFilter
+          value={value}
+          onValueChange={onValueChange}
+          includeTime={includeTime}
+          labels={props.labels}
+          locale={locale}
+        />
+        <PopoverFooter>
+          <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between" }}>
+            {hasValue ? (
+              <Button title={labels.clear} onPress={() => onValueChange(EMPTY_VALUE)} />
+            ) : (
+              <View />
+            )}
+            <Button title={labels.done} color="secondary" onPress={() => setOpen(false)} />
+          </View>
+        </PopoverFooter>
+      </PopoverContent>
+    </Popover>
+  );
+}