From 4ce1eff3ca6b8a57bdfbfcce5b3cd91489d5ab75 Mon Sep 17 00:00:00 2001 From: Hixie Date: Tue, 23 Jun 2015 09:54:19 -0700 Subject: [PATCH] Make the checkbox in settings control the radio buttons in the drawer, to demonstrate how to link state in different places in an app. R=jackson@google.com Review URL: https://codereview.chromium.org/1197333002. --- examples/stocks2/lib/stock_app.dart | 37 ++++++++++++++++-------- examples/stocks2/lib/stock_home.dart | 24 +++++++++------ examples/stocks2/lib/stock_settings.dart | 35 +++++++++++++++++----- examples/stocks2/lib/stock_types.dart | 1 + 4 files changed, 68 insertions(+), 29 deletions(-) create mode 100644 examples/stocks2/lib/stock_types.dart diff --git a/examples/stocks2/lib/stock_app.dart b/examples/stocks2/lib/stock_app.dart index 7f319ec0c4d..9550265b164 100644 --- a/examples/stocks2/lib/stock_app.dart +++ b/examples/stocks2/lib/stock_app.dart @@ -13,22 +13,45 @@ import 'package:sky/widgets/widget.dart'; import 'stock_data.dart'; import 'stock_home.dart'; import 'stock_settings.dart'; +import 'stock_types.dart'; class StocksApp extends App { + NavigationState _navigationState; StocksApp() { _navigationState = new NavigationState([ new Route( name: '/', - builder: (navigator, route) => new StockHome(navigator, route, _stocks) + builder: (navigator, route) => new StockHome(navigator, _stocks, stockMode, modeUpdater) ), new Route( name: '/settings', - builder: (navigator, route) => new StockSettings(navigator) + builder: (navigator, route) => new StockSettings(navigator, stockMode, settingsUpdater) ), ]); } + void onBack() { + setState(() { + _navigationState.pop(); + }); + // TODO(jackson): Need a way to invoke default back behavior here + } + + StockMode stockMode = StockMode.optimistic; + void modeUpdater(StockMode value) { + setState(() { + stockMode = value; + }); + } + void settingsUpdater({StockMode mode}) { + setState(() { + if (mode != null) + stockMode = mode; + }); + } + + final List _stocks = []; void didMount() { super.didMount(); new StockDataFetcher((StockData data) { @@ -38,16 +61,6 @@ class StocksApp extends App { }); } - final List _stocks = []; - NavigationState _navigationState; - - void onBack() { - setState(() { - _navigationState.pop(); - }); - // TODO(jackson): Need a way to invoke default back behavior here - } - Widget build() { return new Theme( data: new ThemeData.light( diff --git a/examples/stocks2/lib/stock_home.dart b/examples/stocks2/lib/stock_home.dart index 720530b8dea..7182f51f847 100644 --- a/examples/stocks2/lib/stock_home.dart +++ b/examples/stocks2/lib/stock_home.dart @@ -23,25 +23,30 @@ import 'package:sky/widgets/widget.dart'; import 'stock_data.dart'; import 'stock_list.dart'; import 'stock_menu.dart'; +import 'stock_types.dart'; -enum StockMode { optimistic, pessimistic } +typedef void ModeUpdater(StockMode mode); class StockHome extends Component { - StockHome(this.navigator, RouteBase route, this.stocks) : super(stateful: true) { + StockHome(this.navigator, this.stocks, this.stockMode, this.modeUpdater) : super(stateful: true) { // if (debug) // new Timer(new Duration(seconds: 1), dumpState); _drawerController = new DrawerController(_handleDrawerStatusChanged); } + Navigator navigator; + List stocks; + StockMode stockMode; + ModeUpdater modeUpdater; + void syncFields(StockHome source) { navigator = source.navigator; stocks = source.stocks; + stockMode = source.stockMode; + modeUpdater = source.modeUpdater; } - Navigator navigator; - List stocks; - bool _isSearching = false; String _searchQuery; @@ -102,11 +107,12 @@ class StockHome extends Component { }); } - StockMode _stockMode = StockMode.optimistic; void _handleStockModeChange(StockMode value) { setState(() { - _stockMode = value; + stockMode = value; }); + if (modeUpdater != null) + modeUpdater(value); } Drawer buildDrawer() { @@ -127,14 +133,14 @@ class StockHome extends Component { onPressed: () => _handleStockModeChange(StockMode.optimistic), children: [ new Flexible(child: new Text('Optimistic')), - new Radio(value: StockMode.optimistic, groupValue: _stockMode, onChanged: _handleStockModeChange) + new Radio(value: StockMode.optimistic, groupValue: stockMode, onChanged: _handleStockModeChange) ]), new MenuItem( icon: 'action/thumb_down', onPressed: () => _handleStockModeChange(StockMode.pessimistic), children: [ new Flexible(child: new Text('Pessimistic')), - new Radio(value: StockMode.pessimistic, groupValue: _stockMode, onChanged: _handleStockModeChange) + new Radio(value: StockMode.pessimistic, groupValue: stockMode, onChanged: _handleStockModeChange) ]), new MenuDivider(), new MenuItem( diff --git a/examples/stocks2/lib/stock_settings.dart b/examples/stocks2/lib/stock_settings.dart index dedcd868463..4d3977aa4da 100644 --- a/examples/stocks2/lib/stock_settings.dart +++ b/examples/stocks2/lib/stock_settings.dart @@ -12,24 +12,43 @@ import 'package:sky/widgets/scaffold.dart'; import 'package:sky/widgets/theme.dart'; import 'package:sky/widgets/tool_bar.dart'; +import 'stock_types.dart'; + +typedef void SettingsUpdater({StockMode mode}); + class StockSettings extends Component { - StockSettings(this._navigator); + StockSettings(this.navigator, this.stockMode, this.updater) : super(stateful: true); - Navigator _navigator; + Navigator navigator; + StockMode stockMode; + SettingsUpdater updater; - bool _awesome = false; - void _handleAwesomeChanged(bool value) { + void syncFields(StockSettings source) { + navigator = source.navigator; + stockMode = source.stockMode; + updater = source.updater; + } + + void _handleStockModeChanged(bool value) { setState(() { - _awesome = value; + stockMode = value ? StockMode.optimistic : StockMode.pessimistic; }); + sendUpdates(); + } + + void sendUpdates() { + if (updater != null) + updater( + mode: stockMode + ); } Widget buildToolBar() { return new ToolBar( left: new IconButton( icon: 'navigation/arrow_back_white', - onPressed: _navigator.pop), + onPressed: navigator.pop), center: new Text('Settings', style: Theme.of(this).text.title) ); } @@ -41,10 +60,10 @@ class StockSettings extends Component { child: new Block([ new MenuItem( icon: 'action/thumb_up', - onPressed: () => _handleAwesomeChanged(!_awesome), + onPressed: () => _handleStockModeChanged(stockMode == StockMode.optimistic ? false : true), children: [ new Flexible(child: new Text('Everything is awesome')), - new Checkbox(value: _awesome, onChanged: _handleAwesomeChanged) + new Checkbox(value: stockMode == StockMode.optimistic, onChanged: _handleStockModeChanged) ] ), ]) diff --git a/examples/stocks2/lib/stock_types.dart b/examples/stocks2/lib/stock_types.dart new file mode 100644 index 00000000000..e7f06ff11d1 --- /dev/null +++ b/examples/stocks2/lib/stock_types.dart @@ -0,0 +1 @@ +enum StockMode { optimistic, pessimistic }