CPLAT-4887: propTypes in Component2

lib/src/component_declaration/component_base.dart

@@ -16,6 +16,7 @@ library over_react.component_declaration.component_base;
 
 import 'dart:async';
 import 'dart:collection';
+import 'dart:js';
 
 import 'package:meta/meta.dart';
 import 'package:over_react/over_react.dart';
@@ -87,7 +88,85 @@ class UiComponent2BridgeImpl extends Component2BridgeImpl {
 
   @override
   JsMap jsifyPropTypes(covariant UiComponent2 component, Map propTypes) {
-    // todo implement jsifyPropTypes
+    Error _getErrorFromConsumerValidator(
+      dynamic _validator,
+      JsBackedMap _props,
+      String _propName,
+      String _componentName,
+      String _location,
+      String _propFullName
+    ) {
+      var convertedProps = component.typedPropsFactoryJs(_props);
+      Error error = _validator(convertedProps, _propName, _componentName, _location, _propFullName);
+      return error;
+    }
+
+    // Add [PropValidator]s for props annotated as required.
+    var newPropTypes = Map.from(propTypes);
+    component.consumedProps?.forEach((ConsumedProps consumedProps) {
+      consumedProps.props.forEach((PropDescriptor prop) {
+        if (!prop.isRequired) return;
+
+        Error requiredPropValidator(
+          Map _props,
+          String _propName,
+          String _componentName,
+          String _location,
+          String _propFullName,
+        ) {
+          Error consumerError;
+          // Check if the consumer has specified a propType for this key.
+          if(propTypes[prop.key] != null) {
+            consumerError = _getErrorFromConsumerValidator(
+              propTypes[prop.key],
+              JsBackedMap.from(_props),
+              _propName,
+              _componentName,
+              _location,
+              _propFullName
+            );
+          }
+
+          if (consumerError != null) return consumerError;
+
+          if (prop.isNullable && _props.containsKey(prop.key)) return null;
+          if (!prop.isNullable && _props[prop.key] != null) return null;
+
+          if (_props[_propName] == null) {
+            return new PropError.required(_propName, prop.errorMessage);
+          }
+
+          return null;
+        }
+
+        newPropTypes[prop.key] = requiredPropValidator;
+      });
+    });
+
+    // Wrap consumer-provided and required validators with ones that convert plain props maps into typed ones.
+    return JsBackedMap.from(newPropTypes.map((_propKey, _validator) {
+        JsPropValidator handlePropValidator = (
+          JsMap _props,
+          String _propName,
+          String _componentName,
+          String _location,
+          String _propFullName,
+          // This is a required argument of PropTypes validators but is hidden from the JS consumer.
+          String secret,
+        ) {
+          Error error = _getErrorFromConsumerValidator(
+            _validator,
+            JsBackedMap.fromJs(_props),
+            _propName,
+            _componentName,
+            _location,
+            _propFullName
+          );
+          return error == null ? null : JsError(error.toString());
+        };
+
+        return MapEntry(_propKey, allowInterop(handlePropValidator));
+      })).jsObject;
   }
 
   /// A version of [setStateWithTypedUpdater] whose updater is passed typed views

lib/src/component_declaration/component_base/component_base_2.dart

@@ -88,7 +88,9 @@ abstract class UiComponent2<TProps extends UiProps> extends react.Component2
   @override
   @Deprecated('4.0.0')
   Map copyUnconsumedProps() {
-    var consumedPropKeys = consumedProps?.map((ConsumedProps consumedProps) => consumedProps.keys) ?? const [];
+    var consumedPropKeys = consumedProps
+            ?.map((ConsumedProps consumedProps) => consumedProps.keys) ??
+        const [];
 
     return copyProps(keySetsToOmit: consumedPropKeys);
   }
@@ -127,7 +129,9 @@ abstract class UiComponent2<TProps extends UiProps> extends react.Component2
   @override
   @Deprecated('4.0.0')
   Map copyUnconsumedDomProps() {
-    var consumedPropKeys = consumedProps?.map((ConsumedProps consumedProps) => consumedProps.keys) ?? const [];
+    var consumedPropKeys = consumedProps
+            ?.map((ConsumedProps consumedProps) => consumedProps.keys) ??
+        const [];
 
     return copyProps(onlyCopyDomProps: true, keySetsToOmit: consumedPropKeys);
   }
@@ -152,17 +156,20 @@ abstract class UiComponent2<TProps extends UiProps> extends react.Component2
     forwardUnconsumedProps(this.props, propsToUpdate: props, keySetsToOmit:
         consumedPropKeys, onlyCopyDomProps: true);
   }
-  
+
   /// Returns a copy of this component's props with React props optionally omitted, and
   /// with the specified [keysToOmit] and [keySetsToOmit] omitted.
   @override
