Skip to content

Commit 84343ea

Browse files
eneufeldedgarmueller
eneufeld
authored and
edgarmueller
committed
Removed error display from DispatchField
* Removed material-ui dependency from DispatchField * Moved FormHelperText from DispatchField to MaterialTableControl Fixes #1252
1 parent c7dd597 commit 84343ea

File tree

8 files changed

+254
-206
lines changed

8 files changed

+254
-206
lines changed

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -146,9 +146,7 @@ export const mapStateToDispatchFieldProps = (
146146
};
147147
};
148148

149-
export interface DispatchFieldProps extends DispatchFieldStateProps {
150-
showError: boolean;
151-
}
149+
export interface DispatchFieldProps extends DispatchFieldStateProps {}
152150

153151
/**
154152
* Default mapStateToFieldProps for enum field. Options is used for populating dropdown list

‎packages/material/src/complex/MaterialTableControl.tsx‎

Lines changed: 63 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -22,19 +22,30 @@
2222
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
2323
THE SOFTWARE.
2424
*/
25+
import isEmpty from 'lodash/isEmpty';
26+
import filter from 'lodash/filter';
27+
import { DispatchField } from '@jsonforms/react';
2528
import capitalize from 'lodash/capitalize';
26-
import IconButton from '@material-ui/core/IconButton';
2729
import React from 'react';
28-
import { Table, TableBody, TableCell, TableHead, TableRow, Typography } from '@material-ui/core';
30+
import {
31+
FormHelperText,
32+
Table,
33+
TableBody,
34+
TableCell,
35+
TableHead,
36+
TableRow,
37+
Typography
38+
} from '@material-ui/core';
2939
import {
3040
ArrayControlProps,
3141
ControlElement,
42+
formatErrorMessage,
3243
Generate,
3344
Helpers,
3445
JsonSchema,
3546
Paths
3647
} from '@jsonforms/core';
37-
import { DispatchField } from '@jsonforms/react';
48+
import IconButton from '@material-ui/core/IconButton';
3849
import DeleteIcon from '@material-ui/icons/Delete';
3950
import { WithDeleteDialogSupport } from './DeleteDialog';
4051
import { ErrorObject } from 'ajv';
@@ -60,35 +71,38 @@ const generateCells = (
6071
) => {
6172

6273
if (scopedSchema.type === 'object') {
63-
return getValidColumnProps(scopedSchema)
64-
.map(prop => {
65-
const cellPath = Paths.compose(rowPath, prop);
66-
const props = {
67-
propName: prop,
68-
scopedSchema,
69-
rowPath,
70-
cellPath,
71-
errors: cellErrors
72-
};
74+
return getValidColumnProps(scopedSchema).map(prop => {
75+
const cellPath = Paths.compose(
76+
rowPath,
77+
prop
78+
);
79+
const props = {
80+
propName: prop,
81+
scopedSchema,
82+
rowPath,
83+
cellPath,
84+
errors: cellErrors
85+
};
7386

74-
return (<Cell key={cellPath} {...props} />);
75-
});
87+
return <Cell key={cellPath} {...props} />;
88+
});
7689
} else {
7790
// primitives
7891
const props = {
7992
scopedSchema,
8093
rowPath,
8194
cellPath: rowPath,
82-
errors: cellErrors,
95+
errors: cellErrors
8396
};
84-
return (<Cell key={rowPath} {...props} />);
97+
return <Cell key={rowPath} {...props} />;
8598
}
8699
};
87100

