[CP-3148] Proof of concept: Manipulating child components using ref a…

…nd content.
mudita · Oct 1, 2024 · de5d30d · de5d30d
1 parent 0aacfe0
commit de5d30d
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 26 deletions.
diff --git a/libs/generic-view/feature/src/lib/use-dev-views/views/contacts-view.ts b/libs/generic-view/feature/src/lib/use-dev-views/views/contacts-view.ts
@@ -433,9 +433,8 @@ const view: View = {
       "contactMiddleNameText",
       "contactNameSuffixText",
       "contactPhoneNumberText",
-      "contactPhoneTypeText",
       "contactEmailAddressText",
-      "contactEmailTypeText",
+      "contactNickNameText",
       "contactCompanyText",
       "contactDepartmentText",
       "contactWorkTitleText",
@@ -506,33 +505,23 @@ const view: View = {
       },
     },
   },
-  contactPhoneTypeText: {
-    component: "text-plain",
-    dataProvider: {
-      source: "entities-field",
-      entitiesType: "contacts",
-      fields: {
-        "data.text": "phoneNumbers[0].phoneType",
-      },
-    },
-  },
   contactEmailAddressText: {
     component: "text-plain",
     dataProvider: {
       source: "entities-field",
       entitiesType: "contacts",
       fields: {
-        "data.text": "emailAddresses.emailAddress",
+        "data.text": "emailAddresses[0].emailAddress",
       },
     },
   },
-  contactEmailTypeText: {
+  contactNickNameText: {
     component: "text-plain",
     dataProvider: {
       source: "entities-field",
       entitiesType: "contacts",
       fields: {
-        "data.text": "emailAddresses.emailType",
+        "data.text": "nickName",
       },
     },
   },
@@ -572,7 +561,7 @@ const view: View = {
       source: "entities-field",
       entitiesType: "contacts",
       fields: {
-        "data.text": "address[0].streetAddress",
+        "data.text": "address.streetAddress",
       },
     },
   },
@@ -582,7 +571,7 @@ const view: View = {
       source: "entities-field",
       entitiesType: "contacts",
       fields: {
-        "data.text": "address[0].city",
+        "data.text": "address.city",
       },
     },
   },
@@ -592,7 +581,7 @@ const view: View = {
       source: "entities-field",
       entitiesType: "contacts",
       fields: {
-        "data.text": "address[0].country",
+        "data.text": "address.country",
       },
     },
   },

diff --git a/libs/generic-view/ui/src/lib/interactive/list-renderer.tsx b/libs/generic-view/ui/src/lib/interactive/list-renderer.tsx
@@ -3,24 +3,34 @@
  * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
  */
 
-import React, { useEffect } from "react"
+import React, { useLayoutEffect, useRef } from "react"
 import { APIFC } from "generic-view/utils"
 import { ListRendererConfig, ListRendererData } from "generic-view/models"
 
 export const ListRenderer: APIFC<ListRendererData, ListRendererConfig> = ({
   children,
 }) => {
-  useEffect(() => {
-    console.log("Props children:", children)
+  const containerRef = useRef<HTMLDivElement>(null)
 
-    React.Children.forEach(children, (child) => {
-      if (child && typeof child === "object" && "props" in child) {
-        console.log("Element props:", child.props)
+  useLayoutEffect(() => {
+    if (!containerRef.current) {
+      return
+    }
+
+    const childNodes = Array.from(containerRef.current.children) as HTMLElement[]
+    let foundNonEmpty = false
+
+    childNodes.forEach((childNode) => {
+      const textContent = childNode.textContent ?? ""
+
+      if (textContent.trim().length > 0 && !foundNonEmpty) {
+        childNode.style.display = "block"
+        foundNonEmpty = true
       } else {
-        console.log("Non-React element:", child)
+        childNode.style.display = "none"
       }
     })
   }, [children])
 
-  return <>{children}</>
+  return <div ref={containerRef}>{children}</div>
 }