Skip to content

Commit 74b9886

Browse files
jsorohovajsorohova
authored
Fixed validation behaviour (#2412)
1 parent 1baf9b4 commit 74b9886

File tree

7 files changed

+109
-71
lines changed

7 files changed

+109
-71
lines changed

‎src/admin/media/imageDetailsModal.tsx

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import Cropper from 'react-cropper';
33
//import 'cropperjs/dist/cropper.css';
4-
import { isEqual, isEmpty } from 'lodash';
4+
import { isEqual, isEmpty, debounce } from 'lodash';
55
import * as Utils from '@paperbits/common/utils';
66
import { Resolve } from '@paperbits/react/decorators';
77
import { IMediaService, MediaContract } from '@paperbits/common/media';
@@ -56,6 +56,17 @@ export class ImageDetailsModal extends React.Component<ImageDetailsModalProps, I
5656
}
5757

5858
onInputChange = async (field: string, newValue: string, validationType?: string): Promise<void> => {
59+
this.setState({
60+
mediaItem: {
61+
...this.state.mediaItem,
62+
[field]: newValue
63+
}
64+
});
65+
66+
this.runValidation(field, newValue, validationType);
67+
}
68+
69+
runValidation = debounce(async (field: string, newValue: string, validationType?: string): Promise<void> => {
5970
let errorMessage = '';
6071
let errors = {};
6172

@@ -74,14 +85,8 @@ export class ImageDetailsModal extends React.Component<ImageDetailsModalProps, I
7485
errors = this.state.errors;
7586
}
7687

77-
this.setState({
78-
mediaItem: {
79-
...this.state.mediaItem,
80-
[field]: newValue
81-
},
82-
errors
83-
});
84-
}
88+
this.setState({ errors });
89+
}, 300)
8590

8691
validatePermalink = async (permalink: string): Promise<string> => {
8792
if (permalink === this.props.mediaItem?.permalink) return '';

‎src/admin/media/nonImageDetailsModal.tsx

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { isEqual, isEmpty } from 'lodash';
2+
import { isEqual, isEmpty, debounce } from 'lodash';
33
import { Resolve } from '@paperbits/react/decorators';
44
import { IMediaService } from '@paperbits/common/media';
55
import { MediaContract } from '@paperbits/common/media/mediaContract';
@@ -39,6 +39,17 @@ export class NonImageDetailsModal extends React.Component<NonImageDetailsModalPr
3939
}
4040

4141
onInputChange = async (field: string, newValue: string, validationType?: string): Promise<void> => {
42+
this.setState({
43+
mediaItem: {
44+
...this.state.mediaItem,
45+
[field]: newValue
46+
}
47+
});
48+
49+
this.runValidation(field, newValue, validationType);
50+
}
51+
52+
runValidation = debounce(async (field: string, newValue: string, validationType?: string): Promise<void> => {
4253
let errorMessage = '';
4354
let errors = {};
4455

@@ -57,14 +68,8 @@ export class NonImageDetailsModal extends React.Component<NonImageDetailsModalPr
5768
errors = this.state.errors;
5869
}
5970

60-
this.setState({
61-
mediaItem: {
62-
...this.state.mediaItem,
63-
[field]: newValue
64-
},
65-
errors
66-
});
67-
}
71+
this.setState({ errors });
72+
}, 300)
6873

6974
onReferenceUrlChange = (): void => {
7075
if (!this.state.errors['downloadUrl'] && this.state.mediaItem.fileName === 'media.svg') {

‎src/admin/navigation/navigationItemModal.tsx

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
22
import * as Utils from '@paperbits/common';
3-
import { isEqual, isEmpty } from 'lodash';
3+
import { isEqual, isEmpty, debounce } from 'lodash';
44
import { INavigationService, NavigationItemContract } from '@paperbits/common/navigation';
55
import { IPageService } from '@paperbits/common/pages';
66
import { IUrlService } from '@paperbits/common/urls';
@@ -142,6 +142,17 @@ export class NavigationItemModal extends React.Component<NavigationItemModalProp
142142
}
143143

144144
onInputChange = async (field: string, newValue: string, validationType?: string): Promise<void> => {
145+
this.setState({
146+
navItem: {
147+
...this.state.navItem,
148+
[field]: newValue
149+
}
150+
});
151+
152+
this.runValidation(field, newValue, validationType);
153+
}
154+
155+
runValidation = debounce(async (field: string, newValue: string, validationType?: string): Promise<void> => {
145156
let errorMessage = '';
146157
let errors = {};
147158

@@ -163,14 +174,8 @@ export class NavigationItemModal extends React.Component<NavigationItemModalProp
163174
errors = this.removeError(field);
164175
}
165176

166-
this.setState({
167-
navItem: {
168-
...this.state.navItem,
169-
[field]: newValue
170-
},
171-
errors
172-
});
173-
}
177+
this.setState({ errors });
178+
}, 300)
174179

