diff --git a/src/components/ui/menu/menuGroup.component.tsx b/src/components/ui/menu/menuGroup.component.tsx index 0d53b6860..398454159 100644 --- a/src/components/ui/menu/menuGroup.component.tsx +++ b/src/components/ui/menu/menuGroup.component.tsx @@ -25,6 +25,7 @@ import { MenuItemDescriptor } from './menu.service'; export interface MenuGroupProps extends MenuItemProps { children?: ChildrenWithProps; + initiallyExpanded?: boolean; } export type MenuGroupElement = React.ReactElement; @@ -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 { 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, prevState: Readonly, 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 { 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 { return ( - + ); }; @@ -150,7 +171,7 @@ export class MenuGroup extends React.Component { private renderMeasuringGroupedItems = (evaStyle): MeasuringElement => { return ( - {this.renderGroupedItems(evaStyle)} diff --git a/src/showcases/components/menu/menuGroups.component.tsx b/src/showcases/components/menu/menuGroups.component.tsx index 0c3348a74..f6e776304 100644 --- a/src/showcases/components/menu/menuGroups.component.tsx +++ b/src/showcases/components/menu/menuGroups.component.tsx @@ -31,7 +31,7 @@ export const MenuGroupsShowcase = () => { - +