Skip to content

Commit 4e3865c

Browse files
eneufeldedgarmueller
eneufeld
authored and
edgarmueller
committed
Pass ownProps.path to rule evaluation in mapStateToLayoutProps (#1222)
1 parent 8a213e1 commit 4e3865c

File tree

5 files changed

+296
-30
lines changed

5 files changed

+296
-30
lines changed

‎packages/core/src/util/renderer.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -488,7 +488,7 @@ export const mapStateToLayoutProps = (
488488
): StatePropsOfLayout => {
489489
const visible: boolean = _.has(ownProps, 'visible')
490490
? ownProps.visible
491-
: isVisible(ownProps, state);
491+
: isVisible(ownProps, state, ownProps.path);
492492

493493
return {
494494
renderers: getRenderers(state),

‎packages/core/test/util/renderer.test.ts‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import {
3232
mapDispatchToControlProps,
3333
mapStateToControlProps,
3434
mapStateToJsonFormsRendererProps,
35+
mapStateToLayoutProps,
3536
OwnPropsOfControl
3637
} from '../../src/util';
3738
import configureStore from 'redux-mock-store';
@@ -146,6 +147,69 @@ test('mapStateToControlProps - visible via state ', t => {
146147
t.true(props.visible);
147148
});
148149

150+
test('mapStateToControlProps - visible via state with path from ownProps ', t => {
151+
const uischema = {
152+
...coreUISchema,
153+
rule: hideRule
154+
};
155+
const ownProps = {
156+
uischema,
157+
path: 'foo'
158+
};
159+
const state = {
160+
jsonforms: {
161+
core: {
162+
schema: {
163+
type: 'object',
164+
properties: {
165+
firstName: { type: 'string' },
166+
lastName: { type: 'string' }
167+
}
168+
},
169+
data: {
170+
foo: { firstName: 'Lisa' }
171+
},
172+
uischema,
173+
errors: [] as ErrorObject[]
174+
}
175+
}
176+
};
177+
const props = mapStateToControlProps(state, ownProps);
178+
t.true(props.visible);
179+
});
180+
181+
test('mapStateToControlProps - enabled via state with path from ownProps ', t => {
182+
const uischema = {
183+
...coreUISchema,
184+
rule: disableRule
185+
};
186+
const ownProps = {
187+
visible: true,
188+
uischema,
189+
path: 'foo'
190+
};
191+
const state = {
192+
jsonforms: {
193+
core: {
194+
schema: {
195+
type: 'object',
196+
properties: {
197+
firstName: { type: 'string' },
198+
lastName: { type: 'string' }
199+
}
200+
},
201+
data: {
202+
foo: { firstName: 'Lisa' }
203+
},
204+
uischema,
205+
errors: [] as ErrorObject[]
206+
}
207+
}
208+
};
209+
const props = mapStateToControlProps(state, ownProps);
210+
t.true(props.enabled);
211+
});
212+
149213
test('mapStateToControlProps - enabled via ownProps ', t => {
150214
const uischema = {
151215
...coreUISchema,
@@ -460,3 +524,67 @@ test('mapDispatchToArrayControlProps should remove items from array', t => {
460524
t.is(store.getState().jsonforms.core.data.length, 1);
461525
t.is(store.getState().jsonforms.core.data[0], 'quux');
462526
});
527+
528+
test('mapStateToLayoutProps - visible via state with path from ownProps ', t => {
529+
const uischema = {
530+
type: 'VerticalLayout',
531+
elements: [coreUISchema],
532+
rule: hideRule
533+
};
534+
const ownProps = {
535+
uischema,
536+
path: 'foo'
537+
};
538+
const state = {
539+
jsonforms: {
540+
core: {
541+
schema: {
542+
type: 'object',
543+
properties: {
544+
firstName: { type: 'string' },
545+
lastName: { type: 'string' }
546+
}
547+
},
548+
data: {
549+
foo: { firstName: 'Lisa' }
550+
},
551+
uischema,
552+
errors: [] as ErrorObject[]
553+
}
554+
}
555+
};
556+
const props = mapStateToLayoutProps(state, ownProps);
557+
t.true(props.visible);
558+
});
559+
560+
test('mapStateToLayoutProps - hidden via state with path from ownProps ', t => {
561+
const uischema = {
562+
type: 'VerticalLayout',
563+
elements: [coreUISchema],
564+
rule: hideRule
565+
};
566+
const ownProps = {
567+
uischema,
568+
path: 'foo'
569+
};
570+
const state = {
571+
jsonforms: {
572+
core: {
573+
schema: {
574+
type: 'object',
575+
properties: {
576+
firstName: { type: 'string' },
577+
lastName: { type: 'string' }
578+
}
579+
},
580+
data: {
581+
foo: { firstName: 'Homer' }
582+
},
583+
uischema,
584+
errors: [] as ErrorObject[]
585+
}
586+
}
587+
};
588+
const props = mapStateToLayoutProps(state, ownProps);
589+
t.false(props.visible);
590+
});

‎packages/example/src/util.tsx‎

Lines changed: 62 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,11 @@
2424
*/
2525
import * as React from 'react';
2626
import * as _ from 'lodash';
27-
import { ExampleDescription, nestedArray as NestedArrayExample } from '@jsonforms/examples';
27+
import {
28+
ExampleDescription,
29+
issue_1220 as Issue1220Example,
30+
nestedArray as NestedArrayExample
31+
} from '@jsonforms/examples';
2832
import ConnectedRatingControl, { ratingControlTester } from './RatingControl';
2933
import {
3034
Actions,
@@ -43,7 +47,9 @@ const registerRatingControl = (dispatch: Dispatch<AnyAction>) => {
4347
dispatch(Actions.registerField(ratingControlTester, ConnectedRatingControl));
4448
};
4549
const unregisterRatingControl = (dispatch: Dispatch<AnyAction>) => {
46-
dispatch(Actions.unregisterField(ratingControlTester, ConnectedRatingControl));
50+
dispatch(
51+
Actions.unregisterField(ratingControlTester, ConnectedRatingControl)
52+
);
4753
};
4854

4955
export interface I18nExampleProps {
@@ -52,11 +58,13 @@ export interface I18nExampleProps {
5258
dispatch: Dispatch<AnyAction>;
5359
}
5460

55-
class I18nExample extends React.Component<I18nExampleProps, {
56-
localizedSchemas: Map<string, JsonSchema>,
57-
localizedUISchemas: Map<string, UISchemaElement>
58-
}> {
59-
61+
class I18nExample extends React.Component<
62+
I18nExampleProps,
63+
{
64+
localizedSchemas: Map<string, JsonSchema>;
65+
localizedUISchemas: Map<string, UISchemaElement>;
66+
}
67+
> {
6068
constructor(props: I18nExampleProps) {
6169
super(props);
6270
const { schema, uischema } = props;
@@ -81,44 +89,37 @@ class I18nExample extends React.Component<I18nExampleProps, {
8189
};
8290
}
8391

84-
8592
changeLocale = (locale: string) => {
8693
const { dispatch } = this.props;
8794
const { localizedSchemas, localizedUISchemas } = this.state;
8895
dispatch(setLocale(locale));
8996
dispatch(setSchema(localizedSchemas.get(locale)));
9097
dispatch(setUISchema(localizedUISchemas.get(locale)));
91-
}
98+
};
9299

93100
render() {
94101
return (
95102
<div>
96-
<button onClick={() => this.changeLocale('en-US')}>
97-
en-US
98-
</button>
99-
<button onClick={() => this.changeLocale('de-DE')}>
100-
de-DE
101-
</button>
103+
<button onClick={() => this.changeLocale('en-US')}>en-US</button>
104+
<button onClick={() => this.changeLocale('de-DE')}>de-DE</button>
102105
</div>
103106
);
104107
}
105108
}
106109

107-
export const enhanceExample: (examples: ExampleDescription[]) => ReactExampleDescription[] =
108-
examples => examples.map(e => {
110+
export const enhanceExample: (
111+
examples: ExampleDescription[]
112+
) => ReactExampleDescription[] = examples =>
113+
examples.map(e => {
109114
switch (e.name) {
110115
case 'day6':
111116
const day6 = Object.assign({}, e, {
112117
customReactExtension: (dispatch: Dispatch<AnyAction>) => (
113118
<div>
114-
<button
115-
onClick={() => registerRatingControl(dispatch)}
116-
>
119+
<button onClick={() => registerRatingControl(dispatch)}>
117120
Register Custom Field
118121
</button>
119-
<button
120-
onClick={() => unregisterRatingControl(dispatch)}
121-
>
122+
<button onClick={() => unregisterRatingControl(dispatch)}>
122123
Unregister Custom Field
123124
</button>
124125
</div>
@@ -130,12 +131,16 @@ export const enhanceExample: (examples: ExampleDescription[]) => ReactExampleDes
130131
customReactExtension: (dispatch: Dispatch<AnyAction>) => (
131132
<div>
132133
<button
133-
onClick={() => NestedArrayExample.registerNestedArrayUISchema(dispatch)}
134+
onClick={() =>
135+
NestedArrayExample.registerNestedArrayUISchema(dispatch)
136+
}
134137
>
135138
Register NestedArray UISchema
136139
</button>
137140
<button
138-
onClick={() => NestedArrayExample.unregisterNestedArrayUISchema(dispatch)}
141+
onClick={() =>
142+
NestedArrayExample.unregisterNestedArrayUISchema(dispatch)
143+
}
139144
>
140145
Unregister NestedArray UISchema
141146
</button>
@@ -148,7 +153,9 @@ export const enhanceExample: (examples: ExampleDescription[]) => ReactExampleDes
148153
customReactExtension: (dispatch: Dispatch<AnyAction>) => (
149154
<div>
150155
<button
151-
onClick={() => dispatch(Actions.init({ id: 'aaa' }, e.schema, e.uischema))}
156+
onClick={() =>
157+
dispatch(Actions.init({ id: 'aaa' }, e.schema, e.uischema))
158+
}
152159
>
153160
Change data
154161
</button>
@@ -159,9 +166,36 @@ export const enhanceExample: (examples: ExampleDescription[]) => ReactExampleDes
159166
case 'i18n':
160167
return Object.assign({}, e, {
161168
customReactExtension: (dispatch: Dispatch<AnyAction>) => (
162-
<I18nExample schema={e.schema} uischema={e.uischema} dispatch={dispatch}/>
169+
<I18nExample
170+
schema={e.schema}
171+
uischema={e.uischema}
172+
dispatch={dispatch}
173+
/>
174+
)
175+
});
176+
case '1220':
177+
const issue_1220 = Object.assign({}, e, {
178+
customReactExtension: (dispatch: Dispatch<AnyAction>) => (
179+
<div>
180+
<button
181+
onClick={() =>
182+
Issue1220Example.registerIssue1220UISchema(dispatch)
183+
}
184+
>
185+
Register Issue 1220 UISchema
186+
</button>
187+
<button
188+
onClick={() =>
189+
Issue1220Example.unregisterIssue1220UISchema(dispatch)
190+
}
191+
>
192+
Unregister Issue 1220 UISchema
193+
</button>
194+
</div>
163195
)
164196
});
165-
default: return e;
197+
return issue_1220;
198+
default:
199+
return e;
166200
}
167201
});

0 commit comments

Comments
 (0)