@dbcdk/react-components 0.0.13 → 0.0.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -68,24 +68,29 @@ function isFilterActive(value) {
|
|
|
68
68
|
return value.trim().length > 0;
|
|
69
69
|
return value != null;
|
|
70
70
|
}
|
|
71
|
+
const VALUELESS_OPERATORS = ['isEmpty', 'isNotEmpty'];
|
|
71
72
|
export function FilterField({ field, control, operator, value, onChange, operators, options = [], single = true, size = 'md', label, placeholder = 'Type value…', disabled, 'data-cy': dataCy, ...inputProps }) {
|
|
72
73
|
var _a, _b;
|
|
73
|
-
const [selectedOperator, setSelectedOperator] = useState(operator);
|
|
74
74
|
const ops = useMemo(() => operators !== null && operators !== void 0 ? operators : DEFAULT_TEXT_OPERATORS, [operators]);
|
|
75
|
+
// internal operator state (source of truth for UI)
|
|
76
|
+
const [selectedOperator, setSelectedOperator] = useState(operator);
|
|
77
|
+
// "active" based on value only (as requested)
|
|
75
78
|
const active = isFilterActive(value);
|
|
76
|
-
//
|
|
77
|
-
const [localValue, setLocalValue] = useState((_a = value) !== null && _a !== void 0 ? _a : '');
|
|
78
|
-
const debounceRef = useRef(null);
|
|
79
|
-
const isTypingRef = useRef(false);
|
|
79
|
+
// Overwrite internal operator if parent sends a new one
|
|
80
80
|
useEffect(() => {
|
|
81
81
|
if (ops.includes(operator)) {
|
|
82
82
|
setSelectedOperator(operator);
|
|
83
83
|
}
|
|
84
84
|
}, [operator, ops]);
|
|
85
|
+
// Local state ONLY for input control (to avoid URL->props lag)
|
|
86
|
+
const [localValue, setLocalValue] = useState((_a = value) !== null && _a !== void 0 ? _a : '');
|
|
87
|
+
const debounceRef = useRef(null);
|
|
88
|
+
const isTypingRef = useRef(false);
|
|
85
89
|
const emit = (next) => {
|
|
86
90
|
var _a, _b;
|
|
87
91
|
const nextOperator = (_a = next.operator) !== null && _a !== void 0 ? _a : selectedOperator;
|
|
88
92
|
const nextValue = (_b = next.value) !== null && _b !== void 0 ? _b : value;
|
|
93
|
+
// Always keep internal operator in sync when user picks one
|
|
89
94
|
if (next.operator)
|
|
90
95
|
setSelectedOperator(nextOperator);
|
|
91
96
|
onChange({
|
|
@@ -94,6 +99,16 @@ export function FilterField({ field, control, operator, value, onChange, operato
|
|
|
94
99
|
value: nextValue,
|
|
95
100
|
});
|
|
96
101
|
};
|
|
102
|
+
const handleOperatorChange = (op) => {
|
|
103
|
+
setSelectedOperator(op);
|
|
104
|
+
if (!active && !VALUELESS_OPERATORS.includes(op))
|
|
105
|
+
return;
|
|
106
|
+
if (VALUELESS_OPERATORS.includes(op)) {
|
|
107
|
+
emit({ operator: op, value: null });
|
|
108
|
+
return;
|
|
109
|
+
}
|
|
110
|
+
emit({ operator: op });
|
|
111
|
+
};
|
|
97
112
|
const scheduleEmitValue = (nextVal) => {
|
|
98
113
|
if (debounceRef.current)
|
|
99
114
|
clearTimeout(debounceRef.current);
|
|
@@ -122,7 +137,7 @@ export function FilterField({ field, control, operator, value, onChange, operato
|
|
|
122
137
|
clearTimeout(debounceRef.current);
|
|
123
138
|
};
|
|
124
139
|
}, []);
|
|
125
|
-
return (_jsxs("div", { ...(dataCy ? { 'data-cy': dataCy } : {}), className: `${styles.filterField} ${styles[size]} ${active ? styles.active : ''}`, children: [label ? _jsx("span", { className: `${styles.label} ${styles[size]}`, children: label }) : null, _jsx(OperatorDropdown, { value: selectedOperator, onChange:
|
|
140
|
+
return (_jsxs("div", { ...(dataCy ? { 'data-cy': dataCy } : {}), className: `${styles.filterField} ${styles[size]} ${active ? styles.active : ''}`, children: [label ? _jsx("span", { className: `${styles.label} ${styles[size]}`, children: label }) : null, _jsx(OperatorDropdown, { value: selectedOperator, onChange: handleOperatorChange, operators: ops, size: size, disabled: disabled }), _jsx("div", { className: `${control === 'input' ? 'dbc-flex dbc-flex-grow' : styles.valueWrapper}`, children: control === 'input' ? (_jsx(Input, { ...inputProps, value: localValue, onChange: e => {
|
|
126
141
|
const next = e.currentTarget.value;
|
|
127
142
|
isTypingRef.current = true;
|
|
128
143
|
setLocalValue(next);
|