Skip to content

Commit 05ce9de

Browse files
Sync changes from source repository onto over_react
1 parent 2742bac commit 05ce9de

34 files changed

+504
-156
lines changed

README.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -495,15 +495,15 @@ as shown in the examples above.
495495

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

lib/over_react.dart

+1
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ export 'src/util/key_constants.dart';
3737
export 'src/util/map_util.dart';
3838
export 'src/util/pretty_print.dart';
3939
export 'src/util/prop_errors.dart';
40+
export 'src/util/prop_key_util.dart';
4041
export 'src/util/react_wrappers.dart';
4142
export 'src/util/rem_util.dart';
4243
export 'src/util/string_util.dart';

lib/src/component/callback_typedefs.dart

+9
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@
1414

1515
library over_react.callback_typedefs;
1616

17+
import 'dart:html';
18+
19+
import 'package:over_react/over_react.dart' show ResizeSensorEvent;
1720
import 'package:react/react.dart' as react;
1821

1922
// Callbacks for React's DOM event system
@@ -29,3 +32,9 @@ typedef WheelEventCallback(react.SyntheticWheelEvent event);
2932

3033
/// A generic callback that takes no arguments.
3134
typedef Callback();
35+
36+
// Callback for DOM elements
37+
typedef Element ElementCallback();
38+
39+
// Callback for [ResizeSensorEvent]s
40+
typedef void ResizeSensorHandler(ResizeSensorEvent event);

lib/src/component/resize_sensor.dart

+9-9
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,12 @@
1515
/// Thanks!
1616
/// https://github.com/marcj/css-element-queries/blob/master/src/ResizeSensor.js
1717
library resize_sensor;
18-
1918
import 'dart:collection';
2019
import 'dart:html';
2120

22-
import 'package:browser_detect/browser_detect.dart';
23-
import 'package:over_react/over_react.dart';
21+
import 'package:platform_detect/platform_detect.dart';
2422
import 'package:react/react.dart' as react;
25-
26-
// Callback for [ResizeSensorEvent]s
27-
typedef void ResizeSensorHandler(ResizeSensorEvent event);
23+
import 'package:over_react/over_react.dart';
2824

