Skip to content

Commit

Permalink
Merge branch 'next' into feat/skeleton-rtl
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mishnya
Mishnya authored Nov 28, 2023
2 parents 00f1de1 + b5d7ed9 commit 690abb6
Show file tree
Hide file tree
Showing 16 changed files with 96 additions and 64 deletions.
2 changes: 1 addition & 1 deletion CODEOWNERS
View file
Validating CODEOWNERS rules …
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
/src/components/Spin @SeqviriouM
/src/components/Stories @DarkGenius
/src/components/Switch @zamkovskaya
#/src/components/Table
/src/components/Table @Raubzeug
/src/components/Tabs @sofiushko
/src/components/Text @IsaevAlexandr
/src/components/controls/TextArea @korvin89
Expand Down
4 changes: 4 additions & 0 deletions src/components/List/List.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {VariableSizeList as ListContainer} from 'react-window';
import {SelectLoadingIndicator} from '../Select/components/SelectList/SelectLoadingIndicator';
import {TextInput} from '../controls';
import {MobileContext} from '../mobile';
import {ThemeContext} from '../theme';
import {block} from '../utils/cn';
import {getUniqId} from '../utils/common';

Expand Down Expand Up @@ -44,6 +45,7 @@ export const listDefaultProps: Partial<ListProps<ListItemData<unknown>>> = {

export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T>> {
static defaultProps: Partial<ListProps<ListItemData<unknown>>> = listDefaultProps;
static contextType = ThemeContext;

static moveListElement<T = unknown>(
list: ListItemData<T>[],
Expand Down Expand Up @@ -72,6 +74,7 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
return undefined;
}

context!: React.ContextType<typeof ThemeContext>;
state: ListState<T> = {
items: this.props.items,
filter: '',
Expand Down Expand Up @@ -342,6 +345,7 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
onItemsRendered={this.onItemsRendered}
onSortStart={this.onSortStart}
onSortEnd={this.onSortEnd}
direction={this.context.direction}
// this property used to rerender items in viewport
// must be last, typescript skips checks for all props behind ts-ignore/ts-expect-error
// @ts-expect-error
Expand Down
11 changes: 10 additions & 1 deletion src/components/List/components/ListItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,15 @@ export class ListItem<T = unknown> extends React.Component<ListItemProps<T>> {
role = 'listitem',
} = this.props;

/*
This fixes item drag layout for rtl direction.
react-window has a bug where in rtl it setting "right" to 0 instead of undefined.
*/
const fixedStyle = {
...style,
right: undefined,
};

return (
// eslint-disable-next-line jsx-a11y/click-events-have-key-events
<div
Expand All @@ -45,7 +54,7 @@ export class ListItem<T = unknown> extends React.Component<ListItemProps<T>> {
},
itemClassName,
)}
style={style}
style={fixedStyle}
onClick={item.disabled ? undefined : this.onClick}
onClickCapture={item.disabled ? undefined : this.onClickCapture}
onMouseEnter={this.onMouseEnter}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Select/__stories__/SelectShowcase.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ const ExampleItem = (props: {
code.map((codeItem, i) => {
return (
<React.Fragment key={`${title}-${i}`}>
<pre>
<pre dir="ltr">
{codeItem}
<ClipboardButton
className={b('copy-button')}
Expand Down
4 changes: 2 additions & 2 deletions src/components/Table/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,8 @@ Additional functionality is enabled via HOCs:
| name | Column name (header) | `string` `(() => React.ReactNode)` | column ID |
| placeholder | The stub when there is no data in a cell | `string` `((item: any, index: number) => React.ReactNode)` | `— (&mdash;)` |
| template | Cell contents. If you skip a row, the cell contents will be the value of the field with the same name as this row. | `string` `((item: any, index: number) => React.ReactNode)` | The value of the field with the name equal to the column ID |
| align | Content alignment | `"left"` `"center"` `"right"` | |
| sticky | Sticky column | `"left"` `"right"` | |
| align | Content alignment | `"start"` `"center"` `"end"` | |
| sticky | Sticky column | `"start"` `"end"` | |
| primary | Distinguishes a column among other | `boolean` | |
| width | Column width in px | `number` | |
| stickyHorizontalScroll | A horizontal sticky scroll in a table. NB: A table cannot have a fixed height and a sticky scroll at the same time. A sticky scroll will not work if the table has an overflow. | `boolean` | `false` |
Expand Down
14 changes: 7 additions & 7 deletions src/components/Table/Table.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,18 +74,18 @@
text-align: center;
}

&_align_right {
&_align_end {
text-align: end;
}

&_sticky_left,
&_sticky_right {
&_sticky_start,
&_sticky_end {
position: sticky;
z-index: 2;
}

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

Expand Down Expand Up @@ -133,8 +133,8 @@
background-color: var(--g-color-base-simple-hover-solid);
cursor: pointer;

#{variables.$block}__cell_sticky_left,
#{variables.$block}__cell_sticky_right {
#{variables.$block}__cell_sticky_start,
#{variables.$block}__cell_sticky_end {
background: var(--g-color-base-simple-hover-solid);
}
}
Expand Down
35 changes: 27 additions & 8 deletions src/components/Table/Table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,16 @@ export interface TableDataItem {

type ActiveScrollElementType = 'scrollBar' | 'scrollContainer';

function normalizeSides(side: TableColumnConfig<any>['align'] | TableColumnConfig<any>['sticky']) {
if (side === 'left') {
return 'start';
}
if (side === 'right') {
return 'end';
}
return side;
}

interface TableState {
// activeScrollElement is required so listener on table scroll won't fire when scrollbar will appear (and vice-versa)
// without that page will wobble on scrolling
Expand All @@ -39,9 +49,9 @@ export interface TableColumnConfig<I> {
/** Cell contents. If you pass a row, the cell contents will be the value of the field named the same as this row. By default: The value of the field with the name equal to the column ID */
template?: string | ((item: I, index: number) => React.ReactNode);
/** Content alignment. */
align?: 'left' | 'center' | 'right';
align?: 'start' | 'end' | 'center' | 'left' | 'right';
/** Sticky column. */
sticky?: 'left' | 'right';
sticky?: 'start' | 'end' | 'left' | 'right';
/** Distinguishes a column among other. */
primary?: boolean;
/** Column width in px or in %. Width can behave unexpectedly (it's more like min-width in block-elements). Sometimes you want to use `table-layout: fixed` */
Expand Down Expand Up @@ -344,7 +354,9 @@ export class Table<I extends TableDataItem = Record<string, string>> extends Rea
<thead className={b('head')}>
<tr className={b('row')}>
{columns.map((column, index) => {
const {id, align, primary, sticky, className} = column;
const {id, align: rawAlign, primary, sticky: rawSticky, className} = column;
const align = normalizeSides(rawAlign);
const sticky = normalizeSides(rawSticky);
const content = Table.getHeadCellContent(column);

return (
Expand Down Expand Up @@ -439,9 +451,10 @@ export class Table<I extends TableDataItem = Record<string, string>> extends Rea
)}
>
{columns.map((column, colIndex) => {
const {id, align, primary, className, sticky} = column;
const {id, align: rawAlign, primary, className, sticky: rawSticky} = column;
const content = Table.getBodyCellContent(column, item, rowIndex);

const align = normalizeSides(rawAlign);
const sticky = normalizeSides(rawSticky);
return (
<td
key={id}
Expand Down Expand Up @@ -527,9 +540,15 @@ export class Table<I extends TableDataItem = Record<string, string>> extends Rea
}

const filteredColumns =
column.sticky === 'left' ? columnsWidth.slice(0, index) : columnsWidth.slice(index + 1);
style[column.sticky] = filteredColumns.reduce<number>((left, width) => {
return _isNumber(width) ? left + width : left;
column.sticky === 'left' || column.sticky === 'start'
? columnsWidth.slice(0, index)
: columnsWidth.slice(index + 1);
const styleName: keyof React.CSSProperties =
column.sticky === 'left' || column.sticky === 'start'
? 'insetInlineStart'
: 'insetInlineEnd';
style[styleName] = filteredColumns.reduce<number>((start, width) => {
return _isNumber(width) ? start + width : start;
}, 0);

return style;
Expand Down
2 changes: 1 addition & 1 deletion src/components/Table/__stories__/utils.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ export const columns: TableColumnConfig<DataItem>[] = [
{
id: 'count',
name: 'Count',
align: 'right',
align: 'end',
},
{
id: 'date',
Expand Down
2 changes: 1 addition & 1 deletion src/components/Table/__tests__/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ export const columns: TableColumnConfig<DataItem>[] = [
{
id: 'count',
name: 'Count',
align: 'right',
align: 'end',
},
{
id: 'date',
Expand Down
2 changes: 1 addition & 1 deletion src/components/Table/hoc/withTableActions/withTableActions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export function enhanceSystemColumn<I>(
const systemColumn = existedColumn || {
id: actionsColumnId,
name: '',
sticky: 'right',
sticky: 'end',
width: 28, // button width
placeholder: '',
};
Expand Down
8 changes: 4 additions & 4 deletions src/components/Table/hoc/withTableSelection/withTableSelection.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@
&__row_selected {
background: var(--g-color-base-selection);

#{variables.$block}__cell_sticky_left,
#{variables.$block}__cell_sticky_right {
#{variables.$block}__cell_sticky_start,
#{variables.$block}__cell_sticky_end {
background: linear-gradient(
to right,
var(--g-color-base-selection),
Expand All @@ -33,8 +33,8 @@
&#{variables.$block}__row_interactive:hover {
background: var(--g-color-base-selection-hover);

#{variables.$block}__cell_sticky_left,
#{variables.$block}__cell_sticky_right {
#{variables.$block}__cell_sticky_start,
#{variables.$block}__cell_sticky_end {
background: linear-gradient(
to right,
var(--g-color-base-selection-hover),
Expand Down
2 changes: 1 addition & 1 deletion src/components/Table/hoc/withTableSelection/withTableSelection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ export function withTableSelection<I extends TableDataItem, E extends {} = {}>(
name: this.renderHeadCell,
template: this.renderBodyCell,
className: b('checkbox_cell'),
sticky: _get(columns, [0, 'sticky']) === 'left' ? 'left' : undefined,
sticky: _get(columns, [0, 'sticky']) === 'start' ? 'start' : undefined,
};

return [selectionColumn, ...columns];
Expand Down
2 changes: 1 addition & 1 deletion src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ $block: '.#{variables.$ns}table-column-setup';
&__item {
// Increasing specificity for overrides
&#{&} {
padding: 0 8px 0 32px;
padding-inline: 32px 8px;
cursor: pointer;
position: relative;

Expand Down
2 changes: 1 addition & 1 deletion src/components/Table/hoc/withTableSorting/withTableSorting.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ export function withTableSorting<I extends TableDataItem, E extends {} = {}>(
</div>,
];

if (column.align === 'right') {
if (column.align === 'right' || column.align === 'end') {
content.reverse();
}

Expand Down
Loading

0 comments on commit 690abb6

Please sign in to comment.