Skip to content

Commit

Permalink
feat(Table): styled SortIndicator added
Browse files Browse the repository at this point in the history
  • Loading branch information
DanisAvko committed Sep 23, 2024
1 parent ffd60ca commit c956751
Show file tree
Hide file tree
Showing 27 changed files with 131 additions and 17 deletions.
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';

import {useTable} from '../../../../hooks';
import {BaseTable} from '../../../BaseTable';
import {BaseTable} from '../../BaseTable';
import {columns} from '../constants/columns';
import {data} from '../constants/data';

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';

import {useTable} from '../../../../hooks';
import {BaseTable} from '../../../BaseTable';
import {BaseTable} from '../../BaseTable';
import {columns} from '../constants/columns';

import {cnEmptyContentStory} from './EmptyContentStory.classname';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React from 'react';
import type {ExpandedState, Row} from '@tanstack/react-table';

import {useTable} from '../../../../hooks';
import {BaseTable} from '../../../BaseTable';
import {BaseTable} from '../../BaseTable';
import type {GroupOrItem} from '../constants/grouping';
import {columns, data} from '../constants/grouping';

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React from 'react';
import type {ExpandedState, Row} from '@tanstack/react-table';

import {useTable} from '../../../../hooks';
import {BaseTable} from '../../../BaseTable';
import {BaseTable} from '../../BaseTable';
import {columns} from '../constants/columns';
import type {Item} from '../types';
import {generateData} from '../utils';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type {ColumnDef, ExpandedState, Row, RowSelectionState} from '@tanstack/r

import {selectionColumn} from '../../../../constants';
import {useTable} from '../../../../hooks';
import {BaseTable} from '../../../BaseTable';
import {BaseTable} from '../../BaseTable';
import type {GroupOrItem} from '../constants/grouping';
import {data, columns as originalColumns} from '../constants/grouping';

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React from 'react';
import type {ColumnDef} from '@tanstack/react-table';

import {useTable} from '../../../../hooks';
import {BaseTable} from '../../../BaseTable';
import {BaseTable} from '../../BaseTable';
import {columns as nestedColumns} from '../constants/columns';
import {data} from '../constants/data';
import type {Item} from '../types';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ import type {ColumnDef} from '@tanstack/react-table';

import {dragHandleColumn} from '../../../../constants';
import {useTable} from '../../../../hooks';
import {BaseTable} from '../../../BaseTable';
import {ReorderingProvider} from '../../../ReorderingProvider';
import type {ReorderingProviderProps} from '../../../ReorderingProvider';
import {BaseTable} from '../../BaseTable';
import {columns as originalColumns} from '../constants/columns';
import {data as originalData} from '../constants/data';
import type {Item} from '../types';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ import type {ColumnDef} from '@tanstack/react-table';
import {dragHandleColumn} from '../../../../constants';
import {useTable, useWindowRowVirtualizer} from '../../../../hooks';
import {getVirtualRowRangeExtractor} from '../../../../utils';
import {BaseTable} from '../../../BaseTable';
import {ReorderingProvider} from '../../../ReorderingProvider';
import type {ReorderingProviderProps} from '../../../ReorderingProvider';
import {BaseTable} from '../../BaseTable';
import {columns as originalColumns} from '../constants/columns';
import type {Item} from '../types';
import {generateData} from '../utils';
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';

import {useTable} from '../../../../hooks';
import {BaseTable} from '../../../BaseTable';
import {BaseTable} from '../../BaseTable';
import {columns} from '../constants/columns';
import {data} from '../constants/data';

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React from 'react';
import type {SortingState} from '@tanstack/react-table';

import {useTable} from '../../../../hooks';
import {BaseTable} from '../../../BaseTable';
import {BaseTable} from '../../BaseTable';
import {columns} from '../constants/columns';
import {data} from '../constants/data';

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';

import {useTable} from '../../../../hooks';
import {BaseTable} from '../../../BaseTable';
import {BaseTable} from '../../BaseTable';
import {columns} from '../constants/columns';
import {generateData} from '../utils';

Expand Down
2 changes: 1 addition & 1 deletion src/components/BaseTable/__stories__/stories/TreeStory.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React from 'react';
import type {ExpandedState} from '@tanstack/react-table';

import {useTable} from '../../../../hooks';
import {BaseTable} from '../../../BaseTable';
import {BaseTable} from '../../BaseTable';
import {columns, data} from '../constants/tree';

export const TreeStory = () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React from 'react';
import type {ExpandedState, Row} from '@tanstack/react-table';

import {useTable} from '../../../../hooks';
import {BaseTable} from '../../../BaseTable';
import {BaseTable} from '../../BaseTable';
import type {TreeGroupItem} from '../constants/tree';
import {groupsColumns, groupsData} from '../constants/tree';

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';

import {useRowVirtualizer, useTable} from '../../../../hooks';
import {BaseTable} from '../../../BaseTable';
import {BaseTable} from '../../BaseTable';
import {columns} from '../constants/columns';
import {generateData} from '../utils';

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';

import {useTable, useWindowRowVirtualizer} from '../../../../hooks';
import {BaseTable} from '../../../BaseTable';
import {BaseTable} from '../../BaseTable';
import {columns} from '../constants/columns';
import {generateData} from '../utils';

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type {ColumnDef, RowSelectionState} from '@tanstack/react-table';