88101
const getValidColumnProps = (scopedSchema: JsonSchema) => {
89102
if (scopedSchema.type === 'object') {
90-
return Object.keys(scopedSchema.properties)
91-
.filter(prop => scopedSchema.properties[prop].type !== 'array');
103+
return Object.keys(scopedSchema.properties).filter(
104+
prop => scopedSchema.properties[prop].type !== 'array'
105+
);
92106
}
93107
// primitives
94108
return [''];
@@ -118,9 +132,21 @@ interface NonEmptyCellProps {
118132
rowPath: string;
119133
propName?: string;
120134
scopedSchema: JsonSchema;
135+
errors?: any[];
121136
}
122137

123-
const NonEmptyCell = ({ rowPath, propName, scopedSchema }: NonEmptyCellProps) => (
138+
const NonEmptyCell = ({
139+
rowPath,
140+
propName,
141+
scopedSchema,
142+
errors
143+
}: NonEmptyCellProps) => {
144+
const errorsPerEntry: any[] = filter(
145+
errors,
146+
error => error.dataPath === rowPath + '.' + propName
147+
).map(e => e.message);
148+
const isValid = isEmpty(errorsPerEntry);
149+
return (
124150
<React.Fragment>
125151
<NoBorderTableCell>
126152
<DispatchField
@@ -130,11 +156,14 @@ const NonEmptyCell = ({ rowPath, propName, scopedSchema }: NonEmptyCellProps) =>
130156
scopedSchema.type === 'object' ? `#/properties/${propName}` : '#'
131157
)}
132158
path={rowPath}
133-
showError
134159
/>
160+
<FormHelperText error={!isValid}>
161+
{!isValid && formatErrorMessage(errorsPerEntry)}
162+
</FormHelperText>
135163
</NoBorderTableCell>
136164
</React.Fragment>
137165
);
166+
};
138167

