Merge pull request #619 from Workiva/todo-example-replace-expansionpanel

rmconsole4-wk · web-flow · commit daff050da32d · 2020-08-19T17:27:57.000-05:00
Boyscoutin: Replace deprecated ExpansionPanel with new Accordion from MaterialUi
diff --git a/app/over_react_redux/todo_client/lib/src/components/shared/list_item_component_mixin.dart b/app/over_react_redux/todo_client/lib/src/components/shared/list_item_component_mixin.dart
@@ -20,8 +20,8 @@ mixin ListItemMixin<M extends BaseModel, T extends ListItemPropsMixin, S extends
     ..localModel = props.model
   );
 
-  Map<String, dynamic> get sharedExpansionPanelProps => {
-    'onChange': handleExpansionPanelExpandedStateChange,
+  Map<String, dynamic> get sharedAccordionProps => {
+    'onChange': handleAccordionExpandedStateChange,
     'expanded': props.isSelected,
     'style': highlightedItemStyle,
   };
@@ -36,7 +36,7 @@ mixin ListItemMixin<M extends BaseModel, T extends ListItemPropsMixin, S extends
   bool get allowExpansion => hasDetails || props.isEditable;
 
   @protected
-  void handleExpansionPanelExpandedStateChange([SyntheticEvent event]) {
+  void handleAccordionExpandedStateChange([SyntheticEvent event]) {
     if (!allowExpansion) return;
     event?.stopPropagation();
     toggleSelect();
diff --git a/app/over_react_redux/todo_client/lib/src/components/shared/list_item_expansion_panel_summary.dart b/app/over_react_redux/todo_client/lib/src/components/shared/list_item_expansion_panel_summary.dart
@@ -7,10 +7,10 @@ import 'package:todo_client/src/components/shared/material_ui.dart';
 
 part 'list_item_expansion_panel_summary.over_react.g.dart';
 
-UiFactory<ListItemExpansionPanelSummaryProps> ListItemExpansionPanelSummary =
-    _$ListItemExpansionPanelSummary; // ignore: undefined_identifier
+UiFactory<ListItemAccordionSummaryProps> ListItemAccordionSummary =
+    _$ListItemAccordionSummary; // ignore: undefined_identifier
 
-mixin ListItemExpansionPanelSummaryProps on UiProps {
+mixin ListItemAccordionSummaryProps on UiProps {
   @requiredProp
   String modelId;
   @requiredProp
@@ -21,17 +21,17 @@ mixin ListItemExpansionPanelSummaryProps on UiProps {
   Function() onToggleEditable;
 }
 
-class ListItemExpansionPanelSummaryState = UiState with HoverableItemStateMixin;
+class ListItemAccordionSummaryState = UiState with HoverableItemStateMixin;
 
-class ListItemExpansionPanelSummaryComponent
-    extends UiStatefulComponent2<ListItemExpansionPanelSummaryProps, ListItemExpansionPanelSummaryState>
-    with HoverableItemMixin<ListItemExpansionPanelSummaryProps, ListItemExpansionPanelSummaryState> {
+class ListItemAccordionSummaryComponent
+    extends UiStatefulComponent2<ListItemAccordionSummaryProps, ListItemAccordionSummaryState>
+    with HoverableItemMixin<ListItemAccordionSummaryProps, ListItemAccordionSummaryState> {
   @override
   get itemNodeRef => createRef<Element>();
 
   @override
   render() {
-    return ExpansionPanelSummary({
+    return AccordionSummary({
       'ref': itemNodeRef,
       'aria-controls': 'details_${props.modelId}',
       'id': 'summary_${props.modelId}',
diff --git a/app/over_react_redux/todo_client/lib/src/components/shared/material_ui.dart b/app/over_react_redux/todo_client/lib/src/components/shared/material_ui.dart
@@ -20,6 +20,10 @@ import 'package:todo_client/src/utils.dart';
 class MaterialUI {
   external static JsMap get colors;
 
+  external static ReactClass get Accordion;
+  external static ReactClass get AccordionActions;
+  external static ReactClass get AccordionDetails;
+  external static ReactClass get AccordionSummary;
   external static ReactClass get AppBar;
   external static ReactClass get Avatar;
   external static ReactClass get Badge;
@@ -29,10 +33,7 @@ class MaterialUI {
   external static ReactClass get Container;
   external static ReactClass get CssBaseline;
   external static ReactClass get Divider;
-  external static ReactClass get ExpansionPanel;
-  external static ReactClass get ExpansionPanelActions;
-  external static ReactClass get ExpansionPanelDetails;
-  external static ReactClass get ExpansionPanelSummary;
+
   external static ReactClass get Grid;
   external static ReactClass get IconButton;
   external static ReactClass get InputBase;
@@ -55,6 +56,18 @@ final muiColors = jsBackedMapDeepFromJs(MaterialUI.colors);
 // that we can use just like any other react-dart component in our app!
 // -----------------------------------------------------------------------
 
+/// See: <https://material-ui.com/components/accordion/>
+final Accordion = ReactJsComponentFactoryProxy(MaterialUI.Accordion);
+
+/// See: <https://material-ui.com/components/accordion/>
+final AccordionActions = ReactJsComponentFactoryProxy(MaterialUI.AccordionActions);
+
+/// See: <https://material-ui.com/components/accordion/>
+final AccordionDetails = ReactJsComponentFactoryProxy(MaterialUI.AccordionDetails);
+
+/// See: <https://material-ui.com/components/accordion/>
+final AccordionSummary = ReactJsComponentFactoryProxy(MaterialUI.AccordionSummary);
+
 /// See: <https://material-ui.com/components/app-bar/>
 final AppBar = ReactJsComponentFactoryProxy(MaterialUI.AppBar);
 
@@ -82,18 +95,6 @@ final CssBaseline = ReactJsComponentFactoryProxy(MaterialUI.CssBaseline);
 /// See: <https://material-ui.com/components/dividers/>
 final Divider = ReactJsComponentFactoryProxy(MaterialUI.Divider);
 
-/// See: <https://material-ui.com/components/expansion-panels/>
-final ExpansionPanel = ReactJsComponentFactoryProxy(MaterialUI.ExpansionPanel);
-
-/// See: <https://material-ui.com/components/expansion-panels/>
-final ExpansionPanelActions = ReactJsComponentFactoryProxy(MaterialUI.ExpansionPanelActions);
-
-/// See: <https://material-ui.com/components/expansion-panels/>
-final ExpansionPanelDetails = ReactJsComponentFactoryProxy(MaterialUI.ExpansionPanelDetails);
-
-/// See: <https://material-ui.com/components/expansion-panels/>
-final ExpansionPanelSummary = ReactJsComponentFactoryProxy(MaterialUI.ExpansionPanelSummary);
-
 /// See: <https://material-ui.com/components/grid/>
 final Grid = ReactJsComponentFactoryProxy(MaterialUI.Grid);
 
diff --git a/app/over_react_redux/todo_client/lib/src/components/todo_list_item.dart b/app/over_react_redux/todo_client/lib/src/components/todo_list_item.dart
@@ -62,11 +62,11 @@ class TodoListItemComponent extends UiStatefulComponent2<TodoListItemProps, Todo
 
   @override
   render() {
-    return ExpansionPanel({
-      ...sharedExpansionPanelProps,
+    return Accordion({
+      ...sharedAccordionProps,
       'className': model.isCompleted ? 'Mui-disabled' : null,
     },
-      (ListItemExpansionPanelSummary()
+      (ListItemAccordionSummary()
         ..modelId = model.id
         ..allowExpansion = allowExpansion
         ..isEditable = props.isEditable
@@ -76,7 +76,7 @@ class TodoListItemComponent extends UiStatefulComponent2<TodoListItemProps, Todo
         _renderTaskHeader(),
         _renderUserSelector(),
       ),
-      ExpansionPanelDetails({},
+      AccordionDetails({},
         _renderTaskNotes(),
       ),
       _renderEditableTaskActions(),
@@ -174,7 +174,7 @@ class TodoListItemComponent extends UiStatefulComponent2<TodoListItemProps, Todo
 
     return Fragment()(
       Divider({}),
-      ExpansionPanelActions({},
+      AccordionActions({},
         Grid({
           'container': true,
           'direction': 'row'
diff --git a/app/over_react_redux/todo_client/lib/src/components/user_list_item.dart b/app/over_react_redux/todo_client/lib/src/components/user_list_item.dart
@@ -62,8 +62,8 @@ class UserListItemComponent extends UiStatefulComponent2<UserListItemProps, User
 
   @override
   render() {
-    return ExpansionPanel(sharedExpansionPanelProps,
-      (ListItemExpansionPanelSummary()
+    return Accordion(sharedAccordionProps,
+      (ListItemAccordionSummary()
         ..modelId = model.id
         ..allowExpansion = allowExpansion
         ..isEditable = props.isEditable
@@ -72,7 +72,7 @@ class UserListItemComponent extends UiStatefulComponent2<UserListItemProps, User
         _renderUserAvatar(),
         _renderUserNameHeader(),
       ),
-      ExpansionPanelDetails({},
+      AccordionDetails({},
         _renderUserBio(),
       ),
       _renderEditableUserActions(),
@@ -145,7 +145,7 @@ class UserListItemComponent extends UiStatefulComponent2<UserListItemProps, User
 
     return Fragment()(
       Divider({}),
-      ExpansionPanelActions({},
+      AccordionActions({},
         Grid({
           'container': true,
           'direction': 'row',
diff --git a/app/over_react_redux/todo_client/test/unit/browser/components/material_ui_test.dart b/app/over_react_redux/todo_client/test/unit/browser/components/material_ui_test.dart
@@ -74,31 +74,31 @@ main() {
       });
     });
 
-    group('ExpansionPanel', () {
-      test('is a ReactJsComponentFactoryProxy of the JS MaterialUI.ExpansionPanel component', () {
-        expect(ExpansionPanel.type.displayName, MaterialUI.ExpansionPanel.displayName);
-        expect(ExpansionPanel({}), isA<ReactElement>());
+    group('Accordion', () {
+      test('is a ReactJsComponentFactoryProxy of the JS MaterialUI.Accordion component', () {
+        expect(Accordion.type.displayName, MaterialUI.Accordion.displayName);
+        expect(Accordion({}), isA<ReactElement>());
       });
     });
 
-    group('ExpansionPanelActions', () {
-      test('is a ReactJsComponentFactoryProxy of the JS MaterialUI.ExpansionPanelActions component', () {
-        expect(ExpansionPanelActions.type.displayName, MaterialUI.ExpansionPanelActions.displayName);
-        expect(ExpansionPanelActions({}), isA<ReactElement>());
+    group('AccordionActions', () {
+      test('is a ReactJsComponentFactoryProxy of the JS MaterialUI.AccordionActions component', () {
+        expect(AccordionActions.type.displayName, MaterialUI.AccordionActions.displayName);
+        expect(AccordionActions({}), isA<ReactElement>());
       });
     });
 
-    group('ExpansionPanelDetails', () {
-      test('is a ReactJsComponentFactoryProxy of the JS MaterialUI.ExpansionPanelDetails component', () {
-        expect(ExpansionPanelDetails.type.displayName, MaterialUI.ExpansionPanelDetails.displayName);
-        expect(ExpansionPanelDetails({}), isA<ReactElement>());
+    group('AccordionDetails', () {
+      test('is a ReactJsComponentFactoryProxy of the JS MaterialUI.AccordionDetails component', () {
+        expect(AccordionDetails.type.displayName, MaterialUI.AccordionDetails.displayName);
+        expect(AccordionDetails({}), isA<ReactElement>());
       });
     });
 
-    group('ExpansionPanelSummary', () {
-      test('is a ReactJsComponentFactoryProxy of the JS MaterialUI.ExpansionPanelSummary component', () {
-        expect(ExpansionPanelSummary.type.displayName, MaterialUI.ExpansionPanelSummary.displayName);
-        expect(ExpansionPanelSummary({}), isA<ReactElement>());
+    group('AccordionSummary', () {
+      test('is a ReactJsComponentFactoryProxy of the JS MaterialUI.AccordionSummary component', () {
+        expect(AccordionSummary.type.displayName, MaterialUI.AccordionSummary.displayName);
+        expect(AccordionSummary({}), isA<ReactElement>());
       });
     });
 
