Skip to content

Commit

Permalink
Fix primefaces#3312: Tabview add onBeforeTabClose/Change events
Browse files Browse the repository at this point in the history
  • Loading branch information
melloware committed Sep 13, 2022
1 parent 9b85fb4 commit 7ca8cfd
Show file tree
Hide file tree
Showing 4 changed files with 98 additions and 12 deletions.
48 changes: 48 additions & 0 deletions api-generator/components/tabview.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,38 @@ const TabViewProps = [
];

const TabViewEvents = [
{
name: 'onBeforeTabChange',
description: 'Callback to invoke before an active tab is changed. Return false to prevent tab from changing.',
arguments: [
{
name: 'event.originalEvent',
type: 'object',
description: 'Browser event'
},
{
name: 'event.index',
type: 'number',
description: 'Index of the selected tab'
}
]
},
{
name: 'onBeforeTabClose',
description: 'Callback to invoke before an active tab is close. Return false to prevent tab from closing.',
arguments: [
{
name: 'event.originalEvent',
type: 'object',
description: 'Browser event'
},
{
name: 'event.index',
type: 'number',
description: 'Index of the selected tab'
}
]
},
{
name: 'onTabChange',
description: 'Callback to invoke when an active tab is changed.',
Expand All @@ -53,6 +85,22 @@ const TabViewEvents = [
description: 'Index of the selected tab'
}
]
},
{
name: 'onTabClose',
description: 'Callback to invoke when an active tab is close.',
arguments: [
{
name: 'event.originalEvent',
type: 'object',
description: 'Browser event'
},
{
name: 'event.index',
type: 'number',
description: 'Index of the selected tab'
}
]
}
];

Expand Down
30 changes: 27 additions & 3 deletions components/doc/tabview/index.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React, { memo } from 'react';
import Link from 'next/link';
import { TabView, TabPanel } from '../../lib/tabview/TabView';
import { useLiveEditorTabs } from '../common/liveeditor';
import React, { memo } from 'react';
import { TabPanel, TabView } from '../../lib/tabview/TabView';
import { CodeHighlight } from '../common/codehighlight';
import { DevelopmentSection } from '../common/developmentsection';
import { useLiveEditorTabs } from '../common/liveeditor';

const TabViewDoc = memo(() => {
const sources = {
Expand Down Expand Up @@ -1119,6 +1119,22 @@ template: (options) => {
</tr>
</thead>
<tbody>
<tr>
<td>onBeforeTabChange</td>
<td>
event.originalEvent: Browser event <br />
event.index: Index of the selected tab
</td>
<td>Callback to invoke before an active tab is changed. Return false to prevent tab from changing.</td>
</tr>
<tr>
<td>onBeforeTabClose</td>
<td>
event.originalEvent: Browser event <br />
event.index: Index of the selected tab
</td>
<td>Callback to invoke before an active tab is close. Return false to prevent tab from closing.</td>
</tr>
<tr>
<td>onTabChange</td>
<td>
Expand All @@ -1127,6 +1143,14 @@ template: (options) => {
</td>
<td>Callback to invoke when an active tab is changed.</td>
</tr>
<tr>
<td>onTabClose</td>
<td>
event.originalEvent: Browser event <br />
event.index: Index of the selected tab
</td>
<td>Callback to invoke when an active tab is closed.</td>
</tr>
</tbody>
</table>
</div>
Expand Down
24 changes: 18 additions & 6 deletions components/lib/tabview/TabView.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,26 +39,36 @@ export const TabView = React.forwardRef((props, ref) => {
};

const onTabHeaderClose = (event, index) => {
event.preventDefault();

// give caller a chance to stop the selection
if (props.onBeforeTabClose && props.onBeforeTabClose({ originalEvent: event, index }) === false) {
return;
}

setHiddenTabsState([...hiddenTabsState, index]);

if (props.onTabClose) {
props.onTabClose({ originalEvent: event, index });
}

event.preventDefault();
};

const onTabHeaderClick = (event, tab, index) => {
if (event) {
event.preventDefault();
}

if (!tab.props.disabled) {
// give caller a chance to stop the selection
if (props.onBeforeTabChange && props.onBeforeTabChange({ originalEvent: event, index }) === false) {
return;
}

if (props.onTabChange) props.onTabChange({ originalEvent: event, index });
else setActiveIndexState(index);
}

updateScrollBar(index);

if (event) {
event.preventDefault();
}
};

const onKeyDown = (event, tab, index) => {
Expand Down Expand Up @@ -313,6 +323,8 @@ TabView.defaultProps = {
style: null,
className: null,
renderActiveOnly: true,
onBeforeTabClose: null,
onBeforeTabChange: null,
onTabChange: null,
onTabClose: null,
scrollable: false,
Expand Down
8 changes: 5 additions & 3 deletions components/lib/tabview/tabview.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -46,13 +46,15 @@ interface TabViewTabCloseParams {

export interface TabViewProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
activeIndex?: number;
children?: React.ReactNode;
panelContainerClassName?: string;
panelContainerStyle?: object;
renderActiveOnly?: boolean;
scrollable?: boolean;
panelContainerStyle?: object;
panelContainerClassName?: string;
onBeforeTabChange?(e: TabViewTabChangeParams): void;
onBeforeTabClose?(e: TabViewTabCloseParams): void;
onTabChange?(e: TabViewTabChangeParams): void;
onTabClose?(e: TabViewTabCloseParams): void;
children?: React.ReactNode;
}

// tslint:disable-next-line:max-classes-per-file
Expand Down

0 comments on commit 7ca8cfd

Please sign in to comment.