-  Map copyProps({bool omitReservedReactProps: true, bool onlyCopyDomProps: false, Iterable keysToOmit, Iterable<Iterable> keySetsToOmit}) {
+  Map copyProps(
+      {bool omitReservedReactProps: true,
+      bool onlyCopyDomProps: false,
+      Iterable keysToOmit,
+      Iterable<Iterable> keySetsToOmit}) {
     return getPropsToForward(this.props,
         omitReactProps: omitReservedReactProps,
         onlyCopyDomProps: onlyCopyDomProps,
         keysToOmit: keysToOmit,
-        keySetsToOmit: keySetsToOmit
-    );
+        keySetsToOmit: keySetsToOmit);
   }
 
   /// Throws a [PropError] if [appliedProps] are invalid.
@@ -181,24 +188,21 @@ abstract class UiComponent2<TProps extends UiProps> extends react.Component2
   ///         throw new PropError.value(tProps.items, 'items', 'must have an even number of items, because reasons');
   ///       }
   ///     }
+  /// __Deprecated.__ Use [propTypes] instead. Will be removed in the `4.0.0` release.
+  @Deprecated('4.0.0')
   @mustCallSuper
   @override
   void validateProps(Map appliedProps) {
-    validateRequiredProps(appliedProps);
+    throw UnsupportedError('[validateProps] is not supported in Component2, use [propTypes] instead.');
   }
 
   /// Validates that props with the `@requiredProp` annotation are present.
+  /// __Deprecated.__ Use [propTypes] instead. Will be removed in the `4.0.0` release.
+  @Deprecated('4.0.0')
+  @mustCallSuper
   @override
   void validateRequiredProps(Map appliedProps) {
-    consumedProps?.forEach((ConsumedProps consumedProps) {
-      consumedProps.props.forEach((PropDescriptor prop) {
-        if (!prop.isRequired) return;
-        if (prop.isNullable && appliedProps.containsKey(prop.key)) return;
-        if (!prop.isNullable && appliedProps[prop.key] != null) return;
-
-        throw new PropError.required(prop.key, prop.errorMessage);
-      });
-    });
+    throw UnsupportedError('[validateRequiredProps] is not supported in Component2, use [propTypes] instead.');
   }
 
   /// Returns a new ClassNameBuilder with className and blacklist values added from [CssClassPropsMixin.className] and
@@ -270,6 +274,32 @@ abstract class UiComponent2<TProps extends UiProps> extends react.Component2
   //   END Typed props helpers
   // ----------------------------------------------------------------------
   // ----------------------------------------------------------------------
+
+  /// Allows usage of PropValidator functions to check the validity of a prop passed to it.
+  /// When an invalid value is provided for a prop, a warning will be shown in the JavaScript console.
+  /// For performance reasons, propTypes is only checked in development mode.
+  ///
+  /// Override with a custom implementation to easily add validation.
+  ///
+  ///     get propTypes => {
+  ///           getPropKey((props) => props.twoObjects, typedPropsFactory):
+  ///               (props, propName, componentName, location, propFullName) {
+  ///             final length = props.twoObjects?.length;
+  ///             if (length != 2) {
+  ///               return new PropError.value(length, propName, 'must have a length of 2');
+  ///             }
+  ///             return null;
+  ///           },
+  ///         };
+  ///
+  /// `getPropKey` is a staticlly typed helper to get the string key for a prop.
+  ///
+  /// __Note:__ An improved version of `getPropKey` will be offered once
+  /// https://jira.atl.workiva.net/browse/CPLAT-6655 is completed.
+  ///
+  /// For more info see: https://www.npmjs.com/package/prop-types
+  @override
+  Map<String, react.PropValidator<TProps>> get propTypes => {};
 }
 
 /// The basis for a _stateful_ over_react component that is compatible with ReactJS 16 ([react.Component2]).
@@ -300,8 +330,8 @@ abstract class UiComponent2<TProps extends UiProps> extends react.Component2
 ///         )(props.children);
 ///       }
 ///     }
-abstract class UiStatefulComponent2<TProps extends UiProps, TState extends UiState>
-    extends UiComponent2<TProps>
+abstract class UiStatefulComponent2<TProps extends UiProps,
+        TState extends UiState> extends UiComponent2<TProps>
     implements UiStatefulComponent<TProps, TState> {
   // ----------------------------------------------------------------------
   // ----------------------------------------------------------------------

lib/src/util/prop_key_util.dart

@@ -21,7 +21,7 @@ import 'dart:collection';
 /// __Example:__
 ///
 ///     var valuePropKey = getPropKey((props) => props.value, TextInput);
-String getPropKey(void accessProp(Map keySpy), Map factory(Map props)) {
+String getPropKey<T extends Map>(void accessProp(T keySpy), T factory(Map props)) {
   return _getKey((Map keySpy) {
     return accessProp(factory(keySpy));
   });

pubspec.yaml

@@ -6,7 +6,7 @@ authors:
   - Workiva UI Platform Chapter <uip@workiva.com>
   - Workiva App Frameworks Team <appframeworks@workiva.com>
 environment:
-  sdk: '>=2.1.0 <3.0.0'
+  sdk: '>=2.2.2 <3.0.0'
 
 dependencies:
   analyzer: '>=0.35.0 <0.37.0'