From c6b0320047ff2ba42caeb13f468a61ed213e447f Mon Sep 17 00:00:00 2001 From: Sergey Yuferev Date: Tue, 16 Apr 2019 18:58:01 +0300 Subject: [PATCH] fix: style fix, rewrite menu items with LinkControl --- packages/core/src/menu/MenuControl.tsx | 2 + packages/core/src/menu/MenuLevelBuilder.ts | 8 ++- .../src/horizontal-menu/HorizontalMenu.tsx | 37 +++++----- .../horizontal-menu/HorizontalMenuItem.tsx | 67 ++++++++++++------- .../mobile/src/select-menu/SelectMenu.tsx | 24 ++----- .../mobile/src/select-menu/SelectMenuItem.tsx | 61 +++++++++++------ 6 files changed, 114 insertions(+), 85 deletions(-) diff --git a/packages/core/src/menu/MenuControl.tsx b/packages/core/src/menu/MenuControl.tsx index 91e57e037..310e4ed8a 100644 --- a/packages/core/src/menu/MenuControl.tsx +++ b/packages/core/src/menu/MenuControl.tsx @@ -14,10 +14,12 @@ export interface MenuControlProps { export class MenuControl extends PureComponent< MenuControlProps > { + render() { const {props} = this return props.children({ levels: new MenuLevelBuilder(props.items).levels(props.selected), }) } + } diff --git a/packages/core/src/menu/MenuLevelBuilder.ts b/packages/core/src/menu/MenuLevelBuilder.ts index c81a4a96f..130d487a5 100644 --- a/packages/core/src/menu/MenuLevelBuilder.ts +++ b/packages/core/src/menu/MenuLevelBuilder.ts @@ -15,6 +15,7 @@ export type MenuLevel = { } | undefined export class MenuLevelBuilder { + constructor(protected items: MenuTree[]) {} protected buildLevels( @@ -22,7 +23,7 @@ export class MenuLevelBuilder { items: MenuTree[], levels: MenuLevel[], depth = 0, - parentActive = false + parentActive = false, ): boolean { if (levels.length <= depth) levels.push(undefined) let activeItem: MenuTree | undefined @@ -36,7 +37,7 @@ export class MenuLevelBuilder { sub, levels, depth + 1, - currentActive || parentActive + currentActive || parentActive, ) : false if (currentActive) activeItem = item @@ -46,7 +47,7 @@ export class MenuLevelBuilder { if (activeItem || parentActive) { levels[depth] = { items, - selected: activeItem ? activeItem.id : items[0].id + selected: activeItem ? activeItem.id : items[0].id, } } @@ -64,4 +65,5 @@ export class MenuLevelBuilder { this.buildLevels(selected, this.items, result) return result } + } diff --git a/packages/mobile/src/horizontal-menu/HorizontalMenu.tsx b/packages/mobile/src/horizontal-menu/HorizontalMenu.tsx index 387dc5fb4..a83669efb 100644 --- a/packages/mobile/src/horizontal-menu/HorizontalMenu.tsx +++ b/packages/mobile/src/horizontal-menu/HorizontalMenu.tsx @@ -1,25 +1,17 @@ -import {BaseMenuItem, ButtonControl, styled} from '@qiwi/pijma-core' +import {BaseMenuItem, styled, Flex, Card} from '@qiwi/pijma-core' import React from 'react' import {HorizontalMenuItem} from './HorizontalMenuItem' // @see https://iamsteve.me/blog/entry/using-flexbox-for-horizontal-scrolling-navigation -export const HorizontalMenuContainer = styled('nav')(({theme}) => ({ - display: 'flex', - flexWrap: 'nowrap', +const ScrollableFlex = styled(Flex)({ overflowX: 'auto', webkitOverflowScrolling: 'auto', msOverflowStyle: '-ms-autohiding-scrollbar', '&::-webkit-scrollbar': { display: 'none', }, - '&:last-child': { - marginRight: 0, - }, - paddingLeft: '16px', - paddingRight: '16px', - borderBottom: '1px solid ' + theme.color.gray.light, -})) +}) export interface HorizontalMenuProps { /** @@ -40,21 +32,26 @@ export const HorizontalMenu = ({ selected, id, }: HorizontalMenuProps) => ( - ( - ( + bb="1px solid #e6e6e6" + children={ + ( - )} + ))} /> - ))} + } /> ) diff --git a/packages/mobile/src/horizontal-menu/HorizontalMenuItem.tsx b/packages/mobile/src/horizontal-menu/HorizontalMenuItem.tsx index 8ae9bf0a6..6bf48fd80 100644 --- a/packages/mobile/src/horizontal-menu/HorizontalMenuItem.tsx +++ b/packages/mobile/src/horizontal-menu/HorizontalMenuItem.tsx @@ -1,4 +1,5 @@ -import {styled} from '@qiwi/pijma-core' +import {Card, LinkControl, Lnk, Typo} from '@qiwi/pijma-core' +import React from 'react' export interface HorizontalMenuItemProps { active: boolean @@ -6,28 +7,46 @@ export interface HorizontalMenuItemProps { href?: string target?: string reverse?: boolean - onClick?: (e: React.MouseEvent) => void + isLast?: boolean + onClick?: () => void } -export const HorizontalMenuItem = styled('a', { - shouldForwardProp: prop => prop !== 'active', -})(({active, theme}) => ({ - cursor: 'pointer', - fontFamily: theme.font.family, - fontWeight: theme.font.weight.normal, - fontSize: '16px', - textDecoration: 'none', - color: theme.color.black, - flexShrink: 0, - flexGrow: 0, - whiteSpace: 'nowrap', - paddingBottom: '4px', - marginRight: '24px', - borderBottomWidth: '4px', - borderBottomStyle: 'solid', - borderBottomColor: active ? theme.color.brand : 'transparent', - '&:hover, &:active, &:focus': { - textDecoration: 'none', - borderBottomColor: theme.color.brand, - }, -})) +const CardLink = Card.withComponent(Lnk) + +export const HorizontalMenuItem: React.FC = props => ( + ( + + } + /> + )} + /> +) diff --git a/packages/mobile/src/select-menu/SelectMenu.tsx b/packages/mobile/src/select-menu/SelectMenu.tsx index cead2914f..01364d27c 100644 --- a/packages/mobile/src/select-menu/SelectMenu.tsx +++ b/packages/mobile/src/select-menu/SelectMenu.tsx @@ -1,11 +1,4 @@ -import { - BaseMenuItem, - ButtonControl, - Card, - Flex, - FlexItem, - Icon, -} from '@qiwi/pijma-core' +import {BaseMenuItem, Card, Flex, FlexItem, Icon} from '@qiwi/pijma-core' import React, {Component} from 'react' import {SelectMenuItem} from './SelectMenuItem' @@ -31,6 +24,7 @@ export interface SelectMenuState { export class SelectMenu< Item extends BaseMenuItem = BaseMenuItem > extends Component, SelectMenuState> { + state: SelectMenuState = { expanded: false, } @@ -78,22 +72,18 @@ export class SelectMenu< direction="column" children={items.map(item => item.id === selected ? null : ( - ( - - )} + children={item.title} /> - ) + ), )} /> )} ) } + } diff --git a/packages/mobile/src/select-menu/SelectMenuItem.tsx b/packages/mobile/src/select-menu/SelectMenuItem.tsx index b1f03f90a..db6773f0c 100644 --- a/packages/mobile/src/select-menu/SelectMenuItem.tsx +++ b/packages/mobile/src/select-menu/SelectMenuItem.tsx @@ -1,29 +1,48 @@ -import {styled} from '@qiwi/pijma-core' +import {Card, LinkControl, Lnk, Typo} from '@qiwi/pijma-core' +import React from 'react' export interface SelectMenuItemProps { id: string href?: string target?: string reverse?: boolean - onClick?: (e: React.MouseEvent) => void + onClick?: () => void } -export const SelectMenuItem = styled('a')< - SelectMenuItemProps ->(({theme}) => ({ - cursor: 'pointer', - fontFamily: theme.font.family, - fontWeight: theme.font.weight.normal, - fontSize: '16px', - textDecoration: 'none', - color: theme.color.black, - flexShrink: 0, - flexGrow: 0, - whiteSpace: 'nowrap', - lineHeight: '21px', - padding: '8px 16px', - '&:hover, &:active, &:focus': { - textDecoration: 'none', - backgroundColor: theme.color.gray.lightest, - }, -})) +const CardLink = Card.withComponent(Lnk) + +export const SelectMenuItem: React.FC = props => ( + ( + + } + /> + )} + /> +)