feature: menu group - default expand option (#1389)

* feature(menuGroup): add prop for menuGropu that allow component to be expanded by default

* feat(menuGroup): add expanded menuGroup example to showcase

* fix(menuGroup): resolve comments

* fix: typo fix

* remove: remove dead code

* update: change initialExpand logic

* fix: typescript fix

* fix: fire event only when component was mounted

* feat: adjusted initially expanded behaviour implementation

* chore: removed redundant code

* chore: code cleanup

Co-authored-by: Ivan Vezhnavets <[email protected]>
Co-authored-by: Alexei Malashkevich <[email protected]>
Co-authored-by: Artsiom Grintsevich <[email protected]>

Author: 4 people

Diff for: src/components/ui/menu/menuGroup.component.tsx

@@ -25,6 +25,7 @@ import { MenuItemDescriptor } from './menu.service';
 
 export interface MenuGroupProps extends MenuItemProps {
   children?: ChildrenWithProps<MenuItemProps>;
+  initiallyExpanded?: boolean;
 }
 
 export type MenuGroupElement = React.ReactElement<MenuGroupProps>;
@@ -59,6 +60,9 @@ const POSITION_OUTSCREEN: Point = Point.outscreen();
  * to render to end of the *title*.
  * Expected to return an Image.
  *
+ * @property {boolean} initiallyExpanded - Boolean value which defines whether group should be initially expanded.
+ * If true - menu group will be expanded by default.
+ *
  * @property {TouchableOpacityProps} ...TouchableOpacityProps - Any props applied to TouchableOpacity component.
  *
  * @overview-example MenuGroups
@@ -68,8 +72,23 @@ export class MenuGroup extends React.Component<MenuGroupProps, State> {
   public state: State = {
     submenuHeight: 1,
   };
+
+  private initiallyExpanded: boolean;
+
   private expandAnimation: Animated.Value = new Animated.Value(0);
 
+  constructor(props) {
+    super(props);
+    this.initiallyExpanded = props.initiallyExpanded;
+  }
+
+  public componentDidUpdate(prevProps: Readonly<MenuGroupProps>, prevState: Readonly<State>, snapshot?: any) {
+    const submenuHeightChanged = this.state.submenuHeight !== prevState.submenuHeight;
+    if (submenuHeightChanged && this.hasSubmenu && this.initiallyExpanded) {
+      this.expandAnimation.setValue(this.state.submenuHeight);
+    }
+  }
+
   private get hasSubmenu(): boolean {
     return React.Children.count(this.props.children) > 0;
   }
@@ -102,6 +121,8 @@ export class MenuGroup extends React.Component<MenuGroupProps, State> {
 
   private onPress = (descriptor: MenuItemDescriptor, event: GestureResponderEvent): void => {
     if (this.hasSubmenu) {
+      this.initiallyExpanded = false;
+
       const expandValue: number = this.expandAnimationValue > 0 ? 0 : this.state.submenuHeight;
       this.createExpandAnimation(expandValue).start();
       this.props.onPress && this.props.onPress(descriptor, event);
@@ -129,7 +150,7 @@ export class MenuGroup extends React.Component<MenuGroupProps, State> {
 
     return (
       <Animated.View style={{ transform: [{ rotate: this.expandToRotateInterpolation }] }}>
-        <ChevronDown {...evaProps} fill={style.tintColor}/>
+        <ChevronDown {...evaProps} fill={style.tintColor as string}/>
       </Animated.View>
     );
   };
@@ -150,7 +171,7 @@ export class MenuGroup extends React.Component<MenuGroupProps, State> {
 
   private renderMeasuringGroupedItems = (evaStyle): MeasuringElement => {
     return (
-      <MeasureElement 
+      <MeasureElement
         shouldUseTopInsets={ModalService.getShouldUseTopInsets}
         onMeasure={this.onSubmenuMeasure}>
         {this.renderGroupedItems(evaStyle)}

Diff for: src/showcases/components/menu/menuGroups.component.tsx

@@ -31,7 +31,7 @@ export const MenuGroupsShowcase = () => {
           <MenuItem title='UI Kitten' accessoryLeft={StarIcon}/>
           <MenuItem title='Kitten Tricks' accessoryLeft={StarIcon}/>
         </MenuGroup>
-        <MenuGroup title='Akveo Angular' accessoryLeft={BrowserIcon}>
+        <MenuGroup title='Akveo Angular' accessoryLeft={BrowserIcon} initiallyExpanded={true}>
           <MenuItem title='Nebular' accessoryLeft={StarIcon}/>
           <MenuItem title='ngx-admin' accessoryLeft={StarIcon}/>
           <MenuItem title='UI Bakery' accessoryLeft={StarIcon}/>