Move filter logic to list file

Author: TheZoker

packages/vanilla-renderers/src/complex/categorization/CategorizationList.tsx

@@ -28,18 +28,21 @@ import {
   Categorization,
   deriveLabelForUISchemaElement,
   Translator,
+  isVisible,
 } from '@jsonforms/core';
 import { isCategorization } from './tester';
+import { AjvProps } from '../../util';
 
 const getCategoryClassName = (
   category: Category,
   selectedCategory: Category
 ): string => (selectedCategory === category ? 'selected' : '');
 
 export interface CategorizationProps {
-  filteredCategorization: (Category | Categorization)[];
+  elements: (Category | Categorization)[];
   selectedCategory: Category;
   depth: number;
+  data: any;
   onSelect: any;
   subcategoriesClassName: string;
   groupClassName: string;
@@ -48,31 +51,38 @@ export interface CategorizationProps {
 
 export const CategorizationList = ({
   selectedCategory,
-  filteredCategorization,
+  elements,
+  data,
   depth,
   onSelect,
   subcategoriesClassName,
   groupClassName,
   t,
-}: CategorizationProps) => {
+  ajv,
+}: CategorizationProps & AjvProps) => {
+  const filteredElements = elements.filter(
+    (category: Category | Categorization) => {
+      isVisible(category, data, undefined, ajv);
+    }
+  );
+
   const categoryLabels = useMemo(
-    () =>
-      filteredCategorization.map((cat) =>
-        deriveLabelForUISchemaElement(cat, t)
-      ),
-    [filteredCategorization, t]
+    () => filteredElements.map((cat) => deriveLabelForUISchemaElement(cat, t)),
+    [filteredElements, t]
   );
 
   return (
     <ul className={subcategoriesClassName}>
-      {filteredCategorization.map((category, idx) => {
+      {filteredElements.map((category, idx) => {
         if (isCategorization(category)) {
           return (
             <li key={categoryLabels[idx]} className={groupClassName}>
               <span>{categoryLabels[idx]}</span>
               <CategorizationList
                 selectedCategory={selectedCategory}
-                filteredCategorization={category.elements}
+                elements={category.elements}
+                data={data}
+                ajv={ajv}
                 depth={depth + 1}
                 onSelect={onSelect}
                 subcategoriesClassName={subcategoriesClassName}

packages/vanilla-renderers/src/complex/categorization/CategorizationRenderer.tsx

@@ -24,7 +24,6 @@
 */
 import React, { useMemo, useState } from 'react';
 import type { Categorization, Category, LayoutProps } from '@jsonforms/core';
-import { isVisible } from '@jsonforms/core';
 import {
   TranslateProps,
   withJsonFormsLayoutProps,
@@ -61,11 +60,8 @@ export const CategorizationRenderer = ({
   CategorizationProps &
   AjvProps) => {
   const categorization = uischema as Categorization;
-  const filteredCategorization = useMemo(
-    () =>
-      categorization.elements.filter((category: Category | Categorization) =>
-        isVisible(category, data, undefined, ajv)
-      ),
+  const elements = useMemo(
+    () => categorization.elements,
     [categorization, data, ajv]
   ) as (Category | Categorization)[];
   const classNames = getStyleAsClassName('categorization');
@@ -100,8 +96,10 @@ export const CategorizationRenderer = ({
     >
       <div className={masterClassNames}>
         <CategorizationList
-          filteredCategorization={filteredCategorization}
-          selectedCategory={filteredCategorization[safeCategory]}
+          elements={elements}
+          selectedCategory={elements[safeCategory] as Category}
+          data={data}
+          ajv={ajv}
           depth={0}
           onSelect={onCategorySelected}
           subcategoriesClassName={subcategoriesClassName}
@@ -111,7 +109,7 @@ export const CategorizationRenderer = ({
       </div>
       <div className={detailClassNames}>
         <SingleCategory
-          category={filteredCategorization[safeCategory]}
+          category={elements[safeCategory] as Category}
           schema={schema}
           path={path}
           key={safeCategory}