Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature: menu group - default expand option #1389

Merged
merged 16 commits into from
Oct 27, 2022
Merged

feature: menu group - default expand option #1389

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
5a3f70e
feature(menuGroup): add prop for menuGropu that allow component to be…
Mar 28, 2021
8146485
feat(menuGroup): add expanded menuGroup example to showcase
Mar 28, 2021
a8dc6b3
fix(menuGroup): resolve comments
Mar 29, 2021
41f21c4
fix: typo fix
Mar 30, 2021
8cde36f
remove: remove dead code
Mar 30, 2021
46334a3
update: change initialExpand logic
Mar 31, 2021
1d0e67c
fix: typescript fix
Mar 31, 2021
41756c1
fix: fire event only when component was mounted
Apr 1, 2021
c89675f
Merge branch 'master' into feature/menuGroup/defaultExpand
malashkevich Apr 12, 2021
76f83b2
Merge branch 'master' into feature/menuGroup/defaultExpand
malashkevich Apr 20, 2021
168eb30
Merge branch 'master' into feature/menuGroup/defaultExpand
whitestranger7 Jun 1, 2021
45bdfc3
Merge branch 'master' into feature/menuGroup/defaultExpand
whitestranger7 Jun 15, 2021
4b013ee
Merge branch 'master' into feature/menuGroup/defaultExpand
malashkevich Sep 23, 2021
3d4af14
feat: adjusted initially expanded behaviour implementation
greenfrvr Oct 21, 2022
df31c87
chore: removed redundant code
greenfrvr Oct 21, 2022
1749f91
chore: code cleanup
greenfrvr Oct 21, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions src/components/ui/menu/menuGroup.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import { MenuItemDescriptor } from './menu.service';

export interface MenuGroupProps extends MenuItemProps {
children?: ChildrenWithProps<MenuItemProps>;
expanded?: boolean;
whitestranger7 marked this conversation as resolved.
Show resolved Hide resolved
}

export type MenuGroupElement = React.ReactElement<MenuGroupProps>;
Expand Down Expand Up @@ -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.
*
whitestranger7 marked this conversation as resolved.
Show resolved Hide resolved
Expand Down Expand Up @@ -110,12 +114,16 @@ export class MenuGroup extends React.Component<MenuGroupProps, State> {

private onSubmenuMeasure = (frame: Frame): void => {
this.setState({ submenuHeight: frame.size.height });
whitestranger7 marked this conversation as resolved.
Show resolved Hide resolved
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,
});
};
Expand Down
2 changes: 1 addition & 1 deletion src/showcases/components/menu/menuGroups.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} expanded>
whitestranger7 marked this conversation as resolved.
Show resolved Hide resolved
<MenuItem title='Nebular' accessoryLeft={StarIcon}/>
<MenuItem title='ngx-admin' accessoryLeft={StarIcon}/>
<MenuItem title='UI Bakery' accessoryLeft={StarIcon}/>
Expand Down