diff --git a/src/components/ConditionalFilter/useContainerState.ts b/src/components/ConditionalFilter/useContainerState.ts index 7ec420120..bc4117247 100644 --- a/src/components/ConditionalFilter/useContainerState.ts +++ b/src/components/ConditionalFilter/useContainerState.ts @@ -49,16 +49,20 @@ const removeElement = (container: FilterContainer, position: number) => { return removeConstraint(newContainer); }; -const removeEmptyElements = (container: FilterContainer, provider: FilterValueProvider): FilterContainer => { - const emptyIndex = container.findIndex(el => - FilterElement.isCompatible(el) && (!provider.isPersisted(el) || el.isEmpty()) - ) +const removeEmptyElements = ( + container: FilterContainer, + provider: FilterValueProvider, +): FilterContainer => { + const emptyIndex = container.findIndex( + el => + FilterElement.isCompatible(el) && + (!provider.isPersisted(el) || el.isEmpty()), + ); - if (emptyIndex < 0) return container - - return removeEmptyElements(removeElement(container, emptyIndex), provider) -} + if (emptyIndex < 0) return container; + return removeEmptyElements(removeElement(container, emptyIndex), provider); +}; export const useContainerState = (valueProvider: FilterValueProvider) => { const [value, setValue] = useState([]); @@ -91,6 +95,11 @@ export const useContainerState = (valueProvider: FilterValueProvider) => { setValue(v => v.map(updateFilterElement(index, cb))); }; + const getAt = (position: string) => { + const index = parseInt(position, 10); + return value[index]; + }; + const updateBySlug = (slug: string, cb: StateCallback) => { setValue(v => v.map(el => { @@ -136,18 +145,19 @@ export const useContainerState = (valueProvider: FilterValueProvider) => { }; const clearEmpty = () => { - setValue(v => removeEmptyElements(v, valueProvider)) - } + setValue(v => removeEmptyElements(v, valueProvider)); + }; return { create, exist, updateBySlug, createEmpty, + getAt, updateAt, removeAt, value, clear, - clearEmpty + clearEmpty, }; }; diff --git a/src/components/ConditionalFilter/useFilterContainer.ts b/src/components/ConditionalFilter/useFilterContainer.ts index df9ed9648..660a9b33b 100644 --- a/src/components/ConditionalFilter/useFilterContainer.ts +++ b/src/components/ConditionalFilter/useFilterContainer.ts @@ -13,7 +13,16 @@ export const useFilterContainer = ( leftOperandsProvider: LeftOperandsProvider, ) => { const { - containerState: { value, updateAt, removeAt, createEmpty, create, exist, updateBySlug }, + containerState: { + value, + updateAt, + getAt, + removeAt, + createEmpty, + create, + exist, + updateBySlug, + }, } = useConditionalFilterContext(); const addEmpty = () => { @@ -21,22 +30,33 @@ export const useFilterContainer = ( }; const updateLeftOperator = (position: string, leftOperator: LeftOperand) => { + const current = getAt(position); + const dependency = Constraint.getDependency(leftOperator.value); + const currentDependency = + FilterElement.isCompatible(current) && + Constraint.getDependency(current.value.value); + updateAt(position, el => el.updateLeftOperator(leftOperator)); - const dependency = Constraint.getDependency(leftOperator.value) + if (currentDependency && !dependency) { + updateBySlug(currentDependency, el => { + el.clearConstraint(); + }); - if (!dependency) return - - if (!exist(dependency)) { - create(FilterElement.createStaticBySlug(dependency)) - return + return; } - updateBySlug(dependency, (el) => { - const newConstraint = Constraint.fromSlug(dependency) + if (!dependency) return; - if (newConstraint) el.setConstraint(newConstraint) - }) + if (!exist(dependency)) { + create(FilterElement.createStaticBySlug(dependency)); + return; + } + + updateBySlug(dependency, el => { + const newConstraint = Constraint.fromSlug(dependency); + if (newConstraint) el.setConstraint(newConstraint); + }); }; const updateLeftLoadingState = (position: string, loading: boolean) => {