1+ import {
2+ DndContext ,
3+ closestCenter ,
4+ KeyboardSensor ,
5+ PointerSensor ,
6+ useSensor ,
7+ useSensors ,
8+ DragEndEvent ,
9+ } from '@dnd-kit/core'
10+ import {
11+ arrayMove ,
12+ SortableContext ,
13+ sortableKeyboardCoordinates ,
14+ verticalListSortingStrategy ,
15+ } from '@dnd-kit/sortable'
16+ import { RowData , Table } from '@tanstack/react-table'
17+ import React , { useCallback , useRef } from 'react'
18+
19+ import { ColumnSettingsItem } from '@open-condo/ui/src/components/Table/components/ColumnSettingsItem'
20+ import type { ColumnDefWithId } from '@open-condo/ui/src/components/Table/types'
21+
22+ interface ColumnSettingsProps < TData extends RowData = RowData > {
23+ columns : ColumnDefWithId < TData > [ ]
24+ table : Table < TData >
25+ }
26+
27+ export const ColumnSettings = < TData extends RowData = RowData > ( { columns, table } : ColumnSettingsProps < TData > ) => {
28+ const columnWithoutToggleVisibility = useRef < number > (
29+ table . getVisibleLeafColumns ( ) . reduce ( ( acc , column ) => acc + ( column . columnDef . meta ?. enableColumnSettings ? 0 : 1 ) , 0 )
30+ )
31+
32+ const sensors = useSensors (
33+ useSensor ( PointerSensor ) ,
34+ useSensor ( KeyboardSensor , {
35+ coordinateGetter : sortableKeyboardCoordinates ,
36+ } )
37+ )
38+
39+ const handleDragEnd = useCallback ( ( event : DragEndEvent ) => {
40+ const { active, over } = event
41+
42+ if ( active . id !== over ?. id && table . setColumnOrder ) {
43+ const oldIndex = columns . findIndex ( column => column . id === active . id )
44+ const newIndex = columns . findIndex ( column => column . id === over ?. id )
45+
46+ const newOrder = arrayMove ( columns , oldIndex , newIndex ) . map ( col => col . id )
47+ table . setColumnOrder ( newOrder )
48+ }
49+ } , [ columns , table ] )
50+
51+ const handleToggleVisibility = useCallback ( ( columnKey : string , checked : boolean ) => {
52+ const column = table . getColumn ( columnKey )
53+
54+ // NOTE: If column is hidden - reset filter and sorting state
55+ if ( ! checked && column ) {
56+ column . clearSorting ( )
57+ column . setFilterValue ( undefined )
58+ }
59+
60+ column ?. toggleVisibility ( checked )
61+ } , [ table ] )
62+
63+ return (
64+ < DndContext
65+ sensors = { sensors }
66+ collisionDetection = { closestCenter }
67+ onDragEnd = { handleDragEnd }
68+ >
69+ < SortableContext items = { columns . map ( c => c . id ) } strategy = { verticalListSortingStrategy } >
70+ < div className = 'condo-table-column-settings-dropdown' >
71+ { columns . map ( ( column ) => {
72+ if ( ! table . getColumn ( column . id ) ?. columnDef ?. meta ?. enableColumnSettings ) return
73+ const isVisible = table . getColumn ( column . id ) ?. getIsVisible ( )
74+ const isLastVisibleColumn = isVisible && table . getVisibleLeafColumns ( ) . length === columnWithoutToggleVisibility . current + 1
75+
76+ return (
77+ < ColumnSettingsItem
78+ key = { column . id }
79+ column = { column }
80+ table = { table }
81+ isVisible = { isVisible || false }
82+ isLastVisibleColumn = { isLastVisibleColumn || false }
83+ onToggleVisibility = { ( checked : boolean ) => handleToggleVisibility ( column . id , checked ) }
84+ />
85+ )
86+ } ) }
87+ </ div >
88+ </ SortableContext >
89+ </ DndContext >
90+ )
91+ }
0 commit comments