apitech
/
jitsi-meet
mirror of https://github.com/jitsi/jitsi-meet
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

ref(abstract-button) Convert to TS (#13093)

Browse Source
pull/13097/head jitsi-meet_8447
Robert Pintilii 2 years ago committed by GitHub
parent 31073fb5df
commit 3dd9a303c3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 80 additions and 96 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 58
      react/features/base/toolbox/components/AbstractButton.tsx
  2. 73
      react/features/base/toolbox/components/AbstractToolboxItem.tsx
  3. 17
      react/features/base/toolbox/components/ToolboxItem.native.tsx
  4. 26
      react/features/base/toolbox/components/ToolboxItem.web.tsx
  5. 2
      react/features/base/ui/components/web/ContextMenuItem.tsx

58
react/features/base/toolbox/components/AbstractButton.js → react/features/base/toolbox/components/AbstractButton.tsx
Unescape View File

@ -1,80 +1,77 @@
// @flow
import React, { Component } from 'react';
import React, { Component, ReactNode } from 'react';
import { GestureResponderEvent } from 'react-native';
import { NOTIFY_CLICK_MODE } from '../../../toolbox/constants';
import { combineStyles } from '../../styles';
import { combineStyles } from '../../styles/functions.any';
import type { Styles } from './AbstractToolboxItem';
import { Styles } from './AbstractToolboxItem';
import ToolboxItem from './ToolboxItem';
export type Props = {|
export type Props = {
/**
* Function to be called after the click handler has been processed.
*/
afterClick: ?Function,
afterClick?: Function;
/**
* The button's key.
*/
buttonKey?: string,
buttonKey?: string;
/**
* Whether or not the button is displayed in a context menu.
*/
contextMenu?: boolean,
contextMenu?: boolean;
/**
* An extra class name to be added at the end of the element's class name
* in order to enable custom styling.
*/
customClass?: string,
customClass?: string;
/**
* Extra styles which will be applied in conjunction with `styles` or
* `toggledStyles` when the button is disabled;.
*/
disabledStyles: ?Styles,
disabledStyles?: Styles;
/**
* External handler for click action.
*/
handleClick?: Function,
handleClick?: Function;
/**
* Notify mode for `toolbarButtonClicked` event -
* whether to only notify or to also prevent button click routine.
*/
notifyMode?: string,
notifyMode?: string;
/**
* Whether to show the label or not.
*/
showLabel: boolean,
showLabel: boolean;
/**
* Collection of styles for the button.
*/
styles: ?Styles,
styles?: Styles;
/**
* Collection of styles for the button, when in toggled state.
*/
toggledStyles: ?Styles,
toggledStyles?: Styles;
/**
* From which direction the tooltip should appear, relative to the button.
*/
tooltipPosition: string,
tooltipPosition: string;
/**
* Whether this button is visible or not.
*/
visible: boolean
|};
declare var APP: Object;
visible: boolean;
};
/**
* Default style for disabled buttons.
@ -93,7 +90,7 @@ export const defaultDisabledButtonStyles = {
/**
* An abstract implementation of a button.
*/
export default class AbstractButton<P: Props, S: *> extends Component<P, S> {
export default class AbstractButton<P extends Props, S> extends Component<P, S> {
static defaultProps = {
afterClick: undefined,
disabledStyles: defaultDisabledButtonStyles,
@ -160,7 +157,7 @@ export default class AbstractButton<P: Props, S: *> extends Component<P, S> {
*
* @abstract
*/
tooltip: ?string;
tooltip?: string;
/**
* The text to display in the tooltip when the button is toggled on.
@ -169,7 +166,7 @@ export default class AbstractButton<P: Props, S: *> extends Component<P, S> {
*
* @abstract
*/
toggledTooltip: ?string;
toggledTooltip?: string;
/**
* Initializes a new {@code AbstractButton} instance.
@ -270,7 +267,7 @@ export default class AbstractButton<P: Props, S: *> extends Component<P, S> {
* @private
* @returns {?Styles}
*/
_getStyles(): ?Styles {
_getStyles(): Styles | undefined {
const { disabledStyles, styles, toggledStyles } = this.props;
const buttonStyles
= (this._isToggled() ? toggledStyles : styles) || styles;
@ -326,8 +323,6 @@ export default class AbstractButton<P: Props, S: *> extends Component<P, S> {
return undefined;
}
_onClick: (*) => void;
/**
* Handles clicking / pressing the button.
*
@ -335,7 +330,7 @@ export default class AbstractButton<P: Props, S: *> extends Component<P, S> {
* @private
* @returns {void}
*/
_onClick(e) {
_onClick(e?: React.MouseEvent<HTMLElement> | GestureResponderEvent) {
const { afterClick, handleClick, notifyMode, buttonKey } = this.props;
if (typeof APP !== 'undefined' && notifyMode) {
@ -352,9 +347,10 @@ export default class AbstractButton<P: Props, S: *> extends Component<P, S> {
this._handleClick();
}
afterClick && afterClick(e);
afterClick?.(e);
// blur after click to release focus from button to allow PTT.
// @ts-ignore
e?.currentTarget?.blur && e.currentTarget.blur();
}
@ -364,8 +360,8 @@ export default class AbstractButton<P: Props, S: *> extends Component<P, S> {
* @inheritdoc
* @returns {React$Node}
*/
render(): React$Node {
const props = {
render(): ReactNode {
const props: any = {
...this.props,
accessibilityLabel: this._getAccessibilityLabel(),
elementAfter: this._getElementAfter(),

73
react/features/base/toolbox/components/AbstractToolboxItem.js → react/features/base/toolbox/components/AbstractToolboxItem.tsx
Unescape View File

@ -1,109 +1,106 @@
// @flow
import React, { Component, ReactElement, ReactNode } from 'react';
import { WithTranslation } from 'react-i18next';
import { GestureResponderEvent } from 'react-native';
import { Component } from 'react';
import type { StyleType } from '../../styles';
import type { StyleType } from '../../styles/functions.any';
export type Styles = {
/**
* Style for the item's icon.
*/
iconStyle: StyleType,
iconStyle: StyleType;
/**
* Style for the item's label.
*/
labelStyle: StyleType,
labelStyle: StyleType;
/**
* Style for the item itself.
*/
style: StyleType,
style: StyleType;
/**
* Color for the item underlay (shows when clicked).
*/
underlayColor: ?string
underlayColor?: string;
};
export type Props = {
export interface IProps extends WithTranslation {
/**
* A succinct description of what the item does. Used by accessibility
* tools and torture tests.
*/
accessibilityLabel: string,
accessibilityLabel: string;
/**
* An extra class name to be added at the end of the element's class name
* in order to enable custom styling.
*/
customClass?: string,
customClass?: string;
/**
* Whether this item is disabled or not. When disabled, clicking an the item
* has no effect, and it may reflect on its style.
*/
disabled: boolean,
disabled: boolean;
/**
* A React Element to display at the end of {@code ToolboxItem}.
*/
elementAfter?: React$Node,
elementAfter?: ReactNode;
/**
* The icon to render for this {@code ToolboxItem}.
*/
icon: Object,
icon: Function;
/**
* The text associated with this item. When `showLabel` is set to
* {@code true}, it will be displayed alongside the icon.
*/
label: string,
label: string;
labelProps: any;
/**
* On click handler.
*/
onClick: Function,
onClick: (e?: React.MouseEvent<HTMLElement> | GestureResponderEvent) => void;
/**
* Whether to show the label or not.
*/
showLabel: boolean,
showLabel: boolean;
/**
* Collection of styles for the item. Used only on native.
*/
styles: ?Styles,
/**
* Invoked to obtain translated strings.
*/
t: ?Function,
styles?: Styles;
/**
* True if the item is toggled, false otherwise.
*/
toggled: ?boolean,
toggled?: boolean;
/**
* The text to display in the tooltip. Used only on web.
*/
tooltip: ?string,
tooltip?: string;
/**
* From which direction the tooltip should appear, relative to the
* item. Used only on web.
*/
tooltipPosition: string,
tooltipPosition: 'top' | 'bottom' | 'left' | 'right';
/**
* Whether this item is visible or not.
*/
visible: boolean
};
visible: boolean;
}
/**
* Abstract (base) class for an item in {@link Toolbox}. The item can be located
@ -111,7 +108,7 @@ export type Props = {
*
* @abstract
*/
export default class AbstractToolboxItem<P : Props> extends Component<P> {
export default class AbstractToolboxItem<P extends IProps> extends Component<P> {
/**
* Default values for {@code AbstractToolboxItem} component's properties.
*
@ -147,7 +144,7 @@ export default class AbstractToolboxItem<P : Props> extends Component<P> {
* @protected
* @returns {?string}
*/
get label(): ?string {
get label(): string | undefined {
return this._maybeTranslateAttribute(this.props.label, this.props.labelProps);
}
@ -158,8 +155,8 @@ export default class AbstractToolboxItem<P : Props> extends Component<P> {
* @protected
* @returns {?string}
*/
get tooltip(): ?string {
return this._maybeTranslateAttribute(this.props.tooltip);
get tooltip(): string | undefined {
return this._maybeTranslateAttribute(this.props.tooltip ?? '');
}
/**
@ -169,7 +166,7 @@ export default class AbstractToolboxItem<P : Props> extends Component<P> {
* @protected
* @returns {?string}
*/
get accessibilityLabel(): ?string {
get accessibilityLabel(): string {
return this._maybeTranslateAttribute(this.props.accessibilityLabel);
}
@ -182,7 +179,7 @@ export default class AbstractToolboxItem<P : Props> extends Component<P> {
* @private
* @returns {string}
*/
_maybeTranslateAttribute(text, textProps) {
_maybeTranslateAttribute(text: string, textProps?: any) {
const { t } = this.props;
if (textProps) {
@ -193,8 +190,6 @@ export default class AbstractToolboxItem<P : Props> extends Component<P> {
return typeof t === 'function' ? t(text) : text;
}
_onClick: (*) => void;
/**
* Handles clicking/pressing this {@code AbstractToolboxItem} by
* forwarding the event to the {@code onClick} prop of this instance if any.
@ -202,10 +197,10 @@ export default class AbstractToolboxItem<P : Props> extends Component<P> {
* @protected
* @returns {void}
*/
_onClick(...args) {
_onClick(...args: any) {
const { disabled, onClick } = this.props;
disabled || (onClick && onClick(...args));
disabled || onClick?.(...args);
}
/**
@ -216,7 +211,7 @@ export default class AbstractToolboxItem<P : Props> extends Component<P> {
* @protected
* @returns {ReactElement}
*/
_renderItem() {
_renderItem(): ReactElement | null {
// To be implemented by a subclass.
return null;
}

17
react/features/base/toolbox/components/ToolboxItem.native.js → react/features/base/toolbox/components/ToolboxItem.native.tsx
Unescape View File

@ -1,17 +1,14 @@
// @flow
import React from 'react';
import { Text, TouchableHighlight, View } from 'react-native';
import { Icon } from '../../icons';
import Icon from '../../icons/components/Icon';
import AbstractToolboxItem from './AbstractToolboxItem';
import type { Props } from './AbstractToolboxItem';
import AbstractToolboxItem, { IProps } from './AbstractToolboxItem';
/**
* Native implementation of {@code AbstractToolboxItem}.
*/
export default class ToolboxItem extends AbstractToolboxItem<Props> {
export default class ToolboxItem extends AbstractToolboxItem<IProps> {
/**
* Renders the {@code Icon} part of this {@code ToolboxItem}.
*
@ -24,7 +21,7 @@ export default class ToolboxItem extends AbstractToolboxItem<Props> {
return (
<Icon
src = { this.props.icon }
style = { styles && styles.iconStyle } />
style = { styles?.iconStyle } />
);
}
@ -49,7 +46,7 @@ export default class ToolboxItem extends AbstractToolboxItem<Props> {
// XXX When using a wrapper View, apply the style to it instead of
// applying it to the TouchableHighlight.
let style = styles && styles.style;
let style = styles?.style;
if (showLabel) {
// XXX TouchableHighlight requires 1 child. If there's a need to
@ -58,7 +55,7 @@ export default class ToolboxItem extends AbstractToolboxItem<Props> {
children = (
<View style = { style }>
{ children }
<Text style = { styles && styles.labelStyle }>
<Text style = { styles?.labelStyle }>
{ this.label }
</Text>
{ elementAfter }
@ -78,7 +75,7 @@ export default class ToolboxItem extends AbstractToolboxItem<Props> {
disabled = { disabled }
onPress = { onClick }
style = { style }
underlayColor = { styles && styles.underlayColor } >
underlayColor = { styles?.underlayColor } >
{ children }
</TouchableHighlight>
);

26
react/features/base/toolbox/components/ToolboxItem.web.js → react/features/base/toolbox/components/ToolboxItem.web.tsx
Unescape View File

@ -1,44 +1,40 @@
// @flow
import React, { Fragment } from 'react';
import { Icon } from '../../icons';
import Icon from '../../icons/components/Icon';
import Tooltip from '../../tooltip/components/Tooltip';
import ContextMenuItem from '../../ui/components/web/ContextMenuItem';
import AbstractToolboxItem from './AbstractToolboxItem';
import type { Props as AbstractToolboxItemProps } from './AbstractToolboxItem';
import type { IProps as AbstractToolboxItemProps } from './AbstractToolboxItem';
type Props = AbstractToolboxItemProps & {
interface IProps extends AbstractToolboxItemProps {
/**
* Whether or not the item is displayed in a context menu.
*/
contextMenu?: boolean,
contextMenu?: boolean;
/**
* On key down handler.
*/
onKeyDown: Function
};
onKeyDown: (e?: React.KeyboardEvent) => void;
}
/**
* Web implementation of {@code AbstractToolboxItem}.
*/
export default class ToolboxItem extends AbstractToolboxItem<Props> {
export default class ToolboxItem extends AbstractToolboxItem<IProps> {
/**
* Initializes a new {@code ToolboxItem} instance.
*
* @inheritdoc
*/
constructor(props: Props) {
constructor(props: IProps) {
super(props);
this._onKeyPress = this._onKeyPress.bind(this);
}
_onKeyPress: (Object) => void;
/**
* Handles 'Enter' and Space key on the button to trigger onClick for accessibility.
*
@ -46,8 +42,8 @@ export default class ToolboxItem extends AbstractToolboxItem<Props> {
* @private
* @returns {void}
*/
_onKeyPress(event) {
if (event.key === 'Enter' || event.key === ' ') {
_onKeyPress(event?: React.KeyboardEvent) {
if (event?.key === 'Enter' || event?.key === ' ') {
event.preventDefault();
this.props.onClick();
}
@ -113,7 +109,7 @@ export default class ToolboxItem extends AbstractToolboxItem<Props> {
if (useTooltip) {
children = (
<Tooltip
content = { this.tooltip }
content = { this.tooltip ?? '' }
position = { tooltipPosition }>
{ children }
</Tooltip>

2
react/features/base/ui/components/web/ContextMenuItem.tsx
Unescape View File

@ -57,7 +57,7 @@ export interface IProps {
/**
* Click handler.
*/
onClick?: (e?: React.MouseEvent) => void;
onClick?: (e?: React.MouseEvent<any>) => void;
/**
* Keydown handler.

Write Preview
Loading…
Cancel
Save