Skip to content

Commit 54fcbaa

Browse files
committed
fix lint and add horizontal scrolling story
1 parent 68033b2 commit 54fcbaa

File tree

3 files changed

+32
-7
lines changed

3 files changed

+32
-7
lines changed

packages/@react-aria/virtualizer/src/ScrollView.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,6 @@ interface ScrollViewProps extends HTMLAttributes<HTMLElement> {
3939
sentinelRef: React.RefObject<HTMLDivElement | null>
4040
}
4141

42-
43-
4442
function ScrollView(props: ScrollViewProps, ref: ForwardedRef<HTMLDivElement | null>) {
4543
let {sentinelRef, ...otherProps} = props;
4644
ref = useObjectRef(ref);

packages/react-aria-components/src/ListBox.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,6 @@ export const ListBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function Lis
9797
// The first copy sends a collection document via context which we render the collection portal into.
9898
// The second copy sends a ListState object via context which we use to render the ListBox without rebuilding the state.
9999
// Otherwise, we have a standalone ListBox, so we need to create a collection and state ourselves.
100-
// console.log('in listbox render', state)
101100
if (state) {
102101
return <ListBoxInner state={state} props={props} listBoxRef={ref} />;
103102
}

packages/react-aria-components/stories/ListBox.stories.tsx

Lines changed: 32 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -450,7 +450,7 @@ const MyListBoxLoaderIndicator = () => {
450450

451451
// TODO: this doesn't have load more spinner since user basically needs to use <Collection> or wrap their ListboxItem renderer so it renders the
452452
// additional loading indicator based on list load state
453-
export const AsyncListBox = () => {
453+
export const AsyncListBox = (args) => {
454454
let list = useAsyncList<Character>({
455455
async load({signal, cursor, filterText}) {
456456
if (cursor) {
@@ -470,18 +470,46 @@ export const AsyncListBox = () => {
470470

471471
return (
472472
<ListBox
473-
className={styles.menu}
474-
style={{height: 400}}
473+
{...args}
474+
style={{
475+
height: args.orientation === 'horizontal' ? 100 : 400,
476+
width: args.orientation === 'horizontal' ? 400 : 200,
477+
overflow: 'auto'
478+
}}
475479
items={list.items}
476480
aria-label="async listbox"
477481
isLoading={list.isLoading}
478482
onLoadMore={list.loadMore}
479483
renderEmptyState={() => list.isLoading ? 'Loading spinner' : 'No results found'}>
480-
{item => <MyListBoxItem id={item.name}>{item.name}</MyListBoxItem>}
484+
{(item: Character) => (
485+
<MyListBoxItem
486+
style={{
487+
minHeight: args.orientation === 'horizontal' ? 100 : 50,
488+
minWidth: args.orientation === 'horizontal' ? 50 : 200,
489+
backgroundColor: 'lightgrey',
490+
border: '1px solid black',
491+
boxSizing: 'border-box'
492+
}}
493+
id={item.name}>
494+
{item.name}
495+
</MyListBoxItem>
496+
)}
481497
</ListBox>
482498
);
483499
};
484500

501+
AsyncListBox.story = {
502+
args: {
503+
orientation: 'horizontal'
504+
},
505+
argTypes: {
506+
orientation: {
507+
control: 'radio',
508+
options: ['horizontal', 'vertical']
509+
}
510+
}
511+
};
512+
485513
export const AsyncListBoxVirtualized = () => {
486514
let list = useAsyncList<Character>({
487515
async load({signal, cursor, filterText}) {

0 commit comments

Comments
 (0)