import {selectionColumn} from '../../../../constants';
import {useTable} from '../../../../hooks';
import {BaseTable} from '../../../BaseTable';
import {BaseTable} from '../../BaseTable';
import {columns as originalColumns} from '../constants/columns';
import {data} from '../constants/data';
import type {Item} from '../types';
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';

import {useTable} from '../../../../hooks';
import {BaseTable} from '../../../BaseTable';
import {BaseTable} from '../../BaseTable';
import {columns} from '../constants/columns';
import {data} from '../constants/data';

Expand Down
3 changes: 3 additions & 0 deletions src/components/SortIndicator/SortIndicator.classname.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import {block} from '../../utils';

export const b = block('styled-sort-indicator');
15 changes: 15 additions & 0 deletions src/components/SortIndicator/SortIndicator.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
@use '../variables';

$block: '.#{variables.$ns}styled-sort-indicator';

#{$block} {
display: inline-flex;
padding-block: 1px;

color: var(--g-color-text-hint);

&_order_asc,
&_order_desc {
color: var(--g-color-text-primary);
}
}
25 changes: 25 additions & 0 deletions src/components/SortIndicator/SortIndicator.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import React from 'react';

import {Icon} from '@gravity-ui/uikit';

import {getSortIndicatorIcon} from '../../utils';
import type {BaseSortIndicatorProps} from '../BaseSortIndicator';

import {b} from './SortIndicator.classname';

import './SortIndicator.scss';

export interface SortIndicatorProps<TData, TValue> extends BaseSortIndicatorProps<TData, TValue> {}

export const SortIndicator = <TData, TValue>({
className,
header,
}: SortIndicatorProps<TData, TValue>) => {
const order = header.column.getIsSorted();

return (
<span className={b({order}, className)}>
<Icon data={getSortIndicatorIcon(order)} size={16} />
</span>
);
};
1 change: 1 addition & 0 deletions src/components/SortIndicator/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './SortIndicator';
5 changes: 5 additions & 0 deletions src/components/Table/__stories__/Table.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {Table} from '../index';
import {DefaultStory} from './stories/DefaultStory';
import {ReorderingStory} from './stories/ReorderingStory';
import {ReorderingWithVirtualizationStory} from './stories/ReorderingWithVirtualizationStory';
import {SortingStory} from './stories/SortingStory';
import {StickyHeaderStory} from './stories/StickyHeaderStory';
import {VirtualizationStory} from './stories/VirtualizationStory';
import {WindowVirtualizationStory} from './stories/WindowVirtualizationStory';
Expand All @@ -25,6 +26,10 @@ export const WithSelection: StoryObj<typeof WithSelectionStory> = {
render: WithSelectionStory,
};

export const Sorting: StoryObj<typeof SortingStory> = {
render: SortingStory,
};

export const Reordering: StoryObj<typeof ReorderingStory> = {
render: ReorderingStory,
};
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import {cn} from '../../../../utils';

export const cnSortingStory = cn('sorting-story');
6 changes: 6 additions & 0 deletions src/components/Table/__stories__/stories/SortingStory.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
.sorting-story {
&__sort-indicator {
margin-inline-start: var(--g-spacing-1);
vertical-align: top;
}
}
37 changes: 37 additions & 0 deletions src/components/Table/__stories__/stories/SortingStory.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import React from 'react';

import type {SortingState} from '@tanstack/react-table';

import {useTable} from '../../../../hooks';
import {columns} from '../../../BaseTable/__stories__/constants/columns';
import {data} from '../../../BaseTable/__stories__/constants/data';
import {SortIndicator} from '../../../SortIndicator';
import {Table} from '../../Table';

import {cnSortingStory} from './SortingStory.classname';

import './SortingStory.scss';

export const SortingStory = () => {
const [sorting, setSorting] = React.useState<SortingState>([]);

const table = useTable({
columns,
data,
enableSorting: true,
getRowId: (item) => item.id,
onSortingChange: setSorting,
state: {
sorting,
},
});

return (
<Table
table={table}
className={cnSortingStory()}
renderSortIndicator={(sortIndicatorProps) => <SortIndicator {...sortIndicatorProps} />}
sortIndicatorClassName={cnSortingStory('sort-indicator')}
/>
);
};
18 changes: 18 additions & 0 deletions src/utils/getSortIndicatorIcon.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import {
ArrowDown as ArrowDownIcon,
ArrowUpArrowDown as ArrowUpArrowDownIcon,
ArrowUp as ArrowUpIcon,
} from '@gravity-ui/icons';
import type {SortDirection} from '@tanstack/react-table';

export const getSortIndicatorIcon = (sortDirection: SortDirection | false) => {
if (sortDirection === 'asc') {
return ArrowUpIcon;
}

if (sortDirection === 'desc') {
return ArrowDownIcon;
}

return ArrowUpArrowDownIcon;
};
1 change: 1 addition & 0 deletions src/utils/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export * from './getCellStyles';
export * from './getColumnPinningClassModes';
export * from './getHeaderCellAriaColIndex';
export * from './getHeaderCellClassModes';
export * from './getSortIndicatorIcon';
export * from './getVirtualRowRangeExtractor';
export * from './shouldRenderFooterCell';
export * from './shouldRenderFooterRow';
Expand Down

0 comments on commit c956751

Please sign in to comment.