From 5a3f70e966adbbeaf5e981565cffb444dc02c776 Mon Sep 17 00:00:00 2001 From: Ivan Vezhnavets Date: Sun, 28 Mar 2021 15:34:58 +0300 Subject: [PATCH 01/11] feature(menuGroup): add prop for menuGropu that allow component to be expanded by default --- src/components/ui/menu/menuGroup.component.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/components/ui/menu/menuGroup.component.tsx b/src/components/ui/menu/menuGroup.component.tsx index 71c769eb6..5d3eb1a68 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; + expanded?: boolean; } export type MenuGroupElement = React.ReactElement; @@ -58,6 +59,9 @@ const POSITION_OUTSCREEN: Point = Point.outscreen(); * @property {(ImageProps) => ReactElement} accessoryRight - Function component * to render to end of the *title*. * Expected to return an Image. + * + * @property {boolean} expanded - Boolean value to render expanded group by default. + * It true - menu group will be expanded by default. * * @property {TouchableOpacityProps} ...TouchableOpacityProps - Any props applied to TouchableOpacity component. * @@ -110,12 +114,16 @@ export class MenuGroup extends React.Component { private onSubmenuMeasure = (frame: Frame): void => { this.setState({ submenuHeight: frame.size.height }); + if (this.props.expanded) { + const expandValue: number = this.expandAnimationValue > 0 ? 0 : this.state.submenuHeight; + this.createExpandAnimation(expandValue, 0).start(); + } }; - private createExpandAnimation = (toValue: number): Animated.CompositeAnimation => { + private createExpandAnimation = (toValue: number, duration?: number): Animated.CompositeAnimation => { return Animated.timing(this.expandAnimation, { toValue: toValue, - duration: CHEVRON_ANIM_DURATION, + duration: duration || CHEVRON_ANIM_DURATION, useNativeDriver: false, }); }; From 81464851f28cad318eb4e7e5bed1b3c625b8dbe4 Mon Sep 17 00:00:00 2001 From: Ivan Vezhnavets Date: Sun, 28 Mar 2021 15:37:27 +0300 Subject: [PATCH 02/11] feat(menuGroup): add expanded menuGroup example to showcase --- src/showcases/components/menu/menuGroups.component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/showcases/components/menu/menuGroups.component.tsx b/src/showcases/components/menu/menuGroups.component.tsx index 0c3348a74..4cb255593 100644 --- a/src/showcases/components/menu/menuGroups.component.tsx +++ b/src/showcases/components/menu/menuGroups.component.tsx @@ -31,7 +31,7 @@ export const MenuGroupsShowcase = () => { - + From a8dc6b3663477571cef94988ae20cbe99a41a9cd Mon Sep 17 00:00:00 2001 From: Ivan Vezhnavets Date: Mon, 29 Mar 2021 18:56:58 +0300 Subject: [PATCH 03/11] fix(menuGroup): resolve comments --- src/components/ui/menu/menuGroup.component.tsx | 6 +++--- src/showcases/components/menu/menuGroups.component.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/ui/menu/menuGroup.component.tsx b/src/components/ui/menu/menuGroup.component.tsx index 5d3eb1a68..8ff282780 100644 --- a/src/components/ui/menu/menuGroup.component.tsx +++ b/src/components/ui/menu/menuGroup.component.tsx @@ -25,7 +25,7 @@ import { MenuItemDescriptor } from './menu.service'; export interface MenuGroupProps extends MenuItemProps { children?: ChildrenWithProps; - expanded?: boolean; + initialExpanded?: boolean; } export type MenuGroupElement = React.ReactElement; @@ -60,7 +60,7 @@ const POSITION_OUTSCREEN: Point = Point.outscreen(); * to render to end of the *title*. * Expected to return an Image. * - * @property {boolean} expanded - Boolean value to render expanded group by default. + * @property {boolean} initialExpanded - Boolean value to render expanded group by default. * It true - menu group will be expanded by default. * * @property {TouchableOpacityProps} ...TouchableOpacityProps - Any props applied to TouchableOpacity component. @@ -114,7 +114,7 @@ export class MenuGroup extends React.Component { private onSubmenuMeasure = (frame: Frame): void => { this.setState({ submenuHeight: frame.size.height }); - if (this.props.expanded) { + if (this.props.initialExpanded) { const expandValue: number = this.expandAnimationValue > 0 ? 0 : this.state.submenuHeight; this.createExpandAnimation(expandValue, 0).start(); } diff --git a/src/showcases/components/menu/menuGroups.component.tsx b/src/showcases/components/menu/menuGroups.component.tsx index 4cb255593..5d405f3fa 100644 --- a/src/showcases/components/menu/menuGroups.component.tsx +++ b/src/showcases/components/menu/menuGroups.component.tsx @@ -31,7 +31,7 @@ export const MenuGroupsShowcase = () => { - + From 41f21c4f7ff813bfc5fd7b6bdfa14277fe0fd8e9 Mon Sep 17 00:00:00 2001 From: Ivan Vezhnavets Date: Tue, 30 Mar 2021 20:19:06 +0300 Subject: [PATCH 04/11] fix: typo fix --- src/components/ui/menu/menuGroup.component.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/ui/menu/menuGroup.component.tsx b/src/components/ui/menu/menuGroup.component.tsx index 8ff282780..b6ae74187 100644 --- a/src/components/ui/menu/menuGroup.component.tsx +++ b/src/components/ui/menu/menuGroup.component.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { createRef } from 'react'; import { Animated, GestureResponderEvent, @@ -60,8 +60,8 @@ const POSITION_OUTSCREEN: Point = Point.outscreen(); * to render to end of the *title*. * Expected to return an Image. * - * @property {boolean} initialExpanded - Boolean value to render expanded group by default. - * It true - menu group will be expanded by default. + * @property {boolean} initialExpanded - Boolean value to render to initially expand a group. + * If true - menu group will be expanded by default. * * @property {TouchableOpacityProps} ...TouchableOpacityProps - Any props applied to TouchableOpacity component. * From 8cde36f631379d21b2707c045e75e7c927d0a17f Mon Sep 17 00:00:00 2001 From: Ivan Vezhnavets Date: Tue, 30 Mar 2021 20:21:59 +0300 Subject: [PATCH 05/11] remove: remove dead code --- src/components/ui/menu/menuGroup.component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ui/menu/menuGroup.component.tsx b/src/components/ui/menu/menuGroup.component.tsx index b6ae74187..63085fad3 100644 --- a/src/components/ui/menu/menuGroup.component.tsx +++ b/src/components/ui/menu/menuGroup.component.tsx @@ -1,4 +1,4 @@ -import React, { createRef } from 'react'; +import React from 'react'; import { Animated, GestureResponderEvent, From 46334a3dec41a94087309a75825430099fac93ab Mon Sep 17 00:00:00 2001 From: Ivan Vezhnavets Date: Wed, 31 Mar 2021 13:17:08 +0300 Subject: [PATCH 06/11] update: change initialExpand logic --- src/components/ui/menu/menuGroup.component.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/components/ui/menu/menuGroup.component.tsx b/src/components/ui/menu/menuGroup.component.tsx index 63085fad3..9a4a662d8 100644 --- a/src/components/ui/menu/menuGroup.component.tsx +++ b/src/components/ui/menu/menuGroup.component.tsx @@ -69,6 +69,13 @@ const POSITION_OUTSCREEN: Point = Point.outscreen(); */ export class MenuGroup extends React.Component { + private initialExpanded: boolean; + + constructor(props) { + super(props); + this.initialExpanded = this.props.initialExpanded || false; + } + public state: State = { submenuHeight: 1, }; @@ -114,9 +121,10 @@ export class MenuGroup extends React.Component { private onSubmenuMeasure = (frame: Frame): void => { this.setState({ submenuHeight: frame.size.height }); - if (this.props.initialExpanded) { + if (this.initialExpanded) { const expandValue: number = this.expandAnimationValue > 0 ? 0 : this.state.submenuHeight; this.createExpandAnimation(expandValue, 0).start(); + this.initialExpanded = false } }; @@ -181,6 +189,8 @@ export class MenuGroup extends React.Component { public render(): React.ReactNode { const { children, ...itemProps } = this.props; + console.log(this.initialExpanded); + return ( Date: Wed, 31 Mar 2021 13:32:36 +0300 Subject: [PATCH 07/11] fix: typescript fix --- src/components/ui/menu/menuGroup.component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ui/menu/menuGroup.component.tsx b/src/components/ui/menu/menuGroup.component.tsx index 9a4a662d8..1cc4c4900 100644 --- a/src/components/ui/menu/menuGroup.component.tsx +++ b/src/components/ui/menu/menuGroup.component.tsx @@ -145,7 +145,7 @@ export class MenuGroup extends React.Component { return ( - + ); }; From 41756c1dddbddb564c5288816b4421b8781659f0 Mon Sep 17 00:00:00 2001 From: Ivan Vezhnavets Date: Thu, 1 Apr 2021 10:56:59 +0300 Subject: [PATCH 08/11] fix: fire event only when component was mounted --- src/components/ui/menu/menuGroup.component.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/ui/menu/menuGroup.component.tsx b/src/components/ui/menu/menuGroup.component.tsx index 1cc4c4900..1bfd2eebc 100644 --- a/src/components/ui/menu/menuGroup.component.tsx +++ b/src/components/ui/menu/menuGroup.component.tsx @@ -73,7 +73,7 @@ export class MenuGroup extends React.Component { constructor(props) { super(props); - this.initialExpanded = this.props.initialExpanded || false; + this.initialExpanded = false; } public state: State = { @@ -81,6 +81,12 @@ export class MenuGroup extends React.Component { }; private expandAnimation: Animated.Value = new Animated.Value(0); + public componentDidMount() { + if(this.props.initialExpanded) { + this.initialExpanded = true; + } + } + private get hasSubmenu(): boolean { return React.Children.count(this.props.children) > 0; } From 3d4af14852a1f15f1095986b7671797154ecd85a Mon Sep 17 00:00:00 2001 From: Artsiom Grintsevich Date: Fri, 21 Oct 2022 17:49:40 +0300 Subject: [PATCH 09/11] feat: adjusted initially expanded behaviour implementation --- .../ui/menu/menuGroup.component.tsx | 38 +++++++++---------- .../components/menu/menuGroups.component.tsx | 2 +- 2 files changed, 18 insertions(+), 22 deletions(-) diff --git a/src/components/ui/menu/menuGroup.component.tsx b/src/components/ui/menu/menuGroup.component.tsx index 133c05668..891979e39 100644 --- a/src/components/ui/menu/menuGroup.component.tsx +++ b/src/components/ui/menu/menuGroup.component.tsx @@ -25,7 +25,7 @@ import { MenuItemDescriptor } from './menu.service'; export interface MenuGroupProps extends MenuItemProps { children?: ChildrenWithProps; - initialExpanded?: boolean; + initiallyExpanded?: boolean; } export type MenuGroupElement = React.ReactElement; @@ -59,8 +59,8 @@ const POSITION_OUTSCREEN: Point = Point.outscreen(); * @property {ReactElement | (ImageProps) => ReactElement} accessoryRight - Function component * to render to end of the *title*. * Expected to return an Image. - * - * @property {boolean} initialExpanded - Boolean value to render to initially expand a group. + * + * @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. @@ -69,21 +69,22 @@ const POSITION_OUTSCREEN: Point = Point.outscreen(); */ export class MenuGroup extends React.Component { - private initialExpanded: boolean; - - constructor(props) { - super(props); - this.initialExpanded = false; - } - public state: State = { submenuHeight: 1, }; + + private initiallyExpanded: boolean; + private expandAnimation: Animated.Value = new Animated.Value(0); - public componentDidMount() { - if(this.props.initialExpanded) { - this.initialExpanded = true; + constructor(props) { + super(props); + this.initiallyExpanded = props.initiallyExpanded; + } + + public componentDidUpdate(prevProps: Readonly, prevState: Readonly, snapshot?: any) { + if (this.state.submenuHeight !== prevState.submenuHeight && this.initiallyExpanded) { + this.expandAnimation.setValue(this.state.submenuHeight); } } @@ -119,6 +120,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); @@ -127,11 +130,6 @@ export class MenuGroup extends React.Component { private onSubmenuMeasure = (frame: Frame): void => { this.setState({ submenuHeight: frame.size.height }); - if (this.initialExpanded) { - const expandValue: number = this.expandAnimationValue > 0 ? 0 : this.state.submenuHeight; - this.createExpandAnimation(expandValue, 0).start(); - this.initialExpanded = false - } }; private createExpandAnimation = (toValue: number, duration?: number): Animated.CompositeAnimation => { @@ -172,7 +170,7 @@ export class MenuGroup extends React.Component { private renderMeasuringGroupedItems = (evaStyle): MeasuringElement => { return ( - {this.renderGroupedItems(evaStyle)} @@ -195,8 +193,6 @@ export class MenuGroup extends React.Component { public render(): React.ReactNode { const { children, ...itemProps } = this.props; - console.log(this.initialExpanded); - return ( { - + From df31c87e75fc40656143343abfe99b858071de56 Mon Sep 17 00:00:00 2001 From: Artsiom Grintsevich Date: Fri, 21 Oct 2022 17:55:28 +0300 Subject: [PATCH 10/11] chore: removed redundant code --- src/components/ui/menu/menuGroup.component.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ui/menu/menuGroup.component.tsx b/src/components/ui/menu/menuGroup.component.tsx index 891979e39..42c89a0a0 100644 --- a/src/components/ui/menu/menuGroup.component.tsx +++ b/src/components/ui/menu/menuGroup.component.tsx @@ -132,10 +132,10 @@ export class MenuGroup extends React.Component { this.setState({ submenuHeight: frame.size.height }); }; - private createExpandAnimation = (toValue: number, duration?: number): Animated.CompositeAnimation => { + private createExpandAnimation = (toValue: number): Animated.CompositeAnimation => { return Animated.timing(this.expandAnimation, { toValue: toValue, - duration: duration || CHEVRON_ANIM_DURATION, + duration: CHEVRON_ANIM_DURATION, useNativeDriver: false, }); }; From 1749f91a52df8d58f2ec66169a622174c0e27ff3 Mon Sep 17 00:00:00 2001 From: Artsiom Grintsevich Date: Fri, 21 Oct 2022 18:05:15 +0300 Subject: [PATCH 11/11] chore: code cleanup --- src/components/ui/menu/menuGroup.component.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/ui/menu/menuGroup.component.tsx b/src/components/ui/menu/menuGroup.component.tsx index 42c89a0a0..398454159 100644 --- a/src/components/ui/menu/menuGroup.component.tsx +++ b/src/components/ui/menu/menuGroup.component.tsx @@ -83,7 +83,8 @@ export class MenuGroup extends React.Component { } public componentDidUpdate(prevProps: Readonly, prevState: Readonly, snapshot?: any) { - if (this.state.submenuHeight !== prevState.submenuHeight && this.initiallyExpanded) { + const submenuHeightChanged = this.state.submenuHeight !== prevState.submenuHeight; + if (submenuHeightChanged && this.hasSubmenu && this.initiallyExpanded) { this.expandAnimation.setValue(this.state.submenuHeight); } }