fix translation rerender

eclipsesource · Aug 15, 2024 · ddb2eb0 · ddb2eb0
1 parent 7abd4ec
commit ddb2eb0
Show file tree

Hide file tree

Showing 9 changed files with 85 additions and 56 deletions.
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
@@ -22,7 +22,7 @@ jobs:
         with:
           node-version: 18
 
-      - uses: pnpm/action-setup@v4.0.0
+      - uses: pnpm/action-setup@v2.2.4
         name: Install pnpm
         id: pnpm-install
         with:

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -25,5 +25,6 @@
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": "explicit"
     }
-  }
+  },
+  "angular.enable-strict-mode-prompt": false
 }
diff --git a/packages/material-renderers/src/additional/MaterialListWithDetailRenderer.tsx b/packages/material-renderers/src/additional/MaterialListWithDetailRenderer.tsx
@@ -24,21 +24,20 @@
 */
 import {
   and,
-  arrayDefaultTranslations,
   ArrayLayoutProps,
+  ArrayTranslations,
   composePaths,
   computeLabel,
   createDefaultValue,
   findUISchema,
-  getArrayTranslations,
   isObjectArray,
   RankedTester,
   rankWith,
   uiTypeIs,
 } from '@jsonforms/core';
 import {
   JsonFormsDispatch,
-  TranslateProps,
+  withArrayTranslationProps,
   withJsonFormsArrayLayoutProps,
   withTranslateProps,
 } from '@jsonforms/react';
