Add more feature to renderer

Author: TheZoker

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

@@ -22,58 +22,76 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import React, { useEffect, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import type { Categorization, Category, LayoutProps } from '@jsonforms/core';
+import { isVisible } from '@jsonforms/core';
 import {
   TranslateProps,
   withJsonFormsLayoutProps,
   withTranslateProps,
 } from '@jsonforms/react';
 import { CategorizationList } from './CategorizationList';
 import { SingleCategory } from './SingleCategory';
-import { isCategorization } from './tester';
 import { withVanillaControlProps } from '../../util';
-import type { VanillaRendererProps } from '../../index';
+import type { AjvProps, VanillaRendererProps } from '../../index';
+import { withAjvProps } from '../../index';
 
 export interface CategorizationState {
   selectedCategory: Category;
 }
 
+interface CategorizationProps {
+  selected?: number;
+  onChange?(selected: number, prevSelected: number): void;
+}
+
 export const CategorizationRenderer = ({
+  data,
   uischema,
   schema,
   path,
+  selected,
   t,
   visible,
   getStyleAsClassName,
-}: LayoutProps & VanillaRendererProps & TranslateProps) => {
-  const findCategory = (categorization: Categorization): Category => {
-    const category = categorization.elements[0];
-
-    if (isCategorization(category)) {
-      return findCategory(category);
-    }
-
-    return category;
-  };
-
+  onChange,
+  ajv,
+}: LayoutProps &
+  VanillaRendererProps &
+  TranslateProps &
+  CategorizationProps &
+  AjvProps) => {
   const categorization = uischema as Categorization;
+  const categories = useMemo(
+    () =>
+      categorization.elements.filter((category: Category) =>
+        isVisible(category, data, undefined, ajv)
+      ),
+    [categorization, data, ajv]
+  ) as [Category];
   const classNames = getStyleAsClassName('categorization');
   const masterClassNames = getStyleAsClassName('categorization.master');
   const detailClassNames = getStyleAsClassName('categorization.detail');
   const subcategoriesClassName = getStyleAsClassName('category.subcategories');
   const groupClassName = getStyleAsClassName('category.group');
 
-  useEffect(() => {
-    setSelectedCategory(findCategory(categorization));
-  }, [uischema, schema]);
+  const [previousCategorization, setPreviousCategorization] =
+    useState<Categorization>(uischema as Categorization);
+  const [activeCategory, setActiveCategory] = useState<number>(selected ?? 0);
 
-  const [selectedCategory, setSelectedCategory] = useState(
-    findCategory(categorization)
-  );
+  const safeCategory =
+    activeCategory >= categorization.elements.length ? 0 : activeCategory;
 
-  const onCategorySelected = (category: Category) => () => {
-    return setSelectedCategory(category);
+  if (categorization !== previousCategorization) {
+    setActiveCategory(0);
+    setPreviousCategorization(categorization);
+  }
+
+  const onCategorySelected = (categoryIndex: number) => () => {
+    if (onChange) {
+      return onChange(categoryIndex, safeCategory);
+    }
+    return setActiveCategory(categoryIndex);
   };
 
   return (
@@ -84,7 +102,7 @@ export const CategorizationRenderer = ({
       <div className={masterClassNames}>
         <CategorizationList
           categorization={categorization}
-          selectedCategory={selectedCategory}
+          selectedCategory={categories[safeCategory]}
           depth={0}
           onSelect={onCategorySelected}
           subcategoriesClassName={subcategoriesClassName}
@@ -94,15 +112,18 @@ export const CategorizationRenderer = ({
       </div>
       <div className={detailClassNames}>
         <SingleCategory
-          category={selectedCategory}
+          category={categories[safeCategory]}
           schema={schema}
           path={path}
+          key={safeCategory}
         />
       </div>
     </div>
   );
 };
 
-export default withVanillaControlProps(
-  withTranslateProps(withJsonFormsLayoutProps(CategorizationRenderer))
+export default withAjvProps(
+  withVanillaControlProps(
+    withTranslateProps(withJsonFormsLayoutProps(CategorizationRenderer))
+  )
 );

packages/vanilla-renderers/src/index.ts

@@ -22,6 +22,8 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
+import Ajv from 'ajv';
+
 import { RankedTester } from '@jsonforms/core';
 
 import {
@@ -102,6 +104,10 @@ export interface VanillaRendererProps extends WithClassname {
   getStyleAsClassName?(string: string, ...args: any[]): string;
 }
 
+export interface AjvProps {
+  ajv: Ajv;
+}
+
 export interface WithChildren {
   children: any;
 }

packages/vanilla-renderers/src/util/index.tsx

@@ -25,10 +25,8 @@
 export * from './i18nDefaults';
 import React, { ComponentType, useMemo } from 'react';
 import isEmpty from 'lodash/isEmpty';
-import {
+import type {
   ControlElement,
-  convertToValidClassName,
-  getConfig,
   JsonFormsState,
   OwnPropsOfCell,
   OwnPropsOfControl,
@@ -37,9 +35,10 @@ import {
   StatePropsOfCell,
   StatePropsOfControl,
 } from '@jsonforms/core';
+import { convertToValidClassName, getAjv, getConfig } from '@jsonforms/core';
 import { useJsonForms } from '@jsonforms/react';
 import { getStyle, getStyleAsClassName } from '../reducers';
-import { VanillaRendererProps } from '../index';
+import type { AjvProps, VanillaRendererProps } from '../index';
 import { findStyle, findStyleAsClassName } from '../reducers/styling';
 import { useStyles } from '../styles';
 
@@ -240,6 +239,16 @@ const withVanillaCellPropsForType =
       );
     };
 
+export const withAjvProps = <P extends object>(
+  Component: ComponentType<AjvProps & P>
+) =>
+  function WithAjvProps(props: P) {
+    const ctx = useJsonForms();
+    const ajv = getAjv({ jsonforms: { ...ctx } });
+
+    return <Component {...props} ajv={ajv} />;
+  };
+
 export const withVanillaCellProps =
   withVanillaCellPropsForType('control.input');