mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 15:07:13 +08:00
1cf1eca002
closes #27949 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> - Typescript is complaining about the `onClick` event type of the `IonTabButton` ```ts const App: React.FC = () => { async function handleTabClick(e: CustomEvent<HTMLIonTabButtonElement>) { alert(e.detail.tab); } return ( <IonTabButton tab="myTab" onClick={handleTabClick}> ); }; ``` ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - `onClick` handler uses `CustomEvent` type - Typescript does not error ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. -->
51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import type { JSX as LocalJSX } from '@ionic/core/components';
|
|
import React from 'react';
|
|
|
|
import type { RouterOptions } from '../../models';
|
|
import type { IonicReactProps } from '../IonicReactProps';
|
|
import { IonTabButtonInner } from '../inner-proxies';
|
|
|
|
type Props = LocalJSX.IonTabButton &
|
|
IonicReactProps & {
|
|
routerOptions?: RouterOptions;
|
|
ref?: React.Ref<HTMLIonTabButtonElement>;
|
|
onClick?: (e: CustomEvent) => void;
|
|
};
|
|
|
|
export const IonTabButton = /*@__PURE__*/ (() =>
|
|
class extends React.Component<Props> {
|
|
constructor(props: Props) {
|
|
super(props);
|
|
this.handleIonTabButtonClick = this.handleIonTabButtonClick.bind(this);
|
|
}
|
|
|
|
handleIonTabButtonClick() {
|
|
if (this.props.onClick) {
|
|
this.props.onClick(
|
|
new CustomEvent('ionTabButtonClick', {
|
|
detail: {
|
|
tab: this.props.tab,
|
|
href: this.props.href,
|
|
routeOptions: this.props.routerOptions,
|
|
},
|
|
})
|
|
);
|
|
}
|
|
}
|
|
|
|
render() {
|
|
/**
|
|
* onClick is excluded from the props, since it has a custom
|
|
* implementation within IonTabBar.tsx. Calling onClick within this
|
|
* component would result in duplicate handler calls.
|
|
*/
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
const { onClick, ...rest } = this.props;
|
|
return <IonTabButtonInner onIonTabButtonClick={this.handleIonTabButtonClick} {...rest}></IonTabButtonInner>;
|
|
}
|
|
|
|
static get displayName() {
|
|
return 'IonTabButton';
|
|
}
|
|
})();
|