Skip to content

Commit

Permalink
refactor(ui): apply overflow-menu mappings
Browse files Browse the repository at this point in the history
  • Loading branch information
@artyorsh
artyorsh authored Apr 8, 2019
1 parent b6a191e commit 0b4388b
Show file tree
Hide file tree
Showing 5 changed files with 215 additions and 231 deletions.
111 changes: 38 additions & 73 deletions src/framework/ui/common/mapping.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1285,14 +1285,17 @@
"meta": {
"scope": "all",
"parameters": {
"borderRadius": {
"type": "number"
},
"itemBorderRadius": {
"popoverBorderRadius": {
"type": "number"
},
"popoverBackgroundColor": {
"type": "string"
},
"itemBorderBottomWidth": {
"type": "number"
},
"itemBorderBottomColor": {
"type": "number"
}
},
"appearances": {
Expand All @@ -1306,9 +1309,10 @@
"appearances": {
"default": {
"mapping": {
"borderRadius": 6,
"itemBorderRadius": 6,
"popoverBackgroundColor": "white"
"popoverBorderRadius": 12,
"popoverBackgroundColor": "color-white",
"itemBorderBottomWidth": 1,
"itemBorderBottomColor": "color-basic-200"
}
}
}
Expand All @@ -1320,31 +1324,25 @@
"minHeight": {
"type": "number"
},
"padding": {
"paddingVertical": {
"type": "number"
},
"backgroundColor": {
"type": "string"
},
"borderColor": {
"type": "string"
},
"borderWidth": {
"paddingHorizontal": {
"type": "number"
},
"textColor": {
"type": "string"
},
"textFontWeight": {
"type": "string"
"textMarginHorizontal": {
"type": "number"
},
"textFontSize": {
"type": "number"
},
"textMarginHorizontal": {
"textLineHeight": {
"type": "number"
},
"iconTintColor": {
"textFontWeight": {
"type": "string"
},
"textColor": {
"type": "string"
},
"iconWidth": {
Expand All @@ -1355,26 +1353,17 @@
},
"iconMarginHorizontal": {
"type": "number"
},
"iconTintColor": {
"type": "string"
}
},
"appearances": {
"default": {
"default": true
}
},
"variantGroups": {
"size": {
"small": {
"default": false
},
"medium": {
"default": true
},
"large": {
"default": false
}
}
},
"variantGroups": {},
"states": {
"disabled": {
"default": false,
Expand All @@ -1391,50 +1380,26 @@
"appearances": {
"default": {
"mapping": {
"backgroundColor": "white",
"borderColor": "gray-light",
"borderWidth": 1.2,
"textColor": "blue-pitch-dark",
"minHeight": 48,
"paddingVertical": 12,
"paddingHorizontal": 8,
"textMarginHorizontal": 8,
"textFontSize": 13,
"textLineHeight": 24,
"textFontWeight": "600",
"textColor": "font-primary-color",
"iconWidth": 24,
"iconHeight": 24,
"iconMarginHorizontal": 8,
"iconTintColor": "blue-pitch-dark",
"state": {
"disabled": {
"backgroundColor": "gray-dark"
"textColor": "color-basic-400",
"iconTintColor": "color-basic-300"
},
"active": {
"textColor": "blue-primary",
"iconTintColor": "blue-primary"
}
}
},
"variantGroups": {
"size": {
"small": {
"minHeight": 40,
"padding": 10,
"textFontSize": 13,
"textMarginHorizontal": 6,
"iconWidth": 20,
"iconHeight": 20,
"iconMarginHorizontal": 6
},
"medium": {
"minHeight": 48,
"padding": 12,
"textFontSize": 15,
"textMarginHorizontal": 8,
"iconWidth": 24,
"iconHeight": 24,
"iconMarginHorizontal": 8
},
"large": {
"minHeight": 56,
"padding": 14,
"textFontSize": 17,
"textMarginHorizontal": 10,
"iconWidth": 28,
"iconHeight": 28,
"iconMarginHorizontal": 10
"textColor": "color-primary-500",
"iconTintColor": "color-primary-500"
}
}
}
Expand Down
103 changes: 50 additions & 53 deletions src/framework/ui/overflowMenu/overflowMenu.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {
ViewProps,
View,
GestureResponderEvent,
StyleSheet,
} from 'react-native';
import {
StyledComponentProps,
Expand All @@ -25,7 +26,6 @@ type MenuItemElement = React.ReactElement<OverflowMenuItemProps>;
interface OverflowMenuProps {
children: React.ReactElement<any>;
items: OverflowMenuItemType[];
size?: string;
onSelect?: (index: number, event: GestureResponderEvent) => void;
}

Expand All @@ -36,76 +36,67 @@ export type Props = & StyledComponentProps & OverflowMenuProps & Omit<PopoverPro

export class OverflowMenu extends React.Component<Props> {

private isFirstItem = (index: number): boolean => {
return index === 0;
static defaultProps: Partial<Props> = {
indicatorOffset: 12,
};

private isLastItem = (index: number): boolean => {
return this.props.items.length - 1 === index;
};

private isSingleItem = (): boolean => {
return this.props.items.length === 1;
};


private onSelect = (index: number, event: GestureResponderEvent): void => {
if (this.props.onSelect) {
this.props.onSelect(index, event);
}
};

private getPopoverStyle = (style: StyleType): StyleType => {
private getComponentStyle = (style: StyleType): StyleType => {
const {
popoverBorderRadius,
popoverBackgroundColor,
itemBorderBottomWidth,
itemBorderBottomColor,
} = style;

return {
backgroundColor: style.popoverBackgroundColor,
borderRadius: style.borderRadius,
popover: {
borderRadius: popoverBorderRadius,
backgroundColor: popoverBackgroundColor,
...styles.popover,
},
item: {
borderBottomWidth: itemBorderBottomWidth,
borderBottomColor: itemBorderBottomColor,
...styles.item,
},
};
};

private getMenuItemStyle = (style: StyleType, index: number): StyleType => {
const borderRadius: number = style.itemBorderRadius;

if (this.isFirstItem(index) && !this.isSingleItem()) {
return {
borderTopLeftRadius: borderRadius,
borderTopRightRadius: borderRadius,
};
} else if (this.isLastItem(index) && !this.isSingleItem()) {
return {
borderBottomLeftRadius: borderRadius,
borderBottomRightRadius: borderRadius,
};
} else if (this.isSingleItem()) {
return {
borderRadius: borderRadius,
};
}
};

private renderMenuItem = (item: OverflowMenuItemType, index: number): MenuItemElement => {
const { size, themedStyle } = this.props;
const itemStyle: StyleType = this.getMenuItemStyle(themedStyle, index);

private renderItemElement = (item: OverflowMenuItemType, index: number, style: StyleType): MenuItemElement => {
return (
<OverflowMenuItem
style={style}
{...item}
size={size}
isLastItem={this.isLastItem(index)}
style={itemStyle}
key={index}
index={index}
onPress={this.onSelect}
/>
);
};

private renderComponentChildren = (): MenuItemElement[] => {
return this.props.items.map((item: OverflowMenuItemType, index: number) =>
this.renderMenuItem(item, index));
private renderContentElementChildren = (style: StyleType): MenuItemElement[] => {
const { items } = this.props;

return this.props.items.map((item: OverflowMenuItemType, index: number) => {
const itemElement: MenuItemElement = this.renderItemElement(item, index, style);

const isLast: boolean = index === items.length - 1;
const borderBottomWidth: number = isLast ? 0 : style.borderBottomWidth;

return React.cloneElement(itemElement, {
style: [itemElement.props.style, { borderBottomWidth }],
});
});
};

private renderMenuContent = (): React.ReactElement<ViewProps> => {
const menuItems: MenuItemElement[] = this.renderComponentChildren();
private renderPopoverContentElement = (style: StyleType): React.ReactElement<ViewProps> => {
const menuItems: MenuItemElement[] = this.renderContentElementChildren(style.item);

return (
<View style={this.props.style}>
Expand All @@ -115,18 +106,24 @@ export class OverflowMenu extends React.Component<Props> {
};

public render(): React.ReactNode {
const { children, themedStyle, ...restProps } = this.props;
const menu: React.ReactElement<ViewProps> = this.renderMenuContent();
const popoverStyle: StyleType = this.getPopoverStyle(themedStyle);
const { style, themedStyle, children, ...restProps } = this.props;
const { popover, ...componentStyle } = this.getComponentStyle(themedStyle);
const contentElement: React.ReactElement<ViewProps> = this.renderPopoverContentElement(componentStyle);

return (
<Popover
{...restProps}
indicatorOffset={2}
content={menu}
style={[popoverStyle, restProps.style]}>
style={popover}
content={contentElement}>
{children}
</Popover>
);
}
}

const styles = StyleSheet.create({
popover: {
overflow: 'hidden',
},
item: {},
});
2 changes: 0 additions & 2 deletions src/framework/ui/overflowMenu/overflowMenu.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,6 @@ describe('@overflow-menu-item: component checks', () => {
<MockMenuItem
text='Test Menu Item'
icon={icon}
isLastItem={false}
disabled={true}
onPress={() => 1}
/>,
Expand All @@ -104,7 +103,6 @@ describe('@overflow-menu-item: component checks', () => {
const component: RenderAPI = render(
<MockMenuItem
text='Test Menu Item'
isLastItem={true}
disabled={false}
onPress={() => 2}
/>,
Expand Down
Loading

0 comments on commit 0b4388b

Please sign in to comment.