реагировать + jsonforms + пользовательский тип поля + пользовательский компонент - PullRequest
Новая
       23

реагировать + jsonforms + пользовательский тип поля + пользовательский компонент

0 голосов
/ 02 марта 2020

Autocomplete. js

import React from 'react';

class Autocomplete extends React.Component {
    render() {
        return (
            <div>
                 <p>Auto Complete:</p>
                <input type="text" className="form-control" name="dummy_name" value = "" />
                <div className="dropdown_suggestion hidden">
                </div>
            </div>
        );
    }
}

export default  Autocomplete;

AutocompleteControl. js


import * as React from 'react';
import { withJsonFormsControlProps } from '@jsonforms/react';
import  Autocomplete  from './Autocomplete';

interface AutocompleteControlProps {
    data: any;
    handleChange(path: string, value: any): void;
    path: string;
  }

  const AutocompleteControl = ({ data, handleChange, path }: AutocompleteControlProps) => (
    <Autocomplete
      value={data}
      onClick={(ev: any) => handleChange(path, Number(ev.value))}
    />
  );

export default withJsonFormsControlProps(AutocompleteControl);

autocompleteControlTester. js


import { rankWith, scopeEndsWith } from '@jsonforms/core';

export default rankWith(
  1000,
  scopeEndsWith('autocomplete_custom')
);

index. js (запись только полезной части) 

import AutocompleteControl from './AutocompleteControl'
import autocompleteControlTester from './autocompleteControlTester'

import { devToolsEnhancer } from 'redux-devtools-extension';
import {
  materialCells,
  materialRenderers
} from '@jsonforms/material-renderers';

import { jsonformsReducer} from '@jsonforms/core';
import { combineReducers } from "redux";

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

const globalFunctions = combineReducers({
  jsonforms: jsonformsReducer()

});

const store = createStore(globalFunctions, initState, devToolsEnhancer({}));

store.dispatch(Actions.registerRenderer(autocompleteControlTester, AutocompleteControl));

Приложение 1. js (запись только полезной части) 


import AutocompleteControl from './AutocompleteControl'
import autocompleteControlTester from './autocompleteControlTester'

var schema = {
        "type": "object",
        "properties": {
          "name": {
            "title": "Name",
            "type": "string"
          },

          "LastName_autocomplete_custom": {
            "type": "string"

          }
        }
      }

    var data = {}

    <JsonForms
      schema={schema}
      data = {data}      
      renderers={[...materialRenderers,                                                         
                  { tester: autocompleteControlTester, renderer: AutocompleteControl }
                ]}
      cells={materialCells}
   />

Приложение 2. js (запись только полезной части) 


import AutocompleteControl from './AutocompleteControl'
import autocompleteControlTester from './autocompleteControlTester'

var schema = {
        "type": "object",
        "properties": {
          "name": {
            "title": "Name",
            "type": "string"
          },

          "LastName": {
            "type": "autocomplete_custom"

          }
        }
      }

    var data = {}

    <JsonForms
      schema={schema}
      data = {data}      
      renderers={[...materialRenderers,                                                         
                  { tester: autocompleteControlTester, renderer: AutocompleteControl }
                ]}
      cells={materialCells}
   />

небольшие изменения в схеме "App1. js" и "App2. js" в именах и типах ключей (LastName_autocomplete_custom, LastName) соответственно.

Этот код отлично работает с ' App1. js 'означает, что рендеринг происходит правильно. Он не работает с "app2. js", я хочу, чтобы он работал с "App2. js". При «App2. js» рендеринг не происходит, но выдается ошибка (Uncaught Error: Unknown type: {"type": "autocomplete_custom"})

Мне нужно, чтобы он работал только для "App2. js "не для" App1. js "

...