@workday/canvas-kit-react 9.0.0-alpha.418-next.20 → 9.0.0-alpha.420-next.22
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.
- package/breadcrumbs/lib/BreadcrumbsItem.tsx +1 -1
- package/collection/index.ts +2 -0
- package/collection/lib/ListBox.tsx +12 -10
- package/collection/lib/useBaseListModel.tsx +6 -4
- package/collection/lib/useCursorListModel.tsx +1 -1
- package/collection/lib/useListActiveDescendant.ts +24 -0
- package/collection/lib/useListItemAllowChildStrings.ts +2 -1
- package/collection/lib/useListItemRegister.tsx +10 -3
- package/collection/lib/useListItemSelect.tsx +1 -1
- package/collection/lib/useListKeyboardHandler.ts +28 -0
- package/collection/lib/useListLoader.ts +116 -54
- package/collection/lib/useOverflowListItemMeasure.tsx +2 -2
- package/collection/lib/useOverflowListMeasure.ts +11 -13
- package/collection/lib/useOverflowListTarget.tsx +28 -30
- package/collection/lib/useSelectionListModel.tsx +1 -0
- package/combobox/LICENSE +52 -0
- package/combobox/README.md +7 -0
- package/combobox/index.ts +8 -0
- package/combobox/lib/Combobox.tsx +32 -0
- package/combobox/lib/ComboboxCard.tsx +33 -0
- package/combobox/lib/ComboboxInput.tsx +104 -0
- package/combobox/lib/ComboboxMenu.tsx +67 -0
- package/combobox/lib/ComboboxMenuItem.tsx +74 -0
- package/combobox/lib/ComboboxMenuList.tsx +45 -0
- package/combobox/lib/useComboboxInputOpenWithArrowKeys.ts +21 -0
- package/combobox/lib/useComboboxLoader.ts +72 -0
- package/combobox/lib/useComboboxModel.tsx +85 -0
- package/combobox/package.json +6 -0
- package/common/lib/utils/components.ts +20 -16
- package/common/lib/utils/models.ts +2 -2
- package/dist/commonjs/action-bar/lib/ActionBar.d.ts +2 -2
- package/dist/commonjs/action-bar/lib/ActionBarList.d.ts +1 -1
- package/dist/commonjs/action-bar/lib/useActionBarModel.d.ts +2 -2
- package/dist/commonjs/breadcrumbs/lib/Breadcrumbs.d.ts +2 -2
- package/dist/commonjs/breadcrumbs/lib/BreadcrumbsMenu.d.ts +1 -1
- package/dist/commonjs/breadcrumbs/lib/hooks/useBreadcrumbsModel.d.ts +2 -2
- package/dist/commonjs/collection/index.d.ts +2 -0
- package/dist/commonjs/collection/index.d.ts.map +1 -1
- package/dist/commonjs/collection/index.js +2 -0
- package/dist/commonjs/collection/lib/ListBox.d.ts +7 -6
- package/dist/commonjs/collection/lib/ListBox.d.ts.map +1 -1
- package/dist/commonjs/collection/lib/ListBox.js +5 -3
- package/dist/commonjs/collection/lib/useBaseListModel.d.ts.map +1 -1
- package/dist/commonjs/collection/lib/useBaseListModel.js +4 -4
- package/dist/commonjs/collection/lib/useCursorListModel.d.ts +0 -34
- package/dist/commonjs/collection/lib/useCursorListModel.d.ts.map +1 -1
- package/dist/commonjs/collection/lib/useCursorListModel.js +1 -1
- package/dist/commonjs/collection/lib/useListActiveDescendant.d.ts +68 -0
- package/dist/commonjs/collection/lib/useListActiveDescendant.d.ts.map +1 -0
- package/dist/commonjs/collection/lib/useListActiveDescendant.js +25 -0
- package/dist/commonjs/collection/lib/useListItemAllowChildStrings.d.ts +2 -1
- package/dist/commonjs/collection/lib/useListItemAllowChildStrings.d.ts.map +1 -1
- package/dist/commonjs/collection/lib/useListItemAllowChildStrings.js +2 -1
- package/dist/commonjs/collection/lib/useListItemRegister.d.ts.map +1 -1
- package/dist/commonjs/collection/lib/useListItemRegister.js +5 -1
- package/dist/commonjs/collection/lib/useListKeyboardHandler.d.ts +66 -0
- package/dist/commonjs/collection/lib/useListKeyboardHandler.d.ts.map +1 -0
- package/dist/commonjs/collection/lib/useListKeyboardHandler.js +27 -0
- package/dist/commonjs/collection/lib/useListLoader.d.ts +46 -7
- package/dist/commonjs/collection/lib/useListLoader.d.ts.map +1 -1
- package/dist/commonjs/collection/lib/useListLoader.js +61 -35
- package/dist/commonjs/collection/lib/useOverflowListMeasure.d.ts +1 -1
- package/dist/commonjs/collection/lib/useOverflowListMeasure.d.ts.map +1 -1
- package/dist/commonjs/collection/lib/useOverflowListTarget.d.ts +5 -2
- package/dist/commonjs/collection/lib/useOverflowListTarget.d.ts.map +1 -1
- package/dist/commonjs/collection/lib/useOverflowListTarget.js +1 -1
- package/dist/commonjs/collection/lib/useSelectionListModel.d.ts.map +1 -1
- package/dist/commonjs/collection/lib/useSelectionListModel.js +1 -0
- package/dist/commonjs/combobox/index.d.ts +9 -0
- package/dist/commonjs/combobox/index.d.ts.map +1 -0
- package/dist/commonjs/combobox/index.js +19 -0
- package/dist/commonjs/combobox/lib/Combobox.d.ts +2075 -0
- package/dist/commonjs/combobox/lib/Combobox.d.ts.map +1 -0
- package/dist/commonjs/combobox/lib/Combobox.js +29 -0
- package/dist/commonjs/combobox/lib/ComboboxCard.d.ts +166 -0
- package/dist/commonjs/combobox/lib/ComboboxCard.d.ts.map +1 -0
- package/dist/commonjs/combobox/lib/ComboboxCard.js +25 -0
- package/dist/commonjs/combobox/lib/ComboboxInput.d.ts +186 -0
- package/dist/commonjs/combobox/lib/ComboboxInput.d.ts.map +1 -0
- package/dist/commonjs/combobox/lib/ComboboxInput.js +84 -0
- package/dist/commonjs/combobox/lib/ComboboxMenu.d.ts +428 -0
- package/dist/commonjs/combobox/lib/ComboboxMenu.d.ts.map +1 -0
- package/dist/commonjs/combobox/lib/ComboboxMenu.js +63 -0
- package/dist/commonjs/combobox/lib/ComboboxMenuItem.d.ts +178 -0
- package/dist/commonjs/combobox/lib/ComboboxMenuItem.d.ts.map +1 -0
- package/dist/commonjs/combobox/lib/ComboboxMenuItem.js +50 -0
- package/dist/commonjs/combobox/lib/ComboboxMenuList.d.ts +164 -0
- package/dist/commonjs/combobox/lib/ComboboxMenuList.d.ts.map +1 -0
- package/dist/commonjs/combobox/lib/ComboboxMenuList.js +31 -0
- package/dist/commonjs/combobox/lib/useComboboxInputOpenWithArrowKeys.d.ts +84 -0
- package/dist/commonjs/combobox/lib/useComboboxInputOpenWithArrowKeys.d.ts.map +1 -0
- package/dist/commonjs/combobox/lib/useComboboxInputOpenWithArrowKeys.js +20 -0
- package/dist/commonjs/combobox/lib/useComboboxLoader.d.ts +28 -0
- package/dist/commonjs/combobox/lib/useComboboxLoader.d.ts.map +1 -0
- package/dist/commonjs/combobox/lib/useComboboxLoader.js +65 -0
- package/dist/commonjs/combobox/lib/useComboboxModel.d.ts +1998 -0
- package/dist/commonjs/combobox/lib/useComboboxModel.d.ts.map +1 -0
- package/dist/commonjs/combobox/lib/useComboboxModel.js +82 -0
- package/dist/commonjs/common/lib/utils/components.d.ts +9 -23
- package/dist/commonjs/common/lib/utils/components.d.ts.map +1 -1
- package/dist/commonjs/common/lib/utils/components.js +6 -2
- package/dist/commonjs/common/lib/utils/models.js +2 -2
- package/dist/commonjs/index.d.ts +1 -0
- package/dist/commonjs/index.d.ts.map +1 -1
- package/dist/commonjs/index.js +1 -0
- package/dist/commonjs/menu/index.d.ts +1 -1
- package/dist/commonjs/menu/index.d.ts.map +1 -1
- package/dist/commonjs/menu/index.js +2 -1
- package/dist/commonjs/menu/lib/Menu.d.ts +7 -5
- package/dist/commonjs/menu/lib/Menu.d.ts.map +1 -1
- package/dist/commonjs/menu/lib/Menu.js +6 -4
- package/dist/commonjs/menu/lib/MenuContextTarget.d.ts +2 -2
- package/dist/commonjs/menu/lib/MenuItem.d.ts +7 -1
- package/dist/commonjs/menu/lib/MenuItem.d.ts.map +1 -1
- package/dist/commonjs/menu/lib/MenuItem.js +9 -11
- package/dist/commonjs/menu/lib/MenuList.d.ts +3 -3
- package/dist/commonjs/menu/lib/MenuList.d.ts.map +1 -1
- package/dist/commonjs/menu/lib/MenuList.js +3 -2
- package/dist/commonjs/menu/lib/MenuPopper.d.ts +1 -1
- package/dist/commonjs/menu/lib/MenuTarget.d.ts +2 -2
- package/dist/commonjs/menu/lib/useMenuModel.d.ts +2 -2
- package/dist/commonjs/menu/lib/useMenuModel.d.ts.map +1 -1
- package/dist/commonjs/menu/lib/useMenuModel.js +3 -5
- package/dist/commonjs/popup/lib/hooks/usePopupPopper.d.ts +1 -1
- package/dist/commonjs/popup/lib/hooks/usePopupTarget.d.ts +1 -1
- package/dist/commonjs/popup/lib/hooks/usePopupTargetContext.d.ts +1 -1
- package/dist/commonjs/tabs/lib/Tabs.d.ts +18 -120
- package/dist/commonjs/tabs/lib/Tabs.d.ts.map +1 -1
- package/dist/commonjs/tabs/lib/TabsItem.d.ts +0 -1
- package/dist/commonjs/tabs/lib/TabsItem.d.ts.map +1 -1
- package/dist/commonjs/tabs/lib/TabsItem.js +0 -1
- package/dist/commonjs/tabs/lib/TabsList.d.ts +1 -1
- package/dist/commonjs/tabs/lib/TabsMenuPopper.d.ts +1 -1
- package/dist/commonjs/tabs/lib/TabsPanel.d.ts.map +1 -1
- package/dist/commonjs/tabs/lib/useTabsModel.d.ts +8 -20
- package/dist/commonjs/tabs/lib/useTabsModel.d.ts.map +1 -1
- package/dist/commonjs/tabs/lib/useTabsModel.js +1 -0
- package/dist/commonjs/text-input/index.d.ts +1 -1
- package/dist/commonjs/text-input/index.d.ts.map +1 -1
- package/dist/commonjs/text-input/index.js +2 -1
- package/dist/commonjs/text-input/lib/InputGroup.d.ts +94 -9
- package/dist/commonjs/text-input/lib/InputGroup.d.ts.map +1 -1
- package/dist/commonjs/text-input/lib/InputGroup.js +129 -63
- package/dist/es6/action-bar/lib/ActionBar.d.ts +2 -2
- package/dist/es6/action-bar/lib/ActionBarList.d.ts +1 -1
- package/dist/es6/action-bar/lib/useActionBarModel.d.ts +2 -2
- package/dist/es6/breadcrumbs/lib/Breadcrumbs.d.ts +2 -2
- package/dist/es6/breadcrumbs/lib/BreadcrumbsMenu.d.ts +1 -1
- package/dist/es6/breadcrumbs/lib/hooks/useBreadcrumbsModel.d.ts +2 -2
- package/dist/es6/collection/index.d.ts +2 -0
- package/dist/es6/collection/index.d.ts.map +1 -1
- package/dist/es6/collection/index.js +2 -0
- package/dist/es6/collection/lib/ListBox.d.ts +7 -6
- package/dist/es6/collection/lib/ListBox.d.ts.map +1 -1
- package/dist/es6/collection/lib/ListBox.js +6 -4
- package/dist/es6/collection/lib/useBaseListModel.d.ts.map +1 -1
- package/dist/es6/collection/lib/useBaseListModel.js +4 -4
- package/dist/es6/collection/lib/useCursorListModel.d.ts +0 -34
- package/dist/es6/collection/lib/useCursorListModel.d.ts.map +1 -1
- package/dist/es6/collection/lib/useCursorListModel.js +1 -1
- package/dist/es6/collection/lib/useListActiveDescendant.d.ts +68 -0
- package/dist/es6/collection/lib/useListActiveDescendant.d.ts.map +1 -0
- package/dist/es6/collection/lib/useListActiveDescendant.js +22 -0
- package/dist/es6/collection/lib/useListItemAllowChildStrings.d.ts +2 -1
- package/dist/es6/collection/lib/useListItemAllowChildStrings.d.ts.map +1 -1
- package/dist/es6/collection/lib/useListItemAllowChildStrings.js +2 -1
- package/dist/es6/collection/lib/useListItemRegister.d.ts.map +1 -1
- package/dist/es6/collection/lib/useListItemRegister.js +5 -1
- package/dist/es6/collection/lib/useListKeyboardHandler.d.ts +66 -0
- package/dist/es6/collection/lib/useListKeyboardHandler.d.ts.map +1 -0
- package/dist/es6/collection/lib/useListKeyboardHandler.js +24 -0
- package/dist/es6/collection/lib/useListLoader.d.ts +46 -7
- package/dist/es6/collection/lib/useListLoader.d.ts.map +1 -1
- package/dist/es6/collection/lib/useListLoader.js +61 -35
- package/dist/es6/collection/lib/useOverflowListMeasure.d.ts +1 -1
- package/dist/es6/collection/lib/useOverflowListMeasure.d.ts.map +1 -1
- package/dist/es6/collection/lib/useOverflowListTarget.d.ts +5 -2
- package/dist/es6/collection/lib/useOverflowListTarget.d.ts.map +1 -1
- package/dist/es6/collection/lib/useOverflowListTarget.js +1 -1
- package/dist/es6/collection/lib/useSelectionListModel.d.ts.map +1 -1
- package/dist/es6/collection/lib/useSelectionListModel.js +1 -0
- package/dist/es6/combobox/index.d.ts +9 -0
- package/dist/es6/combobox/index.d.ts.map +1 -0
- package/dist/es6/combobox/index.js +8 -0
- package/dist/es6/combobox/lib/Combobox.d.ts +2075 -0
- package/dist/es6/combobox/lib/Combobox.d.ts.map +1 -0
- package/dist/es6/combobox/lib/Combobox.js +23 -0
- package/dist/es6/combobox/lib/ComboboxCard.d.ts +166 -0
- package/dist/es6/combobox/lib/ComboboxCard.d.ts.map +1 -0
- package/dist/es6/combobox/lib/ComboboxCard.js +19 -0
- package/dist/es6/combobox/lib/ComboboxInput.d.ts +186 -0
- package/dist/es6/combobox/lib/ComboboxInput.d.ts.map +1 -0
- package/dist/es6/combobox/lib/ComboboxInput.js +78 -0
- package/dist/es6/combobox/lib/ComboboxMenu.d.ts +428 -0
- package/dist/es6/combobox/lib/ComboboxMenu.d.ts.map +1 -0
- package/dist/es6/combobox/lib/ComboboxMenu.js +57 -0
- package/dist/es6/combobox/lib/ComboboxMenuItem.d.ts +178 -0
- package/dist/es6/combobox/lib/ComboboxMenuItem.d.ts.map +1 -0
- package/dist/es6/combobox/lib/ComboboxMenuItem.js +44 -0
- package/dist/es6/combobox/lib/ComboboxMenuList.d.ts +164 -0
- package/dist/es6/combobox/lib/ComboboxMenuList.d.ts.map +1 -0
- package/dist/es6/combobox/lib/ComboboxMenuList.js +25 -0
- package/dist/es6/combobox/lib/useComboboxInputOpenWithArrowKeys.d.ts +84 -0
- package/dist/es6/combobox/lib/useComboboxInputOpenWithArrowKeys.d.ts.map +1 -0
- package/dist/es6/combobox/lib/useComboboxInputOpenWithArrowKeys.js +17 -0
- package/dist/es6/combobox/lib/useComboboxLoader.d.ts +28 -0
- package/dist/es6/combobox/lib/useComboboxLoader.d.ts.map +1 -0
- package/dist/es6/combobox/lib/useComboboxLoader.js +58 -0
- package/dist/es6/combobox/lib/useComboboxModel.d.ts +1998 -0
- package/dist/es6/combobox/lib/useComboboxModel.d.ts.map +1 -0
- package/dist/es6/combobox/lib/useComboboxModel.js +76 -0
- package/dist/es6/common/lib/utils/components.d.ts +9 -23
- package/dist/es6/common/lib/utils/components.d.ts.map +1 -1
- package/dist/es6/common/lib/utils/components.js +6 -2
- package/dist/es6/common/lib/utils/models.js +2 -2
- package/dist/es6/index.d.ts +1 -0
- package/dist/es6/index.d.ts.map +1 -1
- package/dist/es6/index.js +1 -0
- package/dist/es6/menu/index.d.ts +1 -1
- package/dist/es6/menu/index.d.ts.map +1 -1
- package/dist/es6/menu/index.js +1 -1
- package/dist/es6/menu/lib/Menu.d.ts +7 -5
- package/dist/es6/menu/lib/Menu.d.ts.map +1 -1
- package/dist/es6/menu/lib/Menu.js +6 -4
- package/dist/es6/menu/lib/MenuContextTarget.d.ts +2 -2
- package/dist/es6/menu/lib/MenuItem.d.ts +7 -1
- package/dist/es6/menu/lib/MenuItem.d.ts.map +1 -1
- package/dist/es6/menu/lib/MenuItem.js +8 -10
- package/dist/es6/menu/lib/MenuList.d.ts +3 -3
- package/dist/es6/menu/lib/MenuList.d.ts.map +1 -1
- package/dist/es6/menu/lib/MenuList.js +4 -3
- package/dist/es6/menu/lib/MenuPopper.d.ts +1 -1
- package/dist/es6/menu/lib/MenuTarget.d.ts +2 -2
- package/dist/es6/menu/lib/useMenuModel.d.ts +2 -2
- package/dist/es6/menu/lib/useMenuModel.d.ts.map +1 -1
- package/dist/es6/menu/lib/useMenuModel.js +4 -6
- package/dist/es6/popup/lib/hooks/usePopupPopper.d.ts +1 -1
- package/dist/es6/popup/lib/hooks/usePopupTarget.d.ts +1 -1
- package/dist/es6/popup/lib/hooks/usePopupTargetContext.d.ts +1 -1
- package/dist/es6/tabs/lib/Tabs.d.ts +18 -120
- package/dist/es6/tabs/lib/Tabs.d.ts.map +1 -1
- package/dist/es6/tabs/lib/TabsItem.d.ts +0 -1
- package/dist/es6/tabs/lib/TabsItem.d.ts.map +1 -1
- package/dist/es6/tabs/lib/TabsItem.js +0 -1
- package/dist/es6/tabs/lib/TabsList.d.ts +1 -1
- package/dist/es6/tabs/lib/TabsMenuPopper.d.ts +1 -1
- package/dist/es6/tabs/lib/TabsPanel.d.ts.map +1 -1
- package/dist/es6/tabs/lib/useTabsModel.d.ts +8 -20
- package/dist/es6/tabs/lib/useTabsModel.d.ts.map +1 -1
- package/dist/es6/tabs/lib/useTabsModel.js +1 -0
- package/dist/es6/text-input/index.d.ts +1 -1
- package/dist/es6/text-input/index.d.ts.map +1 -1
- package/dist/es6/text-input/index.js +1 -1
- package/dist/es6/text-input/lib/InputGroup.d.ts +94 -9
- package/dist/es6/text-input/lib/InputGroup.d.ts.map +1 -1
- package/dist/es6/text-input/lib/InputGroup.js +129 -63
- package/index.ts +1 -0
- package/menu/index.ts +1 -1
- package/menu/lib/Menu.tsx +6 -4
- package/menu/lib/MenuItem.tsx +9 -12
- package/menu/lib/MenuList.tsx +16 -10
- package/menu/lib/useMenuModel.tsx +4 -7
- package/modal/lib/hooks/useModalHeading.ts +2 -2
- package/package.json +3 -3
- package/tabs/lib/TabsItem.tsx +10 -13
- package/tabs/lib/TabsPanel.tsx +1 -5
- package/tabs/lib/useTabsModel.tsx +1 -0
- package/text-input/index.ts +1 -1
- package/text-input/lib/InputGroup.tsx +177 -95
|
@@ -2,10 +2,10 @@ import React from 'react';
|
|
|
2
2
|
import { useVirtual } from './react-virtual';
|
|
3
3
|
import { useUniqueId, createModelHook } from '@workday/canvas-kit-react/common';
|
|
4
4
|
export const defaultGetId = (item) => {
|
|
5
|
-
return item.id || '';
|
|
5
|
+
return typeof item === 'string' ? item : item.id || '';
|
|
6
6
|
};
|
|
7
7
|
export const defaultGetTextValue = (item) => {
|
|
8
|
-
return item.text || '';
|
|
8
|
+
return typeof item === 'string' ? item : item.text || '';
|
|
9
9
|
};
|
|
10
10
|
// interface Collection<T> {
|
|
11
11
|
// getKeys(): string[];
|
|
@@ -54,13 +54,13 @@ export const useBaseListModel = createModelHook({
|
|
|
54
54
|
* JSX, the list will create an internal array of items where `id` is the only property and the
|
|
55
55
|
* default `getId` will return the desired result.
|
|
56
56
|
*/
|
|
57
|
-
getId: (item) => item.id,
|
|
57
|
+
getId: (item) => typeof item === 'string' ? item : item === undefined ? '' : item.id,
|
|
58
58
|
/**
|
|
59
59
|
* Optional function to return the text representation of an item. If not provided, the default
|
|
60
60
|
* function will return the `text` property of the object of each item or an empty string if
|
|
61
61
|
* there is no `text` property. If you did not provide `items`, do not override this function.
|
|
62
62
|
*/
|
|
63
|
-
getTextValue: (item) => (item.text || ''),
|
|
63
|
+
getTextValue: (item) => (typeof item === 'string' ? item : item === undefined ? '' : item.text || ''),
|
|
64
64
|
/**
|
|
65
65
|
* Array of all ids which are currently disabled. This is used for navigation to skip over items
|
|
66
66
|
* which are not focusable.
|
|
@@ -139,23 +139,6 @@ export declare const useCursorListModel: (<TT_Special_Generic>(config?: (Partial
|
|
|
139
139
|
pageSize: number;
|
|
140
140
|
id: string;
|
|
141
141
|
getId: (item: any) => string;
|
|
142
|
-
/**
|
|
143
|
-
* Factory function that does type checking to create navigation managers. Navigation managers
|
|
144
|
-
* are expected to handle all methods of a grid. If your use-case isn't meant to handle a grid,
|
|
145
|
-
* pick one of the existing navigation managers and override the methods you wish to implement.
|
|
146
|
-
*
|
|
147
|
-
* For example,
|
|
148
|
-
* ```tsx
|
|
149
|
-
* import {createNavigationManager, wrappingNavigationManager} from '@workday/canvas-kit-react/collection'
|
|
150
|
-
*
|
|
151
|
-
* const navigationManager = createNavigationManager({
|
|
152
|
-
* ...wrappingNavigationManager,
|
|
153
|
-
* getNext(id, {state}) {
|
|
154
|
-
* //
|
|
155
|
-
* }
|
|
156
|
-
* })
|
|
157
|
-
* ```
|
|
158
|
-
*/
|
|
159
142
|
getTextValue: (item: any) => string;
|
|
160
143
|
nonInteractiveIds: string[];
|
|
161
144
|
orientation: import("./useBaseListModel").Orientation;
|
|
@@ -1425,23 +1408,6 @@ export declare const useCursorListModel: (<TT_Special_Generic>(config?: (Partial
|
|
|
1425
1408
|
pageSize: number;
|
|
1426
1409
|
id: string;
|
|
1427
1410
|
getId: (item: any) => string;
|
|
1428
|
-
/**
|
|
1429
|
-
* Factory function that does type checking to create navigation managers. Navigation managers
|
|
1430
|
-
* are expected to handle all methods of a grid. If your use-case isn't meant to handle a grid,
|
|
1431
|
-
* pick one of the existing navigation managers and override the methods you wish to implement.
|
|
1432
|
-
*
|
|
1433
|
-
* For example,
|
|
1434
|
-
* ```tsx
|
|
1435
|
-
* import {createNavigationManager, wrappingNavigationManager} from '@workday/canvas-kit-react/collection'
|
|
1436
|
-
*
|
|
1437
|
-
* const navigationManager = createNavigationManager({
|
|
1438
|
-
* ...wrappingNavigationManager,
|
|
1439
|
-
* getNext(id, {state}) {
|
|
1440
|
-
* //
|
|
1441
|
-
* }
|
|
1442
|
-
* })
|
|
1443
|
-
* ```
|
|
1444
|
-
*/
|
|
1445
1411
|
getTextValue: (item: any) => string;
|
|
1446
1412
|
nonInteractiveIds: string[];
|
|
1447
1413
|
orientation: import("./useBaseListModel").Orientation;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCursorListModel.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useCursorListModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA0B,OAAO,EAAC,MAAM,kCAAkC,CAAC;AAElF,OAAO,EAAmB,IAAI,EAAC,MAAM,oBAAoB,CAAC;AAE1D,aAAK,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,kBAAkB,CAAC,EAAE,OAAO,CAAC,CAAC;AAE5E;;;;GAIG;AACH,MAAM,WAAW,iBAAiB;IAChC;0CACsC;IACtC,QAAQ,EAAE,mBAAmB,CAAC;IAC9B;mCAC+B;IAC/B,OAAO,EAAE,mBAAmB,CAAC;IAC7B,0CAA0C;IAC1C,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC;IAC/D;2FACuF;IACvF,OAAO,EAAE,mBAAmB,CAAC;IAC7B;uCACmC;IACnC,UAAU,EAAE,mBAAmB,CAAC;IAChC;+FAC2F;IAC3F,WAAW,EAAE,mBAAmB,CAAC;IACjC;0CACsC;IACtC,cAAc,EAAE,mBAAmB,CAAC;IACpC;kBACc;IACd,aAAa,EAAE,mBAAmB,CAAC;IACnC;kBACc;IACd,YAAY,EAAE,mBAAmB,CAAC;IAClC;;yEAEqE;IACrE,WAAW,EAAE,mBAAmB,CAAC;IACjC;;gFAE4E;IAC5E,eAAe,EAAE,mBAAmB,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,uBAAuB,YAAa,iBAAiB,sBAAY,CAAC;AAE/E;;GAEG;AACH,oBAAY,mBAAmB,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,MAAM,CAAC;AAEpF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,mBAAuC,CAAC;AAC/D;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,mBAA4D,CAAC;AAEnF;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,mBAM3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,mBAU1B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,mBAK7B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,mBAMzB,CAAC;AAQF,eAAO,MAAM,qBAAqB,WAAY,MAAM,aAC3C,MAAM,aACJ,eAAe,qBAEvB,MAoDF,CAAC;AAEF,eAAO,MAAM,aAAa,WAAY,MAAM,aACnC,MAAM,aACJ,eAAe,qBAEvB,MA2CF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,mBAYpC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,iBAAiB,mBAY5B,CAAC;AAIH;;;;GAIG;AACH,eAAO,MAAM,kBAAkB;IAG3B;;OAEG;;IAEH;;;OAGG;;IAEH;;;;;;;;;;;OAWG;;IAEH;;;OAGG
|
|
1
|
+
{"version":3,"file":"useCursorListModel.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useCursorListModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA0B,OAAO,EAAC,MAAM,kCAAkC,CAAC;AAElF,OAAO,EAAmB,IAAI,EAAC,MAAM,oBAAoB,CAAC;AAE1D,aAAK,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,kBAAkB,CAAC,EAAE,OAAO,CAAC,CAAC;AAE5E;;;;GAIG;AACH,MAAM,WAAW,iBAAiB;IAChC;0CACsC;IACtC,QAAQ,EAAE,mBAAmB,CAAC;IAC9B;mCAC+B;IAC/B,OAAO,EAAE,mBAAmB,CAAC;IAC7B,0CAA0C;IAC1C,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC;IAC/D;2FACuF;IACvF,OAAO,EAAE,mBAAmB,CAAC;IAC7B;uCACmC;IACnC,UAAU,EAAE,mBAAmB,CAAC;IAChC;+FAC2F;IAC3F,WAAW,EAAE,mBAAmB,CAAC;IACjC;0CACsC;IACtC,cAAc,EAAE,mBAAmB,CAAC;IACpC;kBACc;IACd,aAAa,EAAE,mBAAmB,CAAC;IACnC;kBACc;IACd,YAAY,EAAE,mBAAmB,CAAC;IAClC;;yEAEqE;IACrE,WAAW,EAAE,mBAAmB,CAAC;IACjC;;gFAE4E;IAC5E,eAAe,EAAE,mBAAmB,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,uBAAuB,YAAa,iBAAiB,sBAAY,CAAC;AAE/E;;GAEG;AACH,oBAAY,mBAAmB,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,MAAM,CAAC;AAEpF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,mBAAuC,CAAC;AAC/D;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,mBAA4D,CAAC;AAEnF;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,mBAM3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,mBAU1B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,mBAK7B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,mBAMzB,CAAC;AAQF,eAAO,MAAM,qBAAqB,WAAY,MAAM,aAC3C,MAAM,aACJ,eAAe,qBAEvB,MAoDF,CAAC;AAEF,eAAO,MAAM,aAAa,WAAY,MAAM,aACnC,MAAM,aACJ,eAAe,qBAEvB,MA2CF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,mBAYpC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,iBAAiB,mBAY5B,CAAC;AAIH;;;;GAIG;AACH,eAAO,MAAM,kBAAkB;IAG3B;;OAEG;;IAEH;;;OAGG;;IAEH;;;;;;;;;;;OAWG;;IAEH;;;OAGG;;;;;;;;;;;;YAwDa,MAAM;;QA1BtB,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;;YA4ClD,MAAM;;QA1BtB,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QA2ClE,mEAAmE;mBACxD;YAAC,EAAE,EAAE,MAAM,CAAA;SAAC;QAIvB;;;;;WAKG;;QAKH;;;WAGG;;QAKH;;;;;WAKG;;QAOH;;;;;WAKG;;QAKH,mDAAmD;;QAKnD,kDAAkD;;;;;;;;;;;;;;;;;;;;IAlIlD;;OAEG;;IAEH;;;OAGG;;IAEH;;;;;;;;;;;OAWG;;IAEH;;;OAGG;;;;;;;;;;;IA8BH,wDAAwD;;IAExD;;;;OAIG;;IAEH;;;OAGG;;IAEH;;;;;;OAMG;;0BArCyD,MAAM;;;;;;;;;;;;;;;;;;IA2ClE,mEAAmE;eACxD;QAAC,EAAE,EAAE,MAAM,CAAA;KAAC;IAIvB;;;;;OAKG;;IAKH;;;OAGG;;IAKH;;;;;OAKG;;IAOH;;;;;OAKG;;IAKH,mDAAmD;;IAKnD,kDAAkD;;;;;;;;;;;;;;;;;;QA3ElD,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QA2ClE,mEAAmE;mBACxD;YAAC,EAAE,EAAE,MAAM,CAAA;SAAC;QAIvB;;;;;WAKG;;QAKH;;;WAGG;;QAKH;;;;;WAKG;;QAOH;;;;;WAKG;;QAKH,mDAAmD;;QAKnD,kDAAkD;;;;;;;;;;;;;;;;;;;EA0BpD,CAAC"}
|
|
@@ -122,7 +122,7 @@ export const getWrappingOffsetItem = (offset) => (index, { state }, tries = stat
|
|
|
122
122
|
nextIndex = nextIndex - idealLength;
|
|
123
123
|
}
|
|
124
124
|
}
|
|
125
|
-
if (state.nonInteractiveIds.includes(items[nextIndex].id) && tries > 0) {
|
|
125
|
+
if (items.length > 1 && state.nonInteractiveIds.includes(items[nextIndex].id) && tries > 0) {
|
|
126
126
|
// The next item is disabled, try again, but only if we haven't already tried everything.
|
|
127
127
|
// Avoid an infinite loop with `tries`
|
|
128
128
|
return getWrappingOffsetItem(offset)(nextIndex, { state }, tries - 1);
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* This elemProps hook is used for cursor navigation by using [Active
|
|
3
|
+
* Descendant](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_focus_activedescendant).
|
|
4
|
+
* `aria-activedescendant` tells assistive technology which element has "focus" within the component
|
|
5
|
+
* while this single element maintains focus.
|
|
6
|
+
*
|
|
7
|
+
* ```ts
|
|
8
|
+
* const useMyItem = composeHooks(
|
|
9
|
+
* useListActiveDescendant, // adds `aria-activedescendant` support
|
|
10
|
+
* useListItemRegister
|
|
11
|
+
* );
|
|
12
|
+
```
|
|
13
|
+
*/
|
|
14
|
+
export declare const useListActiveDescendant: import("@workday/canvas-kit-react/common").BehaviorHook<{
|
|
15
|
+
state: {
|
|
16
|
+
cursorId: string;
|
|
17
|
+
columnCount: number;
|
|
18
|
+
pageSizeRef: import("react").MutableRefObject<number>;
|
|
19
|
+
cursorIndexRef: {
|
|
20
|
+
readonly current: number;
|
|
21
|
+
};
|
|
22
|
+
UNSTABLE_virtual: {
|
|
23
|
+
virtualItems: import("./react-virtual").VirtualItem[];
|
|
24
|
+
totalSize: number;
|
|
25
|
+
scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
|
|
26
|
+
scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
|
|
27
|
+
measure: () => void;
|
|
28
|
+
};
|
|
29
|
+
UNSTABLE_defaultItemHeight: number;
|
|
30
|
+
containerRef: import("react").RefObject<HTMLDivElement>;
|
|
31
|
+
id: string;
|
|
32
|
+
orientation: "horizontal" | "vertical";
|
|
33
|
+
indexRef: import("react").MutableRefObject<number>;
|
|
34
|
+
nonInteractiveIds: string[];
|
|
35
|
+
isVirtualized: boolean;
|
|
36
|
+
items: import("./useBaseListModel").Item<any>[];
|
|
37
|
+
};
|
|
38
|
+
events: {
|
|
39
|
+
goTo(data: {
|
|
40
|
+
id: string;
|
|
41
|
+
}): void;
|
|
42
|
+
goToNext(): void;
|
|
43
|
+
goToPrevious(): void;
|
|
44
|
+
goToPreviousRow(): void;
|
|
45
|
+
goToNextRow(): void;
|
|
46
|
+
goToFirst(): void;
|
|
47
|
+
goToLast(): void;
|
|
48
|
+
goToFirstOfRow(): void;
|
|
49
|
+
goToLastOfRow(): void;
|
|
50
|
+
goToNextPage(): void;
|
|
51
|
+
goToPreviousPage(): void;
|
|
52
|
+
registerItem(data: {
|
|
53
|
+
item: any;
|
|
54
|
+
textValue: string;
|
|
55
|
+
}): void;
|
|
56
|
+
unregisterItem(data: {
|
|
57
|
+
id: string;
|
|
58
|
+
}): void;
|
|
59
|
+
updateItemHeight(data: {
|
|
60
|
+
value: number;
|
|
61
|
+
}): void;
|
|
62
|
+
};
|
|
63
|
+
navigation: import("./useCursorListModel").NavigationManager;
|
|
64
|
+
getId: (item: any) => string;
|
|
65
|
+
}, {
|
|
66
|
+
'aria-activedescendant': string | undefined;
|
|
67
|
+
}>;
|
|
68
|
+
//# sourceMappingURL=useListActiveDescendant.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useListActiveDescendant.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListActiveDescendant.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMlC,CAAC"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { createElemPropsHook, slugify } from '@workday/canvas-kit-react/common';
|
|
2
|
+
import { useCursorListModel } from './useCursorListModel';
|
|
3
|
+
/**
|
|
4
|
+
* This elemProps hook is used for cursor navigation by using [Active
|
|
5
|
+
* Descendant](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_focus_activedescendant).
|
|
6
|
+
* `aria-activedescendant` tells assistive technology which element has "focus" within the component
|
|
7
|
+
* while this single element maintains focus.
|
|
8
|
+
*
|
|
9
|
+
* ```ts
|
|
10
|
+
* const useMyItem = composeHooks(
|
|
11
|
+
* useListActiveDescendant, // adds `aria-activedescendant` support
|
|
12
|
+
* useListItemRegister
|
|
13
|
+
* );
|
|
14
|
+
```
|
|
15
|
+
*/
|
|
16
|
+
export const useListActiveDescendant = createElemPropsHook(useCursorListModel)(model => {
|
|
17
|
+
return {
|
|
18
|
+
'aria-activedescendant': model.state.cursorId
|
|
19
|
+
? slugify(`${model.state.id}-${model.state.cursorId}`)
|
|
20
|
+
: undefined,
|
|
21
|
+
};
|
|
22
|
+
});
|
|
@@ -5,12 +5,13 @@
|
|
|
5
5
|
* attribute if one hasn't been defined by the application.
|
|
6
6
|
*
|
|
7
7
|
* An example might look like:
|
|
8
|
+
*
|
|
8
9
|
* ```tsx
|
|
9
10
|
* const useMyListItem = composeHooks(
|
|
10
11
|
* // any other hooks here
|
|
11
12
|
* useListItemSelect,
|
|
12
13
|
* useListItemRegister,
|
|
13
|
-
* useListItemAllowChildStrings
|
|
14
|
+
* useListItemAllowChildStrings // always the last in the list
|
|
14
15
|
* )
|
|
15
16
|
*
|
|
16
17
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useListItemAllowChildStrings.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemAllowChildStrings.ts"],"names":[],"mappings":"AAGA
|
|
1
|
+
{"version":3,"file":"useListItemAllowChildStrings.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemAllowChildStrings.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASxC,CAAC"}
|
|
@@ -7,12 +7,13 @@ import { useListModel } from '@workday/canvas-kit-react/collection';
|
|
|
7
7
|
* attribute if one hasn't been defined by the application.
|
|
8
8
|
*
|
|
9
9
|
* An example might look like:
|
|
10
|
+
*
|
|
10
11
|
* ```tsx
|
|
11
12
|
* const useMyListItem = composeHooks(
|
|
12
13
|
* // any other hooks here
|
|
13
14
|
* useListItemSelect,
|
|
14
15
|
* useListItemRegister,
|
|
15
|
-
* useListItemAllowChildStrings
|
|
16
|
+
* useListItemAllowChildStrings // always the last in the list
|
|
16
17
|
* )
|
|
17
18
|
*
|
|
18
19
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useListItemRegister.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemRegister.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAU3C,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAC,WAAW,EAAC,MAAM,iBAAiB,CAAC;AAG5C;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"useListItemRegister.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemRegister.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAU3C,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAC,WAAW,EAAC,MAAM,iBAAiB,CAAC;AAG5C;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2E/B,CAAC"}
|
|
@@ -48,7 +48,11 @@ export const useListItemRegister = createElemPropsHook(useListModel)(({ state, e
|
|
|
48
48
|
item: {
|
|
49
49
|
id: itemId,
|
|
50
50
|
},
|
|
51
|
-
textValue:
|
|
51
|
+
textValue: elemProps['data-text']
|
|
52
|
+
? elemProps['data-text']
|
|
53
|
+
: typeof elemProps.children === 'string'
|
|
54
|
+
? elemProps.children
|
|
55
|
+
: '',
|
|
52
56
|
});
|
|
53
57
|
setLocalId(itemId);
|
|
54
58
|
return () => {
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* This elemProps hook is used to attach keyboard events to handle keyboard navigation
|
|
4
|
+
*
|
|
5
|
+
* ```ts
|
|
6
|
+
* const useMyItem = composeHooks(
|
|
7
|
+
* useListKeyboardHandler, // adds keyboard support support
|
|
8
|
+
* useListItemRegister
|
|
9
|
+
* );
|
|
10
|
+
```
|
|
11
|
+
*/
|
|
12
|
+
export declare const useListKeyboardHandler: import("@workday/canvas-kit-react/common").BehaviorHook<{
|
|
13
|
+
state: {
|
|
14
|
+
cursorId: string;
|
|
15
|
+
columnCount: number;
|
|
16
|
+
pageSizeRef: React.MutableRefObject<number>;
|
|
17
|
+
cursorIndexRef: {
|
|
18
|
+
readonly current: number;
|
|
19
|
+
};
|
|
20
|
+
UNSTABLE_virtual: {
|
|
21
|
+
virtualItems: import("./react-virtual").VirtualItem[];
|
|
22
|
+
totalSize: number;
|
|
23
|
+
scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
|
|
24
|
+
scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
|
|
25
|
+
measure: () => void;
|
|
26
|
+
};
|
|
27
|
+
UNSTABLE_defaultItemHeight: number;
|
|
28
|
+
containerRef: React.RefObject<HTMLDivElement>;
|
|
29
|
+
id: string;
|
|
30
|
+
orientation: "horizontal" | "vertical";
|
|
31
|
+
indexRef: React.MutableRefObject<number>;
|
|
32
|
+
nonInteractiveIds: string[];
|
|
33
|
+
isVirtualized: boolean;
|
|
34
|
+
items: import("./useBaseListModel").Item<any>[];
|
|
35
|
+
};
|
|
36
|
+
events: {
|
|
37
|
+
goTo(data: {
|
|
38
|
+
id: string;
|
|
39
|
+
}): void;
|
|
40
|
+
goToNext(): void;
|
|
41
|
+
goToPrevious(): void;
|
|
42
|
+
goToPreviousRow(): void;
|
|
43
|
+
goToNextRow(): void;
|
|
44
|
+
goToFirst(): void;
|
|
45
|
+
goToLast(): void;
|
|
46
|
+
goToFirstOfRow(): void;
|
|
47
|
+
goToLastOfRow(): void;
|
|
48
|
+
goToNextPage(): void;
|
|
49
|
+
goToPreviousPage(): void;
|
|
50
|
+
registerItem(data: {
|
|
51
|
+
item: any;
|
|
52
|
+
textValue: string;
|
|
53
|
+
}): void;
|
|
54
|
+
unregisterItem(data: {
|
|
55
|
+
id: string;
|
|
56
|
+
}): void;
|
|
57
|
+
updateItemHeight(data: {
|
|
58
|
+
value: number;
|
|
59
|
+
}): void;
|
|
60
|
+
};
|
|
61
|
+
navigation: import("./useCursorListModel").NavigationManager;
|
|
62
|
+
getId: (item: any) => string;
|
|
63
|
+
}, {
|
|
64
|
+
onKeyDown(event: React.KeyboardEvent): void;
|
|
65
|
+
}>;
|
|
66
|
+
//# sourceMappingURL=useListKeyboardHandler.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useListKeyboardHandler.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListKeyboardHandler.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;;;;;;;;GASG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAId,mBAAmB;EAOtC,CAAC"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { useIsRTL, createElemPropsHook } from '@workday/canvas-kit-react/common';
|
|
2
|
+
import { useCursorListModel } from './useCursorListModel';
|
|
3
|
+
import { keyboardEventToCursorEvents } from './keyUtils';
|
|
4
|
+
/**
|
|
5
|
+
* This elemProps hook is used to attach keyboard events to handle keyboard navigation
|
|
6
|
+
*
|
|
7
|
+
* ```ts
|
|
8
|
+
* const useMyItem = composeHooks(
|
|
9
|
+
* useListKeyboardHandler, // adds keyboard support support
|
|
10
|
+
* useListItemRegister
|
|
11
|
+
* );
|
|
12
|
+
```
|
|
13
|
+
*/
|
|
14
|
+
export const useListKeyboardHandler = createElemPropsHook(useCursorListModel)(model => {
|
|
15
|
+
const isRTL = useIsRTL();
|
|
16
|
+
return {
|
|
17
|
+
onKeyDown(event) {
|
|
18
|
+
const handled = keyboardEventToCursorEvents(event, model, isRTL);
|
|
19
|
+
if (handled) {
|
|
20
|
+
event.preventDefault();
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
};
|
|
24
|
+
});
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { Model } from '@workday/canvas-kit-react/common';
|
|
1
2
|
import { useListModel } from './useListModel';
|
|
2
3
|
export interface LoadReturn<T> {
|
|
3
4
|
items: T[];
|
|
@@ -9,9 +10,45 @@ export interface LoadParams {
|
|
|
9
10
|
filter: CollectionLoader['filter'];
|
|
10
11
|
sorter: CollectionLoader['sorter'];
|
|
11
12
|
}
|
|
12
|
-
export interface AsyncCollectionConfig<T
|
|
13
|
+
export interface AsyncCollectionConfig<T, M extends Model<any, any>> {
|
|
14
|
+
/**
|
|
15
|
+
* The desired results per page.
|
|
16
|
+
*/
|
|
13
17
|
pageSize: number;
|
|
14
|
-
|
|
18
|
+
/**
|
|
19
|
+
* The total items in the collection. If you do not have this information before making an API
|
|
20
|
+
* call, leave it blank and it will default to `0` and be updated when `load` comes back with
|
|
21
|
+
* results.
|
|
22
|
+
* @default 0
|
|
23
|
+
*/
|
|
24
|
+
total?: number;
|
|
25
|
+
/**
|
|
26
|
+
* This function acts like a guard similar to model events. If you provide this function and it
|
|
27
|
+
* returns `false`, the `load` call from the loader will be cancelled. Be aware, this function can
|
|
28
|
+
* cause a loader to not function properly. You will need to call `loader.load(pageNumber)` on
|
|
29
|
+
* your own if a valid load event is cancelled. An example of using this function is in
|
|
30
|
+
* {@link useComboboxLoader} where the load calls are only allowed when the menu is open.
|
|
31
|
+
*/
|
|
32
|
+
shouldLoad?(
|
|
33
|
+
/**
|
|
34
|
+
* Parameters that are being sent to the `load` function
|
|
35
|
+
*/
|
|
36
|
+
params: LoadParams,
|
|
37
|
+
/**
|
|
38
|
+
* State coming from the model
|
|
39
|
+
*/
|
|
40
|
+
prevState: M['state']): boolean;
|
|
41
|
+
/**
|
|
42
|
+
* A `load` callback function provides an easier way to hook up loader requests for data to an
|
|
43
|
+
* API. It will be called when the user is ready for more of the virtual data set. The `load`
|
|
44
|
+
* function will be called when:
|
|
45
|
+
* - The list UI initially loads. It will request as many pages as necessary to render enough
|
|
46
|
+
* items in the viewport
|
|
47
|
+
* - The user is scrolling the list and has run out of cached data
|
|
48
|
+
* - The user is using the keyboard to navigate the list and has run out of cached data
|
|
49
|
+
* - A filter or sorter value has changed and the cached data is now invalid
|
|
50
|
+
* - `loader.load` was called by the developer, manually requesting a page number
|
|
51
|
+
*/
|
|
15
52
|
load(params: LoadParams): LoadReturn<T> | Promise<LoadReturn<T>>;
|
|
16
53
|
}
|
|
17
54
|
export interface CollectionLoader {
|
|
@@ -20,6 +57,7 @@ export interface CollectionLoader {
|
|
|
20
57
|
sorter: string | Record<string, string>;
|
|
21
58
|
updateSorter(value: string): void;
|
|
22
59
|
isLoading: boolean;
|
|
60
|
+
load(pageNumber?: number): void;
|
|
23
61
|
}
|
|
24
62
|
export declare function getPageNumber(index: number, pageSize: number): number;
|
|
25
63
|
/**
|
|
@@ -34,11 +72,12 @@ export declare function getPageNumber(index: number, pageSize: number): number;
|
|
|
34
72
|
*/
|
|
35
73
|
export declare function getPagesToLoad<T>(start: number, end: number, pageSize: number, items: T[], overScan?: number): number[];
|
|
36
74
|
/**
|
|
37
|
-
* Create a data loader and a model. The
|
|
38
|
-
*
|
|
75
|
+
* Create a data loader and a model. The list loader should be used on virtual data sets with
|
|
76
|
+
* possibly large amounts of data. The model should be passed to a collection component. The loader
|
|
77
|
+
* can be used to manipulate filters, sorters, and clear cache.
|
|
39
78
|
*
|
|
40
|
-
* A simple loader using [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
|
|
41
|
-
*
|
|
79
|
+
* A simple loader using [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) could
|
|
80
|
+
* look like the following:
|
|
42
81
|
*
|
|
43
82
|
* ```ts
|
|
44
83
|
* const {model, loader} = useListLoader(
|
|
@@ -60,7 +99,7 @@ export declare function getPagesToLoad<T>(start: number, end: number, pageSize:
|
|
|
60
99
|
* @param config Config that contains the loader config and the model config
|
|
61
100
|
* @param modelHook A model hook that describes which model should be returned.
|
|
62
101
|
*/
|
|
63
|
-
export declare function useListLoader<T, M extends ((...args: any[]) => any) & Omit<typeof useListModel, '
|
|
102
|
+
export declare function useListLoader<T, M extends ((...args: any[]) => any) & Omit<typeof useListModel, 'Context'>>(config: AsyncCollectionConfig<T, ReturnType<M>> & M['TConfig'], modelHook: M): {
|
|
64
103
|
model: ReturnType<M>;
|
|
65
104
|
loader: CollectionLoader;
|
|
66
105
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useListLoader.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListLoader.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAE5C,MAAM,WAAW,UAAU,CAAC,CAAC;IAC3B,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,UAAU;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACnC,MAAM,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;CACpC;AACD,MAAM,WAAW,qBAAqB,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"useListLoader.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListLoader.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,KAAK,EAAC,MAAM,kCAAkC,CAAC;AAEvD,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAE5C,MAAM,WAAW,UAAU,CAAC,CAAC;IAC3B,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,UAAU;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACnC,MAAM,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;CACpC;AACD,MAAM,WAAW,qBAAqB,CAAC,CAAC,EAAE,CAAC,SAAS,KAAK,CAAC,GAAG,EAAE,GAAG,CAAC;IACjE;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;OAMG;IACH,UAAU,CAAC;IACT;;OAEG;IACH,MAAM,EAAE,UAAU;IAClB;;OAEG;IACH,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,GACpB,OAAO,CAAC;IACX;;;;;;;;;;OAUG;IACH,IAAI,CAAC,MAAM,EAAE,UAAU,GAAG,UAAU,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;CAClE;AAED,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACjC;AA8CD,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,UAM5D;AAMD;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAC9B,KAAK,EAAE,MAAM,EACb,GAAG,EAAE,MAAM,EACX,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,CAAC,EAAE,EACV,QAAQ,SAAI,GACX,MAAM,EAAE,CAkBV;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,aAAa,CAC3B,CAAC,EAED,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,YAAY,EAAE,SAAS,CAAC,EAE1E,MAAM,EAAE,qBAAqB,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC,EAC9D,SAAS,EAAE,CAAC,GACX;IAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IAAC,MAAM,EAAE,gBAAgB,CAAA;CAAC,CAgLlD"}
|
|
@@ -65,11 +65,12 @@ export function getPagesToLoad(start, end, pageSize, items, overScan = 3) {
|
|
|
65
65
|
}
|
|
66
66
|
const resetItems = (total) => Array(total).fill(undefined);
|
|
67
67
|
/**
|
|
68
|
-
* Create a data loader and a model. The
|
|
69
|
-
*
|
|
68
|
+
* Create a data loader and a model. The list loader should be used on virtual data sets with
|
|
69
|
+
* possibly large amounts of data. The model should be passed to a collection component. The loader
|
|
70
|
+
* can be used to manipulate filters, sorters, and clear cache.
|
|
70
71
|
*
|
|
71
|
-
* A simple loader using [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
|
|
72
|
-
*
|
|
72
|
+
* A simple loader using [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) could
|
|
73
|
+
* look like the following:
|
|
73
74
|
*
|
|
74
75
|
* ```ts
|
|
75
76
|
* const {model, loader} = useListLoader(
|
|
@@ -92,9 +93,9 @@ const resetItems = (total) => Array(total).fill(undefined);
|
|
|
92
93
|
* @param modelHook A model hook that describes which model should be returned.
|
|
93
94
|
*/
|
|
94
95
|
export function useListLoader(config, modelHook) {
|
|
95
|
-
const [total, setTotal] = React.useState(config.total);
|
|
96
|
+
const [total, setTotal] = React.useState(config.total || 0);
|
|
96
97
|
const [items, setItems] = React.useState(() => {
|
|
97
|
-
return resetItems(config.total);
|
|
98
|
+
return resetItems(config.total || 0);
|
|
98
99
|
});
|
|
99
100
|
// keep track of pages that are currently loading
|
|
100
101
|
const loadingRef = React.useRef({});
|
|
@@ -111,44 +112,29 @@ export function useListLoader(config, modelHook) {
|
|
|
111
112
|
}
|
|
112
113
|
setItems(updater);
|
|
113
114
|
}, [total]);
|
|
114
|
-
const updateFilter = (filter) => {
|
|
115
|
-
loadingRef.current = {};
|
|
116
|
-
setFilter(filter);
|
|
117
|
-
const params = {
|
|
118
|
-
pageNumber: 1,
|
|
119
|
-
pageSize: config.pageSize,
|
|
120
|
-
filter,
|
|
121
|
-
sorter,
|
|
122
|
-
};
|
|
123
|
-
load(params, loadRef.current, loadingRef.current).then(updateItems);
|
|
124
|
-
};
|
|
125
|
-
const updateSorter = (sorter) => {
|
|
126
|
-
loadingRef.current = {};
|
|
127
|
-
setSorter(sorter);
|
|
128
|
-
load({
|
|
129
|
-
pageNumber: 1,
|
|
130
|
-
pageSize: config.pageSize,
|
|
131
|
-
filter,
|
|
132
|
-
sorter,
|
|
133
|
-
}, loadRef.current, loadingRef.current).then(updateItems);
|
|
134
|
-
};
|
|
135
115
|
// Our `useEffect` functions use `config.load`, but we don't want to rerun the effects if the user
|
|
136
116
|
// sends a different load function every render
|
|
137
117
|
const loadRef = React.useRef(config.load);
|
|
138
118
|
loadRef.current = config.load;
|
|
139
119
|
const itemsRef = React.useRef(items);
|
|
140
120
|
itemsRef.current = items;
|
|
121
|
+
const shouldLoadRef = React.useRef(config.shouldLoad);
|
|
122
|
+
shouldLoadRef.current = config.shouldLoad;
|
|
141
123
|
const requestAnimationFrameRef = React.useRef(0);
|
|
142
124
|
const shouldLoadIndex = (navigationMethod, eventKey) => {
|
|
143
|
-
return (data) => {
|
|
125
|
+
return (data, prevState) => {
|
|
144
126
|
const index = model.navigation[navigationMethod](model.state.cursorIndexRef.current, model);
|
|
127
|
+
const params = {
|
|
128
|
+
pageNumber: Math.floor(index / config.pageSize) + 1,
|
|
129
|
+
pageSize: config.pageSize,
|
|
130
|
+
filter,
|
|
131
|
+
sorter,
|
|
132
|
+
};
|
|
145
133
|
if (!items[index]) {
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
sorter,
|
|
151
|
-
}, loadRef.current, loadingRef.current)
|
|
134
|
+
if (config.shouldLoad && !config.shouldLoad(params, prevState)) {
|
|
135
|
+
return false;
|
|
136
|
+
}
|
|
137
|
+
load(params, loadRef.current, loadingRef.current)
|
|
152
138
|
.then(updateItems)
|
|
153
139
|
.then(() => {
|
|
154
140
|
cancelAnimationFrame(requestAnimationFrameRef.current);
|
|
@@ -171,6 +157,37 @@ export function useListLoader(config, modelHook) {
|
|
|
171
157
|
shouldGoToPreviousPage: shouldLoadIndex('getPreviousPage', 'goToPreviousPage'),
|
|
172
158
|
}));
|
|
173
159
|
const { virtualItems } = model.state.UNSTABLE_virtual;
|
|
160
|
+
const { state } = model;
|
|
161
|
+
const stateRef = React.useRef(state);
|
|
162
|
+
stateRef.current = state;
|
|
163
|
+
const updateFilter = (filter) => {
|
|
164
|
+
loadingRef.current = {};
|
|
165
|
+
setFilter(filter);
|
|
166
|
+
const params = {
|
|
167
|
+
pageNumber: 1,
|
|
168
|
+
pageSize: config.pageSize,
|
|
169
|
+
filter,
|
|
170
|
+
sorter,
|
|
171
|
+
};
|
|
172
|
+
if (config.shouldLoad && !config.shouldLoad(params, state)) {
|
|
173
|
+
return;
|
|
174
|
+
}
|
|
175
|
+
load(params, loadRef.current, loadingRef.current).then(updateItems);
|
|
176
|
+
};
|
|
177
|
+
const updateSorter = (sorter) => {
|
|
178
|
+
loadingRef.current = {};
|
|
179
|
+
setSorter(sorter);
|
|
180
|
+
const params = {
|
|
181
|
+
pageNumber: 1,
|
|
182
|
+
pageSize: config.pageSize,
|
|
183
|
+
filter,
|
|
184
|
+
sorter,
|
|
185
|
+
};
|
|
186
|
+
if (config.shouldLoad && !config.shouldLoad(params, state)) {
|
|
187
|
+
return;
|
|
188
|
+
}
|
|
189
|
+
load(params, loadRef.current, loadingRef.current).then(updateItems);
|
|
190
|
+
};
|
|
174
191
|
// Our only signal to trigger loading is if our virtual indexes are too close to boundaries.
|
|
175
192
|
React.useEffect(() => {
|
|
176
193
|
if (!virtualItems.length) {
|
|
@@ -180,12 +197,20 @@ export function useListLoader(config, modelHook) {
|
|
|
180
197
|
const lastItem = virtualItems[virtualItems.length - 1];
|
|
181
198
|
const pagesToLoad = getPagesToLoad(firstItem.index, lastItem.index, config.pageSize, itemsRef.current, loadingBuffer);
|
|
182
199
|
pagesToLoad.forEach(pageNumber => {
|
|
183
|
-
|
|
200
|
+
const params = { pageNumber, pageSize: config.pageSize, filter, sorter };
|
|
201
|
+
const shouldLoad = shouldLoadRef.current;
|
|
202
|
+
if (shouldLoad && !shouldLoad(params, stateRef.current)) {
|
|
203
|
+
return;
|
|
204
|
+
}
|
|
205
|
+
load(params, loadRef.current, loadingRef.current).then(updateItems);
|
|
184
206
|
});
|
|
185
207
|
return () => {
|
|
186
208
|
cancelAnimationFrame(requestAnimationFrameRef.current);
|
|
187
209
|
};
|
|
188
210
|
}, [virtualItems, config.pageSize, filter, sorter, updateItems]);
|
|
211
|
+
const loaderLoad = (pageNumber = 1) => {
|
|
212
|
+
return load({ pageNumber, pageSize: config.pageSize, filter, sorter }, loadRef.current, loadingRef.current).then(updateItems);
|
|
213
|
+
};
|
|
189
214
|
// Typescript won't allow me to say the included model extends `useListModel` for some reason, so
|
|
190
215
|
// we have no way to type check it. Without the constraint, Typescript doesn't know how type it
|
|
191
216
|
// properly, so we have an `as any`.
|
|
@@ -199,6 +224,7 @@ export function useListLoader(config, modelHook) {
|
|
|
199
224
|
// we reduce the ref instead of a state variable because the loader mutates this ref and
|
|
200
225
|
// triggers state changes when loading is finished.
|
|
201
226
|
isLoading: Object.values(loadingRef.current).reduce((loading, result) => loading || result, false),
|
|
227
|
+
load: loaderLoad,
|
|
202
228
|
},
|
|
203
229
|
};
|
|
204
230
|
}
|
|
@@ -86,6 +86,6 @@ export declare const useOverflowListMeasure: import("@workday/canvas-kit-react/c
|
|
|
86
86
|
navigation: import("./useCursorListModel").NavigationManager;
|
|
87
87
|
getId: (item: any) => string;
|
|
88
88
|
}, {
|
|
89
|
-
ref: (instance:
|
|
89
|
+
ref: (instance: unknown) => void;
|
|
90
90
|
}>;
|
|
91
91
|
//# sourceMappingURL=useOverflowListMeasure.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useOverflowListMeasure.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useOverflowListMeasure.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B;;;GAGG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"useOverflowListMeasure.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useOverflowListMeasure.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B;;;GAGG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAWjC,CAAC"}
|
|
@@ -86,9 +86,12 @@ export declare const useOverflowListTarget: import("@workday/canvas-kit-react/co
|
|
|
86
86
|
navigation: import("./useCursorListModel").NavigationManager;
|
|
87
87
|
getId: (item: any) => string;
|
|
88
88
|
}, {
|
|
89
|
-
ref: (instance:
|
|
89
|
+
ref: (instance: HTMLElement | null) => void;
|
|
90
90
|
'aria-hidden': boolean;
|
|
91
91
|
tabIndex: number;
|
|
92
|
-
style: {
|
|
92
|
+
style: {
|
|
93
|
+
position: string;
|
|
94
|
+
left: number;
|
|
95
|
+
} | undefined;
|
|
93
96
|
}>;
|
|
94
97
|
//# sourceMappingURL=useOverflowListTarget.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useOverflowListTarget.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useOverflowListTarget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B;;;GAGG;AACH,eAAO,MAAM,qBAAqB
|
|
1
|
+
{"version":3,"file":"useOverflowListTarget.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useOverflowListTarget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B;;;GAGG;AACH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2BhC,CAAC"}
|