feat(ui-components) Add button component (#11868)

react/features/base/react/components/native/Button.tsx

@@ -11,13 +11,13 @@ import {
 import BaseTheme from '../../../ui/components/BaseTheme.native';
 // @ts-ignore
 import { BUTTON_MODES, BUTTON_TYPES } from '../../constants';
-import { ButtonProps } from '../../types';
+import { IButtonProps } from '../../types';
 
 // @ts-ignore
 import styles from './styles';
 
 
-const Button: React.FC<ButtonProps> = ({
+const Button: React.FC<IButtonProps> = ({
     accessibilityLabel,
     color: buttonColor,
     disabled,
@@ -27,7 +27,7 @@ const Button: React.FC<ButtonProps> = ({
     onPress,
     style,
     type
-}: ButtonProps) => {
+}: IButtonProps) => {
     const { t } = useTranslation();
     const { CONTAINED } = BUTTON_MODES;
     const { DESTRUCTIVE, PRIMARY, SECONDARY, TERTIARY } = BUTTON_TYPES;

react/features/base/react/constants.ts

@@ -1,5 +1,3 @@
-// @flow
-
 /**
  * Z-index for components that are to be rendered like an overlay, to be over
  * everything, such as modal-type of components, or dialogs.
@@ -9,12 +7,12 @@ export const OVERLAY_Z_INDEX = 1000;
 /**
  * The types of the buttons.
  */
-export const BUTTON_TYPES = {
-    PRIMARY: 'primary',
-    SECONDARY: 'secondary',
-    TERTIARY: 'tertiary',
-    DESTRUCTIVE: 'destructive'
-};
+export enum BUTTON_TYPES {
+    PRIMARY = 'primary',
+    SECONDARY = 'secondary',
+    TERTIARY = 'tertiary',
+    DESTRUCTIVE = 'destructive'
+}
 
 /**
  * The modes of the buttons.

react/features/base/react/types.ts

@@ -1,13 +1,10 @@
-export interface ButtonProps {
-    accessibilityLabel?: string;
+import { ButtonProps } from '../components/common/types';
+
+export interface IButtonProps extends ButtonProps {
     color?: string;
-    disabled?: boolean;
-    icon?: JSX.Element;
-    label?: string;
     labelStyle?: Object|undefined;
     onPress?: Function;
     style?: Object|undefined;
-    type?: string;
 }
 
 export interface IconButtonProps {