1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
import React from 'react';
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
import { Menu } from 'react-feather';
import { useTranslation } from 'react-i18next';
import BaseModal from '~/components/shared/BaseModal';
import s from './ModalManageConnectionColumns.module.scss';
import Switch from './SwitchThemed';
const getItemStyle = (isDragging, draggableStyle) => {
return {
...draggableStyle,
...(isDragging && {
background: 'transparent',
}),
};
};
export default function ModalManageConnectionColumns({
isOpen,
onRequestClose,
columns,
hiddenColumns,
setColumns,
setHiddenColumns,
}) {
const { t } = useTranslation();
const onDragEnd = (result) => {
if (!result.destination) {
return;
}
const items = Array.from(columns);
const [removed] = items.splice(result.source.index, 1);
items.splice(result.destination.index, 0, removed);
setColumns(items);
localStorage.setItem('columns', JSON.stringify(items));
};
const onShowChange = (column, val) => {
if (!val) {
hiddenColumns.push(column.accessor);
} else {
const idx = hiddenColumns.indexOf(column.accessor);
hiddenColumns.splice(idx, 1);
}
setHiddenColumns(Array.from(hiddenColumns));
localStorage.setItem('hiddenColumns', JSON.stringify(hiddenColumns));
};
return (
<BaseModal isOpen={isOpen} onRequestClose={onRequestClose}>
<div>
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="droppable-modal">
{(provided) => (
<div {...provided.droppableProps} ref={provided.innerRef}>
{columns
.filter((i) => i.accessor !== 'id')
.map((column) => {
const show = !hiddenColumns.includes(column.accessor);
return (
<Draggable
key={column.accessor}
draggableId={column.accessor}
index={columns.findIndex((a) => a.accessor === column.accessor)}
>
{(provided, snapshot) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
className={s.columnManagerRow}
style={getItemStyle(snapshot.isDragging, provided.draggableProps.style)}
>
<Menu />
<span className={s.columnManageLabel}>{t(column.Header)}</span>
<div className={s.columnManageSwitch}>
<Switch
size="mini"
checked={show}
onChange={(val) => onShowChange(column, val)}
/>
</div>
</div>
)}
</Draggable>
);
})}
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
</div>
</BaseModal>
);
}
|
