11'use client'
22
3- import { memo , useCallback , useEffect , useMemo , useRef , useState } from 'react'
3+ import { memo , useCallback , useMemo , useRef , useState } from 'react'
44import { Button , ChipDropdown , ChipInput } from '@sim/emcn'
55import { Plus , X } from '@sim/emcn/icons'
66import { generateShortId } from '@sim/utils/id'
@@ -28,7 +28,6 @@ function selectFilterOperators(column: ColumnDefinition | undefined): Set<string
2828 return column ?. multiple ? MULTI_SELECT_FILTER_OPERATORS : SINGLE_SELECT_FILTER_OPERATORS
2929}
3030
31- /** The predicate the panel's current rows amount to — blank rows contribute nothing. */
3231function toAppliedPredicate (
3332 rules : FilterRule [ ] ,
3433 columns : ColumnDefinition [ ]
@@ -47,19 +46,34 @@ interface TableFilterProps {
4746
4847export function TableFilter ( { columns, filter, onChange } : TableFilterProps ) {
4948 const lastAppliedFilterRef = useRef < string | undefined > ( undefined )
50- const onChangeRef = useRef ( onChange )
5149 const [ rules , setRules ] = useState < FilterRule [ ] > ( ( ) => {
5250 const fromFilter = predicateToFilterRules ( filter )
5351 return fromFilter . length > 0 ? fromFilter : [ createRule ( columns ) ]
5452 } )
53+ const rulesRef = useRef ( rules )
54+ rulesRef . current = rules
5555 // Seed the "already applied" signature from the rules the panel actually
5656 // renders, not the raw prop: a saved tree the flat builder cannot express
5757 // (deeply nested groups, wire key order) round-trips differently, and seeding
5858 // from the prop would fire an unedited autosave of that lossy form the
5959 // moment the panel opens. The normalized form persists only once the user
6060 // really edits a rule.
6161 lastAppliedFilterRef . current ??= JSON . stringify ( toAppliedPredicate ( rules , columns ) )
62- onChangeRef . current = onChange
62+
63+ const applyRules = useCallback (
64+ ( update : ( current : FilterRule [ ] ) => FilterRule [ ] ) => {
65+ const nextRules = update ( rulesRef . current )
66+ rulesRef . current = nextRules
67+ setRules ( nextRules )
68+
69+ const nextFilter = toAppliedPredicate ( nextRules , columns )
70+ const signature = JSON . stringify ( nextFilter )
71+ if ( signature === lastAppliedFilterRef . current ) return
72+ lastAppliedFilterRef . current = signature
73+ onChange ( nextFilter )
74+ } ,
75+ [ columns , onChange ]
76+ )
6377
6478 // `value` is the filter field key (column id); `label` is what the user sees.
6579 const columnOptions = useMemo (
@@ -73,71 +87,67 @@ export function TableFilter({ columns, filter, onChange }: TableFilterProps) {
7387 )
7488
7589 const handleAdd = useCallback ( ( ) => {
76- setRules ( ( prev ) => [ ...prev , createRule ( columns ) ] )
77- } , [ columns ] )
90+ applyRules ( ( current ) => [ ...current , createRule ( columns ) ] )
91+ } , [ applyRules , columns ] )
7892
7993 const handleRemove = useCallback (
8094 ( id : string ) => {
81- setRules ( ( prev ) => {
82- const next = prev . filter ( ( rule ) => rule . id !== id )
95+ applyRules ( ( current ) => {
96+ const next = current . filter ( ( rule ) => rule . id !== id )
8397 return next . length > 0 ? next : [ createRule ( columns ) ]
8498 } )
8599 } ,
86- [ columns ]
100+ [ applyRules , columns ]
87101 )
88102
89- const handleUpdate = useCallback ( ( id : string , field : keyof FilterRule , value : string ) => {
90- setRules ( ( prev ) => prev . map ( ( r ) => ( r . id === id ? { ...r , [ field ] : value } : r ) ) )
91- } , [ ] )
103+ const handleUpdate = useCallback (
104+ ( id : string , field : keyof FilterRule , value : string ) => {
105+ applyRules ( ( current ) =>
106+ current . map ( ( rule ) => ( rule . id === id ? { ...rule , [ field ] : value } : rule ) )
107+ )
108+ } ,
109+ [ applyRules ]
110+ )
92111
93- const handleToggleLogical = useCallback ( ( id : string ) => {
94- setRules ( ( prev ) =>
95- prev . map ( ( r ) =>
96- r . id === id ? { ...r , logicalOperator : r . logicalOperator === 'and' ? 'or' : 'and' } : r
112+ const handleToggleLogical = useCallback (
113+ ( id : string ) => {
114+ applyRules ( ( current ) =>
115+ current . map ( ( rule ) =>
116+ rule . id === id
117+ ? { ...rule , logicalOperator : rule . logicalOperator === 'and' ? 'or' : 'and' }
118+ : rule
119+ )
97120 )
98- )
99- } , [ ] )
121+ } ,
122+ [ applyRules ]
123+ )
100124
101125 // Switching a rule's column across the select boundary changes what values and
102126 // operators are valid, so clear the value and coerce an unsupported operator
103127 // back to `eq` — otherwise a stale free-text value or a range operator would
104128 // apply against a select column and be rejected server-side.
105129 const handleColumnChange = useCallback (
106130 ( id : string , columnId : string ) => {
107- setRules ( ( prev ) =>
108- prev . map ( ( r ) => {
109- if ( r . id !== id ) return r
110- const previous = columnById . get ( r . column )
131+ applyRules ( ( current ) =>
132+ current . map ( ( rule ) => {
133+ if ( rule . id !== id ) return rule
134+ const previous = columnById . get ( rule . column )
111135 const next = columnById . get ( columnId )
112136 const wasSelect = previous ?. type === 'select'
113137 const isSelect = next ?. type === 'select'
114- if ( ! wasSelect && ! isSelect ) return { ...r , column : columnId }
138+ if ( ! wasSelect && ! isSelect ) return { ...rule , column : columnId }
115139 // Single- and multi-select take different operators, so a switch
116140 // between them has to fall back too, not just select ↔ non-select.
117141 const allowed = selectFilterOperators ( next )
118142 const fallback = next ?. multiple ? 'contains' : 'eq'
119- const operator = isSelect && ! allowed . has ( r . operator ) ? fallback : r . operator
120- return { ...r , column : columnId , operator, value : '' }
143+ const operator = isSelect && ! allowed . has ( rule . operator ) ? fallback : rule . operator
144+ return { ...rule , column : columnId , operator, value : '' }
121145 } )
122146 )
123147 } ,
124- [ columnById ]
148+ [ applyRules , columnById ]
125149 )
126150
127- // Applies on every rules change. Rules only change on completed gestures —
128- // dropdown picks, row add/remove, conjunction toggles, and the value field's
129- // Enter/blur commit ({@link FilterValueInput} buffers keystrokes locally) —
130- // so nothing is ever pending and there is nothing to lose on unmount. The
131- // signature guard keeps no-op changes (a blank row added, an untouched
132- // reseed) from writing.
133- useEffect ( ( ) => {
134- const nextFilter = toAppliedPredicate ( rules , columns )
135- const signature = JSON . stringify ( nextFilter )
136- if ( signature === lastAppliedFilterRef . current ) return
137- lastAppliedFilterRef . current = signature
138- onChangeRef . current ( nextFilter )
139- } , [ rules , columns ] )
140-
141151 return (
142152 < div className = 'border-[var(--border)] border-b bg-[var(--bg)] px-4 py-2' >
143153 < div className = 'flex flex-col gap-1' >
0 commit comments