@trackunit/filters-filter-bar 0.0.295 → 0.0.300

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/index.cjs.js +12 -22
  2. package/index.esm.js +13 -23
  3. package/package.json +3 -2
  4. package/src/lib/components/DefaultDateRangeFilter.d.ts +9 -1
  5. package/src/lib/utils/FilterEvents.d.ts +2 -2
package/index.cjs.js CHANGED
@@ -13,6 +13,7 @@ var reactFilterComponents = require('@trackunit/react-filter-components');
13
13
  var reactCoreHooks = require('@trackunit/react-core-hooks');
14
14
  var reactCoreContextsApi = require('@trackunit/react-core-contexts-api');
15
15
  var reactFormComponents = require('@trackunit/react-form-components');
16
+ var reactDateAndTimeComponents = require('@trackunit/react-date-and-time-components');
16
17
  var dequal = require('dequal');
17
18
  var isEqual = require('lodash/isEqual');
18
19
 
@@ -702,18 +703,12 @@ const formatToJustDate = (date) => {
702
703
  *
703
704
  * @param {DefaultFilterProps<DateRangeValue>} props - The properties required for the `DefaultDateRangeFilter` component.
704
705
  */
705
- const DefaultDateRangeFilter = ({ filterDefinition, filterName, value, setValue, }) => {
706
- var _a, _b;
706
+ const DefaultDateRangeFilter = ({ filterDefinition, filterName, value, setValue, showQuickOptions, }) => {
707
707
  const [t] = useTranslation();
708
- const [fromDateValue, setFromDateValue] = react.useState((_a = value === null || value === void 0 ? void 0 : value.from) !== null && _a !== void 0 ? _a : undefined);
709
- const [toDateValue, setToDateValue] = react.useState((_b = value === null || value === void 0 ? void 0 : value.to) !== null && _b !== void 0 ? _b : undefined);
710
708
  const hasSelection = [value === null || value === void 0 ? void 0 : value.from, value === null || value === void 0 ? void 0 : value.to].some(val => sharedUtils.nonNullable(val));
711
709
  const reset = () => {
712
- var _a, _b;
713
710
  // The Types for DefaultFilterProps and FilterDefinition could probably be improved to avoid this check
714
711
  if (filterDefinition.type === "dateRange") {
715
- setFromDateValue((_a = filterDefinition.defaultValue) === null || _a === void 0 ? void 0 : _a.from);
716
- setToDateValue((_b = filterDefinition.defaultValue) === null || _b === void 0 ? void 0 : _b.to);
717
712
  setValue(() => {
718
713
  var _a, _b;
719
714
  return ({
@@ -722,29 +717,24 @@ const DefaultDateRangeFilter = ({ filterDefinition, filterName, value, setValue,
722
717
  });
723
718
  });
724
719
  }
725
- setFromDateValue(undefined);
726
- setToDateValue(undefined);
727
- setValue(() => ({ from: undefined, to: undefined }));
728
- };
729
- const cancel = () => {
730
- setFromDateValue(value === null || value === void 0 ? void 0 : value.from);
731
- setToDateValue(value === null || value === void 0 ? void 0 : value.to);
720
+ else {
721
+ setValue(() => ({ from: undefined, to: undefined }));
722
+ }
732
723
  };
733
724
  const { logEvent } = reactCoreHooks.useAnalytics(FilterEvents);
734
- const handleApply = () => {
725
+ const handleApply = (fromDateValue, toDateValue) => {
735
726
  logEvent("FilterApplied", {
736
727
  type: filterName !== null && filterName !== void 0 ? filterName : `${sharedUtils.capitalize(filterDefinition.filterKey)}Filter`,
737
728
  value: JSON.stringify({ from: fromDateValue, to: toDateValue }),
738
729
  });
739
730
  setValue(() => ({ from: fromDateValue, to: toDateValue }));
740
731
  };
741
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactFilterComponents.FilterHeader, { onReset: reset, resetLabel: t("filtersBar.resetFilter"), showReset: hasSelection, title: filterDefinition.title }), jsxRuntime.jsxs(reactFilterComponents.FilterBody, { children: [jsxRuntime.jsx("div", { className: "flex gap-4 px-1", children: jsxRuntime.jsx(reactComponents.DayRangePicker, { language: "en", onRangeSelect: dateRange => {
742
- setFromDateValue(formatToJustDate(dateRange === null || dateRange === void 0 ? void 0 : dateRange.from));
743
- setToDateValue(formatToJustDate(dateRange === null || dateRange === void 0 ? void 0 : dateRange.to));
744
- }, selectedDays: {
745
- from: fromDateValue ? new Date(fromDateValue) : undefined,
746
- to: toDateValue ? new Date(toDateValue) : undefined,
747
- } }) }), jsxRuntime.jsx(reactFilterComponents.FilterFooter, { children: jsxRuntime.jsxs("div", { className: "flex gap-2", children: [jsxRuntime.jsx(reactComponents.Button, { onClick: cancel, size: "small", variant: "secondary", children: t("filtersBar.defaultDateRangeFilters.cancel") }), jsxRuntime.jsx(reactComponents.Button, { onClick: handleApply, size: "small", children: t("filtersBar.defaultDateRangeFilters.apply") })] }) })] })] }));
732
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactFilterComponents.FilterHeader, { onReset: reset, resetLabel: t("filtersBar.resetFilter"), showReset: hasSelection, title: filterDefinition.title }), jsxRuntime.jsx(reactFilterComponents.FilterBody, { children: jsxRuntime.jsx("div", { className: "flex gap-4 px-1", children: jsxRuntime.jsx(reactDateAndTimeComponents.DayRangePicker, { language: "en", onRangeSelect: dateRange => {
733
+ handleApply(formatToJustDate(dateRange === null || dateRange === void 0 ? void 0 : dateRange.from), formatToJustDate(dateRange === null || dateRange === void 0 ? void 0 : dateRange.to));
734
+ }, selectedDays: {
735
+ from: (value === null || value === void 0 ? void 0 : value.from) ? new Date(value.from) : undefined,
736
+ to: (value === null || value === void 0 ? void 0 : value.to) ? new Date(value.to) : undefined,
737
+ }, showQuickOptions: showQuickOptions }) }) })] }));
748
738
  };
