Merge branch 'fix/filter-order' into 'dev'

fix(filter): order of filters See merge request Frontend/synerise-design!2221
Synerise · Dec 22, 2021 · eb9fb27 · eb9fb27
2 parents c2345db + c46c1a4
commit eb9fb27
Showing 1 changed file with 10 additions and 2 deletions.
diff --git a/packages/components/filter/src/Filter.tsx b/packages/components/filter/src/Filter.tsx
@@ -36,6 +36,8 @@ const Filter: React.FC<FilterProps> = ({
   addFilterComponent,
   texts,
 }) => {
+  const [activeExpressionId, setActiveExpressionId] = React.useState<string | null>(null);
+
   const { formatMessage } = useIntl();
   const text = React.useMemo(
     () => ({
@@ -94,7 +96,13 @@ const Filter: React.FC<FilterProps> = ({
       const Component = component[expression.type];
       const LogicComponent = expression.logic && component[expression.logic.type];
       return (
-        <S.ExpressionWrapper key={expression.id} data-dropLabel={text.dropMeHere} index={index}>
+        <S.ExpressionWrapper
+          key={expression.id}
+          data-dropLabel={text.dropMeHere}
+          index={index}
+          style={expression.id === activeExpressionId ? { zIndex: 10001 } : undefined}
+          onClick={(): void => setActiveExpressionId(expression.id)}
+        >
           <Component {...expression.data} {...componentProps(expression)} />
           {expression.logic && index + 1 < expressions.length && (
             <S.LogicWrapper>
@@ -104,7 +112,7 @@ const Filter: React.FC<FilterProps> = ({
         </S.ExpressionWrapper>
       );
     },
-    [componentProps, expressions.length, text]
+    [componentProps, expressions.length, activeExpressionId, text]
   );
 
   return (