Skip to content

Commit

Permalink
Merge branch 'main' into DATAUI-1616(UXRFC-199)-Slider
Browse files Browse the repository at this point in the history
  • Loading branch information
Arucard89 authored Jan 30, 2024
2 parents 4462bb4 + 1760166 commit 4610998
Show file tree
Hide file tree
Showing 6 changed files with 58 additions and 10 deletions.
12 changes: 7 additions & 5 deletions src/components/List/List.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
refFilter = React.createRef<HTMLInputElement>();
refContainer = React.createRef<any>();

Check warning on line 94 in src/components/List/List.tsx

View workflow job for this annotation

GitHub Actions / Verify Files

Unexpected any. Specify a different type
blurTimer: ReturnType<typeof setTimeout> | null = null;
loadingItem = {value: '__LIST_ITEM_LOADING__', disabled: true} as unknown as ListItemData<
loadingItem = {value: '__LIST_ITEM_LOADING__', disabled: false} as unknown as ListItemData<
T & {value: string}
>;
uniqId = getUniqId();
Expand Down Expand Up @@ -518,11 +518,13 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
};

private handleKeyMove(event: React.KeyboardEvent, step: number, defaultItemIndex = 0) {
event.preventDefault();
const {activeItem = defaultItemIndex} = this.state;
this.activateItem(
List.findNextIndex<T>(this.state.items, activeItem + step, Math.sign(step)),
);

event.preventDefault();

const items = this.getItemsWithLoading();

this.activateItem(List.findNextIndex<T>(items, activeItem + step, Math.sign(step)));
}

private handleFocus = () => {
Expand Down
11 changes: 11 additions & 0 deletions src/components/List/__stories__/List.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {List, listDefaultProps} from '..';
import type {ListProps} from '..';

import {ListShowcase} from './ListShowcase';
import {ListWithLoader} from './ListWithLoader';

type ComponentType = React.JSXElementConstructor<ListProps<string>>;

Expand Down Expand Up @@ -44,7 +45,17 @@ export const RenderItem = RenderItemTemplate.bind({});
RenderItem.args = {
items,
renderItem: (item) => `🔥🔥🔥 ${item} 🔥🔥🔥`,
};

const TemplateWithState: ComponentStory<ComponentType> = (args) => <ListWithLoader {...args} />;

export const WithLoadingMoreItems = TemplateWithState.bind({});
WithLoadingMoreItems.args = {
items: ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'],
itemsHeight: 150,
itemHeight: 28,
loading: true,
virtualized: false,
};

const ShowcaseTemplate: ComponentStory<ComponentType> = () => <ListShowcase />;
Expand Down
6 changes: 6 additions & 0 deletions src/components/List/__stories__/ListWithLoader.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
@use '../../variables';
@use '../../../../styles/mixins';

.list-with-loader {
overflow: auto;
}
26 changes: 26 additions & 0 deletions src/components/List/__stories__/ListWithLoader.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import React from 'react';

import {cn} from '../../utils/cn';
import {List} from '../List';
import type {ListProps} from '../types';

import './ListWithLoader.scss';

const b = cn('list-with-loader');

export const ListWithLoader = (args: ListProps<string>) => {
const [items, setItems] = React.useState(args.items);

const onLoadMore = () => {
// delay for fetching new real items
setTimeout(() => {
setItems([...items, ...args.items]);
}, 300);
};

return (
<div className={b()}>
<List {...args} items={items} onLoadMore={onLoadMore} />
</div>
);
};
6 changes: 6 additions & 0 deletions src/components/Pagination/__stories__/Pagination.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,14 @@ import {Pagination, PaginationProps} from '../../Pagination';

const useState = (args: PaginationProps) => {
const [state, setState] = React.useState({...args});

const onUpdate: PaginationProps['onUpdate'] = (page, pageSize) =>
setState((prevState) => ({...prevState, page, pageSize}));

React.useEffect(() => {
setState({...args});
}, [args]);

return {...state, onUpdate};
};

Expand Down
7 changes: 2 additions & 5 deletions src/components/Table/Table.scss
Original file line number Diff line number Diff line change
Expand Up @@ -78,14 +78,11 @@
text-align: right;
}

&_sticky_left,
&_sticky_right {
#{variables.$block} &_sticky_left,
#{variables.$block} &_sticky_right {
position: sticky;
z-index: 2;
}

&_sticky_left,
&_sticky_right {
background: var(--g-color-base-background);
}

Expand Down

0 comments on commit 4610998

Please sign in to comment.