From fe6502569627b9eac1f4d4b18b2a78c71ac72c23 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87a=C4=9Fatay=20=C3=87ivici?= Date: Mon, 2 Jul 2018 15:28:01 +0300 Subject: [PATCH] Fixed #475 --- src/components/tabview/TabView.css | 7 ++ src/components/tabview/TabView.d.ts | 1 + src/components/tabview/TabView.js | 89 +++++++------- src/showcase/tabmenu/TabMenuDemo.js | 6 +- src/showcase/tabview/TabViewDemo.js | 172 +++++++++++++++++++--------- 5 files changed, 174 insertions(+), 101 deletions(-) diff --git a/src/components/tabview/TabView.css b/src/components/tabview/TabView.css index 2b3cfea69e..c7022a0cd0 100644 --- a/src/components/tabview/TabView.css +++ b/src/components/tabview/TabView.css @@ -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; diff --git a/src/components/tabview/TabView.d.ts b/src/components/tabview/TabView.d.ts index 6b697f525b..6fd273f7e8 100644 --- a/src/components/tabview/TabView.d.ts +++ b/src/components/tabview/TabView.d.ts @@ -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 {} diff --git a/src/components/tabview/TabView.js b/src/components/tabview/TabView.js index ec4548a96b..21542feab7 100644 --- a/src/components/tabview/TabView.js +++ b/src/components/tabview/TabView.js @@ -33,60 +33,61 @@ 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 ( -
  • - this.onTabHeaderClick(e, tab, index)} id={id} aria-controls={ariaControls} aria-selected={selected} > +
  • + this.onTabHeaderClick(event, tab, index)} id={id} aria-controls={ariaControls} aria-selected={selected}> {tab.props.leftIcon && } {tab.props.header} {tab.props.rightIcon && } @@ -94,11 +95,17 @@ export class TabView extends Component {
    • ); } + + 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 (
      @@ -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 (
      @@ -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 (
      diff --git a/src/showcase/tabmenu/TabMenuDemo.js b/src/showcase/tabmenu/TabMenuDemo.js index 7ea223906b..c5da27c0d9 100644 --- a/src/showcase/tabmenu/TabMenuDemo.js +++ b/src/showcase/tabmenu/TabMenuDemo.js @@ -91,7 +91,8 @@ constructor() {

      Uncontrolled

      -

      In uncontrolled mode, only model is required.

      +

      In uncontrolled mode, only model 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.

      {` @@ -100,9 +101,6 @@ constructor() { `} -

      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.

      -

      Properties

      diff --git a/src/showcase/tabview/TabViewDemo.js b/src/showcase/tabview/TabViewDemo.js index 1b3b35a4b3..9944b4a896 100644 --- a/src/showcase/tabview/TabViewDemo.js +++ b/src/showcase/tabview/TabViewDemo.js @@ -4,7 +4,14 @@ import {TabView,TabPanel} from '../../components/tabview/TabView'; import {CodeHighlight} from '../codehighlight/CodeHighlight'; export class TabViewDemo extends Component { - + + constructor() { + super(); + this.state = { + activeIndex: 1 + } + } + render() { return (
      @@ -16,25 +23,44 @@ export class TabViewDemo extends Component {
      +

      Uncontrolled

      - - The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughters wedding. - His beloved son Michael has just come home from the war, but does not intend to become part of his fathers business. - Through Michaels life the nature of the family business becomes clear. The business of the family is just like the head - of the family, kind and benevolent to those who give respect, - but given to ruthless violence whenever anything stands against the good of the family. + + The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war, + but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is + just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family. + + + Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, The_Godfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall, + deepening The_Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills + his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy. + + + The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal + interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father. + A decade earlier, he gave custody of his two children to Kay, who has since remarried. + + + + + + +

      Controlled

      + this.setState({activeIndex: e.value})}> + + The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war, + but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is + just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family. - - Francis Ford Coppolas legendary continuation and sequel to his landmark 1972 film, The_Godfather parallels the young - Vito Corleone's rise with his son Michael's spiritual fall, deepening The_Godfathers depiction of the dark side of - the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills his family. - Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy, killing the local Black Hand - Fanucci after he demands his customary cut of the tyro's business. With Fanucci gone, Vito's communal stature grows. + + Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, The_Godfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall, + deepening The_Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills + his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy. - - After a break of more than 15 years, director Francis Ford Coppola and writer Mario Puzo returned to the well for this - third and final story of the fictional Corleone crime family. Two decades have passed, and crime kingpin Michael Corleone, - now divorced from his wife Kay has nearly succeeded in keeping his promise that his family would one day be completely legitimate. + + The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal + interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father. + A decade earlier, he gave custody of his two children to Kay, who has since remarried. @@ -67,34 +93,49 @@ import {TabView,TabPanel} from 'primereact/tabview';

      Getting Started

      -

      Tabview element consists of one or more TabPanel elements. Header of the tab is defined using header attribute.

      +

      Tabview element consists of one or more TabPanel elements and can either be used as a Controlled or Uncontrolled component.

      + +

      Controlled Component

      +

      In controlled mode, activeIndex and onTabChange properties need to be defined to control the state.

      + + +{` + this.setState({activeIndex: e.value})}> + + Content I + + + Content II + + + Content III + + + +`} + + +

      Uncontrolled

      +

      In uncontrolled mode, no additional properties are required. Initial active tab can be provided using the activeIndex property in uncontrolled mode however it is evaluated at initial rendering and ignored in further updates. If you programmatically + need to update the active tab, prefer to use the component as controlled.

      + {` - - The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughters wedding. - His beloved son Michael has just come home from the war, but does not intend to become part of his fathers business. - Through Michaels life the nature of the family business becomes clear. The business of the family is just like the head - of the family, kind and benevolent to those who give respect, - but given to ruthless violence whenever anything stands against the good of the family. + + Content I - - Francis Ford Coppolas legendary continuation and sequel to his landmark 1972 film, The_Godfather parallels the young - Vito Corleone's rise with his son Michael's spiritual fall, deepening The_Godfathers depiction of the dark side of - the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills his family. - Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy, killing the local Black Hand - Fanucci after he demands his customary cut of the tyro's business. With Fanucci gone, Vito's communal stature grows. + + Content II - - After a break of more than 15 years, director Francis Ford Coppola and writer Mario Puzo returned to the well for this - third and final story of the fictional Corleone crime family. Two decades have passed, and crime kingpin Michael Corleone, - now divorced from his wife Kay has nearly succeeded in keeping his promise that his family would one day be completely legitimate. + + Content III `} - +

      Properties For TabPanel

      @@ -213,7 +254,7 @@ import {TabView,TabPanel} from 'primereact/tabview'; @@ -268,12 +309,15 @@ import {TabView,TabPanel} from 'primereact/tabview'; {` +import React, {Component} from 'react'; +import {TabView,TabPanel} from 'primereact/tabview'; + export class TabViewDemo extends Component { - + render() { return (
      -
      +

      TabView

      TabView is a container component to group content with tabs.

      @@ -282,30 +326,46 @@ export class TabViewDemo extends Component {
      - - - The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughters wedding. - His beloved son Michael has just come home from the war, but does not intend to become part of his fathers business. - Through Michaels life the nature of the family business becomes clear. The business of the family is just like the head - of the family, kind and benevolent to those who give respect, - but given to ruthless violence whenever anything stands against the good of the family. + + The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war, + but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is + just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family. - - Francis Ford Coppolas legendary continuation and sequel to his landmark 1972 film, The_Godfather parallels the young - Vito Corleone's rise with his son Michael's spiritual fall, deepening The_Godfathers depiction of the dark side of - the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills his family. - Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy, killing the local Black Hand - Fanucci after he demands his customary cut of the tyro's business. With Fanucci gone, Vito's communal stature grows. + + Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, The_Godfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall, + deepening The_Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills + his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy. - - After a break of more than 15 years, director Francis Ford Coppola and writer Mario Puzo returned to the well for this - third and final story of the fictional Corleone crime family. Two decades have passed, and crime kingpin Michael Corleone, - now divorced from his wife Kay has nearly succeeded in keeping his promise that his family would one day be completely legitimate. + + The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal + interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father. + A decade earlier, he gave custody of his two children to Kay, who has since remarried. - + + +

      Controlled

      + this.setState({activeIndex: e.value})}> + + The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war, + but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is + just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family. + + + Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, The_Godfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall, + deepening The_Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills + his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy. + + + The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal + interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father. + A decade earlier, he gave custody of his two children to Kay, who has since remarried. + + + +
      onTabChange event.originalEvent: Click object
      - event.index: Index of the tab + event.value: Index of the selected tab       		Callback to invoke when an active tab is changed.