Skip to content

Commit

Permalink
fix: tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@GermanVor
GermanVor committed Feb 13, 2024
1 parent add14b8 commit 4a59966
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 98 deletions.
187 changes: 93 additions & 94 deletions src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,6 @@ import {Gear, Grip, Lock} from '@gravity-ui/icons';
import {DragDropContext, Draggable, Droppable} from 'react-beautiful-dnd';
import type {OnDragEndResponder} from 'react-beautiful-dnd';

import type {
TreeSelectProps,
TreeSelectRenderContainer,
TreeSelectRenderItem,
} from 'src/components/TreeSelect/types';

import {useUniqId} from '../../../../../hooks';
import type {PopperPlacement} from '../../../../../hooks/private';
import {createOnKeyDownHandler} from '../../../../../hooks/useActionHandlers/useActionHandlers';
Expand All @@ -18,6 +12,11 @@ import {Icon} from '../../../../Icon';
import {TreeSelect} from '../../../../TreeSelect/TreeSelect';
import {TreeSelectItem} from '../../../../TreeSelect/TreeSelectItem';
import type {TreeSelectItemProps} from '../../../../TreeSelect/TreeSelectItem';
import type {
TreeSelectProps,
TreeSelectRenderContainer,
TreeSelectRenderItem,
} from '../../../../TreeSelect/types';
import {ListContainerView} from '../../../../useList';
import {block} from '../../../../utils/cn';
import type {TableColumnSetupItem, TableSetting} from '../withTableSettings';
Expand Down Expand Up @@ -136,95 +135,95 @@ export const TableColumnSetup = (props: TableColumnSetupProps) => {
});
};

const renderContainer = React.useCallback<TreeSelectRenderContainer<Item>>(
({renderItem, visibleFlattenIds, items: _items, containerRef, id}) => {
const handleDrugEnd: OnDragEndResponder = ({destination, source}) => {
if (destination?.index !== undefined && destination?.index !== source.index) {
setItems((prevItems) => {
return reorderArray(prevItems, source.index, destination.index);
});
}
};

const visibleFlattenItemList = visibleFlattenIds.map((visibleFlattenId, idx) =>
renderItem(visibleFlattenId, idx),
);

return (
<React.Fragment>
<ListContainerView ref={containerRef} id={id}>
<DragDropContext onDragEnd={handleDrugEnd}>
<Droppable droppableId={uniqId}>
{(droppableProvided) => {
return (
<div
{...droppableProvided.droppableProps}
ref={droppableProvided.innerRef}
>
{visibleFlattenItemList}
{droppableProvided.placeholder}
</div>
);
}}
</Droppable>
</DragDropContext>
</ListContainerView>
<Button view="action" className={applyButtonCn} onClick={onApply}>
{i18n('button_apply')}
</Button>
</React.Fragment>
);
},
[],
);
const renderContainer: TreeSelectRenderContainer<Item> = ({
renderItem,
visibleFlattenIds,
items: _items,
containerRef,
id,
}) => {
const handleDrugEnd: OnDragEndResponder = ({destination, source}) => {
if (destination?.index !== undefined && destination?.index !== source.index) {
setItems((prevItems) => {
return reorderArray(prevItems, source.index, destination.index);
});
}
};

const renderItem = React.useCallback<TreeSelectRenderItem<Item>>(
({data, props, index}) => {
const isDragDisabled = sortable === false;

const endSlot =
data.endSlot ?? (isDragDisabled ? undefined : <Icon data={Grip} size={16} />);

const commonProps = {
...props,
...data,
endSlot,
};

return (
<Draggable
draggableId={data.id}
index={index}
key={`item-key-${data.id}`}
isDragDisabled={isDragDisabled}
>
{(provided, snapshot) => {
const style: React.CSSProperties = {
...provided.draggableProps.style,
};

// not expected offset appears, one way to fix - remove this offsets explicitly
if (snapshot.isDragging) {
style.left = undefined;
style.top = undefined;
}

return (
<TreeSelectItem
ref={provided.innerRef}
{...commonProps}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={style}
active={snapshot.isDragging}
/>
);
}}
</Draggable>
);
},
[sortable],
);
const visibleFlattenItemList = visibleFlattenIds.map((visibleFlattenId, idx) =>
renderItem(visibleFlattenId, idx),
);

return (
<React.Fragment>
<ListContainerView ref={containerRef} id={id}>
<DragDropContext onDragEnd={handleDrugEnd}>
<Droppable droppableId={uniqId}>
{(droppableProvided) => {
return (
<div
{...droppableProvided.droppableProps}
ref={droppableProvided.innerRef}
>
{visibleFlattenItemList}
{droppableProvided.placeholder}
</div>
);
}}
</Droppable>
</DragDropContext>
</ListContainerView>
<Button view="action" className={applyButtonCn} onClick={onApply}>
{i18n('button_apply')}
</Button>
</React.Fragment>
);
};

const renderItem: TreeSelectRenderItem<Item> = ({data, props, index}) => {
const isDragDisabled = sortable === false;

const endSlot =
data.endSlot ?? (isDragDisabled ? undefined : <Icon data={Grip} size={16} />);

const commonProps = {
...props,
...data,
endSlot,
};

return (
<Draggable
draggableId={data.id}
index={index}
key={`item-key-${data.id}`}
isDragDisabled={isDragDisabled}
>
{(provided, snapshot) => {
const style: React.CSSProperties = {
...provided.draggableProps.style,
};

// not expected offset appears, one way to fix - remove this offsets explicitly
if (snapshot.isDragging) {
style.left = undefined;
style.top = undefined;
}

return (
<TreeSelectItem
ref={provided.innerRef}
{...commonProps}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={style}
active={snapshot.isDragging}
/>
);
}}
</Draggable>
);
};

const value = React.useMemo(() => {
const selectedIds: string[] = [];
Expand Down
3 changes: 1 addition & 2 deletions src/components/Table/hoc/withTableSettings/withTableSettings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,10 @@ import _get from 'lodash/get';
import _isString from 'lodash/isString';
import _last from 'lodash/last';

import type {TreeSelectProps} from 'src/components/TreeSelect';

import type {PopperPlacement} from '../../../../hooks/private';
import {Button} from '../../../Button';
import {Icon} from '../../../Icon';
import type {TreeSelectProps} from '../../../TreeSelect';
import {block} from '../../../utils/cn';
import {getComponentName} from '../../../utils/getComponentName';
import type {TableColumnConfig, TableDataItem, TableProps} from '../../Table';
Expand Down
3 changes: 1 addition & 2 deletions src/components/TreeSelect/components/TreeListContainer/TreeListContainer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import React from 'react';

import type {TreeSelectRenderContainerProps} from 'src/components/TreeSelect/types';

import {ListContainerView} from '../../../useList';
import {ListItemRecursiveRenderer} from '../../../useList/components/ListRecursiveRenderer/ListRecursiveRenderer';
import type {TreeSelectRenderContainerProps} from '../../types';

export const TreeListContainer = <T,>({
items,
Expand Down

0 comments on commit 4a59966

Please sign in to comment.