imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Extend HeaderButton and HeaderButtons to be more generic

Browse source
This commit is contained in:
Michael Telatynski 2021-05-25 13:53:46 +01:00
parent 96928e5d31
commit 02d11b8926
2 changed files with 13 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/components/views/right_panel/HeaderButton.tsx
View file

@ -29,8 +29,6 @@ interface IProps {
isHighlighted: boolean; isHighlighted: boolean;
// click handler // click handler
onClick: () => void; onClick: () => void;
// The badge to display above the icon
badge?: React.ReactNode;
// The parameters to track the click event // The parameters to track the click event
analytics: Parameters<typeof Analytics.trackEvent>; analytics: Parameters<typeof Analytics.trackEvent>;
@ -40,31 +38,29 @@ interface IProps {
title: string; title: string;
} }
// TODO: replace this, the composer buttons and the right panel buttons with a unified // TODO: replace this, the composer buttons and the right panel buttons with a unified representation
// representation
@replaceableComponent("views.right_panel.HeaderButton") @replaceableComponent("views.right_panel.HeaderButton")
export default class HeaderButton extends React.Component<IProps> { export default class HeaderButton extends React.Component<IProps> {
constructor(props: IProps) { private onClick = () => {
super(props);
this.onClick = this.onClick.bind(this);
}
private onClick() {
Analytics.trackEvent(...this.props.analytics); Analytics.trackEvent(...this.props.analytics);
this.props.onClick(); this.props.onClick();
} };
public render() { public render() {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const {isHighlighted, onClick, analytics, name, title, ...props} = this.props;
const classes = classNames({ const classes = classNames({
mx_RightPanel_headerButton: true, mx_RightPanel_headerButton: true,
mx_RightPanel_headerButton_highlight: this.props.isHighlighted, mx_RightPanel_headerButton_highlight: isHighlighted,
[`mx_RightPanel_${this.props.name}`]: true, [`mx_RightPanel_${name}`]: true,
}); });
return <AccessibleTooltipButton return <AccessibleTooltipButton
aria-selected={this.props.isHighlighted} {...props}
aria-selected={isHighlighted}
role="tab" role="tab"
title={this.props.title} title={title}
className={classes} className={classes}
onClick={this.onClick} onClick={this.onClick}
/>; />;

4
src/components/views/right_panel/HeaderButtons.tsx
View file

@ -43,11 +43,11 @@ interface IState {
interface IProps {} interface IProps {}
@replaceableComponent("views.right_panel.HeaderButtons") @replaceableComponent("views.right_panel.HeaderButtons")
export default abstract class HeaderButtons extends React.Component<IProps, IState> { export default abstract class HeaderButtons<P> extends React.Component<IProps & P, IState> {
private storeToken: EventSubscription; private storeToken: EventSubscription;
private dispatcherRef: string; private dispatcherRef: string;
constructor(props: IProps, kind: HeaderKind) { constructor(props: IProps & P, kind: HeaderKind) {
super(props); super(props);
const rps = RightPanelStore.getSharedInstance(); const rps = RightPanelStore.getSharedInstance();