Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[RFR] FileInput - Display validation errors #2660

Merged
merged 3 commits into from
Dec 13, 2018
Merged

[RFR] FileInput - Display validation errors #2660

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
72743f5
[RFR] FileInput - Display validation errors
djhi Dec 13, 2018
f19cebf
Fix unit tests
djhi Dec 13, 2018
f78ec47
Fix e2e tests
djhi Dec 13, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 17 additions & 4 deletions packages/ra-ui-materialui/src/input/FileInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { shallowEqual } from 'recompose';
import Dropzone from 'react-dropzone';
import compose from 'recompose/compose';
import { withStyles } from '@material-ui/core/styles';
import FormHelperText from '@material-ui/core/FormHelperText';
import classnames from 'classnames';
import { addField, translate } from 'ra-core';

Expand Down Expand Up @@ -83,9 +84,10 @@ export class FileInput extends Component {
this.setState({ files: updatedFiles });

if (this.props.multiple) {
this.props.input.onChange(updatedFiles);
// Use onBlur to ensure redux-form set the input as touched
this.props.input.onBlur(updatedFiles);
} else {
this.props.input.onChange(updatedFiles[0]);
this.props.input.onBlur(updatedFiles[0]);
}
};

Expand All @@ -96,10 +98,11 @@ export class FileInput extends Component {

this.setState({ files: filteredFiles });

// Use onBlur to ensure redux-form set the input as touched
if (this.props.multiple) {
this.props.input.onChange(filteredFiles);
this.props.input.onBlur(filteredFiles);
} else {
this.props.input.onChange(null);
this.props.input.onBlur(null);
}
};

Expand Down Expand Up @@ -155,10 +158,12 @@ export class FileInput extends Component {
isRequired,
label,
maxSize,
meta,
minSize,
multiple,
resource,
source,
translate,
options = {},
...rest
} = this.props;
Expand All @@ -171,6 +176,7 @@ export class FileInput extends Component {
source={source}
resource={resource}
isRequired={isRequired}
meta={meta}
{...sanitizeRestProps(rest)}
>
<span>
Expand Down Expand Up @@ -204,6 +210,13 @@ export class FileInput extends Component {
))}
</div>
)}
{meta &&
meta.touched &&
meta.error && (
<FormHelperText>
{translate(meta.error)}
</FormHelperText>
)}
</span>
</Labeled>
);
Expand Down
26 changes: 13 additions & 13 deletions packages/ra-ui-materialui/src/input/FileInput.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,15 +34,15 @@ describe('<FileInput />', () => {
});

it('should correctly update upon drop when allowing a single file', () => {
const onChange = jest.fn();
const onBlur = jest.fn();

const wrapper = shallow(
<FileInput
input={{
value: {
src: 'b64_picture',
},
onChange,
onBlur,
}}
translate={x => x}
source="src"
Expand All @@ -51,33 +51,33 @@ describe('<FileInput />', () => {

wrapper.instance().onDrop([{ preview: 'new_b64_picture' }]);

assert.deepEqual(onChange.mock.calls[0][0], {
assert.deepEqual(onBlur.mock.calls[0][0], {
preview: 'new_b64_picture',
});
});

it('should correctly update upon removal when allowing a single file', () => {
const onChange = jest.fn();
const onBlur = jest.fn();

const wrapper = shallow(
<FileInput
input={{
value: {
src: 'b64_picture',
},
onChange,
onBlur,
}}
translate={x => x}
source="src"
/>
);

wrapper.instance().onRemove({ src: 'b64_picture' })();
assert.deepEqual(onChange.mock.calls[0][0], null);
assert.deepEqual(onBlur.mock.calls[0][0], null);
});

it('should correctly update upon drop when allowing multiple files', () => {
const onChange = jest.fn();
const onBlur = jest.fn();

const wrapper = shallow(
<FileInput
Expand All @@ -86,7 +86,7 @@ describe('<FileInput />', () => {
{ src: 'b64_picture' },
{ src: 'another_b64_picture' },
],
onChange,
onBlur,
}}
translate={x => x}
source="pictures"
Expand All @@ -96,15 +96,15 @@ describe('<FileInput />', () => {

wrapper.instance().onDrop([{ preview: 'new_b64_picture' }]);

assert.deepEqual(onChange.mock.calls[0][0], [
assert.deepEqual(onBlur.mock.calls[0][0], [
{ src: 'b64_picture' },
{ src: 'another_b64_picture' },
{ preview: 'new_b64_picture' },
]);
});

it('should correctly update upon removal when allowing multiple files', () => {
const onChange = jest.fn();
const onBlur = jest.fn();

const wrapper = shallow(
<FileInput
Expand All @@ -113,7 +113,7 @@ describe('<FileInput />', () => {
{ src: 'b64_picture' },
{ src: 'another_b64_picture' },
],
onChange,
onBlur,
}}
translate={x => x}
source="pictures"
Expand All @@ -123,7 +123,7 @@ describe('<FileInput />', () => {

wrapper.instance().onRemove({ src: 'another_b64_picture' })();

assert.deepEqual(onChange.mock.calls[0][0], [{ src: 'b64_picture' }]);
assert.deepEqual(onBlur.mock.calls[0][0], [{ src: 'b64_picture' }]);
});

it('should display correct label depending multiple property', () => {
Expand Down Expand Up @@ -309,7 +309,7 @@ describe('<FileInput />', () => {
source="picture"
translate={x => x}
input={{
onChange: () => {},
onBlur: () => {},
value: [
{ url: 'http://static.acme.com/foo.jpg' },
{ url: 'http://static.acme.com/bar.jpg' },
Expand Down
2 changes: 1 addition & 1 deletion packages/ra-ui-materialui/src/input/ImageInput.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,7 +216,7 @@ describe('<ImageInput />', () => {
source="picture"
translate={x => x}
input={{
onChange: () => {},
onBlur: () => {},
value: [
{ url: 'http://static.acme.com/foo.jpg' },
{ url: 'http://static.acme.com/bar.jpg' },
Expand Down
2 changes: 1 addition & 1 deletion packages/ra-ui-materialui/src/input/Labeled.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export const Labeled = ({
className={className}
margin="normal"
fullWidth={fullWidth}
error={meta && meta.touched && meta.error}
error={meta && meta.touched && !!meta.error}
>
<InputLabel htmlFor={id} shrink className={classes.label}>
<FieldTitle
Expand Down