749
739
 
750
740
  /**
package/index.esm.js CHANGED
@@ -2,13 +2,14 @@ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
2
2
  import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
3
3
  import { twMerge } from 'tailwind-merge';
4
4
  import { cvaMerge } from '@trackunit/css-class-variance-utilities';
5
- import { Button, Popover, PopoverTrigger, IconButton, Icon, PopoverContent, MenuList, Text, StarButton, useResize, Collapse, VirtualizedList, DayRangePicker } from '@trackunit/react-components';
5
+ import { Button, Popover, PopoverTrigger, IconButton, Icon, PopoverContent, MenuList, Text, StarButton, useResize, Collapse, VirtualizedList } from '@trackunit/react-components';
6
6
  import { objectValues, truthy, capitalize as capitalize$1, nonNullable } from '@trackunit/shared-utils';
7
7
  import { useMemo, useState, Fragment as Fragment$1, useRef, useEffect, useCallback } from 'react';
8
8
  import { Filter as Filter$1, FilterBody, RadioFilterItem, CheckBoxFilterItem, FilterHeader as FilterHeader$1, FilterFooter } from '@trackunit/react-filter-components';
9
9
  import { useAnalytics, useTextSearch } from '@trackunit/react-core-hooks';
10
10
  import { createEvent } from '@trackunit/react-core-contexts-api';
11
11
  import { Search, NumberField, RadioGroup } from '@trackunit/react-form-components';
12
+ import { DayRangePicker } from '@trackunit/react-date-and-time-components';
12
13
  import { dequal } from 'dequal';
13
14
  import isEqual from 'lodash/isEqual';
14
15
 
@@ -694,18 +695,12 @@ const formatToJustDate = (date) => {
694
695
  *
695
696
  * @param {DefaultFilterProps<DateRangeValue>} props - The properties required for the `DefaultDateRangeFilter` component.
696
697
  */
