Skip to content

Commit

Permalink
Fixed #2278 - Add closeable property to TabPanel
Browse files Browse the repository at this point in the history
  • Loading branch information
@mertsincan
mertsincan committed Nov 5, 2021
1 parent 566e30a commit e365113
Show file tree
Hide file tree
Showing 5 changed files with 171 additions and 6 deletions.
4 changes: 4 additions & 0 deletions src/components/tabview/TabView.css
View file
Expand Up @@ -41,6 +41,10 @@
z-index: 1;
}

.p-tabview-close {
z-index: 1;
}

.p-tabview-title {
line-height: 1;
white-space: nowrap;
Expand Down
1 change: 1 addition & 0 deletions src/components/tabview/TabView.d.ts
View file
Expand Up @@ -22,6 +22,7 @@ export interface TabPanelProps {
leftIcon?: string;
rightIcon?: string;
disabled?: boolean;
closable?: boolean;
headerStyle?: object;
headerClassName?: string;
contentStyle?: object;
Expand Down
61 changes: 55 additions & 6 deletions src/components/tabview/TabView.js
View file
Expand Up @@ -10,6 +10,7 @@ export class TabPanel extends Component {
headerTemplate: null,
leftIcon: null,
rightIcon: null,
closable: false,
disabled: false,
headerStyle: null,
headerClassName: null,
Expand All @@ -22,6 +23,7 @@ export class TabPanel extends Component {
headerTemplate: PropTypes.any,
leftIcon: PropTypes.string,
rightIcon: PropTypes.string,
closeable: PropTypes.bool,
disabled: PropTypes.bool,
headerStyle: PropTypes.object,
headerClassName: PropTypes.string,
Expand Down Expand Up @@ -58,7 +60,8 @@ export class TabView extends Component {
let state = {
id: props.id,
backwardIsDisabled: true,
forwardIsDisabled: false
forwardIsDisabled: false,
hiddenTabs: []
};

if (!this.props.onTabChange) {
Expand All @@ -83,8 +86,28 @@ export class TabView extends Component {
return (index === this.getActiveIndex());
}

shouldTabRender(tab) {
return tab && tab.type === TabPanel;
shouldTabRender(tab, index) {
return tab && tab.type === TabPanel && this.state.hiddenTabs.every((_i) => _i !== index);
}

findVisibleActiveTab(i) {
const tabsInfo = React.Children.map(this.props.children, (tab, index) => {
if (this.shouldTabRender(tab, index)) {
return { tab, index }
}
});

return tabsInfo.find(({ tab, index }) => !tab.props.disabled && index >= i) || tabsInfo.reverse().find(({ tab, index }) => !tab.props.disabled && i > index);
}

onTabHeaderClose(event, index) {
const hiddenTabs = [...this.state.hiddenTabs, index];
this.setState({ hiddenTabs }, () => {
const tabInfo = this.findVisibleActiveTab(index);
tabInfo && this.onTabHeaderClick(event, tabInfo.tab, tabInfo.index);
});

event.preventDefault();
}

onTabHeaderClick(event, tab, index) {
Expand Down Expand Up @@ -157,6 +180,26 @@ export class TabView extends Component {
content.scrollLeft = pos >= lastPos ? lastPos : pos;
}

reset() {
let state = {
backwardIsDisabled: true,
forwardIsDisabled: false,
hiddenTabs: []
};

if (this.props.onTabChange) {
this.props.onTabChange({ index: this.props.activeIndex });
}
else {
state = {
...state,
activeIndex: this.props.activeIndex
};
}

this.setState(state);
}

componentDidMount() {
if (!this.state.id) {
this.setState({ id: UniqueComponentId() });
Expand All @@ -168,9 +211,13 @@ export class TabView extends Component {
componentDidUpdate(prevProps) {
this.updateInkBar();

if (prevProps.activeIndex !== this.props.activeIndex){
if (prevProps.activeIndex !== this.props.activeIndex) {
this.updateScrollBar(this.props.activeIndex);
}

if (prevProps.children !== this.props.children) {
this.setState({ hiddenTabs: [] });
}
}

renderTabHeader(tab, index) {
Expand All @@ -182,6 +229,7 @@ export class TabView extends Component {
const leftIconElement = tab.props.leftIcon && <i className={tab.props.leftIcon}></i>;
const titleElement = <span className="p-tabview-title">{tab.props.header}</span>;
const rightIconElement = tab.props.rightIcon && <i className={tab.props.rightIcon}></i>;
const closableIconElement = tab.props.closable && <i className="p-tabview-close pi pi-times" onClick={(e) => this.onTabHeaderClose(e, index)}></i>

let content = (
/* eslint-disable */
Expand All @@ -190,6 +238,7 @@ export class TabView extends Component {
{leftIconElement}
{titleElement}
{rightIconElement}
{closableIconElement}
<Ripple />
</a>
/* eslint-enable */
Expand Down Expand Up @@ -223,7 +272,7 @@ export class TabView extends Component {
renderTabHeaders() {
return (
React.Children.map(this.props.children, (tab, index) => {
if (this.shouldTabRender(tab)) {
if (this.shouldTabRender(tab, index)) {
return this.renderTabHeader(tab, index);
}
})
Expand All @@ -245,7 +294,7 @@ export class TabView extends Component {

renderContent() {
const contents = React.Children.map(this.props.children, (tab, index) => {
if (this.shouldTabRender(tab) && (!this.props.renderActiveOnly || this.isSelected(index))) {
if (this.shouldTabRender(tab, index) && (!this.props.renderActiveOnly || this.isSelected(index))) {
return this.createContent(tab, index);
}
})
Expand Down
21 changes: 21 additions & 0 deletions src/showcase/tabview/TabViewDemo.js
View file
Expand Up @@ -121,6 +121,27 @@ export class TabViewDemo extends Component {
</TabView>
</div>

<div className="card">
<h5>Closable</h5>
<TabView>
<TabPanel header="Header I">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</TabPanel>
<TabPanel header="Header II" closable>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
</TabPanel>
<TabPanel header="Header III" closable>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
</TabPanel>
</TabView>
</div>

<div className="card">
<h5>Scrollable</h5>
<div className="p-py-2">
Expand Down
90 changes: 90 additions & 0 deletions src/showcase/tabview/TabViewDoc.js
View file
Expand Up @@ -124,6 +124,27 @@ export class TabViewDemo extends Component {
</TabView>
</div>
<div className="card">
<h5>Closable</h5>
<TabView>
<TabPanel header="Header I">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</TabPanel>
<TabPanel header="Header II" closable>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
</TabPanel>
<TabPanel header="Header III" closable>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
</TabPanel>
</TabView>
</div>
<div className="card">
<h5>Scrollable</h5>
<div className="p-py-2">
Expand Down Expand Up @@ -253,6 +274,27 @@ const TabViewDemo = () => {
</TabView>
</div>
<div className="card">
<h5>Closable</h5>
<TabView>
<TabPanel header="Header I">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</TabPanel>
<TabPanel header="Header II" closable>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
</TabPanel>
<TabPanel header="Header III" closable>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
</TabPanel>
</TabView>
</div>
<div className="card">
<h5>Scrollable</h5>
<div className="p-py-2">
Expand Down Expand Up @@ -381,6 +423,27 @@ const TabViewDemo = () => {
</TabView>
</div>
<div className="card">
<h5>Closable</h5>
<TabView>
<TabPanel header="Header I">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</TabPanel>
<TabPanel header="Header II" closable>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
</TabPanel>
<TabPanel header="Header III" closable>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
</TabPanel>
</TabView>
</div>
<div className="card">
<h5>Scrollable</h5>
<div className="p-py-2">
Expand Down Expand Up @@ -515,6 +578,27 @@ const TabViewDemo = () => {
</TabView>
</div>
<div className="card">
<h5>Closable</h5>
<TabView>
<TabPanel header="Header I">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</TabPanel>
<TabPanel header="Header II" closable>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
</TabPanel>
<TabPanel header="Header III" closable>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
</TabPanel>
</TabView>
</div>
<div className="card">
<h5>Scrollable</h5>
<div className="p-py-2">
Expand Down Expand Up @@ -696,6 +780,12 @@ template: (options) => {
<td>false</td>
<td>Whether the tab is disabled.</td>
</tr>
<tr>
<td>closable</td>
<td>boolean</td>
<td>false</td>
<td>Defines if tab can be removed.</td>
</tr>
<tr>
<td>headerStyle</td>
<td>object</td>
Expand Down

0 comments on commit e365113

Please sign in to comment.