fix(FOROME-504): add hiding attachments

src/pages/filter/ui/query-builder/ui/next-step-content-item.tsx

@@ -43,17 +43,35 @@ interface IProps {
   group: any
   index: number
   currNo: number
+  expanded: boolean
+  setExpandOnClick: () => void
 }
 
 export const NextStepContentItem = observer(
-  ({ group, index, currNo }: IProps): ReactElement => {
+  ({
+    group,
+    index,
+    currNo,
+    expanded,
+    setExpandOnClick,
+  }: IProps): ReactElement => {
     // const [isChecked, setIsChecked] = useState(true)
 
     // const toggleChecked = () => {
     //   setIsChecked(prev => !prev)
     // }
-
     const [isVisible, setIsVisible] = useState(false)
+    const limitSize = 3
+
+    const array = group.find((elem: any) => Array.isArray(elem))
+
+    const getButtonMessage = () => {
+      if (group[0] === StepTypeEnum.Numeric) return ''
+
+      const size = array.length - limitSize
+
+      return expanded ? `Hide ${size} variants` : `Show ${size} variants`
+    }
 
     // const toggleVisible = () => {
     //   setIsVisible(prev => !prev)
@@ -182,15 +200,22 @@ export const NextStepContentItem = observer(
 
             <div className="flex flex-col text-14 font-normal h-full flex-wrap mt-1">
               {group[0] === StepTypeEnum.Numeric &&
-                getNumericExpression(
-                  group.find((elem: any) => Array.isArray(elem)),
-                  group[1],
-                )}
+                getNumericExpression(array, group[1])}
 
               {group[0] !== StepTypeEnum.Numeric &&
-                group
-                  .find((elem: any) => Array.isArray(elem))
+                array
+                  .slice(0, expanded ? Number.MAX_SAFE_INTEGER : limitSize)
                   .map((item: any[]) => <div key={Math.random()}>{item}</div>)}
+
+              {group[0] !== StepTypeEnum.Numeric && array.length > 3 && (
+                <div
+                  key={Math.random()}
+                  className="text-blue-bright cursor-pointer"
+                  onClick={setExpandOnClick}
+                >
+                  {getButtonMessage()}
+                </div>
+              )}
             </div>
           </div>
         </ContentControl>

src/pages/filter/ui/query-builder/ui/next-step-content.tsx

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react'
+import { ReactElement, useState } from 'react'
 import { observer } from 'mobx-react-lite'
 import styled from 'styled-components'
 
@@ -30,6 +30,11 @@ const ContentEditor = styled.div`
 export const NextStepContent = observer(({ index }: IProps): ReactElement => {
   const groups = dtreeStore.getStepData[index].groups
 
+  const [expanded, setExpanded] = useState<Record<number, boolean>>({})
+  const expandGroup = (id: number) => () => {
+    setExpanded(prev => ({ ...prev, [id]: !prev[id] }))
+  }
+
   const currentStepData = dtreeStore.getStepData[index]
   const isExcluded = currentStepData.excluded
   const result = String(!isExcluded)
@@ -39,8 +44,22 @@ export const NextStepContent = observer(({ index }: IProps): ReactElement => {
   const getWords = (text: string | null) => {
     if (!text) return []
 
-    const textList = text.split(/{|}/)
+    const splitByBraces = text.split('{').map((item, ind) => {
+      if (ind === 0) return [`${item}{`]
 
+      const elements = item.split('}').map((x, i) => {
+        if (i === 1) return `}${x}`
+        if (expanded[ind - 1]) return x
+        const rex = x.split(',')
+        if (rex.length <= 3) return rex.join(',')
+        return rex.slice(0, 3).join(',') + ', ...'
+      })
+
+      return elements.join('')
+    })
+
+    const res = splitByBraces.join('')
+    const textList = res.split(/{|}/)
     const changedTextList = textList.map(element => {
       if (element.includes('"')) return `{${element}}`
 
@@ -49,22 +68,24 @@ export const NextStepContent = observer(({ index }: IProps): ReactElement => {
 
     const flatedTextList = changedTextList.flat()
 
-    const words = flatedTextList.map((word, wordIndex: number) => {
-      const changedWord = word.trim()
-
-      switch (changedWord) {
-        case 'if':
-        case 'and':
-        case 'or':
-        case 'not':
-          return (
-            <span key={wordIndex} className="text-white">{` ${word} `}</span>
-          )
-
-        default:
-          return <span key={wordIndex}>{`${word} `}</span>
-      }
-    })
+    const words = flatedTextList
+      .filter(it => !!it)
+      .map((word, wordIndex: number) => {
+        const changedWord = word.trim()
+
+        switch (changedWord) {
+          case 'if':
+          case 'and':
+          case 'or':
+          case 'not':
+            return (
+              <span key={wordIndex} className="text-white">{` ${word} `}</span>
+            )
+
+          default:
+            return <span key={wordIndex}>{`${word} `}</span>
+        }
+      })
 
     return words
   }
@@ -89,6 +110,8 @@ export const NextStepContent = observer(({ index }: IProps): ReactElement => {
                 group={group}
                 index={index}
                 currNo={currNo}
+                setExpandOnClick={expandGroup(currNo)}
+                expanded={expanded[currNo] || false}
               />
             ))
           ) : (
@@ -111,9 +134,7 @@ export const NextStepContent = observer(({ index }: IProps): ReactElement => {
               )}
 
               <div className="flex">
-                <div className="text-orange-secondary mr-2">
-                  {wordList.map(element => element)}
-                </div>
+                <div className="text-orange-secondary mr-2">{wordList}</div>
               </div>
 
               <div className="text-grey-light pl-2">return {result}</div>