@@ -70,9 +69,8 @@ export const MaterialListWithDetailRenderer = ({
   description,
   disableAdd,
   disableRemove,
-  t,
-  i18nKeyPrefix,
-}: ArrayLayoutProps & TranslateProps) => {
+  translations,
+}: ArrayLayoutProps & { translations: ArrayTranslations }) => {
   const [selectedIndex, setSelectedIndex] = useState(undefined);
   const handleRemoveItem = useCallback(
     (p: string, value: any) => () => {
@@ -106,11 +104,7 @@ export const MaterialListWithDetailRenderer = ({
       ),
     [uischemas, schema, uischema.scope, path, uischema, rootSchema]
   );
-  const translations = useMemo(
-    () =>
-      getArrayTranslations(t, arrayDefaultTranslations, i18nKeyPrefix, label),
-    [t, i18nKeyPrefix, label]
-  );
+
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
   const doDisableAdd = disableAdd || appliedUiSchemaOptions.disableAdd;
   const doDisableRemove = disableRemove || appliedUiSchemaOptions.disableRemove;
@@ -190,5 +184,5 @@ export const materialListWithDetailTester: RankedTester = rankWith(
 );
 
 export default withJsonFormsArrayLayoutProps(
-  withTranslateProps(MaterialListWithDetailRenderer)
+  withTranslateProps(withArrayTranslationProps(MaterialListWithDetailRenderer))
 );
diff --git a/packages/material-renderers/src/complex/MaterialArrayControlRenderer.tsx b/packages/material-renderers/src/complex/MaterialArrayControlRenderer.tsx
@@ -22,38 +22,31 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import {
   ArrayLayoutProps,
+  ArrayTranslations,
   RankedTester,
-  arrayDefaultTranslations,
-  getArrayTranslations,
   isObjectArrayControl,
   isPrimitiveArrayControl,
   or,
   rankWith,
 } from '@jsonforms/core';
 import {
-  TranslateProps,
+  withArrayTranslationProps,
   withJsonFormsArrayLayoutProps,
   withTranslateProps,
 } from '@jsonforms/react';
 import { MaterialTableControl } from './MaterialTableControl';
 import { DeleteDialog } from './DeleteDialog';
 
 export const MaterialArrayControlRenderer = (
-  props: ArrayLayoutProps & TranslateProps
+  props: ArrayLayoutProps & { translations: ArrayTranslations }
 ) => {
   const [open, setOpen] = useState(false);
   const [path, setPath] = useState(undefined);
   const [rowData, setRowData] = useState(undefined);
-  const { removeItems, visible, t, i18nKeyPrefix, label } = props;
-
-  const translations = useMemo(
-    () =>
-      getArrayTranslations(t, arrayDefaultTranslations, i18nKeyPrefix, label),
-    [t, i18nKeyPrefix, label]
-  );
+  const { removeItems, visible, translations } = props;
 
   const openDeleteDialog = useCallback(
     (p: string, rowIndex: number) => {
@@ -102,5 +95,5 @@ export const materialArrayControlTester: RankedTester = rankWith(
 );
 
 export default withJsonFormsArrayLayoutProps(
-  withTranslateProps(MaterialArrayControlRenderer)
+  withTranslateProps(withArrayTranslationProps(MaterialArrayControlRenderer))
 );
diff --git a/packages/material-renderers/src/layouts/MaterialArrayLayout.tsx b/packages/material-renderers/src/layouts/MaterialArrayLayout.tsx
@@ -23,23 +23,21 @@
   THE SOFTWARE.
 */
 import range from 'lodash/range';
-import React, { useState, useCallback, useMemo } from 'react';
+import React, { useState, useCallback } from 'react';
 import {
   ArrayLayoutProps,
-  arrayDefaultTranslations,
+  ArrayTranslations,
   composePaths,
   computeLabel,
   createDefaultValue,
-  getArrayTranslations,
 } from '@jsonforms/core';
 import map from 'lodash/map';
 import { ArrayLayoutToolbar } from './ArrayToolbar';
 import ExpandPanelRenderer from './ExpandPanelRenderer';
 import merge from 'lodash/merge';
-import { TranslateProps, withTranslateProps } from '@jsonforms/react';
 
 const MaterialArrayLayoutComponent = (
-  props: ArrayLayoutProps & TranslateProps
+  props: ArrayLayoutProps & { translations: ArrayTranslations }
 ) => {
   const [expanded, setExpanded] = useState<string | boolean>(false);
   const innerCreateDefaultValue = useCallback(
@@ -73,19 +71,12 @@ const MaterialArrayLayoutComponent = (
     description,
     disableAdd,
     disableRemove,
-    t,
-    i18nKeyPrefix,
+    translations,
   } = props;
   const appliedUiSchemaOptions = merge({}, config, props.uischema.options);
   const doDisableAdd = disableAdd || appliedUiSchemaOptions.disableAdd;
   const doDisableRemove = disableRemove || appliedUiSchemaOptions.disableRemove;
 
-  console.log('renderTable');
-  const translations = useMemo(
-    () =>
-      getArrayTranslations(t, arrayDefaultTranslations, i18nKeyPrefix, label),
-    [t, i18nKeyPrefix, label]
-  );
   return (
     <div>
       <ArrayLayoutToolbar
@@ -137,6 +128,4 @@ const MaterialArrayLayoutComponent = (
   );
 };
 
-export const MaterialArrayLayout = React.memo(
-  withTranslateProps(MaterialArrayLayoutComponent)
-);
+export const MaterialArrayLayout = React.memo(MaterialArrayLayoutComponent);
diff --git a/packages/material-renderers/src/layouts/MaterialArrayLayoutRenderer.tsx b/packages/material-renderers/src/layouts/MaterialArrayLayoutRenderer.tsx
@@ -26,34 +26,46 @@ import React, { useCallback } from 'react';
 
 import {
   ArrayLayoutProps,
+  ArrayTranslations,
   isObjectArrayWithNesting,
   RankedTester,
   rankWith,
 } from '@jsonforms/core';
 import { MaterialArrayLayout } from './MaterialArrayLayout';
-import { withJsonFormsArrayLayoutProps } from '@jsonforms/react';
+import {
+  withArrayTranslationProps,
+  withJsonFormsArrayLayoutProps,
+  withTranslateProps,
+} from '@jsonforms/react';
 
 export const MaterialArrayLayoutRenderer = ({
   visible,
   addItem,
+  translations,
   ...props
-}: ArrayLayoutProps) => {
+}: ArrayLayoutProps & { translations: ArrayTranslations }) => {
   const addItemCb = useCallback(
     (p: string, value: any) => addItem(p, value),
     [addItem]
   );
-
   if (!visible) {
     return null;
   }
 
   return (
-    <MaterialArrayLayout visible={visible} addItem={addItemCb} {...props} />
+    <MaterialArrayLayout
+      translations={translations}
+      visible={visible}
+      addItem={addItemCb}
+      {...props}
+    />
   );
 };
 
 export const materialArrayLayoutTester: RankedTester = rankWith(
   4,
   isObjectArrayWithNesting
 );
-export default withJsonFormsArrayLayoutProps(MaterialArrayLayoutRenderer);
+export default withJsonFormsArrayLayoutProps(
+  withTranslateProps(withArrayTranslationProps(MaterialArrayLayoutRenderer))
+);
diff --git a/packages/react/src/JsonFormsContext.tsx b/packages/react/src/JsonFormsContext.tsx
@@ -78,6 +78,9 @@ import {
   CoreActions,
   Middleware,
   defaultMiddleware,
+  arrayDefaultTranslations,
+  getArrayTranslations,
+  ArrayTranslations,
 } from '@jsonforms/core';
 import debounce from 'lodash/debounce';
 import React, {
@@ -889,3 +892,22 @@ export const withTranslateProps = <P extends {}>(
 
     return <Component {...props} locale={locale} t={t} />;
   };
+
+export const withArrayTranslationProps = <
+  P extends ArrayLayoutProps & TranslateProps
+>(
+  Component: ComponentType<P & { translations: ArrayTranslations }>
+) =>
+  function withArrayTranslatationProps(props: P) {
+    const translations = useMemo(
+      () =>
+        getArrayTranslations(
+          props.t,
+          arrayDefaultTranslations,
+          props.i18nKeyPrefix,
+          props.label
+        ),
+      [props.t, props.i18nKeyPrefix, props.label]
+    );
+    return <Component {...props} translations={translations} />;
+  };
diff --git a/packages/vanilla-renderers/src/complex/TableArrayControl.tsx b/packages/vanilla-renderers/src/complex/TableArrayControl.tsx
@@ -41,8 +41,14 @@ import {
   Test,
   getControlPath,
   encode,
+  ArrayTranslations,
 } from '@jsonforms/core';
-import { DispatchCell, withJsonFormsArrayControlProps } from '@jsonforms/react';
+import {
+  DispatchCell,
+  withArrayTranslationProps,
+  withJsonFormsArrayControlProps,
+  withTranslateProps,
+} from '@jsonforms/react';
 import { withVanillaControlProps } from '../util';
 import type { VanillaRendererProps } from '../index';
 
@@ -61,7 +67,8 @@ export const tableArrayControlTester: RankedTester = rankWith(
 );
 
 class TableArrayControl extends React.Component<
-  ArrayControlProps & VanillaRendererProps,
+  ArrayControlProps &
+    VanillaRendererProps & { translations: ArrayTranslations },
   any
 > {
   confirmDelete = (path: string, index: number) => {
@@ -239,6 +246,8 @@ class TableArrayControl extends React.Component<
   }
 }
 
-export default withVanillaControlProps(
-  withJsonFormsArrayControlProps(TableArrayControl)
+export default withTranslateProps(
+  withVanillaControlProps(
+    withJsonFormsArrayControlProps(withArrayTranslationProps(TableArrayControl))
+  )
 );
diff --git a/packages/vanilla-renderers/src/complex/array/ArrayControlRenderer.tsx b/packages/vanilla-renderers/src/complex/array/ArrayControlRenderer.tsx
@@ -31,10 +31,13 @@ import {
   findUISchema,
   Helpers,
   ControlElement,
+  ArrayTranslations,
 } from '@jsonforms/core';
 import {
   JsonFormsDispatch,
+  withArrayTranslationProps,
   withJsonFormsArrayControlProps,
+  withTranslateProps,
 } from '@jsonforms/react';
 import type { VanillaRendererProps } from '../../index';
 import { withVanillaControlProps } from '../../util';
@@ -58,7 +61,8 @@ export const ArrayControl = ({
   renderers,
   rootSchema,
   translations,
-}: ArrayControlProps & VanillaRendererProps) => {
+}: ArrayControlProps &
+  VanillaRendererProps & { translations: ArrayTranslations }) => {
   const controlElement = uischema as ControlElement;
   const childUiSchema = useMemo(
     () =>
@@ -184,7 +188,8 @@ export const ArrayControlRenderer = ({
   enabled,
   errors,
   translations,
-}: ArrayControlProps & VanillaRendererProps) => {
+}: ArrayControlProps &
+  VanillaRendererProps & { translations: ArrayTranslations }) => {
   const controlElement = uischema as ControlElement;
   const labelDescription = Helpers.createLabelDescriptionFrom(
     controlElement,
@@ -229,6 +234,10 @@ export const ArrayControlRenderer = ({
   );
 };
 
-export default withVanillaControlProps(
-  withJsonFormsArrayControlProps(ArrayControlRenderer)
+export default withTranslateProps(
+  withVanillaControlProps(
+    withJsonFormsArrayControlProps(
+      withArrayTranslationProps(ArrayControlRenderer)
+    )
+  )
 );