697
- const DefaultDateRangeFilter = ({ filterDefinition, filterName, value, setValue, }) => {
698
- var _a, _b;
698
+ const DefaultDateRangeFilter = ({ filterDefinition, filterName, value, setValue, showQuickOptions, }) => {
699
699
  const [t] = useTranslation();
700
- const [fromDateValue, setFromDateValue] = useState((_a = value === null || value === void 0 ? void 0 : value.from) !== null && _a !== void 0 ? _a : undefined);
701
- const [toDateValue, setToDateValue] = useState((_b = value === null || value === void 0 ? void 0 : value.to) !== null && _b !== void 0 ? _b : undefined);
702
700
  const hasSelection = [value === null || value === void 0 ? void 0 : value.from, value === null || value === void 0 ? void 0 : value.to].some(val => nonNullable(val));
703
701
  const reset = () => {
704
- var _a, _b;
705
702
  // The Types for DefaultFilterProps and FilterDefinition could probably be improved to avoid this check
706
703
  if (filterDefinition.type === "dateRange") {
707
- setFromDateValue((_a = filterDefinition.defaultValue) === null || _a === void 0 ? void 0 : _a.from);
708
- setToDateValue((_b = filterDefinition.defaultValue) === null || _b === void 0 ? void 0 : _b.to);
709
704
  setValue(() => {
710
705
  var _a, _b;
711
706
  return ({
@@ -714,29 +709,24 @@ const DefaultDateRangeFilter = ({ filterDefinition, filterName, value, setValue,
714
709
  });
715
710
  });
716
711
  }
717
- setFromDateValue(undefined);
718
- setToDateValue(undefined);
719
- setValue(() => ({ from: undefined, to: undefined }));
720
- };
721
- const cancel = () => {
722
- setFromDateValue(value === null || value === void 0 ? void 0 : value.from);
723
- setToDateValue(value === null || value === void 0 ? void 0 : value.to);
712
+ else {
713
+ setValue(() => ({ from: undefined, to: undefined }));
714
+ }
724
715
  };
725
716
  const { logEvent } = useAnalytics(FilterEvents);
726
- const handleApply = () => {
717
+ const handleApply = (fromDateValue, toDateValue) => {
727
718
  logEvent("FilterApplied", {
728
719
  type: filterName !== null && filterName !== void 0 ? filterName : `${capitalize$1(filterDefinition.filterKey)}Filter`,
729
720
  value: JSON.stringify({ from: fromDateValue, to: toDateValue }),
730
721
  });
731
722
  setValue(() => ({ from: fromDateValue, to: toDateValue }));
732
723
  };
733
- return (jsxs(Fragment, { children: [jsx(FilterHeader$1, { onReset: reset, resetLabel: t("filtersBar.resetFilter"), showReset: hasSelection, title: filterDefinition.title }), jsxs(FilterBody, { children: [jsx("div", { className: "flex gap-4 px-1", children: jsx(DayRangePicker, { language: "en", onRangeSelect: dateRange => {
734
- setFromDateValue(formatToJustDate(dateRange === null || dateRange === void 0 ? void 0 : dateRange.from));
735
- setToDateValue(formatToJustDate(dateRange === null || dateRange === void 0 ? void 0 : dateRange.to));
736
- }, selectedDays: {
737
- from: fromDateValue ? new Date(fromDateValue) : undefined,
738
- to: toDateValue ? new Date(toDateValue) : undefined,
739
- } }) }), jsx(FilterFooter, { children: jsxs("div", { className: "flex gap-2", children: [jsx(Button, { onClick: cancel, size: "small", variant: "secondary", children: t("filtersBar.defaultDateRangeFilters.cancel") }), jsx(Button, { onClick: handleApply, size: "small", children: t("filtersBar.defaultDateRangeFilters.apply") })] }) })] })] }));
724
+ return (jsxs(Fragment, { children: [jsx(FilterHeader$1, { onReset: reset, resetLabel: t("filtersBar.resetFilter"), showReset: hasSelection, title: filterDefinition.title }), jsx(FilterBody, { children: jsx("div", { className: "flex gap-4 px-1", children: jsx(DayRangePicker, { language: "en", onRangeSelect: dateRange => {
725
+ handleApply(formatToJustDate(dateRange === null || dateRange === void 0 ? void 0 : dateRange.from), formatToJustDate(dateRange === null || dateRange === void 0 ? void 0 : dateRange.to));
726
+ }, selectedDays: {
727
+ from: (value === null || value === void 0 ? void 0 : value.from) ? new Date(value.from) : undefined,
728
+ to: (value === null || value === void 0 ? void 0 : value.to) ? new Date(value.to) : undefined,
729
+ }, showQuickOptions: showQuickOptions }) }) })] }));
740
730
  };
741
731
 
742
732
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trackunit/filters-filter-bar",
3
- "version": "0.0.295",
3
+ "version": "0.0.300",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "engines": {
@@ -19,7 +19,8 @@
19
19
  "@trackunit/react-core-contexts-api": "*",
20
20
  "@trackunit/i18n-library-translation": "*",
21
21
  "@trackunit/css-class-variance-utilities": "*",
22
- "tailwind-merge": "^2.0.0"
22
+ "tailwind-merge": "^2.0.0",
23
+ "@trackunit/react-date-and-time-components": "*"
23
24
  },
24
25
  "module": "./index.esm.js",
25
26
  "main": "./index.cjs.js"
package/src/lib/components/DefaultDateRangeFilter.d.ts CHANGED
@@ -1,10 +1,18 @@
1
1
  /// <reference types="react" />
2
+ import { ShowQuickOption } from "@trackunit/react-date-and-time-components";
2
3
  import { DateRangeValue } from "../types/FilterTypes";
3
4
  import { DefaultFilterProps } from "./DefaultFilterTypes";
5
+ interface DefaultDateRangeFilterProps extends DefaultFilterProps<DateRangeValue> {
6
+ /**
7
+ * Display quick options buttons above calendar which will preselect date range
8
+ */
9
+ showQuickOptions?: ShowQuickOption;
10
+ }
4
11
  /**
5
12
  * `DefaultDateRangeFilter` is a React component for handling date range filters.
6
13
  * Formats the date range as YYYY-MM-DD - YYYY-MM-DD
7
14
  *
8
15
  * @param {DefaultFilterProps<DateRangeValue>} props - The properties required for the `DefaultDateRangeFilter` component.
9
16
  */
10
- export declare const DefaultDateRangeFilter: ({ filterDefinition, filterName, value, setValue, }: DefaultFilterProps<DateRangeValue>) => JSX.Element;
17
+ export declare const DefaultDateRangeFilter: ({ filterDefinition, filterName, value, setValue, showQuickOptions, }: DefaultDateRangeFilterProps) => JSX.Element;
18
+ export {};
package/src/lib/utils/FilterEvents.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { BaseEvent, UnspecifiedEvent } from "@trackunit/react-core-contexts-api";
1
+ import { BaseEvent } from "@trackunit/react-core-contexts-api";
2
2
  export interface FilterEvent extends BaseEvent {
3
3
  type: string;
4
4
  value: string | number;
@@ -13,5 +13,5 @@ export interface FilterEvent extends BaseEvent {
13
13
  */
14
14
  export declare const FilterEvents: {
15
15
  FilterApplied: import("@trackunit/react-core-contexts-api").Event<FilterEvent>;
16
- StarringFilter: import("@trackunit/react-core-contexts-api").Event<UnspecifiedEvent>;
16
+ StarringFilter: import("@trackunit/react-core-contexts-api").Event<import("@trackunit/react-core-contexts-api").AdditionalProperties>;
17
17
  };