139168
interface NonEmptyRowProps {
140169
childPath: string;
@@ -143,22 +172,17 @@ interface NonEmptyRowProps {
143172
rowData: any;
144173
}
145174

146-
const NonEmptyRow = (
147-
{
148-
childPath,
149-
scopedSchema,
150-
childErrors,
151-
rowData,
152-
openDeleteDialog
153-
}: NonEmptyRowProps & WithDeleteDialogSupport) => (
154-
155-
<TableRow
156-
key={childPath}
157-
hover
158-
>
175+
const NonEmptyRow = ({
176+
childPath,
177+
scopedSchema,
178+
childErrors,
179+
rowData,
180+
openDeleteDialog
181+
}: NonEmptyRowProps & WithDeleteDialogSupport) => (
182+
<TableRow key={childPath} hover>
159183
{generateCells(NonEmptyCell, scopedSchema, childPath, childErrors)}
160184
<NoBorderTableCell style={styles.fixedCell}>
161-
<div style={{ display: 'flex', justifyContent: 'center'}}>
185+
<div style={{ display: 'flex', justifyContent: 'center' }}>
162186
<IconButton
163187
aria-label={`Delete`}
164188
onClick={() => openDeleteDialog(childPath, rowData)}
@@ -197,9 +221,10 @@ const TableRows = (
197221
});
198222
};
199223

200-
export class MaterialTableControl
201-
extends React.Component<ArrayControlProps & WithDeleteDialogSupport, any> {
202-
224+
export class MaterialTableControl extends React.Component<
225+
ArrayControlProps & WithDeleteDialogSupport,
226+
any
227+
> {
203228
render() {
204229
const {
205230
label,

‎packages/material/src/controls/MaterialInputControl.tsx‎

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*
22
The MIT License
33
4-
Copyright (c) 2018 EclipseSource Munich
4+
Copyright (c) 2018-2019 EclipseSource Munich
55
https://github.com/eclipsesource/jsonforms
66
77
Permission is hereby granted, free of charge, to any person obtaining a copy
@@ -57,19 +57,23 @@ export class MaterialInputControl extends Control<ControlProps, ControlState> {
5757
} = this.props;
5858
const isValid = errors.length === 0;
5959
const trim = config.trim;
60-
const style: {[x: string]: any} = {};
60+
const style: { [x: string]: any } = {};
6161
if (!visible) {
6262
style.display = 'none';
6363
}
64-
const inputLabelStyle: {[x: string]: any} = {
64+
const inputLabelStyle: { [x: string]: any } = {
6565
whiteSpace: 'nowrap',
66-
overflow : 'hidden',
66+
overflow: 'hidden',
6767
textOverflow: 'ellipsis',
6868
// magic width as the label is transformed to 75% of its size
6969
width: '125%'
7070
};
7171

72-
const showDescription = !isDescriptionHidden(visible, description, this.state.isFocused);
72+
const showDescription = !isDescriptionHidden(
73+
visible,
74+
description,
75+
this.state.isFocused
76+
);
7377
return (
7478
<FormControl
7579
style={style}
@@ -78,18 +82,25 @@ export class MaterialInputControl extends Control<ControlProps, ControlState> {
7882
onBlur={this.onBlur}
7983
id={id}
8084
>
81-
<InputLabel htmlFor={id + '-input'} error={!isValid} style={inputLabelStyle}>
85+
<InputLabel
86+
htmlFor={id + '-input'}
87+
error={!isValid}
88+
style={inputLabelStyle}
89+
>
8290
{computeLabel(isPlainLabel(label) ? label : label.default, required)}
8391
</InputLabel>
8492
<DispatchField
85-
uischema={uischema}
86-
schema={schema}
87-
path={path}
88-
id={id + '-input'}
89-
showError={false}
93+
uischema={uischema}
94+
schema={schema}
95+
path={path}
96+
id={id + '-input'}
9097
/>
9198
<FormHelperText error={!isValid}>
92-
{!isValid ? formatErrorMessage(errors) : showDescription ? description : null}
99+
{!isValid
100+
? formatErrorMessage(errors)
101+
: showDescription
102+
? description
103+
: null}
93104
</FormHelperText>
94105
</FormControl>
95106
);

‎packages/react/src/DispatchField.tsx‎

Lines changed: 25 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*
22
The MIT License
33
4-
Copyright (c) 2018 EclipseSource Munich
4+
Copyright (c) 2018-2019 EclipseSource Munich
55
https://github.com/eclipsesource/jsonforms
66
77
Permission is hereby granted, free of charge, to any person obtaining a copy
@@ -27,45 +27,36 @@ import React from 'react';
2727
import { connect } from 'react-redux';
2828
import { UnknownRenderer } from './UnknownRenderer';
2929
import {
30-
DispatchFieldProps, DispatchFieldStateProps,
31-
formatErrorMessage,
32-
mapStateToDispatchFieldProps, OwnPropsOfField,
30+
DispatchFieldProps,
31+
DispatchFieldStateProps,
32+
mapStateToDispatchFieldProps,
33+
OwnPropsOfField
3334
} from '@jsonforms/core';
34-
import { FormHelperText } from '@material-ui/core';
3535

3636
/**
3737
* Dispatch renderer component for fields.
3838
*/
3939
class Dispatch extends React.Component<DispatchFieldProps, any> {
40-
render() {
41-
const { uischema, schema, path, fields, id, errors, isValid, showError } = this.props;
42-
const field = maxBy(fields, r => r.tester(uischema, schema));
43-
44-
if (field === undefined || field.tester(uischema, schema) === -1) {
45-
return <UnknownRenderer type={'field'}/>;
46-
} else {
47-
const Field = field.field;
48-
49-
return (
50-
<React.Fragment>
51-
<Field
52-
uischema={uischema}
53-
schema={schema}
54-
path={path}
55-
id={id}
56-
/>
57-
{
58-
showError &&
59-
<FormHelperText error={!isValid}>
60-
{!isValid && formatErrorMessage(errors)}
61-
</FormHelperText>
62-
}
63-
</React.Fragment>
64-
);
65-
}
40+
render() {
41+
const { uischema, schema, path, fields, id } = this.props;
42+
const field = maxBy(fields, r => r.tester(uischema, schema));
43+
44+
if (field === undefined || field.tester(uischema, schema) === -1) {
45+
return <UnknownRenderer type={'field'} />;
46+
} else {
47+
const Field = field.field;
48+
49+
return (
50+
<React.Fragment>
51+
<Field uischema={uischema} schema={schema} path={path} id={id} />
52+
</React.Fragment>
53+
);
6654
}
55+
}
6756
}
6857

69-
export const DispatchField = connect<DispatchFieldStateProps, {}, OwnPropsOfField>(
70-
mapStateToDispatchFieldProps
71-
)(Dispatch);
58+
export const DispatchField = connect<
59+
DispatchFieldStateProps,
60+
{},
61+
OwnPropsOfField
62+
>(mapStateToDispatchFieldProps)(Dispatch);

0 commit comments

Comments
 (0)