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

UIP-2529 Add validateProps method to UiComponent #88

Merged
merged 4 commits into from
Jul 20, 2017
Merged

UIP-2529 Add validateProps method to UiComponent #88

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
80db6cd
Add validateProps method to UiComponent
jacehensley-wf Jun 24, 2017
6d6ac15
Address CR feedback
jacehensley-wf Jun 27, 2017
0177965
Fix typo
jacehensley-wf Jun 27, 2017
5ea1ad2
Merge remote-tracking branch 'upstream/master' into add_validate_prop…
jacehensley-wf Jul 19, 2017
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
14 changes: 12 additions & 2 deletions lib/src/component_declaration/component_base.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,16 @@ abstract class UiComponent<TProps extends UiProps> extends react.Component {
);
}

/// Validation method called during [componentWillReceiveProps], and [componentWillMount].
///
/// Use this as an opportunity validate props during the correct lifecycle of the component.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#nit I think this comment could be a little more descriptive.

/// Throws a [PropError] if [appliedProps] are invalid.
/// 
/// This is called automatically with during [componentWillReceiveProps] and [componentWillMount],
/// and can also be called manually for custom validation.
/// 
/// Override with a custom implementation to easily add validation (and don't forget to call super!)
///
///     @mustCallSuper
///     void validateProps(Map appliedProps) {
///       super.validateProps(appliedProps);
///       
///       var tProps = typedPropsFactory(appliedProps);
///       if (tProps.items.length.isOdd) {
///         throw new PropError.value(tProps.items, 'items', 'must have an even number of items, because reasons');
///       }
///     }

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good idea 👍

@mustCallSuper
void validateProps([Map appliedProps]) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this should be a required positional parameter, so that consumers don't have to null-coalesce the argument in overrides.

appliedProps ??= props;

validateRequiredProps(appliedProps);
}

void validateRequiredProps(Map appliedProps) {
consumedProps?.forEach((ConsumedProps consumedProps) {
consumedProps.props.forEach((PropDescriptor prop) {
Expand All @@ -147,13 +157,13 @@ abstract class UiComponent<TProps extends UiProps> extends react.Component {
@override
@mustCallSuper
void componentWillReceiveProps(Map newProps) {
validateRequiredProps(newProps);
validateProps(newProps);
}

@override
@mustCallSuper
void componentWillMount() {
validateRequiredProps(props);
validateProps();
}


Expand Down
31 changes: 31 additions & 0 deletions test/over_react/component_declaration/component_base_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -623,6 +623,30 @@ main() {
expect(classes.toClassName(), equals('class-1'));
expect(classes.toClassNameBlacklist(), equals('blacklist-1'));
});

group('calls validateProps in', () {
test('componentWillMount', () {
var calls = [];
component.props = {
'onValidateProps': () { calls.add('onValidateProps'); },
};

component.componentWillMount();

expect(calls, ['onValidateProps']);
});

test('componentWillReceiveProps', () {
var calls = [];
component.props = {
'onValidateProps': () { calls.add('onValidateProps'); },
};

component.componentWillReceiveProps({});

expect(calls, ['onValidateProps']);
});
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These should also test that the correct props maps are passed into them

});
});

group('UiStatefulComponent', () {
Expand Down Expand Up @@ -799,6 +823,13 @@ class TestComponentComponent extends UiComponent<TestComponentProps> {

@override
TestComponentProps typedPropsFactory(Map propsMap) => new TestComponentProps(propsMap);

@override
void validateProps([Map appliedProps]) {
super.validateProps(appliedProps);

if (props['onValidateProps'] != null) props['onValidateProps']();
}
}


Expand Down