Skip to content

Commit

Permalink
Fixed #475
Browse files Browse the repository at this point in the history
  • Loading branch information
Çağatay Çivici authored and Çağatay Çivici committed Jul 2, 2018
1 parent b7e5130 commit fe65025
Show file tree
Hide file tree
Showing 5 changed files with 174 additions and 101 deletions.
7 changes: 7 additions & 0 deletions src/components/tabview/TabView.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,16 @@
.ui-tabview .ui-tabview-nav li .ui-tabview-right-icon,
.ui-tabview .ui-tabview-nav li .ui-tabview-title {
vertical-align: middle;
}

.ui-tabview .ui-tabview-nav li .ui-tabview-left-icon {
margin-right: .25em;
}

.ui-tabview .ui-tabview-nav li .ui-tabview-right-icon {
margin-left: .25em;
}

.ui-tabview .ui-tabview-nav li .ui-tabview-close {
margin: 0.5em 0.3em 0 0;
cursor: pointer;
Expand Down
1 change: 1 addition & 0 deletions src/components/tabview/TabView.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ interface TabViewProps {
rightIcon?: string;
style?: any;
className?: string;
onTabChange?(e:{event: originalEvent, value: index}): void;
}

export class TabPanel extends React.Component<TabPanelProps,any> {}
Expand Down
89 changes: 48 additions & 41 deletions src/components/tabview/TabView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,72 +33,79 @@ export class TabView extends Component {

static defaultProps = {
id: null,
activeIndex: null,
activeIndex: 0,
style: null,
className: null
className: null,
onTabChange: null
}

static propTypes = {
id: PropTypes.string,
activeIndex: PropTypes.number,
style: PropTypes.object,
className: PropTypes.string
className: PropTypes.string,
onTabChange: PropTypes.func
};

constructor(props) {
super(props);
this.state = {
activeIndex: this.props.activeIndex || 0
};
if (!this.props.onTabChange) {
this.state = {
activeIndex: this.props.activeIndex
};
}

this.id = this.props.id || UniqueComponentId();
}

isSelected(index) {
const activeIndex = this.props.onTabChange ? this.props.activeIndex : this.state.activeIndex;

return (activeIndex === index);
}

onTabHeaderClick(event, tab, index) {
if(!tab.props.disabled) {
this.setState({
activeIndex: index
});

if(this.props.onTabChange) {
this.props.onTabChange({originalEvent: event, index: index});
if (!tab.props.disabled) {
if (this.props.onTabChange) {
this.props.onTabChange({originalEvent: event, value: index});
}
else {
this.setState({
activeIndex: index
});
}
}

event.preventDefault();
}

static getDerivedStateFromProps(nextProps, prevState) {
if(nextProps.activeIndex !== null && nextProps.activeIndex !== prevState.activeIndex) {
return {
activeIndex: nextProps.activeIndex
};
}

return null;
}


renderTabHeader(tab, index) {
let selected = this.state.activeIndex === index;
let className = classNames(tab.props.headerClassName, 'ui-state-default ui-corner-top', {'ui-tabview-selected ui-state-active': selected, 'ui-state-disabled': tab.props.disabled});
let id = this.id + '_header_' + index;
let ariaControls = this.id + '_content_' + index;
const selected = this.isSelected(index);
const className = classNames(tab.props.headerClassName, 'ui-state-default ui-corner-top', {'ui-tabview-selected ui-state-active': selected, 'ui-state-disabled': tab.props.disabled});
const id = this.id + '_header_' + index;
const ariaControls = this.id + '_content_' + index;

return (
<li className={className} role="presentation" style={tab.props.headerStyle}>
<a role="tab" href={'#' + ariaControls} onClick={(e) => this.onTabHeaderClick(e, tab, index)} id={id} aria-controls={ariaControls} aria-selected={selected} >
<li className={className} style={tab.props.headerStyle} role="presentation" >
<a role="tab" href={'#' + ariaControls} onClick={(event) => this.onTabHeaderClick(event, tab, index)} id={id} aria-controls={ariaControls} aria-selected={selected}>
{tab.props.leftIcon && <span className={classNames('ui-tabview-left-icon ', tab.props.leftIcon)}></span>}
<span className="ui-tabview-title">{tab.props.header}</span>
{tab.props.rightIcon && <span className={classNames('ui-tabview-right-icon ', tab.props.rightIcon)}></span>}
</a>
</li>
);
}

renderTabHeaders() {
return (
React.Children.map(this.props.children, (tab, index) => {
return this.renderTabHeader(tab, index);
})
);
}

renderNavigator() {
let headers = React.Children.map(this.props.children, (tab, index) => {
return this.renderTabHeader(tab, index);
});
const headers = this.renderTabHeaders();

return (
<ul className="ui-tabview-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
Expand All @@ -108,11 +115,11 @@ export class TabView extends Component {
}

renderContent() {
let contents = React.Children.map(this.props.children, (tab, index) => {
let selected = this.state.activeIndex === index;
let className = classNames(tab.props.contentClassName, 'ui-tabview-panel ui-widget-content', {'ui-helper-hidden': !selected});
let id = this.id + '_content_' + index;
let ariaLabelledBy = this.id + '_header_' + index;
const contents = React.Children.map(this.props.children, (tab, index) => {
const selected = this.isSelected(index);
const className = classNames(tab.props.contentClassName, 'ui-tabview-panel ui-widget-content', {'ui-helper-hidden': !selected});
const id = this.id + '_content_' + index;
const ariaLabelledBy = this.id + '_header_' + index;

return (
<div id={id} aria-labelledby={ariaLabelledBy} aria-hidden={!selected} className={className} style={tab.props.contentStyle} role="tabpanel">
Expand All @@ -129,9 +136,9 @@ export class TabView extends Component {
}

render() {
let className = classNames('ui-tabview ui-widget ui-widget-content ui-corner-all ui-tabview-top', this.props.className)
let navigator = this.renderNavigator();
let content = this.renderContent();
const className = classNames('ui-tabview ui-widget ui-widget-content ui-corner-all ui-tabview-top', this.props.className)
const navigator = this.renderNavigator();
const content = this.renderContent();

return (
<div id={this.props.id} className={className} style={this.props.style}>
Expand Down
6 changes: 2 additions & 4 deletions src/showcase/tabmenu/TabMenuDemo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,8 @@ constructor() {
</CodeHighlight>

<h3>Uncontrolled</h3>
<p>In uncontrolled mode, only <b>model</b> is required.</p>
<p>In uncontrolled mode, only <b>model</b> is required.Initial active item can be provided using the activeItem property in uncontrolled mode however it is evaluated at initial rendering and ignored in further updates. If you programmatically
need to update the active item, prefer to use the component as controlled.</p>

<CodeHighlight className="language-jsx">
{`
Expand All @@ -100,9 +101,6 @@ constructor() {
`}
</CodeHighlight>

<p>Initial active item can be provided using the activeItem property in uncontrolled mode however it is evaluated at initial rendering and ignored in further updates. If you programmatically
need to update the active item, prefer to use the component as controlled.</p>

<h3>Properties</h3>
<div className="doc-tablewrapper">
<table className="doc-table">
Expand Down
Loading

0 comments on commit fe65025

Please sign in to comment.