Skip to content
This repository has been archived by the owner on Nov 14, 2023. It is now read-only.

Commit

Permalink
fix: Navigation support link logic (#90)
Browse files Browse the repository at this point in the history
* fix: Navigation support link logic

* update readme
  • Loading branch information
wangkailang authored Oct 9, 2019
1 parent f666191 commit 331ccd9
Show file tree
Hide file tree
Showing 7 changed files with 129 additions and 58 deletions.
18 changes: 14 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
## wizard-ui
### A Design System with React
# wizard-ui

A Design System with React.

[![Build Status](https://travis-ci.org/xsky-fe/wizard-ui.svg?branch=master)](https://travis-ci.org/xsky-fe/wizard-ui)
[![Codecov](https://img.shields.io/codecov/c/github/xsky-fe/wizard-ui/master.svg?style=flat-square)](https://codecov.io/gh/xsky-fe/wizard-ui/branch/master)
Expand All @@ -15,15 +16,19 @@
## Install and Usage

### Dev and webpack setting

Add in package.json

```bash
yarn add wizard-ui
# sass dep && loader
yarn add --dev node-sass style-loader css-loader sass-loader
# react bootstrap font dev
yarn add --dev url-loader file-loader
```

if you not use [create-react-app](https://github.com/facebook/create-react-app), you need set webpack config:

```js
{
test: /\.(css|scss)$/,
Expand All @@ -44,20 +49,25 @@ if you not use [create-react-app](https://github.com/facebook/create-react-app),
```

### Global style
```

```jsx
import 'wizard-ui/lib/style/index.scss';
```

### Usage

> UMD
```jsx
import { Icon } from 'wizard-ui';

export default () => <Icon type="os-search-role" />
```

> ES
```jsx
import { Icon } from 'wizard-ui/esm';

export default () => <Icon type="os-search-role" />
```
```
62 changes: 61 additions & 1 deletion docs/content/components/navigation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,67 @@ date: 2019-06-20
<Icon type={toggle ? 'slide-right' : 'slide-left'}/>
</Button>
<div style={{ width: toggle ? '50px' : '200px', backgroundColor: '#2d3454' }}>
<Navigation navGroups={navs} toggled={toggle}/>
<Navigation navGroups={navs} toggled={toggle} logo="Logo"/>
</div>
</div>
)
}
```

### 关联路由
```jsx
() => {
const navs = {
overview: {
title: '概览',
icon: 'overview',
component: props => <a href="#" {...props}/>,
},
nav1: {
title: '导航栏一',
children: [
{
title: '选项一',
icon: 'volume',
component: props => <a href="#" {...props}/>,
},
{
title: '选项二',
icon: 'consistency-group',
component: props => <a href="#" {...props}/>,
},
{
title: '选项三',
icon: 'access-target',
component: props => <a href="#" {...props}/>,
},
],
},
nav2: {
title: '导航栏二',
children: [
{
title: '选项一',
icon: 'file-user',
component: props => <a href="#" {...props}/>,
},
{
title: '选项二',
icon: 'fs-client',
component: props => <a href="#" {...props}/>,
},
],
},
};
const [ toggle, setToggle ] = React.useState(true);
const handleClick = () => setToggle(!toggle);
return (
<div>
<Button bsStyle="primary" onClick={handleClick} style={{ marginBottom: 8 }}>
<Icon type={toggle ? 'slide-right' : 'slide-left'}/>
</Button>
<div style={{ width: toggle ? '50px' : '200px', backgroundColor: '#2d3454' }}>
<Navigation navGroups={navs} toggled={toggle} logo="Logo"/>
</div>
</div>
)
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "wizard-ui",
"version": "0.3.0-beta.0",
"version": "0.3.0-beta.5",
"private": false,
"main": "lib/index.js",
"module": "esm/index.js",
Expand Down
61 changes: 32 additions & 29 deletions src/components/Navigation/index.tsx
Original file line number Diff line number Diff line change
@@ -1,41 +1,47 @@
import * as React from 'react';
import * as PropTypes from 'prop-types';
import cn from 'classnames';
import { getBemClass, uuid } from '../../utils';
import { Tooltip, OverlayTrigger, Panel } from 'react-bootstrap';
import { getBemClass } from '../../utils';
import { Panel } from 'react-bootstrap';
import { NavigationProps, NavigationGroup } from '../../interface';
import Icon from '../Icon';
import Tooltip from '../Tooltip';
import { xor, toPairs } from 'lodash';
import './style.scss';

function NavItemText(props: NavigationGroup) {
const { title, icon, isFirst } = props;
const { toggled, title, icon, component, isFirst } = props;

const text = (
<>
{icon && <Icon type={icon} />}
{!toggled && title}
</>
)

return (
<div className={getBemClass('Navigation__item', isFirst && 'first')}>
<div className="Navigation__link">
{icon && <span className={`icon icon-${icon}`} />}
<span className="Navigation__item__title">{title}</span>
{component ? (
React.createElement(component, {
children: text
})
) : (
<div className="Navigation__item__title">
{text}
</div>
)}
</div>
</div>
);
}

function NavItemNoText(props: any) {
const tooltip = (
<Tooltip id={`tooltip-${uuid()}`} className="Navigation__tooltip">
return (
<Tooltip placement="right" className="Navigation__tooltip" label={NavItemText({ ...props, toggled: true })}>
{props.title}
</Tooltip>
);
return (
<OverlayTrigger placement="right" overlay={tooltip}>
{/*
OverlayTrigger需要在children中找到确定的html标签做响应
JSX形式 写法无法满足要求
Wrong modal: <NavItemText {...props}/>
*/}
{NavItemText(props)}
</OverlayTrigger>
);
}

export default class Navigation extends React.Component<NavigationProps, any> {
Expand All @@ -51,7 +57,7 @@ export default class Navigation extends React.Component<NavigationProps, any> {
/**
* Logo子元素标签文本
**/
logo: PropTypes.element,
logo: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
};
constructor(props: NavigationProps) {
super(props);
Expand All @@ -63,23 +69,20 @@ export default class Navigation extends React.Component<NavigationProps, any> {
togglePanel(activeKey: any) {
this.setState({ expanded: xor(this.state.expanded, [activeKey]) });
}
renderPanelHeader(title: string, expanded: boolean) {
renderPanelHeader(title: | React.ReactNode, expanded: boolean) {
const { toggled } = this.props;
const tooltip = (
<Tooltip id={`tooltip-${uuid()}`} className="Navigation__tooltip">
{title}
</Tooltip>
);
const header = (
<div>
<span className="panel-title__title">{title}</span>
<span className={`panel-title__icon icon icon-${expanded ? 'minus' : 'plus'}`} />
<Icon type={expanded ? 'minus' : 'plus'} className="panel-title__icon"/>
</div>
);
return toggled ? (
<OverlayTrigger placement="right" overlay={tooltip}>
{header}
</OverlayTrigger>
<div>
<Tooltip placement="right" className="Navigation__tooltip" icon={expanded ? 'minus' : 'plus'} iconClass="panel-title__icon">
{title}
</Tooltip>
</div>
) : (
header
);
Expand All @@ -99,7 +102,7 @@ export default class Navigation extends React.Component<NavigationProps, any> {
<div className="Navigation__list">
{toPairs(navGroups).map(([key, group]) => {
if (!group.children) {
return <NavItem key={key} {...group} />;
return <NavItem key={key} {...group}/>;
}
return (
// @ts-ignore
Expand Down
34 changes: 14 additions & 20 deletions src/components/Navigation/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,26 +3,32 @@
.Navigation {
height: 100%;
}
.Navigation--logo {
padding-top: $height-topbar;
}

.Navigation__logo {
background-color: $gray-darker-4;
height: $height-topbar;
position: absolute;
top: 0;
left: 0;
line-height: $height-topbar;
text-align: center;
width: 100%;
z-index: 99;
box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, .15);
}

.Navigation__list {
.Tooltip {
display: block;
color: $white;
text-align: center;
min-height : 36px;
line-height: 36px;
}
.panel-title .panel-title__icon {
float: right;
line-height: 36px;
padding-right: 17px;
}
margin: 0;
padding: 15px 0 0;
overflow-y: auto;
height: 100%;
/* 折叠组样式覆盖 */
.panel {
margin-bottom: 0;
Expand All @@ -43,16 +49,8 @@
cursor: pointer;
text-decoration: none;
position: relative;
.panel-title__icon {
position: absolute;
right: 15px;
top: 9px;
}
.Navigation--toggled & {
padding-left: 15px;
.panel-title__title {
display: none;
}
.panel-title__icon {
position: static;
}
Expand Down Expand Up @@ -117,10 +115,6 @@
margin-right: 12px;
}

.Navigation--toggled .Navigation__item__title {
display: none;
}

/**
* 折叠之后的tooltip
*/
Expand Down
3 changes: 2 additions & 1 deletion src/components/Tooltip/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ const Tooltip: React.FC<TooltipProps> = props => {
onClick,
label,
contrast,
className,
style,
children,
placement: defaultPlacement,
Expand Down Expand Up @@ -74,7 +75,7 @@ const Tooltip: React.FC<TooltipProps> = props => {
<BaseTooltip
id="tooltip"
style={Object.assign({}, { maxWidth: 280 }, style)}
className={cn({ contrast })}
className={`${cn({ contrast })} ${className}`}
onMouseEnter={handleShow}
onMouseLeave={handleHide}
>
Expand Down
7 changes: 5 additions & 2 deletions src/interface.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ export interface TooltipProps {
style?: string;
placement?: string;
children: React.ReactNode;
className?: string;
}

export interface UsageBarProps {
Expand Down Expand Up @@ -191,18 +192,20 @@ export interface DropdownButtonProps extends DefaultDropdownButtonProps {
}

export interface NavigationGroup {
title: string;
title: string | React.ReactNode;
icon?: string;
isFirst?: boolean;
children?: any[];
component?: any;
toggled?: boolean;
}

export interface NavigationProps {
navGroups: {
[key: string]: NavigationGroup;
};
toggled?: boolean;
logo?: boolean;
logo?: React.ReactNode | string;
}

export interface RangePickerProps {
Expand Down

0 comments on commit 331ccd9

Please sign in to comment.