175180
validatePermalink = async (permalink: string): Promise<string> => {
176181
const isPermalinkNotDefined = await this.permalinkService.isPermalinkDefined(permalink) && !reservedPermalinks.includes(permalink);

‎src/admin/pages/pageDetailsModal.tsx

Lines changed: 25 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { isEqual, isEmpty } from 'lodash';
2+
import { isEqual, isEmpty, debounce } from 'lodash';
33
import { Resolve } from '@paperbits/react/decorators';
44
import { IPageService, PageContract } from '@paperbits/common/pages';
55
import { PermalinkService } from '@paperbits/common/permalinks';
@@ -49,9 +49,29 @@ export class PageDetailsModal extends React.Component<PageDetailsModalProps, Pag
4949
}
5050

5151
onInputChange = async (field: string, newValue: string, validationType?: string): Promise<void> => {
52+
let permalink = '';
53+
54+
if (!this.props.page && field === 'title') {
55+
permalink = newValue.replace(/\s+/g, '-').toLowerCase();
56+
57+
this.setState({ page: {
58+
...this.state.page,
59+
'title': newValue,
60+
'permalink': '/' + permalink
61+
}});
62+
} else {
63+
this.setState({ page: {
64+
...this.state.page,
65+
[field]: newValue
66+
}});
67+
}
68+
69+
this.runValidation(field, newValue, validationType, permalink);
70+
}
71+
72+
runValidation = debounce(async (field: string, newValue: string, validationType?: string, permalink?: string): Promise<void> => {
5273
let errorMessage = '';
5374
let permalinkErrorMessage = '';
54-
let page = {};
5575
let errors = {};
5676

5777
if (field === 'permalink') {
@@ -60,20 +80,8 @@ export class PageDetailsModal extends React.Component<PageDetailsModalProps, Pag
6080
errorMessage = validateField(validationType, newValue);
6181
}
6282

63-
if (!this.props.page && field === 'title') {
64-
const permalink = newValue.replace(/\s+/g, '-').toLowerCase();
83+
if (permalink) {
6584
permalinkErrorMessage = await this.validatePermalink('/' + permalink);
66-
67-
page = {
68-
...this.state.page,
69-
'title': newValue,
70-
'permalink': '/' + permalink
71-
};
72-
} else {
73-
page = {
74-
...this.state.page,
75-
[field]: newValue
76-
};
7785
}
7886

7987
if (errorMessage !== '' && !this.state.errors[field]) {
@@ -94,8 +102,8 @@ export class PageDetailsModal extends React.Component<PageDetailsModalProps, Pag
94102
}
95103
}
96104

97-
this.setState({ page, errors });
98-
}
105+
this.setState({ errors });
106+
}, 300);
99107

100108
validatePermalink = async (permalink: string): Promise<string> => {
101109
if (!this.state.copyPage && permalink === this.props.page?.permalink) return '';

‎src/admin/pages/pageLayoutDetailsModal.tsx

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { isEqual, isEmpty } from 'lodash';
2+
import { isEqual, isEmpty, debounce } from 'lodash';
33
import { Resolve } from '@paperbits/react/decorators';
44
import { ILayoutService, LayoutContract } from '@paperbits/common/layouts';
55
import { EventManager } from '@paperbits/common/events';
@@ -45,6 +45,17 @@ export class PageLayoutDetailsModal extends React.Component<PageLayoutModalProps
4545
}
4646

