Merge pull request #40 from clairesarsam-wf/sync_changes_2

UIP-1953 Sync changes from OverReact source

Author: leviwith-wf

README.md

@@ -495,15 +495,15 @@ as shown in the examples above.
 
 ## Component Formatting
 > __A note on dart_style:__
-> 
+>
 > Currently, [dart_style (dartfmt)](https://github.com/dart-lang/dart_style) decreases the readability of components
 > built using [OverReact's fluent-style](#fluent-style-component-consumption).
 > See https://github.com/dart-lang/dart_style/issues/549 for more info.
-> 
+>
 > We're exploring some different ideas to improve automated formatting, but for the time being, we __do not recommend__ using dart_style with OverReact.
-> 
+>
 > However, if you do choose to use dart_style, you can greatly improve its output by using trailing commas in children argument lists:
-> 
+>
 > * dart_style formatting:
 > ```dart
 > return (Button()

lib/over_react.dart

@@ -37,6 +37,7 @@ export 'src/util/key_constants.dart';
 export 'src/util/map_util.dart';
 export 'src/util/pretty_print.dart';
 export 'src/util/prop_errors.dart';
+export 'src/util/prop_key_util.dart';
 export 'src/util/react_wrappers.dart';
 export 'src/util/rem_util.dart';
 export 'src/util/string_util.dart';

lib/src/component/callback_typedefs.dart

@@ -14,6 +14,9 @@
 
 library over_react.callback_typedefs;
 
+import 'dart:html';
+
+import 'package:over_react/over_react.dart' show ResizeSensorEvent;
 import 'package:react/react.dart' as react;
 
 // Callbacks for React's DOM event system
@@ -29,3 +32,9 @@ typedef WheelEventCallback(react.SyntheticWheelEvent event);
 
 /// A generic callback that takes no arguments.
 typedef Callback();
+
+// Callback for DOM elements
+typedef Element ElementCallback();
+
+// Callback for [ResizeSensorEvent]s
+typedef void ResizeSensorHandler(ResizeSensorEvent event);

lib/src/component/resize_sensor.dart

@@ -19,12 +19,9 @@ library resize_sensor;
 import 'dart:collection';
 import 'dart:html';
 
-import 'package:browser_detect/browser_detect.dart';
-import 'package:over_react/over_react.dart';
+import 'package:platform_detect/platform_detect.dart';
 import 'package:react/react.dart' as react;
-
-// Callback for [ResizeSensorEvent]s
-typedef void ResizeSensorHandler(ResizeSensorEvent event);
+import 'package:over_react/over_react.dart';
 
 /// A wrapper component that detects when its parent is resized.
 ///
@@ -152,9 +149,9 @@ class ResizeSensorComponent extends UiComponent<ResizeSensorProps> {
       };
 
       // IE 10 and Safari 8 need 'special' value prefixes for 'display:flex'.
-      if (browser.isIe && browser.version <= '10') {
+      if (browser.isInternetExplorer && browser.version.major <= 10) {
         wrapperStyles['display'] = '-ms-flexbox';
-      } else if (browser.isSafari && browser.version < '9') {
+      } else if (browser.isSafari && browser.version.major < 9) {
         wrapperStyles['display'] = '-webkit-flex';
       } else {
         wrapperStyles['display'] = 'flex';

lib/src/component_declaration/component_base.dart

@@ -25,6 +25,7 @@ import 'package:over_react/over_react.dart' show
     prettyPrintMap,
     unindent,
     PropError;
+
 import 'package:over_react/src/component_declaration/component_type_checking.dart';
 import 'package:react/react.dart' as react;
 import 'package:react/react_client.dart';
@@ -186,6 +187,7 @@ abstract class UiComponent<TProps extends UiProps> extends react.Component {
   TProps typedPropsFactory(Map propsMap);
 
   /// Returns a typed props object backed by a new Map.
+  ///
   /// Convenient for use with [getDefaultProps].
   TProps newProps() => typedPropsFactory({});
 
@@ -237,6 +239,7 @@ abstract class UiStatefulComponent<TProps extends UiProps, TState extends UiStat
   TState typedStateFactory(Map stateMap);
 
   /// Returns a typed state object backed by a new Map.
+  ///
   /// Convenient for use with [getInitialState] and [setState].
   TState newState() => typedStateFactory({});
 

lib/src/component_declaration/flux_component.dart

@@ -1,3 +1,17 @@
+// Copyright 2016 Workiva Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
 library over_react.component_declaration.flux_component;
 
 import 'dart:async';

lib/src/util/class_names.dart

@@ -42,7 +42,6 @@ abstract class CssClassPropsMixin {
   String classNameBlacklist;
 }
 
-
 /// A MapView with the typed getters/setters for all CSS-class-related props.
 class CssClassPropsMapView extends MapView with CssClassPropsMixin {
   /// Create a new instance backed by the specified map.

lib/src/util/constants_base.dart

@@ -25,7 +25,16 @@ abstract class DebugFriendlyConstant {
   String get debugDescription;
 
   @override
-  String toString() => '$runtimeType.$_name ($debugDescription)';
+  String toString() {
+    var string = '$runtimeType.$_name';
+
+    var debugDescription = this.debugDescription;
+    if (debugDescription != null) {
+      string = '$string ($debugDescription)';
+    }
+
+    return string;
+  }
 }
 
 /// A named constant with a helpful string representation

lib/src/util/css_value_util.dart

@@ -57,15 +57,14 @@ class CssValue implements Comparable<CssValue> {
       unit = 'px';
     } else {
       var unitMatch = new RegExp(r'(?:rem|em|ex|vh|vw|vmin|vmax|%|px|cm|mm|in|pt|pc|ch)?$').firstMatch(source.toString());
-      try {
-        number = double.parse(unitMatch.input.substring(0, unitMatch.start));
         unit = unitMatch.group(0);
-        if (unit == '') {
-          unit = 'px';
-        }
-      } catch(e) {
-        error = new ArgumentError.value(source, 'value', 'Invalid number/unit for CSS value');
+      if (unit == '') {
+        unit = 'px';
       }
+
+      number = double.parse(unitMatch.input.substring(0, unitMatch.start), (_) {
+        error = new ArgumentError.value(source, 'value', 'Invalid number/unit for CSS value');
+      });
     }
 
     if (number != null && !number.isFinite) {

lib/src/util/dom_util.dart

@@ -16,6 +16,11 @@ library dom_util;
 
 import 'dart:html';
 
+import 'package:platform_detect/platform_detect.dart';
+
+import './string_util.dart';
+import './validation_util.dart';
+
 /// Returns whether [root] is the same as or contains the [other] node.
 ///
 /// Returns false if either [root] or [other] is null.
@@ -51,3 +56,96 @@ Element getActiveElement() {
 
   return activeElement;
 }
+
+/// A list of the `type` attribute values for an HTML `<input>` element that implement [TextInputElementBase].
+///
+/// Necessary because of the circular inheritance hierarchy in Dart's [InputElement] class structure.
+///
+/// See: <https://github.com/dart-lang/sdk/issues/22967>
+///
+/// Related: [isTextInputElementBase]
+const List<String> inputTypesWithSelectionRangeSupport = const [
+  'search',
+  'text',
+  'url',
+  'tel',
+  'email',
+  'password',
+  'number',
+];
+
+/// Returns whether the provided [element] supports `setSelectionRange`.
+///
+/// Necessary in part because of the circular inheritance hierarchy in Dart's [InputElement] class structure,
+/// and in part because the classes do not correspond to whether setSelectionRange is supported (e.g. number inputs).
+///
+/// See: <https://github.com/dart-lang/sdk/issues/22967>
+bool supportsSelectionRange(InputElement element) {
+  // Uncomment once https://github.com/dart-lang/sdk/issues/22967 is fixed.
+  // if (element is TextInputElementBase) return true;
+
+  final type = element.getAttribute('type');
+  return inputTypesWithSelectionRangeSupport.contains(type);
+}
+
+/// Custom implementation to prevent the error that [TextInputElementBase.setSelectionRange] throws when called
+/// on an [EmailInputElement] or [NumberInputElement] since ONLY Chrome does not support it.
+///
+/// A warning will be displayed in the console instead of an error.
+///
+/// __Example that will throw an exception in Chrome:__
+///     InputElement inputNodeRef;
+///
+///     // This will throw an exception in Chrome when the node is focused.
+///     renderEmailInput() {
+///       return (Dom.input()
+///         ..type = 'email'
+///         ..onFocus = (_) {
+///           inputNodeRef.setSelectionRange(inputNodeRef.value.length, inputNodeRef.value.length);
+///         }
+///         ..ref = (instance) { inputNodeRef = instance; }
+///       )();
+///     }
+///
+/// __Example that will not throw:__
+///     InputElement inputNodeRef;
+///
+///     // This will not throw an exception - and will work in all
+///     // browsers except Chrome until
+///     // https://bugs.chromium.org/p/chromium/issues/detail?id=324360
+///     // is fixed.
+///     renderChromeSafeEmailInput() {
+///       return (Dom.input()
+///         ..type = 'email'
+///         ..onFocus = (_) {
+///           setSelectionRange(inputNodeRef, inputNodeRef.value.length, inputNodeRef.value.length);
+///         }
+///         ..ref = (instance) { inputNodeRef = instance; }
+///       )();
+///     }
+///
+/// See: <https://bugs.chromium.org/p/chromium/issues/detail?id=324360>
+void setSelectionRange(/* TextInputElement | TextAreaElement */Element input, int start, int end, [String direction]) {
+  if (input is TextAreaElement) {
+    input.setSelectionRange(start, end, direction);
+  } else if (input is InputElement && supportsSelectionRange(input)) {
+    if (browser.isChrome) {
+      final inputType = input.getAttribute('type');
+
+      if (inputType == 'email' || inputType == 'number') {
+        assert(ValidationUtil.warn(unindent(
+            '''
+            Google Chrome does not support `setSelectionRange` on email or number inputs.
+            See: https://bugs.chromium.org/p/chromium/issues/detail?id=324360
+            '''
+        )));
+
+        return;
+      }
+    }
+
+    input.setSelectionRange(start, end, direction);
+  } else {
+    throw new ArgumentError.value(input, 'input', 'must be an instance of `TextInputElementBase`, `NumberInputElement` or `TextAreaElement`');
+  }
+}