@deephaven/jsapi-components 0.47.1-beta.0 → 0.47.1-dynamic-import.4

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 (73) hide show
  1. package/dist/index.d.ts +13 -2
  2. package/dist/index.d.ts.map +1 -1
  3. package/dist/index.js +13 -2
  4. package/dist/index.js.map +1 -1
  5. package/dist/useCheckIfExistsValue.d.ts +24 -0
  6. package/dist/useCheckIfExistsValue.d.ts.map +1 -0
  7. package/dist/useCheckIfExistsValue.js +34 -0
  8. package/dist/useCheckIfExistsValue.js.map +1 -0
  9. package/dist/useDebouncedViewportSearch.d.ts +2 -1
  10. package/dist/useDebouncedViewportSearch.d.ts.map +1 -1
  11. package/dist/useDebouncedViewportSearch.js +4 -5
  12. package/dist/useDebouncedViewportSearch.js.map +1 -1
  13. package/dist/useDebouncedViewportSelectionFilter.d.ts +19 -0
  14. package/dist/useDebouncedViewportSelectionFilter.d.ts.map +1 -0
  15. package/dist/useDebouncedViewportSelectionFilter.js +36 -0
  16. package/dist/useDebouncedViewportSelectionFilter.js.map +1 -0
  17. package/dist/useFilterConditionFactories.d.ts +5 -0
  18. package/dist/useFilterConditionFactories.d.ts.map +1 -0
  19. package/dist/useFilterConditionFactories.js +14 -0
  20. package/dist/useFilterConditionFactories.js.map +1 -0
  21. package/dist/useFilteredItemsWithDefaultValue.d.ts +14 -0
  22. package/dist/useFilteredItemsWithDefaultValue.d.ts.map +1 -0
  23. package/dist/useFilteredItemsWithDefaultValue.js +33 -0
  24. package/dist/useFilteredItemsWithDefaultValue.js.map +1 -0
  25. package/dist/useGetItemPosition.d.ts +22 -0
  26. package/dist/useGetItemPosition.d.ts.map +1 -0
  27. package/dist/useGetItemPosition.js +36 -0
  28. package/dist/useGetItemPosition.js.map +1 -0
  29. package/dist/useInitializeViewportData.d.ts +5 -5
  30. package/dist/useInitializeViewportData.d.ts.map +1 -1
  31. package/dist/useInitializeViewportData.js +18 -35
  32. package/dist/useInitializeViewportData.js.map +1 -1
  33. package/dist/useNotNullOrEmptyFilter.d.ts +3 -0
  34. package/dist/useNotNullOrEmptyFilter.d.ts.map +1 -0
  35. package/dist/useNotNullOrEmptyFilter.js +11 -0
  36. package/dist/useNotNullOrEmptyFilter.js.map +1 -0
  37. package/dist/usePickerWithSelectedValues.d.ts +33 -0
  38. package/dist/usePickerWithSelectedValues.d.ts.map +1 -0
  39. package/dist/usePickerWithSelectedValues.js +139 -0
  40. package/dist/usePickerWithSelectedValues.js.map +1 -0
  41. package/dist/useSearchableViewportData.d.ts +16 -0
  42. package/dist/useSearchableViewportData.d.ts.map +1 -0
  43. package/dist/useSearchableViewportData.js +37 -0
  44. package/dist/useSearchableViewportData.js.map +1 -0
  45. package/dist/useSetPaddedViewportCallback.d.ts +2 -1
  46. package/dist/useSetPaddedViewportCallback.d.ts.map +1 -1
  47. package/dist/useSetPaddedViewportCallback.js +2 -1
  48. package/dist/useSetPaddedViewportCallback.js.map +1 -1
  49. package/dist/useShowOnlyEmptyFilter.d.ts +11 -0
  50. package/dist/useShowOnlyEmptyFilter.d.ts.map +1 -0
  51. package/dist/useShowOnlyEmptyFilter.js +17 -0
  52. package/dist/useShowOnlyEmptyFilter.js.map +1 -0
  53. package/dist/useTableSize.d.ts +2 -1
  54. package/dist/useTableSize.d.ts.map +1 -1
  55. package/dist/useTableSize.js +2 -1
  56. package/dist/useTableSize.js.map +1 -1
  57. package/dist/useTableUtils.d.ts +2 -1
  58. package/dist/useTableUtils.d.ts.map +1 -1
  59. package/dist/useTableUtils.js +2 -1
  60. package/dist/useTableUtils.js.map +1 -1
  61. package/dist/useValueFilter.d.ts +10 -0
  62. package/dist/useValueFilter.d.ts.map +1 -0
  63. package/dist/useValueFilter.js +15 -0
  64. package/dist/useValueFilter.js.map +1 -0
  65. package/dist/useViewportData.d.ts +12 -8
  66. package/dist/useViewportData.d.ts.map +1 -1
  67. package/dist/useViewportData.js +37 -20
  68. package/dist/useViewportData.js.map +1 -1
  69. package/dist/useViewportFilter.d.ts +10 -0
  70. package/dist/useViewportFilter.d.ts.map +1 -0
  71. package/dist/useViewportFilter.js +16 -0
  72. package/dist/useViewportFilter.js.map +1 -0
  73. package/package.json +10 -11