4747
onInputChange = async (field: string, newValue: string, validationType?: string): Promise<void> => {
48+
this.setState({
49+
layout: {
50+
...this.state.layout,
51+
[field]: newValue
52+
}
53+
});
54+
55+
this.runValidation(field, newValue, validationType);
56+
}
57+
58+
runValidation = debounce(async (field: string, newValue: string, validationType?: string): Promise<void> => {
4859
let errorMessage = '';
4960
let errors = {};
5061

@@ -63,14 +74,8 @@ export class PageLayoutDetailsModal extends React.Component<PageLayoutModalProps
6374
errors = this.state.errors;
6475
}
6576

66-
this.setState({
67-
layout: {
68-
...this.state.layout,
69-
[field]: newValue
70-
},
71-
errors
72-
});
73-
}
77+
this.setState({ errors });
78+
}, 300)
7479

7580
validatePermalink = async (permalink: string): Promise<string> => {
7681
if (!this.state.copyLayout && permalink === this.props.layout?.permalinkTemplate) return '';

‎src/admin/popups/popupDetailsModal.tsx

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { isEqual, isEmpty } from 'lodash';
2+
import { isEqual, isEmpty, debounce } from 'lodash';
33
import { Resolve } from '@paperbits/react/decorators';
44
import { IPopupService, PopupContract } from '@paperbits/common/popups';
55
import { EventManager, Events } from '@paperbits/common/events';
@@ -44,6 +44,17 @@ export class PopupDetailsModal extends React.Component<PopupDetailsModalProps, P
4444
}
4545

4646
onInputChange = async (field: string, newValue: string, validationType?: string): Promise<void> => {
47+
this.setState({
48+
popup: {
49+
...this.state.popup,
50+
[field]: newValue
51+
}
52+
});
53+
54+
this.runValidation(field, newValue, validationType);
55+
}
56+
57+
runValidation = debounce(async (field: string, newValue: string, validationType?: string): Promise<void> => {
4758
let errorMessage = '';
4859
let errors = {};
4960

@@ -60,14 +71,8 @@ export class PopupDetailsModal extends React.Component<PopupDetailsModalProps, P
6071
errors = this.state.errors;
6172
}
6273

63-
this.setState({
64-
popup: {
65-
...this.state.popup,
66-
[field]: newValue
67-
},
68-
errors
69-
});
70-
}
74+
this.setState({ errors });
75+
}, 300)
7176

7277
closeDeleteConfirmation = (): void => {
7378
this.setState({ showDeleteConfirmation: false });

‎src/admin/urls/urlDetailsModal.tsx

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { isEqual, isEmpty } from 'lodash';
2+
import { isEqual, isEmpty, debounce } from 'lodash';
33
import { Resolve } from '@paperbits/react/decorators';
44
import { IUrlService, UrlContract } from '@paperbits/common/urls';
55
import { PermalinkService } from '@paperbits/common/permalinks';
@@ -44,6 +44,17 @@ export class UrlDetailsModal extends React.Component<UrlDetailsModalProps, UrlDe
4444
}
4545

4646
onInputChange = async (field: string, newValue: string, validationType?: string): Promise<void> => {
47+
this.setState({
48+
url: {
49+
...this.state.url,
50+
[field]: newValue
51+
}
52+
});
53+
54+
this.runValidation(field, newValue, validationType);
55+
}
56+
57+
runValidation = debounce(async (field: string, newValue: string, validationType?: string): Promise<void> => {
4758
let errorMessage = '';
4859
let errors = {};
4960

@@ -62,14 +73,8 @@ export class UrlDetailsModal extends React.Component<UrlDetailsModalProps, UrlDe
6273
errors = this.state.errors;
6374
}
6475

65-
this.setState({
66-
url: {
67-
...this.state.url,
68-
[field]: newValue
69-
},
70-
errors
71-
});
72-
}
76+
this.setState({ errors });
77+
}, 300)
7378

7479
validatePermalink = async (permalink: string): Promise<string> => {
7580
if (permalink === this.props.url?.permalink) return '';

0 commit comments

Comments
 (0)