@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
360 lines • 16.1 kB
TypeScript
import React from 'react';
import { Generic } from '@workday/canvas-kit-react/common';
export type Orientation = 'horizontal' | 'vertical';
export declare const defaultGetId: (item: Generic) => string;
export declare const defaultGetTextValue: (item: Generic) => string;
export interface Item<T> {
index: number;
id: string;
value: T;
/**
* Used by components that allow jumping to an item based on typing
*/
textValue: string;
}
export declare const useBaseListModel: (<TT_Special_Generic>(config?: (Partial<{
/** IDREF of the list. Children ids can be derived from this id */
id: string;
/**
* Optional function to return an id of an item. If not provided, the default function will
* return the `id` property from the object of each item. If you did not provide `items`, do not
* override this function. If you don't provided `items` and instead provide static items via
* JSX, the list will create an internal array of items where `id` is the only property and the
* default `getId` will return the desired result.
*/
getId: (item: Generic) => string;
/**
* Optional function to return the text representation of an item. If not provided, the default
* function will return the `text` property of the object of each item or an empty string if
* there is no `text` property. If you did not provide `items`, do not override this function.
*/
getTextValue: (item: Generic) => string;
/**
* Array of all ids which are currently disabled. This is used for navigation to skip over items
* which are not focusable.
*/
nonInteractiveIds: string[];
/**
* The orientation of a list of items. Values are either `vertical` or `horizontal`. This value will
* effect which ids activate progression through a list. For example, `horizontal` will activate with
* left and right arrows while `vertical` will activate with up and down arrows.
* @default 'vertical'
*/
orientation: Orientation;
/**
* Best guess to the default item height for virtualization. Getting this number correct
* avoids a rerender while the list is initializing.
*
* @default 50
*/
defaultItemHeight: number;
shouldVirtualize: boolean;
/**
* Optional array of items. If provided, use a render prop for list children instead of static
* children. If the shape of each item object does not have an `id` property or uses a different
* property to uniquely identify each item, a `getId` must also be supplied.
*/
items: Generic[];
}> & {
onRegisterItem?: ((data: {
id: string;
textValue: string;
}, prevState: {
UNSTABLE_virtual: {
virtualItems: import("./react-virtual").VirtualItem[];
totalSize: number;
scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
measure: () => void;
};
UNSTABLE_defaultItemHeight: number;
containerRef: React.RefObject<HTMLDivElement>;
id: string;
orientation: "horizontal" | "vertical";
indexRef: React.MutableRefObject<number>;
nonInteractiveIds: string[];
isVirtualized: boolean;
items: Item<Generic>[];
}) => void) | undefined;
onUnregisterItem?: ((data: {
id: string;
}, prevState: {
UNSTABLE_virtual: {
virtualItems: import("./react-virtual").VirtualItem[];
totalSize: number;
scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
measure: () => void;
};
UNSTABLE_defaultItemHeight: number;
containerRef: React.RefObject<HTMLDivElement>;
id: string;
orientation: "horizontal" | "vertical";
indexRef: React.MutableRefObject<number>;
nonInteractiveIds: string[];
isVirtualized: boolean;
items: Item<Generic>[];
}) => void) | undefined;
onUpdateItemHeight?: ((data: {
value: number;
}, prevState: {
UNSTABLE_virtual: {
virtualItems: import("./react-virtual").VirtualItem[];
totalSize: number;
scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
measure: () => void;
};
UNSTABLE_defaultItemHeight: number;
containerRef: React.RefObject<HTMLDivElement>;
id: string;
orientation: "horizontal" | "vertical";
indexRef: React.MutableRefObject<number>;
nonInteractiveIds: string[];
isVirtualized: boolean;
items: Item<Generic>[];
}) => void) | undefined;
} & {
shouldRegisterItem?: ((data: {
id: string;
textValue: string;
}, state: {
UNSTABLE_virtual: {
virtualItems: import("./react-virtual").VirtualItem[];
totalSize: number;
scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
measure: () => void;
};
UNSTABLE_defaultItemHeight: number;
containerRef: React.RefObject<HTMLDivElement>;
id: string;
orientation: "horizontal" | "vertical";
indexRef: React.MutableRefObject<number>;
nonInteractiveIds: string[];
isVirtualized: boolean;
items: Item<Generic>[];
}) => boolean) | undefined;
shouldUnregisterItem?: ((data: {
id: string;
}, state: {
UNSTABLE_virtual: {
virtualItems: import("./react-virtual").VirtualItem[];
totalSize: number;
scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
measure: () => void;
};
UNSTABLE_defaultItemHeight: number;
containerRef: React.RefObject<HTMLDivElement>;
id: string;
orientation: "horizontal" | "vertical";
indexRef: React.MutableRefObject<number>;
nonInteractiveIds: string[];
isVirtualized: boolean;
items: Item<Generic>[];
}) => boolean) | undefined;
shouldUpdateItemHeight?: ((data: {
value: number;
}, state: {
UNSTABLE_virtual: {
virtualItems: import("./react-virtual").VirtualItem[];
totalSize: number;
scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
measure: () => void;
};
UNSTABLE_defaultItemHeight: number;
containerRef: React.RefObject<HTMLDivElement>;
id: string;
orientation: "horizontal" | "vertical";
indexRef: React.MutableRefObject<number>;
nonInteractiveIds: string[];
isVirtualized: boolean;
items: Item<Generic>[];
}) => boolean) | undefined;
}) | undefined) => {
state: {
UNSTABLE_virtual: {
virtualItems: import("./react-virtual").VirtualItem[];
totalSize: number;
scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
measure: () => void;
};
UNSTABLE_defaultItemHeight: number;
containerRef: React.RefObject<HTMLDivElement>;
id: string;
orientation: "horizontal" | "vertical";
indexRef: React.MutableRefObject<number>;
nonInteractiveIds: string[];
isVirtualized: boolean;
items: Item<Generic>[];
};
events: {
/**
* Register an item to the list. Takes in an identifier, a React.Ref and an optional index. This
* should be called on component mount. This event is only called for static rendering.
*/
registerItem(data: {
id: string;
textValue: string;
}): void;
/**
* Unregister an item by its identifier. This should be called when the component is unmounted.
* This event is only called for static rendering.
*/
unregisterItem(data: {
id: string;
}): void;
/**
* Updates the default item height. This should only be called when item height is measured.
* Calling this with a different default item height than previous will cause a virtual list to
* recalculate the overall height of the list and invalidate any height caching. Doing this only
* on the first item may save the user from experiencing odd scrolling behavior where the
* scrollbar updates while scrolling. If the user uses the mouse to drag the bar, it can become
* "detached" since the browser recalculates scroll bar position while the overflow container is
* updated.
*/
updateItemHeight(data: {
value: number;
}): void;
};
getId: (item: Generic) => string;
}) & import("@workday/canvas-kit-react/common").ModelExtras<{
/** IDREF of the list. Children ids can be derived from this id */
id: string;
/**
* Optional function to return an id of an item. If not provided, the default function will
* return the `id` property from the object of each item. If you did not provide `items`, do not
* override this function. If you don't provided `items` and instead provide static items via
* JSX, the list will create an internal array of items where `id` is the only property and the
* default `getId` will return the desired result.
*/
getId: (item: Generic) => string;
/**
* Optional function to return the text representation of an item. If not provided, the default
* function will return the `text` property of the object of each item or an empty string if
* there is no `text` property. If you did not provide `items`, do not override this function.
*/
getTextValue: (item: Generic) => string;
/**
* Array of all ids which are currently disabled. This is used for navigation to skip over items
* which are not focusable.
*/
nonInteractiveIds: string[];
/**
* The orientation of a list of items. Values are either `vertical` or `horizontal`. This value will
* effect which ids activate progression through a list. For example, `horizontal` will activate with
* left and right arrows while `vertical` will activate with up and down arrows.
* @default 'vertical'
*/
orientation: Orientation;
/**
* Best guess to the default item height for virtualization. Getting this number correct
* avoids a rerender while the list is initializing.
*
* @default 50
*/
defaultItemHeight: number;
shouldVirtualize: boolean;
/**
* Optional array of items. If provided, use a render prop for list children instead of static
* children. If the shape of each item object does not have an `id` property or uses a different
* property to uniquely identify each item, a `getId` must also be supplied.
*/
items: Generic[];
}, {}, {
UNSTABLE_virtual: {
virtualItems: import("./react-virtual").VirtualItem[];
totalSize: number;
scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
measure: () => void;
};
UNSTABLE_defaultItemHeight: number;
containerRef: React.RefObject<HTMLDivElement>;
id: string;
orientation: "horizontal" | "vertical";
indexRef: React.MutableRefObject<number>;
nonInteractiveIds: string[];
isVirtualized: boolean;
items: Item<Generic>[];
}, {
/**
* Register an item to the list. Takes in an identifier, a React.Ref and an optional index. This
* should be called on component mount. This event is only called for static rendering.
*/
registerItem(data: {
id: string;
textValue: string;
}): void;
/**
* Unregister an item by its identifier. This should be called when the component is unmounted.
* This event is only called for static rendering.
*/
unregisterItem(data: {
id: string;
}): void;
/**
* Updates the default item height. This should only be called when item height is measured.
* Calling this with a different default item height than previous will cause a virtual list to
* recalculate the overall height of the list and invalidate any height caching. Doing this only
* on the first item may save the user from experiencing odd scrolling behavior where the
* scrollbar updates while scrolling. If the user uses the mouse to drag the bar, it can become
* "detached" since the browser recalculates scroll bar position while the overflow container is
* updated.
*/
updateItemHeight(data: {
value: number;
}): void;
}, {
state: {
UNSTABLE_virtual: {
virtualItems: import("./react-virtual").VirtualItem[];
totalSize: number;
scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
measure: () => void;
};
UNSTABLE_defaultItemHeight: number;
containerRef: React.RefObject<HTMLDivElement>;
id: string;
orientation: "horizontal" | "vertical";
indexRef: React.MutableRefObject<number>;
nonInteractiveIds: string[];
isVirtualized: boolean;
items: Item<Generic>[];
};
events: {
/**
* Register an item to the list. Takes in an identifier, a React.Ref and an optional index. This
* should be called on component mount. This event is only called for static rendering.
*/
registerItem(data: {
id: string;
textValue: string;
}): void;
/**
* Unregister an item by its identifier. This should be called when the component is unmounted.
* This event is only called for static rendering.
*/
unregisterItem(data: {
id: string;
}): void;
/**
* Updates the default item height. This should only be called when item height is measured.
* Calling this with a different default item height than previous will cause a virtual list to
* recalculate the overall height of the list and invalidate any height caching. Doing this only
* on the first item may save the user from experiencing odd scrolling behavior where the
* scrollbar updates while scrolling. If the user uses the mouse to drag the bar, it can become
* "detached" since the browser recalculates scroll bar position while the overflow container is
* updated.
*/
updateItemHeight(data: {
value: number;
}): void;
};
getId: (item: Generic) => string;
}>;
//# sourceMappingURL=useBaseListModel.d.ts.map