Skip to content

Commit

Permalink
Fixed #61
Browse files Browse the repository at this point in the history
  • Loading branch information
Merve7 committed Jul 28, 2017
1 parent c194f19 commit bb579ae
Show file tree
Hide file tree
Showing 7 changed files with 468 additions and 1 deletion.
1 change: 1 addition & 0 deletions src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -233,6 +233,7 @@ class AppMenu extends Component {
<Link to="/menubar">&#9679; Menubar</Link>
<Link to="/contextmenu">&#9679; ContextMenu</Link>
<Link to="/panelmenu">&#9679; PanelMenu</Link>
<Link to="/steps">&#9679; Steps</Link>
</div>

<a href="#" onClick={(event) => this.openMenu(event, 7)} className={classNames({ 'active-menuitem': this.state.activeMenu === 7 })}>
Expand Down
3 changes: 2 additions & 1 deletion src/components/menu/MenuItem.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@ export class MenuItem extends Component{
}

render() {
var styleClass=classNames('ui-menuitem-link ui-corner-all',{'ui-state-disabled':this.item.disabled});
var styleClass=classNames('ui-menuitem-link ui-corner-all',{'ui-state-disabled':this.item.disabled},
{'ui-menuitem-link-parent':this.item.items && this.props.parentMenu==='SlideMenu'});
var iconClass=classNames('ui-menuitem-icon fa fa-fw',this.item.icon?this.item.icon:null);
var rootClass=classNames('ui-submenu-icon fa fa-fw',{' fa-caret-down':this.props.root},{' fa-caret-right':!this.props.root})
if(this.item.url){
Expand Down
52 changes: 52 additions & 0 deletions src/components/steps/Steps.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
.ui-steps ul {
list-style-type: none;
padding: 0;
margin: 0;
}

.ui-steps .ui-steps-item {
float: left;
box-sizing: border-box;
cursor: pointer;
}

.ui-steps.ui-steps-readonly .ui-steps-item {
cursor: auto;
}

.ui-steps .ui-steps-item .ui-menuitem-link {
text-decoration: none;
display: block;
padding: 1em;
position: relative;
text-align: center;
}

.ui-steps .ui-steps-item.ui-state-highlight .ui-menuitem-link,
.ui-steps .ui-steps-item.ui-state-disabled .ui-menuitem-link {
cursor: default;
}

.ui-steps .ui-steps-number {
font-size: 200%;
display: block;
}

.ui-steps .ui-steps-title {
display: block;
white-space: nowrap;
}

/* Responsive */
@media (max-width: 40em) {
.ui-steps .ui-steps-item .ui-menuitem-link {
padding: 0.5em;
}

.ui-steps .ui-steps-item .ui-steps-title {
display: none;
}
}
.ui-steps .ui-steps-item {
width: 25%;
}
78 changes: 78 additions & 0 deletions src/components/steps/Steps.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

export class Steps extends Component {

static defaultProps = {
model: null,
activeIndex:0,
readOnly:true,
style:null,
styleClass:null,
activeIndexChange:null
};

static propTypes = {
model: PropTypes.array,
activeIndex:PropTypes.number,
readOnly:PropTypes.bool,
style:PropTypes.object,
styleClass:PropTypes.string,
activeIndexChange:PropTypes.func
};

constructor(props) {
super(props);
this.state = {};
}
itemClick(event, item, i) {
if(this.props.readOnly || item.disabled) {
event.preventDefault();
return;
}
if(this.props.activeIndexChange){
this.props.activeIndexChange({
originalEvent: event,
index: i
});
}
if(!item.url) {
event.preventDefault();
}

if(item.command) {
item.command({
originalEvent: event,
item: item,
index: i
});
}
}

render() {
let divClass=classNames('ui-steps ui-widget ui-helper-clearfix',this.props.styleClass,{'ui-steps-readonly':this.props.readonly});
return (
<div className={divClass} style={this.props.style}>
<ul role="tablist">
{this.props.model && this.props.model.map((item,index)=>{
let liClass=classNames('ui-steps-item',{'ui-state-highlight':(index === this.props.activeIndex),'ui-state-default':(index !== this.props.activeIndex),
'ui-state-disabled':(item.disabled || (index !== this.props.activeIndex && this.props.readOnly))})
return <li className={liClass} key={index}>
{item.url?
<a href={item.url||'#'} className="ui-menuitem-link" target={item.target} onClick={event=>this.itemClick(event,item,index)}>
<span className="ui-steps-number">{index + 1}</span>
<span className="ui-steps-title">{item.label}</span>
</a>:
<a href={'#'} className="ui-menuitem-link" target={item.target} onClick={event=>this.itemClick(event,item,index)}>
<span className="ui-steps-number">{index + 1}</span>
<span className="ui-steps-title">{item.label}</span>
</a>
}
</li>
})}
</ul>
</div>
);
}
}
2 changes: 2 additions & 0 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@ import {TieredMenuDemo} from './showcase/tieredmenu/TieredMenuDemo';
import {MenubarDemo} from './showcase/menubar/MenubarDemo';
import {ContextMenuDemo} from './showcase/contextmenu/ContextMenuDemo';
import {PanelMenuDemo} from './showcase/panelmenu/PanelMenuDemo';
import {StepsDemo} from './showcase/steps/StepsDemo';
import {OrganizationChartDemo} from './showcase/organizationchart/OrganizationChartDemo';
import {Router,Route,hashHistory} from 'react-router';

Expand Down Expand Up @@ -153,6 +154,7 @@ ReactDOM.render(
<Route path="/menubar" component={MenubarDemo} />
<Route path="/contextmenu" component={ContextMenuDemo} />
<Route path="/panelmenu" component={PanelMenuDemo} />
<Route path="/steps" component={StepsDemo} />
<Route path="/setup" component={SetupPage} />
<Route path="/splitbutton" component={SplitButtonDemo} />
<Route path="/organizationchart" component={OrganizationChartDemo} />
Expand Down
23 changes: 23 additions & 0 deletions src/showcase/steps/StepsDemo.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
.ui-steps.steps-custom {
margin-bottom: 30px;
}

.ui-steps.steps-custom .ui-steps-item .ui-menuitem-link {
height: 10px;
padding: 0 1em;
overflow: visible;
}

.ui-steps.steps-custom .ui-steps-item .ui-steps-number {
background-color: #0081c2;
color: #FFFFFF;
display: inline-block;
width: 36px;
border-radius: 50%;
margin-top: -14px;
margin-bottom: 10px;
}

.ui-steps.steps-custom .ui-steps-item .ui-steps-title {
color: #555555;
}
Loading

0 comments on commit bb579ae

Please sign in to comment.