How to use @jsonforms/core - 10 common examples

// Add schema to validation
  const ajv = createAjv();
  ajv.addSchema(geoschema, 'geographical-location.schema.json');
  // Allow json-schema-ref-resolver to resolve same schema
  const geoResolver = {
    order: 1,
    canRead: (file: any) => {
      return file.url.indexOf('geographical-location.schema.json') !== -1;
    },
    read: () => {
      return JSON.stringify(geoschema);
    }
  };
  // Add configuration to JSONForms
  store.dispatch(
    Actions.init(
      exampleData[0].data,
      exampleData[0].schema,
      exampleData[0].uischema,
      {
        ajv: ajv,
        refParserOptions: {
          resolve: {
            geo: geoResolver
          } as any
        }
      }
    )
  );
  return store;
};
export const renderExample = (

recurrence: 'Daily',
  rating: 3
};

const initState: JsonFormsState = {
  jsonforms: {
    cells: materialCells,
    renderers: materialRenderers
  }
};

const rootReducer: Reducer = combineReducers({
  jsonforms: jsonformsReducer()
});
const store = createStore(rootReducer, initState, devToolsEnhancer({}));
store.dispatch(Actions.init(data, schema, uischema));

// Register custom renderer for the Redux tab
store.dispatch(Actions.registerRenderer(ratingControlTester, RatingControl));

ReactDOM.render(, document.getElementById('root'));
registerServiceWorker();

constructor(ngRedux: NgRedux, devTools: DevToolsExtension) {
    let enhancers: any[] = [];
    // ... add whatever other enhancers you want.

    // You probably only want to expose this tool in devMode.
    if (isDevMode() && devTools.isEnabled()) {
      enhancers = [...enhancers, devTools.enhancer()];
    }

    ngRedux.configureStore(rootReducer, initialState, [logger], enhancers);
    const example = initialState.examples.data[0];
    ngRedux.dispatch(
      Actions.init(example.data, example.schema, example.uischema)
    );

    const uiSchema = {
      type: 'HorizontalLayout',
      elements: [
        {
          type: 'Control',
          scope: '#/properties/buyer/properties/email'
        },
        {
          type: 'Control',
          scope: '#/properties/status'
        }
      ]
    };
    const itemTester: UISchemaTester = (_schema, schemaPath, _path) => {

// Remove moved data from source array
  dispatch(
    update(oldParentPath, array => {
      // TODO clone necessary?
      const clonedArray = clone(array);
      clonedArray.splice(oldIndex, 1);

      console.log(`remove from ${oldParentPath}, index: ${oldIndex}`);

      return clonedArray;
    })
  );

  // Add moved data to target array
  dispatch(
    update(newParentPath, array => {
      if (array === undefined || array === null || array.length === 0) {
        return [data];
      }

      // TODO clone necessary?
      const clonedArray = clone(array);
      clonedArray.splice(newIndex, 0, data);

      console.log(`add to ${newParentPath}, index: ${newIndex}`);

      return clonedArray;
    })
  );

  return true;
};

name: 'Send email to Adrian',
  description: 'Confirm if you have passed the subject\nHereby ...',
  done: true,
  recurrence: 'Daily',
  rating: 3
};

const initState: JsonFormsState = {
  jsonforms: {
    cells: materialCells,
    renderers: materialRenderers
  }
};

const rootReducer: Reducer = combineReducers({
  jsonforms: jsonformsReducer()
});
const store = createStore(rootReducer, initState, devToolsEnhancer({}));
store.dispatch(Actions.init(data, schema, uischema));

// Register custom renderer for the Redux tab
store.dispatch(Actions.registerRenderer(ratingControlTester, RatingControl));

ReactDOM.render(, document.getElementById('root'));
registerServiceWorker();

// idea: map to type,enum and check that all types are string and at least one item is of type enum,
  const enumSchema = findEnumSchema(schemas);
  const stringSchema = findTextSchema(schemas);
  const remainingSchemas = schemas.filter(
    s => s !== enumSchema || s !== stringSchema
  );
  const wrongType = remainingSchemas.find(s => s.type && s.type !== 'string');
  return enumSchema && stringSchema && !wrongType;
};
const simpleAnyOf = and(
  uiTypeIs('Control'),
  schemaMatches(
    schema => schema.hasOwnProperty('anyOf') && hasEnumAndText(schema.anyOf)
  )
);
export const materialAnyOfStringOrEnumControlTester: RankedTester = rankWith(
  5,
  simpleAnyOf
);
export default withJsonFormsControlProps(MaterialAnyOfStringOrEnumControl);

getValidColumnProps = (scopedSchema: JsonSchema) => {
    if (scopedSchema.type === 'object') {
      return Object.keys(scopedSchema.properties).filter(prop => {
        const types = deriveTypes(scopedSchema.properties[prop]);
        if (types.length > 1) {
          return false;
        }
        return this.columnsToIgnore.indexOf(types[0]) === -1;
      });
    }
    // primitives
    return [''];
  };
}
export const TableRendererTester: RankedTester = rankWith(
  3,
  or(isObjectArrayControl, isPrimitiveArrayControl)
);

interface ColumnDescription {
  property: string;
  header: string;
  props: OwnPropsOfRenderer;
}

const controlWithoutLabel = (scope: string): ControlElement => ({
  type: 'Control',
  scope: scope,
  label: false
});

);
  }
}
const hasEnumAndText = (schemas: JsonSchema[]) => {
  // idea: map to type,enum and check that all types are string and at least one item is of type enum,
  const enumSchema = findEnumSchema(schemas);
  const stringSchema = findTextSchema(schemas);
  const remainingSchemas = schemas.filter(
    s => s !== enumSchema || s !== stringSchema
  );
  const wrongType = remainingSchemas.find(s => s.type && s.type !== 'string');
  return enumSchema && stringSchema && !wrongType;
};
const simpleAnyOf = and(
  uiTypeIs('Control'),
  schemaMatches(
    schema => schema.hasOwnProperty('anyOf') && hasEnumAndText(schema.anyOf)
  )
);
export const materialAnyOfStringOrEnumControlTester: RankedTester = rankWith(
  5,
  simpleAnyOf
);
export default withJsonFormsControlProps(MaterialAnyOfStringOrEnumControl);

// FIXME: is there a better way to control this?
    // const count = this.nav.
    //  .getViews()
    //  .reduce((acc, view) => acc + (view.data.addToNavStack ? 1 : 0), 0);
    // return count > 1;
    return false;
  }

  goBack() {
    return this.nav.pop();
  }
}

export const categorizationTester: RankedTester = rankWith(
  1,
  and(uiTypeIs('Categorization'), categorizationHasCategory)
);

data.map((_child, index) => {
                  const childPath = Paths.compose(
                    path,
                    `${index}`
                  );
                  // TODO
                  const errorsPerEntry: any[] = filter(childErrors, error =>
                    error.dataPath.startsWith(childPath)
                  );

                  return (
                    
                      {schema.properties ? (
                        fpflow(
                          fpkeys,
                          fpfilter(
                            prop => schema.properties[prop].type !== 'array'
                          ),