2925
/// A wrapper component that detects when its parent is resized.
3026
///
@@ -82,6 +78,7 @@ class ResizeSensorComponent extends UiComponent<ResizeSensorProps> {
8278

8379
Element _expandSensorChildRef;
8480
Element _expandSensorRef;
81+
Element _collapseSensorChildRef;
8582
Element _collapseSensorRef;
8683

8784
@override
@@ -114,7 +111,10 @@ class ResizeSensorComponent extends UiComponent<ResizeSensorProps> {
114111
..key = 'expandSensor'
115112
)(expandSensorChild);
116113

117-
var collapseSensorChild = (Dom.div()..style = _collapseSensorChildStyle)();
114+
var collapseSensorChild = (Dom.div()
115+
..ref = (ref) { _collapseSensorChildRef = ref; }
116+
..style = _collapseSensorChildStyle
117+
)();
118118

119119
var collapseSensor = (Dom.div()
120120
..className = 'resize-sensor-collapse'
@@ -152,9 +152,9 @@ class ResizeSensorComponent extends UiComponent<ResizeSensorProps> {
152152
};
153153

154154
// IE 10 and Safari 8 need 'special' value prefixes for 'display:flex'.
155-
if (browser.isIe && browser.version <= '10') {
155+
if (browser.isInternetExplorer && browser.version.major <= 10) {
156156
wrapperStyles['display'] = '-ms-flexbox';
157-
} else if (browser.isSafari && browser.version < '9') {
157+
} else if (browser.isSafari && browser.version.major < 9) {
158158
wrapperStyles['display'] = '-webkit-flex';
159159
} else {
160160
wrapperStyles['display'] = 'flex';

lib/src/component_declaration/component_base.dart

+20-13
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import 'package:over_react/over_react.dart' show
2525
prettyPrintMap,
2626
unindent,
2727
PropError;
28+
2829
import 'package:over_react/src/component_declaration/component_type_checking.dart';
2930
import 'package:react/react.dart' as react;
3031
import 'package:react/react_client.dart';
@@ -85,14 +86,20 @@ typedef TProps UiFactory<TProps extends UiProps>([Map backingProps]);
8586
/// For use as a Function variable type when the `backingProps` argument is not required.
8687
typedef TProps BuilderOnlyUiFactory<TProps extends UiProps>();
8788

88-
/// The basis for a over_react component.
89+
typedef dynamic _RefTypedef(String ref);
90+
91+
/// The basis for a over_react component, extending [react.Component]. (Successor to [BaseComponent]).
8992
///
9093
/// Includes support for strongly-typed props and utilities for prop and CSS classname forwarding.
91-
///
92-
/// Extends [react.Component].
93-
///
94-
/// Related: [UiStatefulComponent]
9594
abstract class UiComponent<TProps extends UiProps> extends react.Component {
95+
/// Returns the component of the specified [ref].
96+
/// > `react.Component` if it is a Dart component
97+
/// > DOM node if it is a DOM component.
98+
///
99+
/// Overridden for strong typing.
100+
@override
101+
_RefTypedef get ref => super.ref;
102+
96103
/// The props for the non-forwarding props defined in this component.
97104
Iterable<ConsumedProps> get consumedProps => null;
98105

@@ -124,12 +131,12 @@ abstract class UiComponent<TProps extends UiProps> extends react.Component {
124131
void validateRequiredProps(Map appliedProps) {
125132
consumedProps?.forEach((ConsumedProps consumedProps) {
126133
consumedProps.props.forEach((PropDescriptor prop) {
127-
if (!prop.isRequired) return;
128-
if (prop.isNullable && appliedProps.containsKey(prop.key)) return;
129-
if (!prop.isNullable && appliedProps[prop.key] != null) return;
134+
if (!prop.isRequired) return;
135+
if (prop.isNullable && appliedProps.containsKey(prop.key)) return;
136+
if (!prop.isNullable && appliedProps[prop.key] != null) return;
130137

131-
throw new PropError.required(prop.key, prop.errorMessage);
132-
});
138+
throw new PropError.required(prop.key, prop.errorMessage);
139+
});
133140
});
134141
}
135142

@@ -186,6 +193,7 @@ abstract class UiComponent<TProps extends UiProps> extends react.Component {
186193
TProps typedPropsFactory(Map propsMap);
187194

188195
/// Returns a typed props object backed by a new Map.
196+
///
189197
/// Convenient for use with [getDefaultProps].
190198
TProps newProps() => typedPropsFactory({});
191199

@@ -195,11 +203,11 @@ abstract class UiComponent<TProps extends UiProps> extends react.Component {
195203
// ----------------------------------------------------------------------
196204
}
197205

198-
/// The basis for a stateful over_react component.
206+
/// /// The basis for a stateful over_react component.
199207
///
200208
/// Includes support for strongly-typed props and state and utilities for prop and CSS classname forwarding.
201209
///
202-
/// Extends [react.Component].
210+
/// Extends [react.Component]
203211
///
204212
/// Related: [UiComponent]
205213
abstract class UiStatefulComponent<TProps extends UiProps, TState extends UiState> extends UiComponent<TProps> {
@@ -232,7 +240,6 @@ abstract class UiStatefulComponent<TProps extends UiProps, TState extends UiStat
232240
set unwrappedState(Map value) => super.state = value;
233241

234242
/// Returns a typed state object backed by the specified [stateMap].
235-
///
236243
/// Required to properly instantiate the generic [TState] class.
237244
TState typedStateFactory(Map stateMap);
238245

lib/src/component_declaration/flux_component.dart

+30-38
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,13 @@ abstract class FluxUiProps<ActionsT, StoresT> extends UiProps {
2121
ActionsT get actions => props[_actionsPropKey] as ActionsT; // ignore: avoid_as
2222
set actions(ActionsT value) => props[_actionsPropKey] = value;
2323

24-
/// The prop defined by [StoresT].
24+
/// The prop defined by [StoresT]. This object should either be an
25+
/// instance of [Store] or should provide access to one or more [Store]s.
2526
///
26-
/// This object should either be an instance of [Store] or should provide access to one or more [Store]s.
27-
///
28-
/// __Instead of storing state within this component via `setState`, it is recommended that data be
29-
/// pulled directly from these stores.__ This ensures that the data being used is always up to date
30-
/// and leaves the state management logic to the stores.
27+
/// **Instead of storing state within this component via [setState], it is
28+
/// recommended that data be pulled directly from these stores.** This ensures
29+
/// that the data being used is always up to date and leaves the state
30+
/// management logic to the stores.
3131
///
3232
/// If this component only needs data from a single [Store], then [StoresT]
3333
/// should be an instance of [Store]. This allows the default implementation
@@ -36,30 +36,28 @@ abstract class FluxUiProps<ActionsT, StoresT> extends UiProps {
3636
/// If this component needs data from multiple [Store] instances, then
3737
/// [StoresT] should be a class that provides access to these multiple stores.
3838
/// Then, you can explicitly select the [Store] instances that should be
39-
/// listened to by overriding [_FluxComponentMixin.redrawOn].
39+
/// listened to by overriding [redrawOn].
4040
StoresT get store => props[_storePropKey] as StoresT; // ignore: avoid_as
4141
set store(StoresT value) => props[_storePropKey] = value;
4242
}
4343

4444
/// Builds on top of [UiComponent], adding w_flux integration, much like the [FluxComponent] in w_flux.
4545
///
46-
/// * Flux components are responsible for rendering application views and turning
47-
/// user interactions and events into [Action]s.
48-
/// * Flux components can use data from one or many [Store] instances to define
49-
/// the resulting component.
46+
/// Flux components are responsible for rendering application views and turning
47+
/// user interactions and events into [Action]s. Flux components can use data
48+
/// from one or many [Store] instances to define the resulting component.
5049
///
51-
/// Use with the over_react transformer via the `@Component()` ([annotations.Component]) annotation.
50+
/// Use with the over_react transformer via the `@Component()` ([Component]) annotation.
5251
abstract class FluxUiComponent<TProps extends FluxUiProps> extends UiComponent<TProps>
5352
with _FluxComponentMixin<TProps>, BatchedRedraws {}
5453

55-
/// Builds on top of [UiStatefulComponent], adding `w_flux` integration, much like the [FluxComponent] in w_flux.
54+
/// Builds on top of [StatefulUiComponent], adding w_flux integration, much like the [FluxComponent] in w_flux.
5655
///
57-
/// * Flux components are responsible for rendering application views and turning
58-
/// user interactions and events into [Action]s.
59-
/// * Flux components can use data from one or many [Store] instances to define
60-
/// the resulting component.
56+
/// Flux components are responsible for rendering application views and turning
57+
/// user interactions and events into [Action]s. Flux components can use data
58+
/// from one or many [Store] instances to define the resulting component.
6159
///
62-
/// Use with the over_react transformer via the `@Component()` ([annotations.Component]) annotation.
60+
/// Use with the over_react transformer via the `@Component()` ([Component]) annotation.
6361
abstract class FluxUiStatefulComponent<TProps extends FluxUiProps, TState extends UiState>
6462
extends UiStatefulComponent<TProps, TState>
6563
with _FluxComponentMixin<TProps>, BatchedRedraws {}
@@ -70,19 +68,15 @@ abstract class FluxUiStatefulComponent<TProps extends FluxUiProps, TState extend
7068
abstract class _FluxComponentMixin<TProps extends FluxUiProps> implements BatchedRedraws {
7169
TProps get props;
7270

73-
/// List of store subscriptions created when the component mounts.
74-
///
75-
/// These subscriptions are canceled when the component is unmounted.
71+
/// List of store subscriptions created when the component mounts. These
72+
/// subscriptions are canceled when the component is unmounted.
7673
List<StreamSubscription> _subscriptions = [];
7774

78-
void componentWillMount() {
79-
/// Subscribe to all applicable stores.
80-
///
81-
/// [Store]s returned by [redrawOn] will have their triggers mapped directly to this components
82-
/// redraw function.
83-
///
84-
/// [Store]s included in the [getStoreHandlers] result will be listened to and wired up to their
85-
/// respective handlers.
75+
componentWillMount() {
76+
// Subscribe to all applicable stores. Stores returned by `redrawOn()` will
77+
// have their triggers mapped directly to this components redraw function.
78+
// Stores included in the `getStoreHandlers()` result will be listened to
79+
// and wired up to their respective handlers.
8680
Map<Store, StoreHandler> handlers = new Map.fromIterable(redrawOn(),
8781
value: (_) => (_) => redraw())..addAll(getStoreHandlers());
8882

@@ -92,8 +86,8 @@ abstract class _FluxComponentMixin<TProps extends FluxUiProps> implements Batche
9286
});
9387
}
9488

95-
void componentWillUnmount() {
96-
// Ensure that unmounted components don't batch render
89+
componentWillUnmount() {
90+
// ensure that unmounted components don't batch render
9791
shouldBatchRedraw = false;
9892

9993
// Cancel all store subscriptions.
@@ -105,7 +99,6 @@ abstract class _FluxComponentMixin<TProps extends FluxUiProps> implements Batche
10599
}
106100

107101
/// Define the list of [Store] instances that this component should listen to.
108-
///
109102
/// When any of the returned [Store]s update their state, this component will
110103
/// redraw.
111104
///
@@ -128,9 +121,8 @@ abstract class _FluxComponentMixin<TProps extends FluxUiProps> implements Batche
128121
}
129122

130123
/// If you need more fine-grained control over store trigger handling,
131-
/// override this method to return a Map of stores to handlers.
132-
///
133-
/// Whenever a store in the returned map triggers, the respective handler will be called.
124+
/// override this method to return a Map of stores to handlers. Whenever a
125+
/// store in the returned map triggers, the respective handler will be called.
134126
///
135127
/// Handlers defined here take precedence over the [redrawOn] handling.
136128
/// If possible, however, [redrawOn] should be used instead of this in order
@@ -140,9 +132,9 @@ abstract class _FluxComponentMixin<TProps extends FluxUiProps> implements Batche
140132
return {};
141133
}
142134

143-
/// Register a [subscription] that should be canceled when the component unmounts.
144-
///
145-
/// Cancellation will be handled automatically by [componentWillUnmount].
135+
/// Register a [subscription] that should be canceled when the component
136+
/// unmounts. Cancellation will be handled automatically by
137+
/// [componentWillUnmount].
146138
void addSubscription(StreamSubscription subscription) {
147139
_subscriptions.add(subscription);
148140
}

0 commit comments

Comments
 (0)