diff --git a/packages/core/src/core.ts b/packages/core/src/core.ts deleted file mode 100644 index e7b85b0cf8..0000000000 --- a/packages/core/src/core.ts +++ /dev/null @@ -1,19 +0,0 @@ -/** - * Global JSONForms object that holds services and registries. - */ -export class JsonFormsGlobal { - /** - * Array of renderers that should be picked up at startup. - * @type {any[]} - */ - public renderers = []; - - /** - * Array of field renderers that should be picked up at startup. - * @type {any[]} - */ - public fields = []; -} - -const JsonFormsInit = new JsonFormsGlobal(); -export { JsonFormsInit} ; diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index bbcd060615..dc669c0fe4 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -1,4 +1,3 @@ -export * from './core'; export * from './util'; export * from './models/jsonSchema'; @@ -24,8 +23,8 @@ import { ControlElement, LabelDescription } from './models/uischema'; const Helpers: { createLabelDescriptionFrom(withLabel: ControlElement): LabelDescription; - convertToValidClassName(s: string): string } = { - + convertToValidClassName(s: string): string +} = { createLabelDescriptionFrom, convertToValidClassName }; diff --git a/packages/core/src/util/field.ts b/packages/core/src/util/field.ts index 62e52aae7d..f9e89c4b32 100644 --- a/packages/core/src/util/field.ts +++ b/packages/core/src/util/field.ts @@ -1,33 +1,16 @@ import * as _ from 'lodash'; import { ControlElement } from '../models/uischema'; -import { RankedTester } from '../testers'; -import { JsonFormsInit } from '../core'; import { getData, getErrorAt } from '../reducers'; import { composeWithUi, - StatePropsOfField, isEnabled, isVisible, - Resolve + Resolve, + StatePropsOfField } from '../util'; import { mapDispatchToControlProps } from './renderer'; import { DispatchPropsOfControl } from '../renderers'; -/** - * Registers the given field renderer when a JSON Forms store is created. - * @param {RankedTester} tester - * @param field the field to be registered - * @returns {any} - */ -export const registerStartupField = (tester: RankedTester, field: any) => { - JsonFormsInit.fields.push({ - tester, - field - }); - - return field; -}; - /** * Map state to field props. * diff --git a/packages/core/src/util/renderer.ts b/packages/core/src/util/renderer.ts index 537ff2de3e..c67deed945 100644 --- a/packages/core/src/util/renderer.ts +++ b/packages/core/src/util/renderer.ts @@ -1,7 +1,6 @@ import * as _ from 'lodash'; import { connect } from 'react-redux'; import { JsonSchema } from '../models/jsonSchema'; -import { JsonFormsInit } from '../core'; import { composeWithUi, createLabelDescriptionFrom, @@ -80,15 +79,6 @@ export const mapStateToLayoutProps = (state, ownProps): StatePropsOfLayout => { }; }; -export const registerStartupRenderer = (tester: RankedTester, renderer: any) => { - JsonFormsInit.renderers.push({ - tester, - renderer - }); - - return renderer; -}; - const isRequired = (schema: JsonSchema, schemaPath: string): boolean => { const pathSegments = schemaPath.split('/'); const lastSegment = pathSegments[pathSegments.length - 1]; diff --git a/packages/core/test/renderers/JsonForms.test.tsx b/packages/core/test/renderers/JsonForms.test.tsx index 5ec17d2582..f5755bc086 100644 --- a/packages/core/test/renderers/JsonForms.test.tsx +++ b/packages/core/test/renderers/JsonForms.test.tsx @@ -9,7 +9,7 @@ import { test } from 'ava'; import * as _ from 'lodash'; import { combineReducers, createStore } from 'redux'; import { Provider } from 'react-redux'; -import { JsonForms, JsonFormsInit, JsonSchema, UISchemaElement} from '../../src'; +import { JsonForms, JsonSchema, UISchemaElement } from '../../src'; import { RendererProps, StatelessRenderer } from '../../src/renderers'; import '../../src/renderers'; import { registerRenderer, unregisterRenderer } from '../../src/actions'; @@ -58,8 +58,6 @@ export const initJsonFormsStore = ({ schema, uischema }, - renderers: JsonFormsInit.renderers, - fields: JsonFormsInit.fields, ...props } } diff --git a/packages/examples/src/register.ts b/packages/examples/src/register.ts index 0cd314fa4e..c4b4a8c069 100644 --- a/packages/examples/src/register.ts +++ b/packages/examples/src/register.ts @@ -1,6 +1,6 @@ import { JsonFormsElement } from '@jsonforms/webcomponent'; import { ExampleDescription } from './example'; -import { JsonFormsInit, jsonformsReducer } from '@jsonforms/core'; +import { jsonformsReducer, RankedTester } from '@jsonforms/core'; import { combineReducers, createStore, Reducer } from 'redux'; import { i18nReducer, translateProps } from '@jsonforms/i18n'; @@ -11,7 +11,7 @@ const knownExamples: {[key: string]: ExampleDescription} = {}; export interface AdditionalStoreParams { name: string; - reducer: Reducer; + reducer?: Reducer; state: any; } @@ -19,37 +19,44 @@ export const registerExamples = (examples: ExampleDescription[]): void => { examples.forEach(example => knownExamples[example.name] = example); }; -export const changeExample = (selectedExample: string, ...additionalStoreParams: AdditionalStoreParams[]) => { - let body = document.getElementById(viewDivId); - if (body.firstChild !== null && body.firstChild.childNodes.length !== 0) { - body.removeChild(body.firstChild); - } - const example: ExampleDescription = knownExamples[selectedExample]; - if (example.setupCallback !== undefined) { - const div = document.createElement('div'); - example.setupCallback(div); - body.appendChild(div); - body = div; - } +export const changeExample = + (selectedExample: string, + renderers: { tester: RankedTester, renderer: any}[], + fields: { tester: RankedTester, field: any}[], + ...additionalStoreParams: AdditionalStoreParams[]) => { + let body = document.getElementById(viewDivId); + if (body.firstChild !== null && body.firstChild.childNodes.length !== 0) { + body.removeChild(body.firstChild); + } + const example: ExampleDescription = knownExamples[selectedExample]; + if (example.setupCallback !== undefined) { + const div = document.createElement('div'); + example.setupCallback(div); + body.appendChild(div); + body = div; + } + + const jsonForms = document.createElement('json-forms') as JsonFormsElement; + const additionalReducers = additionalStoreParams.reduce( + (acc, x) => { + if (x.reducer) { + acc[x.name] = x.reducer; + } + return acc; + }, + {} + ); + const additionalInitState = additionalStoreParams.reduce( + (acc, x) => { + acc[x.name] = x.state; - const jsonForms = document.createElement('json-forms') as JsonFormsElement; - const additionalReducers = additionalStoreParams.reduce( - (acc, x) => { - acc[x.name] = x.reducer; - return acc; - }, - {} - ); - const additionalInitState = additionalStoreParams.reduce( - (acc, x) => { - acc[x.name] = x.state; - return acc; - }, - {} - ); + return acc; + }, + {} + ); - jsonForms.store = createStore( - combineReducers({ + jsonForms.store = createStore( + combineReducers({ jsonforms: jsonformsReducer( { i18n: i18nReducer, @@ -57,51 +64,55 @@ export const changeExample = (selectedExample: string, ...additionalStoreParams: }, ) } - ), - { - jsonforms: { - core: { - data: example.data, - schema: example.schema, - uischema: example.uiSchema - }, - i18n: { - translations: example.translations, - locale: example.locale || navigator.language - }, - transformProps: [translateProps], - renderers: JsonFormsInit.renderers, - fields: JsonFormsInit.fields, - ...additionalInitState + ), + { + jsonforms: { + core: { + data: example.data, + schema: example.schema, + uischema: example.uiSchema + }, + renderers, + fields, + i18n: { + translations: example.translations, + locale: example.locale || navigator.language + }, + transformProps: [translateProps], + ...additionalInitState + } } - } - ); + ); - body.appendChild(jsonForms); -}; + body.appendChild(jsonForms); + }; -export const createExampleSelection = (...additionalStoreParams: AdditionalStoreParams[]): HTMLSelectElement => { +export const createExampleSelection = ( + renderers: { tester: RankedTester, renderer: any}[], + fields: { tester: RankedTester, field: any}[], + ...additionalStoreParams: AdditionalStoreParams[] +): HTMLSelectElement => { - const examplesDiv = document.getElementById(exampleDivId); - const labelExample = document.createElement('label'); - labelExample.textContent = 'Example:'; - labelExample.htmlFor = 'example_select'; - examplesDiv.appendChild(labelExample); - const select = document.createElement('select'); - select.id = 'example_select'; - Object.keys(knownExamples).forEach(key => { - const example = knownExamples[key]; - const option = document.createElement('option'); - option.value = example.name; - option.label = example.label; - option.text = example.label; - select.appendChild(option); - }); - select.onchange = () => { - changeExample(select.value, ...additionalStoreParams); - }; - examplesDiv.appendChild(select); - changeExample(select.value, ...additionalStoreParams); + const examplesDiv = document.getElementById(exampleDivId); + const labelExample = document.createElement('label'); + labelExample.textContent = 'Example:'; + labelExample.htmlFor = 'example_select'; + examplesDiv.appendChild(labelExample); + const select = document.createElement('select'); + select.id = 'example_select'; + Object.keys(knownExamples).forEach(key => { + const example = knownExamples[key]; + const option = document.createElement('option'); + option.value = example.name; + option.label = example.label; + option.text = example.label; + select.appendChild(option); + }); + select.onchange = () => { + changeExample(select.value, renderers, fields, ...additionalStoreParams); + }; + examplesDiv.appendChild(select); + changeExample(select.value, renderers, fields, ...additionalStoreParams); - return select; -}; + return select; + }; diff --git a/packages/material/example/index.ts b/packages/material/example/index.ts index f41014d90d..7db844a308 100644 --- a/packages/material/example/index.ts +++ b/packages/material/example/index.ts @@ -1,5 +1,9 @@ import { createExampleSelection } from '../../examples/src/register'; +import { materialFields, materialRenderers } from '../src'; window.onload = () => { - createExampleSelection(); + createExampleSelection( + materialRenderers, + materialFields + ); }; diff --git a/packages/material/package.json b/packages/material/package.json index 5d6f25f88d..ff9788fcfb 100644 --- a/packages/material/package.json +++ b/packages/material/package.json @@ -37,8 +37,6 @@ "material-ui": "1.0.0-beta.25", "material-ui-icons": "^1.0.0-beta.17", "react": "^16.2.0", - "react-dom": "^16.2.0", - "react-redux": "^5.0.6", "redux": "^3.7.2" }, "devDependencies": { @@ -50,6 +48,7 @@ "jsdom": "^11.5.1", "jsdom-global": "^3.0.2", "react-dom": "^16.2.0", + "react-redux": "^5.0.6", "source-map-loader": "^0.2.3", "ts-loader": "^3.2.0", "tslint-loader": "^3.5.3", diff --git a/packages/material/src/complex/MaterialArrayControlRenderer.tsx b/packages/material/src/complex/MaterialArrayControlRenderer.tsx index 0bbb5eeaec..e1149b2bb7 100644 --- a/packages/material/src/complex/MaterialArrayControlRenderer.tsx +++ b/packages/material/src/complex/MaterialArrayControlRenderer.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; import { + connectToJsonForms, mapDispatchToTableControlProps, mapStateToTableControlProps, RendererComponent, TableControlProps } from '@jsonforms/core'; -import { connect } from 'react-redux'; import { TableToolbar } from './TableToolbar'; import { MaterialTableControl } from './MaterialTableControl'; import Button from 'material-ui/Button'; @@ -129,7 +129,7 @@ export interface TableState { openConfirmDelete: boolean; } -export default connect( +export default connectToJsonForms( mapStateToTableControlProps, - mapDispatchToTableControlProps) -(MaterialArrayControlRenderer); + mapDispatchToTableControlProps +)(MaterialArrayControlRenderer); diff --git a/packages/material/src/complex/index.ts b/packages/material/src/complex/index.ts index f6dbf310dc..bfab7e8be0 100644 --- a/packages/material/src/complex/index.ts +++ b/packages/material/src/complex/index.ts @@ -1,13 +1,9 @@ import { - isArrayObjectControl, - rankWith, - registerStartupRenderer, + isArrayObjectControl, + RankedTester, + rankWith, } from '@jsonforms/core'; import MaterialArrayControlRenderer from './MaterialArrayControlRenderer'; -registerStartupRenderer( - rankWith(3, isArrayObjectControl), - MaterialArrayControlRenderer -); - -export default MaterialArrayControlRenderer; +export const materialArrayControlTester: RankedTester = rankWith(3, isArrayObjectControl); +export { MaterialArrayControlRenderer }; diff --git a/packages/material/src/controls/MaterialBooleanControl.tsx b/packages/material/src/controls/MaterialBooleanControl.tsx index 2016b53e0e..b0b2780b97 100644 --- a/packages/material/src/controls/MaterialBooleanControl.tsx +++ b/packages/material/src/controls/MaterialBooleanControl.tsx @@ -4,8 +4,8 @@ import { ControlProps, isBooleanControl, mapStateToControlProps, - rankWith, - registerStartupRenderer + RankedTester, + rankWith } from '@jsonforms/core'; import { FormControlLabel } from 'material-ui/Form'; @@ -32,6 +32,5 @@ const ConnectedMaterialBooleanControl = connectToJsonForms( mapStateToControlProps )(MaterialBooleanControl); -registerStartupRenderer(rankWith(2, isBooleanControl), ConnectedMaterialBooleanControl); - +export const materialBooleanControlTester: RankedTester = rankWith(2, isBooleanControl); export default ConnectedMaterialBooleanControl; diff --git a/packages/material/src/controls/MaterialInputControl.tsx b/packages/material/src/controls/MaterialInputControl.tsx index 58d7ae31a9..e34465d568 100644 --- a/packages/material/src/controls/MaterialInputControl.tsx +++ b/packages/material/src/controls/MaterialInputControl.tsx @@ -13,7 +13,6 @@ import { mapStateToControlProps, RankedTester, rankWith, - registerStartupRenderer, resolveSchema } from '@jsonforms/core'; @@ -47,8 +46,8 @@ export class MaterialInputControl extends Control { this.onFocus()} - onBlur={() => this.onBlur()} + onFocus={this.onFocus} + onBlur={this.onBlur} > {computeLabel(label, required)} @@ -61,7 +60,5 @@ export class MaterialInputControl extends Control { ); } } -export const inputControlTester: RankedTester = rankWith(1, isControl); -const ConnectedMaterialInputControl = connectToJsonForms(mapStateToControlProps)(MaterialInputControl) -registerStartupRenderer(inputControlTester, ConnectedMaterialInputControl); -export default ConnectedMaterialInputControl; +export const materialInputControlTester: RankedTester = rankWith(1, isControl); +export default connectToJsonForms(mapStateToControlProps)(MaterialInputControl); diff --git a/packages/material/src/controls/MaterialNativeControl.tsx b/packages/material/src/controls/MaterialNativeControl.tsx index 8c33596e7f..dc3c46ed82 100644 --- a/packages/material/src/controls/MaterialNativeControl.tsx +++ b/packages/material/src/controls/MaterialNativeControl.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { - connectToJsonForms, computeLabel, + connectToJsonForms, Control, ControlElement, ControlProps, @@ -13,7 +13,6 @@ import { or, RankedTester, rankWith, - registerStartupRenderer, resolveSchema } from '@jsonforms/core'; @@ -53,23 +52,23 @@ export class MaterialNativeControl extends Control { error={!isValid} style={style} fullWidth={!trim} - onFocus={() => this.onFocus()} - onBlur={() => this.onBlur()} + onFocus={this.onFocus} + onBlur={this.onBlur} helperText={!isValid ? errors : description} - InputLabelProps={{shrink: true, }} + InputLabelProps={{shrink: true}} value={data} onChange={onChange} /> ); } } -export const nativeControlTester: RankedTester = rankWith(2, or(isDateControl, isTimeControl)); -const ConnectedMaterialNativeControl = connectToJsonForms( +export const materialNativeControlTester: RankedTester = rankWith( + 2, + or(isDateControl, isTimeControl) +); + +export default connectToJsonForms( mapStateToControlProps, mapDispatchToControlProps )(MaterialNativeControl); - -registerStartupRenderer(nativeControlTester, ConnectedMaterialNativeControl); - -export default ConnectedMaterialNativeControl; diff --git a/packages/material/src/controls/index.ts b/packages/material/src/controls/index.ts index b9c7a64c70..fb0e4541f4 100644 --- a/packages/material/src/controls/index.ts +++ b/packages/material/src/controls/index.ts @@ -1,3 +1,12 @@ -export * from './MaterialBooleanControl'; -export * from './MaterialInputControl'; -export * from './MaterialNativeControl'; +import MaterialBooleanControl, { materialBooleanControlTester } from './MaterialBooleanControl'; +import MaterialInputControl, { materialInputControlTester } from './MaterialInputControl'; +import MaterialNativeControl, { materialNativeControlTester } from './MaterialNativeControl'; + +export { + MaterialBooleanControl, + materialBooleanControlTester, + MaterialInputControl, + materialInputControlTester, + MaterialNativeControl, + materialNativeControlTester +}; diff --git a/packages/material/src/fields/MaterialBooleanField.tsx b/packages/material/src/fields/MaterialBooleanField.tsx index 7a6a6980e3..0df0f5c049 100644 --- a/packages/material/src/fields/MaterialBooleanField.tsx +++ b/packages/material/src/fields/MaterialBooleanField.tsx @@ -1,15 +1,13 @@ import * as React from 'react'; import { + connectToJsonForms, FieldProps, isBooleanControl, mapDispatchToFieldProps, mapStateToFieldProps, RankedTester, - rankWith, - registerStartupField + rankWith } from '@jsonforms/core'; -import { connect } from 'react-redux'; - import Checkbox from 'material-ui/Checkbox'; export const MaterialBooleanField = (props: FieldProps) => { @@ -27,13 +25,9 @@ export const MaterialBooleanField = (props: FieldProps) => { ); }; -export const booleanFieldTester: RankedTester = rankWith(2, isBooleanControl); +export const materialBooleanFieldTester: RankedTester = rankWith(2, isBooleanControl); -const ConnectedMaterialBooleanField = connect( +export default connectToJsonForms( mapStateToFieldProps, mapDispatchToFieldProps )(MaterialBooleanField); - -registerStartupField(booleanFieldTester, ConnectedMaterialBooleanField); - -export default ConnectedMaterialBooleanField; diff --git a/packages/material/src/fields/MaterialDateField.tsx b/packages/material/src/fields/MaterialDateField.tsx index 0ca70c592a..47097f9028 100644 --- a/packages/material/src/fields/MaterialDateField.tsx +++ b/packages/material/src/fields/MaterialDateField.tsx @@ -1,15 +1,13 @@ import * as React from 'react'; import { + connectToJsonForms, FieldProps, isDateControl, mapDispatchToFieldProps, mapStateToFieldProps, RankedTester, - rankWith, - registerStartupField + rankWith } from '@jsonforms/core'; -import { connect } from 'react-redux'; - import Input from 'material-ui/Input'; export const MaterialDateField = (props: FieldProps) => { @@ -28,8 +26,5 @@ export const MaterialDateField = (props: FieldProps) => { /> ); }; -export const dateFieldTester: RankedTester = rankWith(2, isDateControl); -export default registerStartupField( - dateFieldTester, - connect(mapStateToFieldProps, mapDispatchToFieldProps)(MaterialDateField) -); +export const materialDateFieldTester: RankedTester = rankWith(2, isDateControl); +export default connectToJsonForms(mapStateToFieldProps, mapDispatchToFieldProps)(MaterialDateField); diff --git a/packages/material/src/fields/MaterialEnumField.tsx b/packages/material/src/fields/MaterialEnumField.tsx index c0d42a60db..87b33dee04 100644 --- a/packages/material/src/fields/MaterialEnumField.tsx +++ b/packages/material/src/fields/MaterialEnumField.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { + connectToJsonForms, ControlElement, FieldProps, isEnumControl, @@ -7,10 +8,8 @@ import { mapStateToFieldProps, RankedTester, rankWith, - registerStartupField, resolveSchema, } from '@jsonforms/core'; -import { connect } from 'react-redux'; import Select from 'material-ui/Select'; import { MenuItem } from 'material-ui/Menu'; @@ -47,8 +46,5 @@ export const MaterialEnumField = (props: FieldProps) => { * Default tester for enum controls. * @type {RankedTester} */ -export const enumFieldTester: RankedTester = rankWith(2, isEnumControl); -export default registerStartupField( - enumFieldTester, - connect(mapStateToFieldProps, mapDispatchToFieldProps)(MaterialEnumField) -); +export const materialEnumFieldTester: RankedTester = rankWith(2, isEnumControl); +export default connectToJsonForms(mapStateToFieldProps, mapDispatchToFieldProps)(MaterialEnumField) diff --git a/packages/material/src/fields/MaterialIntegerField.tsx b/packages/material/src/fields/MaterialIntegerField.tsx index e0ce1cea6d..a8aad7c045 100644 --- a/packages/material/src/fields/MaterialIntegerField.tsx +++ b/packages/material/src/fields/MaterialIntegerField.tsx @@ -1,14 +1,13 @@ import * as React from 'react'; import { + connectToJsonForms, FieldProps, isIntegerControl, mapDispatchToFieldProps, mapStateToFieldProps, RankedTester, - rankWith, - registerStartupField + rankWith } from '@jsonforms/core'; -import { connect } from 'react-redux'; import Input from 'material-ui/Input'; @@ -30,8 +29,8 @@ export const MaterialIntegerField = (props: FieldProps) => { /> ); }; -export const integerFieldTester: RankedTester = rankWith(2, isIntegerControl); -export default registerStartupField( - integerFieldTester, - connect(mapStateToFieldProps, mapDispatchToFieldProps)(MaterialIntegerField) -); +export const materialIntegerFieldTester: RankedTester = rankWith(2, isIntegerControl); +export default connectToJsonForms( + mapStateToFieldProps, + mapDispatchToFieldProps +)(MaterialIntegerField); diff --git a/packages/material/src/fields/MaterialNumberField.tsx b/packages/material/src/fields/MaterialNumberField.tsx index 56ee186bca..51d9472450 100644 --- a/packages/material/src/fields/MaterialNumberField.tsx +++ b/packages/material/src/fields/MaterialNumberField.tsx @@ -1,14 +1,13 @@ import * as React from 'react'; import { + connectToJsonForms, FieldProps, isNumberControl, mapDispatchToFieldProps, mapStateToFieldProps, RankedTester, rankWith, - registerStartupField } from '@jsonforms/core'; -import { connect } from 'react-redux'; import Input from 'material-ui/Input'; @@ -34,8 +33,8 @@ export const MaterialNumberField = (props: FieldProps) => { * Default tester for number controls. * @type {RankedTester} */ -export const numberFieldTester: RankedTester = rankWith(2, isNumberControl); -export default registerStartupField( - numberFieldTester, - connect(mapStateToFieldProps, mapDispatchToFieldProps)(MaterialNumberField) -); +export const materialNumberFieldTester: RankedTester = rankWith(2, isNumberControl); +export default connectToJsonForms( + mapStateToFieldProps, + mapDispatchToFieldProps +)(MaterialNumberField); diff --git a/packages/material/src/fields/MaterialSliderField.tsx b/packages/material/src/fields/MaterialSliderField.tsx index 9f20706256..ec21e0e488 100644 --- a/packages/material/src/fields/MaterialSliderField.tsx +++ b/packages/material/src/fields/MaterialSliderField.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { + connectToJsonForms, ControlElement, FieldProps, isRangeControl, @@ -7,10 +8,8 @@ import { mapStateToFieldProps, RankedTester, rankWith, - registerStartupField, resolveSchema } from '@jsonforms/core'; -import { connect } from 'react-redux'; import Input from 'material-ui/Input'; @@ -39,9 +38,8 @@ const MaterialSliderField = (props: FieldProps) => { * Matrial tester for slider controls. * @type {RankedTester} */ -export const sliderFieldTester: RankedTester = rankWith(4, isRangeControl); - -export default registerStartupField( - sliderFieldTester, - connect(mapStateToFieldProps, mapDispatchToFieldProps)(MaterialSliderField) -); +export const materialSliderFieldTester: RankedTester = rankWith(4, isRangeControl); +export default connectToJsonForms( + mapStateToFieldProps, + mapDispatchToFieldProps +)(MaterialSliderField); diff --git a/packages/material/src/fields/MaterialTextField.tsx b/packages/material/src/fields/MaterialTextField.tsx index 4b6e3fe480..0dce32055a 100644 --- a/packages/material/src/fields/MaterialTextField.tsx +++ b/packages/material/src/fields/MaterialTextField.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { + connectToJsonForms, ControlElement, FieldProps, isStringControl, @@ -7,10 +8,8 @@ import { mapStateToFieldProps, RankedTester, rankWith, - registerStartupField, resolveSchema } from '@jsonforms/core'; -import { connect } from 'react-redux'; import Input from 'material-ui/Input'; @@ -47,8 +46,8 @@ export const MaterialTextField = (props: FieldProps) => { * Default tester for text-based/string controls. * @type {RankedTester} */ -export const textFieldTester: RankedTester = rankWith(1, isStringControl); -export default registerStartupField( - textFieldTester, - connect(mapStateToFieldProps, mapDispatchToFieldProps)(MaterialTextField) -); +export const materialTextFieldTester: RankedTester = rankWith(1, isStringControl); +export default connectToJsonForms( + mapStateToFieldProps, + mapDispatchToFieldProps +)(MaterialTextField); diff --git a/packages/material/src/fields/MaterialTimeField.tsx b/packages/material/src/fields/MaterialTimeField.tsx index 33aee25025..08f014c5b3 100644 --- a/packages/material/src/fields/MaterialTimeField.tsx +++ b/packages/material/src/fields/MaterialTimeField.tsx @@ -1,14 +1,13 @@ import * as React from 'react'; import { + connectToJsonForms, FieldProps, isTimeControl, mapDispatchToFieldProps, mapStateToFieldProps, RankedTester, rankWith, - registerStartupField } from '@jsonforms/core'; -import { connect } from 'react-redux'; import Input from 'material-ui/Input'; @@ -28,8 +27,8 @@ export const MaterialTimeField = (props: FieldProps) => { /> ); }; -export const timeFieldTester: RankedTester = rankWith(2, isTimeControl); -export default registerStartupField( - timeFieldTester, - connect(mapStateToFieldProps, mapDispatchToFieldProps)(MaterialTimeField) -); +export const materialTimeFieldTester: RankedTester = rankWith(2, isTimeControl); +export default connectToJsonForms( + mapStateToFieldProps, + mapDispatchToFieldProps +)(MaterialTimeField); diff --git a/packages/material/src/fields/index.ts b/packages/material/src/fields/index.ts index 5792e0b260..b6a9954fbf 100644 --- a/packages/material/src/fields/index.ts +++ b/packages/material/src/fields/index.ts @@ -1,8 +1,27 @@ -export * from './MaterialBooleanField'; -export * from './MaterialDateField'; -export * from './MaterialEnumField'; -export * from './MaterialIntegerField'; -export * from './MaterialNumberField'; -export * from './MaterialSliderField'; -export * from './MaterialTextField'; -export * from './MaterialTimeField'; +import MaterialBooleanField, { materialBooleanFieldTester } from './MaterialBooleanField'; +import MaterialDateField, { materialDateFieldTester } from './MaterialDateField'; +import MaterialEnumField, { materialEnumFieldTester } from './MaterialEnumField'; +import MaterialIntegerField, { materialIntegerFieldTester } from './MaterialIntegerField'; +import MaterialNumberField, { materialNumberFieldTester } from './MaterialNumberField'; +import MaterialSliderField, { materialSliderFieldTester } from './MaterialSliderField'; +import MaterialTextField, { materialTextFieldTester } from './MaterialTextField'; +import MaterialTimeField, { materialTimeFieldTester } from './MaterialTimeField'; + +export { + MaterialBooleanField, + materialBooleanFieldTester, + MaterialDateField, + materialDateFieldTester, + MaterialEnumField, + materialEnumFieldTester, + MaterialIntegerField, + materialIntegerFieldTester, + MaterialNumberField, + materialNumberFieldTester, + MaterialSliderField, + materialSliderFieldTester, + MaterialTextField, + materialTextFieldTester, + MaterialTimeField, + materialTimeFieldTester +}; diff --git a/packages/material/src/index.ts b/packages/material/src/index.ts index 9cb3ea11fd..9ce9cf837d 100644 --- a/packages/material/src/index.ts +++ b/packages/material/src/index.ts @@ -1,5 +1,65 @@ -import 'react-dom'; +import { FieldProps, RankedTester } from '@jsonforms/core'; +import { MaterialArrayControlRenderer, materialArrayControlTester } from './complex'; +import { + MaterialBooleanControl, + materialBooleanControlTester, + MaterialInputControl, + materialInputControlTester, + MaterialNativeControl, + materialNativeControlTester, +} from './controls'; +import { + MaterialGroupLayout, + materialGroupTester, + MaterialHorizontalLayout, + materialHorizontalLayoutTester, + MaterialVerticalLayout, + materialVerticalLayoutTester +} from './layouts'; +import { + MaterialBooleanField, + materialBooleanFieldTester, + MaterialDateField, + materialDateFieldTester, + MaterialEnumField, + materialEnumFieldTester, + MaterialIntegerField, + materialIntegerFieldTester, + MaterialNumberField, + materialNumberFieldTester, + MaterialSliderField, + materialSliderFieldTester, + MaterialTextField, + materialTextFieldTester, + MaterialTimeField, + materialTimeFieldTester +} from './fields'; +import { ComponentType } from 'react'; + export * from './complex'; export * from './controls'; export * from './layouts'; export * from './fields'; + +export const materialRenderers = [ + // controls + { tester: materialArrayControlTester, renderer: MaterialArrayControlRenderer }, + { tester: materialBooleanControlTester, renderer: MaterialBooleanControl }, + { tester: materialNativeControlTester, renderer: MaterialNativeControl }, + { tester: materialInputControlTester, renderer: MaterialInputControl }, + // layouts + { tester: materialGroupTester, renderer: MaterialGroupLayout }, + { tester: materialHorizontalLayoutTester, renderer: MaterialHorizontalLayout }, + { tester: materialVerticalLayoutTester, renderer: MaterialVerticalLayout } +]; + +export const materialFields: { tester: RankedTester, field: ComponentType }[] = [ + { tester: materialBooleanFieldTester, field: MaterialBooleanField }, + { tester: materialDateFieldTester, field: MaterialDateField }, + { tester: materialEnumFieldTester, field: MaterialEnumField }, + { tester: materialIntegerFieldTester, field: MaterialIntegerField }, + { tester: materialNumberFieldTester, field: MaterialNumberField }, + { tester: materialSliderFieldTester, field: MaterialSliderField }, + { tester: materialTextFieldTester, field: MaterialTextField }, + { tester: materialTimeFieldTester, field: MaterialTimeField }, +]; diff --git a/packages/material/src/layouts/MaterialGroupLayout.tsx b/packages/material/src/layouts/MaterialGroupLayout.tsx index e36a68a25e..bd3fa4dfc8 100644 --- a/packages/material/src/layouts/MaterialGroupLayout.tsx +++ b/packages/material/src/layouts/MaterialGroupLayout.tsx @@ -2,16 +2,15 @@ import * as React from 'react'; import * as _ from 'lodash'; import { Card, CardContent, CardHeader } from 'material-ui'; import { - GroupLayout, - mapStateToLayoutProps, - RankedTester, - rankWith, - registerStartupRenderer, - RendererProps, - uiTypeIs, - withIncreasedRank + connectToJsonForms, + GroupLayout, + mapStateToLayoutProps, + RankedTester, + rankWith, + RendererProps, + uiTypeIs, + withIncreasedRank } from '@jsonforms/core'; -import { connect } from 'react-redux'; import { MaterialLayoutRenderer, MaterialLayoutRendererProps } from '../util/layout'; export const groupTester: RankedTester = rankWith(1, uiTypeIs('Group')); @@ -35,10 +34,7 @@ export const MaterializedGroupLayoutRenderer = (props: RendererProps) => { return ( - { - !_.isEmpty(groupLayout.label) && - - } + { !_.isEmpty(groupLayout.label) && } @@ -46,13 +42,8 @@ export const MaterializedGroupLayoutRenderer = (props: RendererProps) => { ); }; -const ConnectedMaterializedGroupLayoutRenderer = connect( +export default connectToJsonForms( mapStateToLayoutProps )(MaterializedGroupLayoutRenderer); -registerStartupRenderer( - withIncreasedRank(1, groupTester), - ConnectedMaterializedGroupLayoutRenderer -); - -export default ConnectedMaterializedGroupLayoutRenderer; +export const materialGroupTester: RankedTester = withIncreasedRank(1, groupTester); diff --git a/packages/material/src/layouts/MaterialHorizontalLayout.tsx b/packages/material/src/layouts/MaterialHorizontalLayout.tsx index 7e10b89b32..bcdf59089c 100644 --- a/packages/material/src/layouts/MaterialHorizontalLayout.tsx +++ b/packages/material/src/layouts/MaterialHorizontalLayout.tsx @@ -1,21 +1,23 @@ import * as React from 'react'; import { + connectToJsonForms, HorizontalLayout, mapStateToLayoutProps, RankedTester, rankWith, - registerStartupRenderer, RendererProps, uiTypeIs } from '@jsonforms/core'; -import { connect } from 'react-redux'; import { MaterialLayoutRenderer, MaterialLayoutRendererProps } from '../util/layout'; /** * Default tester for a horizontal layout. * @type {RankedTester} */ -export const horizontalLayoutTester: RankedTester = rankWith(2, uiTypeIs('HorizontalLayout')); +export const materialHorizontalLayoutTester: RankedTester = rankWith( + 2, + uiTypeIs('HorizontalLayout') +); export const MaterialHorizontalLayoutRenderer = ( { schema, uischema, path, visible }: RendererProps) => { @@ -31,8 +33,7 @@ export const MaterialHorizontalLayoutRenderer = ( return ; }; -const ConnectedMaterialHorizontalLayoutRendered = connect( +const ConnectedMaterialHorizontalLayoutRendered = connectToJsonForms( mapStateToLayoutProps )(MaterialHorizontalLayoutRenderer); -registerStartupRenderer(horizontalLayoutTester, ConnectedMaterialHorizontalLayoutRendered); -export default ConnectedMaterialHorizontalLayoutRendered; \ No newline at end of file +export default ConnectedMaterialHorizontalLayoutRendered; diff --git a/packages/material/src/layouts/MaterialVerticalLayout.tsx b/packages/material/src/layouts/MaterialVerticalLayout.tsx index aabee09470..c1b1318c51 100644 --- a/packages/material/src/layouts/MaterialVerticalLayout.tsx +++ b/packages/material/src/layouts/MaterialVerticalLayout.tsx @@ -1,21 +1,20 @@ import * as React from 'react'; import { + connectToJsonForms, mapStateToLayoutProps, RankedTester, rankWith, - registerStartupRenderer, RendererProps, uiTypeIs, VerticalLayout, } from '@jsonforms/core'; -import { connect } from 'react-redux'; import { MaterialLayoutRenderer, MaterialLayoutRendererProps } from '../util/layout'; /** * Default tester for a vertical layout. * @type {RankedTester} */ -export const verticalLayoutTester: RankedTester = rankWith(1, uiTypeIs('VerticalLayout')); +export const materialVerticalLayoutTester: RankedTester = rankWith(1, uiTypeIs('VerticalLayout')); export const MaterialVerticalLayoutRenderer = ( { schema, uischema, path, visible }: RendererProps) => { @@ -31,8 +30,6 @@ export const MaterialVerticalLayoutRenderer = ( return ; }; -const ConnectedMaterialLayoutRenderer = connect( +export default connectToJsonForms( mapStateToLayoutProps -)(MaterialVerticalLayoutRenderer); -registerStartupRenderer(verticalLayoutTester, ConnectedMaterialLayoutRenderer); -export default ConnectedMaterialLayoutRenderer; \ No newline at end of file +)(MaterialVerticalLayoutRenderer); \ No newline at end of file diff --git a/packages/material/src/layouts/index.ts b/packages/material/src/layouts/index.ts index 61b01b28d3..4f90f2f4ab 100644 --- a/packages/material/src/layouts/index.ts +++ b/packages/material/src/layouts/index.ts @@ -1,3 +1,14 @@ -export * from './MaterialGroupLayout'; -export * from './MaterialHorizontalLayout'; -export * from './MaterialVerticalLayout'; +import MaterialGroupLayout, { materialGroupTester } from './MaterialGroupLayout'; +import MaterialHorizontalLayout, { + materialHorizontalLayoutTester +} from './MaterialHorizontalLayout'; +import MaterialVerticalLayout, { materialVerticalLayoutTester } from './MaterialVerticalLayout'; + +export { + MaterialGroupLayout, + materialGroupTester, + MaterialHorizontalLayout, + materialHorizontalLayoutTester, + MaterialVerticalLayout, + materialVerticalLayoutTester +}; diff --git a/packages/material/test/renderers/MaterialBooleanField.test.tsx b/packages/material/test/renderers/MaterialBooleanField.test.tsx index 5ab11abc49..ed89484aa5 100644 --- a/packages/material/test/renderers/MaterialBooleanField.test.tsx +++ b/packages/material/test/renderers/MaterialBooleanField.test.tsx @@ -8,7 +8,7 @@ import { JsonSchema, update } from '@jsonforms/core'; -import BooleanField, { booleanFieldTester } from '../../src/fields/MaterialBooleanField'; +import BooleanField, { materialBooleanFieldTester } from '../../src/fields/MaterialBooleanField'; import HorizontalLayoutRenderer from '../../src/layouts/MaterialHorizontalLayout'; import { Provider } from 'react-redux'; import * as TestUtils from 'react-dom/test-utils'; @@ -150,10 +150,10 @@ test('autofocus inactive by default', t => { }); test('tester', t => { - t.is(booleanFieldTester(undefined, undefined), -1); - t.is(booleanFieldTester(null, undefined), -1); - t.is(booleanFieldTester({type: 'Foo'}, undefined), -1); - t.is(booleanFieldTester({type: 'Control'}, undefined), -1); + t.is(materialBooleanFieldTester(undefined, undefined), -1); + t.is(materialBooleanFieldTester(null, undefined), -1); + t.is(materialBooleanFieldTester({type: 'Foo'}, undefined), -1); + t.is(materialBooleanFieldTester({type: 'Control'}, undefined), -1); }); test('tester with wrong prop type', t => { @@ -162,7 +162,7 @@ test('tester with wrong prop type', t => { scope: '#/properties/foo', }; t.is( - booleanFieldTester( + materialBooleanFieldTester( control, {type: 'object', properties: {foo: {type: 'string'}}} ), @@ -176,7 +176,7 @@ test('tester with wrong prop type, but sibling has correct one', t => { scope: '#/properties/foo' }; t.is( - booleanFieldTester( + materialBooleanFieldTester( control, { type: 'object', @@ -200,7 +200,7 @@ test('tester with matching prop type', t => { scope: '#/properties/foo' }; t.is( - booleanFieldTester( + materialBooleanFieldTester( control, { type: 'object', diff --git a/packages/material/test/renderers/MaterialDateField.test.tsx b/packages/material/test/renderers/MaterialDateField.test.tsx index c448377134..4be2d7c6a8 100644 --- a/packages/material/test/renderers/MaterialDateField.test.tsx +++ b/packages/material/test/renderers/MaterialDateField.test.tsx @@ -9,7 +9,7 @@ import { update } from '@jsonforms/core'; import HorizontalLayoutRenderer from '../../src/layouts/MaterialHorizontalLayout'; -import DateField, { dateFieldTester } from '../../src/fields/MaterialDateField'; +import DateField, { materialDateFieldTester } from '../../src/fields/MaterialDateField'; import { Provider } from 'react-redux'; import * as TestUtils from 'react-dom/test-utils'; @@ -141,15 +141,15 @@ test('autofocus inactive by default', t => { }); test('tester', t => { - t.is(dateFieldTester(undefined, undefined), -1); - t.is(dateFieldTester(null, undefined), -1); - t.is(dateFieldTester({ type: 'Foo' }, undefined), -1); - t.is(dateFieldTester({ type: 'Control' }, undefined), -1); + t.is(materialDateFieldTester(undefined, undefined), -1); + t.is(materialDateFieldTester(null, undefined), -1); + t.is(materialDateFieldTester({ type: 'Foo' }, undefined), -1); + t.is(materialDateFieldTester({ type: 'Control' }, undefined), -1); }); test('tester with wrong prop type', t => { t.is( - dateFieldTester( + materialDateFieldTester( t.context.uischmea, { type: 'object', @@ -164,7 +164,7 @@ test('tester with wrong prop type', t => { test('tester with wrong prop type, but sibling has correct one', t => { t.is( - dateFieldTester( + materialDateFieldTester( t.context.uischema, { type: 'object', @@ -183,7 +183,7 @@ test('tester with wrong prop type, but sibling has correct one', t => { test('tester with correct prop type', t => { t.is( - dateFieldTester( + materialDateFieldTester( t.context.uischema, { type: 'object', diff --git a/packages/material/test/renderers/MaterialInputControl.test.tsx b/packages/material/test/renderers/MaterialInputControl.test.tsx index 28ecdb76ce..fcccde8d81 100644 --- a/packages/material/test/renderers/MaterialInputControl.test.tsx +++ b/packages/material/test/renderers/MaterialInputControl.test.tsx @@ -1,12 +1,21 @@ import { initJsonFormsStore } from '@jsonforms/test'; -import * as React from 'react'; import test from 'ava'; -import '../../src/fields'; -import { Actions, ControlElement, HorizontalLayout, JsonSchema } from '@jsonforms/core'; -import HorizontalLayoutRenderer from '../../src/layouts/MaterialHorizontalLayout'; -import InputControl, { inputControlTester } from '../../src/controls/MaterialInputControl'; +import * as React from 'react'; import { Provider } from 'react-redux'; import * as TestUtils from 'react-dom/test-utils'; +import { + Actions, + ControlElement, + HorizontalLayout, + JsonSchema +} from '@jsonforms/core'; +import { testRenderers } from '@jsonforms/test'; +import '../../src/fields'; +import MaterialInputControl, { + materialInputControlTester +} from '../../src/controls/MaterialInputControl'; +import MaterialHorizontalLayoutRenderer from '../../src/layouts/MaterialHorizontalLayout'; +import { materialFields, materialRenderers } from '../../src'; test.beforeEach(t => { t.context.data = { 'foo': 'bar' }; @@ -61,11 +70,12 @@ test('autofocus on first element', t => { data, schema, uischema, - renderers: [{ tester: inputControlTester, renderer: InputControl }] + renderers: materialRenderers, + fields: materialFields }); const tree = TestUtils.renderIntoDocument( - + ); const inputs = TestUtils.scryRenderedDOMComponentsWithTag(tree, 'input'); @@ -74,12 +84,12 @@ test('autofocus on first element', t => { }); test('tester', t => { - t.is(inputControlTester(undefined, undefined), -1); - t.is(inputControlTester(null, undefined), -1); - t.is(inputControlTester({type: 'Foo'}, undefined), -1); - t.is(inputControlTester({type: 'Control'}, undefined), -1); + t.is(materialInputControlTester(undefined, undefined), -1); + t.is(materialInputControlTester(null, undefined), -1); + t.is(materialInputControlTester({type: 'Foo'}, undefined), -1); + t.is(materialInputControlTester({type: 'Control'}, undefined), -1); const control: ControlElement = { type: 'Control', scope: '#/properties/foo' }; - t.is(inputControlTester(control, undefined), 1); + t.is(materialInputControlTester(control, undefined), 1); }); test('render', t => { @@ -87,10 +97,13 @@ test('render', t => { data: t.context.data, schema: t.context.schema, uischema: t.context.uischema, + renderers: testRenderers, + fields: materialFields }); + const tree = TestUtils.renderIntoDocument( - + ); @@ -120,11 +133,13 @@ test('render without label', t => { const store = initJsonFormsStore({ data: t.context.data, schema: t.context.schema, - uischema + uischema, + renderers: testRenderers, + fields: materialFields }); const tree = TestUtils.renderIntoDocument( - + ); @@ -153,7 +168,11 @@ test('hide', t => { }); const tree = TestUtils.renderIntoDocument( - + ); const control = TestUtils.scryRenderedDOMComponentsWithTag(tree, 'div')[0] as HTMLElement; @@ -169,7 +188,7 @@ test('show by default', t => { const tree = TestUtils.renderIntoDocument( - + ); const control = TestUtils.scryRenderedDOMComponentsWithTag(tree, 'div')[0] as HTMLElement; @@ -184,7 +203,7 @@ test('single error', t => { }); const tree = TestUtils.renderIntoDocument( - + ); @@ -201,7 +220,7 @@ test('multiple errors', t => { }); const tree = TestUtils.renderIntoDocument( - + ); const validation = TestUtils.findRenderedDOMComponentWithTag(tree, 'p'); @@ -217,7 +236,7 @@ test('empty errors by default', t => { }); const tree = TestUtils.renderIntoDocument( - + ); const validation = TestUtils.findRenderedDOMComponentWithTag(tree, 'p'); @@ -232,7 +251,7 @@ test('reset validation message', t => { }); const tree = TestUtils.renderIntoDocument( - + ); const validation = TestUtils.findRenderedDOMComponentWithTag(tree, 'p'); @@ -291,11 +310,11 @@ test('validation of nested schema', t => { data, schema, uischema, - renderers: [{ tester: inputControlTester, renderer: InputControl} ] + renderers: [{ tester: materialInputControlTester, renderer: MaterialInputControl} ] }); const tree = TestUtils.renderIntoDocument( - + ); const validation = TestUtils.scryRenderedDOMComponentsWithTag(tree, 'p'); @@ -326,7 +345,7 @@ test('required field is marked', t => { }); const tree = TestUtils.renderIntoDocument( - + ); const label = TestUtils.findRenderedDOMComponentWithTag(tree, 'label'); @@ -355,7 +374,7 @@ test('not required', t => { }); const tree = TestUtils.renderIntoDocument( - + ); const label = TestUtils.findRenderedDOMComponentWithTag(tree, 'label'); diff --git a/packages/material/test/renderers/MaterialIntegerField.test.tsx b/packages/material/test/renderers/MaterialIntegerField.test.tsx index 9043bf3f6d..11924f882d 100644 --- a/packages/material/test/renderers/MaterialIntegerField.test.tsx +++ b/packages/material/test/renderers/MaterialIntegerField.test.tsx @@ -8,7 +8,7 @@ import { JsonSchema, update } from '@jsonforms/core'; -import IntegerField, { integerFieldTester } from '../../src/fields/MaterialIntegerField'; +import IntegerField, { materialIntegerFieldTester } from '../../src/fields/MaterialIntegerField'; import HorizontalLayoutRenderer from '../../src/layouts/MaterialHorizontalLayout'; import { Provider } from 'react-redux'; import * as TestUtils from 'react-dom/test-utils'; @@ -143,31 +143,31 @@ test('autofocus inactive by default', t => { }); test('tester', t => { - t.is(integerFieldTester(undefined, undefined), -1); - t.is(integerFieldTester(null, undefined), -1); - t.is(integerFieldTester({ type: 'Foo' }, undefined), -1); - t.is(integerFieldTester({ type: 'Control' }, undefined), -1); + t.is(materialIntegerFieldTester(undefined, undefined), -1); + t.is(materialIntegerFieldTester(null, undefined), -1); + t.is(materialIntegerFieldTester({ type: 'Foo' }, undefined), -1); + t.is(materialIntegerFieldTester({ type: 'Control' }, undefined), -1); const controlElement: ControlElement = { type: 'Control', scope: '#/properties/foo' }; t.is( - integerFieldTester( + materialIntegerFieldTester( controlElement, { type: 'object', properties: {foo: {type: 'string'}} } ), -1 ); t.is( - integerFieldTester( + materialIntegerFieldTester( controlElement, {type: 'object', properties: {foo: {type: 'string'}, bar: {type: 'integer'}}} ), -1 ); t.is( - integerFieldTester( + materialIntegerFieldTester( controlElement, {type: 'object', properties: {foo: {type: 'integer'}}}), 2 diff --git a/packages/material/test/renderers/MaterialNumberField.test.tsx b/packages/material/test/renderers/MaterialNumberField.test.tsx index e14d739711..4d39582972 100644 --- a/packages/material/test/renderers/MaterialNumberField.test.tsx +++ b/packages/material/test/renderers/MaterialNumberField.test.tsx @@ -8,7 +8,7 @@ import { JsonSchema, update } from '@jsonforms/core'; -import NumberField, { numberFieldTester } from '../../src/fields/MaterialNumberField'; +import NumberField, { materialNumberFieldTester } from '../../src/fields/MaterialNumberField'; import HorizontalLayoutRenderer from '../../src/layouts/MaterialHorizontalLayout'; import { Provider } from 'react-redux'; import * as TestUtils from 'react-dom/test-utils'; @@ -143,10 +143,10 @@ test('autofocus inactive by default', t => { }); test('tester', t => { - t.is(numberFieldTester(undefined, undefined), -1); - t.is(numberFieldTester(null, undefined), -1); - t.is(numberFieldTester({type: 'Foo'}, undefined), -1); - t.is(numberFieldTester({type: 'Control'}, undefined), -1); + t.is(materialNumberFieldTester(undefined, undefined), -1); + t.is(materialNumberFieldTester(null, undefined), -1); + t.is(materialNumberFieldTester({type: 'Foo'}, undefined), -1); + t.is(materialNumberFieldTester({type: 'Control'}, undefined), -1); }); test('tester with wrong schema type', t => { @@ -155,7 +155,7 @@ test('tester with wrong schema type', t => { scope: '#/properties/foo' }; t.is( - numberFieldTester( + materialNumberFieldTester( control, { type: 'object', @@ -176,7 +176,7 @@ test('tester with wrong schema type, but sibling has correct one', t => { scope: '#/properties/foo' }; t.is( - numberFieldTester( + materialNumberFieldTester( control, { type: 'object', @@ -200,7 +200,7 @@ test('tester with machting schema type', t => { scope: '#/properties/foo' }; t.is( - numberFieldTester( + materialNumberFieldTester( control, { type: 'object', diff --git a/packages/material/test/renderers/MaterialSliderField.test.tsx b/packages/material/test/renderers/MaterialSliderField.test.tsx index a4f1c726f9..6bf0a9278d 100644 --- a/packages/material/test/renderers/MaterialSliderField.test.tsx +++ b/packages/material/test/renderers/MaterialSliderField.test.tsx @@ -8,7 +8,7 @@ import { JsonSchema, update } from '@jsonforms/core'; -import SliderField, { sliderFieldTester } from '../../src/fields/MaterialSliderField'; +import SliderField, { materialSliderFieldTester } from '../../src/fields/MaterialSliderField'; import HorizontalLayoutRenderer from '../../src/layouts/MaterialHorizontalLayout'; import { Provider } from 'react-redux'; import * as TestUtils from 'react-dom/test-utils'; @@ -136,10 +136,10 @@ test('autofocus inactive by default', t => { }); test('tester', t => { - t.is(sliderFieldTester(undefined, undefined), -1); - t.is(sliderFieldTester(null, undefined), -1); - t.is(sliderFieldTester({type: 'Foo'}, undefined), -1); - t.is(sliderFieldTester({type: 'Control'}, undefined), -1); + t.is(materialSliderFieldTester(undefined, undefined), -1); + t.is(materialSliderFieldTester(null, undefined), -1); + t.is(materialSliderFieldTester({type: 'Foo'}, undefined), -1); + t.is(materialSliderFieldTester({type: 'Control'}, undefined), -1); }); test('tester with wrong schema type', t => { @@ -148,7 +148,7 @@ test('tester with wrong schema type', t => { scope: '#/properties/foo' }; t.is( - sliderFieldTester( + materialSliderFieldTester( control, { type: 'object', @@ -167,7 +167,7 @@ test('tester with wrong schema type, but sibling has correct one', t => { scope: '#/properties/foo' }; t.is( - sliderFieldTester( + materialSliderFieldTester( control, { type: 'object', @@ -187,7 +187,7 @@ test('tester with correct schema type, but missing maximum and minimum fields', scope: '#/properties/foo' }; t.is( - sliderFieldTester( + materialSliderFieldTester( control, { type: 'object', @@ -206,7 +206,7 @@ test('tester with correct schema type, but missing maximum', t => { scope: '#/properties/foo' }; t.is( - sliderFieldTester( + materialSliderFieldTester( control, { type: 'object', @@ -228,7 +228,7 @@ test('tester with correct schema type,but missing minimum', t => { scope: '#/properties/foo' }; t.is( - sliderFieldTester( + materialSliderFieldTester( control, { type: 'object', @@ -250,7 +250,7 @@ test('tester with matching schema type (number) without default', t => { scope: '#/properties/foo' }; t.is( - sliderFieldTester( + materialSliderFieldTester( control, { type: 'object', @@ -273,7 +273,7 @@ test('tester with matching schema type (integer) without default', t => { scope: '#/properties/foo' }; t.is( - sliderFieldTester( + materialSliderFieldTester( control, { type: 'object', @@ -296,7 +296,7 @@ test('tester with matching schema type (number) with default', t => { scope: '#/properties/foo' }; t.is( - sliderFieldTester( + materialSliderFieldTester( control, { type: 'object', @@ -320,7 +320,7 @@ test('tester with matching schema type (integer) with default', t => { scope: '#/properties/foo' }; t.is( - sliderFieldTester( + materialSliderFieldTester( control, { type: 'object', diff --git a/packages/material/test/renderers/MaterialTextField.test.tsx b/packages/material/test/renderers/MaterialTextField.test.tsx index 46f8810535..816908d34c 100644 --- a/packages/material/test/renderers/MaterialTextField.test.tsx +++ b/packages/material/test/renderers/MaterialTextField.test.tsx @@ -8,7 +8,7 @@ import { JsonSchema, update } from '@jsonforms/core'; -import TextField, { textFieldTester, } from '../../src/fields/MaterialTextField'; +import TextField, { materialTextFieldTester, } from '../../src/fields/MaterialTextField'; import HorizontalLayoutRenderer from '../../src/layouts/MaterialHorizontalLayout'; import { Provider } from 'react-redux'; import * as TestUtils from 'react-dom/test-utils'; @@ -145,11 +145,11 @@ test('autofocus inactive by default', t => { }); test('tester', t => { - t.is(textFieldTester(undefined, undefined), -1); - t.is(textFieldTester(null, undefined), -1); - t.is(textFieldTester({type: 'Foo'}, undefined), -1); + t.is(materialTextFieldTester(undefined, undefined), -1); + t.is(materialTextFieldTester(null, undefined), -1); + t.is(materialTextFieldTester({type: 'Foo'}, undefined), -1); // scope is missing - t.is(textFieldTester({type: 'Control'}, undefined), -1); + t.is(materialTextFieldTester({type: 'Control'}, undefined), -1); }); test('render', t => { diff --git a/packages/material/test/renderers/MaterialTimeField.test.tsx b/packages/material/test/renderers/MaterialTimeField.test.tsx index c809ba8659..6ec4883931 100644 --- a/packages/material/test/renderers/MaterialTimeField.test.tsx +++ b/packages/material/test/renderers/MaterialTimeField.test.tsx @@ -9,7 +9,7 @@ import { update } from '@jsonforms/core'; import HorizontalLayoutRenderer from '../../src/layouts/MaterialHorizontalLayout'; -import TimeField, { timeFieldTester } from '../../src/fields/MaterialTimeField'; +import TimeField, { materialTimeFieldTester } from '../../src/fields/MaterialTimeField'; import { Provider } from 'react-redux'; import * as TestUtils from 'react-dom/test-utils'; @@ -142,15 +142,15 @@ test('autofocus inactive by default', t => { }); test('tester', t => { - t.is(timeFieldTester(undefined, undefined), -1); - t.is(timeFieldTester(null, undefined), -1); - t.is(timeFieldTester({ type: 'Foo' }, undefined), -1); - t.is(timeFieldTester({ type: 'Control' }, undefined), -1); + t.is(materialTimeFieldTester(undefined, undefined), -1); + t.is(materialTimeFieldTester(null, undefined), -1); + t.is(materialTimeFieldTester({ type: 'Foo' }, undefined), -1); + t.is(materialTimeFieldTester({ type: 'Control' }, undefined), -1); }); test('tester with wrong prop type', t => { t.is( - timeFieldTester( + materialTimeFieldTester( t.context.uischmea, { type: 'object', @@ -165,7 +165,7 @@ test('tester with wrong prop type', t => { test('tester with wrong prop type, but sibling has correct one', t => { t.is( - timeFieldTester( + materialTimeFieldTester( t.context.uischema, { type: 'object', @@ -184,7 +184,7 @@ test('tester with wrong prop type, but sibling has correct one', t => { test('tester with correct prop type', t => { t.is( - timeFieldTester( + materialTimeFieldTester( t.context.uischema, { type: 'object', diff --git a/packages/test/src/FakeControl.tsx b/packages/test/src/FakeControl.tsx index 75801b59a2..8b1b02eb3a 100644 --- a/packages/test/src/FakeControl.tsx +++ b/packages/test/src/FakeControl.tsx @@ -7,8 +7,7 @@ import { isControl, mapStateToControlProps, RankedTester, - rankWith, - registerStartupRenderer + rankWith } from '@jsonforms/core'; /** @@ -29,6 +28,4 @@ const FakeControl = (props: ControlProps) => { const ConnectedFakeControl = connectToJsonForms(mapStateToControlProps, null)(FakeControl); -registerStartupRenderer(fakeControlTester, ConnectedFakeControl); - export default ConnectedFakeControl; diff --git a/packages/test/src/FakeLayout.tsx b/packages/test/src/FakeLayout.tsx index 8f0a0ed6e5..9c6d0771d0 100644 --- a/packages/test/src/FakeLayout.tsx +++ b/packages/test/src/FakeLayout.tsx @@ -6,7 +6,6 @@ import { mapStateToLayoutProps, RankedTester, rankWith, - registerStartupRenderer, RendererProps, Test, } from '@jsonforms/core'; @@ -51,6 +50,4 @@ const FakeLayout = (props: RendererProps) => { const ConnectedFakeLayout = connectToJsonForms(mapStateToLayoutProps, null)(FakeLayout); -registerStartupRenderer(fakeLayoutTester, ConnectedFakeLayout); - export default ConnectedFakeLayout; diff --git a/packages/test/src/index.ts b/packages/test/src/index.ts index 76ede6addf..32d657d8ff 100644 --- a/packages/test/src/index.ts +++ b/packages/test/src/index.ts @@ -4,8 +4,7 @@ declare let global; installCE(global, 'force'); global.requestAnimationFrame = cb => setTimeout(cb, 0); import { - INIT, - JsonFormsInit, + Actions, jsonformsReducer, JsonFormsState, JsonSchema, @@ -49,25 +48,13 @@ export const initJsonFormsStore = ({ combineReducers({ jsonforms: jsonformsReducer() }), { jsonforms: { - core: { - data, - schema, - uischema - }, - renderers: JsonFormsInit.renderers, - fields: JsonFormsInit.fields, + renderers: testRenderers, ...props } } ); - // necessary for validation to work - store.dispatch({ - type: INIT, - schema, - data, - uischema - }); + store.dispatch(Actions.init(data, schema, uischema)); return store; }; @@ -76,3 +63,8 @@ import FakeLayout, { fakeLayoutTester } from './FakeLayout'; import FakeControl, { fakeControlTester } from './FakeControl'; export { FakeControl, FakeLayout, fakeLayoutTester, fakeControlTester }; + +export const testRenderers = [ + { tester: fakeLayoutTester, renderer: FakeLayout }, + { tester: fakeControlTester, renderer: FakeControl } +]; diff --git a/packages/vanilla/example/index.ts b/packages/vanilla/example/index.ts index 7aac1a8a9a..77d792e7be 100644 --- a/packages/vanilla/example/index.ts +++ b/packages/vanilla/example/index.ts @@ -2,9 +2,12 @@ import { createExampleSelection } from '../../examples/src/register'; import { createThemeSelection } from './theme.switcher'; import { vanillaStyles } from '../src/util'; import { stylingReducer } from '../src/reducers'; +import { vanillaFields, vanillaRenderers } from '../src'; window.onload = () => { createExampleSelection( + vanillaRenderers, + vanillaFields, { name: 'styles', reducer: stylingReducer, diff --git a/packages/vanilla/package.json b/packages/vanilla/package.json index cfeeaa7339..ccbfb03164 100644 --- a/packages/vanilla/package.json +++ b/packages/vanilla/package.json @@ -19,7 +19,6 @@ "dependencies": { "@jsonforms/core": "^2.0.0-rc.1", "react": "^16.2.0", - "react-redux": "^5.0.6", "redux": "^3.7.2" }, "devDependencies": { @@ -31,6 +30,7 @@ "jsdom": "^11.5.1", "jsdom-global": "^3.0.2", "react-dom": "^16.2.0", + "react-redux": "^5.0.6", "source-map-loader": "^0.2.3", "ts-loader": "^3.2.0", "tslint-loader": "^3.5.3", diff --git a/packages/vanilla/src/complex/LabelRenderer.tsx b/packages/vanilla/src/complex/LabelRenderer.tsx index 3bb7f348a9..d669ee2875 100644 --- a/packages/vanilla/src/complex/LabelRenderer.tsx +++ b/packages/vanilla/src/complex/LabelRenderer.tsx @@ -1,18 +1,17 @@ import * as React from 'react'; import * as _ from 'lodash'; import { + connectToJsonForms, isVisible, LabelElement, RankedTester, rankWith, - registerStartupRenderer, + RendererProps, StatelessRenderer, uiTypeIs, } from '@jsonforms/core'; -import { connect } from 'react-redux'; import { getStyle as findStyle, getStyleAsClassName as findStyleAsClassName } from '../reducers'; import { VanillaRendererProps } from '../index'; -import { RendererProps } from '../../../core/src/renderers/Renderer'; /** * Default tester for a label. @@ -49,11 +48,4 @@ const mapStateToProps = (state, ownProps) => { }; }; -const ConntectedLabelRenderer = connect(mapStateToProps, null)(LabelRenderer); - -registerStartupRenderer( - labelRendererTester, - ConntectedLabelRenderer -); - -export default ConntectedLabelRenderer; +export default connectToJsonForms(mapStateToProps, null)(LabelRenderer); diff --git a/packages/vanilla/src/complex/TableArrayControl.tsx b/packages/vanilla/src/complex/TableArrayControl.tsx index 7da142a7b0..5928c917c7 100644 --- a/packages/vanilla/src/complex/TableArrayControl.tsx +++ b/packages/vanilla/src/complex/TableArrayControl.tsx @@ -12,7 +12,6 @@ import { mapStateToTableControlProps, Paths, RankedTester, - registerStartupRenderer, RendererComponent, Test, } from '@jsonforms/core'; @@ -33,7 +32,7 @@ const { * option is set. * @type {RankedTester} */ -export const tableArrayTester: RankedTester = rankWith(3, isArrayObjectControl); +export const tableArrayControlTester: RankedTester = rankWith(3, isArrayObjectControl); export interface TableProps extends ControlProps { resolvedSchema: JsonSchema; @@ -136,11 +135,6 @@ class TableArrayControl extends RendererComponent { const ConnectedTableArrayControl = connectToJsonForms( addVanillaControlProps(mapStateToTableControlProps), mapDispatchToTableControlProps - )(TableArrayControl) - -registerStartupRenderer( - tableArrayTester, - ConnectedTableArrayControl -); + )(TableArrayControl); export default ConnectedTableArrayControl; diff --git a/packages/vanilla/src/complex/array/index.ts b/packages/vanilla/src/complex/array/index.ts index ff8e60ef35..84570180ba 100644 --- a/packages/vanilla/src/complex/array/index.ts +++ b/packages/vanilla/src/complex/array/index.ts @@ -1,7 +1,7 @@ import { isArrayObjectControl, + RankedTester, rankWith, - registerStartupRenderer, } from '@jsonforms/core'; import ArrayControlRenderer from './ArrayControlRenderer'; import { ArrayControl } from './ArrayControl'; @@ -11,9 +11,6 @@ export { ArrayControlRenderer }; -registerStartupRenderer( - rankWith(2, isArrayObjectControl), - ArrayControlRenderer -); +export const arrayControlTester: RankedTester = rankWith(2, isArrayObjectControl); export default ArrayControlRenderer; diff --git a/packages/vanilla/src/complex/categorization/index.ts b/packages/vanilla/src/complex/categorization/index.ts index 3ea305b942..baa963188d 100644 --- a/packages/vanilla/src/complex/categorization/index.ts +++ b/packages/vanilla/src/complex/categorization/index.ts @@ -1,4 +1,3 @@ -import { registerStartupRenderer } from '@jsonforms/core'; import CategorizationRenderer from './CategorizationRenderer'; import { categorizationTester } from './tester'; import { CategorizationList, CategorizationProps } from './CategorizationList'; @@ -12,9 +11,4 @@ export { SingleCategory }; -registerStartupRenderer( - categorizationTester, - CategorizationRenderer -); - export default CategorizationRenderer; diff --git a/packages/vanilla/src/complex/index.ts b/packages/vanilla/src/complex/index.ts index c85a7b5574..d5200ff5cf 100644 --- a/packages/vanilla/src/complex/index.ts +++ b/packages/vanilla/src/complex/index.ts @@ -1,4 +1,15 @@ -export * from './array'; -export * from './categorization'; -export * from './LabelRenderer'; -export * from './TableArrayControl'; +import ArrayControl, { arrayControlTester } from './array'; +import Categorization, { categorizationTester } from './categorization'; +import LabelRenderer, { labelRendererTester } from './LabelRenderer'; +import TableArrayControl, { tableArrayControlTester } from './TableArrayControl'; + +export { + ArrayControl, + arrayControlTester, + Categorization, + categorizationTester, + LabelRenderer, + labelRendererTester, + TableArrayControl, + tableArrayControlTester +}; diff --git a/packages/vanilla/src/controls/InputControl.tsx b/packages/vanilla/src/controls/InputControl.tsx index b0da50c068..17cb34d2f4 100644 --- a/packages/vanilla/src/controls/InputControl.tsx +++ b/packages/vanilla/src/controls/InputControl.tsx @@ -12,7 +12,6 @@ import { mapStateToControlProps, RankedTester, rankWith, - registerStartupRenderer, resolveSchema } from '@jsonforms/core'; import { VanillaControlProps } from '../index'; @@ -64,9 +63,4 @@ export const ConnectedInputControl = connectToJsonForms( addVanillaControlProps(mapStateToControlProps) )(InputControl); -registerStartupRenderer( - inputControlTester, - ConnectedInputControl -); - export default ConnectedInputControl; diff --git a/packages/vanilla/src/controls/index.ts b/packages/vanilla/src/controls/index.ts index 5593ca6841..cc667a40f2 100644 --- a/packages/vanilla/src/controls/index.ts +++ b/packages/vanilla/src/controls/index.ts @@ -1 +1,5 @@ -export * from './InputControl'; +import InputControl, { inputControlTester } from './InputControl'; +export { + InputControl, + inputControlTester +}; diff --git a/packages/vanilla/src/fields/BooleanField.tsx b/packages/vanilla/src/fields/BooleanField.tsx index a50fdbea27..a70069f0ad 100644 --- a/packages/vanilla/src/fields/BooleanField.tsx +++ b/packages/vanilla/src/fields/BooleanField.tsx @@ -1,14 +1,13 @@ import * as React from 'react'; import { + connectToJsonForms, FieldProps, isBooleanControl, mapDispatchToFieldProps, mapStateToFieldProps, RankedTester, rankWith, - registerStartupField } from '@jsonforms/core'; -import { connect } from 'react-redux'; import { StatelessComponent, SyntheticEvent } from 'react'; const BooleanFd: StatelessComponent = (props: FieldProps) => { @@ -34,8 +33,7 @@ const BooleanFd: StatelessComponent = (props: FieldProps) => { * @type {RankedTester} */ export const booleanFieldTester: RankedTester = rankWith(2, isBooleanControl); -export const BooleanField = registerStartupField( - booleanFieldTester, - connect(mapStateToFieldProps, mapDispatchToFieldProps)(BooleanFd) -); -export default BooleanField; +export default connectToJsonForms( + mapStateToFieldProps, + mapDispatchToFieldProps +)(BooleanFd); diff --git a/packages/vanilla/src/fields/DateField.tsx b/packages/vanilla/src/fields/DateField.tsx index f7e25c2e5c..c86432a71d 100644 --- a/packages/vanilla/src/fields/DateField.tsx +++ b/packages/vanilla/src/fields/DateField.tsx @@ -1,14 +1,13 @@ import * as React from 'react'; import { + connectToJsonForms, FieldProps, isDateControl, mapDispatchToFieldProps, mapStateToFieldProps, RankedTester, rankWith, - registerStartupField } from '@jsonforms/core'; -import { connect } from 'react-redux'; import { SyntheticEvent } from 'react'; const DateField = (props: FieldProps) => { @@ -34,7 +33,7 @@ const DateField = (props: FieldProps) => { */ export const dateFieldTester: RankedTester = rankWith(2, isDateControl); -export default registerStartupField( - dateFieldTester, - connect(mapStateToFieldProps, mapDispatchToFieldProps)(DateField) -); +export default connectToJsonForms( + mapStateToFieldProps, + mapDispatchToFieldProps +)(DateField); diff --git a/packages/vanilla/src/fields/EnumField.tsx b/packages/vanilla/src/fields/EnumField.tsx index c57c7332e0..32b40f119d 100644 --- a/packages/vanilla/src/fields/EnumField.tsx +++ b/packages/vanilla/src/fields/EnumField.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { + connectToJsonForms, ControlElement, FieldProps, isEnumControl, @@ -7,10 +8,8 @@ import { mapStateToFieldProps, RankedTester, rankWith, - registerStartupField, resolveSchema } from '@jsonforms/core'; -import { connect } from 'react-redux'; import { SyntheticEvent } from 'react'; const EnumField = (props: FieldProps) => { @@ -48,7 +47,7 @@ const EnumField = (props: FieldProps) => { */ export const enumFieldTester: RankedTester = rankWith(2, isEnumControl); -export default registerStartupField( - enumFieldTester, - connect(mapStateToFieldProps, mapDispatchToFieldProps)(EnumField) -); +export default connectToJsonForms( + mapStateToFieldProps, + mapDispatchToFieldProps +)(EnumField); diff --git a/packages/vanilla/src/fields/IntegerField.tsx b/packages/vanilla/src/fields/IntegerField.tsx index 3c622d24fa..269ef10485 100644 --- a/packages/vanilla/src/fields/IntegerField.tsx +++ b/packages/vanilla/src/fields/IntegerField.tsx @@ -1,15 +1,14 @@ import * as React from 'react'; import { SyntheticEvent } from 'react'; import { + connectToJsonForms, FieldProps, isIntegerControl, mapDispatchToFieldProps, mapStateToFieldProps, RankedTester, - rankWith, - registerStartupField + rankWith } from '@jsonforms/core'; -import { connect } from 'react-redux'; const IntegerField = (props: FieldProps) => { const { data, className, id, enabled, uischema, path, handleChange } = props; @@ -35,7 +34,7 @@ const IntegerField = (props: FieldProps) => { */ export const integerFieldTester: RankedTester = rankWith(2, isIntegerControl); -export default registerStartupField( - integerFieldTester, - connect(mapStateToFieldProps, mapDispatchToFieldProps)(IntegerField) -); +export default connectToJsonForms( + mapStateToFieldProps, + mapDispatchToFieldProps +)(IntegerField); diff --git a/packages/vanilla/src/fields/NumberField.tsx b/packages/vanilla/src/fields/NumberField.tsx index 9899b75645..3df437260c 100644 --- a/packages/vanilla/src/fields/NumberField.tsx +++ b/packages/vanilla/src/fields/NumberField.tsx @@ -1,15 +1,14 @@ import * as React from 'react'; import { SyntheticEvent } from 'react'; import { + connectToJsonForms, FieldProps, isNumberControl, mapDispatchToFieldProps, mapStateToFieldProps, RankedTester, rankWith, - registerStartupField } from '@jsonforms/core'; -import { connect } from 'react-redux'; const NumberField = (props: FieldProps) => { const { data, className, id, enabled, uischema, path, handleChange } = props; @@ -36,7 +35,7 @@ const NumberField = (props: FieldProps) => { */ export const numberFieldTester: RankedTester = rankWith(2, isNumberControl); -export default registerStartupField( - numberFieldTester, - connect(mapStateToFieldProps, mapDispatchToFieldProps)(NumberField) -); +export default connectToJsonForms( + mapStateToFieldProps, + mapDispatchToFieldProps +)(NumberField); diff --git a/packages/vanilla/src/fields/SliderField.tsx b/packages/vanilla/src/fields/SliderField.tsx index d9af936cf0..e13b1c9253 100644 --- a/packages/vanilla/src/fields/SliderField.tsx +++ b/packages/vanilla/src/fields/SliderField.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { SyntheticEvent } from 'react'; import { + connectToJsonForms, ControlElement, FieldProps, isRangeControl, @@ -8,10 +9,8 @@ import { mapStateToFieldProps, RankedTester, rankWith, - registerStartupField, resolveSchema } from '@jsonforms/core'; -import { connect } from 'react-redux'; const SliderField = (props: FieldProps) => { const { data, className, id, enabled, uischema, schema, path, handleChange } = props; @@ -41,7 +40,7 @@ const SliderField = (props: FieldProps) => { export const sliderFieldTester: RankedTester = rankWith(4, isRangeControl); -export default registerStartupField( - sliderFieldTester, - connect(mapStateToFieldProps, mapDispatchToFieldProps)(SliderField) -); +export default connectToJsonForms( + mapStateToFieldProps, + mapDispatchToFieldProps +)(SliderField); diff --git a/packages/vanilla/src/fields/TextAreaField.tsx b/packages/vanilla/src/fields/TextAreaField.tsx index 073108e1aa..ac37cf49cf 100644 --- a/packages/vanilla/src/fields/TextAreaField.tsx +++ b/packages/vanilla/src/fields/TextAreaField.tsx @@ -1,29 +1,30 @@ import * as React from 'react'; import { SyntheticEvent } from 'react'; import { + connectToJsonForms, FieldProps, isMultiLineControl, mapDispatchToFieldProps, mapStateToFieldProps, RankedTester, rankWith, - registerStartupField } from '@jsonforms/core'; -import { connect } from 'react-redux'; export const TextAreaField = (props: FieldProps) => { const { data, className, id, enabled, uischema, path, handleChange } = props; - return