How to use jsonforms-core - 10 common examples

private renderChildren(prop: ContainmentProperty,
                         parentPath: string,
                         parentSchema: JsonSchema) {

    const composedPath = compose(parentPath, prop.property);
    const data = resolveData(this.props.data, composedPath);
    const schema = prop.schema;
    const array = data;
    const key = prop.property;
    const parentProperties = JsonForms.schemaService.getContainmentProperties(parentSchema);

    for (const property of parentProperties) {
      // If available, additionally use schema id to identify the correct property
      if (!_.isEmpty(schema.id) && schema.id !== property.schema.id) {
        continue;
      }
      if (key === property.property) {
        return this.expandArray(array, property, composedPath);
      }
    }
    // TODO proper logging
    console.warn('Could not render children because no fitting property was found.');

{'\u274C'}
              
            }
        
        
        {
          // render contained children of this element
          JsonForms.schemaService.getContainmentProperties(schema)
            .filter(prop => this.propHasData(prop, data))
            .map(prop =&gt; <ul>{ this.renderChildren(prop, path, schema) }</ul>)
        }
      
    );

    // add a separate list for each containment property
    JsonForms.schemaService.getContainmentProperties(schema).forEach(p =&gt; {
      const id = p.schema.id;
      if (id === undefined || id === null) {
        // TODO proper logging
        console.warn(`The property's schema with label '${p.label}' has no id. DnD not possible.`);

        return;
      }
      // FIXME: DND support
      // FIXME: create child list and activate drag and drop
      // registerDnDWithGroupId(this.treeNodeMapping, ul, id);
    });

    return vnode;
  }

parentPath,
                    array => {
                      const copy = array.slice();
                      return _.filter(copy, el => !_.isEqual(el, data))
                    }
                  )
                )
              }}>
                {'\u274C'}
              
            }
        
        
        {
          // render contained children of this element
          JsonForms.schemaService.getContainmentProperties(schema)
            .filter(prop => this.propHasData(prop, data))
            .map(prop =&gt; <ul>{ this.renderChildren(prop, path, schema) }</ul>)
        }
      
    );

    // add a separate list for each containment property
    JsonForms.schemaService.getContainmentProperties(schema).forEach(p =&gt; {
      const id = p.schema.id;
      if (id === undefined || id === null) {
        // TODO proper logging
        console.warn(`The property's schema with label '${p.label}' has no id. DnD not possible.`);

        return;
      }
      // FIXME: DND support

private renderChildren(prop: ContainmentProperty,
                         parentPath: string,
                         parentSchema: JsonSchema) {

    const composedPath = compose(parentPath, prop.property);
    const data = resolveData(this.props.data, composedPath);
    const schema = prop.schema;
    const array = data;
    const key = prop.property;
    const parentProperties = JsonForms.schemaService.getContainmentProperties(parentSchema);

    for (const property of parentProperties) {
      // If available, additionally use schema id to identify the correct property
      if (!_.isEmpty(schema.id) && schema.id !== property.schema.id) {
        continue;
      }
      if (key === property.property) {
        return this.expandArray(array, property, composedPath);
      }
    }
    // TODO proper logging

resolveSchema,
  schemaMatches,
  schemaSubPathMatches,
  uiTypeIs,
  update
} from 'jsonforms-core';
import { connect } from 'react-redux';

export const getStyle = (styleName: string) =>
  JsonForms.stylingRegistry.getAsClassName(styleName);

/**
 * Default tester for an array control.
 * @type {RankedTester}
 */
export const arrayTester: RankedTester = rankWith(2, and(
  uiTypeIs('Control'),
  schemaMatches(schema =>
    !_.isEmpty(schema)
    && schema.type === 'array'
    && !_.isEmpty(schema.items)
    && !Array.isArray(schema.items) // we don't care about tuples
  ),
  schemaSubPathMatches('items', schema =>
    schema.type === 'object'
  ))
);

const addNewItem = (dispatch, path: string) => {
  const element = {};
  dispatch(
    update(

private expandObject(
    path: string,
    schema: JsonSchema,
    parentPath?: string
  ) {

    const { uischema, rootData, dispatch } = this.props;
    const data = resolveData(rootData, path);
    const liClasses = this.state.selected === data ? 'selected' : '';

    // TODO: key should be set in caller
    const vnode = (
      <li>
        <div>
          {
            _.has(uischema.options, 'imageProvider') ?
              <span> : ''
          }

          <span>
              this.setState({
                selected: {</span></span></div></li>

schemaMatches,
  schemaSubPathMatches,
  uiTypeIs,
  update
} from 'jsonforms-core';
import { connect } from 'react-redux';

export const getStyle = (styleName: string) =>
  JsonForms.stylingRegistry.getAsClassName(styleName);

/**
 * Default tester for an array control.
 * @type {RankedTester}
 */
export const arrayTester: RankedTester = rankWith(2, and(
  uiTypeIs('Control'),
  schemaMatches(schema =>
    !_.isEmpty(schema)
    && schema.type === 'array'
    && !_.isEmpty(schema.items)
    && !Array.isArray(schema.items) // we don't care about tuples
  ),
  schemaSubPathMatches('items', schema =>
    schema.type === 'object'
  ))
);

const addNewItem = (dispatch, path: string) => {
  const element = {};
  dispatch(
    update(
      path,

schemaSubPathMatches,
  uiTypeIs,
  update
} from 'jsonforms-core';
import { connect } from 'react-redux';

export const getStyle = (styleName: string) =>
  JsonForms.stylingRegistry.getAsClassName(styleName);

/**
 * Default tester for an array control.
 * @type {RankedTester}
 */
export const arrayTester: RankedTester = rankWith(2, and(
  uiTypeIs('Control'),
  schemaMatches(schema =>
    !_.isEmpty(schema)
    && schema.type === 'array'
    && !_.isEmpty(schema.items)
    && !Array.isArray(schema.items) // we don't care about tuples
  ),
  schemaSubPathMatches('items', schema =>
    schema.type === 'object'
  ))
);

const addNewItem = (dispatch, path: string) => {
  const element = {};
  dispatch(
    update(
      path,
      array => {

export const getStyle = (styleName: string) =>
  JsonForms.stylingRegistry.getAsClassName(styleName);

/**
 * Default tester for an array control.
 * @type {RankedTester}
 */
export const arrayTester: RankedTester = rankWith(2, and(
  uiTypeIs('Control'),
  schemaMatches(schema =>
    !_.isEmpty(schema)
    && schema.type === 'array'
    && !_.isEmpty(schema.items)
    && !Array.isArray(schema.items) // we don't care about tuples
  ),
  schemaSubPathMatches('items', schema =>
    schema.type === 'object'
  ))
);

const addNewItem = (dispatch, path: string) => {
  const element = {};
  dispatch(
    update(
      path,
      array => {
        if (array === undefined || array === null) {
          return [element];
        }

        const clone = _.clone(array);
        clone.push(element);

return data.map((element, index) => {
      const composedPath = compose(path, index + '');

      return this.expandObject(
        composedPath,
        schema,
        path
      );
    });
  }