@@ -1 +1 @@
1
- {"version":3,"file":"useInitializeViewportData.js","names":["useEffect","useListData","generateEmptyKeyedItems","usePrevious","useTableSize","useInitializeViewportData","table","viewportData","prevTable","size","Math","max","currentSize","items","length","remove","map","key","insert","keys","slice"],"sources":["../src/useInitializeViewportData.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport { ListData, useListData } from '@react-stately/data';\nimport type { Table, TreeTable } from '@deephaven/jsapi-types';\nimport { KeyedItem, generateEmptyKeyedItems } from '@deephaven/jsapi-utils';\nimport { usePrevious } from '@deephaven/react-hooks';\nimport useTableSize from './useTableSize';\n\n/**\n * Initializes a ListData instance that can be used for windowed views of a\n * Table. The list must always contain a KeyedItem for every record in the table,\n * so it is pre-populated with empty items that can be updated with real data as\n * the window changes.\n *\n * IMPORTANT: this will create an empty KeyedItem object for every row in the\n * source table. This is intended for \"human\" sized tables such as those used in\n * admin panels. This is not suitable for \"machine\" scale with millions+ rows.\n * @param table The table that will be used to determine the list size.\n * @returns a React Stately ListData object. Note that this object is recreated\n * by React Stately on every render.\n */\nexport default function useInitializeViewportData<T>(\n table: Table | TreeTable | null\n): ListData<KeyedItem<T>> {\n const viewportData = useListData<KeyedItem<T>>({});\n\n const prevTable = usePrevious(table);\n\n // If the table changes size, we need to re-initialize it.\n const size = Math.max(0, useTableSize(table));\n\n // We only want this to fire 1x once the table exists. Note that `useListData`\n // has no way to respond to a reference change of the `table` instance so we\n // have to manually delete any previous keyed items from the list.\n useEffect(() => {\n let currentSize = viewportData.items.length;\n\n // If our table instance has changed, we want to clear all items from state\n if (table !== prevTable && currentSize) {\n viewportData.remove(...viewportData.items.map(({ key }) => key));\n currentSize = 0;\n }\n\n if (!table) {\n return;\n }\n\n if (size > currentSize) {\n viewportData.insert(\n currentSize,\n ...generateEmptyKeyedItems<T>(currentSize, size - 1)\n );\n } else if (size < currentSize) {\n const keys = viewportData.items.slice(size).map(({ key }) => key);\n viewportData.remove(...keys);\n }\n\n // Intentionally excluding viewportData since it changes on every render.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [size, table]);\n\n return viewportData;\n}\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AACjC,SAAmBC,WAAW,QAAQ,qBAAqB;AAE3D,SAAoBC,uBAAuB,QAAQ,wBAAwB;AAC3E,SAASC,WAAW,QAAQ,wBAAwB;AAAC,OAC9CC,YAAY;AAEnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASC,yBAAyB,CAC/CC,KAA+B,EACP;EACxB,IAAMC,YAAY,GAAGN,WAAW,CAAe,CAAC,CAAC,CAAC;EAElD,IAAMO,SAAS,GAAGL,WAAW,CAACG,KAAK,CAAC;;EAEpC;EACA,IAAMG,IAAI,GAAGC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEP,YAAY,CAACE,KAAK,CAAC,CAAC;;EAE7C;EACA;EACA;EACAN,SAAS,CAAC,MAAM;IACd,IAAIY,WAAW,GAAGL,YAAY,CAACM,KAAK,CAACC,MAAM;;IAE3C;IACA,IAAIR,KAAK,KAAKE,SAAS,IAAII,WAAW,EAAE;MACtCL,YAAY,CAACQ,MAAM,CAAC,GAAGR,YAAY,CAACM,KAAK,CAACG,GAAG,CAAC;QAAA,IAAC;UAAEC;QAAI,CAAC;QAAA,OAAKA,GAAG;MAAA,EAAC,CAAC;MAChEL,WAAW,GAAG,CAAC;IACjB;IAEA,IAAI,CAACN,KAAK,EAAE;MACV;IACF;IAEA,IAAIG,IAAI,GAAGG,WAAW,EAAE;MACtBL,YAAY,CAACW,MAAM,CACjBN,WAAW,EACX,GAAGV,uBAAuB,CAAIU,WAAW,EAAEH,IAAI,GAAG,CAAC,CAAC,CACrD;IACH,CAAC,MAAM,IAAIA,IAAI,GAAGG,WAAW,EAAE;MAC7B,IAAMO,IAAI,GAAGZ,YAAY,CAACM,KAAK,CAACO,KAAK,CAACX,IAAI,CAAC,CAACO,GAAG,CAAC;QAAA,IAAC;UAAEC;QAAI,CAAC;QAAA,OAAKA,GAAG;MAAA,EAAC;MACjEV,YAAY,CAACQ,MAAM,CAAC,GAAGI,IAAI,CAAC;IAC9B;;IAEA;IACA;EACF,CAAC,EAAE,CAACV,IAAI,EAAEH,KAAK,CAAC,CAAC;EAEjB,OAAOC,YAAY;AACrB"}
1
+ {"version":3,"file":"useInitializeViewportData.js","names":["useEffect","generateEmptyKeyedItems","useWindowedListData","Log","useTableSize","log","module","useInitializeViewportData","table","viewportData","targetSize","Math","max","currentSize","items","length","debug","setItems","Array","from"],"sources":["../src/useInitializeViewportData.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport type { Table, TreeTable } from '@deephaven/jsapi-types';\nimport { generateEmptyKeyedItems } from '@deephaven/jsapi-utils';\nimport { useWindowedListData, WindowedListData } from '@deephaven/react-hooks';\nimport { KeyedItem } from '@deephaven/utils';\nimport Log from '@deephaven/log';\nimport useTableSize from './useTableSize';\n\nconst log = Log.module('useInitializeViewportData');\n\n/**\n * Initializes a ListData instance that can be used for windowed views of a\n * Table. The list must always contain a KeyedItem for every record in the table,\n * so it is pre-populated with empty items that can be updated with real data as\n * the window changes.\n *\n * IMPORTANT: this will create an empty KeyedItem object for every row in the\n * source table. This is intended for \"human\" sized tables such as those used in\n * admin panels. This is not suitable for \"machine\" scale with millions+ rows.\n * @param table The table that will be used to determine the list size.\n * @returns a WindowedListData object.\n */\nexport function useInitializeViewportData<T>(\n table: Table | TreeTable | null\n): WindowedListData<KeyedItem<T>> {\n const viewportData = useWindowedListData<KeyedItem<T>>({});\n\n // If the table changes size, we need to re-initialize it.\n const targetSize = Math.max(0, useTableSize(table));\n\n // Whenever the table reference or size changes, replace the list with empty\n // items. This is preferred over updating items in place to avoid the user\n // seeing items shift around multiple times.\n useEffect(() => {\n const currentSize = viewportData.items.length;\n\n if (targetSize !== currentSize) {\n log.debug('size changed:', { currentSize, targetSize });\n viewportData.setItems(\n Array.from(generateEmptyKeyedItems<T>(0, targetSize - 1))\n );\n }\n\n // Intentionally excluding viewportData since it changes on every render.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [targetSize, table]);\n\n return viewportData;\n}\n\nexport default useInitializeViewportData;\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AAEjC,SAASC,uBAAuB,QAAQ,wBAAwB;AAChE,SAASC,mBAAmB,QAA0B,wBAAwB;AAE9E,OAAOC,GAAG,MAAM,gBAAgB;AAAC,OAC1BC,YAAY;AAEnB,IAAMC,GAAG,GAAGF,GAAG,CAACG,MAAM,CAAC,2BAA2B,CAAC;;AAEnD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,yBAAyB,CACvCC,KAA+B,EACC;EAChC,IAAMC,YAAY,GAAGP,mBAAmB,CAAe,CAAC,CAAC,CAAC;;EAE1D;EACA,IAAMQ,UAAU,GAAGC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAER,YAAY,CAACI,KAAK,CAAC,CAAC;;EAEnD;EACA;EACA;EACAR,SAAS,CAAC,MAAM;IACd,IAAMa,WAAW,GAAGJ,YAAY,CAACK,KAAK,CAACC,MAAM;IAE7C,IAAIL,UAAU,KAAKG,WAAW,EAAE;MAC9BR,GAAG,CAACW,KAAK,CAAC,eAAe,EAAE;QAAEH,WAAW;QAAEH;MAAW,CAAC,CAAC;MACvDD,YAAY,CAACQ,QAAQ,CACnBC,KAAK,CAACC,IAAI,CAAClB,uBAAuB,CAAI,CAAC,EAAES,UAAU,GAAG,CAAC,CAAC,CAAC,CAC1D;IACH;;IAEA;IACA;EACF,CAAC,EAAE,CAACA,UAAU,EAAEF,KAAK,CAAC,CAAC;EAEvB,OAAOC,YAAY;AACrB;AAEA,eAAeF,yBAAyB"}
@@ -0,0 +1,3 @@
1
+ export declare function useNotNullOrEmptyFilter(columnNames: string | string[], conditionOperator?: 'and' | 'or'): import("@deephaven/jsapi-utils").FilterConditionFactory;
2
+ export default useNotNullOrEmptyFilter;
3
+ //# sourceMappingURL=useNotNullOrEmptyFilter.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useNotNullOrEmptyFilter.d.ts","sourceRoot":"","sources":["../src/useNotNullOrEmptyFilter.ts"],"names":[],"mappings":"AAOA,wBAAgB,uBAAuB,CACrC,WAAW,EAAE,MAAM,GAAG,MAAM,EAAE,EAC9B,iBAAiB,GAAE,KAAK,GAAG,IAAW,2DAkBvC;AAED,eAAe,uBAAuB,CAAC"}
@@ -0,0 +1,11 @@
1
+ import { useMemo } from 'react';
2
+ import { createFilterConditionFactory, createNotNullOrEmptyFilterCondition } from '@deephaven/jsapi-utils';
3
+ import useTableUtils from "./useTableUtils.js";
4
+ export function useNotNullOrEmptyFilter(columnNames) {
5
+ var conditionOperator = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'or';
6
+ var tableUtils = useTableUtils();
7
+ var notNullOrEmptyFilterCondition = useMemo(() => createNotNullOrEmptyFilterCondition(tableUtils), [tableUtils]);
8
+ return useMemo(() => createFilterConditionFactory(columnNames, notNullOrEmptyFilterCondition, conditionOperator), [columnNames, conditionOperator, notNullOrEmptyFilterCondition]);
9
+ }
10
+ export default useNotNullOrEmptyFilter;
11
+ //# sourceMappingURL=useNotNullOrEmptyFilter.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useNotNullOrEmptyFilter.js","names":["useMemo","createFilterConditionFactory","createNotNullOrEmptyFilterCondition","useTableUtils","useNotNullOrEmptyFilter","columnNames","conditionOperator","tableUtils","notNullOrEmptyFilterCondition"],"sources":["../src/useNotNullOrEmptyFilter.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport {\n createFilterConditionFactory,\n createNotNullOrEmptyFilterCondition,\n} from '@deephaven/jsapi-utils';\nimport useTableUtils from './useTableUtils';\n\nexport function useNotNullOrEmptyFilter(\n columnNames: string | string[],\n conditionOperator: 'and' | 'or' = 'or'\n) {\n const tableUtils = useTableUtils();\n\n const notNullOrEmptyFilterCondition = useMemo(\n () => createNotNullOrEmptyFilterCondition(tableUtils),\n [tableUtils]\n );\n\n return useMemo(\n () =>\n createFilterConditionFactory(\n columnNames,\n notNullOrEmptyFilterCondition,\n conditionOperator\n ),\n [columnNames, conditionOperator, notNullOrEmptyFilterCondition]\n );\n}\n\nexport default useNotNullOrEmptyFilter;\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SACEC,4BAA4B,EAC5BC,mCAAmC,QAC9B,wBAAwB;AAAC,OACzBC,aAAa;AAEpB,OAAO,SAASC,uBAAuB,CACrCC,WAA8B,EAE9B;EAAA,IADAC,iBAA+B,uEAAG,IAAI;EAEtC,IAAMC,UAAU,GAAGJ,aAAa,EAAE;EAElC,IAAMK,6BAA6B,GAAGR,OAAO,CAC3C,MAAME,mCAAmC,CAACK,UAAU,CAAC,EACrD,CAACA,UAAU,CAAC,CACb;EAED,OAAOP,OAAO,CACZ,MACEC,4BAA4B,CAC1BI,WAAW,EACXG,6BAA6B,EAC7BF,iBAAiB,CAClB,EACH,CAACD,WAAW,EAAEC,iBAAiB,EAAEE,6BAA6B,CAAC,CAChE;AACH;AAEA,eAAeJ,uBAAuB"}
@@ -0,0 +1,33 @@
1
+ import { Key } from 'react';
2
+ import type { Table } from '@deephaven/jsapi-types';
3
+ import { FilterConditionFactory } from '@deephaven/jsapi-utils';
4
+ import { KeyedItem, SelectionT } from '@deephaven/utils';
5
+ import { UseViewportDataResult } from './useViewportData';
6
+ export interface UsePickerWithSelectedValuesResult<TItem, TValue> {
7
+ list: UseViewportDataResult<TItem, Table>;
8
+ hasSearchTextWithZeroResults: boolean;
9
+ searchText: string;
10
+ searchTextExists: boolean | null;
11
+ searchTextIsInSelectedValues: boolean;
12
+ selectedKey: Key | null;
13
+ selectedValueMap: ReadonlyMap<TValue, {
14
+ value: TValue;
15
+ }>;
16
+ onSearchTextChange: (searchText: string) => void;
17
+ onSelectKey: (key: Key | null) => void;
18
+ onAddValues: (values: ReadonlySet<TValue>) => void;
19
+ onRemoveValues: (values: SelectionT<TValue>) => void;
20
+ }
21
+ /**
22
+ * Manages a list of available items that can be searched and selected. Selected
23
+ * items are removed from the list and managed in a selectedValueMap data
24
+ * structure. Useful for components that contain a picker but show selected
25
+ * values in a separate component.
26
+ * @param maybeTable
27
+ * @param columnName
28
+ * @param mapItemToValue
29
+ * @param filterConditionFactories
30
+ */
31
+ export declare function usePickerWithSelectedValues<TItem, TValue>(maybeTable: Table | null, columnName: string, mapItemToValue: (item: KeyedItem<TItem>) => TValue, ...filterConditionFactories: FilterConditionFactory[]): UsePickerWithSelectedValuesResult<TItem, TValue>;
32
+ export default usePickerWithSelectedValues;
33
+ //# sourceMappingURL=usePickerWithSelectedValues.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"usePickerWithSelectedValues.d.ts","sourceRoot":"","sources":["../src/usePickerWithSelectedValues.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAkC,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAGL,sBAAsB,EACvB,MAAM,wBAAwB,CAAC;AAKhC,OAAO,EAEL,SAAS,EAET,UAAU,EAGX,MAAM,kBAAkB,CAAC;AAE1B,OAAwB,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAK3E,MAAM,WAAW,iCAAiC,CAAC,KAAK,EAAE,MAAM;IAC9D,IAAI,EAAE,qBAAqB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAC1C,4BAA4B,EAAE,OAAO,CAAC;IACtC,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,OAAO,GAAG,IAAI,CAAC;IACjC,4BAA4B,EAAE,OAAO,CAAC;IACtC,WAAW,EAAE,GAAG,GAAG,IAAI,CAAC;IACxB,gBAAgB,EAAE,WAAW,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACzD,kBAAkB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,WAAW,EAAE,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI,KAAK,IAAI,CAAC;IACvC,WAAW,EAAE,CAAC,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACnD,cAAc,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;CACtD;AAED;;;;;;;;;GASG;AACH,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,MAAM,EACvD,UAAU,EAAE,KAAK,GAAG,IAAI,EACxB,UAAU,EAAE,MAAM,EAClB,cAAc,EAAE,CAAC,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,KAAK,MAAM,EAClD,GAAG,wBAAwB,EAAE,sBAAsB,EAAE,GACpD,iCAAiC,CAAC,KAAK,EAAE,MAAM,CAAC,CA0LlD;AAED,eAAe,2BAA2B,CAAC"}
@@ -0,0 +1,139 @@
1
+ import { useCallback, useMemo, useState } from 'react';
2
+ import { createSearchTextFilter, createSelectedValuesFilter } from '@deephaven/jsapi-utils';
3
+ import { useDebouncedCallback, usePromiseFactory } from '@deephaven/react-hooks';
4
+ import { COMBO_BOX_ITEM_HEIGHT, SEARCH_DEBOUNCE_MS, VIEWPORT_PADDING, VIEWPORT_SIZE } from '@deephaven/utils';
5
+ import useFilterConditionFactories from "./useFilterConditionFactories.js";
6
+ import useViewportData from "./useViewportData.js";
7
+ import useViewportFilter from "./useViewportFilter.js";
8
+ import useTableUtils from "./useTableUtils.js";
9
+ import useTableClose from "./useTableClose.js";
10
+ /**
11
+ * Manages a list of available items that can be searched and selected. Selected
12
+ * items are removed from the list and managed in a selectedValueMap data
13
+ * structure. Useful for components that contain a picker but show selected
14
+ * values in a separate component.
15
+ * @param maybeTable
16
+ * @param columnName
17
+ * @param mapItemToValue
18
+ * @param filterConditionFactories
19
+ */
20
+ export function usePickerWithSelectedValues(maybeTable, columnName, mapItemToValue) {
21
+ var tableUtils = useTableUtils();
22
+
23
+ // `searchText` should always be up to date for controlled search input.
24
+ // `debouncedSearchText` will get updated after a delay to avoid updating
25
+ // filters on every key stroke.
26
+ var [searchText, setSearchText] = useState('');
27
+ var [debouncedSearchText, setDebouncedSearchText] = useState('');
28
+ var [selectedKey, setSelectedKey] = useState(null);
29
+ var [selectedValueMap, setSelectedValueMap] = useState(() => new Map());
30
+ var {
31
+ data: valueExists,
32
+ isLoading: valueExistsIsLoading
33
+ } = usePromiseFactory(tableUtils.doesColumnValueExist, [maybeTable, columnName, debouncedSearchText, false /* isCaseSensitive */]);
34
+
35
+ // If value exists check is still loading or if debounce hasn't completed, set
36
+ // `searchTextExists` to null since it is indeterminate.
37
+ var searchTextExists = valueExistsIsLoading || debouncedSearchText !== searchText ? null : valueExists;
38
+ var searchTextFilter = useMemo(() => createSearchTextFilter(tableUtils, columnName, debouncedSearchText), [columnName, debouncedSearchText, tableUtils]);
39
+
40
+ // Filter out selected values from the picker
41
+ var excludeSelectedValuesFilter = useMemo(() => createSelectedValuesFilter(tableUtils, columnName, new Set(selectedValueMap.keys()), false, true), [columnName, selectedValueMap, tableUtils]);
42
+ for (var _len = arguments.length, filterConditionFactories = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
43
+ filterConditionFactories[_key - 3] = arguments[_key];
44
+ }
45
+ var {
46
+ data: listTable
47
+ } = usePromiseFactory(tableUtils.createDistinctSortedColumnTable, [maybeTable, columnName, 'asc', ...filterConditionFactories]);
48
+ useTableClose(listTable);
49
+ var list = useViewportData({
50
+ table: listTable,
51
+ itemHeight: COMBO_BOX_ITEM_HEIGHT,
52
+ viewportSize: VIEWPORT_SIZE,
53
+ viewportPadding: VIEWPORT_PADDING
54
+ });
55
+ var hasSearchTextWithZeroResults = searchText.length > 0 && list.size === 0;
56
+ var searchTextIsInSelectedValues = selectedValueMap.has(searchText);
57
+ var onDebouncedSearchTextChange = useDebouncedCallback(setDebouncedSearchText, SEARCH_DEBOUNCE_MS);
58
+ var onSearchTextChange = useCallback(text => {
59
+ setSearchText(text);
60
+ onDebouncedSearchTextChange(text);
61
+ }, [onDebouncedSearchTextChange]);
62
+ var setSelectedKeyOnNextFrame = useDebouncedCallback(setSelectedKey, 0);
63
+ var onSelectKey = useCallback(key => {
64
+ setSearchText('');
65
+ setDebouncedSearchText('');
66
+
67
+ // Set the selection temporarily to avoid the picker staying open
68
+ setSelectedKey(key);
69
+
70
+ // Clear the selection on next frame since selected items get removed from
71
+ // the list and added to `selectedValues` Map
72
+ setSelectedKeyOnNextFrame(null);
73
+
74
+ // key will be null in scenarios where search text doesn't match an item
75
+ // and user clicks outside of picker
76
+ if (key == null) {
77
+ return;
78
+ }
79
+ var item = list.viewportData.findItem(key);
80
+ if (item == null) {
81
+ return;
82
+ }
83
+ var value = mapItemToValue(item);
84
+ setSelectedValueMap(prev => {
85
+ var next = new Map(prev);
86
+ next.set(value, {
87
+ value
88
+ });
89
+ return next;
90
+ });
91
+ }, [setSelectedKeyOnNextFrame, list.viewportData, mapItemToValue]);
92
+ var onAddValues = useCallback(values => {
93
+ setSelectedValueMap(prev => {
94
+ if (values.size === 0) {
95
+ return prev;
96
+ }
97
+ var next = new Map(prev);
98
+
99
+ // eslint-disable-next-line no-restricted-syntax
100
+ for (var value of values) {
101
+ next.set(value, {
102
+ value
103
+ });
104
+ }
105
+ return next;
106
+ });
107
+ }, []);
108
+ var onRemoveValues = useCallback(values => {
109
+ setSelectedValueMap(prev => {
110
+ if (values === 'all') {
111
+ return new Map();
112
+ }
113
+ var next = new Map(prev);
114
+
115
+ // eslint-disable-next-line no-restricted-syntax
116
+ for (var value of values) {
117
+ next.delete(value);
118
+ }
119
+ return next;
120
+ });
121
+ }, []);
122
+ var filter = useFilterConditionFactories(list.table, searchTextFilter, excludeSelectedValuesFilter);
123
+ useViewportFilter(list, filter);
124
+ return useMemo(() => ({
125
+ list,
126
+ hasSearchTextWithZeroResults,
127
+ searchText,
128
+ searchTextExists,
129
+ searchTextIsInSelectedValues,
130
+ selectedKey,
131
+ selectedValueMap,
132
+ onSearchTextChange,
133
+ onSelectKey,
134
+ onAddValues,
135
+ onRemoveValues
136
+ }), [hasSearchTextWithZeroResults, list, onAddValues, onRemoveValues, onSearchTextChange, onSelectKey, searchText, searchTextExists, searchTextIsInSelectedValues, selectedKey, selectedValueMap]);
137
+ }
138
+ export default usePickerWithSelectedValues;
139
+ //# sourceMappingURL=usePickerWithSelectedValues.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"usePickerWithSelectedValues.js","names":["useCallback","useMemo","useState","createSearchTextFilter","createSelectedValuesFilter","useDebouncedCallback","usePromiseFactory","COMBO_BOX_ITEM_HEIGHT","SEARCH_DEBOUNCE_MS","VIEWPORT_PADDING","VIEWPORT_SIZE","useFilterConditionFactories","useViewportData","useViewportFilter","useTableUtils","useTableClose","usePickerWithSelectedValues","maybeTable","columnName","mapItemToValue","tableUtils","searchText","setSearchText","debouncedSearchText","setDebouncedSearchText","selectedKey","setSelectedKey","selectedValueMap","setSelectedValueMap","Map","data","valueExists","isLoading","valueExistsIsLoading","doesColumnValueExist","searchTextExists","searchTextFilter","excludeSelectedValuesFilter","Set","keys","filterConditionFactories","listTable","createDistinctSortedColumnTable","list","table","itemHeight","viewportSize","viewportPadding","hasSearchTextWithZeroResults","length","size","searchTextIsInSelectedValues","has","onDebouncedSearchTextChange","onSearchTextChange","text","setSelectedKeyOnNextFrame","onSelectKey","key","item","viewportData","findItem","value","prev","next","set","onAddValues","values","onRemoveValues","delete","filter"],"sources":["../src/usePickerWithSelectedValues.ts"],"sourcesContent":["import { Key, useCallback, useMemo, useState } from 'react';\nimport type { Table } from '@deephaven/jsapi-types';\nimport {\n createSearchTextFilter,\n createSelectedValuesFilter,\n FilterConditionFactory,\n} from '@deephaven/jsapi-utils';\nimport {\n useDebouncedCallback,\n usePromiseFactory,\n} from '@deephaven/react-hooks';\nimport {\n COMBO_BOX_ITEM_HEIGHT,\n KeyedItem,\n SEARCH_DEBOUNCE_MS,\n SelectionT,\n VIEWPORT_PADDING,\n VIEWPORT_SIZE,\n} from '@deephaven/utils';\nimport useFilterConditionFactories from './useFilterConditionFactories';\nimport useViewportData, { UseViewportDataResult } from './useViewportData';\nimport useViewportFilter from './useViewportFilter';\nimport useTableUtils from './useTableUtils';\nimport useTableClose from './useTableClose';\n\nexport interface UsePickerWithSelectedValuesResult<TItem, TValue> {\n list: UseViewportDataResult<TItem, Table>;\n hasSearchTextWithZeroResults: boolean;\n searchText: string;\n searchTextExists: boolean | null;\n searchTextIsInSelectedValues: boolean;\n selectedKey: Key | null;\n selectedValueMap: ReadonlyMap<TValue, { value: TValue }>;\n onSearchTextChange: (searchText: string) => void;\n onSelectKey: (key: Key | null) => void;\n onAddValues: (values: ReadonlySet<TValue>) => void;\n onRemoveValues: (values: SelectionT<TValue>) => void;\n}\n\n/**\n * Manages a list of available items that can be searched and selected. Selected\n * items are removed from the list and managed in a selectedValueMap data\n * structure. Useful for components that contain a picker but show selected\n * values in a separate component.\n * @param maybeTable\n * @param columnName\n * @param mapItemToValue\n * @param filterConditionFactories\n */\nexport function usePickerWithSelectedValues<TItem, TValue>(\n maybeTable: Table | null,\n columnName: string,\n mapItemToValue: (item: KeyedItem<TItem>) => TValue,\n ...filterConditionFactories: FilterConditionFactory[]\n): UsePickerWithSelectedValuesResult<TItem, TValue> {\n const tableUtils = useTableUtils();\n\n // `searchText` should always be up to date for controlled search input.\n // `debouncedSearchText` will get updated after a delay to avoid updating\n // filters on every key stroke.\n const [searchText, setSearchText] = useState('');\n const [debouncedSearchText, setDebouncedSearchText] = useState('');\n\n const [selectedKey, setSelectedKey] = useState<Key | null>(null);\n const [selectedValueMap, setSelectedValueMap] = useState<\n Map<TValue, { value: TValue }>\n >(() => new Map());\n\n const { data: valueExists, isLoading: valueExistsIsLoading } =\n usePromiseFactory(tableUtils.doesColumnValueExist, [\n maybeTable,\n columnName,\n debouncedSearchText,\n false /* isCaseSensitive */,\n ]);\n\n // If value exists check is still loading or if debounce hasn't completed, set\n // `searchTextExists` to null since it is indeterminate.\n const searchTextExists =\n valueExistsIsLoading || debouncedSearchText !== searchText\n ? null\n : valueExists;\n\n const searchTextFilter = useMemo(\n () => createSearchTextFilter(tableUtils, columnName, debouncedSearchText),\n [columnName, debouncedSearchText, tableUtils]\n );\n\n // Filter out selected values from the picker\n const excludeSelectedValuesFilter = useMemo(\n () =>\n createSelectedValuesFilter(\n tableUtils,\n columnName,\n new Set(selectedValueMap.keys()),\n false,\n true\n ),\n [columnName, selectedValueMap, tableUtils]\n );\n\n const { data: listTable } = usePromiseFactory(\n tableUtils.createDistinctSortedColumnTable,\n [maybeTable, columnName, 'asc', ...filterConditionFactories]\n );\n\n useTableClose(listTable);\n\n const list = useViewportData<TItem, Table>({\n table: listTable,\n itemHeight: COMBO_BOX_ITEM_HEIGHT,\n viewportSize: VIEWPORT_SIZE,\n viewportPadding: VIEWPORT_PADDING,\n });\n\n const hasSearchTextWithZeroResults = searchText.length > 0 && list.size === 0;\n const searchTextIsInSelectedValues = selectedValueMap.has(\n searchText as TValue\n );\n\n const onDebouncedSearchTextChange = useDebouncedCallback(\n setDebouncedSearchText,\n SEARCH_DEBOUNCE_MS\n );\n\n const onSearchTextChange = useCallback(\n (text: string) => {\n setSearchText(text);\n onDebouncedSearchTextChange(text);\n },\n [onDebouncedSearchTextChange]\n );\n\n const setSelectedKeyOnNextFrame = useDebouncedCallback(setSelectedKey, 0);\n\n const onSelectKey = useCallback(\n (key: Key | null) => {\n setSearchText('');\n setDebouncedSearchText('');\n\n // Set the selection temporarily to avoid the picker staying open\n setSelectedKey(key);\n\n // Clear the selection on next frame since selected items get removed from\n // the list and added to `selectedValues` Map\n setSelectedKeyOnNextFrame(null);\n\n // key will be null in scenarios where search text doesn't match an item\n // and user clicks outside of picker\n if (key == null) {\n return;\n }\n\n const item = list.viewportData.findItem(key);\n\n if (item == null) {\n return;\n }\n\n const value = mapItemToValue(item);\n\n setSelectedValueMap(prev => {\n const next = new Map(prev);\n next.set(value, { value });\n return next;\n });\n },\n [setSelectedKeyOnNextFrame, list.viewportData, mapItemToValue]\n );\n\n const onAddValues = useCallback((values: ReadonlySet<TValue>) => {\n setSelectedValueMap(prev => {\n if (values.size === 0) {\n return prev;\n }\n\n const next = new Map(prev);\n\n // eslint-disable-next-line no-restricted-syntax\n for (const value of values) {\n next.set(value, { value });\n }\n\n return next;\n });\n }, []);\n\n const onRemoveValues = useCallback((values: SelectionT<TValue>) => {\n setSelectedValueMap(prev => {\n if (values === 'all') {\n return new Map();\n }\n\n const next = new Map(prev);\n\n // eslint-disable-next-line no-restricted-syntax\n for (const value of values) {\n next.delete(value);\n }\n\n return next;\n });\n }, []);\n\n const filter = useFilterConditionFactories(\n list.table,\n searchTextFilter,\n excludeSelectedValuesFilter\n );\n\n useViewportFilter(list, filter);\n\n return useMemo(\n () => ({\n list,\n hasSearchTextWithZeroResults,\n searchText,\n searchTextExists,\n searchTextIsInSelectedValues,\n selectedKey,\n selectedValueMap,\n onSearchTextChange,\n onSelectKey,\n onAddValues,\n onRemoveValues,\n }),\n [\n hasSearchTextWithZeroResults,\n list,\n onAddValues,\n onRemoveValues,\n onSearchTextChange,\n onSelectKey,\n searchText,\n searchTextExists,\n searchTextIsInSelectedValues,\n selectedKey,\n selectedValueMap,\n ]\n );\n}\n\nexport default usePickerWithSelectedValues;\n"],"mappings":"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"}
@@ -0,0 +1,16 @@
1
+ import type { Table } from '@deephaven/jsapi-types';
2
+ import { FilterConditionFactory } from '@deephaven/jsapi-utils';
3
+ import { UseViewportDataResult } from './useViewportData';
4
+ export interface SearchableViewportData<TData> {
5
+ list: UseViewportDataResult<TData, Table>;
6
+ onSearchTextChange: (searchText: string) => void;
7
+ }
8
+ /**
9
+ * Use a viewport data list with a search text filter. Supports additional filters.
10
+ * @param maybeTable The table to use
11
+ * @param searchColumnNames The column names to search
12
+ * @param additionalFilterConditionFactories Additional filter condition factories
13
+ */
14
+ export declare function useSearchableViewportData<TData>(maybeTable: Table | null, searchColumnNames: string | string[], ...additionalFilterConditionFactories: FilterConditionFactory[]): SearchableViewportData<TData>;
15
+ export default useSearchableViewportData;
16
+ //# sourceMappingURL=useSearchableViewportData.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useSearchableViewportData.d.ts","sourceRoot":"","sources":["../src/useSearchableViewportData.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAEL,sBAAsB,EACvB,MAAM,wBAAwB,CAAC;AAShC,OAAwB,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAI3E,MAAM,WAAW,sBAAsB,CAAC,KAAK;IAC3C,IAAI,EAAE,qBAAqB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAC1C,kBAAkB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD;AAED;;;;;GAKG;AACH,wBAAgB,yBAAyB,CAAC,KAAK,EAC7C,UAAU,EAAE,KAAK,GAAG,IAAI,EACxB,iBAAiB,EAAE,MAAM,GAAG,MAAM,EAAE,EACpC,GAAG,kCAAkC,EAAE,sBAAsB,EAAE,GAC9D,sBAAsB,CAAC,KAAK,CAAC,CAkC/B;AAED,eAAe,yBAAyB,CAAC"}
@@ -0,0 +1,37 @@
1
+ import { useMemo, useState } from 'react';
2
+ import { createSearchTextFilter } from '@deephaven/jsapi-utils';
3
+ import { SEARCH_DEBOUNCE_MS, TABLE_ROW_HEIGHT, VIEWPORT_PADDING, VIEWPORT_SIZE } from '@deephaven/utils';
4
+ import { useDebouncedCallback } from '@deephaven/react-hooks';
5
+ import { useTableUtils } from "./useTableUtils.js";
6
+ import useViewportData from "./useViewportData.js";
7
+ import useFilterConditionFactories from "./useFilterConditionFactories.js";
8
+ import useViewportFilter from "./useViewportFilter.js";
9
+ /**
10
+ * Use a viewport data list with a search text filter. Supports additional filters.
11
+ * @param maybeTable The table to use
12
+ * @param searchColumnNames The column names to search
13
+ * @param additionalFilterConditionFactories Additional filter condition factories
14
+ */
15
+ export function useSearchableViewportData(maybeTable, searchColumnNames) {
16
+ var tableUtils = useTableUtils();
17
+ var [searchText, setSearchText] = useState('');
18
+ var searchTextFilter = useMemo(() => createSearchTextFilter(tableUtils, searchColumnNames, searchText), [searchColumnNames, searchText, tableUtils]);
19
+ var onSearchTextChange = useDebouncedCallback(setSearchText, SEARCH_DEBOUNCE_MS);
20
+ var list = useViewportData({
21
+ table: maybeTable,
22
+ itemHeight: TABLE_ROW_HEIGHT,
23
+ viewportSize: VIEWPORT_SIZE,
24
+ viewportPadding: VIEWPORT_PADDING
25
+ });
26
+ for (var _len = arguments.length, additionalFilterConditionFactories = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
27
+ additionalFilterConditionFactories[_key - 2] = arguments[_key];
28
+ }
29
+ var filter = useFilterConditionFactories(list.table, searchTextFilter, ...additionalFilterConditionFactories);
30
+ useViewportFilter(list, filter);
31
+ return {
32
+ list,
33
+ onSearchTextChange
34
+ };
35
+ }
36
+ export default useSearchableViewportData;
37
+ //# sourceMappingURL=useSearchableViewportData.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useSearchableViewportData.js","names":["useMemo","useState","createSearchTextFilter","SEARCH_DEBOUNCE_MS","TABLE_ROW_HEIGHT","VIEWPORT_PADDING","VIEWPORT_SIZE","useDebouncedCallback","useTableUtils","useViewportData","useFilterConditionFactories","useViewportFilter","useSearchableViewportData","maybeTable","searchColumnNames","tableUtils","searchText","setSearchText","searchTextFilter","onSearchTextChange","list","table","itemHeight","viewportSize","viewportPadding","additionalFilterConditionFactories","filter"],"sources":["../src/useSearchableViewportData.ts"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport type { Table } from '@deephaven/jsapi-types';\nimport {\n createSearchTextFilter,\n FilterConditionFactory,\n} from '@deephaven/jsapi-utils';\nimport {\n SEARCH_DEBOUNCE_MS,\n TABLE_ROW_HEIGHT,\n VIEWPORT_PADDING,\n VIEWPORT_SIZE,\n} from '@deephaven/utils';\nimport { useDebouncedCallback } from '@deephaven/react-hooks';\nimport { useTableUtils } from './useTableUtils';\nimport useViewportData, { UseViewportDataResult } from './useViewportData';\nimport useFilterConditionFactories from './useFilterConditionFactories';\nimport useViewportFilter from './useViewportFilter';\n\nexport interface SearchableViewportData<TData> {\n list: UseViewportDataResult<TData, Table>;\n onSearchTextChange: (searchText: string) => void;\n}\n\n/**\n * Use a viewport data list with a search text filter. Supports additional filters.\n * @param maybeTable The table to use\n * @param searchColumnNames The column names to search\n * @param additionalFilterConditionFactories Additional filter condition factories\n */\nexport function useSearchableViewportData<TData>(\n maybeTable: Table | null,\n searchColumnNames: string | string[],\n ...additionalFilterConditionFactories: FilterConditionFactory[]\n): SearchableViewportData<TData> {\n const tableUtils = useTableUtils();\n\n const [searchText, setSearchText] = useState<string>('');\n\n const searchTextFilter = useMemo(\n () => createSearchTextFilter(tableUtils, searchColumnNames, searchText),\n [searchColumnNames, searchText, tableUtils]\n );\n\n const onSearchTextChange = useDebouncedCallback(\n setSearchText,\n SEARCH_DEBOUNCE_MS\n );\n\n const list = useViewportData<TData, Table>({\n table: maybeTable,\n itemHeight: TABLE_ROW_HEIGHT,\n viewportSize: VIEWPORT_SIZE,\n viewportPadding: VIEWPORT_PADDING,\n });\n\n const filter = useFilterConditionFactories(\n list.table,\n searchTextFilter,\n ...additionalFilterConditionFactories\n );\n\n useViewportFilter(list, filter);\n\n return {\n list,\n onSearchTextChange,\n };\n}\n\nexport default useSearchableViewportData;\n"],"mappings":"AAAA,SAASA,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAEzC,SACEC,sBAAsB,QAEjB,wBAAwB;AAC/B,SACEC,kBAAkB,EAClBC,gBAAgB,EAChBC,gBAAgB,EAChBC,aAAa,QACR,kBAAkB;AACzB,SAASC,oBAAoB,QAAQ,wBAAwB;AAAC,SACrDC,aAAa;AAAA,OACfC,eAAe;AAAA,OACfC,2BAA2B;AAAA,OAC3BC,iBAAiB;AAOxB;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,yBAAyB,CACvCC,UAAwB,EACxBC,iBAAoC,EAEL;EAC/B,IAAMC,UAAU,GAAGP,aAAa,EAAE;EAElC,IAAM,CAACQ,UAAU,EAAEC,aAAa,CAAC,GAAGhB,QAAQ,CAAS,EAAE,CAAC;EAExD,IAAMiB,gBAAgB,GAAGlB,OAAO,CAC9B,MAAME,sBAAsB,CAACa,UAAU,EAAED,iBAAiB,EAAEE,UAAU,CAAC,EACvE,CAACF,iBAAiB,EAAEE,UAAU,EAAED,UAAU,CAAC,CAC5C;EAED,IAAMI,kBAAkB,GAAGZ,oBAAoB,CAC7CU,aAAa,EACbd,kBAAkB,CACnB;EAED,IAAMiB,IAAI,GAAGX,eAAe,CAAe;IACzCY,KAAK,EAAER,UAAU;IACjBS,UAAU,EAAElB,gBAAgB;IAC5BmB,YAAY,EAAEjB,aAAa;IAC3BkB,eAAe,EAAEnB;EACnB,CAAC,CAAC;EAAC,kCArBAoB,kCAAkC;IAAlCA,kCAAkC;EAAA;EAuBrC,IAAMC,MAAM,GAAGhB,2BAA2B,CACxCU,IAAI,CAACC,KAAK,EACVH,gBAAgB,EAChB,GAAGO,kCAAkC,CACtC;EAEDd,iBAAiB,CAACS,IAAI,EAAEM,MAAM,CAAC;EAE/B,OAAO;IACLN,IAAI;IACJD;EACF,CAAC;AACH;AAEA,eAAeP,yBAAyB"}
@@ -9,5 +9,6 @@ import type { Table, TreeTable } from '@deephaven/jsapi-types';
9
9
  * @param viewportPadding Padding to add before and after the viewport.
10
10
  * @returns A callback function for setting the viewport.
11
11
  */
12
- export default function useSetPaddedViewportCallback(table: Table | TreeTable | null, viewportSize: number, viewportPadding: number): (firstRow: number) => void;
12
+ export declare function useSetPaddedViewportCallback(table: Table | TreeTable | null, viewportSize: number, viewportPadding: number): (firstRow: number) => void;
13
+ export default useSetPaddedViewportCallback;
13
14
  //# sourceMappingURL=useSetPaddedViewportCallback.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"useSetPaddedViewportCallback.d.ts","sourceRoot":"","sources":["../src/useSetPaddedViewportCallback.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAG/D;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,UAAU,4BAA4B,CAClD,KAAK,EAAE,KAAK,GAAG,SAAS,GAAG,IAAI,EAC/B,YAAY,EAAE,MAAM,EACpB,eAAe,EAAE,MAAM,cAGgB,MAAM,UAY9C"}
1
+ {"version":3,"file":"useSetPaddedViewportCallback.d.ts","sourceRoot":"","sources":["../src/useSetPaddedViewportCallback.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAG/D;;;;;;;;;GASG;AACH,wBAAgB,4BAA4B,CAC1C,KAAK,EAAE,KAAK,GAAG,SAAS,GAAG,IAAI,EAC/B,YAAY,EAAE,MAAM,EACpB,eAAe,EAAE,MAAM,cAGgB,MAAM,UAY9C;AAED,eAAe,4BAA4B,CAAC"}
@@ -11,10 +11,11 @@ import { getSize, padFirstAndLastRow } from '@deephaven/jsapi-utils';
11
11
  * @param viewportPadding Padding to add before and after the viewport.
12
12
  * @returns A callback function for setting the viewport.
13
13
  */
14
- export default function useSetPaddedViewportCallback(table, viewportSize, viewportPadding) {
14
+ export function useSetPaddedViewportCallback(table, viewportSize, viewportPadding) {
15
15
  return useCallback(function setPaddedViewport(firstRow) {
16
16
  var [first, last] = padFirstAndLastRow(firstRow, viewportSize, viewportPadding, getSize(table));
17
17
  table === null || table === void 0 ? void 0 : table.setViewport(first, last);
18
18
  }, [table, viewportPadding, viewportSize]);
19
19
  }
20
+ export default useSetPaddedViewportCallback;
20
21
  //# sourceMappingURL=useSetPaddedViewportCallback.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"useSetPaddedViewportCallback.js","names":["useCallback","getSize","padFirstAndLastRow","useSetPaddedViewportCallback","table","viewportSize","viewportPadding","setPaddedViewport","firstRow","first","last","setViewport"],"sources":["../src/useSetPaddedViewportCallback.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport type { Table, TreeTable } from '@deephaven/jsapi-types';\nimport { getSize, padFirstAndLastRow } from '@deephaven/jsapi-utils';\n\n/**\n * Creates a callback function that will set a Table viewport. The callback has\n * a closure over the Table, a desired viewport size, and additional padding.\n * These will be combined with a first row index passed to the callback to\n * calculate the final viewport.\n * @param table Table to call `setViewport` on.\n * @param viewportSize The desired viewport size.\n * @param viewportPadding Padding to add before and after the viewport.\n * @returns A callback function for setting the viewport.\n */\nexport default function useSetPaddedViewportCallback(\n table: Table | TreeTable | null,\n viewportSize: number,\n viewportPadding: number\n) {\n return useCallback(\n function setPaddedViewport(firstRow: number) {\n const [first, last] = padFirstAndLastRow(\n firstRow,\n viewportSize,\n viewportPadding,\n getSize(table)\n );\n\n table?.setViewport(first, last);\n },\n [table, viewportPadding, viewportSize]\n );\n}\n"],"mappings":"AAAA,SAASA,WAAW,QAAQ,OAAO;AAEnC,SAASC,OAAO,EAAEC,kBAAkB,QAAQ,wBAAwB;;AAEpE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASC,4BAA4B,CAClDC,KAA+B,EAC/BC,YAAoB,EACpBC,eAAuB,EACvB;EACA,OAAON,WAAW,CAChB,SAASO,iBAAiB,CAACC,QAAgB,EAAE;IAC3C,IAAM,CAACC,KAAK,EAAEC,IAAI,CAAC,GAAGR,kBAAkB,CACtCM,QAAQ,EACRH,YAAY,EACZC,eAAe,EACfL,OAAO,CAACG,KAAK,CAAC,CACf;IAEDA,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEO,WAAW,CAACF,KAAK,EAAEC,IAAI,CAAC;EACjC,CAAC,EACD,CAACN,KAAK,EAAEE,eAAe,EAAED,YAAY,CAAC,CACvC;AACH"}
1
+ {"version":3,"file":"useSetPaddedViewportCallback.js","names":["useCallback","getSize","padFirstAndLastRow","useSetPaddedViewportCallback","table","viewportSize","viewportPadding","setPaddedViewport","firstRow","first","last","setViewport"],"sources":["../src/useSetPaddedViewportCallback.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport type { Table, TreeTable } from '@deephaven/jsapi-types';\nimport { getSize, padFirstAndLastRow } from '@deephaven/jsapi-utils';\n\n/**\n * Creates a callback function that will set a Table viewport. The callback has\n * a closure over the Table, a desired viewport size, and additional padding.\n * These will be combined with a first row index passed to the callback to\n * calculate the final viewport.\n * @param table Table to call `setViewport` on.\n * @param viewportSize The desired viewport size.\n * @param viewportPadding Padding to add before and after the viewport.\n * @returns A callback function for setting the viewport.\n */\nexport function useSetPaddedViewportCallback(\n table: Table | TreeTable | null,\n viewportSize: number,\n viewportPadding: number\n) {\n return useCallback(\n function setPaddedViewport(firstRow: number) {\n const [first, last] = padFirstAndLastRow(\n firstRow,\n viewportSize,\n viewportPadding,\n getSize(table)\n );\n\n table?.setViewport(first, last);\n },\n [table, viewportPadding, viewportSize]\n );\n}\n\nexport default useSetPaddedViewportCallback;\n"],"mappings":"AAAA,SAASA,WAAW,QAAQ,OAAO;AAEnC,SAASC,OAAO,EAAEC,kBAAkB,QAAQ,wBAAwB;;AAEpE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,4BAA4B,CAC1CC,KAA+B,EAC/BC,YAAoB,EACpBC,eAAuB,EACvB;EACA,OAAON,WAAW,CAChB,SAASO,iBAAiB,CAACC,QAAgB,EAAE;IAC3C,IAAM,CAACC,KAAK,EAAEC,IAAI,CAAC,GAAGR,kBAAkB,CACtCM,QAAQ,EACRH,YAAY,EACZC,eAAe,EACfL,OAAO,CAACG,KAAK,CAAC,CACf;IAEDA,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEO,WAAW,CAACF,KAAK,EAAEC,IAAI,CAAC;EACjC,CAAC,EACD,CAACN,KAAK,EAAEE,eAAe,EAAED,YAAY,CAAC,CACvC;AACH;AAEA,eAAeF,4BAA4B"}
@@ -0,0 +1,11 @@
1
+ import { FilterConditionFactory } from '@deephaven/jsapi-utils';
2
+ /**
3
+ * Creates a filter condition factory that can be toggle on or off. If on, the
4
+ * filter will match only values that are null or empty strings. If off, the
5
+ * filter will match all values.
6
+ * @param isOn Whether the filter is on or off
7
+ * @param columnNames Column names to filter
8
+ */
9
+ export declare function useShowOnlyEmptyFilter(isOn: boolean, columnNames: string | string[]): FilterConditionFactory;
10
+ export default useShowOnlyEmptyFilter;
11
+ //# sourceMappingURL=useShowOnlyEmptyFilter.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useShowOnlyEmptyFilter.d.ts","sourceRoot":"","sources":["../src/useShowOnlyEmptyFilter.ts"],"names":[],"mappings":"AACA,OAAO,EAGL,sBAAsB,EACvB,MAAM,wBAAwB,CAAC;AAGhC;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CACpC,IAAI,EAAE,OAAO,EACb,WAAW,EAAE,MAAM,GAAG,MAAM,EAAE,GAC7B,sBAAsB,CAYxB;AAED,eAAe,sBAAsB,CAAC"}
@@ -0,0 +1,17 @@
1
+ import { useMemo } from 'react';
2
+ import { createFilterConditionFactory, createShowOnlyEmptyFilterCondition } from '@deephaven/jsapi-utils';
3
+ import useTableUtils from "./useTableUtils.js";
4
+ /**
5
+ * Creates a filter condition factory that can be toggle on or off. If on, the
6
+ * filter will match only values that are null or empty strings. If off, the
7
+ * filter will match all values.
8
+ * @param isOn Whether the filter is on or off
9
+ * @param columnNames Column names to filter
10
+ */
11
+ export function useShowOnlyEmptyFilter(isOn, columnNames) {
12
+ var tableUtils = useTableUtils();
13
+ var createColumnCondition = useMemo(() => createShowOnlyEmptyFilterCondition(tableUtils, isOn), [isOn, tableUtils]);
14
+ return useMemo(() => createFilterConditionFactory(columnNames, createColumnCondition), [columnNames, createColumnCondition]);
15
+ }
16
+ export default useShowOnlyEmptyFilter;
17
+ //# sourceMappingURL=useShowOnlyEmptyFilter.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useShowOnlyEmptyFilter.js","names":["useMemo","createFilterConditionFactory","createShowOnlyEmptyFilterCondition","useTableUtils","useShowOnlyEmptyFilter","isOn","columnNames","tableUtils","createColumnCondition"],"sources":["../src/useShowOnlyEmptyFilter.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport {\n createFilterConditionFactory,\n createShowOnlyEmptyFilterCondition,\n FilterConditionFactory,\n} from '@deephaven/jsapi-utils';\nimport useTableUtils from './useTableUtils';\n\n/**\n * Creates a filter condition factory that can be toggle on or off. If on, the\n * filter will match only values that are null or empty strings. If off, the\n * filter will match all values.\n * @param isOn Whether the filter is on or off\n * @param columnNames Column names to filter\n */\nexport function useShowOnlyEmptyFilter(\n isOn: boolean,\n columnNames: string | string[]\n): FilterConditionFactory {\n const tableUtils = useTableUtils();\n\n const createColumnCondition = useMemo(\n () => createShowOnlyEmptyFilterCondition(tableUtils, isOn),\n [isOn, tableUtils]\n );\n\n return useMemo(\n () => createFilterConditionFactory(columnNames, createColumnCondition),\n [columnNames, createColumnCondition]\n );\n}\n\nexport default useShowOnlyEmptyFilter;\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SACEC,4BAA4B,EAC5BC,kCAAkC,QAE7B,wBAAwB;AAAC,OACzBC,aAAa;AAEpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,sBAAsB,CACpCC,IAAa,EACbC,WAA8B,EACN;EACxB,IAAMC,UAAU,GAAGJ,aAAa,EAAE;EAElC,IAAMK,qBAAqB,GAAGR,OAAO,CACnC,MAAME,kCAAkC,CAACK,UAAU,EAAEF,IAAI,CAAC,EAC1D,CAACA,IAAI,EAAEE,UAAU,CAAC,CACnB;EAED,OAAOP,OAAO,CACZ,MAAMC,4BAA4B,CAACK,WAAW,EAAEE,qBAAqB,CAAC,EACtE,CAACF,WAAW,EAAEE,qBAAqB,CAAC,CACrC;AACH;AAEA,eAAeJ,sBAAsB"}
@@ -6,5 +6,6 @@ import type { Table, TreeTable } from '@deephaven/jsapi-types';
6
6
  * size.
7
7
  * @param table The table to check the size on.
8
8
  */
9
- export default function useTableSize(table: Table | TreeTable | null | undefined): number;
9
+ export declare function useTableSize(table: Table | TreeTable | null | undefined): number;
10
+ export default useTableSize;
10
11
  //# sourceMappingURL=useTableSize.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"useTableSize.d.ts","sourceRoot":"","sources":["../src/useTableSize.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI/D;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAClC,KAAK,EAAE,KAAK,GAAG,SAAS,GAAG,IAAI,GAAG,SAAS,GAC1C,MAAM,CAUR"}
1
+ {"version":3,"file":"useTableSize.d.ts","sourceRoot":"","sources":["../src/useTableSize.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI/D;;;;;;GAMG;AACH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,KAAK,GAAG,SAAS,GAAG,IAAI,GAAG,SAAS,GAC1C,MAAM,CAUR;AAED,eAAe,YAAY,CAAC"}
@@ -9,7 +9,7 @@ import useTableListener from "./useTableListener.js";
9
9
  * size.
10
10
  * @param table The table to check the size on.
11
11
  */
12
- export default function useTableSize(table) {
12
+ export function useTableSize(table) {
13
13
  var [, forceRerender] = useState(0);
14
14
  var dh = useApi();
15
15
  useTableListener(table, dh.Table.EVENT_SIZECHANGED, () => {
@@ -17,4 +17,5 @@ export default function useTableSize(table) {
17
17
  });
18
18
  return getSize(table);
19
19
  }
20
+ export default useTableSize;
20
21
  //# sourceMappingURL=useTableSize.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"useTableSize.js","names":["useState","useApi","getSize","useTableListener","useTableSize","table","forceRerender","dh","Table","EVENT_SIZECHANGED","i"],"sources":["../src/useTableSize.ts"],"sourcesContent":["import { useState } from 'react';\nimport { useApi } from '@deephaven/jsapi-bootstrap';\nimport type { Table, TreeTable } from '@deephaven/jsapi-types';\nimport { getSize } from '@deephaven/jsapi-utils';\nimport useTableListener from './useTableListener';\n\n/**\n * React hook that returns the size of a given table or zero if table is null or\n * undefined. The hook subscribes to the dh.Table.EVENT_SIZECHANGED event and\n * triggers a re-render if any events are received to ensure we have the current\n * size.\n * @param table The table to check the size on.\n */\nexport default function useTableSize(\n table: Table | TreeTable | null | undefined\n): number {\n const [, forceRerender] = useState(0);\n\n const dh = useApi();\n\n useTableListener(table, dh.Table.EVENT_SIZECHANGED, () => {\n forceRerender(i => i + 1);\n });\n\n return getSize(table);\n}\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,OAAO;AAChC,SAASC,MAAM,QAAQ,4BAA4B;AAEnD,SAASC,OAAO,QAAQ,wBAAwB;AAAC,OAC1CC,gBAAgB;AAEvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASC,YAAY,CAClCC,KAA2C,EACnC;EACR,IAAM,GAAGC,aAAa,CAAC,GAAGN,QAAQ,CAAC,CAAC,CAAC;EAErC,IAAMO,EAAE,GAAGN,MAAM,EAAE;EAEnBE,gBAAgB,CAACE,KAAK,EAAEE,EAAE,CAACC,KAAK,CAACC,iBAAiB,EAAE,MAAM;IACxDH,aAAa,CAACI,CAAC,IAAIA,CAAC,GAAG,CAAC,CAAC;EAC3B,CAAC,CAAC;EAEF,OAAOR,OAAO,CAACG,KAAK,CAAC;AACvB"}
1
+ {"version":3,"file":"useTableSize.js","names":["useState","useApi","getSize","useTableListener","useTableSize","table","forceRerender","dh","Table","EVENT_SIZECHANGED","i"],"sources":["../src/useTableSize.ts"],"sourcesContent":["import { useState } from 'react';\nimport { useApi } from '@deephaven/jsapi-bootstrap';\nimport type { Table, TreeTable } from '@deephaven/jsapi-types';\nimport { getSize } from '@deephaven/jsapi-utils';\nimport useTableListener from './useTableListener';\n\n/**\n * React hook that returns the size of a given table or zero if table is null or\n * undefined. The hook subscribes to the dh.Table.EVENT_SIZECHANGED event and\n * triggers a re-render if any events are received to ensure we have the current\n * size.\n * @param table The table to check the size on.\n */\nexport function useTableSize(\n table: Table | TreeTable | null | undefined\n): number {\n const [, forceRerender] = useState(0);\n\n const dh = useApi();\n\n useTableListener(table, dh.Table.EVENT_SIZECHANGED, () => {\n forceRerender(i => i + 1);\n });\n\n return getSize(table);\n}\n\nexport default useTableSize;\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,OAAO;AAChC,SAASC,MAAM,QAAQ,4BAA4B;AAEnD,SAASC,OAAO,QAAQ,wBAAwB;AAAC,OAC1CC,gBAAgB;AAEvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,YAAY,CAC1BC,KAA2C,EACnC;EACR,IAAM,GAAGC,aAAa,CAAC,GAAGN,QAAQ,CAAC,CAAC,CAAC;EAErC,IAAMO,EAAE,GAAGN,MAAM,EAAE;EAEnBE,gBAAgB,CAACE,KAAK,EAAEE,EAAE,CAACC,KAAK,CAACC,iBAAiB,EAAE,MAAM;IACxDH,aAAa,CAACI,CAAC,IAAIA,CAAC,GAAG,CAAC,CAAC;EAC3B,CAAC,CAAC;EAEF,OAAOR,OAAO,CAACG,KAAK,CAAC;AACvB;AAEA,eAAeD,YAAY"}
@@ -2,5 +2,6 @@ import { TableUtils } from '@deephaven/jsapi-utils';
2
2
  /**
3
3
  * Get a `TableUtils` instance using `dh` api from the current context.
4
4
  */
5
- export default function useTableUtils(): TableUtils;
5
+ export declare function useTableUtils(): TableUtils;
6
+ export default useTableUtils;
6
7
  //# sourceMappingURL=useTableUtils.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"useTableUtils.d.ts","sourceRoot":"","sources":["../src/useTableUtils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,IAAI,UAAU,CAGlD"}
1
+ {"version":3,"file":"useTableUtils.d.ts","sourceRoot":"","sources":["../src/useTableUtils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD;;GAEG;AACH,wBAAgB,aAAa,IAAI,UAAU,CAG1C;AAED,eAAe,aAAa,CAAC"}
@@ -5,8 +5,9 @@ import { TableUtils } from '@deephaven/jsapi-utils';
5
5
  /**
6
6
  * Get a `TableUtils` instance using `dh` api from the current context.
7
7
  */
8
- export default function useTableUtils() {
8
+ export function useTableUtils() {
9
9
  var dh = useApi();
10
10
  return useMemo(() => new TableUtils(dh), [dh]);
11
11
  }
12
+ export default useTableUtils;
12
13
  //# sourceMappingURL=useTableUtils.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"useTableUtils.js","names":["useMemo","useApi","TableUtils","useTableUtils","dh"],"sources":["../src/useTableUtils.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { useApi } from '@deephaven/jsapi-bootstrap';\nimport { TableUtils } from '@deephaven/jsapi-utils';\n\n/**\n * Get a `TableUtils` instance using `dh` api from the current context.\n */\nexport default function useTableUtils(): TableUtils {\n const dh = useApi();\n return useMemo(() => new TableUtils(dh), [dh]);\n}\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SAASC,MAAM,QAAQ,4BAA4B;AACnD,SAASC,UAAU,QAAQ,wBAAwB;;AAEnD;AACA;AACA;AACA,eAAe,SAASC,aAAa,GAAe;EAClD,IAAMC,EAAE,GAAGH,MAAM,EAAE;EACnB,OAAOD,OAAO,CAAC,MAAM,IAAIE,UAAU,CAACE,EAAE,CAAC,EAAE,CAACA,EAAE,CAAC,CAAC;AAChD"}
1
+ {"version":3,"file":"useTableUtils.js","names":["useMemo","useApi","TableUtils","useTableUtils","dh"],"sources":["../src/useTableUtils.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { useApi } from '@deephaven/jsapi-bootstrap';\nimport { TableUtils } from '@deephaven/jsapi-utils';\n\n/**\n * Get a `TableUtils` instance using `dh` api from the current context.\n */\nexport function useTableUtils(): TableUtils {\n const dh = useApi();\n return useMemo(() => new TableUtils(dh), [dh]);\n}\n\nexport default useTableUtils;\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SAASC,MAAM,QAAQ,4BAA4B;AACnD,SAASC,UAAU,QAAQ,wBAAwB;;AAEnD;AACA;AACA;AACA,OAAO,SAASC,aAAa,GAAe;EAC1C,IAAMC,EAAE,GAAGH,MAAM,EAAE;EACnB,OAAOD,OAAO,CAAC,MAAM,IAAIE,UAAU,CAACE,EAAE,CAAC,EAAE,CAACA,EAAE,CAAC,CAAC;AAChD;AAEA,eAAeD,aAAa"}
@@ -0,0 +1,10 @@
1
+ import { FilterConditionFactory } from '@deephaven/jsapi-utils';
2
+ /**
3
+ * Create a filter condition factory for a filter operator that matches the given value.
4
+ * @param columnNames Column names to compare value to
5
+ * @param value Value to match
6
+ * @param operator Operator to use for matching
7
+ */
8
+ export declare function useValueFilter(columnNames: string | string[], value: string, operator: 'contains' | 'eq' | 'notEq'): FilterConditionFactory;
9
+ export default useValueFilter;
10
+ //# sourceMappingURL=useValueFilter.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useValueFilter.d.ts","sourceRoot":"","sources":["../src/useValueFilter.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,sBAAsB,EACvB,MAAM,wBAAwB,CAAC;AAGhC;;;;;GAKG;AACH,wBAAgB,cAAc,CAC5B,WAAW,EAAE,MAAM,GAAG,MAAM,EAAE,EAC9B,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,UAAU,GAAG,IAAI,GAAG,OAAO,GACpC,sBAAsB,CAOxB;AAED,eAAe,cAAc,CAAC"}
@@ -0,0 +1,15 @@
1
+ import { useMemo } from 'react';
2
+ import { createValueFilter } from '@deephaven/jsapi-utils';
3
+ import useTableUtils from "./useTableUtils.js";
4
+ /**
5
+ * Create a filter condition factory for a filter operator that matches the given value.
6
+ * @param columnNames Column names to compare value to
7
+ * @param value Value to match
8
+ * @param operator Operator to use for matching
9
+ */
10
+ export function useValueFilter(columnNames, value, operator) {
11
+ var tableUtils = useTableUtils();
12
+ return useMemo(() => createValueFilter(tableUtils, columnNames, value, operator), [columnNames, operator, tableUtils, value]);
13
+ }
14
+ export default useValueFilter;
15
+ //# sourceMappingURL=useValueFilter.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useValueFilter.js","names":["useMemo","createValueFilter","useTableUtils","useValueFilter","columnNames","value","operator","tableUtils"],"sources":["../src/useValueFilter.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport {\n createValueFilter,\n FilterConditionFactory,\n} from '@deephaven/jsapi-utils';\nimport useTableUtils from './useTableUtils';\n\n/**\n * Create a filter condition factory for a filter operator that matches the given value.\n * @param columnNames Column names to compare value to\n * @param value Value to match\n * @param operator Operator to use for matching\n */\nexport function useValueFilter(\n columnNames: string | string[],\n value: string,\n operator: 'contains' | 'eq' | 'notEq'\n): FilterConditionFactory {\n const tableUtils = useTableUtils();\n\n return useMemo(\n () => createValueFilter(tableUtils, columnNames, value, operator),\n [columnNames, operator, tableUtils, value]\n );\n}\n\nexport default useValueFilter;\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SACEC,iBAAiB,QAEZ,wBAAwB;AAAC,OACzBC,aAAa;AAEpB;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,cAAc,CAC5BC,WAA8B,EAC9BC,KAAa,EACbC,QAAqC,EACb;EACxB,IAAMC,UAAU,GAAGL,aAAa,EAAE;EAElC,OAAOF,OAAO,CACZ,MAAMC,iBAAiB,CAACM,UAAU,EAAEH,WAAW,EAAEC,KAAK,EAAEC,QAAQ,CAAC,EACjE,CAACF,WAAW,EAAEE,QAAQ,EAAEC,UAAU,EAAEF,KAAK,CAAC,CAC3C;AACH;AAEA,eAAeF,cAAc"}
@@ -1,15 +1,18 @@
1
- import { ListData } from '@react-stately/data';
2
1
  import type { FilterCondition, Table, TreeTable } from '@deephaven/jsapi-types';
3
- import { KeyedItem, RowDeserializer } from '@deephaven/jsapi-utils';
2
+ import { RowDeserializer } from '@deephaven/jsapi-utils';
3
+ import { WindowedListData } from '@deephaven/react-hooks';
4
+ import { KeyedItem } from '@deephaven/utils';
4
5
  export interface UseViewportDataProps<TItem, TTable extends Table | TreeTable> {
5
6
  table: TTable | null;
7
+ itemHeight?: number;
8
+ scrollDebounce?: number;
6
9
  viewportSize?: number;
7
10
  viewportPadding?: number;
8
11
  deserializeRow?: RowDeserializer<TItem>;
9
12
  }
10
13
  export interface UseViewportDataResult<TItem, TTable extends Table | TreeTable> {
11
14
  /** Manages deserialized row items associated with a DH Table */
12
- viewportData: ListData<KeyedItem<TItem>>;
15
+ viewportData: WindowedListData<KeyedItem<TItem>>;
13
16
  /** Size of the underlying Table */
14
17
  size: number;
15
18
  table: TTable | null;
@@ -17,6 +20,8 @@ export interface UseViewportDataResult<TItem, TTable extends Table | TreeTable>
17
20
  applyFiltersAndRefresh: (filters: FilterCondition[]) => void;
18
21
  /** Set the viewport of the Table */
19
22
  setViewport: (firstRow: number) => void;
23
+ /** Handler for scroll events to update viewport */
24
+ onScroll: (event: Event) => void;
20
25
  }
21
26
  /**
22
27
  * Sets up state management for windowed Table viewports. Returns a ListData
@@ -27,12 +32,11 @@ export interface UseViewportDataResult<TItem, TTable extends Table | TreeTable>
27
32
  * source table. This is intended for "human" sized tables such as those used in
28
33
  * admin panels. This is not suitable for "machine" scale with millions+ rows.
29
34
  * @param table
35
+ * @param itemHeight
30
36
  * @param viewportSize
31
37
  * @param viewportPadding
32
- * @returns An object for managing Table viewport state. Note that the returned
33
- * object changes on every render due to the `viewportData` not being memoized.
34
- * This is due to the underlying React Stately `useListData` implementation that
35
- * also changes its returned object on every render.
38
+ * @returns An object for managing Table viewport state.
36
39
  */
37
- export default function useViewportData<TItem, TTable extends Table | TreeTable>({ table, viewportSize, viewportPadding, deserializeRow, }: UseViewportDataProps<TItem, TTable>): UseViewportDataResult<TItem, TTable>;
40
+ export declare function useViewportData<TItem, TTable extends Table | TreeTable>({ table, itemHeight, scrollDebounce, viewportSize, viewportPadding, deserializeRow, }: UseViewportDataProps<TItem, TTable>): UseViewportDataResult<TItem, TTable>;
41
+ export default useViewportData;
38
42
  //# sourceMappingURL=useViewportData.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"useViewportData.d.ts","sourceRoot":"","sources":["../src/useViewportData.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAChF,OAAO,EACL,SAAS,EACT,eAAe,EAIhB,MAAM,wBAAwB,CAAC;AAOhC,MAAM,WAAW,oBAAoB,CAAC,KAAK,EAAE,MAAM,SAAS,KAAK,GAAG,SAAS;IAC3E,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,CAAC;CACzC;AAED,MAAM,WAAW,qBAAqB,CACpC,KAAK,EACL,MAAM,SAAS,KAAK,GAAG,SAAS;IAEhC,gEAAgE;IAChE,YAAY,EAAE,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IACzC,mCAAmC;IACnC,IAAI,EAAE,MAAM,CAAC;IAEb,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,0CAA0C;IAC1C,sBAAsB,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IAC7D,oCAAoC;IACpC,WAAW,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CACrC,KAAK,EACL,MAAM,SAAS,KAAK,GAAG,SAAS,EAChC,EACA,KAAK,EACL,YAAiB,EACjB,eAAoB,EACpB,cAAuC,GACxC,EAAE,oBAAoB,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,qBAAqB,CAAC,KAAK,EAAE,MAAM,CAAC,CA0C5E"}
1
+ {"version":3,"file":"useViewportData.d.ts","sourceRoot":"","sources":["../src/useViewportData.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAChF,OAAO,EACL,eAAe,EAIhB,MAAM,wBAAwB,CAAC;AAGhC,OAAO,EAEL,gBAAgB,EACjB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,SAAS,EAAsB,MAAM,kBAAkB,CAAC;AAQjE,MAAM,WAAW,oBAAoB,CAAC,KAAK,EAAE,MAAM,SAAS,KAAK,GAAG,SAAS;IAC3E,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,CAAC;CACzC;AAED,MAAM,WAAW,qBAAqB,CACpC,KAAK,EACL,MAAM,SAAS,KAAK,GAAG,SAAS;IAEhC,gEAAgE;IAChE,YAAY,EAAE,gBAAgB,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IACjD,mCAAmC;IACnC,IAAI,EAAE,MAAM,CAAC;IAEb,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,0CAA0C;IAC1C,sBAAsB,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IAC7D,oCAAoC;IACpC,WAAW,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,mDAAmD;IACnD,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,SAAS,KAAK,GAAG,SAAS,EAAE,EACvE,KAAK,EACL,UAAc,EACd,cAAmC,EACnC,YAAiB,EACjB,eAAoB,EACpB,cAAuC,GACxC,EAAE,oBAAoB,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,qBAAqB,CAAC,KAAK,EAAE,MAAM,CAAC,CAkE5E;AAED,eAAe,eAAe,CAAC"}