[material] Query UI schema registry before generating an UI (#1363)

Object renderer and all combinator renderers call findUISchema instead of directly generated an UI schema.

Author: eneufeld

packages/core/src/generators/index.ts

@@ -32,7 +32,8 @@ export const Generate: {
  uiSchema(
  jsonSchema: JsonSchema,
  layoutType?: string,
- prefix?: string
+ prefix?: string,
+ rootSchema?: JsonSchema
  ): UISchemaElement;
  controlElement(ref: string): ControlElement;
 } = {

packages/core/src/reducers/index.ts

@@ -61,7 +61,13 @@ import { JsonSchema } from '../models/jsonSchema';
 import { ControlElement, UISchemaElement } from '../models/uischema';
 import { Generate } from '../generators';
 
-export { rendererReducer, cellReducer, coreReducer, UISchemaTester };
+export {
+ rendererReducer,
+ cellReducer,
+ coreReducer,
+ UISchemaTester,
+ findMatchingUISchema
+};
 export { JsonFormsCore };
 
 export const jsonformsReducer = (
@@ -108,7 +114,8 @@ export const findUISchema = (
  schemaPath: string,
  path: string,
  fallbackLayoutType = 'VerticalLayout',
- control?: ControlElement
+ control?: ControlElement,
+ rootSchema?: JsonSchema
 ): UISchemaElement => {
  // handle options
  if (control && control.options && control.options.detail) {
@@ -130,7 +137,7 @@ export const findUISchema = (
  // default
  const uiSchema = findMatchingUISchema(uischemas)(schema, schemaPath, path);
  if (uiSchema === undefined) {
- return Generate.uiSchema(schema, fallbackLayoutType);
+ return Generate.uiSchema(schema, fallbackLayoutType, '#', rootSchema);
  }
  return uiSchema;
 };

packages/core/src/util/combinators.ts

@@ -24,9 +24,9 @@
 */
 
 import { JsonSchema } from '../models/jsonSchema';
-import { UISchemaElement } from '../models/uischema';
+import { ControlElement, UISchemaElement } from '../models/uischema';
 import { resolveSchema } from './resolvers';
-import { generateDefaultUISchema } from '../generators';
+import { findUISchema, UISchemaTester } from '../reducers';
 
 export interface CombinatorSubSchemaRenderInfo {
  schema: JsonSchema;
@@ -69,14 +69,20 @@ export const resolveSubSchemas = (
 export const createCombinatorRenderInfos = (
  combinatorSubSchemas: JsonSchema[],
  rootSchema: JsonSchema,
- keyword: CombinatorKeyword
+ keyword: CombinatorKeyword,
+ control: ControlElement,
+ path: string,
+ uischemas: { tester: UISchemaTester; uischema: UISchemaElement }[]
 ): CombinatorSubSchemaRenderInfo[] =>
  combinatorSubSchemas.map((subSchema, subSchemaIndex) => ({
  schema: subSchema,
- uischema: generateDefaultUISchema(
+ uischema: findUISchema(
+ uischemas,
  subSchema,
- 'VerticalLayout',
- `#`,
+ control.scope,
+ path,
+ undefined,
+ control,
  rootSchema
  ),
  label: createLabel(subSchema, subSchemaIndex, keyword)

packages/core/src/util/renderer.ts

@@ -28,6 +28,7 @@ import union from 'lodash/union';
 import find from 'lodash/find';
 import RefParser from 'json-schema-ref-parser';
 import {
+ findUISchema,
  getConfig,
  getData,
  getErrorAt,
@@ -41,8 +42,8 @@ import {
 import { RankedTester } from '../testers';
 import { JsonSchema } from '../models/jsonSchema';
 import {
- CombinatorKeyword,
  composePaths,
+ CombinatorKeyword,
  composeWithUi,
  createLabelDescriptionFrom,
  formatErrorMessage,
@@ -56,7 +57,6 @@ import {
 import has from 'lodash/has';
 import { update } from '../actions';
 import { ErrorObject } from 'ajv';
-import { generateDefaultUISchema } from '../generators';
 import { JsonFormsState } from '../store';
 import { AnyAction, Dispatch } from 'redux';
 import { JsonFormsRendererRegistryEntry } from '../reducers/renderers';
@@ -667,7 +667,12 @@ export const mapStateToJsonFormsRendererProps = (
  let uischema = ownProps.uischema;
  if (uischema === undefined) {
  if (ownProps.schema) {
- uischema = generateDefaultUISchema(ownProps.schema);
+ uischema = findUISchema(
+ state.jsonforms.uischemas,
+ ownProps.schema,
+ undefined,
+ ownProps.path
+ );
  } else {
  uischema = getUiSchema(state);
  }
@@ -693,6 +698,7 @@ export interface StatePropsOfCombinator extends OwnPropsOfControl {
  path: string;
  id: string;
  indexOfFittingSchema: number;
+ uischemas: { tester: UISchemaTester; uischema: UISchemaElement }[];
 }
 
 const mapStateToCombinatorRendererProps = (
@@ -742,7 +748,9 @@ const mapStateToCombinatorRendererProps = (
  rootSchema,
  visible,
  id,
- indexOfFittingSchema
+ indexOfFittingSchema,
+ uischemas: state.jsonforms.uischemas,
+ uischema
  };
 };
 

packages/material/src/complex/MaterialAllOfRenderer.tsx

@@ -27,35 +27,69 @@ import { Hidden } from '@material-ui/core';
 
 import {
  createCombinatorRenderInfos,
+ findMatchingUISchema,
  isAllOfControl,
  JsonSchema,
  RankedTester,
  rankWith,
  resolveSubSchemas,
- StatePropsOfCombinator,
+ StatePropsOfCombinator
 } from '@jsonforms/core';
 import { JsonFormsDispatch, withJsonFormsAllOfProps } from '@jsonforms/react';
 
-const MaterialAllOfRenderer = ({ schema, rootSchema, visible, renderers, path }: StatePropsOfCombinator) => {
+const MaterialAllOfRenderer = ({
+ schema,
+ rootSchema,
+ visible,
+ renderers,
+ path,
+ uischemas,
+ uischema
+}: StatePropsOfCombinator) => {
  const _schema = resolveSubSchemas(schema, rootSchema, 'allOf');
- const allOfRenderInfos = createCombinatorRenderInfos((_schema as JsonSchema).allOf, rootSchema, 'allOf');
+ const delegateUISchema = findMatchingUISchema(uischemas)(
+ _schema,
+ uischema.scope,
+ path
+ );
+ if (delegateUISchema) {
+ return (
+ <Hidden xsUp={!visible}>
+ <JsonFormsDispatch
+ schema={_schema}
+ uischema={delegateUISchema}
+ path={path}
+ renderers={renderers}
+ />
+ </Hidden>
+ );
+ }
+ const allOfRenderInfos = createCombinatorRenderInfos(
+ (_schema as JsonSchema).allOf,
+ rootSchema,
+ 'allOf',
+ uischema,
+ path,
+ uischemas
+ );
 
  return (
  <Hidden xsUp={!visible}>
- {
- allOfRenderInfos.map((allOfRenderInfo, allOfIndex) => (
- <JsonFormsDispatch
- key={allOfIndex}
- schema={allOfRenderInfo.schema}
- uischema={allOfRenderInfo.uischema}
- path={path}
- renderers={renderers}
- />
- ))
- }
+ {allOfRenderInfos.map((allOfRenderInfo, allOfIndex) => (
+ <JsonFormsDispatch
+ key={allOfIndex}
+ schema={allOfRenderInfo.schema}
+ uischema={allOfRenderInfo.uischema}
+ path={path}
+ renderers={renderers}
+ />
+ ))}
  </Hidden>
  );
 };
 
-export const materialAllOfControlTester: RankedTester = rankWith(3, isAllOfControl);
+export const materialAllOfControlTester: RankedTester = rankWith(
+ 3,
+ isAllOfControl
+);
 export default withJsonFormsAllOfProps(MaterialAllOfRenderer);

packages/material/src/complex/MaterialAnyOfRenderer.tsx

@@ -31,45 +31,68 @@ import {
  RankedTester,
  rankWith,
  resolveSubSchemas,
- StatePropsOfCombinator,
+ StatePropsOfCombinator
 } from '@jsonforms/core';
 import { JsonFormsDispatch, withJsonFormsAnyOfProps } from '@jsonforms/react';
 import { Hidden, Tab, Tabs } from '@material-ui/core';
 import CombinatorProperties from './CombinatorProperties';
 
-const MaterialAnyOfRenderer =
- ({ schema, rootSchema, indexOfFittingSchema, visible, path, renderers }: StatePropsOfCombinator) => {
- const [selectedAnyOf, setSelectedAnyOf] = useState(indexOfFittingSchema || 0);
- const handleChange = useCallback((_ev: any, value: number) => setSelectedAnyOf(value), [setSelectedAnyOf]);
- const anyOf = 'anyOf';
- const _schema = resolveSubSchemas(schema, rootSchema, anyOf);
- const anyOfRenderInfos = createCombinatorRenderInfos((_schema as JsonSchema).anyOf, rootSchema, anyOf);
+const MaterialAnyOfRenderer = ({
+ schema,
+ rootSchema,
+ indexOfFittingSchema,
+ visible,
+ path,
+ renderers,
+ uischema,
+ uischemas
+}: StatePropsOfCombinator) => {
+ const [selectedAnyOf, setSelectedAnyOf] = useState(indexOfFittingSchema || 0);
+ const handleChange = useCallback(
+ (_ev: any, value: number) => setSelectedAnyOf(value),
+ [setSelectedAnyOf]
+ );
+ const anyOf = 'anyOf';
+ const _schema = resolveSubSchemas(schema, rootSchema, anyOf);
+ const anyOfRenderInfos = createCombinatorRenderInfos(
+ (_schema as JsonSchema).anyOf,
+ rootSchema,
+ anyOf,
+ uischema,
+ path,
+ uischemas
+ );
 
- return (
- <Hidden xsUp={!visible}>
- <CombinatorProperties
- schema={_schema}
- combinatorKeyword={'anyOf'}
- path={path}
- />
- <Tabs value={selectedAnyOf} onChange={handleChange}>
- {anyOfRenderInfos.map(anyOfRenderInfo => <Tab key={anyOfRenderInfo.label} label={anyOfRenderInfo.label} />)}
- </Tabs>
- {
- anyOfRenderInfos.map((anyOfRenderInfo, anyOfIndex) => (
- selectedAnyOf === anyOfIndex &&
+ return (
+ <Hidden xsUp={!visible}>
+ <CombinatorProperties
+ schema={_schema}
+ combinatorKeyword={'anyOf'}
+ path={path}
+ />
+ <Tabs value={selectedAnyOf} onChange={handleChange}>
+ {anyOfRenderInfos.map(anyOfRenderInfo => (
+ <Tab key={anyOfRenderInfo.label} label={anyOfRenderInfo.label} />
+ ))}
+ </Tabs>
+ {anyOfRenderInfos.map(
+ (anyOfRenderInfo, anyOfIndex) =>
+ selectedAnyOf === anyOfIndex && (
  <JsonFormsDispatch
  key={anyOfIndex}
  schema={anyOfRenderInfo.schema}
  uischema={anyOfRenderInfo.uischema}
  path={path}
  renderers={renderers}
  />
- ))
-  }
-  </Hidden>
-  );
- };
+ )
+ )}
+ </Hidden>
+ );
+};
 
-export const materialAnyOfControlTester: RankedTester = rankWith(3, isAnyOfControl);
+export const materialAnyOfControlTester: RankedTester = rankWith(
+ 3,
+ isAnyOfControl
+);
 export default withJsonFormsAnyOfProps(MaterialAnyOfRenderer);